wix-style-react
Version:
wix-style-react
92 lines • 4.51 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './ListItemSection.st.css';
import Divider from '../Divider';
import Text, { WEIGHTS } from '../Text';
import TextButton from '../TextButton';
import { dataHooks } from './constants';
import { isString } from '../utils/StringUtils';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
export const TYPES = {
WHITESPACE: 'whitespace',
DIVIDER: 'divider',
TITLE: 'title',
SUBHEADER: 'subheader',
};
/** ListItemSection description */
class ListItemSection extends React.PureComponent {
constructor() {
super(...arguments);
this.state = {};
this._renderDivisionElements = children => {
const { dataHook, type } = this.props;
return (React.createElement("div", { className: st(classes.root, { [type]: true }), "data-hook": dataHook, onClick: e => e.stopPropagation(), children: children }));
};
this._renderSuffix = () => {
const { suffix, onClick, ellipsis } = this.props;
return isString(suffix) ? (React.createElement("div", { className: classes.suffixWrapper },
React.createElement(TextButton, { ellipsis: ellipsis, dataHook: dataHooks.SUFFIX, size: "tiny", onClick: onClick, className: classes.suffix }, suffix))) : (React.createElement("div", { "data-hook": dataHooks.SUFFIX, className: classes.suffixWrapper, onClick: onClick }, suffix));
};
this._renderTitle = () => {
const { dataHook, className, type, title, suffix, ellipsis } = this.props;
const isSubheader = type === TYPES.SUBHEADER;
const getTextWeight = newColorsBranding => {
if (!newColorsBranding) {
return WEIGHTS.thin;
}
return isSubheader ? WEIGHTS.normal : WEIGHTS.bold;
};
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root, {
subheader: isSubheader,
ellipsis,
suffix: !!suffix,
newColorsBranding,
}, 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: getTextWeight(newColorsBranding) }, title)),
suffix && this._renderSuffix()))));
};
}
render() {
const { type } = this.props;
if (type === TYPES.WHITESPACE)
return this._renderDivisionElements();
if (type === TYPES.DIVIDER)
return this._renderDivisionElements(React.createElement(Divider, null));
return this._renderTitle();
}
}
ListItemSection.displayName = 'ListItemSection';
ListItemSection.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/** A list item section can be
* * `title` - Acts as a title for following list items.
* * `subheader` - Acts as separator between list items for differentiation.
* * `whitespace` - Adds some padding between list items.
* * `divider` - Same as whitespace, but with a line.
*/
type: PropTypes.oneOf(Object.values(TYPES)),
/** Text of the list item */
title: PropTypes.node,
/** Suffix node. Renders TextButton for a string otherwise the node itself.*/
suffix: PropTypes.node,
/** If true, long text won't break into more than one line and will be terminated with an ellipsis */
ellipsis: PropTypes.bool,
/** A callback function called when suffix is clicked */
onClick: PropTypes.func,
};
ListItemSection.defaultProps = {
type: TYPES.TITLE,
ellipsis: false,
};
export default ListItemSection;
export const listItemSectionBuilder = ({ id, className, dataHook, type, title, suffix, ellipsis, }) => ({
id,
overrideOptionStyle: true,
disabled: true,
value: props => (React.createElement(ListItemSection, { className: className, dataHook: dataHook, type: type, title: title, suffix: suffix, ellipsis: ellipsis, ...props })),
});
//# sourceMappingURL=ListItemSection.js.map