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

B 端物料组件库

import _Dialog from "@alifd/next/es/dialog";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _Switch from "@alifd/next/es/switch";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["title", "subTitle", "onOk", "onCancel"];
import React from 'react';
import PropTypes from 'prop-types';

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) {
  _inheritsLoose(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(_extends({}, 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.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.createElement("div", {
      className: "aliretail-status-cell"
    }, /*#__PURE__*/React.createElement(_Switch, _extends({
      disabled: disabled,
      checked: value,
      onChange: this.handleChange,
      size: "small",
      style: {
        width: width
      },
      checkedChildren: statusText,
      unCheckedChildren: statusText
    }, overlayProps)), /*#__PURE__*/React.createElement("div", {
      ref: this.blankRef,
      className: "aliretail-status-cell-blank"
    }, statusText));
  };

  return ToggleStatus;
}(React.Component);

ToggleStatus.propTypes = {
  value: PropTypes.bool.isRequired,
  text: PropTypes.string,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  overlayProps: PropTypes.object,
  checkedChildren: PropTypes.string,
  unCheckedChildren: PropTypes.string,
  checkedConfirmProps: PropTypes.exact({
    title: PropTypes.string,
    subTitle: PropTypes.string
  }),
  unCheckedConfirmProps: PropTypes.exact({
    title: PropTypes.string,
    subTitle: PropTypes.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 = _objectWithoutPropertiesLoose(params, _excluded);

  var content = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: "confirm-dialog-icon"
  }, "i"), /*#__PURE__*/React.createElement("span", {
    className: "confirm-dialog-title"
  }, title)), /*#__PURE__*/React.createElement("div", {
    className: "confirm-dialog-subtitle"
  }, subTitle));
  return _Dialog.show(_extends({}, rest, {
    content: content,
    onOk: function onOk() {
      return _onOk();
    },
    onCancel: function onCancel() {
      return _onCancel();
    },
    overlayProps: {
      className: 'biz-confirm-dialog'
    }
  }));
};

export default ToggleStatus;