Custom label and value keys for Dropdown (#1273)
* Custom value and label for dropdown * removing unknown props * Show selected label * typoold
parent
e7f521041e
commit
6295ca447f
|
@ -30,6 +30,10 @@ export interface DropdownTheme {
|
||||||
* Used for the the label element.
|
* Used for the the label element.
|
||||||
*/
|
*/
|
||||||
label?: string;
|
label?: string;
|
||||||
|
/**
|
||||||
|
* Used for setting the label from source
|
||||||
|
*/
|
||||||
|
labelKey?: string;
|
||||||
/**
|
/**
|
||||||
* Used when dropdown has required attribute.
|
* Used when dropdown has required attribute.
|
||||||
*/
|
*/
|
||||||
|
@ -54,6 +58,10 @@ export interface DropdownTheme {
|
||||||
* Used for the list of values.
|
* Used for the list of values.
|
||||||
*/
|
*/
|
||||||
values?: string;
|
values?: string;
|
||||||
|
/**
|
||||||
|
* Used for setting the value from source
|
||||||
|
*/
|
||||||
|
valueKey: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DropdownProps extends ReactToolbox.Props {
|
export interface DropdownProps extends ReactToolbox.Props {
|
||||||
|
|
|
@ -16,6 +16,7 @@ const factory = (Input) => {
|
||||||
disabled: PropTypes.bool,
|
disabled: PropTypes.bool,
|
||||||
error: PropTypes.string,
|
error: PropTypes.string,
|
||||||
label: PropTypes.string,
|
label: PropTypes.string,
|
||||||
|
labelKey: PropTypes.string,
|
||||||
name: PropTypes.string,
|
name: PropTypes.string,
|
||||||
onBlur: PropTypes.func,
|
onBlur: PropTypes.func,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
|
@ -46,6 +47,7 @@ const factory = (Input) => {
|
||||||
PropTypes.string,
|
PropTypes.string,
|
||||||
PropTypes.number,
|
PropTypes.number,
|
||||||
]),
|
]),
|
||||||
|
valueKey: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -53,7 +55,9 @@ const factory = (Input) => {
|
||||||
className: '',
|
className: '',
|
||||||
allowBlank: true,
|
allowBlank: true,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
labelKey: 'label',
|
||||||
required: false,
|
required: false,
|
||||||
|
valueKey: 'value',
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -86,7 +90,7 @@ const factory = (Input) => {
|
||||||
|
|
||||||
getSelectedItem = () => {
|
getSelectedItem = () => {
|
||||||
for (const item of this.props.source) {
|
for (const item of this.props.source) {
|
||||||
if (item.value === this.props.value) return item;
|
if (item[this.props.valueKey] === this.props.value) return item;
|
||||||
}
|
}
|
||||||
return !this.props.allowBlank
|
return !this.props.allowBlank
|
||||||
? this.props.source[0]
|
? this.props.source[0]
|
||||||
|
@ -167,26 +171,26 @@ const factory = (Input) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderValue = (item, idx) => {
|
renderValue = (item, idx) => {
|
||||||
const { theme } = this.props;
|
const { labelKey, theme, valueKey } = this.props;
|
||||||
const className = classnames({
|
const className = classnames({
|
||||||
[theme.selected]: item.value === this.props.value,
|
[theme.selected]: item[valueKey] === this.props.value,
|
||||||
[theme.disabled]: item.disabled,
|
[theme.disabled]: item.disabled,
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
key={idx}
|
key={idx}
|
||||||
className={className}
|
className={className}
|
||||||
onClick={!item.disabled && this.handleSelect.bind(this, item.value)}
|
onClick={!item.disabled && this.handleSelect.bind(this, item[valueKey])}
|
||||||
>
|
>
|
||||||
{this.props.template ? this.props.template(item) : item.label}
|
{this.props.template ? this.props.template(item) : item[labelKey]}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
allowBlank, auto, required, onChange, onFocus, onBlur, // eslint-disable-line no-unused-vars
|
allowBlank, auto, labelKey, required, onChange, onFocus, onBlur, // eslint-disable-line no-unused-vars
|
||||||
source, template, theme, ...others
|
source, template, theme, valueKey, ...others
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const selected = this.getSelectedItem();
|
const selected = this.getSelectedItem();
|
||||||
const className = classnames(theme.dropdown, {
|
const className = classnames(theme.dropdown, {
|
||||||
|
@ -214,7 +218,7 @@ const factory = (Input) => {
|
||||||
type={template && selected ? 'hidden' : null}
|
type={template && selected ? 'hidden' : null}
|
||||||
theme={theme}
|
theme={theme}
|
||||||
themeNamespace="input"
|
themeNamespace="input"
|
||||||
value={selected && selected.label ? selected.label : ''}
|
value={selected && selected[labelKey] ? selected[labelKey] : ''}
|
||||||
/>
|
/>
|
||||||
{template && selected ? this.renderTemplateValue(selected) : null}
|
{template && selected ? this.renderTemplateValue(selected) : null}
|
||||||
<ul className={theme.values}>
|
<ul className={theme.values}>
|
||||||
|
|
Loading…
Reference in New Issue