@wix/design-system/dist/esm/CheckToggle/CheckToggle.js

@wix/design-system

import React, { PureComponent } from 'react';
import { st, classes } from './CheckToggle.st.css.js';
import { dataHooks } from './constants';
import Tooltip from '../Tooltip';
import { withFocusable } from '../common/Focusable';
import { ConfirmSmall, Confirm } from '@wix/wix-ui-icons-common';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
/** CheckToggle */
export class CheckToggle extends PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            checked: !!this.props.checked,
        };
        /**
         * Checks if the component is controlled or uncontrolled.
         * The component is controlled only if prop checked is provided.
         *
         * @returns boolean
         * @private
         */
        this._isControlled = () => {
            return this.props.hasOwnProperty('checked');
        };
        /**
         * Toggles checked state and triggers the onChange callback.
         * Except when disabled
         */
        this._handleChange = (changeEvent) => {
            const { checked } = this.state;
            const { onChange } = this.props;
            this.setState({ checked: !checked }, () => {
                if (onChange)
                    onChange(changeEvent);
            });
        };
        /**
         * Renders the toggle itself
         * @returns React.ReactNode
         * @private
         */
        this._renderInput = (iconMap) => {
            const { checked } = this._isControlled() ? this.props : this.state;
            const { size, disabled, onChange } = this.props;
            if (!size)
                return null;
            return (React.createElement(React.Fragment, null,
                React.createElement("input", { type: "checkbox", className: classes.input, "data-hook": dataHooks.toggle, checked: checked, disabled: disabled, onChange: this._isControlled() ? onChange : this._handleChange }),
                React.createElement("span", { className: classes.toggle }, iconMap[size])));
        };
        /**
         * Renders a tooltip wrapper
         * @returns React.ReactNode
         * @private
         */
        this._renderTooltip = (iconMap) => {
            const { tooltipContent, tooltipProps } = this.props;
            return (React.createElement(Tooltip, { dataHook: dataHooks.tooltip, content: tooltipContent, ...tooltipProps }, this._renderInput(iconMap)));
        };
    }
    render() {
        const { checked } = this._isControlled() ? this.props : this.state;
        const { dataHook, size, skin, disabled, tooltipContent, focusableOnFocus, focusableOnBlur, className, } = this.props;
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
            const ConfirmIcon = icons.CheckToggle?.Confirm || Confirm;
            const ConfirmSmallIcon = icons.CheckToggle?.ConfirmSmall || ConfirmSmall;
            const iconMap = {
                small: React.createElement(ConfirmSmallIcon, null),
                medium: React.createElement(ConfirmIcon, null),
            };
            return (React.createElement("label", { className: st(classes.root, { checked, size, skin, disabled }, className), "data-hook": dataHook, onFocus: focusableOnFocus, onBlur: focusableOnBlur }, tooltipContent
                ? this._renderTooltip(iconMap)
                : this._renderInput(iconMap)));
        }));
    }
}
CheckToggle.displayName = 'CheckToggle';
CheckToggle.defaultProps = {
    disabled: false,
    size: 'small',
    skin: 'standard',
};
export default withFocusable(CheckToggle);
//# sourceMappingURL=CheckToggle.js.map