wix-style-react
Version:
476 lines (371 loc) • 19.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(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) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import InputWithOptions from '../InputWithOptions/InputWithOptions';
import Input from '../Input';
import { classes } from './MultiSelectCheckbox.st.css';
import { listItemSelectBuilder } from '../ListItemSelect';
import { listItemSectionBuilder } from '../ListItemSection';
import { optionValidator } from '../DropdownLayout/DropdownLayout';
var OPEN_DROPDOWN_CHARS = ['Enter', 'ArrowDown', 'Space', ' '];
var MultiSelectCheckbox = /*#__PURE__*/function (_InputWithOptions) {
_inherits(MultiSelectCheckbox, _InputWithOptions);
var _super = _createSuper(MultiSelectCheckbox);
function MultiSelectCheckbox() {
_classCallCheck(this, MultiSelectCheckbox);
return _super.apply(this, arguments);
}
_createClass(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 listItemSectionBuilder(_objectSpread({
type: 'divider'
}, option));
} else {
var builder = 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() {
return {
options: this.createOptions(this.props.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() {
var value = this.props.value !== undefined ? this.props.value : this.selectedOptionsToText();
return {
readOnly: false,
disableEditing: true,
inputElement: /*#__PURE__*/React.createElement(Input, {
textOverflow: "ellipsis",
disableEditing: true
}),
value: value
};
}
}, {
key: "inputClasses",
value: function inputClasses() {
return 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);
}
}
}, {
key: "_onInputClicked",
value: function _onInputClicked(event) {
this.state.showOptions ? this.hideOptions() : this.showOptions();
if (this.props.onInputClicked) {
this.props.onInputClicked(event);
}
}
}, {
key: "_onKeyDown",
value: function _onKeyDown(event) {
if (OPEN_DROPDOWN_CHARS.includes(event.key)) {
event.preventDefault();
this.showOptions();
}
this.dropdownLayout && this.dropdownLayout._onKeyDown(event);
}
}, {
key: "_onFocus",
value: function _onFocus(e) {
if (this.props.disabled) {
return;
}
this._focused = true;
this.setState({
isEditing: false
});
if (this.props.onFocus) {
this.props.onFocus(e);
}
}
}]);
return MultiSelectCheckbox;
}(InputWithOptions);
MultiSelectCheckbox.displayName = 'MultiSelectCheckbox';
MultiSelectCheckbox.propTypes = {
/** Associate a control with the regions that it controls */
ariaControls: PropTypes.string,
/** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. */
ariaDescribedby: PropTypes.string,
/** Define a string that labels the current element in case where a text label is not visible on the screen */
ariaLabel: PropTypes.string,
/** Focus the element on mount (standard React input autoFocus) */
autoFocus: PropTypes.bool,
/** Select the entire text of the element on focus (standard React input autoSelect) */
autoSelect: PropTypes.bool,
/** Control the border style of input */
border: PropTypes.oneOf(['standard', 'round', 'bottomLine']),
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Displays clear button (X) on a non-empty input */
clearButton: PropTypes.bool,
/** Closes `DropdownLayout` when option is selected */
closeOnSelect: PropTypes.bool,
/** Render a custom input component instead of the default html input tag */
customInput: PropTypes.node,
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Sets a default value for those who want to use this component un-controlled */
defaultValue: PropTypes.string,
/** Specifies the delimiter symbol to be displayed between the selected options in the input */
delimiter: PropTypes.string,
/** Specifies whether input should be disabled or not */
disabled: PropTypes.bool,
/** Restricts input editing */
disableEditing: PropTypes.bool,
/** Sets the offset of the dropdown from the left in pixels */
dropdownOffsetLeft: PropTypes.string,
/** Sets the width of the dropdown in pixels */
dropdownWidth: PropTypes.string,
/** Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>` */
fixedFooter: PropTypes.node,
/** Adds a fixed header container at the top of options list in `<DropdownLayout/>` */
fixedHeader: PropTypes.node,
/** Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option. */
focusOnOption: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Scrolls view to the selected option when dropdown layout is opened */
focusOnSelectedOption: PropTypes.bool,
/** USED FOR TESTING - forces focus state on the input */
forceFocus: PropTypes.bool,
/** USED FOR TESTING - forces hover state on the input */
forceHover: PropTypes.bool,
/** Specifies whether there are more items to be loaded */
hasMore: PropTypes.bool,
/** Specifies whether status suffix should be hidden */
hideStatusSuffix: PropTypes.bool,
/** Highlight word parts that match search criteria in bold */
highlight: PropTypes.bool,
/** Assigns an unique identifier for the root element */
id: PropTypes.string,
/** Specifies whether `<DropdownLayout/>` is in a container component. If true, some styles such as shadows, positioning and padding will be added to the component `contentContainer`. */
inContainer: PropTypes.bool,
/** Specifies whether lazy loading of the dropdown layout items is enabled */
infiniteScroll: PropTypes.bool,
/** Allows to render a custom input component instead of the default `<Input/>` */
inputElement: PropTypes.element,
/** Defines a callback function which is called on a request to render more list items */
loadMore: PropTypes.func,
/** Sets the default hover behavior:
* - `false` - no initially hovered list item
* - `true` - hover first selectable option
* - any `number/string` specify the id of an option to be hovered
*/
markedOption: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
/** Sets a maximum value of an input. Similar to HTML5 max attribute. */
max: PropTypes.number,
/** Sets the maximum height of the `dropdownLayout` in pixels */
maxHeightPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Sets the maximum number of characters that can be entered into a field */
maxLength: PropTypes.number,
/** Specifies whether input should have a dropdown menu arrow on the right side */
menuArrow: PropTypes.bool,
/** Sets a minimum value of an input. Similar to HTML5 min attribute. */
min: PropTypes.number,
/** Sets the minimum width of `dropdownLayout` in pixels */
minWidthPixels: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Reference element data when a form is submitted */
name: PropTypes.string,
/** Specifies whether input shouldn’t have rounded corners on its left */
noLeftBorderRadius: PropTypes.bool,
/** Specifies whether input shouldn’t have rounded corners on its right */
noRightBorderRadius: PropTypes.bool,
/** Defines a standard input `onBlur` callback */
onBlur: PropTypes.func,
/** Displays clear button (X) on a non-empty input and calls a callback function with no arguments */
onClear: PropTypes.func,
/** Defines a callback function which is called whenever the user presses the escape key */
onClose: PropTypes.func,
/** Defines a callback function called on `compositionstart`/`compositionend` events */
onCompositionChange: PropTypes.func,
/** Defines a callback function called on option deselect. Function receives the id of the unselected option as the first argument, and the actual option object as the second argument. */
onDeselect: PropTypes.func,
/** Defines a callback handler that is called when user presses -enter- */
onEnterPressed: PropTypes.func,
/** Defines a callback handler that is called when user presses -escape- */
onEscapePressed: PropTypes.func,
/** Defines a standard input `onFocus` callback */
onFocus: PropTypes.func,
/** Defines a standard input `onClick` callback. */
onInputClicked: PropTypes.func,
/** Defines a standard input `onKeyDown` callback */
onKeyDown: PropTypes.func,
/** Defines a standard input `onKeyUp` callback */
onKeyUp: PropTypes.func,
/** Defines a callback function which is called when user performs a submit action. Submit action triggers are:
* "Enter", "Tab", [typing any defined delimiters], paste action.
* `onManuallyInput(values: Array<string>): void` - the array of strings is the result of splitting the input value by the given delimiters. */
onManuallyInput: PropTypes.func,
/** Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor */
onMouseEnter: PropTypes.func,
/** Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor */
onMouseLeave: PropTypes.func,
/** Defines a callback function which is called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original `props.options` array. */
onOptionMarked: PropTypes.func,
/** Defines a callback function which is called when options dropdown is hidden */
onOptionsHide: PropTypes.func,
/** Defines a callback function which is called when options dropdown is shown */
onOptionsShow: PropTypes.func,
/** Defines a callback handler that is called when user pastes text from a clipboard (using mouse or keyboard shortcut) */
onPaste: PropTypes.func,
/** Defines a callback function which is called whenever user selects a different option in the list */
onSelect: PropTypes.func,
/** Array of objects:
* - `id <string / number>` *required*: the id of the option, should be unique;
* - value `<function / string / node>` *required*: can be a string, react element or a builder function;
* - disabled `<bool>` *default value- false*: whether this option is disabled or not;
* - linkTo `<string>`: when provided the option will be an anchor to the given value;
* - title `<bool>` *default value- false* **deprecated**: please use `listItemSectionBuilder` for rendering a title;
* - overrideStyle `<bool>` *default value- false* **deprecated**: please use `overrideOptionStyle` for override option styles;
* - overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself;
* - label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.
*/
options: PropTypes.arrayOf(optionValidator),
/** Handles container overflow */
overflow: PropTypes.string,
/** Sets a pattern that typed value must match to be valid (regex) */
pattern: PropTypes.string,
/** Sets a placeholder message to display */
placeholder: PropTypes.string,
/** Allows to pass all common popover props. Check `<Popover/>` API for a full list. */
popoverProps: PropTypes.shape({
appendTo: PropTypes.oneOf(['window', 'scrollParent', 'parent', 'viewport']),
maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
flip: PropTypes.bool,
fixed: PropTypes.bool,
placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
dynamicWidth: PropTypes.bool
}),
/** Pass a component you want to show as the prefix of the input, e.g., text string, icon */
prefix: PropTypes.node,
/** Specifies whether input is read only */
readOnly: PropTypes.bool,
/** Specifies whether input is mandatory */
required: PropTypes.bool,
/** Flip component horizontally so it would be more suitable to RTL */
rtl: PropTypes.bool,
/** Specifies whether selected option will be highlighted when dropdown is reopened */
selectedHighlight: PropTypes.bool,
/** Specifies selected option by its id */
selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Specifies an array of selected options ids */
selectedOptions: PropTypes.array,
/** Controls whether to show options if input is empty */
showOptionsIfEmptyInput: PropTypes.bool,
/** Controls the size of the input */
size: PropTypes.oneOf(['small', 'medium', 'large']),
/** Specify the status of a field */
status: PropTypes.oneOf(['error', 'warning', 'loading']),
/** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
statusMessage: PropTypes.node,
/** Pass a component you want to show as the suffix of the input, e.g., text string, icon */
suffix: PropTypes.node,
/** Indicates that element can be focused and where it participates in sequential keyboard navigation */
tabIndex: PropTypes.number,
/** Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. */
textOverflow: PropTypes.string,
/** Controls placement of a status tooltip */
tooltipPlacement: PropTypes.string,
/** Specifies the type of `<input>` element to display. Default type is text. */
type: PropTypes.string,
/** Specifies whether component should be shown or hidden */
visible: PropTypes.bool,
/** Specifies the current value of the element */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
valueParser: PropTypes.func
};
MultiSelectCheckbox.defaultProps = _objectSpread(_objectSpread({}, InputWithOptions.defaultProps), {}, {
delimiter: ', ',
selectedOptions: [],
closeOnSelect: false,
valueParser: function valueParser(option) {
return option.label || option.value;
}
});
export default MultiSelectCheckbox;