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

more input fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-11 12:53:19 +01:00
parent 93212342da
commit 35008202e8
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,12 +48,21 @@ export default class Input extends PureComponent<InputProps, InputState> {
} }
public InputComponent = () => { public InputComponent = () => {
const { type, options, group, name } = this.props const { type, options, group, name, required } = this.props
const wrapClass = this.inputWrapClasses()
if (type === 'select') { if (type === 'select') {
return ( return (
<div className={this.inputWrapClasses()}> <div className={wrapClass}>
<select className={styles.select} {...this.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>
{options && {options &&
options.map((option: string, index: number) => ( options.map((option: string, index: number) => (
@ -71,8 +80,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
) )
} else if (type === 'textarea') { } else if (type === 'textarea') {
return ( return (
<div className={this.inputWrapClasses()}> <div className={wrapClass}>
<textarea className={styles.input} {...this.props} /> <textarea
id={name}
className={styles.input}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
/>
</div> </div>
) )
} else if (type === 'radio' || type === 'checkbox') { } else if (type === 'radio' || type === 'checkbox') {
@ -86,6 +101,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
id={slugify(option, { id={slugify(option, {
lower: true lower: true
})} })}
type={type}
name={name} name={name}
value={slugify(option, { value={slugify(option, {
lower: true lower: true
@ -106,14 +122,26 @@ export default class Input extends PureComponent<InputProps, InputState> {
} }
return ( return (
<div className={this.inputWrapClasses()}> <div className={wrapClass}>
{group ? ( {group ? (
<InputGroup> <InputGroup>
<input className={styles.input} {...this.props} /> <input
id={name}
className={styles.input}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
/>
{group} {group}
</InputGroup> </InputGroup>
) : ( ) : (
<input className={styles.input} {...this.props} /> <input
id={name}
className={styles.input}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
{...this.props}
/>
)} )}
{type === 'search' && <SearchIcon />} {type === 'search' && <SearchIcon />}