@wix/design-system
Version:
@wix/design-system
65 lines • 3.35 kB
JavaScript
import React, { useCallback } from 'react';
import Checkbox from '../../Checkbox';
import ToggleSwitch from '../../ToggleSwitch';
import Radio from '../../Radio';
import Text from '../../Text';
import Collapse from '../../Collapse';
import Divider from '../../Divider';
import { dataHooks, TYPES } from '../constants';
import { isString } from '../../utils/StringUtils';
import { useHover } from '../../common/useHover';
import { st, classes } from './Item.st.css.js';
const renderTitle = title => {
if (isString(title)) {
return (React.createElement(Text, { weight: "normal", size: "medium" }, title));
}
return title;
};
const renderSubtitle = subtitle => isString(subtitle) ? (React.createElement(Text, { ellipsis: true, size: "small", weight: "thin" }, subtitle)) : (subtitle);
const renderContent = content => isString(content) ? (React.createElement(Text, { className: classes.text, size: "small", weight: "thin" }, content)) : (content);
const renderSelector = ({ type, open, disabled, onChange }) => {
let selector = null;
switch (type) {
case TYPES.CHECKBOX:
selector = (React.createElement(Checkbox, { checked: open, onChange: onChange, disabled: disabled }));
break;
case TYPES.RADIO:
selector = (React.createElement(Radio, { checked: open, onChange: onChange, disabled: disabled }));
break;
case TYPES.TOGGLE:
selector = (React.createElement(ToggleSwitch, { checked: open, onChange: onChange, size: "small", disabled: disabled }));
break;
default:
break;
}
return (React.createElement("span", { className: classes.selectorToggle, onClick: e => e.stopPropagation() }, selector));
};
const SelectableAccordionItem = ({ type = 'toggle', onChange = () => { }, idx, open, disabled, verticalPadding, title, subtitle, content, }) => {
const { hovered, hoverProps } = useHover();
const handleChange = useCallback(event => {
if (disabled) {
return;
}
if (type === 'radio' && open) {
return;
}
onChange(event, idx, !open);
}, [disabled, type, open, onChange, idx]);
return (React.createElement("div", { ...hoverProps, "data-hook": dataHooks.item, "data-state": open ? 'open' : 'collapsed', "data-disabled": disabled, className: st(classes.item, {
hovered: !open && hovered,
verticalPadding,
disabled,
}) },
React.createElement("div", { onClick: handleChange, className: classes.selector }, renderSelector({ type, open, disabled, onChange: handleChange })),
React.createElement("div", { "data-hook": dataHooks.itemHeader, onClick: handleChange, className: classes.header },
renderTitle(title),
renderSubtitle(subtitle)),
React.createElement("div", { className: classes.content },
content ? (React.createElement(Collapse, { open: open },
React.createElement("div", { className: classes.inner }, renderContent(content)))) : null,
React.createElement("div", { className: classes.divider },
React.createElement(Divider, null)))));
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';
export default SelectableAccordionItem;
//# sourceMappingURL=Item.js.map