@wix/design-system/dist/cjs/TableActionCell/TableActionCell.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _PopoverMenu = _interopRequireDefault(require("../PopoverMenu"));
var _Button = _interopRequireDefault(require("../Button"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _constants = require("./constants");
var _HoverSlot = _interopRequireDefault(require("./HoverSlot"));
var _TableActionCellSt = require("./TableActionCell.st.css.js");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _WixDesignSystemIconThemeProvider = require("../WixDesignSystemIconThemeProvider");
var _excluded = ["dataHook", "text", "skin", "onClick", "disabled", "prefixIcon", "suffixIcon", "as", "priority", "visibility", "disabledDescription", "tooltipProps"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/TableActionCell/TableActionCell.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 blurElementWithoutFocusVisible = element => {
  if (process.env.NODE_ENV !== 'test' && !element.matches(':focus-visible')) {
    var activeElement = document.activeElement;
    if (activeElement && typeof activeElement.blur === 'function') {
      activeElement.blur();
    }
  }
};
var renderMainActionButton = (_ref, size) => {
  var {
      dataHook,
      text,
      skin,
      onClick: _onClick2,
      disabled,
      prefixIcon,
      suffixIcon,
      as,
      priority,
      visibility,
      disabledDescription,
      tooltipProps
    } = _ref,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var visibilityPriorityMap = {
    always: 'secondary',
    onHover: 'primary'
  };
  var isDisabledWithTooltip = disabled && !!disabledDescription;
  function renderButton() {
    var _ref2;
    var buttonProps = _objectSpread({
      key: text,
      as,
      dataHook: dataHook || _constants.DATA_HOOKS.primaryAction,
      className: (0, _TableActionCellSt.st)(_TableActionCellSt.classes.action, {
        size
      }),
      disabled,
      skin,
      priority: (_ref2 = visibility ? visibilityPriorityMap[visibility] : undefined) !== null && _ref2 !== void 0 ? _ref2 : priority,
      size,
      prefixIcon,
      suffixIcon,
      onClick: event => {
        _onClick2();
        blurElementWithoutFocusVisible(event.target);
        event.stopPropagation();
      }
    }, rest);
    return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, buttonProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 103,
        columnNumber: 12
      }
    }), text);
  }
  if (isDisabledWithTooltip) {
    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
      dataHook: _constants.DATA_HOOKS.primaryActionTooltip,
      disabled: false,
      content: disabledDescription
    }, tooltipProps, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 108,
        columnNumber: 7
      }
    }), renderButton());
  }
  return renderButton();
};
var renderVisibleActions = (actions, size) => actions.map((_ref3, index) => {
  var {
    text,
    icon,
    onClick: _onClick3,
    dataHook,
    disabled,
    disabledDescription,
    tooltipProps,
    skin
  } = _ref3;
  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
    key: index,
    dataHook: dataHook || _constants.DATA_HOOKS.visibleActionTooltip,
    disabled: disabled && disabledDescription === '',
    content: disabled && Boolean(disabledDescription) ? disabledDescription : text
  }, tooltipProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 140,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    dataHook: _constants.DATA_HOOKS.visibleAction,
    priority: "secondary",
    disabled: disabled,
    className: (0, _TableActionCellSt.st)(_TableActionCellSt.classes.action, {
      size
    }),
    onClick: event => {
      _onClick3(event);
      blurElementWithoutFocusVisible(event.target);
      event.stopPropagation();
    },
    size: size,
    ariaLabel: text,
    skin: skin,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 149,
      columnNumber: 9
    }
  }, icon));
});
var renderHiddenActions = (actions, popoverMenuProps, size, moreActionsTooltipText, moreActionsProps, icons) => /*#__PURE__*/_react.default.createElement(_PopoverMenu.default, (0, _extends2.default)({
  dataHook: _constants.DATA_HOOKS.popoverMenu,
  appendTo: "parent",
  placement: "top",
  textSize: "small",
  triggerElement: _ref4 => {
    var {
      toggle,
      isOpen,
      ref
    } = _ref4;
    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      content: moreActionsTooltipText,
      disabled: !moreActionsTooltipText,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 184,
        columnNumber: 7
      }
    }, _ref5 => {
      var {
        onFocus: _onFocus,
        onBlur
      } = _ref5;
      return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
        onBlur: onBlur,
        priority: (moreActionsProps == null ? void 0 : moreActionsProps.priority) || 'secondary',
        skin: moreActionsProps == null ? void 0 : moreActionsProps.skin,
        className: (0, _TableActionCellSt.st)(_TableActionCellSt.classes.action, {
          size
        }),
        dataHook: _constants.DATA_HOOKS.triggerElement,
        size: size,
        onClick: toggle,
        ref: ref,
        ariaLabel: moreActionsTooltipText || undefined,
        "aria-haspopup": "menu",
        "aria-expanded": isOpen,
        onFocus: (event, _ref6) => {
          var {
            focus
          } = _ref6;
          _onFocus(event, {
            blur: () => blurElementWithoutFocusVisible(event.target),
            focus
          });
        },
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 189,
          columnNumber: 11
        }
      }, /*#__PURE__*/_react.default.createElement(icons.More, {
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 212,
          columnNumber: 13
        }
      }));
    });
  }
}, popoverMenuProps, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 178,
    columnNumber: 3
  }
}), actions.map((action, index) => {
  var _skin;
  return !('divider' in action && action.divider) ? /*#__PURE__*/_react.default.createElement(_PopoverMenu.default.MenuItem, {
    skin: (_skin = action.skin) !== null && _skin !== void 0 ? _skin : 'dark',
    key: index,
    dataHook: action.dataHook || _constants.DATA_HOOKS.popoverMenuItem,
    prefixIcon: action.icon,
    onClick: () => action.onClick(),
    text: action.text,
    disabled: action.disabled,
    disabledDescription: action.disabledDescription,
    subtitle: action.subtitle,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 221,
      columnNumber: 9
    }
  }) : /*#__PURE__*/_react.default.createElement(_PopoverMenu.default.Divider, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 243,
      columnNumber: 9
    }
  });
}));
var renderPlaceholder = (size, icons) => /*#__PURE__*/_react.default.createElement(_IconButton.default, {
  dataHook: _constants.DATA_HOOKS.placeholder,
  size: size,
  priority: "secondary",
  tabIndex: -1,
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 253,
    columnNumber: 3
  }
}, /*#__PURE__*/_react.default.createElement(icons.ChevronRight, {
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 259,
    columnNumber: 5
  }
}));
var TableActionCell = _ref7 => {
  var _visibility;
  var {
    onClick: _onClick = () => {},
    dataHook,
    primaryAction,
    secondaryActions = [],
    numOfVisibleSecondaryActions = 0,
    alwaysShowSecondaryActions = false,
    alwaysShowPrimaryActions = false,
    moreActionsTooltipText,
    moreActionsProps,
    popoverMenuProps,
    size = 'medium'
  } = _ref7;
  var icons = (0, _WixDesignSystemIconThemeProvider.useIcons)('TableActionCell', {
    ChevronRight: _wixUiIconsCommon.ChevronRight,
    More: _wixUiIconsCommon.More
  });
  var primaryActionSkin = primaryAction && !Array.isArray(primaryAction) ? primaryAction.skin : undefined;
  (0, _react.useEffect)(() => {
    if (primaryActionSkin) {
      (0, _deprecationLog.default)('<TableActionCell/> - prop "primaryAction" with key "skin" is deprecated and will be removed in next major release. It has been replaced by the visibility property, which switches skin properties automatically based on visibility options.');
    }
  }, [primaryActionSkin]);
  var visibleActions = secondaryActions.slice(0, numOfVisibleSecondaryActions);
  var hiddenActions = secondaryActions.slice(numOfVisibleSecondaryActions);
  var isPrimaryActionArray = Array.isArray(primaryAction);
  var primaryActionDisplay = isPrimaryActionArray ? alwaysShowPrimaryActions ? 'always' : 'onHover' : (_visibility = primaryAction == null ? void 0 : primaryAction.visibility) !== null && _visibility !== void 0 ? _visibility : 'onHover';
  var shouldShowPlaceholder = isPrimaryActionArray ? !alwaysShowPrimaryActions : (primaryAction == null ? void 0 : primaryAction.visibility) !== 'always';
  return /*#__PURE__*/_react.default.createElement("span", {
    "data-hook": dataHook,
    className: (0, _TableActionCellSt.st)(_TableActionCellSt.classes.root, {
      size
    }),
    "data-more-actions-tooltip-text": moreActionsTooltipText,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 313,
      columnNumber: 5
    }
  }, primaryAction && /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
    "data-hook": _constants.DATA_HOOKS.primaryActionWrapper,
    display: primaryActionDisplay,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 319,
      columnNumber: 9
    }
  }, isPrimaryActionArray ? primaryAction.map(action => renderMainActionButton(action, size)) : renderMainActionButton(primaryAction, size)), visibleActions.length > 0 && /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
    "data-hook": _constants.DATA_HOOKS.visibleActionsWrapper,
    display: alwaysShowSecondaryActions ? 'always' : 'onHover',
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 338,
      columnNumber: 9
    }
  }, renderVisibleActions(visibleActions, size)), hiddenActions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
    onClick: e => e.stopPropagation(),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 347,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
    display: "always",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 348,
      columnNumber: 11
    }
  }, renderHiddenActions(hiddenActions, popoverMenuProps, size, moreActionsTooltipText, moreActionsProps, icons))), primaryAction && shouldShowPlaceholder && (!secondaryActions.length || secondaryActions.length === numOfVisibleSecondaryActions) && /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
    display: "notOnHover",
    className: _TableActionCellSt.classes.placeholderIcon,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 365,
      columnNumber: 11
    }
  }, renderPlaceholder(size, icons)));
};
TableActionCell.displayName = 'TableActionCell';
var _default = exports.default = TableActionCell;
//# sourceMappingURL=TableActionCell.js.map