oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

input placeholder fix

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-08-05 10:27:33 +02:00
parent 5c312e4784
commit 4bdc1a257d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 10 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/atoms/Input/InputElement.tsx
View File

@ -6,26 +6,17 @@ import FilesInput from '../../molecules/FormFields/FilesInput'
import Terms from '../../molecules/FormFields/Terms' import Terms from '../../molecules/FormFields/Terms'
import Price from '../../molecules/FormFields/Price' import Price from '../../molecules/FormFields/Price'
const DefaultInput = ( const DefaultInput = (props: InputProps) => (
{ name, type }: { name: string; type?: string }, <input className={styles.input} id={props.name} {...props} />
props: InputProps
) => (
<input
id={name}
className={styles.input}
name={name}
{...props}
type={type || 'text'}
/>
) )
export default function InputElement(props: InputProps): ReactElement { export default function InputElement(props: InputProps): ReactElement {
const { type, options, rows, name, prefix, postfix } = props const { type, options, name, prefix, postfix } = props
switch (type) { switch (type) {
case 'select': case 'select':
return ( return (
<select id={name} className={styles.select} name={name} {...props}> <select id={name} className={styles.select} {...props}>
<option value="">---</option> <option value="">---</option>
{options && {options &&
options options
@ -38,15 +29,7 @@ export default function InputElement(props: InputProps): ReactElement {
</select> </select>
) )
case 'textarea': case 'textarea':
return ( return <textarea id={name} className={styles.input} {...props} />
<textarea
id={name}
className={styles.input}
rows={rows}
name={name}
{...props}
/>
)
case 'radio': case 'radio':
case 'checkbox': case 'checkbox':
return ( return (
@ -58,7 +41,6 @@ export default function InputElement(props: InputProps): ReactElement {
className={styles.radio} className={styles.radio}
id={slugify(option)} id={slugify(option)}
type={type} type={type}
name={name}
{...props} {...props}
/> />
<label className={styles.radioLabel} htmlFor={slugify(option)}> <label className={styles.radioLabel} htmlFor={slugify(option)}>
@ -69,20 +51,20 @@ export default function InputElement(props: InputProps): ReactElement {
</div> </div>
) )
case 'files': case 'files':
return <FilesInput name={name} {...props} /> return <FilesInput {...props} />
case 'price': case 'price':
return <Price name={name} {...props} /> return <Price {...props} />
case 'terms': case 'terms':
return <Terms name={name} {...props} /> return <Terms {...props} />
default: default:
return prefix || postfix ? ( return prefix || postfix ? (
<div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}> <div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>
{prefix && <div className={styles.prefix}>{prefix}</div>} {prefix && <div className={styles.prefix}>{prefix}</div>}
<DefaultInput name={name} type={type || 'text'} /> <DefaultInput type={type || 'text'} {...props} />
{postfix && <div className={styles.postfix}>{postfix}</div>} {postfix && <div className={styles.postfix}>{postfix}</div>}
</div> </div>
) : ( ) : (
<DefaultInput name={name} type={type || 'text'} /> <DefaultInput type={type || 'text'} {...props} />
) )
} }
} }