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

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

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _antd = require("antd");
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../utils");
require("./index.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 = void 0 && (void 0).__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;
};
var TYPE_SETTING_MODE = {
  Grid: {
    key: 'grid',
    label: '栅格'
  },
  Pixel: {
    key: 'pixel',
    label: '像素'
  },
  Percentage: {
    key: 'percentage',
    label: '百分比'
  },
  Auto: {
    key: 'auto',
    label: '自适应'
  }
};
var prefix = "".concat(_utils.cssPrefixCls, "-form-item-label");
var FormItemLabelInner = function FormItemLabelInner(props) {
  var value = props.value,
    _onChange = props.onChange,
    selectedComp = props.selectedComp,
    propsKey = props.propsKey;
  var _useState = (0, _react.useState)([]),
    _useState2 = _slicedToArray(_useState, 2),
    options = _useState2[0],
    setOption = _useState2[1];
  var getMode = (0, _react.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 = (0, _react.useState)(value),
    _useState4 = _slicedToArray(_useState3, 2),
    tmpValue = _useState4[0],
    setTmpValue = _useState4[1];
  // 当前值模式
  var mode = (0, _react.useMemo)(function () {
    return getMode(value);
  }, [value]);
  // 是否为内容输入控件
  var isWrapper = (0, _react.useMemo)(function () {
    return propsKey === 'wrapperCol';
  }, [propsKey]);
  //  标题或者内容的值
  var otherValue = isWrapper ? selectedComp.props.labelCol : selectedComp.props.wrapperCol;
  // 值类型
  var otherMode = (0, _react.useMemo)(function () {
    return getMode(otherValue);
  }, [otherValue]);
  (0, _react.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.default.createElement(_antd.Row, {
    className: prefix
  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
    span: 24
  }, /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_antd.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.default.createElement(_antd.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.default.createElement(_antd.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.default.createElement(_antd.Form.Item, {
    label: label,
    name: name,
    rules: rules
  }, /*#__PURE__*/_react.default.createElement(FormItemLabelInner, Object.assign({}, other)));
};
var _default = exports.default = FormItemLabel;