chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
113 lines (110 loc) • 4.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable jsx-a11y/click-events-have-key-events */
class HTMLSelectComboBox extends _react.PureComponent {
constructor(props) {
super(props);
const {
label,
defaultValue,
value
} = props;
this.state = {
controlled: !!value,
// eslint-disable-next-line no-nested-ternary
value: value ? String(value) : label ? 'ComboBoxLabel' : defaultValue
};
this.onSelect = this.onSelect.bind(this);
}
componentDidUpdate(prevProps) {
const {
value
} = this.props;
if (prevProps.value !== value) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
controlled: !!value,
value: String(value)
});
}
}
onSelect(e) {
const {
onSelect,
list,
listKey
} = this.props;
const {
controlled
} = this.state;
const selection = e.target.value;
if (onSelect && list && list.length > 0 && listKey && selection) {
const selectedItem = list.find(item => String(item[listKey]) === selection);
if (!controlled) {
this.setState({
value: String(selectedItem[listKey])
});
}
onSelect(selectedItem);
}
}
render() {
const {
className,
label,
list,
disabled,
listValue,
listKey,
stopPropagation
} = this.props;
const {
value
} = this.state;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)('select', className, disabled && 'select--disabled')
}, /*#__PURE__*/_react.default.createElement("select", {
disabled: disabled,
onChange: this.onSelect,
value: value,
onClick: stopPropagation ? event => event.stopPropagation() : null
}, label ? /*#__PURE__*/_react.default.createElement("option", {
value: "ComboBoxLabel",
disabled: true
}, label) : null, list.map(item => /*#__PURE__*/_react.default.createElement("option", {
key: item[listKey],
value: item[listKey]
}, item[listValue]))));
}
}
exports.default = HTMLSelectComboBox;
HTMLSelectComboBox.propTypes = {
onSelect: _propTypes.default.func,
disabled: _propTypes.default.bool,
label: _propTypes.default.string,
// eslint-disable-next-line react/forbid-prop-types
list: _propTypes.default.array.isRequired,
listKey: _propTypes.default.string.isRequired,
listValue: _propTypes.default.string.isRequired,
className: _propTypes.default.string,
defaultValue: _propTypes.default.string,
stopPropagation: _propTypes.default.bool,
value: _propTypes.default.string
};
HTMLSelectComboBox.defaultProps = {
label: null,
className: null,
onSelect: null,
disabled: false,
stopPropagation: false,
defaultValue: null,
value: null
};
//# sourceMappingURL=HTMLSelectComboBox.js.map