oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

Merge pull request #13 from oceanprotocol/fix/form-props

Browse Source 
fix form input props flow
This commit is contained in:
Jernej Pregelj 2019-02-11 14:15:35 +01:00 committed by GitHub
commit 6e31d38d00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 60 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/atoms/Form/Input.tsx
View File

@ -47,47 +47,62 @@ export default class Input extends PureComponent<InputProps, InputState> {
this.setState({ isFocused: !this.state.isFocused }) this.setState({ isFocused: !this.state.isFocused })
} }
public InputComponent = ({ ...props }) => { public InputComponent = () => {
if (props.type === 'select') { const { type, options, group, name, required } = this.props
const wrapClass = this.inputWrapClasses()
if (type === 'select') {
return ( return (
<div className={this.inputWrapClasses()}> <div className={wrapClass}>
<select className={styles.select} {...props}> <select
id={name}
className={styles.select}
name={name}
required={required}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
>
<option value="none">---</option> <option value="none">---</option>
{props.options && {options &&
props.options.map( options.map((option: string, index: number) => (
(option: string, index: number) => ( <option
<option key={index}
key={index} value={slugify(option, {
value={slugify(option, { lower: true
lower: true })}
})} >
> {option}
{option} </option>
</option> ))}
)
)}
</select> </select>
</div> </div>
) )
} else if (props.type === 'textarea') { } else if (type === 'textarea') {
return ( return (
<div className={this.inputWrapClasses()}> <div className={wrapClass}>
<textarea className={styles.input} {...props} /> <textarea
id={name}
className={styles.input}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
/>
</div> </div>
) )
} else if (props.type === 'radio' || props.type === 'checkbox') { } else if (type === 'radio' || type === 'checkbox') {
return ( return (
<div className={styles.radioGroup}> <div className={styles.radioGroup}>
{props.options && {options &&
props.options.map((option: string, index: number) => ( options.map((option: string, index: number) => (
<div className={styles.radioWrap} key={index}> <div className={styles.radioWrap} key={index}>
<input <input
className={styles.radio} className={styles.radio}
type={this.props.type}
id={slugify(option, { id={slugify(option, {
lower: true lower: true
})} })}
name={this.props.name} type={type}
name={name}
value={slugify(option, { value={slugify(option, {
lower: true lower: true
})} })}
@ -107,32 +122,35 @@ export default class Input extends PureComponent<InputProps, InputState> {
} }
return ( return (
<div className={this.inputWrapClasses()}> <div className={wrapClass}>
{props.group ? ( {group ? (
<InputGroup> <InputGroup>
<input className={styles.input} {...props} /> <input
{props.group} id={name}
className={styles.input}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
/>
{group}
</InputGroup> </InputGroup>
) : ( ) : (
<input className={styles.input} {...props} /> <input
id={name}
className={styles.input}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
/>
)} )}
{props.type === 'search' && <SearchIcon />} {type === 'search' && <SearchIcon />}
</div> </div>
) )
} }
public render() { public render() {
const { const { name, label, required, help, additionalComponent } = this.props
name,
label,
required,
type,
help,
additionalComponent,
options,
...props
} = this.props
return ( return (
<Row> <Row>
@ -140,17 +158,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
{label} {label}
</Label> </Label>
<this.InputComponent <this.InputComponent />
id={name}
label={label}
name={name}
required={required}
type={type}
options={options}
{...props}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
/>
{help && <Help>{help}</Help>} {help && <Help>{help}</Help>}