@wix/design-system
Version:
@wix/design-system
253 lines (251 loc) • 9.22 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 _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _context = require("../WixDesignSystemProvider/context");
var _useFocusRing = 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", "tabIndex", "onKeyDown", "autoFocus", "className", "subtitle", "suffix", "suffixIcon", "disabledDescription"],
_excluded2 = ["selected", "hovered", "ellipsis", "title", "shouldFocusWithoutScroll"],
_excluded3 = ["title", "prefixIcon", "onClick", "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 {
as: Component = 'button',
skin = _ListItemAction.SKIN.standard,
size = _ListItemAction.SIZE.medium,
highlighted,
dataHook,
disabled,
prefixIcon,
onClick,
tabIndex,
onKeyDown,
autoFocus,
className,
subtitle,
suffix,
suffixIcon,
disabledDescription
} = props,
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 {
// @ts-expect-error type does not exist but we don't want to pass this
selected,
// @ts-expect-error type does not exist but we don't want to pass this
hovered,
ellipsis,
title,
shouldFocusWithoutScroll
} = others,
rest = (0, _objectWithoutProperties2.default)(others, _excluded2);
var {
isFocusVisible,
focusProps
} = (0, _useFocusRing.useFocusRing)();
var {
newColorsBranding
} = (0, _react.useContext)(_context.WixDesignSystemContext);
var innerComponentRef = (0, _react.useRef)(null);
var isDisabledWithTooltip = disabled && !!disabledDescription;
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,
"aria-description": isDisabledWithTooltip ? disabledDescription : undefined
}, rest, {
ref: innerComponentRef,
className: (0, _ListItemActionSt.st)(_ListItemActionSt.classes.root, {
skin,
disabled,
highlighted,
ellipsis,
newColorsBranding,
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
}, focusProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 7
}
}), prefixIcon && /*#__PURE__*/_react.default.createElement(_PrefixIcon.PrefixIcon, {
prefixIcon: prefixIcon,
size: size,
subtitle: subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 121,
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: 123,
columnNumber: 9
}
}), suffix && /*#__PURE__*/_react.default.createElement(_Suffix.Suffix, {
suffix: suffix,
size: size,
ellipsis: ellipsis,
disabled: disabled,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 11
}
}), suffixIcon && /*#__PURE__*/_react.default.createElement(_SuffixIcon.Icon, {
suffixIcon: suffixIcon,
size: size,
subtitle: subtitle,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 11
}
}));
}
if (isDisabledWithTooltip) {
return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
dataHook: _ListItemAction.DATA_HOOK.tooltip,
disabled: false,
content: disabledDescription,
enterDelay: 450,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 7
}
}, renderComponent());
}
return renderComponent();
});
ListItemAction.displayName = 'ListItemAction';
ListItemAction.propTypes = {
dataHook: _propTypes.default.string,
title: _propTypes.default.string,
skin: _propTypes.default.any,
size: _propTypes.default.any,
prefixIcon: _propTypes.default.any,
suffixIcon: _propTypes.default.any,
suffix: _propTypes.default.any,
autoFocus: _propTypes.default.bool,
ellipsis: _propTypes.default.bool,
disabled: _propTypes.default.bool,
disabledDescription: _propTypes.default.string,
tooltipModifiers: _propTypes.default.any,
highlighted: _propTypes.default.bool,
subtitle: _propTypes.default.string,
shouldFocusWithoutScroll: _propTypes.default.bool,
onClick: _propTypes.default.func
};
var listItemActionBuilder = _ref => {
var {
title,
prefixIcon,
onClick,
id,
disabled,
skin,
size,
dataHook,
as,
tabIndex,
autoFocus,
className,
ellipsis,
subtitle,
suffix,
disabledDescription
} = _ref,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
return {
id,
disabled,
overrideOptionStyle: true,
label: undefined,
prefix: prefixIcon,
value: _ref2 => {
var {
hovered
} = _ref2;
return /*#__PURE__*/_react.default.createElement(ListItemAction, (0, _extends2.default)({}, rest, {
ellipsis: ellipsis,
className: className,
autoFocus: autoFocus,
tabIndex: tabIndex,
as: as,
onClick: onClick,
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: 207,
columnNumber: 5
}
}));
}
};
};
exports.listItemActionBuilder = listItemActionBuilder;
//# sourceMappingURL=ListItemAction.js.map