@wufengteam/inputs/es/FormItemLabel/index.js

平台提供的右侧属性编辑器，需要在主工程中注册

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import { Form, AutoComplete, Col, Input, Row, Select } from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { cssPrefixCls } from '../utils';
import "./index.css";
var TYPE_SETTING_MODE = {
  Grid: {
    key: 'grid',
    label: '栅格'
  },
  Pixel: {
    key: 'pixel',
    label: '像素'
  },
  Percentage: {
    key: 'percentage',
    label: '百分比'
  },
  Auto: {
    key: 'auto',
    label: '自适应'
  }
};
var prefix = "".concat(cssPrefixCls, "-form-item-label");
var FormItemLabelInner = function FormItemLabelInner(props) {
  var value = props.value,
    _onChange = props.onChange,
    selectedComp = props.selectedComp,
    propsKey = props.propsKey;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    options = _useState2[0],
    setOption = _useState2[1];
  var getMode = useCallback(function (val) {
    if (!Number.isNaN(Number(val))) {
      return TYPE_SETTING_MODE.Grid.key;
    }
    if (typeof val === 'string' && val.toLowerCase().includes('px')) {
      return TYPE_SETTING_MODE.Pixel.key;
    }
    if (typeof val === 'string' && val.includes('%')) {
      return TYPE_SETTING_MODE.Percentage.key;
    }
    if (val === 'auto') {
      return 'auto';
    }
    return 'auto';
  }, []);
  // 输入框临时值
  var _useState3 = useState(value),
    _useState4 = _slicedToArray(_useState3, 2),
    tmpValue = _useState4[0],
    setTmpValue = _useState4[1];
  // 当前值模式
  var mode = useMemo(function () {
    return getMode(value);
  }, [value]);
  // 是否为内容输入控件
  var isWrapper = useMemo(function () {
    return propsKey === 'wrapperCol';
  }, [propsKey]);
  //  标题或者内容的值
  var otherValue = isWrapper ? selectedComp.props.labelCol : selectedComp.props.wrapperCol;
  // 值类型
  var otherMode = useMemo(function () {
    return getMode(otherValue);
  }, [otherValue]);
  useEffect(function () {
    if (value !== tmpValue) {
      setTmpValue(value);
    }
  }, [value]);
  // // 当关联的表单值类型变更
  // useEffect(() => {
  //   if (init && isWrapper) {
  //     // 栅格类型
  //     if (TYPE_SETTING_MODE.Grid.key === otherMode) {
  //       setTmpValue(24 - otherValue);
  //       onChange(24 - otherValue);
  //       return;
  //     }
  //     // 百分比
  //     if (TYPE_SETTING_MODE.Percentage.key === otherMode) {
  //       const numberVal = otherValue.replace(/[^0-9]/gi, '');
  //       setTmpValue(`${100 - Number(numberVal)}%`);
  //       onChange(`${100 - Number(numberVal)}%`);
  //       return;
  //     }
  //     if (tmpValue !== 'auto') {
  //       onChange('auto');
  //       setTmpValue('auto');
  //     }
  //     return;
  //   }
  // }, [otherMode, otherValue]);
  var _onBlur = function onBlur(val) {
    if (val === value) {
      return;
    }
    // 内容的值类型必须跟标题值类型一致
    if (isWrapper && getMode(val) !== 'auto' && getMode(val) !== otherMode) {
      setTmpValue(value);
      return;
    }
    // 栅格 并且数值在 1-24之间
    if (!Number.isNaN(val) && Number(val) >= 1 && Number(val) <= 24) {
      _onChange(val);
      return;
    }
    // 百分数
    if (/^\d+(\.\d+)?%$/.test(val)) {
      var percentageVal = Number(val.replace(/[^0-9]/gi, ''));
      // 不能大于100%
      if (percentageVal > 100) {
        setTmpValue('100%');
        _onChange('100%');
      } else if (percentageVal < 0) {
        setTmpValue(isWrapper ? '70%' : '30%');
        _onChange(isWrapper ? '70%' : '30%');
      } else {
        _onChange(val);
      }
      return;
    }
    // 像素值
    if (/^\d+(\.\d+)?px$/.test(val.toLowerCase())) {
      _onChange(val.toLowerCase());
      return;
    }
    if (val === 'auto' && isWrapper) {
      _onChange(val);
      return;
    }
    // 都不符合恢复初始值
    _onChange(value);
    setTmpValue(value);
  };
  var getDisabled = function getDisabled(key) {
    if (isWrapper && key !== 'auto' && key !== otherMode || isWrapper && key === 'auto' && otherMode === TYPE_SETTING_MODE.Grid.key) {
      return true;
    }
    return false;
  };
  return /*#__PURE__*/React.createElement(Row, {
    className: prefix
  }, /*#__PURE__*/React.createElement(Col, {
    span: 24
  }, /*#__PURE__*/React.createElement(AutoComplete, {
    value: tmpValue,
    onChange: function onChange(v) {
      var arr = [];
      if (!Number.isNaN(Number(v)) && Number(v) > 0) {
        if (v >= 1 && v <= 24) {
          arr.push({
            value: v
          });
        }
        if (v <= 100) {
          arr.push({
            value: "".concat(v, "%")
          });
        }
        arr.push({
          value: "".concat(v, "px")
        });
      }
      if (isWrapper && otherMode !== TYPE_SETTING_MODE.Grid.key) {
        arr.push({
          value: 'auto'
        });
      }
      setOption(arr);
      setTmpValue(v);
    },
    options: options
  }, /*#__PURE__*/React.createElement(Input, {
    value: tmpValue,
    onBlur: function onBlur(e) {
      // 值校验
      _onBlur(e.target.value);
    },
    onPressEnter: function onPressEnter(e) {
      _onBlur(e.target.value);
    },
    onChange: function onChange(v) {
      setTmpValue(v.target.value);
    },
    addonAfter: ( /*#__PURE__*/React.createElement(Select, {
      value: mode,
      onChange: function onChange(v) {
        var val = '';
        if (!isWrapper) {
          switch (v) {
            case TYPE_SETTING_MODE.Grid.key:
              val = 6;
              break;
            case TYPE_SETTING_MODE.Percentage.key:
              val = '30%';
              break;
            case TYPE_SETTING_MODE.Pixel.key:
              val = '80px';
              break;
            default:
              break;
          }
        } else {
          var numberVal = Number(otherValue.replace(/[^0-9]/gi, ''));
          switch (v) {
            case TYPE_SETTING_MODE.Grid.key:
              val = 24 - numberVal;
              break;
            case TYPE_SETTING_MODE.Percentage.key:
              val = "".concat(100 - numberVal, "%");
              break;
            case TYPE_SETTING_MODE.Pixel.key:
              val = '200px';
              break;
            default:
              val = 'auto';
              break;
          }
        }
        setTmpValue(val);
        _onChange(val);
      }
    }, Object.keys(TYPE_SETTING_MODE).map(function (i) {
      var _TYPE_SETTING_MODE$i = TYPE_SETTING_MODE[i],
        key = _TYPE_SETTING_MODE$i.key,
        label = _TYPE_SETTING_MODE$i.label;
      if (!isWrapper && key === 'auto') {
        return null;
      }
      return /*#__PURE__*/React.createElement(Select.Option, {
        key: key,
        value: key,
        disabled: getDisabled(key)
      }, label);
    })))
  }))));
};
var FormItemLabel = function FormItemLabel(_a) {
  var name = _a.name,
    rules = _a.rules,
    label = _a.label,
    other = __rest(_a, ["name", "rules", "label"]);
  return /*#__PURE__*/React.createElement(Form.Item, {
    label: label,
    name: name,
    rules: rules
  }, /*#__PURE__*/React.createElement(FormItemLabelInner, Object.assign({}, other)));
};
export default FormItemLabel;