@aliretail/react-materials-components/es/FormComponents/switch/index.js

B 端物料组件库

import _Switch from "@alifd/next/es/switch";
import _extends from "@babel/runtime/helpers/extends";
import * as React from 'react';
import ReactDOM from 'react-dom';
import { connect } from '@formily/next';
import { mapStyledProps, mapCustomComponent } from "../shared";
var DEFAULT_WIDTH = 56;

var NextSwitchX = function NextSwitchX(props) {
  var _props$isPreview = props.isPreview,
      isPreview = _props$isPreview === void 0 ? false : _props$isPreview,
      _props$readOnly = props.readOnly,
      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
      _props$className = props.className,
      className = _props$className === void 0 ? '' : _props$className,
      checkedChildren = props.checkedChildren,
      unCheckedChildren = props.unCheckedChildren,
      checked = props.checked;

  var _React$useState = React.useState(DEFAULT_WIDTH),
      width = _React$useState[0],
      setWidth = _React$useState[1];

  var blankRef = React.useRef(null);

  var getWidth = function getWidth() {
    var offsetWidth = 0;

    try {
      var _blankRef$current, _blankRef$current$upd;

      if (blankRef !== null && blankRef !== void 0 && (_blankRef$current = blankRef.current) !== null && _blankRef$current !== void 0 && (_blankRef$current$upd = _blankRef$current.updater) !== null && _blankRef$current$upd !== void 0 && _blankRef$current$upd.isMounted(blankRef === null || blankRef === void 0 ? void 0 : blankRef.current)) {
        var _ReactDOM$findDOMNode, _window, _window$getComputedSt2, _childDom$innerText;

        var childDom = ReactDOM === null || ReactDOM === void 0 ? void 0 : (_ReactDOM$findDOMNode = ReactDOM.findDOMNode(blankRef.current)) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.querySelector('.next-switch-children');

        var _window$getComputedSt = (_window = window) === null || _window === void 0 ? void 0 : (_window$getComputedSt2 = _window.getComputedStyle) === null || _window$getComputedSt2 === void 0 ? void 0 : _window$getComputedSt2.call(_window, childDom),
            fontSize = _window$getComputedSt.fontSize;

        var len = (childDom === null || childDom === void 0 ? void 0 : (_childDom$innerText = childDom.innerText) === null || _childDom$innerText === void 0 ? void 0 : _childDom$innerText.length) || 0;
        offsetWidth = Number(fontSize.replace(/[^\d]/g, '')) * len;
      }
    } catch (e) {}

    var tempWidth = offsetWidth + 36;
    return Math.max(tempWidth, DEFAULT_WIDTH);
  }; // 1.23.6版本以上的fusion使用auto width


  var isUseAutoWidth = function isUseAutoWidth() {
    var _window2, _window2$Next;

    var nextVersion = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Next = _window2.Next) === null || _window2$Next === void 0 ? void 0 : _window2$Next.version;
    if (!nextVersion) return false;
    var nextVersionSplit = nextVersion.split('.');
    var versionDes = [1, 23, 6];

    for (var i = 0; i < versionDes.length; i++) {
      var targetVer = versionDes[i];

      if (nextVersionSplit[i] > targetVer) {
        return true;
      } else if (nextVersionSplit[i] < targetVer) {
        return false;
      }
    }

    return true;
  };

  React.useEffect(function () {
    if (blankRef) {
      var _width = getWidth();

      setWidth(_width);
    }
  }, [checked, checkedChildren, unCheckedChildren]);
  var widthCon = isUseAutoWidth() ? {
    autoWidth: true
  } : {
    style: {
      width: width
    }
  };
  return /*#__PURE__*/React.createElement(_Switch, _extends({
    ref: blankRef
  }, props, widthCon, {
    size: "small",
    className: (readOnly ? 'aliretail-preview-text' : '') + className,
    isPreview: isPreview || readOnly
  }));
};

export var Switch = connect({
  valueName: 'checked',
  getProps: mapStyledProps,
  getComponent: mapCustomComponent
})(NextSwitchX);