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

@wix/design-system

"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 _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _TableListItem = require("./TableListItem.constants");
var _TableListItemSt = require("./TableListItem.st.css.js");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _DragHandle = require("../DragHandle/DragHandle");
var _forkRef = require("../utils/forkRef");
var _useDraggableContainer = require("../DraggableContainer/useDraggableContainer");
var _system = require("@wix/wix-ui-icons-common/system");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/TableListItem/TableListItem.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); }
var getWidthStyle = options => options.reduce((acc, _ref) => {
  var {
    width
  } = _ref;
  return "".concat(acc, " ").concat(typeof width === 'number' ? width + 'px' : width || '1fr');
}, '');
var TableListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
  var {
    options,
    verticalPadding = _TableListItem.PADDING.small,
    horizontalPadding = _TableListItem.PADDING.large,
    selectable = false,
    checkbox = false,
    checkboxDisabled,
    checkboxTooltipContent,
    checkboxTooltipProps,
    checked,
    onCheckboxChange = () => {},
    focused,
    onBlur,
    showDivider = false,
    onKeyUp,
    onClick,
    onMouseEnter,
    onMouseLeave,
    className,
    dataHook,
    draggable = false,
    dragging,
    dragDisabled,
    dragHandleProps,
    hideDragHandle,
    dragHandleSize = 'large',
    showDragHandleOnHover = false,
    border = false,
    showSelectionBorder = true,
    expandable = false,
    expandDisabled,
    reserveExpandHandleSpace,
    reserveDragHandleSpace,
    onClickExpand,
    expanded = false,
    ariaLabel
  } = _ref2;
  var draggableRef = (0, _react.useRef)(null);
  var rootRef = (0, _react.useRef)(null);
  var hasControls = draggable || expandable || checkbox || reserveExpandHandleSpace || reserveDragHandleSpace;
  var isSelectableWithoutCheckbox = !!(selectable && onClick && !checkbox);
  var noVisibleControls = hideDragHandle && !expandable && !checkbox && !reserveExpandHandleSpace && !reserveDragHandleSpace;
  _react.default.useEffect(() => {
    if (draggableRef.current && focused) {
      draggableRef.current.focus();
    }
  }, [draggableRef, focused]);
  _react.default.useImperativeHandle(ref, () => ({
    focus: () => rootRef.current && rootRef.current.focus()
  }));
  var {
    className: draggableContainerClassName
  } = (0, _useDraggableContainer.useDraggableContainer)({
    dragging,
    draggable,
    dragDisabled,
    highlight: true
  });
  function selectItem(e) {
    if (e.key === 'Enter' && document.activeElement === (rootRef == null ? void 0 : rootRef.current)) {
      onClick == null || onClick(e);
    }
  }
  function interceptOnClickExpand(e) {
    onClickExpand == null || onClickExpand(e);
    e.stopPropagation();
  }
  var ExpandHandle = _ref3 => {
    var {
      children
    } = _ref3;
    if (expandable) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _TableListItemSt.st)(_TableListItemSt.classes.expandHandle, {
          expandable: expandable && !expandDisabled
        }),
        onClick: expandDisabled ? undefined : interceptOnClickExpand,
        "data-hook": _TableListItem.DATA_HOOKS.tableListItemExpandHandleContainer,
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 113,
          columnNumber: 11
        }
      }, children);
    }
    if (reserveExpandHandleSpace) {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _TableListItemSt.st)(_TableListItemSt.classes.expandHandle, {
          hidden: reserveExpandHandleSpace
        }),
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 127,
          columnNumber: 11
        }
      }, children);
    }
    return null;
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: rootRef,
    "data-hook": dataHook,
    className: (0, _TableListItemSt.st)(_TableListItemSt.classes.root, {
      draggable: draggable && !dragDisabled,
      dragDisabled,
      dragging,
      showDragHandleOnHover,
      checked: (checkbox || selectable) && checked,
      showDivider,
      clickable: !!onClick,
      selectable: isSelectableWithoutCheckbox,
      verticalPadding,
      horizontalPadding,
      border,
      showSelectionBorder,
      dragHandleSize,
      hideDragHandle,
      noVisibleControls
    }, className, draggableContainerClassName),
    tabIndex: !isSelectableWithoutCheckbox ? -1 : 0,
    "aria-label": !isSelectableWithoutCheckbox ? undefined : ariaLabel,
    "aria-selected": !isSelectableWithoutCheckbox ? undefined : checked,
    onKeyDown: !isSelectableWithoutCheckbox ? undefined : e => selectItem(e),
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onClick: onClick,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 7
    }
  }, hasControls && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _TableListItemSt.st)(_TableListItemSt.classes.controlsContainer, {
      dragHandleSize
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 177,
      columnNumber: 11
    }
  }, draggable ? /*#__PURE__*/_react.default.createElement("div", {
    className: _TableListItemSt.classes.handleContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 179,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, (0, _extends2.default)({
    tabIndex: onKeyUp ? 0 : undefined
  }, dragHandleProps, {
    domRef: (0, _forkRef.forkRef)(draggableRef, (dragHandleProps == null ? void 0 : dragHandleProps.domRef) || null),
    onBlur: onBlur,
    onKeyUp: onKeyUp,
    dragging: dragging,
    disabled: dragDisabled,
    dataHook: _TableListItem.DATA_HOOKS.tableListItemDragHandle,
    dragHandleSize: dragHandleSize,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 180,
      columnNumber: 17
    }
  }))) : reserveDragHandleSpace ? /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _TableListItemSt.st)(_TableListItemSt.classes.handleContainer, {
      hidden: reserveDragHandleSpace
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 196,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
    dragHandleSize: dragHandleSize,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 201,
      columnNumber: 17
    }
  })) : null, /*#__PURE__*/_react.default.createElement(ExpandHandle, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 205,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_system.CaretRight, {
    className: (0, _TableListItemSt.st)(_TableListItemSt.classes.caretIcon, {
      expanded
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 206,
      columnNumber: 15
    }
  })), checkbox && /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _TableListItemSt.st)(_TableListItemSt.classes.checkbox, {
      checkboxDisabled
    }),
    "data-hook": _TableListItem.DATA_HOOKS.tableListItemCheckboxContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 210,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
    checked: checked,
    disabled: checkboxDisabled,
    onChange: checkboxDisabled ? undefined : onCheckboxChange,
    dataHook: _TableListItem.DATA_HOOKS.tableListItemCheckbox,
    tooltipContent: checkboxTooltipContent,
    tooltipProps: checkboxTooltipProps,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 214,
      columnNumber: 17
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _TableListItemSt.classes.optionsContainer,
    style: {
      gridTemplateColumns: getWidthStyle(options)
    },
    "data-hook": _TableListItem.DATA_HOOKS.tableListItemOptionsContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 226,
      columnNumber: 9
    }
  }, options.map((_ref4, index) => {
    var {
      value,
      align
    } = _ref4;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _TableListItemSt.st)(_TableListItemSt.classes.align, {
        position: align && _TableListItem.ALIGN[align]
      }),
      key: index,
      "data-hook": _TableListItem.DATA_HOOKS.tableListItemValue,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 234,
        columnNumber: 13
      }
    }, value);
  })));
});
TableListItem.displayName = 'TableListItem';
TableListItem.propTypes = {
  dataHook: _propTypes.default.string,
  className: _propTypes.default.string,
  // @ts-expect-error incompatibility https://github.com/DefinitelyTyped/DefinitelyTyped/issues/45094
  options: _propTypes.default.arrayOf(_propTypes.default.shape({
    value: _propTypes.default.node.isRequired,
    width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
    align: _propTypes.default.oneOf([_TableListItem.ALIGN.left, _TableListItem.ALIGN.center, _TableListItem.ALIGN.right])
  }).isRequired).isRequired,
  verticalPadding: _propTypes.default.oneOf([_TableListItem.PADDING.large, _TableListItem.PADDING.medium, _TableListItem.PADDING.small, _TableListItem.PADDING.tiny, _TableListItem.PADDING.xTiny, _TableListItem.PADDING.xxTiny]),
  horizontalPadding: _propTypes.default.oneOf([_TableListItem.PADDING.large, _TableListItem.PADDING.medium, _TableListItem.PADDING.small, _TableListItem.PADDING.tiny, _TableListItem.PADDING.xTiny, _TableListItem.PADDING.xxTiny]),
  dragging: _propTypes.default.bool,
  checkbox: _propTypes.default.bool,
  checkboxDisabled: _propTypes.default.bool,
  checked: _propTypes.default.bool,
  onCheckboxChange: _propTypes.default.func,
  draggable: _propTypes.default.bool,
  dragDisabled: _propTypes.default.bool,
  showDragHandleOnHover: _propTypes.default.bool,
  showDivider: _propTypes.default.bool,
  onBlur: _propTypes.default.func,
  onKeyUp: _propTypes.default.func,
  focused: _propTypes.default.bool,
  onClick: _propTypes.default.func,
  onMouseEnter: _propTypes.default.func,
  onMouseLeave: _propTypes.default.func,
  dragHandleProps: _propTypes.default.object,
  checkboxTooltipContent: _propTypes.default.any,
  checkboxTooltipProps: _propTypes.default.object,
  border: _propTypes.default.bool,
  showSelectionBorder: _propTypes.default.bool,
  dragHandleSize: _propTypes.default.oneOf([_TableListItem.DRAG_HANDLE_SIZE.small, _TableListItem.DRAG_HANDLE_SIZE.large]),
  expandable: _propTypes.default.bool,
  expanded: _propTypes.default.bool,
  onClickExpand: _propTypes.default.func,
  expandDisabled: _propTypes.default.bool,
  selectable: _propTypes.default.bool,
  ariaLabel: _propTypes.default.string
};
var _default = exports.default = TableListItem;
//# sourceMappingURL=TableListItem.js.map