Refactor SimpleInput
This commit is contained in:
parent
84ee8880e1
commit
a6de9d5e00
1 changed files with 34 additions and 56 deletions
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in a new issue