Added required to Dropdown
parent
e90a188a37
commit
f912729ef7
|
@ -20,6 +20,7 @@ const factory = (Input) => {
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
onFocus: PropTypes.func,
|
onFocus: PropTypes.func,
|
||||||
|
required: PropTypes.bool,
|
||||||
source: PropTypes.array.isRequired,
|
source: PropTypes.array.isRequired,
|
||||||
template: PropTypes.func,
|
template: PropTypes.func,
|
||||||
theme: PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
|
@ -30,6 +31,7 @@ const factory = (Input) => {
|
||||||
errored: PropTypes.string,
|
errored: PropTypes.string,
|
||||||
field: PropTypes.string,
|
field: PropTypes.string,
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
|
required: PropTypes.bool,
|
||||||
selected: PropTypes.string,
|
selected: PropTypes.string,
|
||||||
templateValue: PropTypes.string,
|
templateValue: PropTypes.string,
|
||||||
up: PropTypes.string,
|
up: PropTypes.string,
|
||||||
|
@ -46,7 +48,8 @@ const factory = (Input) => {
|
||||||
auto: true,
|
auto: true,
|
||||||
className: '',
|
className: '',
|
||||||
allowBlank: true,
|
allowBlank: true,
|
||||||
disabled: false
|
disabled: false,
|
||||||
|
required: false
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -118,7 +121,8 @@ const factory = (Input) => {
|
||||||
const { theme } = this.props;
|
const { theme } = this.props;
|
||||||
const className = classnames(theme.field, {
|
const className = classnames(theme.field, {
|
||||||
[theme.errored]: this.props.error,
|
[theme.errored]: this.props.error,
|
||||||
[theme.disabled]: this.props.disabled
|
[theme.disabled]: this.props.disabled,
|
||||||
|
[theme.required]: this.props.required
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -126,7 +130,12 @@ const factory = (Input) => {
|
||||||
<div className={`${theme.templateValue} ${theme.value}`}>
|
<div className={`${theme.templateValue} ${theme.value}`}>
|
||||||
{this.props.template(selected)}
|
{this.props.template(selected)}
|
||||||
</div>
|
</div>
|
||||||
{this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
|
{this.props.label
|
||||||
|
? <label className={theme.label}>
|
||||||
|
{this.props.label}
|
||||||
|
{this.props.required ? <span className={theme.required}> * </span> : null}
|
||||||
|
</label>
|
||||||
|
: null}
|
||||||
{this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
|
{this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -143,12 +152,13 @@ const factory = (Input) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
|
const {template, theme, source, allowBlank, auto, required, ...others} = this.props; //eslint-disable-line no-unused-vars
|
||||||
const selected = this.getSelectedItem();
|
const selected = this.getSelectedItem();
|
||||||
const className = classnames(theme.dropdown, {
|
const className = classnames(theme.dropdown, {
|
||||||
[theme.up]: this.state.up,
|
[theme.up]: this.state.up,
|
||||||
[theme.active]: this.state.active,
|
[theme.active]: this.state.active,
|
||||||
[theme.disabled]: this.props.disabled
|
[theme.disabled]: this.props.disabled,
|
||||||
|
[theme.required]: this.props.required
|
||||||
}, this.props.className);
|
}, this.props.className);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -157,6 +167,7 @@ const factory = (Input) => {
|
||||||
{...others}
|
{...others}
|
||||||
className={theme.value}
|
className={theme.value}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
|
required={this.props.required}
|
||||||
readOnly
|
readOnly
|
||||||
type={template && selected ? 'hidden' : null}
|
type={template && selected ? 'hidden' : null}
|
||||||
value={selected && selected.label ? selected.label : ''}
|
value={selected && selected.label ? selected.label : ''}
|
||||||
|
|
|
@ -51,6 +51,7 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
|
||||||
| `source` | `Array` | | Array of data objects with the data to represent in the dropdown.|
|
| `source` | `Array` | | Array of data objects with the data to represent in the dropdown.|
|
||||||
| `template` | `Function` | | Callback function that returns a JSX template to represent the element.|
|
| `template` | `Function` | | Callback function that returns a JSX template to represent the element.|
|
||||||
| `value` | `String` | | Default value using JSON data.|
|
| `value` | `String` | | Default value using JSON data.|
|
||||||
|
| `required` | `Boolean` | `false` | If true, the dropdown has a required attribute.|
|
||||||
|
|
||||||
## Theming
|
## Theming
|
||||||
|
|
||||||
|
|
|
@ -69,6 +69,9 @@
|
||||||
> .templateValue {
|
> .templateValue {
|
||||||
border-bottom: 1px solid $input-text-error-color;
|
border-bottom: 1px solid $input-text-error-color;
|
||||||
}
|
}
|
||||||
|
> .label > .required {
|
||||||
|
color: $input-text-required-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.disabled {
|
&.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -96,6 +99,9 @@
|
||||||
font-size: $input-label-font-size;
|
font-size: $input-label-font-size;
|
||||||
line-height: $input-field-font-size;
|
line-height: $input-field-font-size;
|
||||||
color: $input-text-label-color;
|
color: $input-text-label-color;
|
||||||
|
.required {
|
||||||
|
color: $input-text-required-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
|
|
|
@ -63,6 +63,14 @@ class DropdownTest extends React.Component {
|
||||||
onChange={this.handleChange.bind(this, 'dropdown3')}
|
onChange={this.handleChange.bind(this, 'dropdown3')}
|
||||||
source={countries}
|
source={countries}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<Dropdown
|
||||||
|
label="Country"
|
||||||
|
ref="dropdown5"
|
||||||
|
onChange={this.handleChange.bind(this, 'dropdown5')}
|
||||||
|
source={countries}
|
||||||
|
required
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue