wix-style-react/dist/src/MultiSelectCheckbox/MultiSelectCheckbox.js

wix-style-react

"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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions"));
var _Input = _interopRequireDefault(require("../Input"));
var _MultiSelectCheckboxSt = require("./MultiSelectCheckbox.st.css");
var _ListItemSelect = require("../ListItemSelect");
var _ListItemSection = require("../ListItemSection");
var _DropdownLayout = require("../DropdownLayout/DropdownLayout");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/MultiSelectCheckbox/MultiSelectCheckbox.js";
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; }
var OPEN_DROPDOWN_CHARS = ['Enter', 'ArrowDown', 'Space', ' '];
class MultiSelectCheckbox extends _InputWithOptions.default {
  createOptions(options) {
    return options.map(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);
      }
    });
  }
  _patchOptionWithSelectionMechanism(option) {
    var _value = option.value;
    return _objectSpread(_objectSpread({}, option), {}, {
      value: props => _value(_objectSpread(_objectSpread({}, props), {}, {
        selected: this.isSelectedId(option.id)
      }))
    });
  }
  _isUsingCustomRenderFunction(_ref) {
    var {
      value
    } = _ref;
    return typeof value === 'function';
  }
  _isDivider(_ref2) {
    var {
      value
    } = _ref2;
    return value === '-';
  }
  isSelectedId(optionId) {
    return this.props.selectedOptions.indexOf(optionId) !== -1;
  }
  dropdownAdditionalProps() {
    return {
      options: this.createOptions(this.props.options),
      closeOnSelect: false,
      selectedHighlight: false
    };
  }
  selectedOptionsToText() {
    return this.props.selectedOptions.map(selectedOption => this.props.options.find(option => option.id === selectedOption)).filter(selectedOption => selectedOption).map(this.props.valueParser).join(this.props.delimiter);
  }
  inputAdditionalProps() {
    var _this$props$inputElem;
    var value = 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: 87,
          columnNumber: 9
        }
      }),
      value
    };
  }
  inputClasses() {
    return _MultiSelectCheckboxSt.classes.showPointer;
  }
  _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(op => 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);
    }
  }
  _onInputClicked(event) {
    if (!this.props.readOnly) {
      this.state.showOptions ? this.hideOptions() : this.showOptions();
    }
    if (this.props.onInputClicked) {
      this.props.onInputClicked(event);
    }
  }
  _onKeyDown(event) {
    if (OPEN_DROPDOWN_CHARS.includes(event.key)) {
      event.preventDefault();
      this.showOptions();
    }
    this.dropdownLayout && this.dropdownLayout._onSelectListKeyDown(event);
  }
  _onFocus(e) {
    if (this.props.disabled) {
      return;
    }
    this._focused = true;
    this.setState({
      isEditing: false
    });
    if (this.props.onFocus) {
      this.props.onFocus(e);
    }
  }
}
MultiSelectCheckbox.displayName = 'MultiSelectCheckbox';
MultiSelectCheckbox.propTypes = {
  /** Associate a control with the regions that it controls */
  ariaControls: _propTypes.default.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.default.string,
  /** Define a string that labels the current element in case where a text label is not visible on the screen */
  ariaLabel: _propTypes.default.string,
  /** Focus the element on mount (standard React input autoFocus) */
  autoFocus: _propTypes.default.bool,
  /** Control the border style of input */
  border: _propTypes.default.oneOf(['standard', 'round', 'bottomLine', 'none']),
  /** Specifies a CSS class name to be appended to the component’s root element */
  className: _propTypes.default.string,
  /** Displays clear button (X) on a non-empty input */
  clearButton: _propTypes.default.bool,
  /** Closes `DropdownLayout` when option is selected */
  closeOnSelect: _propTypes.default.bool,
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** Sets a default value for those who want to use this component un-controlled */
  defaultValue: _propTypes.default.string,
  /** Specifies the delimiter symbol to be displayed between the selected options in the input */
  delimiter: _propTypes.default.string,
  /** Specifies whether input should be disabled or not */
  disabled: _propTypes.default.bool,
  /** Sets the width of the dropdown in pixels */
  dropdownWidth: _propTypes.default.string,
  /** Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>` */
  fixedFooter: _propTypes.default.node,
  /** Adds a fixed header container at the top of options list in `<DropdownLayout/>` */
  fixedHeader: _propTypes.default.node,
  /** Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option. */
  focusOnOption: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  /** Scrolls view to the selected option when dropdown layout is opened */
  focusOnSelectedOption: _propTypes.default.bool,
  /** USED FOR TESTING - forces focus state on the input */
  forceFocus: _propTypes.default.bool,
  /** USED FOR TESTING - forces hover state on the input */
  forceHover: _propTypes.default.bool,
  /** Specifies whether there are more items to be loaded */
  hasMore: _propTypes.default.bool,
  /** Specifies whether status suffix should be hidden */
  hideStatusSuffix: _propTypes.default.bool,
  /** Highlight word parts that match search criteria in bold */
  highlight: _propTypes.default.bool,
  /** Assigns an unique identifier for the root element */
  id: _propTypes.default.string,
  /** Specifies whether lazy loading of the dropdown layout items is enabled */
  infiniteScroll: _propTypes.default.bool,
  /** Defines a callback function which is called on a request to render more list items */
  loadMore: _propTypes.default.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.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.number]),
  /** Sets the maximum height of the `dropdownLayout` in pixels */
  maxHeightPixels: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  /** Sets the maximum number of characters that can be entered into a field */
  maxLength: _propTypes.default.number,
  /** Specifies whether input should have a dropdown menu arrow on the right side */
  menuArrow: _propTypes.default.bool,
  /** Sets the minimum width of `dropdownLayout` in pixels */
  minWidthPixels: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  /** Reference element data when a form is submitted */
  name: _propTypes.default.string,
  /** Specifies whether input shouldn’t have rounded corners on its left */
  noLeftBorderRadius: _propTypes.default.bool,
  /** Specifies whether input shouldn’t have rounded corners on its right */
  noRightBorderRadius: _propTypes.default.bool,
  /** Defines a standard input `onBlur` callback */
  onBlur: _propTypes.default.func,
  /** Displays clear button (X) on a non-empty input and calls a callback function with no arguments */
  onClear: _propTypes.default.func,
  /** Defines a callback function which is called whenever the user presses the escape key */
  onClose: _propTypes.default.func,
  /** Defines a callback function called on `compositionstart`/`compositionend` events */
  onCompositionChange: _propTypes.default.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.default.func,
  /** Defines a callback handler that is called when user presses -enter- */
  onEnterPressed: _propTypes.default.func,
  /** Defines a callback handler that is called when user presses -escape- */
  onEscapePressed: _propTypes.default.func,
  /** Defines a standard input `onFocus` callback */
  onFocus: _propTypes.default.func,
  /** Defines a standard input `onClick` callback. */
  onInputClicked: _propTypes.default.func,
  /** Defines a standard input `onKeyDown` callback */
  onKeyDown: _propTypes.default.func,
  /** Defines a standard input `onKeyUp` callback */
  onKeyUp: _propTypes.default.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.default.func,
  /** Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor */
  onMouseEnter: _propTypes.default.func,
  /** Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor */
  onMouseLeave: _propTypes.default.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.default.func,
  /** Defines a callback function which is called when options dropdown is hidden */
  onOptionsHide: _propTypes.default.func,
  /** Defines a callback function which is called when options dropdown is shown */
  onOptionsShow: _propTypes.default.func,
  /** Defines a callback handler that is called when user pastes text from a clipboard (using mouse or keyboard shortcut) */
  onPaste: _propTypes.default.func,
  /** Defines a callback function which is called whenever user selects a different option in the list */
  onSelect: _propTypes.default.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.default.arrayOf(_DropdownLayout.optionValidator),
  /** Handles container overflow */
  overflow: _propTypes.default.string,
  /** Sets a pattern that typed value must match to be valid (regex) */
  pattern: _propTypes.default.string,
  /** Sets a placeholder message to display */
  placeholder: _propTypes.default.string,
  /** Allows to pass all common popover props. Check `<Popover/>` API for a full list. */
  popoverProps: _propTypes.default.shape({
    appendTo: _propTypes.default.oneOf(['window', 'scrollParent', 'parent', 'viewport']),
    maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    flip: _propTypes.default.bool,
    fixed: _propTypes.default.bool,
    placement: _propTypes.default.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.default.bool
  }),
  /** Pass a component you want to show as the prefix of the input, e.g., text string, icon */
  prefix: _propTypes.default.node,
  /** Specifies whether input is read only */
  readOnly: _propTypes.default.bool,
  /** Specifies whether input is mandatory */
  required: _propTypes.default.bool,
  /** Specifies selected option by its id */
  selectedId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  /** Specifies an array of selected options ids  */
  selectedOptions: _propTypes.default.array,
  /** Controls whether to show options if input is empty */
  showOptionsIfEmptyInput: _propTypes.default.bool,
  /** Controls the size of the input */
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
  /** Specify the status of a field */
  status: _propTypes.default.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.default.node,
  /** Pass a component you want to show as the suffix of the input, e.g., text string, icon */
  suffix: _propTypes.default.node,
  /** Indicates that element can be focused and where it participates in sequential keyboard navigation */
  tabIndex: _propTypes.default.number,
  /** Handles text overflow behavior. It can either `clip` (default) or display `ellipsis`. */
  textOverflow: _propTypes.default.string,
  /** Controls placement of a status tooltip */
  tooltipPlacement: _propTypes.default.string,
  /** Specifies the type of `<input>` element to display. Default type is text. */
  type: _propTypes.default.string,
  /** Specifies the current value of the element */
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  valueParser: _propTypes.default.func,
  /** Specifies if the input can be edited */
  disableEditing: _propTypes.default.bool
};
MultiSelectCheckbox.defaultProps = _objectSpread(_objectSpread({}, _InputWithOptions.default.defaultProps), {}, {
  delimiter: ', ',
  selectedOptions: [],
  closeOnSelect: false,
  valueParser: option => option.label || option.value,
  readOnly: false,
  disableEditing: true
});
var _default = exports.default = MultiSelectCheckbox;
//# sourceMappingURL=MultiSelectCheckbox.js.map