wix-style-react/dist/es/src/Selector/Selector.js

wix-style-react

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';
import ExtraText from './ExtraText';
import ProgressBar from './ProgressBar';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import Divider from '../Divider';
class Selector extends React.PureComponent {
    constructor() {
        super(...arguments);
        this._onClick = () => !this.props.isDisabled && this.props.onToggle(this.props.id);
    }
    render() {
        const { dataHook, size, imageSize, imageShape, image, hasDivider, title, subtitle, extraNode, isSelected, isDisabled, indeterminate, toggleType, showBelowNodeOnSelect, subtitleNode, belowNode, className, } = this.props;
        return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("li", { "data-hook": dataHook, className: st(classes.root, { size, newColorsBranding, hasDivider }, className), onClick: this._onClick, "data-shape": imageShape, "data-size": imageSize },
            React.createElement("div", { className: st(classes.mainPart, { disabled: isDisabled }) },
                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))))));
    }
}
Selector.propTypes = {
    /** Applied as data-hook HTML attribute that can be used in the tests */
    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']),
    hasDivider: 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,
    subtitleNode: PropTypes.node,
    className: PropTypes.string,
};
Selector.defaultProps = {
    isSelected: false,
    isDisabled: false,
    toggleType: 'radio',
    size: 'medium',
    imageSize: 'large',
    imageShape: 'rectangular',
    hasDivider: false,
    onToggle: i => i,
    showBelowNodeOnSelect: false,
};
Selector.ExtraText = ExtraText;
Selector.ProgressBar = ProgressBar;
export default Selector;
//# sourceMappingURL=Selector.js.map