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

one Input component for everything

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-01-29 10:53:46 +01:00
parent 63e48672a1
commit a30a8f0316
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 98 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/atoms/Form/Input.module.scss
View File

@ -110,6 +110,56 @@
} }
} }
.radioGroup {
margin-top: $spacer / 2;
margin-bottom: -2%;
@media screen and (min-width: $break-point--small) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.radioWrap {
position: relative;
padding: $spacer / 2;
text-align: center;
display: flex;
align-items: center;
margin-bottom: 2%;
@media screen and (min-width: $break-point--small) {
flex: 0 0 49%;
}
}
.radio {
&:checked + label {
border-color: $brand-pink;
}
}
.radioLabel {
margin: 0;
padding: 0;
font-family: $font-family-button;
font-size: $font-size-small;
line-height: 1.2;
border: 2px solid $brand-grey-lighter;
border-radius: .2rem;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: $brand-grey;
text-align: left;
padding-left: 2.5rem;
display: flex;
align-items: center;
}
// Size modifiers // Size modifiers
.inputSmall { .inputSmall {

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

@ -6,6 +6,11 @@ import styles from './Input.module.scss'
import Label from './Label' import Label from './Label'
import Row from './Row' import Row from './Row'
interface IOptionProps {
value: string
label: string
}
interface IInputProps { interface IInputProps {
name: string name: string
label: string label: string
@ -15,6 +20,7 @@ interface IInputProps {
tag?: string tag?: string
type?: string type?: string
small?: boolean small?: boolean
options?: IOptionProps[]
additionalComponent?: void additionalComponent?: void
} }
@ -62,6 +68,7 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
tag, tag,
additionalComponent, additionalComponent,
children, children,
options,
...props ...props
} = this.props } = this.props
@ -70,21 +77,47 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
<Label htmlFor={name} required={required}> <Label htmlFor={name} required={required}>
{label} {label}
</Label> </Label>
<div className={this.inputWrapClasses()}>
<Tag {type === 'radio' || type === 'checkbox' ? (
id={name} <div className={styles.radioGroup}>
name={name} {/* tslint:disable-next-line:jsx-no-multiline-js */}
required={required} {options &&
type={type} options.map((option, index) => (
tag={tag} <div className={styles.radioWrap} key={index}>
{...props} <input
onFocus={this.toggleFocus} className={styles.radio}
onBlur={this.toggleFocus} type={this.props.type}
> id={option.value}
{children} name={this.props.name}
</Tag> value={option.value}
{type === 'search' && <SearchIcon />} />
</div> <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}
tag={tag}
{...props}
onFocus={this.toggleFocus}
onBlur={this.toggleFocus}
>
{children}
</Tag>
{type === 'search' && <SearchIcon />}
</div>
)}
{help && <Help>{help}</Help>} {help && <Help>{help}</Help>}
{additionalComponent && additionalComponent} {additionalComponent && additionalComponent}

51
src/components/atoms/Form/InputRadioCheckbox.module.scss
View File

@ -1,51 +0,0 @@
@import '../../../styles/variables';
.radioGroup {
margin-top: $spacer / 2;
margin-bottom: -2%;
@media screen and (min-width: $break-point--small) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.radioWrap {
position: relative;
padding: $spacer / 2;
text-align: center;
display: flex;
align-items: center;
margin-bottom: 2%;
@media screen and (min-width: $break-point--small) {
flex: 0 0 49%;
}
}
.radio {
&:checked + label {
border-color: $brand-pink;
}
}
.radioLabel {
margin: 0;
padding: 0;
font-family: $font-family-button;
font-size: $font-size-small;
line-height: 1.2;
border: 2px solid $brand-grey-lighter;
border-radius: .2rem;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: $brand-grey;
text-align: left;
padding-left: 2.5rem;
display: flex;
align-items: center;
}

57
src/components/atoms/Form/InputRadioCheckbox.tsx
View File

@ -1,57 +0,0 @@
import React, { PureComponent } from 'react'
import Help from './Help'
import styles from './InputRadioCheckbox.module.scss'
import Label from './Label'
import Row from './Row'
interface IOptionProps {
value: string
label: string
}
interface IRadioProps {
required?: boolean
name: string
label: string
help?: string
type: string
options: IOptionProps[]
}
export default class InputRadioCheckbox extends PureComponent<IRadioProps> {
public render() {
return (
<Row>
<Label
htmlFor={this.props.name}
required={this.props.required ? true : false}
>
{this.props.label}
</Label>
<div className={styles.radioGroup}>
{/* tslint:disable-next-line:jsx-no-multiline-js */}
{this.props.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>
{this.props.help && <Help>{this.props.help}</Help>}
</Row>
)
}
}