wix-style-react
Version:
wix-style-react
94 lines • 3.93 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './CheckToggle.st.css';
import { dataHooks, SIZE, SKIN } from './constants';
import Tooltip from '../Tooltip';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { withFocusable } from '../common/Focusable';
import { ConfirmSmall, Confirm } from '@wix/wix-ui-icons-common';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
const icon = {
small: React.createElement(ConfirmSmall, null),
medium: React.createElement(Confirm, null),
};
/** 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 = () => {
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 }, icon[size])));
};
/**
* Renders a tooltip wrapper
* @returns React.ReactNode
* @private
*/
this._renderTooltip = () => {
const { tooltipContent, tooltipProps } = this.props;
return (React.createElement(Tooltip, { dataHook: dataHooks.tooltip, content: tooltipContent, ...tooltipProps }, this._renderInput()));
};
}
render() {
const { checked } = this._isControlled() ? this.props : this.state;
const { dataHook, size, skin, disabled, tooltipContent, focusableOnFocus, focusableOnBlur, className, } = this.props;
return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("label", { className: st(classes.root, { checked, size, skin, disabled, newColorsBranding }, className), "data-hook": dataHook, onFocus: focusableOnFocus, onBlur: focusableOnBlur }, tooltipContent ? this._renderTooltip() : this._renderInput()))));
}
}
CheckToggle.displayName = 'CheckToggle';
CheckToggle.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
checked: PropTypes.bool,
onChange: PropTypes.func,
disabled: PropTypes.bool,
size: PropTypes.oneOf(Object.values(SIZE)),
skin: PropTypes.oneOf(Object.values(SKIN)),
tooltipContent: PropTypes.node,
tooltipProps: PropTypes.shape(TooltipCommonProps),
focusableOnFocus: PropTypes.func,
focusableOnBlur: PropTypes.func,
};
CheckToggle.defaultProps = {
disabled: false,
size: 'small',
skin: 'standard',
};
// @ts-ignore
export default withFocusable(CheckToggle);
//# sourceMappingURL=CheckToggle.js.map