@flexis/ui
Version:
Styleless React Components
108 lines • 8.45 kB
JavaScript
import { __decorate } from "tslib";
import React, { PureComponent, Children, cloneElement } from 'react';
import PropTypes from 'prop-types';
import { Bind, omit } from '../../helpers';
import { SelectValuePropType } from '../common/types';
import isCurrentValue from '../common/isCurrentValue';
import getNextValue from '../common/getNextValue';
import { style, classes } from './CustomFlatSelect.st.css';
export * from './CustomFlatSelectOption';
let CustomFlatSelect = /** @class */ (() => {
class CustomFlatSelect extends PureComponent {
constructor(props) {
super(props);
const { defaultValue } = props;
this.state = {
value: defaultValue
};
}
static getDerivedStateFromProps({ value }, { value: prevValue }) {
const nextValue = typeof value === 'undefined'
? prevValue
: value;
if (nextValue === prevValue) {
return null;
}
return {
value: nextValue
};
}
render() {
const { className, id, name, multiple, disabled, children, ...props } = this.props;
const { value } = this.state;
let activeDescendant = null;
const options = Children.map(children, (child) => {
if (!child) {
return null;
}
const { value: optionValue, children: optionLabel, ...childProps } = child.props;
const option = typeof optionValue === 'undefined'
? optionLabel
: optionValue;
const checked = isCurrentValue(multiple, value, option);
const props = {
...childProps,
type: multiple ? 'checkbox' : 'radio',
value: option,
onChange: this.onChange,
checked,
disabled,
name
};
if (typeof id === 'string') {
props.optionId = `${id}-option-${option}`;
if (checked && !multiple) {
activeDescendant = props.optionId;
}
}
return cloneElement(child, props);
});
return (<ul role='listbox' {...omit(props, [
'onChange',
'defaultValue',
'value'
])} className={style(classes.root, className)} id={id} aria-activedescendant={activeDescendant} aria-multiselectable={multiple} aria-disabled={disabled}>
{options}
</ul>);
}
onChange(inputNextValue, event) {
const { value: valueProp, onChange, multiple, disabled } = this.props;
if (disabled) {
return;
}
const { value } = this.state;
const nextValue = getNextValue(multiple, value, inputNextValue);
if (nextValue === value) {
return;
}
if (typeof valueProp === 'undefined') {
this.setState(() => ({
value: nextValue
}));
}
if (typeof onChange === 'function') {
onChange(nextValue, event);
}
}
}
CustomFlatSelect.propTypes = {
id: PropTypes.string,
name: PropTypes.string,
onChange: PropTypes.func,
defaultValue: SelectValuePropType,
value: SelectValuePropType,
multiple: PropTypes.bool,
disabled: PropTypes.bool,
children: PropTypes.node.isRequired
};
CustomFlatSelect.defaultProps = {
multiple: false,
disabled: false
};
__decorate([
Bind()
], CustomFlatSelect.prototype, "onChange", null);
return CustomFlatSelect;
})();
export default CustomFlatSelect;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ3VzdG9tRmxhdFNlbGVjdC5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9DdXN0b21GbGF0U2VsZWN0L0N1c3RvbUZsYXRTZWxlY3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUtiLGFBQWEsRUFDYixRQUFRLEVBQ1IsWUFBWSxFQUNaLE1BQU0sT0FBTyxDQUFDO0FBQ2YsT0FBTyxTQUFTLE1BQU0sWUFBWSxDQUFDO0FBQ25DLE9BQU8sRUFFTixJQUFJLEVBQ0osSUFBSSxFQUNKLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFFTixtQkFBbUIsRUFDbkIsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLGNBQWMsTUFBTSwwQkFBMEIsQ0FBQztBQUN0RCxPQUFPLFlBQVksTUFBTSx3QkFBd0IsQ0FBQztBQUNsRCxPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLDJCQUEyQixDQUFDO0FBRW5DLGNBQWMsMEJBQTBCLENBQUM7QUFpQ3pDO0lBQUEsTUFBcUIsZ0JBQWlCLFNBQVEsYUFBNkI7UUFvQzFFLFlBQVksS0FBSztZQUVoQixLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7WUFFYixNQUFNLEVBQ0wsWUFBWSxFQUNaLEdBQUcsS0FBSyxDQUFDO1lBRVYsSUFBSSxDQUFDLEtBQUssR0FBRztnQkFDWixLQUFLLEVBQUUsWUFBWTthQUNuQixDQUFDO1FBQ0gsQ0FBQztRQTdCRCxNQUFNLENBQUMsd0JBQXdCLENBQzlCLEVBQUUsS0FBSyxFQUFVLEVBQ2pCLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBVTtZQUc1QixNQUFNLFNBQVMsR0FBRyxPQUFPLEtBQUssS0FBSyxXQUFXO2dCQUM3QyxDQUFDLENBQUMsU0FBUztnQkFDWCxDQUFDLENBQUMsS0FBSyxDQUFDO1lBRVQsSUFBSSxTQUFTLEtBQUssU0FBUyxFQUFFO2dCQUM1QixPQUFPLElBQUks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