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

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _TagListSt = require("./TagList.st.css");
var _Tag = _interopRequireDefault(require("../Tag"));
var _TagListAction = _interopRequireDefault(require("./TagListAction"));
var _ToggleMoreButton = _interopRequireDefault(require("./ToggleMoreButton"));
var _dataHooks = _interopRequireDefault(require("./dataHooks"));
var _excluded = ["className"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/TagList/TagList.js";
var tagToActionButtonSize = {
  small: 'tiny',
  medium: 'small',
  large: 'medium'
};

/** TagList */
class TagList extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this._toggleExpanded = () => this.setState(prevState => ({
      isExpanded: !prevState.isExpanded
    }));
    this._renderToggleMoreButton = () => {
      var {
        toggleMoreButton,
        tags,
        maxVisibleTags,
        size
      } = this.props;
      var {
        isExpanded
      } = this.state;
      var amountOfHiddenTags = tags.length - maxVisibleTags;
      if (toggleMoreButton && amountOfHiddenTags > 0) {
        return /*#__PURE__*/_react.default.createElement(_ToggleMoreButton.default, {
          size: tagToActionButtonSize[size],
          toggleMoreButton,
          amountOfHiddenTags,
          isExpanded,
          dataHook: _dataHooks.default.toggleMoreButton,
          onClick: this._toggleExpanded,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 36,
            columnNumber: 9
          }
        });
      }
      return null;
    };
    this.state = {
      isExpanded: props.initiallyExpanded
    };
  }
  render() {
    var {
      dataHook,
      tags,
      actionButton,
      size,
      onTagRemove,
      maxVisibleTags
    } = this.props;
    var {
      isExpanded
    } = this.state;
    var visibleTags = isExpanded ? tags : tags.slice(0, maxVisibleTags);
    var actionButtonSize = tagToActionButtonSize[size];
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _TagListSt.classes.root,
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 7
      }
    }, visibleTags.map(_ref => {
      var {
          className
        } = _ref,
        tagProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
      return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, tagProps, {
        className: (0, _TagListSt.st)(_TagListSt.classes.item, className),
        size: size,
        onRemove: onTagRemove,
        key: tagProps.id,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 64,
          columnNumber: 11
        }
      }));
    }), this._renderToggleMoreButton(), actionButton && /*#__PURE__*/_react.default.createElement(_TagListAction.default, {
      dataHook: _dataHooks.default.actionButton,
      size: actionButtonSize,
      onClick: actionButton.onClick,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 74,
        columnNumber: 11
      }
    }, actionButton.label));
  }
}
TagList.displayName = 'TagList';
TagList.propTypes = {
  /** Applies a data-hook HTML attribute to be used in the tests */
  dataHook: _propTypes.default.string,
  /** Lists all component’s tags and its properties */
  tags: _propTypes.default.arrayOf(_propTypes.default.object),
  /** Defines a callback function that passes an `id` property as a parameter when removing a tag */
  onTagRemove: _propTypes.default.func,
  /** Sets the size of a component */
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
  /** Defines whether the list is:
   * - initially expanded (shows all tags)
   * - or collapsed (shows tags up to the max visible number)
   */
  initiallyExpanded: _propTypes.default.bool,
  /** Sets an amount of tags to show before expanding */
  maxVisibleTags: _propTypes.default.number,
  /** Defines the label of an action button and its onClick function */
  actionButton: _propTypes.default.shape({
    onClick: _propTypes.default.func,
    label: _propTypes.default.string
  }),
  /** Defines a function which provides props for the ToggleMoreButton
   * ##### toggleMoreButton signature is:
   * `function(amountOfHiddenTags: number, isExpanded: boolean) => ToggleMoreButtonProps`
   *
   * ##### ToggleMoreButtonProps:
   * * `label`: string
   * * `tooltipContent`: node
   * * `tooltipProps`: TooltipCommonProps
   */
  toggleMoreButton: _propTypes.default.func
};
TagList.defaultProps = {
  size: 'small',
  initiallyExpanded: false,
  maxVisibleTags: 3
};
var _default = exports.default = TagList;
//# sourceMappingURL=TagList.js.map