mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
one Input component for everything
This commit is contained in:
parent
63e48672a1
commit
a30a8f0316
@ -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 {
|
||||||
|
@ -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,6 +77,30 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
|
|||||||
<Label htmlFor={name} required={required}>
|
<Label htmlFor={name} required={required}>
|
||||||
{label}
|
{label}
|
||||||
</Label>
|
</Label>
|
||||||
|
|
||||||
|
{type === 'radio' || type === 'checkbox' ? (
|
||||||
|
<div className={styles.radioGroup}>
|
||||||
|
{/* tslint:disable-next-line:jsx-no-multiline-js */}
|
||||||
|
{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()}>
|
<div className={this.inputWrapClasses()}>
|
||||||
<Tag
|
<Tag
|
||||||
id={name}
|
id={name}
|
||||||
@ -85,6 +116,8 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
|
|||||||
</Tag>
|
</Tag>
|
||||||
{type === 'search' && <SearchIcon />}
|
{type === 'search' && <SearchIcon />}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{help && <Help>{help}</Help>}
|
{help && <Help>{help}</Help>}
|
||||||
|
|
||||||
{additionalComponent && additionalComponent}
|
{additionalComponent && additionalComponent}
|
||||||
|
@ -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;
|
|
||||||
}
|
|
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user