GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-10-14 22:03:38 +02:00
Code Issues Releases Activity

Fix lint.

Browse Source
This commit is contained in:
Bogdan Bodnar
2019-08-27 16:09:18 +02:00
parent 18e8e20206
commit c0d742b13b
36 changed files with 620 additions and 831 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/bootstrap/RadioSet.js
View File

@@ -5,76 +5,89 @@
* See /LICENSE for more information.
*/
import React from 'react';
import PropTypes from 'prop-types';
import {useUID} from 'react-uid';
import React from "react";
import PropTypes from "prop-types";
import { useUID } from "react-uid/dist/es5/index";
import {formFieldsSize} from './constants';
import { formFieldsSize } from "./constants";
RadioSet.propTypes = {
/** Name attribute of the input HTML tag.*/
/** Name attribute of the input HTML tag. */
name: PropTypes.string.isRequired,
/** RadioSet label .*/
/** RadioSet label . */
label: PropTypes.string,
/** Choices .*/
/** Choices . */
choices: PropTypes.arrayOf(PropTypes.shape({
/** Choice lable .*/
/** Choice lable . */
label: PropTypes.string.isRequired,
/** Choice value .*/
/** Choice value . */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
})).isRequired,
/** Initial value .*/
/** Initial value . */
value: PropTypes.string,
/** Help text message .*/
/** Help text message . */
helpText: PropTypes.string,
};
export function RadioSet({name, label, choices, value, helpText, ...props}) {
export default function RadioSet({
name, label, choices, value, helpText, ...props
}) {
const uid = useUID();
const radios = choices.map((choice, key) =>
<Radio
id={`${name}-${key}`}
key={key}
name={name}
label={choice.label}
value={choice.value}
helpText={choice.helpText}
checked={choice.value === value}
const radios = choices.map((choice, key) => {
const id = `${name}-${key}`;
return (
<Radio
id={id}
key={id}
name={name}
label={choice.label}
value={choice.value}
helpText={choice.helpText}
checked={choice.value === value}
{...props}
/>
{...props}
/>
);
});
return (
<div className={`form-group ${formFieldsSize}`} style={{ marginBottom: "1rem" }}>
{label
? (
<label className="col-12" htmlFor={uid} style={{ paddingLeft: "0" }}>
{label}
</label>
)
: null}
{radios}
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
</div>
);
return <div className={`form-group ${formFieldsSize}`} style={{marginBottom: '1rem'}}>
{label ?
<label className='col-12' htmlFor={uid} style={{paddingLeft: '0'}}>
{label}
</label>
: null}
{radios}
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
</div>;
}
Radio.propTypes = {
label: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
helpText: PropTypes.string
helpText: PropTypes.string,
};
function Radio({label, id, helpText, ...props}) {
return <>
<div className='custom-control custom-radio custom-control-inline'>
<input
id={id}
className='custom-control-input'
type='radio'
function Radio({
label, id, helpText, ...props
}) {
return (
<>
<div className="custom-control custom-radio custom-control-inline">
<input
id={id}
className="custom-control-input"
type="radio"
{...props}
/>
<label className='custom-control-label' htmlFor={id}>{label}</label>
</div>
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
</>
{...props}
/>
<label className="custom-control-label" htmlFor={id}>{label}</label>
</div>
{helpText ? <small className="form-text text-muted">{helpText}</small> : null}
</>
);
}