@aliretail/react-materials-components/lib/ToggleStatus/index.js

B 端物料组件库

"use strict";

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

exports.__esModule = true;
exports["default"] = void 0;

var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));

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

var _switch = _interopRequireDefault(require("@alifd/next/lib/switch"));

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

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

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

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

var _excluded = ["title", "subTitle", "onOk", "onCancel"];

var setStatusText = function setStatusText(props) {
  var value = props.value,
      text = props.text,
      checkedChildren = props.checkedChildren,
      unCheckedChildren = props.unCheckedChildren;

  if (text) {
    return text;
  }

  if (value) {
    return checkedChildren;
  } else {
    return unCheckedChildren;
  }
};

var ToggleStatus = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(ToggleStatus, _React$Component);

  // 即便 ts 声明了 ToggleStatusProps，这里还是要提供 propsTypes，用于 react 报错提示
  function ToggleStatus(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      width: 52,
      statusText: ''
    };

    _this.getWidth = function () {
      var _this$blankRef$curren = _this.blankRef.current.offsetWidth,
          offsetWidth = _this$blankRef$curren === void 0 ? 0 : _this$blankRef$curren;
      var tempWidth = offsetWidth + 36;
      return tempWidth < 56 ? 56 : tempWidth;
    };

    _this.changeStatus = function (value) {
      var onChange = _this.props.onChange;
      onChange && onChange(value); // 启用/禁用，调启用的接口
    };

    _this.handleChange = function (curVal) {
      var _this$props = _this.props,
          unCheckedConfirmProps = _this$props.unCheckedConfirmProps,
          checkedConfirmProps = _this$props.checkedConfirmProps;
      var hasConfirm = !_this.isEmpty(checkedConfirmProps) && !_this.isEmpty(unCheckedConfirmProps);

      if (hasConfirm) {
        var text = curVal ? checkedConfirmProps : unCheckedConfirmProps;
        ToggleStatus.confirmPopover((0, _extends2["default"])({}, text, {
          onOk: function onOk() {
            return _this.changeStatus(curVal);
          }
        }));
      } else {
        _this.changeStatus(curVal);
      }
    };

    _this.isEmpty = function (obj) {
      if (!obj || typeof obj !== 'object') {
        return true;
      }

      var res = Object.getOwnPropertyNames(obj).length > 0;
      return !res;
    };

    _this.blankRef = /*#__PURE__*/_react["default"].createRef();
    return _this;
  }

  ToggleStatus.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
    var nextStatusText = setStatusText(nextProps);
    var statusText = prevState.statusText;

    if (nextStatusText !== statusText) {
      return {
        statusText: nextStatusText
      };
    }

    return null;
  };

  var _proto = ToggleStatus.prototype;

  _proto.componentDidMount = function componentDidMount() {
    if (this.blankRef) {
      var statusText = setStatusText(this.props);
      var width = this.getWidth();
      this.setState({
        width: width,
        statusText: statusText
      });
    }
  };

  _proto.componentDidUpdate = function componentDidUpdate(_, preState) {
    if (preState.statusText !== this.state.statusText) {
      var width = this.getWidth();
      this.setState({
        width: width
      });
    }
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        value = _this$props2.value,
        disabled = _this$props2.disabled,
        _this$props2$overlayP = _this$props2.overlayProps,
        overlayProps = _this$props2$overlayP === void 0 ? {} : _this$props2$overlayP;
    var _this$state = this.state,
        statusText = _this$state.statusText,
        width = _this$state.width;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "aliretail-status-cell"
    }, /*#__PURE__*/_react["default"].createElement(_switch["default"], (0, _extends2["default"])({
      disabled: disabled,
      checked: value,
      onChange: this.handleChange,
      size: "small",
      style: {
        width: width
      },
      checkedChildren: statusText,
      unCheckedChildren: statusText
    }, overlayProps)), /*#__PURE__*/_react["default"].createElement("div", {
      ref: this.blankRef,
      className: "aliretail-status-cell-blank"
    }, statusText));
  };

  return ToggleStatus;
}(_react["default"].Component);

ToggleStatus.propTypes = {
  value: _propTypes["default"].bool.isRequired,
  text: _propTypes["default"].string,
  onChange: _propTypes["default"].func,
  disabled: _propTypes["default"].bool,
  overlayProps: _propTypes["default"].object,
  checkedChildren: _propTypes["default"].string,
  unCheckedChildren: _propTypes["default"].string,
  checkedConfirmProps: _propTypes["default"].exact({
    title: _propTypes["default"].string,
    subTitle: _propTypes["default"].string
  }),
  unCheckedConfirmProps: _propTypes["default"].exact({
    title: _propTypes["default"].string,
    subTitle: _propTypes["default"].string
  })
};
ToggleStatus.defaultProps = {
  value: false,
  disabled: false,
  checkedChildren: '启用中',
  unCheckedChildren: '禁用中'
};

ToggleStatus.confirmPopover = function (params) {
  var _params$title = params.title,
      title = _params$title === void 0 ? '主标题' : _params$title,
      _params$subTitle = params.subTitle,
      subTitle = _params$subTitle === void 0 ? '' : _params$subTitle,
      _params$onOk = params.onOk,
      _onOk = _params$onOk === void 0 ? function () {} : _params$onOk,
      _params$onCancel = params.onCancel,
      _onCancel = _params$onCancel === void 0 ? function () {} : _params$onCancel,
      rest = (0, _objectWithoutPropertiesLoose2["default"])(params, _excluded);

  var content = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "confirm-dialog-icon"
  }, "i"), /*#__PURE__*/_react["default"].createElement("span", {
    className: "confirm-dialog-title"
  }, title)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "confirm-dialog-subtitle"
  }, subTitle));

  return _dialog["default"].show((0, _extends2["default"])({}, rest, {
    content: content,
    onOk: function onOk() {
      return _onOk();
    },
    onCancel: function onCancel() {
      return _onCancel();
    },
    overlayProps: {
      className: 'biz-confirm-dialog'
    }
  }));
};

var _default = ToggleStatus;
exports["default"] = _default;