@wix/design-system
Version:
@wix/design-system
61 lines • 4.14 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
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 { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import Tooltip from '../Tooltip';
const Selector = ({ 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, }) => {
const onClick = () => !isDisabled && onToggle(id);
return (React.createElement(WixDesignSystemContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("li", { "data-hook": dataHook, className: st(classes.root, { size, newColorsBranding, showDivider }, className), onClick: onClick, "data-shape": imageShape, "data-size": imageSize },
React.createElement("div", { className: st(classes.mainPart, { disabled: isDisabled }) },
React.createElement(ConditionalTooltip, { toggleTooltipProps: !!isDisabled ? toggleTooltipProps : undefined }, toggleType === 'checkbox' ? (React.createElement(Checkbox, { dataHook: "toggle", checked: isSelected, disabled: isDisabled, indeterminate: indeterminate })) : (React.createElement(Radio, { 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.propTypes = {
dataHook: PropTypes.string,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
image: PropTypes.node,
size: PropTypes.oneOf(['small', 'medium']),
imageSize: PropTypes.oneOf(['tiny', 'small', 'portrait', 'large', 'cinema']),
imageShape: PropTypes.oneOf(['rectangular', 'circle']),
showDivider: PropTypes.bool,
title: PropTypes.node.isRequired,
isSelected: PropTypes.bool,
isDisabled: PropTypes.bool,
indeterminate: PropTypes.bool,
subtitle: PropTypes.string,
extraNode: PropTypes.node,
onToggle: PropTypes.func,
toggleType: PropTypes.oneOf(['checkbox', 'radio']),
showBelowNodeOnSelect: PropTypes.bool,
belowNode: PropTypes.node,
toggleTooltipProps: PropTypes.shape({
content: PropTypes.string.isRequired,
transitionSettings: PropTypes.shape({
openDelay: PropTypes.number,
closeDelay: PropTypes.number,
}),
}),
subtitleNode: PropTypes.node,
className: PropTypes.string,
};
Selector.ExtraText = ExtraText;
Selector.ProgressBar = ProgressBar;
export default Selector;
//# sourceMappingURL=Selector.js.map