@wix/design-system
Version:
@wix/design-system
239 lines (237 loc) • 10 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _InputWithOptions2 = _interopRequireDefault(require("../InputWithOptions"));
var _Input = _interopRequireDefault(require("../Input"));
var _MultiSelectCheckboxSt = require("./MultiSelectCheckbox.st.css.js");
var _ListItemSelect = require("../ListItemSelect");
var _ListItemSection = require("../ListItemSection");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MultiSelectCheckbox/MultiSelectCheckbox.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var OPEN_DROPDOWN_CHARS = ['Enter', 'ArrowDown', 'Space', ' '];
var MultiSelectCheckbox = /*#__PURE__*/function (_InputWithOptions) {
function MultiSelectCheckbox() {
(0, _classCallCheck2["default"])(this, MultiSelectCheckbox);
return _callSuper(this, MultiSelectCheckbox, arguments);
}
(0, _inherits2["default"])(MultiSelectCheckbox, _InputWithOptions);
return (0, _createClass2["default"])(MultiSelectCheckbox, [{
key: "createOptions",
value: function createOptions(options) {
var _this = this;
return options.map(function (option) {
if (_this._isUsingCustomRenderFunction(option)) {
return _this._patchOptionWithSelectionMechanism(option);
} else if (_this._isDivider(option)) {
return (0, _ListItemSection.listItemSectionBuilder)(_objectSpread({
type: 'divider'
}, option));
} else {
var builder = (0, _ListItemSelect.listItemSelectBuilder)(_objectSpread(_objectSpread({}, option), {}, {
checkbox: true,
title: option.value,
label: option.label
}));
return _this._patchOptionWithSelectionMechanism(builder);
}
});
}
}, {
key: "_patchOptionWithSelectionMechanism",
value: function _patchOptionWithSelectionMechanism(option) {
var _this2 = this;
var _value = option.value;
return _objectSpread(_objectSpread({}, option), {}, {
value: function value(props) {
return _value(_objectSpread(_objectSpread({}, props), {}, {
selected: _this2.isSelectedId(option.id)
}));
}
});
}
}, {
key: "_isUsingCustomRenderFunction",
value: function _isUsingCustomRenderFunction(_ref) {
var value = _ref.value;
return typeof value === 'function';
}
}, {
key: "_isDivider",
value: function _isDivider(_ref2) {
var value = _ref2.value;
return value === '-';
}
}, {
key: "isSelectedId",
value: function isSelectedId(optionId) {
return this.props.selectedOptions.indexOf(optionId) !== -1;
}
}, {
key: "dropdownAdditionalProps",
value: function dropdownAdditionalProps() {
var _this$props = this.props,
predicate = _this$props.predicate,
emptyStateMessage = _this$props.emptyStateMessage,
enableSearch = _this$props.enableSearch;
var filterFunc = this.state.isEditing ? predicate : function () {
return true;
};
var options = enableSearch ? this.createOptions(this.props.options.filter(filterFunc)) : this.createOptions(this.props.options);
if (options.length === 0 && emptyStateMessage) {
options = [{
id: 'empty-state-message',
value: emptyStateMessage,
disabled: true
}];
}
return {
options: options,
closeOnSelect: false,
selectedHighlight: false
};
}
}, {
key: "selectedOptionsToText",
value: function selectedOptionsToText() {
var _this3 = this;
return this.props.selectedOptions.map(function (selectedOption) {
return _this3.props.options.find(function (option) {
return option.id === selectedOption;
});
}).filter(function (selectedOption) {
return selectedOption;
}).map(this.props.valueParser).join(this.props.delimiter);
}
}, {
key: "inputAdditionalProps",
value: function inputAdditionalProps() {
if (this.props.enableSearch) {
var _this$props2 = this.props,
selectedOptions = _this$props2.selectedOptions,
getSelectedOptionsText = _this$props2.getSelectedOptionsText;
var selectedOptionsText = !!getSelectedOptionsText ? getSelectedOptionsText(selectedOptions.length) : this.selectedOptionsToText();
var value = !this._focused && selectedOptions.length > 0 ? selectedOptionsText : this.props.value;
return {
readOnly: this.props.readOnly,
disableEditing: false,
value: value,
placeholder: selectedOptions.length > 0 ? selectedOptionsText : this.props.placeholder
};
} else {
var _this$props$inputElem;
var _value2 = this.props.value !== undefined ? this.props.value : this.selectedOptionsToText();
return {
readOnly: this.props.readOnly,
disableEditing: this.props.disableEditing,
inputElement: (_this$props$inputElem = this.props.inputElement) !== null && _this$props$inputElem !== void 0 ? _this$props$inputElem : /*#__PURE__*/_react["default"].createElement(_Input["default"], {
textOverflow: "ellipsis",
disableEditing: this.props.disableEditing,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 11
}
}),
value: _value2
};
}
}
}, {
key: "inputClasses",
value: function inputClasses() {
return this.props.enableSearch ? '' : _MultiSelectCheckboxSt.classes.showPointer;
}
}, {
key: "_onSelect",
value: function _onSelect(option) {
this.showOptions();
if (this.closeOnSelect()) {
this.setState({
showOptions: false
});
}
// The option object is not the original since it was injected a checkbox
var originalOption = this.props.options.find(function (op) {
return option.id === op.id;
});
if (this.isSelectedId(originalOption.id)) {
this.props.onDeselect && this.props.onDeselect(originalOption.id, originalOption);
} else {
this.props.onSelect && this.props.onSelect(originalOption.id, originalOption);
}
if (this.props.enableSearch && this.props.onChange) {
this.props.onChange({
target: {
value: ''
}
});
this.setState({
isEditing: false
});
}
}
}, {
key: "_onOpenChange",
value: function _onOpenChange(event) {
if (!this.props.readOnly) {
this.state.showOptions ? this.hideOptions() : this.showOptions();
}
}
}, {
key: "_onKeyDown",
value: function _onKeyDown(event) {
if (OPEN_DROPDOWN_CHARS.includes(event.key) && !(this.state.isEditing && event.key === ' ')) {
event.preventDefault();
this.showOptions();
} else if (this.props.enableSearch && event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
this.setState({
isEditing: true
});
}
this.dropdownLayout && this.dropdownLayout._onSelectListKeyDown(event);
}
}, {
key: "_onFocus",
value: function _onFocus(e) {
if (this.props.disabled) {
return;
}
this._focused = true;
if (this.props.onFocus) {
this.props.onFocus(e);
this.setState({
isEditing: false
});
}
}
}]);
}(_InputWithOptions2["default"]);
MultiSelectCheckbox.displayName = 'MultiSelectCheckbox';
MultiSelectCheckbox.defaultProps = _objectSpread(_objectSpread({}, _InputWithOptions2["default"].defaultProps), {}, {
delimiter: ', ',
selectedOptions: [],
closeOnSelect: false,
valueParser: function valueParser(option) {
return option.label || option.value;
},
readOnly: false,
disableEditing: true,
clearOnBlur: true,
predicate: function predicate() {
return true;
},
enableSearch: false
});
var _default = exports["default"] = MultiSelectCheckbox;