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

fix all the form component things

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-07 17:03:37 +01:00
parent 27465e722a
commit 02aaf42f4a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 69 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,16 +29,6 @@ interface InputState {
isFocused: boolean
}
const Tag = ({ ...props }) => {
if (props.tag && props.tag === 'select') {
return <select className={styles.select} {...props} />
} else if (props.tag && props.tag === 'textarea') {
return <textarea className={styles.input} {...props} />
} else {
return <input className={styles.input} {...props} />
}
}
export default class Input extends PureComponent<InputProps, InputState> {
public state: InputState = { isFocused: false }
@ -58,6 +48,58 @@ export default class Input extends PureComponent<InputProps, InputState> {
this.setState({ isFocused: !this.state.isFocused })
}
public InputComponent = ({ ...props }) => {
if (props.type === 'select') {
return (
<div className={this.inputWrapClasses()}>
<select className={styles.select} {...props}>
{props.options &&
props.options.map((option: any, index: number) => (
<option key={index} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
)
} else if (props.type === 'textarea') {
return (
<div className={this.inputWrapClasses()}>
<textarea className={styles.input} {...props} />
</div>
)
} else if (props.type === 'radio' || props.type === 'checkbox') {
return (
<div className={styles.radioGroup}>
{props.options &&
props.options.map((option: any, index: number) => (
<div className={styles.radioWrap} key={index}>
<input
className={styles.radio}
type={this.props.type}
id={option.value}
name={this.props.name}
value={option.value}
/>
<label
className={styles.radioLabel}
htmlFor={option.value}
>
{option.label}
</label>
</div>
))}
</div>
)
}
return (
<div className={this.inputWrapClasses()}>
<input className={styles.input} {...props} />
</div>
)
}
public render() {
const {
name,
@ -65,9 +107,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
required,
type,
help,
tag,
additionalComponent,
children,
options,
...props
} = this.props
@ -78,50 +118,18 @@ export default class Input extends PureComponent<InputProps, InputState> {
{label}
</Label>
{type === 'radio' || type === 'checkbox' ? (
<div className={styles.radioGroup}>
{options &&
options.map((option, index) => (
<div className={styles.radioWrap} key={index}>
<input
className={styles.radio}
type={this.props.type}
id={option.value}
name={this.props.name}
value={option.value}
/>
<label
className={styles.radioLabel}
htmlFor={option.value}
>
{option.label}
</label>
</div>
))}
</div>
) : (
<div className={this.inputWrapClasses()}>
<Tag
id={name}
name={name}
required={required}
type={type}
{...props}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
>
{tag === 'select'
? options &&
options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}
</option>
))
: children}
</Tag>
{type === 'search' && <SearchIcon />}
</div>
)}
<this.InputComponent
id={name}
label={label}
name={name}
required={required}
type={type}
options={options}
{...props}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
/>
{type === 'search' && <SearchIcon />}
{help && <Help>{help}</Help>}

7
src/data/form-styleguide.json
View File

@ -6,7 +6,8 @@
"label": "Your name",
"placeholder": "i.e. Jelly McJellyfish",
"type": "text",
"required": true
"required": true,
"help": "Help me"
},
"email": {
"label": "Your email",
@ -17,7 +18,7 @@
"message": {
"label": "Your message",
"placeholder": "i.e. jelly@mcjellyfish.com",
"tag": "textarea",
"type": "textarea",
"required": true
},
"about": {
@ -52,7 +53,7 @@
},
"industry": {
"label": "Industry",
"tag": "select",
"type": "select",
"required": true,
"options": [
{

2
src/pages/Styleguide.tsx
View File

@ -15,9 +15,9 @@ class Styleguide extends Component {
label={value.label}
placeholder={value.placeholder}
required={value.required}
tag={value.tag}
type={value.type}
help={value.help}
options={value.options}
/>
))