@wix/design-system/dist/cjs/ListItemSelect/ListItemSelect.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.listItemSelectBuilder = exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _Box = _interopRequireDefault(require("../Box"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Highlighter = _interopRequireDefault(require("../Highlighter"));
var _HighlightContext = _interopRequireDefault(require("../InputWithOptions/HighlightContext"));
var _Text = _interopRequireDefault(require("../Text"));
var _ListItemSelect = require("./ListItemSelect.constants");
var _ListItemSelectSt = require("./ListItemSelect.st.css.js");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _ListItemSelect2 = _interopRequireDefault(require("./ListItemSelect.semanticClassNames"));
var _excluded = ["selected", "hovered", "size"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ListItemSelect/ListItemSelect.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 ListItemSelect = _ref => {
  var {
    checkbox = false,
    selected = false,
    highlighted,
    ellipsis = false,
    size = _ListItemSelect.SIZE.medium,
    dataHook = 'list-item-select',
    className,
    disabled,
    disabledDescription,
    onClick,
    prefix,
    suffix,
    title,
    subtitle,
    tooltipProps,
    titleMaxLines,
    subtitleMaxLines
  } = _ref;
  var {
    highlight,
    match
  } = (0, _react.useContext)(_HighlightContext.default);
  var WrapperComponent = checkbox ? _Checkbox.default : _react.default.Fragment;
  var HighlightWrapper = highlight ? _Highlighter.default : _react.default.Fragment;
  var wrapperComponentProps = checkbox ? {
    dataHook: _ListItemSelect.DATA_HOOK.CHECKBOX,
    className: _ListItemSelectSt.classes.fullWidthContent,
    size,
    checked: selected,
    disabled
  } : {};
  var highlightWrapperProps = highlight ? {
    match
  } : {};
  var textProps = {
    tagName: 'div',
    size,
    ellipsis,
    tooltipProps,
    skin: disabled ? 'disabled' : 'standard',
    weight: 'thin',
    light: selected && !checkbox,
    maxLines: titleMaxLines
  };
  var secondaryTextProps = _objectSpread(_objectSpread({}, textProps), {}, {
    light: !disabled,
    secondary: !selected || checkbox,
    maxLines: subtitleMaxLines
  });
  var isDisabledWithTooltip = disabled && !!disabledDescription;
  function renderComponent() {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.root, {
        checkbox,
        selected,
        highlighted,
        disabled,
        size,
        hoverHighlightDisabled: highlighted === false,
        withPrefix: !!prefix
      }, className, _ListItemSelect2.default.container),
      "data-hook": dataHook,
      "data-selected": selected,
      "aria-disabled": disabled,
      "aria-selected": selected,
      "aria-description": isDisabledWithTooltip ? disabledDescription : undefined,
      onClick: !disabled ? onClick : undefined,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 74,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, wrapperComponentProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 98,
        columnNumber: 9
      }
    }), /*#__PURE__*/_react.default.createElement(_Box.default, {
      width: "100%",
      verticalAlign: "middle",
      className: _ListItemSelectSt.classes.textsWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 99,
        columnNumber: 11
      }
    }, prefix && /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
      className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.prefix, {
        subtitle: Boolean(subtitle)
      }),
      dataHook: _ListItemSelect.DATA_HOOK.PREFIX
    }, textProps, {
      ellipsis: false,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 105,
        columnNumber: 15
      }
    }), prefix), /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ListItemSelectSt.st)(_ListItemSelectSt.classes.titleWrapper, {
        subtitle: Boolean(subtitle)
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 116,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _ListItemSelectSt.classes.titleOverrideWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 121,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement(HighlightWrapper, (0, _extends2.default)({}, highlightWrapperProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 122,
        columnNumber: 17
      }
    }), /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
      className: _ListItemSelectSt.classes.title,
      dataHook: _ListItemSelect.DATA_HOOK.TITLE
    }, textProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 123,
        columnNumber: 19
      }
    }), title))), subtitle && /*#__PURE__*/_react.default.createElement("div", {
      className: _ListItemSelectSt.classes.subtitleOverrideWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 133,
        columnNumber: 17
      }
    }, /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
      className: _ListItemSelectSt.classes.subtitle,
      dataHook: _ListItemSelect.DATA_HOOK.SUBTITLE,
      secondary: true
    }, secondaryTextProps, {
      size: _ListItemSelect.SIZE.small,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 134,
        columnNumber: 19
      }
    }), subtitle))), suffix && /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
      dataHook: _ListItemSelect.DATA_HOOK.SUFFIX,
      className: _ListItemSelectSt.classes.suffix
    }, secondaryTextProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 147,
        columnNumber: 15
      }
    }), suffix))));
  }
  if (isDisabledWithTooltip) {
    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      dataHook: _ListItemSelect.DATA_HOOK.TOOLTIP,
      disabled: false,
      content: disabledDescription,
      enterDelay: 450,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 163,
        columnNumber: 7
      }
    }, renderComponent());
  }
  return renderComponent();
};
ListItemSelect.displayName = 'ListItemSelect';
ListItemSelect.propTypes = {
  dataHook: _propTypes.default.string,
  className: _propTypes.default.string,
  checkbox: _propTypes.default.bool,
  prefix: _propTypes.default.any,
  title: _propTypes.default.any,
  subtitle: _propTypes.default.any,
  suffix: _propTypes.default.any,
  selected: _propTypes.default.bool,
  highlighted: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  disabledDescription: _propTypes.default.string,
  tooltipProps: _propTypes.default.any,
  onClick: _propTypes.default.func,
  size: _propTypes.default.any,
  ellipsis: _propTypes.default.bool,
  titleMaxLines: _propTypes.default.number,
  subtitleMaxLines: _propTypes.default.number
};
var _default = exports.default = ListItemSelect;
var listItemSelectBuilder = _ref2 => {
  var {
    id,
    className,
    checkbox,
    prefix,
    title,
    label,
    subtitle,
    suffix,
    disabled,
    disabledDescription,
    size,
    ellipsis,
    dataHook,
    tooltipProps,
    titleMaxLines,
    subtitleMaxLines
  } = _ref2;
  return {
    id,
    disabled,
    overrideOptionStyle: true,
    label,
    prefix,
    value: _ref3 => {
      var {
          selected,
          hovered,
          size: restSize
        } = _ref3,
        rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
      return /*#__PURE__*/_react.default.createElement(ListItemSelect, (0, _extends2.default)({
        dataHook: dataHook,
        className: className,
        checkbox: checkbox,
        prefix: prefix,
        title: title,
        subtitle: subtitle,
        suffix: suffix,
        size: size !== null && size !== void 0 ? size : restSize,
        ellipsis: ellipsis,
        disabledDescription: disabledDescription,
        selected: selected,
        highlighted: hovered,
        tooltipProps: tooltipProps,
        titleMaxLines: titleMaxLines,
        subtitleMaxLines: subtitleMaxLines
      }, rest, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 230,
          columnNumber: 5
        }
      }));
    }
  };
};
exports.listItemSelectBuilder = listItemSelectBuilder;
//# sourceMappingURL=ListItemSelect.js.map