@wix/design-system
Version:
@wix/design-system
58 lines • 3.98 kB
JavaScript
import React, { useEffect, useRef } from 'react';
import Checkbox from '../Checkbox';
import Radio from '../Radio';
import Text from '../Text';
import { st, classes } from './Selector.st.css.js';
import ExtraText from './ExtraText';
import ProgressBar from './ProgressBar';
import Tooltip from '../Tooltip';
const Selector = React.forwardRef(({ dataHook, size = 'medium', imageSize = 'large', imageShape = 'rectangular', image, toggleType = 'radio', showDivider = false, title, subtitle, extraNode, isSelected = false, isDisabled = false, toggleTooltipProps, indeterminate, showBelowNodeOnSelect, subtitleNode, belowNode, className, id, onToggle = i => i, isActive = false, }, forwardedRef) => {
const rootRef = useRef(null);
const toggleRef = useRef(null);
useEffect(() => {
if (typeof forwardedRef === 'function') {
forwardedRef(rootRef.current);
}
else if (forwardedRef) {
forwardedRef.current =
rootRef.current;
}
});
// Make the toggle input non-focusable (aria-activedescendant pattern)
useEffect(() => {
const toggle = toggleRef.current;
if (!toggle)
return;
const wrappedRef = toggle.wrappedComponentRef;
if (wrappedRef instanceof HTMLInputElement) {
wrappedRef.tabIndex = -1;
return;
}
const checkboxInput = wrappedRef?.inputRef?.current;
if (checkboxInput) {
checkboxInput.tabIndex = -1;
}
});
const onClick = () => !isDisabled && onToggle(id);
return (React.createElement("li", { ref: rootRef, id: String(id), "data-hook": dataHook, className: st(classes.root, { size, showDivider, isActive }, className), onClick: onClick, role: "option", "aria-selected": isSelected, "data-disabled": isDisabled || undefined, "data-shape": imageShape, "data-size": imageSize, tabIndex: -1 },
React.createElement("div", { className: st(classes.mainPart, { disabled: isDisabled }) },
React.createElement(ConditionalTooltip, { toggleTooltipProps: !!isDisabled ? toggleTooltipProps : undefined }, toggleType === 'checkbox' ? (React.createElement(Checkbox, { ref: toggleRef, dataHook: "toggle", checked: isSelected, disabled: isDisabled, indeterminate: indeterminate })) : (React.createElement(Radio, { ref: toggleRef, dataHook: "toggle", checked: isSelected, disabled: isDisabled }))),
image && (React.createElement("div", { "data-hook": "selector-image", className: st(classes.image, {
imageSize,
imageShape,
}), children: image })),
React.createElement("div", { className: classes.titles },
React.createElement(Text, { dataHook: "selector-title", size: size, ellipsis: true, children: title }),
subtitle && (React.createElement(Text, { size: size === 'medium' ? 'small' : 'tiny', secondary: true, dataHook: "selector-subtitle", ellipsis: true, children: subtitle })),
subtitleNode && (React.createElement("div", { "data-hook": "subtitle-node" }, subtitleNode))),
extraNode && (React.createElement("div", { className: classes.extra, "data-hook": "selector-extra-node", children: extraNode }))),
showBelowNodeOnSelect && belowNode && isSelected && (React.createElement("div", { "data-hook": "below-section", className: classes.belowSection }, belowNode))));
});
const ConditionalTooltip = ({ toggleTooltipProps, children, }) => {
return toggleTooltipProps ? (React.createElement(Tooltip, { content: toggleTooltipProps?.content, disabled: false, dataHook: "toggle-tooltip", enterDelay: toggleTooltipProps.transitionSettings?.openDelay, exitDelay: toggleTooltipProps.transitionSettings?.closeDelay }, children)) : (children);
};
Selector.displayName = 'Selector';
Selector.ExtraText = ExtraText;
Selector.ProgressBar = ProgressBar;
export default Selector;
//# sourceMappingURL=Selector.js.map