Refactor SimpleInput

This commit is contained in:
Alex Gleason 2020-04-22 22:02:56 -05:00
parent 84ee8880e1
commit a6de9d5e00
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7

View file

@ -8,6 +8,7 @@ export const InputContainer = (props) => {
const containerClass = classNames('input', { const containerClass = classNames('input', {
'with_label': props.label, 'with_label': props.label,
'required': props.required, 'required': props.required,
'boolean': props.type === 'checkbox',
}, props.extraClass); }, props.extraClass);
return ( return (
@ -22,6 +23,7 @@ InputContainer.propTypes = {
label: PropTypes.string, label: PropTypes.string,
hint: PropTypes.string, hint: PropTypes.string,
required: PropTypes.bool, required: PropTypes.bool,
type: PropTypes.string,
children: PropTypes.node, children: PropTypes.node,
extraClass: PropTypes.string, extraClass: PropTypes.string,
}; };
@ -42,6 +44,26 @@ LabelInput.propTypes = {
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
}; };
export class SimpleInput extends ImmutablePureComponent {
static propTypes = {
label: PropTypes.string,
hint: PropTypes.string,
}
render() {
const { hint, ...props } = this.props;
const Input = this.props.label ? LabelInput : 'input';
return (
<InputContainer {...this.props}>
<Input {...props} />
</InputContainer>
);
}
}
export class SimpleForm extends ImmutablePureComponent { export class SimpleForm extends ImmutablePureComponent {
static propTypes = { static propTypes = {
@ -83,23 +105,9 @@ export class FieldsGroup extends ImmutablePureComponent {
} }
export class Checkbox extends ImmutablePureComponent { export const Checkbox = props => (
<SimpleInput type='checkbox' {...props} />
static propTypes = { );
label: PropTypes.string,
}
render() {
const Input = this.props.label ? LabelInput : 'input';
return (
<InputContainer {...this.props} extraClass='boolean'>
<Input type='checkbox' {...this.props} />
</InputContainer>
);
}
}
export class RadioGroup extends ImmutablePureComponent { export class RadioGroup extends ImmutablePureComponent {
@ -202,44 +210,14 @@ export class SelectDropdown extends ImmutablePureComponent {
} }
export class TextInput extends ImmutablePureComponent { export const TextInput = props => (
<SimpleInput type='text' {...props} />
);
static propTypes = { export const FileChooser = props => (
label: PropTypes.string, <SimpleInput type='file' {...props} />
} );
render() { FileChooser.defaultProps = {
const Input = this.props.label ? LabelInput : 'input'; accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
};
return (
<InputContainer {...this.props}>
<Input type='text' {...this.props} />
</InputContainer>
);
}
}
export class FileChooser extends ImmutablePureComponent {
static propTypes = {
label: PropTypes.string,
hint: PropTypes.string,
}
static defaultProps = {
accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
}
render() {
const { hint, ...props } = this.props;
const Input = this.props.label ? LabelInput : 'input';
return (
<InputContainer {...this.props}>
<Input type='file' {...props} />
</InputContainer>
);
}
}