@wix/design-system
Version:
@wix/design-system
240 lines (238 loc) • 9.63 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.listItemActionBuilder = exports.ListItemAction = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _useId = require("../utils/useId");
var _useFocusRing2 = require("../providers/useFocusRing/useFocusRing");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _ListItemActionSt = require("./ListItemAction.st.css.js");
var _PrefixIcon = require("./components/PrefixIcon/PrefixIcon");
var _Suffix = require("./components/Suffix/Suffix");
var _SuffixIcon = require("./components/SuffixIcon/SuffixIcon");
var _Title = require("./components/Title/Title");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _ListItemAction = require("./ListItemAction.constants");
var _excluded = ["as", "skin", "size", "highlighted", "dataHook", "disabled", "prefixIcon", "onClick", "onMouseEnter", "onMouseLeave", "tabIndex", "onKeyDown", "autoFocus", "className", "subtitle", "suffix", "suffixIcon", "disabledDescription"],
_excluded2 = ["selected", "hovered", "ellipsis", "title", "shouldFocusWithoutScroll"],
_excluded3 = ["title", "prefixIcon", "onClick", "onMouseEnter", "onMouseLeave", "id", "disabled", "skin", "size", "dataHook", "as", "tabIndex", "autoFocus", "className", "ellipsis", "subtitle", "suffix", "disabledDescription"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ListItemAction/ListItemAction.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 ListItemAction = exports.ListItemAction = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
var _props$as = props.as,
Component = _props$as === void 0 ? 'button' : _props$as,
_props$skin = props.skin,
skin = _props$skin === void 0 ? _ListItemAction.SKIN.standard : _props$skin,
_props$size = props.size,
size = _props$size === void 0 ? _ListItemAction.SIZE.medium : _props$size,
highlighted = props.highlighted,
dataHook = props.dataHook,
disabled = props.disabled,
prefixIcon = props.prefixIcon,
onClick = props.onClick,
onMouseEnter = props.onMouseEnter,
onMouseLeave = props.onMouseLeave,
tabIndex = props.tabIndex,
onKeyDown = props.onKeyDown,
autoFocus = props.autoFocus,
className = props.className,
subtitle = props.subtitle,
suffix = props.suffix,
suffixIcon = props.suffixIcon,
disabledDescription = props.disabledDescription,
others = (0, _objectWithoutProperties2.default)(props, _excluded);
// We're spreading the "rest" props as "others" so we don't want to pass them to the component
var selected = others.selected,
hovered = others.hovered,
ellipsis = others.ellipsis,
title = others.title,
shouldFocusWithoutScroll = others.shouldFocusWithoutScroll,
rest = (0, _objectWithoutProperties2.default)(others, _excluded2);
var _useFocusRing = (0, _useFocusRing2.useFocusRing)(),
isFocusVisible = _useFocusRing.isFocusVisible,
focusProps = _useFocusRing.focusProps;
var innerComponentRef = (0, _react.useRef)(null);
var isDisabledWithTooltip = disabled && !!disabledDescription;
var descriptionId = (0, _useId.useId)('list-item-action-description');
var focus = (0, _react.useCallback)(() => {
var _innerComponentRef$cu;
var scrollOptions = shouldFocusWithoutScroll ? {
preventScroll: true
} : {};
(_innerComponentRef$cu = innerComponentRef.current) == null || _innerComponentRef$cu.focus(scrollOptions);
}, [shouldFocusWithoutScroll]);
(0, _react.useImperativeHandle)(ref, () => ({
focus
}), [focus]);
(0, _react.useEffect)(() => {
if (skin === _ListItemAction.SKIN.dark) {
(0, _deprecationLog.default)('<ListItemAction/> - skin="dark" is deprecated and will be removed in next major version, please use skin="standard" instead');
}
}, [skin]);
function renderComponent() {
return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
"aria-disabled": disabled
}, rest, {
ref: innerComponentRef,
className: (0, _ListItemActionSt.st)(_ListItemActionSt.classes.root, {
skin,
disabled,
highlighted,
ellipsis,
size,
withPrefixIcon: !!prefixIcon,
withSuffixIcon: !!suffixIcon,
hoverHighlightDisabled: highlighted === false,
'focus-visible': isFocusVisible
}, className),
"data-skin": skin,
"data-disabled": disabled,
tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0,
autoFocus: autoFocus,
type: Component === 'button' ? 'button' : undefined,
"data-hook": dataHook,
onKeyDown: !disabled ? onKeyDown : undefined,
onClick: !disabled ? onClick : undefined,
onMouseEnter: !disabled ? onMouseEnter : undefined,
onMouseLeave: !disabled ? onMouseLeave : undefined
}, focusProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 7
}
}), prefixIcon && /*#__PURE__*/_react.default.createElement(_PrefixIcon.PrefixIcon, {
prefixIcon: prefixIcon,
size: size,
subtitle: subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 11
}
}), /*#__PURE__*/_react.default.createElement(_Title.Title, {
title: title,
size: size,
ellipsis: ellipsis,
tooltipModifiers: rest.tooltipModifiers,
subtitle: subtitle,
disabled: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 9
}
}), suffix && /*#__PURE__*/_react.default.createElement(_Suffix.Suffix, {
suffix: suffix,
size: size,
ellipsis: ellipsis,
disabled: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 11
}
}), suffixIcon && /*#__PURE__*/_react.default.createElement(_SuffixIcon.Icon, {
suffixIcon: suffixIcon,
size: size,
subtitle: subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 11
}
}), isDisabledWithTooltip && /*#__PURE__*/_react.default.createElement("span", {
id: descriptionId,
hidden: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 11
}
}, disabledDescription));
}
if (isDisabledWithTooltip) {
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
dataHook: _ListItemAction.DATA_HOOK.tooltip,
disabled: false,
content: disabledDescription,
enterDelay: 450,
"aria-describedby": descriptionId,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 7
}
}, renderComponent());
}
return renderComponent();
});
ListItemAction.displayName = 'ListItemAction';
var listItemActionBuilder = _ref => {
var title = _ref.title,
prefixIcon = _ref.prefixIcon,
onClick = _ref.onClick,
onMouseEnter = _ref.onMouseEnter,
onMouseLeave = _ref.onMouseLeave,
id = _ref.id,
disabled = _ref.disabled,
skin = _ref.skin,
size = _ref.size,
dataHook = _ref.dataHook,
as = _ref.as,
tabIndex = _ref.tabIndex,
autoFocus = _ref.autoFocus,
className = _ref.className,
ellipsis = _ref.ellipsis,
subtitle = _ref.subtitle,
suffix = _ref.suffix,
disabledDescription = _ref.disabledDescription,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
return {
id,
disabled,
overrideOptionStyle: true,
label: undefined,
prefix: prefixIcon,
value: _ref2 => {
var hovered = _ref2.hovered;
return /*#__PURE__*/_react.default.createElement(ListItemAction, (0, _extends2.default)({}, rest, {
ellipsis: ellipsis,
className: className,
autoFocus: autoFocus,
tabIndex: tabIndex,
as: as,
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
dataHook: dataHook,
title: title,
prefixIcon: prefixIcon,
skin: skin,
size: size,
highlighted: hovered,
disabled: disabled,
disabledDescription: disabledDescription,
subtitle: subtitle,
suffix: suffix,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 5
}
}));
}
};
};
exports.listItemActionBuilder = listItemActionBuilder;
//# sourceMappingURL=ListItemAction.js.map