wix-style-react
Version:
wix-style-react
103 lines • 5.11 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { st, classes } from './ListItemSelect.st.css';
import Checkbox from '../Checkbox';
import Box from '../Box';
import HighlightContext from '../InputWithOptions/HighlightContext';
import { dataHooks } from './constants';
import Highlighter from '../Highlighter/Highlighter';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
export const SIZES = {
small: 'small',
medium: 'medium',
};
/** ListItemSelect description */
class ListItemSelect extends React.PureComponent {
render() {
const { dataHook, className, checkbox, selected, highlighted, disabled, onClick, size, } = this.props;
return (React.createElement("div", { className: st(classes.root, { checkbox, selected, highlighted, disabled, size }, className), "data-hook": dataHook, "data-selected": selected, onClick: disabled ? undefined : onClick }, checkbox ? (React.createElement(Checkbox, { dataHook: dataHooks.CHECKBOX, className: classes.fullWidthContent, size: size, checked: selected, disabled: disabled }, this._renderContent())) : (this._renderContent())));
}
_renderTitle(textProps) {
const { title } = this.props;
const titleElement = (React.createElement(Text, { className: classes.title, dataHook: dataHooks.TITLE, ...textProps }, title));
return (React.createElement(HighlightContext.Consumer, null, ({ highlight, match }) => highlight ? (React.createElement(Highlighter, { match: match }, titleElement)) : (titleElement)));
}
_renderContent() {
const { checkbox, prefix, subtitle, suffix, selected, disabled, size, ellipsis, tooltipProps, } = this.props;
const textProps = {
tagName: 'div',
size,
ellipsis,
tooltipProps,
showDelay: 300,
skin: disabled ? 'disabled' : 'standard',
weight: 'thin',
light: selected && !checkbox,
};
const secondaryTextProps = {
...textProps,
light: !disabled,
secondary: !selected || checkbox,
};
return (React.createElement(Box, { width: "100%", className: classes.textsWrapper },
prefix && (React.createElement(Text, { className: st(classes.prefix, {
subtitle: Boolean(subtitle),
}), dataHook: dataHooks.PREFIX, ...textProps, ellipsis: false }, prefix)),
React.createElement("div", { className: st(classes.titleWrapper, { subtitle: Boolean(subtitle) }) },
this._renderTitle(textProps),
subtitle && (React.createElement(Text, { className: classes.subtitle, dataHook: dataHooks.SUBTITLE, secondary: true, ...secondaryTextProps, size: SIZES.small }, subtitle))),
suffix && (React.createElement(Text, { dataHook: dataHooks.SUFFIX, className: classes.suffix, ...secondaryTextProps }, suffix))));
}
}
ListItemSelect.displayName = 'ListItemSelect';
ListItemSelect.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,
/** If true, a checkbox will be shown */
checkbox: PropTypes.bool,
/** Any prefix */
prefix: PropTypes.node,
/** Title of the list item */
title: PropTypes.node,
/** Text of the list item subtitle */
subtitle: PropTypes.node,
/** Any suffix */
suffix: PropTypes.node,
/** If true, the item is selected */
selected: PropTypes.bool,
/** If true, the item is highlighted */
highlighted: PropTypes.bool,
/** If true, the item is disabled */
disabled: PropTypes.bool,
/** Allows to pass all common tooltip props.
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
tooltipProps: PropTypes.shape(TooltipCommonProps),
/** Callback function triggered when list item is clicked */
onClick: PropTypes.func,
/** Changing text size */
size: PropTypes.oneOf(Object.keys(SIZES)),
/** If true, long text won't break into more than one line and will be terminated with an ellipsis */
ellipsis: PropTypes.bool,
};
ListItemSelect.defaultProps = {
checkbox: false,
selected: false,
highlighted: false,
ellipsis: false,
size: SIZES.medium,
dataHook: 'list-item-select',
};
export default ListItemSelect;
export const listItemSelectBuilder = ({ id, className, checkbox, prefix, title, label, subtitle, suffix, disabled, size, ellipsis, dataHook, tooltipProps, }) => ({
id,
disabled,
overrideOptionStyle: true,
label,
value: ({ selected, hovered, ...rest }) => (React.createElement(ListItemSelect, { dataHook: dataHook, className: className, checkbox: checkbox, prefix: prefix, title: title, subtitle: subtitle, suffix: suffix, size: size, ellipsis: ellipsis, selected: selected, highlighted: hovered, tooltipProps: tooltipProps, ...rest })),
});
//# sourceMappingURL=ListItemSelect.js.map