@flexis/ui
Version:
Styleless React Components
282 lines (221 loc) • 17 kB
JavaScript
"use strict";
var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
var _context3, _context4;
var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
_Object$defineProperty2(exports, "__esModule", {
value: true
});
var _exportNames = {};
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _helpers = require("../../helpers");
var _isCurrentValue = _interopRequireDefault(require("../common/isCurrentValue"));
var _Dropdown = _interopRequireWildcard(require("../Dropdown"));
var _CustomFlatSelect = _interopRequireDefault(require("../CustomFlatSelect"));
var _CustomSelectFace = require("./CustomSelectFace");
_forEachInstanceProperty2(_context3 = _Object$keys2(_CustomSelectFace)).call(_context3, function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
_Object$defineProperty2(exports, key, {
enumerable: true,
get: function get() {
return _CustomSelectFace[key];
}
});
});
var _CustomSelectSt = require("./CustomSelect.st.css");
var _CustomSelectOption = require("./CustomSelectOption");
_forEachInstanceProperty2(_context4 = _Object$keys2(_CustomSelectOption)).call(_context4, function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
_Object$defineProperty2(exports, key, {
enumerable: true,
get: function get() {
return _CustomSelectOption[key];
}
});
});
function ownKeys(object, enumerableOnly) { var keys = (0, _keys.default)(object); if (_getOwnPropertySymbols.default) { var symbols = (0, _getOwnPropertySymbols.default)(object); if (enumerableOnly) symbols = (0, _filter.default)(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor.default)(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach.default)(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3.default)(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors.default) { (0, _defineProperties.default)(target, (0, _getOwnPropertyDescriptors.default)(source)); } else { var _context2; (0, _forEach.default)(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2.default)(target, key, (0, _getOwnPropertyDescriptor.default)(source, key)); }); } } return target; }
var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent,
Children = _react.default.Children;
var _ref = /*#__PURE__*/_createElement("i", null, "\xA0");
var CustomSelect =
/** @class */
function () {
var CustomSelect = /*#__PURE__*/function (_PureComponent) {
(0, _inherits2.default)(CustomSelect, _PureComponent);
function CustomSelect(props) {
var _this;
(0, _classCallCheck2.default)(this, CustomSelect);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CustomSelect).call(this, props));
_this.dropdownRef = null;
var defaultValue = props.defaultValue;
_this.state = {
value: defaultValue
};
return _this;
}
(0, _createClass2.default)(CustomSelect, [{
key: "render",
value: function render() {
var _this$props = this.props,
className = _this$props.className,
ariaLabelledBy = _this$props['aria-labelledby'],
ariaLabel = _this$props['aria-label'],
styleProp = _this$props.style,
name = _this$props.name,
placeholder = _this$props.placeholder,
multiple = _this$props.multiple,
disabled = _this$props.disabled,
children = _this$props.children,
props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "aria-labelledby", "aria-label", "style", "name", "placeholder", "multiple", "disabled", "children"]);
var value = this.state.value;
var ariaLabelProps = (0, _helpers.getAriaLabelProps)({
labelledBy: ariaLabelledBy,
label: ariaLabel || placeholder
});
var label = multiple ? [] : '';
var selectFace = null;
var options = (0, _map.default)(Children).call(Children, children, function (child) {
if (!child) {
return null;
}
if (child.type[_CustomSelectFace.isCustomSelectFace]) {
selectFace = child;
return null;
}
var _child$props = child.props,
optionValue = _child$props.value,
optionLabel = _child$props.children;
var option = typeof optionValue === 'undefined' ? optionLabel : optionValue;
var checked = (0, _isCurrentValue.default)(multiple, value, option);
if (checked) {
if (multiple) {
label.push(optionLabel);
} else {
label = optionLabel;
}
}
return child;
});
return _createElement(_Dropdown.default, {
ref: this.onDropdownRef,
className: (0, _CustomSelectSt.style)(_CustomSelectSt.classes.root, className),
style: styleProp,
disabled: disabled
}, this.face(selectFace, label), _createElement(_Dropdown.DropdownContent, (0, _extends2.default)({}, ariaLabelProps, {
className: _CustomSelectSt.classes.dropdownContent,
role: "region",
"aria-multiselectable": multiple
}), _createElement(_CustomFlatSelect.default, (0, _extends2.default)({}, (0, _helpers.omit)(props, ['elementRef']), ariaLabelProps, {
className: _CustomSelectSt.classes.options,
name: name,
multiple: multiple,
onClick: this.onDropdownHide,
onChange: this.onChange,
value: value,
disabled: disabled
}), options)), name && _createElement("input", {
type: "hidden",
name: name,
value: value || ''
}));
}
}, {
key: "face",
value: function face(faceChild, label) {
var _this$props2 = this.props,
multiple = _this$props2.multiple,
placeholder = _this$props2.placeholder,
disabled = _this$props2.disabled;
var faceLabel = (multiple ? label.join(', ') : label) || placeholder && _createElement("span", {
className: _CustomSelectSt.classes.placeholder
}, placeholder) || _ref;
if (!faceChild) {
return _createElement("button", {
type: "button",
disabled: disabled
}, faceLabel);
}
var _faceChild$props = faceChild.props,
renderFace = _faceChild$props.children,
props = (0, _objectWithoutProperties2.default)(_faceChild$props, ["children"]);
var faceProps = _objectSpread({
multiple: multiple,
disabled: disabled
}, props);
return renderFace(faceLabel, faceProps);
}
}, {
key: "onDropdownRef",
value: function onDropdownRef(ref) {
var elementRef = this.props.elementRef;
this.dropdownRef = ref;
if (typeof elementRef === 'function') {
elementRef(ref);
}
}
}, {
key: "onDropdownHide",
value: function onDropdownHide(event) {
var multiple = this.props.multiple;
var dropdownRef = this.dropdownRef;
if (!multiple && dropdownRef) {
dropdownRef.toggleActiveState(false, event);
}
}
}, {
key: "onChange",
value: function onChange(nextValue, event) {
var onChange = this.props.onChange;
this.setState(function () {
return {
value: nextValue
};
});
if (typeof onChange === 'function') {
onChange(nextValue, event);
}
}
}]);
return CustomSelect;
}(PureComponent);
process.env.NODE_ENV !== "production" ? CustomSelect.propTypes = _objectSpread({}, _CustomFlatSelect.default.propTypes, {
elementRef: _propTypes.default.func,
style: _propTypes.default.object,
placeholder: _propTypes.default.string
}) : void 0;
CustomSelect.defaultProps = _CustomFlatSelect.default.defaultProps;
CustomSelect.getDerivedStateFromProps = _CustomFlatSelect.default.getDerivedStateFromProps;
(0, _tslib.__decorate)([(0, _helpers.Bind)()], CustomSelect.prototype, "onDropdownRef", null);
(0, _tslib.__decorate)([(0, _helpers.Bind)()], CustomSelect.prototype, "onDropdownHide", null);
(0, _tslib.__decorate)([(0, _helpers.Bind)()], CustomSelect.prototype, "onChange", null);
return CustomSelect;
}();
var _default = CustomSelect;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0N1c3RvbVNlbGVjdC9DdXN0b21TZWxlY3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBOztBQVNBOztBQUNBOztBQVNBOztBQUNBOztBQUlBOztBQUdBOztBQVFBO0FBQUE7QUFBQTs7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTs7QUFMQTs7QUFNQTs7QUFBQTtBQUFBO0FBQUE7O0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7Ozs7Ozs7Ozs7d0JBNEpJLGlDOztBQTNJSixJQUFBLFlBQUE7QUFBQTtBQUFBLFlBQUE7QUFBQSxNQUFxQixZQUFyQjtBQUFBOztBQWVDLDBCQUFZLEtBQVosRUFBaUI7QUFBQTs7QUFBQTtBQUVoQixvSEFBTSxLQUFOO0FBSk8sWUFBQSxXQUFBLEdBQXdCLElBQXhCO0FBRVMsVUFLZixZQUxlLEdBTVosS0FOWSxDQUtmLFlBTGU7QUFRaEIsWUFBSyxLQUFMLEdBQWE7QUFDWixRQUFBLEtBQUssRUFBRTtBQURLLE9BQWI7QUFSZ0I7QUFXaEI7O0FBMUJGO0FBQUE7QUFBQSwrQkE0Qk87QUFBQSwwQkFhRCxLQUFLLEtBYko7QUFBQSxZQUdKLFNBSEksZUFHSixTQUhJO0FBQUEsWUFJZSxjQUpmLGVBSUosaUJBSkk7QUFBQSxZQUtVLFNBTFYsZUFLSixZQUxJO0FBQUEsWUFNRyxTQU5ILGVBTUosS0FOSTtBQUFBLFlBT0osSUFQSSxlQU9KLElBUEk7QUFBQSxZQVFKLFdBUkksZUFRSixXQVJJO0FBQUEsWUFTSixRQVRJLGVBU0osUUFUSTtBQUFBLFlBVUosUUFWSSxlQVVKLFFBVkk7QUFBQSxZQVdKLFFBWEksZUFXSixRQVhJO0FBQUEsWUFZRCxLQVpDO0FBQUEsWUFlSixLQWZJLEdBZ0JELEtBQUssS0FoQkosQ0FlSixLQWZJO0FBaUJM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