@wufengteam/wform/es/components/FieldItem/index.js

@wufengteam/wform

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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; }
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;
};
/* eslint-disable */
import React, { useContext } from 'react';
import { Form, Icon } from '@ant-design/compatible';
import { Col, Tooltip } from 'antd';
import { DummyFormContext } from '@lingxiteam/pcfactory/lib/utils/DummyFormContext';
import WithSyncValue from '@lingxiteam/pcfactory/lib/utils/WithSyncValue';
import { DformCustom } from '@lingxiteam/factory/lib/index.export';
import useFieldAttr from '../../hooks/useFieldAttr';
import { prefix } from '../../utils';
import "./index.css";
var prefixCls = "".concat(prefix, "-field-item");
// H5表单控件包裹组件
var H5FieldItem = function H5FieldItem(props) {
  var Field = props.Field,
    fieldAttr = props.fieldAttr,
    children = props.children,
    name = props.name,
    initialValue = props.initialValue,
    platform = props.platform,
    fieldProps = props.fieldProps,
    renderType = props.renderType,
    h5layout = props.h5layout,
    restProps = __rest(props, ["Field", "fieldAttr", "children", "name", "initialValue", "platform", "fieldProps", "renderType", "h5layout"]);
  // console.log('FieldItemProps', props);
  // 如果 Field 有值，那么使用低代码传过来的组件
  var Comp = DformCustom;
  var errorStyle = {
    paddingRight: '18px',
    textAlign: 'left'
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(renderType === 'editor' ? "".concat(prefix, "-editor-field-item-h5") : "".concat(prefix, "-field-item-h5"), " ").concat(h5layout === 'vertical' ? "".concat(prefix, "-field-item-h5-vertical") : ' ')
  }, /*#__PURE__*/React.createElement(Comp, Object.assign({
    className: "tste",
    fieldProps: fieldProps,
    defaultValue: initialValue,
    // @ts-ignore
    title: name,
    positionType: "horizontal",
    errorStyle: errorStyle
  }, restProps), children));
};
// 运行态PC表单控件包裹组件
var PCFieldItem = function PCFieldItem(props) {
  var _a;
  var labelCol = props.labelCol,
    wrapperCol = props.wrapperCol,
    validateStatus = props.validateStatus,
    help = props.help,
    rules = props.rules,
    initialValue = props.initialValue,
    children = props.children,
    name = props.name,
    fieldName = props.fieldName,
    required = props.required,
    titleTip = props.titleTip,
    tipLocation = props.tipLocation,
    tipContent = props.tipContent,
    tipIcon = props.tipIcon;
  var getLabelWithTitleTip = function getLabelWithTitleTip() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center',
        gap: '5px',
        flexDirection: tipLocation === 'before' ? 'row-reverse' : 'row'
      }
    }, /*#__PURE__*/React.createElement("span", null, name), /*#__PURE__*/React.createElement(Tooltip, {
      title: tipContent
    }, /*#__PURE__*/React.createElement(Icon, {
      theme: tipIcon === null || tipIcon === void 0 ? void 0 : tipIcon.theme,
      type: tipIcon === null || tipIcon === void 0 ? void 0 : tipIcon.type
    })));
  };
  // 获取当前表单实例
  var form = useContext(DummyFormContext);
  return /*#__PURE__*/React.createElement(React.Fragment, null, (form === null || form === void 0 ? void 0 : form.getFieldDecorator) ? ( /*#__PURE__*/React.createElement(Form.Item, Object.assign({
    label: titleTip === 'notext' ? name : getLabelWithTitleTip(),
    labelCol: labelCol,
    wrapperCol: wrapperCol,
    validateStatus: validateStatus,
    help: help,
    hasFeedback: !!validateStatus,
    required: required
  }, (_a = form === null || form === void 0 ? void 0 : form.nowValidateMsg) === null || _a === void 0 ? void 0 : _a[fieldName]), form.getFieldDecorator(fieldName, {
    rules: rules,
    initialValue: initialValue
  }, fieldName)( /*#__PURE__*/React.createElement(WithSyncValue, {
    compId: fieldName
  }, children)))) : children);
};
// 配置态表单控件包裹组件
var FieldItem = function FieldItem(props) {
  // console.log('FieldItemProps', props);
  var fieldAttr = props.fieldAttr,
    children = props.children,
    initialValue = props.initialValue,
    _props$platform = props.platform,
    platform = _props$platform === void 0 ? 'pc' : _props$platform,
    selfSpan = props.selfSpan,
    colSpan = props.colSpan,
    renderType = props.renderType,
    required = props.required,
    name = props.name,
    _props$rules = props.rules,
    externalRules = _props$rules === void 0 ? [] : _props$rules,
    _props$hasFormItem = props.hasFormItem,
    hasFormItem = _props$hasFormItem === void 0 ? false : _props$hasFormItem,
    restProps = __rest(props, ["fieldAttr", "children", "initialValue", "platform", "selfSpan", "colSpan", "renderType", "required", "name", "rules", "hasFormItem"]);
  // 若组件的状态设置为隐藏 直接返回 null 不渲染
  var _useFieldAttr = useFieldAttr({
      fieldAttr: fieldAttr || []
    }),
    hidden = _useFieldAttr.hidden;
  if (hidden && renderType !== 'editor') return null;
  var rules = required ? [{
    required: true,
    message: "".concat(name, "\u4E0D\u80FD\u4E3A\u7A7A")
  }] : [];
  var isRequired = required;
  if (Array.isArray(externalRules)) {
    externalRules.forEach(function (item) {
      if (item === null || item === void 0 ? void 0 : item.required) {
        isRequired = true;
      }
    });
    rules.push.apply(rules, _toConsumableArray(externalRules));
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderType === 'editor' ? ( /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "-editor-field-item"),
    style: restProps.style
  }, platform === 'pc' ? ( /*#__PURE__*/React.createElement(React.Fragment, null, children)) : ( /*#__PURE__*/React.createElement(H5FieldItem, Object.assign({
    rules: rules,
    fieldProps: props.fieldProps || props.fieldName
  }, props))))) : ( /*#__PURE__*/React.createElement(React.Fragment, null, platform === 'pc' ? ( /*#__PURE__*/React.createElement(Col, {
    className: prefixCls,
    style: restProps.style,
    span: selfSpan || colSpan || 24
  }, /*#__PURE__*/React.createElement(PCFieldItem, Object.assign({}, props, {
    rules: rules,
    required: isRequired
  })))) : ( /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "-field-item-h5wrap"),
    style: restProps.style
  }, /*#__PURE__*/React.createElement(H5FieldItem, Object.assign({
    rules: rules,
    fieldProps: props.fieldProps || props.fieldName
  }, props, {
    required: isRequired
  })))))));
};
export default FieldItem;