wix-style-react/dist/src/ToggleSwitch/ToggleSwitchCore/ToggleSwitchCore.js

wix-style-react

"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 React = _interopRequireWildcard(require("react"));
var _ToggleSwitchCoreSt = require("./ToggleSwitchCore.st.css");
var _constants = require("./constants");
var _filterDataProps = require("./utils/filter-data-props");
var _StatusContext = require("../../FormField/StatusContext");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ToggleSwitch/ToggleSwitchCore/ToggleSwitchCore.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// The only reason this exists is that Santa currently doesn't support boolean and number types
// in the style panel, and some of the styling options have to live in the layout panel,
// and we pass them down as inline styles.

/**
 * Toggle Switch
 */
class ToggleSwitchCore extends React.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      focus: false,
      focusVisible: false
    };
    // We don't want to show outline when the component is focused by mouse.
    this.focusedByMouse = false;
    this.handleKeyDown = () => {
      // Pressing any key should make the focus visible, even if the checkbox
      // was initially focused by mouse.
      this.setState({
        focusVisible: true
      });
    };
    // Doesn't get invoked if the input is disabled.
    this.handleMouseDown = e => {
      if (e.button === 0) {
        this.focusedByMouse = true;
      }
    };
    this.handleFocus = () => {
      this.setState({
        focus: true,
        focusVisible: !this.focusedByMouse
      });
    };
    this.handleBlur = () => {
      this.setState({
        focus: false,
        focusVisible: false
      });
      this.focusedByMouse = false;
    };
  }
  render() {
    var {
      checked,
      disabled,
      styles: inlineStyles,
      className,
      dataHook
    } = this.props;
    return /*#__PURE__*/React.createElement(_StatusContext.StatusContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 7
      }
    }, statusContext => /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
      className: (0, _ToggleSwitchCoreSt.st)(_ToggleSwitchCoreSt.classes.root, {
        checked,
        disabled,
        focus: this.state.focus,
        'focus-visible': this.state.focusVisible
      }, className),
      style: inlineStyles == null ? void 0 : inlineStyles.root,
      "data-disabled": disabled,
      "data-hook": dataHook
    }, (0, _filterDataProps.filterDataProps)(this.props), {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 77,
        columnNumber: 11
      }
    }), /*#__PURE__*/React.createElement("div", {
      "data-hook": _constants.dataHooks.track,
      className: _ToggleSwitchCoreSt.classes.track,
      style: inlineStyles == null ? void 0 : inlineStyles.track,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 93,
        columnNumber: 13
      }
    }), /*#__PURE__*/React.createElement("div", {
      "data-hook": _constants.dataHooks.knob,
      className: _ToggleSwitchCoreSt.classes.knob,
      style: inlineStyles == null ? void 0 : inlineStyles.knob,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 98,
        columnNumber: 13
      }
    }, /*#__PURE__*/React.createElement("div", {
      "data-hook": _constants.dataHooks.knobIcon,
      className: _ToggleSwitchCoreSt.classes.knobIcon,
      style: inlineStyles == null ? void 0 : inlineStyles.knobIcon,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 103,
        columnNumber: 15
      }
    }, checked ? this.props.checkedIcon : this.props.uncheckedIcon)), /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
      id: this.props.id,
      className: _ToggleSwitchCoreSt.classes.input,
      type: "checkbox",
      checked: checked,
      readOnly: disabled,
      tabIndex: disabled ? -1 : this.props.tabIndex,
      onChange: disabled ? undefined : this.props.onChange,
      onFocus: disabled ? undefined : this.handleFocus,
      onBlur: disabled ? undefined : this.handleBlur,
      onMouseDown: this.handleMouseDown,
      onKeyDown: this.handleKeyDown,
      "aria-label": this.props['aria-label'],
      "data-hook": _constants.dataHooks.toggleSwitchInput
    }, (0, _StatusContext.getAriaAttributesFromContext)(statusContext), {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 111,
        columnNumber: 13
      }
    }))));
  }
}
exports.default = ToggleSwitchCore;
ToggleSwitchCore.displayName = 'ToggleSwitchCore';
ToggleSwitchCore.defaultProps = {
  checked: false,
  styles: {},
  tabIndex: 0,
  onChange: () => null
};
//# sourceMappingURL=ToggleSwitchCore.js.map