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