wix-style-react
Version:
wix-style-react
433 lines (429 loc) • 16.8 kB
JavaScript
"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 _propTypes = _interopRequireDefault(require("prop-types"));
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");
var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
var _Popover = require("../Popover");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _excluded = ["text", "skin", "onClick", "disabled", "prefixIcon", "suffixIcon", "as", "priority", "visibility"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/TableActionCell/TableActionCell.js";
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 blurElementWithoutFocusVisible = element => {
if (process.env.NODE_ENV !== 'test' && !element.matches(':focus-visible')) {
document.activeElement.blur();
}
};
/* eslint-disable react/prop-types */
var renderPrimaryAction = (_ref, size) => {
var _visibilityPriorityMa;
var {
text,
skin,
onClick: _onClick,
disabled,
prefixIcon,
suffixIcon,
as,
priority,
visibility
} = _ref,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var visibilityPriorityMap = {
always: 'secondary',
onHover: 'primary'
};
return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
disabled: disabled,
skin: visibility ? undefined : skin,
priority: (_visibilityPriorityMa = visibilityPriorityMap[visibility]) !== null && _visibilityPriorityMa !== void 0 ? _visibilityPriorityMa : priority,
dataHook: _constants.dataHooks.primaryAction,
size: size,
prefixIcon: prefixIcon,
suffixIcon: suffixIcon,
className: (0, _TableActionCellSt.st)(_TableActionCellSt.classes.action, {
size
}),
onClick: event => {
_onClick();
blurElementWithoutFocusVisible(event.target);
// Making sure we don't also trigger onRowClick
event.stopPropagation();
},
as: as
}, rest, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 5
}
}), text);
};
/* eslint-enable react/prop-types */
var renderVisibleActions = (actions, size) => actions.map((_ref2, index) => {
var {
text,
icon,
onClick: _onClick2,
dataHook,
disabled,
disabledDescription,
tooltipProps
} = _ref2;
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
key: index,
dataHook: dataHook || _constants.dataHooks.visibleActionTooltip,
disabled: disabled && disabledDescription === '',
content: disabled && Boolean(disabledDescription) ? disabledDescription : text
}, tooltipProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
dataHook: _constants.dataHooks.visibleAction,
skin: "inverted",
disabled: disabled,
className: (0, _TableActionCellSt.st)(_TableActionCellSt.classes.action, {
size
}),
onClick: event => {
_onClick2();
blurElementWithoutFocusVisible(event.target);
event.stopPropagation();
},
size: size,
ariaLabel: text,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 9
}
}, icon));
});
var renderHiddenActions = (actions, popoverMenuProps, size, moreActionsTooltipText) => /*#__PURE__*/_react.default.createElement(_PopoverMenu.default, (0, _extends2.default)({
dataHook: _constants.dataHooks.popoverMenu,
appendTo: "parent",
placement: "top",
textSize: "small",
triggerElement: _ref3 => {
var {
toggle,
isOpen,
ref
} = _ref3;
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
content: moreActionsTooltipText,
disabled: !moreActionsTooltipText,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 7
}
}, _ref4 => {
var {
onFocus: _onFocus,
onBlur
} = _ref4;
return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onBlur: onBlur,
skin: "inverted",
className: (0, _TableActionCellSt.st)(_TableActionCellSt.classes.action, {
size
}),
dataHook: _constants.dataHooks.triggerElement,
size: size,
onClick: toggle,
ref: ref,
ariaLabel: moreActionsTooltipText || undefined,
"aria-haspopup": "menu",
"aria-expanded": isOpen,
onFocus: event => {
_onFocus(event, {
blur: () => blurElementWithoutFocusVisible(event.target)
});
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.More, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 13
}
}));
});
}
}, popoverMenuProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 3
}
}), actions.map((_ref5, index) => {
var {
text,
icon,
onClick: _onClick3,
disabled,
dataHook,
divider,
skin,
subtitle
} = _ref5;
return !divider ? /*#__PURE__*/_react.default.createElement(_PopoverMenu.default.MenuItem, {
skin: skin !== null && skin !== void 0 ? skin : 'dark',
key: index,
dataHook: dataHook || _constants.dataHooks.popoverMenuItem,
prefixIcon: icon,
onClick: () => _onClick3(),
text: text,
disabled: disabled,
subtitle: subtitle,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 11
}
}) : /*#__PURE__*/_react.default.createElement(_PopoverMenu.default.Divider, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 11
}
});
}));
var renderPlaceholder = size => /*#__PURE__*/_react.default.createElement(_IconButton.default, {
dataHook: _constants.dataHooks.placeholder,
size: size,
skin: "inverted",
tabIndex: -1,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 3
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRight, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 5
}
}));
var TableActionCell = _ref6 => {
var _primaryAction$visibi;
var {
onClick = () => {},
dataHook,
primaryAction = null,
secondaryActions = [],
numOfVisibleSecondaryActions = 0,
alwaysShowSecondaryActions = false,
moreActionsTooltipText,
popoverMenuProps,
size = 'medium'
} = _ref6;
(0, _react.useEffect)(() => {
if (primaryAction != null && primaryAction.skin) {
(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.');
}
}, [primaryAction == null ? void 0 : primaryAction.skin]);
var visibleActions = secondaryActions.slice(0, numOfVisibleSecondaryActions);
var hiddenActions = secondaryActions.slice(numOfVisibleSecondaryActions);
return /*#__PURE__*/_react.default.createElement("span", {
"data-hook": dataHook,
className: _TableActionCellSt.classes.root,
"data-more-actions-tooltip-text": moreActionsTooltipText,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 5
}
}, primaryAction && /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
"data-hook": _constants.dataHooks.primaryActionWrapper,
display: (_primaryAction$visibi = primaryAction == null ? void 0 : primaryAction.visibility) !== null && _primaryAction$visibi !== void 0 ? _primaryAction$visibi : 'onHover',
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 9
}
}, renderPrimaryAction(primaryAction, size)), visibleActions.length > 0 && /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
"data-hook": _constants.dataHooks.visibleActionsWrapper,
display: alwaysShowSecondaryActions ? 'always' : 'onHover',
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 9
}
}, renderVisibleActions(visibleActions, size)), hiddenActions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
onClick: e => e.stopPropagation(),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
display: "always",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 11
}
}, renderHiddenActions(hiddenActions, popoverMenuProps, size, moreActionsTooltipText))), primaryAction && primaryAction.visibility !== 'always' && (!secondaryActions.length || secondaryActions.length === numOfVisibleSecondaryActions) && /*#__PURE__*/_react.default.createElement(_HoverSlot.default, {
display: "notOnHover",
className: _TableActionCellSt.classes.placeholderIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 11
}
}, renderPlaceholder(size)));
};
TableActionCell.displayName = 'TableActionCell';
TableActionCell.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/**
Controls the behaviour and appearance of a primary action:
- `text` specifies action label
- `skin` <b>deprecated</b> property that was previously used to control the visual appearance of a button. It has been replaced by the visibility property, which switches skin properties automatically based on visibility options.
- `onClick` defines a callback function which is called on button click
- `disabled` restrict user interactions
- `prefixIcon` add an icon in front of a button label
- `suffixIcon` add an icon after button label
- `as` renders button as another component or a DOM tag
- `visibility` specifies whether the primary action button is visible. When the value is set to "onHover", the button is only visible when the mouse hovers over it, and it appears as a primary button. When the value is set to "always", the button is always visible and appears as a secondary button.
*/
primaryAction: _propTypes.default.shape({
text: _propTypes.default.string.isRequired,
skin: _propTypes.default.oneOf(['standard', 'inverted']),
onClick: _propTypes.default.func.isRequired,
disabled: _propTypes.default.bool,
prefixIcon: _propTypes.default.element,
suffixIcon: _propTypes.default.element,
as: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.string]),
visibility: _propTypes.default.oneOf(['onHover', 'always'])
}),
/**
Controls the behaviour and appearance of secondary actions:
Action object containing
- `text` specifies action label to be shown in the tooltip or popover menu
- `icon` specifies icon of an action
- `onClick` defines a callback function which is called on button click
- `subtitle` a subtitle for the action
- `disabled` restrict user interactions
- `dataHook` applies a data-hook HTML attribute to be used in the tests
- `disabledDescription` indicates an explanatory text string to display in tooltip when action is visible and disabled
- `tooltipProps` controls the tooltip appearance
- `skin` controls the skin of the item
OR Divider object containing
- `divider` displays a divider between the action items in popover menu
*/
secondaryActions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
text: _propTypes.default.string.isRequired,
icon: _propTypes.default.node.isRequired,
onClick: _propTypes.default.func.isRequired,
subtitle: _propTypes.default.string,
disabled: _propTypes.default.bool,
dataHook: _propTypes.default.string,
disabledDescription: _propTypes.default.string,
tooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
skin: _propTypes.default.oneOf(['dark', 'destructive'])
}), _propTypes.default.shape({
divider: _propTypes.default.bool.isRequired
})])),
/** Specifies the number of secondary actions to display outside of the popover menu */
numOfVisibleSecondaryActions: _propTypes.default.number,
/** Specifies whether secondary actions should be visible all the time. By default secondary actions are visible on row hover only. */
alwaysShowSecondaryActions: _propTypes.default.bool,
/** Sets the tooltip text of more actions icon button */
moreActionsTooltipText: _propTypes.default.string,
/** Controls the appearance of secondary actions menu with all common popover menu props */
popoverMenuProps: _propTypes.default.shape({
/** The maximum width applied to the list */
maxWidth: _propTypes.default.number,
/** The minimum width applied to the list */
minWidth: _propTypes.default.number,
/** The maximum height value applied to the list */
maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Popover content z-index */
zIndex: _propTypes.default.number,
/** Moves popover content relative to the parent by x or y */
moveBy: _propTypes.default.shape({
x: _propTypes.default.number,
y: _propTypes.default.number
}),
/** The Popover's placement:
* * 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
*/
placement: _propTypes.default.oneOf(_Popover.placements),
/** Changing text size */
textSize: _propTypes.default.oneOf(['small', 'medium']),
/** Enables text ellipsis on tight containers */
ellipsis: _propTypes.default.bool,
/** The Popover's appendTo */
appendTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/**
* Whether to enable the flip behaviour. This behaviour is used to flip the `<Popover/>`'s placement
* when it starts to overlap the target element (`<Popover.Element/>`).
*/
flip: _propTypes.default.bool,
/**
* Whether to enable the fixed behaviour. This behaviour is used to keep the `<Popover/>` at it's
* original placement even when it's being positioned outside the boundary.
*/
fixed: _propTypes.default.bool,
/** Whether to show the Popover's arrow */
showArrow: _propTypes.default.bool
}),
/** Controls the size of action buttons */
size: _propTypes.default.oneOf(['tiny', 'small', 'medium'])
};
var _default = exports.default = TableActionCell;
//# sourceMappingURL=TableActionCell.js.map