@wix/design-system
Version:
@wix/design-system
61 lines • 2.48 kB
JavaScript
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import Tooltip from '../Tooltip';
import { classes, st } from './ListItemSelectIcon.st.css.js';
const defaultTooltipProps = {
placement: 'right',
flip: true,
};
const ListItemSelectIcon = ({ highlighted = false, selected = false, disabled = false, dataHook = 'list-item-select-icon', icon, label, className, showTooltip, tooltipProps, onClick, }) => {
const tooltipRef = useRef(null);
useEffect(() => {
const tooltipActions = tooltipRef.current;
if (!tooltipActions || !showTooltip) {
return;
}
if (highlighted) {
tooltipActions.open();
}
else {
tooltipActions.close();
}
return () => {
tooltipActions.close();
};
}, [highlighted, showTooltip]);
let content = React.createElement("div", { className: classes.content }, icon);
if (showTooltip) {
const mergedTooltipProps = {
...defaultTooltipProps,
...tooltipProps,
disabled,
content: label,
className: classes.contentWrapper,
};
content = (React.createElement(Tooltip, { ref: tooltipRef, ...mergedTooltipProps }, content));
}
return (React.createElement("div", { className: st(classes.root, { highlighted, selected, disabled }, className), "aria-label": label, "data-hook": dataHook, "data-selected": selected, onClick: disabled ? undefined : onClick }, content));
};
ListItemSelectIcon.displayName = 'ListItemSelectIcon';
ListItemSelectIcon.propTypes = {
icon: PropTypes.any,
label: PropTypes.string.isRequired,
dataHook: PropTypes.string,
className: PropTypes.string,
selected: PropTypes.bool,
highlighted: PropTypes.bool,
disabled: PropTypes.bool,
showTooltip: PropTypes.bool,
tooltipProps: PropTypes.any,
onClick: PropTypes.func,
};
export default ListItemSelectIcon;
export const listItemSelectIconBuilder = ({ id, className, icon, label, disabled, dataHook, showTooltip, tooltipProps, }) => ({
id,
icon,
disabled,
overrideOptionStyle: true,
label,
value: ({ hovered, ...rest }) => (React.createElement(ListItemSelectIcon, { icon: icon, label: label, highlighted: hovered, dataHook: dataHook, className: className, showTooltip: showTooltip, tooltipProps: tooltipProps, ...rest })),
});
//# sourceMappingURL=ListItemSelectIcon.js.map