@beisen-phoenix/switch/cjs/index.js

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

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

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

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

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

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

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

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

require("./index.css");

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

  function Switch(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Switch);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Switch).call(this, props));
    _this.node = void 0;

    _this.onClick = function (e) {
      var checked = _this.state.checked;
      var onClick = _this.props.onClick;
      var newChecked = !checked;

      _this.setChecked(newChecked, e);

      onClick && onClick(newChecked, e);
    };

    _this.onKeyDown = function (e) {
      if (e.keyCode === 37) {
        _this.setChecked(false, e);
      } else if (e.keyCode === 39) {
        _this.setChecked(true, e);
      }
    };

    _this.onMouseUp = function (e) {
      var onMouseUp = _this.props.onMouseUp;

      _this.blur();

      onMouseUp && onMouseUp(e);
    };

    var _checked = false;

    if ('checked' in props) {
      _checked = !!props.checked;
    } else {
      _checked = !!props.defaultChecked;
    }

    _this.state = {
      checked: _checked,
      isChanged: false
    };
    _this.node = _react.default.createRef();
    return _this;
  }

  (0, _createClass2.default)(Switch, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props = this.props,
          autoFocus = _this$props.autoFocus,
          disabled = _this$props.disabled,
          loading = _this$props.loading;

      if (autoFocus && !disabled && !loading) {
        this.focus();
      }
    }
  }, {
    key: "setChecked",
    value: function setChecked(checked, e) {
      var isChanged = this.state.isChanged;
      var _this$props2 = this.props,
          disabled = _this$props2.disabled,
          loading = _this$props2.loading,
          onChange = _this$props2.onChange;

      if (disabled || loading) {
        return;
      }

      if (!('checked' in this.props)) {
        this.setState({
          checked: checked
        });
      }

      !isChanged && this.setState({
        isChanged: true
      });
      onChange && onChange(checked, e);
    }
  }, {
    key: "focus",
    value: function focus() {
      if (this.node.current) {
        this.node.current.focus();
      }
    }
  }, {
    key: "blur",
    value: function blur() {
      if (this.node.current) {
        this.node.current.blur();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props3 = this.props,
          className = _this$props3.className,
          size = _this$props3.size,
          prefixCls = _this$props3.prefixCls,
          disabled = _this$props3.disabled,
          loading = _this$props3.loading,
          checkedChildren = _this$props3.checkedChildren,
          unCheckedChildren = _this$props3.unCheckedChildren,
          onChange = _this$props3.onChange,
          restProps = (0, _objectWithoutProperties2.default)(_this$props3, ["className", "size", "prefixCls", "disabled", "loading", "checkedChildren", "unCheckedChildren", "onChange"]);
      var _this$state = this.state,
          checked = _this$state.checked,
          isChanged = _this$state.isChanged;
      var switchClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls, true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "_small"), size === 'small'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "_checked"), checked), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "_disabled"), disabled || loading), (0, _defineProperty2.default)(_classNames, className, !!className), _classNames));
      return _react.default.createElement("button", (0, _extends2.default)({}, restProps, {
        type: "button",
        disabled: disabled || loading,
        className: switchClassName,
        ref: this.node,
        onKeyDown: this.onKeyDown,
        onClick: this.onClick,
        onMouseUp: this.onMouseUp
      }), _react.default.createElement("span", {
        className: "".concat(prefixCls, "__child")
      }, checked ? checkedChildren : unCheckedChildren), // 手动切换时的动画
      isChanged && _react.default.createElement("div", {
        className: "".concat(prefixCls, "__ani")
      }), _react.default.createElement("div", {
        className: "".concat(prefixCls, "__bar")
      }, loading && _react.default.createElement("div", {
        className: "".concat(prefixCls, "__loading")
      })));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps) {
      var newState = {};

      if ('checked' in nextProps) {
        newState.checked = !!nextProps.checked;
      }

      return newState;
    }
  }]);
  return Switch;
}(_react.default.Component);

Switch.defaultProps = {
  prefixCls: 'phoenix-switch',
  checkedChildren: null,
  unCheckedChildren: null,
  className: '',
  defaultChecked: false
};
var _default = Switch;
exports.default = _default;