@wix/design-system
Version:
@wix/design-system
45 lines • 2.55 kB
JavaScript
import PropTypes from 'prop-types';
import React from 'react';
import Divider from '../Divider';
import Text, { WEIGHTS } from '../Text';
import TextButton from '../TextButton';
import { isString } from '../utils/StringUtils';
import { dataHooks, TYPES } from './ListItemSection.constants';
import { classes, st } from './ListItemSection.st.css.js';
const ListItemSection = ({ type = TYPES.TITLE, ellipsis = false, dataHook, className, title, suffix, onClick, }) => {
const isSeparatorElement = type === TYPES.WHITESPACE || type === TYPES.DIVIDER;
const isSubheader = type === TYPES.SUBHEADER;
if (isSeparatorElement) {
return (React.createElement("div", { className: st(classes.root, { [type]: true }), "data-hook": dataHook, onClick: e => e.stopPropagation() }, type === TYPES.DIVIDER && React.createElement(Divider, null)));
}
return (React.createElement("div", { className: st(classes.root, {
subheader: isSubheader,
ellipsis,
suffix: !!suffix,
}, className), "data-hook": dataHook },
React.createElement("div", { className: classes.titleWrapper },
React.createElement(Text, { dataHook: dataHooks.TITLE, tagName: "div", size: "small", className: classes.title, ellipsis: ellipsis, enterDelay: 300, weight: isSubheader ? WEIGHTS.normal : WEIGHTS.bold }, title)),
suffix && isString(suffix) && (React.createElement("div", { className: classes.suffixWrapper },
React.createElement(TextButton, { ellipsis: ellipsis, dataHook: dataHooks.SUFFIX, size: "tiny", onClick: onClick, className: classes.suffix }, suffix))),
suffix && !isString(suffix) && (React.createElement("div", { "data-hook": dataHooks.SUFFIX, className: classes.suffixWrapper, onClick: onClick }, suffix))));
};
ListItemSection.displayName = 'ListItemSection';
ListItemSection.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
type: PropTypes.any,
title: PropTypes.any,
suffix: PropTypes.any,
ellipsis: PropTypes.bool,
onClick: PropTypes.func,
};
export default ListItemSection;
export const listItemSectionBuilder = ({ id, className, dataHook, type, title, suffix, ellipsis, }) => ({
id,
overrideOptionStyle: true,
disabled: true,
prefix: undefined,
label: undefined,
value: (props) => (React.createElement(ListItemSection, { className: className, dataHook: dataHook, type: type, title: title, suffix: suffix, ellipsis: ellipsis, ...props })),
});
//# sourceMappingURL=ListItemSection.js.map