@antdp/edit-table/esm/EditTable/Td.js

基于antd封装的组件

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["editing", "dataIndex", "title", "record", "index", "inputNode", "rules", "children", "itemAttr", "type", "attr", "tip", "tipAttr", "multiple", "rowKey", "isList", "listAttr"],
  _excluded2 = ["name", "rules", "preName", "itemValue", "children", "tipAttr", "tip"];
import React from 'react';
import { Tooltip } from 'antd';
import RcForm from 'rc-field-form';
import { getItem, getFieldId, toArray } from './utils';
import { jsx as _jsx } from "react/jsx-runtime";
var EditableCell = _ref => {
  var {
      editing,
      dataIndex,
      record,
      inputNode,
      rules,
      children,
      itemAttr,
      type,
      attr,
      tip,
      tipAttr,
      rowKey,
      isList,
      listAttr
    } = _ref,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var renders = getItem({
    attr,
    type,
    inputNode
  });
  var _render = () => {
    // 使用 List 时  isList===true  && inputNode 是方法
    if (isList && typeof inputNode === 'function') {
      return /*#__PURE__*/_jsx(RcForm.List, _extends({}, listAttr, {
        name: dataIndex,
        children: (fields, operation, meta) => inputNode(fields.map(field => _extends({}, field, {
          fieldKey: field.key
        })), operation, meta)
      }));
    }
    return /*#__PURE__*/_jsx(EditableCellItem, _extends({}, itemAttr, {
      name: dataIndex,
      rules: rules,
      preName: record[rowKey],
      itemValue: record,
      children: renders,
      tipAttr: tipAttr,
      tip: tip
    }));
  };
  return /*#__PURE__*/_jsx("td", _extends({}, restProps, {
    children: editing ? _render() : children
  }));
};
export var EditableCellItem = props => {
  var {
      name,
      rules,
      preName = '',
      itemValue,
      children: _children,
      tipAttr = {},
      tip
    } = props,
    rest = _objectWithoutPropertiesLoose(props, _excluded2);
  return /*#__PURE__*/_jsx(RcForm.Field, _extends({}, rest, {
    name: name,
    rules: rules,
    children: (control, meta, form) => {
      var mergedName = toArray(name).length && meta ? meta.name : [];
      var fieldId = getFieldId(mergedName, preName);
      var onChange = event => {
        var value = event;
        if (event && event.target) {
          value = event.target.value;
        }
        control.onChange(value);
      };
      var childNode = typeof _children === 'function' ? _children(_extends({}, control, {
        id: fieldId
      }), meta, form, {
        record: itemValue
      }) : /*#__PURE__*/React.isValidElement(_children) ? /*#__PURE__*/React.cloneElement(_children, _extends({}, control, {
        onChange: onChange,
        id: fieldId
      })) : _children;
      var errs = meta.errors.map(err => err).join(',');
      return /*#__PURE__*/_jsx(Tooltip, _extends({
        color: "#fff",
        overlayInnerStyle: {
          color: 'red'
        }
      }, tipAttr, {
        title: tip ? tip(errs) : errs,
        open: !!meta.errors.length,
        children: childNode
      }));
    }
  }));
};
export default EditableCell;