@wix/design-system
Version:
@wix/design-system
108 lines • 7.47 kB
JavaScript
import React, { useEffect } from 'react';
import { ChevronRight, More } from '@wix/wix-ui-icons-common';
import PopoverMenu from '../PopoverMenu';
import Button from '../Button';
import IconButton from '../IconButton';
import Tooltip from '../Tooltip';
import { DATA_HOOKS } from './constants';
import HoverSlot from './HoverSlot';
import { st, classes } from './TableActionCell.st.css.js';
import deprecationLog from '../utils/deprecationLog';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
const blurElementWithoutFocusVisible = (element) => {
if (process.env.NODE_ENV !== 'test' && !element.matches(':focus-visible')) {
const activeElement = document.activeElement;
if (activeElement && typeof activeElement.blur === 'function') {
activeElement.blur();
}
}
};
const renderMainActionButton = ({ dataHook, text, skin, onClick, disabled, prefixIcon, suffixIcon, as, priority, visibility, disabledDescription, tooltipProps, ...rest }, size) => {
const visibilityPriorityMap = {
always: 'secondary',
onHover: 'primary',
};
const isDisabledWithTooltip = disabled && !!disabledDescription;
function renderButton() {
const buttonProps = {
key: text,
as,
dataHook: dataHook || DATA_HOOKS.primaryAction,
className: st(classes.action, { size }),
disabled,
skin,
priority: (visibility ? visibilityPriorityMap[visibility] : undefined) ??
priority,
size,
prefixIcon,
suffixIcon,
onClick: (event) => {
onClick();
blurElementWithoutFocusVisible(event.target);
event.stopPropagation();
},
...rest,
};
return React.createElement(Button, { ...buttonProps }, text);
}
if (isDisabledWithTooltip) {
return (React.createElement(Tooltip, { dataHook: DATA_HOOKS.primaryActionTooltip, disabled: false, content: disabledDescription, ...tooltipProps }, renderButton()));
}
return renderButton();
};
const renderVisibleActions = (actions, size) => actions.map(({ text, icon, onClick, dataHook, disabled, disabledDescription, tooltipProps, skin, }, index) => (React.createElement(Tooltip, { key: index, dataHook: dataHook || DATA_HOOKS.visibleActionTooltip, disabled: disabled && disabledDescription === '', content: disabled && Boolean(disabledDescription) ? disabledDescription : text, ...tooltipProps },
React.createElement(IconButton, { dataHook: DATA_HOOKS.visibleAction, priority: "secondary", disabled: disabled, className: st(classes.action, { size }), onClick: (event) => {
onClick(event);
blurElementWithoutFocusVisible(event.target);
event.stopPropagation();
}, size: size, ariaLabel: text, skin: skin }, icon))));
const renderHiddenActions = (actions, popoverMenuProps, size, moreActionsTooltipText, moreActionsProps, icons) => (React.createElement(PopoverMenu, { dataHook: DATA_HOOKS.popoverMenu, appendTo: "parent", placement: "top", textSize: "small", triggerElement: ({ toggle, isOpen, ref }) => (React.createElement(Tooltip, { content: moreActionsTooltipText, disabled: !moreActionsTooltipText }, ({ onFocus, onBlur }) => (React.createElement(IconButton, { onBlur: onBlur, priority: moreActionsProps?.priority || 'secondary', skin: moreActionsProps?.skin, className: st(classes.action, { size }), dataHook: DATA_HOOKS.triggerElement, size: size, onClick: toggle, ref: ref, ariaLabel: moreActionsTooltipText || undefined, "aria-haspopup": "menu", "aria-expanded": isOpen, onFocus: (event, { focus }) => {
onFocus(event, {
blur: () => blurElementWithoutFocusVisible(event.target),
focus,
});
} },
React.createElement(icons.More, null))))), ...popoverMenuProps }, actions.map((action, index) => !('divider' in action && action.divider) ? (React.createElement(PopoverMenu.MenuItem, { skin: (action.skin ?? 'dark'), key: index, dataHook: action.dataHook ||
DATA_HOOKS.popoverMenuItem, prefixIcon: action.icon, onClick: () => action.onClick(), text: action.text, disabled: action.disabled, disabledDescription: action.disabledDescription, subtitle: action.subtitle })) : (React.createElement(PopoverMenu.Divider, null)))));
const renderPlaceholder = (size, icons) => (React.createElement(IconButton, { dataHook: DATA_HOOKS.placeholder, size: size, priority: "secondary", tabIndex: -1 },
React.createElement(icons.ChevronRight, null)));
const TableActionCell = ({ onClick: _onClick = () => { }, dataHook, primaryAction, secondaryActions = [], numOfVisibleSecondaryActions = 0, alwaysShowSecondaryActions = false, alwaysShowPrimaryActions = false, moreActionsTooltipText, moreActionsProps, popoverMenuProps, size = 'medium', }) => {
const icons = useIcons('TableActionCell', {
ChevronRight,
More,
});
const primaryActionSkin = primaryAction && !Array.isArray(primaryAction)
? primaryAction.skin
: undefined;
useEffect(() => {
if (primaryActionSkin) {
deprecationLog('<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]);
const visibleActions = secondaryActions.slice(0, numOfVisibleSecondaryActions);
const hiddenActions = secondaryActions.slice(numOfVisibleSecondaryActions);
const isPrimaryActionArray = Array.isArray(primaryAction);
const primaryActionDisplay = isPrimaryActionArray
? alwaysShowPrimaryActions
? 'always'
: 'onHover'
: (primaryAction?.visibility ??
'onHover');
const shouldShowPlaceholder = isPrimaryActionArray
? !alwaysShowPrimaryActions
: primaryAction?.visibility !== 'always';
return (React.createElement("span", { "data-hook": dataHook, className: st(classes.root, { size }), "data-more-actions-tooltip-text": moreActionsTooltipText },
primaryAction && (React.createElement(HoverSlot, { "data-hook": DATA_HOOKS.primaryActionWrapper, display: primaryActionDisplay }, isPrimaryActionArray
? primaryAction.map(action => renderMainActionButton(action, size))
: renderMainActionButton(primaryAction, size))),
visibleActions.length > 0 && (React.createElement(HoverSlot, { "data-hook": DATA_HOOKS.visibleActionsWrapper, display: alwaysShowSecondaryActions ? 'always' : 'onHover' }, renderVisibleActions(visibleActions, size))),
hiddenActions.length > 0 && (React.createElement("div", { onClick: e => e.stopPropagation() },
React.createElement(HoverSlot, { display: "always" }, renderHiddenActions(hiddenActions, popoverMenuProps, size, moreActionsTooltipText, moreActionsProps, icons)))),
primaryAction &&
shouldShowPlaceholder &&
(!secondaryActions.length ||
secondaryActions.length === numOfVisibleSecondaryActions) && (React.createElement(HoverSlot, { display: "notOnHover", className: classes.placeholderIcon }, renderPlaceholder(size, icons)))));
};
TableActionCell.displayName = 'TableActionCell';
export default TableActionCell;
//# sourceMappingURL=TableActionCell.js.map