@helpscout/hsds-react/components/Switch/Switch.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Context = _interopRequireDefault(require("../FormLabel/Context"));

var _VisuallyHidden = _interopRequireDefault(require("../VisuallyHidden"));

var _classnames = _interopRequireDefault(require("classnames"));

var _id = require("../../utilities/id");

var _Switch = require("./Switch.css");

var _jsxRuntime = require("react/jsx-runtime");

function noop() {}

var uniqueID = (0, _id.createUniqueIDFactory)('Switch');

var Switch = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inheritsLoose2.default)(Switch, _React$PureComponent);

  function Switch(_props) {
    var _this;

    _this = _React$PureComponent.call(this, _props) || this;

    _this.handleOnChange = function (event) {
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          value = _this$props.value;
      var nextChecked = !_this.state.checked;

      if (_this.shouldAutoUpdateChecked) {
        _this.setState({
          checked: nextChecked
        });
      }

      onChange(nextChecked, {
        event: event,
        value: value
      });
    };

    _this.handleOnClick = function (event) {
      event.stopPropagation();

      if (_this.props.isLoading) {
        event.preventDefault();
      } else {
        _this.props.onClick(event);
      }
    };

    _this.handleOnBlur = function (event) {
      _this.setState({
        isFocused: false
      });

      _this.props.onBlur(event);
    };

    _this.handleOnFocus = function (event) {
      _this.setState({
        isFocused: true
      });

      _this.props.onFocus(event);
    };

    _this.handleOnMouseDown = function (event) {
      _this.setState({
        isActive: true
      });

      _this.props.onMouseDown(event);
    };

    _this.handleOnMouseUp = function (event) {
      _this.setState({
        isActive: false
      });

      _this.props.onMouseUp(event);
    };

    _this.setRef = function (node) {
      _this.props.inputRef(node);

      _this.props.innerRef(node);
    };

    _this.getIdFromContextProps = function (props) {
      if (props === void 0) {
        props = {
          id: ''
        };
      }

      return props.id || _this.state.id;
    };

    _this.getInputMarkup = function (props) {
      if (props === void 0) {
        props = {
          id: ''
        };
      }

      var _this$props2 = _this.props,
          propActive = _this$props2.checked,
          disabled = _this$props2.disabled,
          inputRef = _this$props2.inputRef,
          innerRef = _this$props2.innerRef,
          name = _this$props2.name,
          value = _this$props2.value,
          rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["checked", "disabled", "inputRef", "innerRef", "name", "value"]);
      var checked = _this.state.checked;

      var id = _this.getIdFromContextProps(props);

      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.InputUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
        "aria-checked": checked,
        className: "c-Switch__input",
        checked: checked,
        disabled: disabled,
        id: id,
        name: name,
        onBlur: _this.handleOnBlur,
        onChange: _this.handleOnChange,
        onFocus: _this.handleOnFocus,
        onClick: _this.handleOnClick,
        ref: _this.setRef,
        role: "switch",
        type: "checkbox",
        value: value
      }));
    };

    _this.state = {
      checked: _props.checked || false,
      isActive: false,
      isFocused: false,
      id: _props.id || uniqueID()
    };
    _this.shouldAutoUpdateChecked = !Boolean(_props.checked);
    return _this;
  }

  var _proto = Switch.prototype;

  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.checked !== this.state.checked) {
      this.setState({
        checked: nextProps.checked
      });
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$props3 = this.props,
        className = _this$props3.className,
        disabled = _this$props3.disabled,
        onBlur = _this$props3.onBlur,
        onChange = _this$props3.onChange,
        onFocus = _this$props3.onFocus,
        id = _this$props3.id,
        isLoading = _this$props3.isLoading,
        labelOn = _this$props3.labelOn,
        labelOff = _this$props3.labelOff,
        size = _this$props3.size,
        state = _this$props3.state,
        value = _this$props3.value,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["className", "disabled", "onBlur", "onChange", "onFocus", "id", "isLoading", "labelOn", "labelOff", "size", "state", "value"]);
    var _this$state = this.state,
        checked = _this$state.checked,
        isActive = _this$state.isActive,
        isFocused = _this$state.isFocused;
    var shouldShowChecked = !isLoading && checked;
    var shouldShowActive = !isLoading && isActive;
    var componentClassName = (0, _classnames.default)('c-Switch', disabled && 'is-disabled', shouldShowChecked && 'is-checked', isLoading && 'is-loading', size && "is-" + size, state && "is-" + state, className);
    var backdropClassName = (0, _classnames.default)('c-Switch__backdrop', shouldShowChecked && 'is-checked', disabled && 'is-disabled', isFocused && 'is-focused', size && "is-" + size);
    var toggleClassName = (0, _classnames.default)('c-Switch__toggle', shouldShowChecked && 'is-checked', shouldShowActive && 'is-active', isFocused && 'is-focused', isLoading && 'is-loading', size && "is-" + size);
    var stateMarkup = state && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.StateUI, {
      className: "c-Switch__state"
    });
    var switchLabel = checked ? labelOn : labelOff;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.default.Consumer, {
      children: function children(props) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.WrapperUI, {
          className: "c-SwitchWrapper",
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Switch.SwitchUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
            className: componentClassName,
            htmlFor: _this2.getIdFromContextProps(props),
            onMouseDown: _this2.handleOnMouseDown,
            onMouseUp: _this2.handleOnMouseUp,
            children: [_this2.getInputMarkup(props), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.BackdropUI, {
              className: backdropClassName,
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.ToggleUI, {
                className: toggleClassName
              })
            }), stateMarkup, /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisuallyHidden.default, {
              children: switchLabel
            })]
          }))
        });
      }
    });
  };

  return Switch;
}(_react.default.PureComponent);

Switch.defaultProps = {
  'data-cy': 'Switch',
  inputRef: noop,
  innerRef: noop,
  isLoading: false,
  labelOn: 'On',
  labelOff: 'Off',
  onBlur: noop,
  onChange: noop,
  onClick: noop,
  onFocus: noop,
  onMouseDown: noop,
  onMouseUp: noop,
  size: 'md',
  value: ''
};
Switch.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Determines if the component is checked. */
  checked: _propTypes.default.bool,

  /** Disable the component */
  disabled: _propTypes.default.bool,

  /** Sets a custom ID for the component. */
  id: _propTypes.default.string,

  /** Activates the loading state. */
  isLoading: _propTypes.default.bool,

  /** Callback to retrieve the `input` node. */
  inputRef: _propTypes.default.func,

  /** Callback to retrieve the `input` node. */
  innerRef: _propTypes.default.func,

  /** Name attribute for the component's `input` node. */
  name: _propTypes.default.string,

  /** Callback function when component blurs. */
  onBlur: _propTypes.default.func,

  /** Callback function when component `checked` changes. Returns switched state. */
  onChange: _propTypes.default.func,

  /** Callback function when component is clicked. */
  onClick: _propTypes.default.func,

  /** Callback function when component focuses. */
  onFocus: _propTypes.default.func,

  /** Adjusts the size of the component. */
  size: _propTypes.default.oneOf(['lg', 'md', 'sm', '']),

  /** Applies state-based styling. */
  state: _propTypes.default.oneOf(['error', '']),

  /** Value for the component. */
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),

  /** Callback function on mouse down. */
  onMouseDown: _propTypes.default.func,

  /** Callback function on mouse up. */
  onMouseUp: _propTypes.default.func,
  labelOn: _propTypes.default.string,
  labelOff: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string
};
var _default = Switch;
exports.default = _default;