@teamix/pro 1.4.14 → 1.4.17

package/es/card/index.js

@@ -38,7 +38,8 @@ import ProCardDivider from './divider';
 import ProCardSelectable from './selectable';
 import ProCardTab from './tab';
 import './index.scss';
-import ProField from '@teamix/pro-field';
+import ProField, { Ellipsis } from '@teamix/pro-field';
+import ReactDOM from 'react-dom';
 export * from './card-container';
 var cls = usePrefixCls('teamix-pro-card');
 
@@ -115,9 +116,19 @@ export var ProCard = function ProCard(props) {
       innerCollapseState = _React$useState2[0],
       setInnerCollapseState = _React$useState2[1];
 
+  var cardRef = React.useRef(); // 表头 tooltip tags description 宽度
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      headerWithoutTitleWidth = _React$useState4[0],
+      setHeaderWithoutTitleWidth = _React$useState4[1];
+
   var _formatSpacing = formatSpacing(spacing),
       horizonal = _formatSpacing.horizonal,
-      vertical = _formatSpacing.vertical;
+      vertical = _formatSpacing.vertical; // useEffect(() => {
+  //   calculateHeaderWidth();
+  // }, []);
+
 
   var hasDivider = (divider || !!split) && (title || extra);
   var hasCollapse = collapsible === true || defaultCollapsed !== undefined || collapsed !== undefined;
@@ -193,7 +204,28 @@ export var ProCard = function ProCard(props) {
     marginBottom: -vertical
   } : {};
 
-  var cardContentStyle = _objectSpread(_objectSpread({}, cardContentMargin), contentStyle);
+  var cardContentStyle = _objectSpread(_objectSpread({}, cardContentMargin), contentStyle); // 计算宽度
+
+
+  var calculateHeaderWidth = function calculateHeaderWidth() {
+    if (cardRef === null || cardRef === void 0 ? void 0 : cardRef.current) {
+      var _tooltipDom$clientWid, _tagsDom$clientWidth, _descriptionDom$clien;
+
+      var cardDom = ReactDOM.findDOMNode(cardRef.current);
+      var headerDom = cardDom === null || cardDom === void 0 ? void 0 : cardDom.querySelector('.teamix-pro-card-title');
+      var tooltipDom = headerDom === null || headerDom === void 0 ? void 0 : headerDom.querySelector('.teamix-pro-card-title-tooltip');
+      var tagsDom = headerDom === null || headerDom === void 0 ? void 0 : headerDom.querySelector('.teamix-pro-tags');
+      var descriptionDom = headerDom === null || headerDom === void 0 ? void 0 : headerDom.querySelector('.teamix-pro-card-title-description');
+      var widthList = [(_tooltipDom$clientWid = tooltipDom === null || tooltipDom === void 0 ? void 0 : tooltipDom.clientWidth) !== null && _tooltipDom$clientWid !== void 0 ? _tooltipDom$clientWid : 0, (_tagsDom$clientWidth = tagsDom === null || tagsDom === void 0 ? void 0 : tagsDom.clientWidth) !== null && _tagsDom$clientWidth !== void 0 ? _tagsDom$clientWidth : 0, (_descriptionDom$clien = descriptionDom === null || descriptionDom === void 0 ? void 0 : descriptionDom.clientWidth) !== null && _descriptionDom$clien !== void 0 ? _descriptionDom$clien : 0].filter(function (item) {
+        return item;
+      });
+      var width = widthList.reduce(function (acc, cur) {
+        return acc + cur;
+      }, 0) + widthList.length * 8; // 无法取出精准宽度，减去1作为阈值
+
+      setHeaderWithoutTitleWidth(width - 1);
+    }
+  };
 
   var renderTitle = function renderTitle() {
     var icon = tooltipIcon || 'info-circle-line';
@@ -213,9 +245,20 @@ export var ProCard = function ProCard(props) {
       type: "down-fill"
     }), /*#__PURE__*/React.createElement("div", {
       className: cls('title-name')
-    }, title)), !hasCollapse && /*#__PURE__*/React.createElement("div", {
-      className: cls('title-name')
-    }, title), tooltip && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(ProField, {
+      value: title,
+      type: "text",
+      render: {
+        ellipsis: true
+      }
+    }))), !hasCollapse && /*#__PURE__*/React.createElement("div", {
+      className: cls('title-name'),
+      style: {
+        maxWidth: "calc(100% - ".concat(headerWithoutTitleWidth, "px)")
+      }
+    }, /*#__PURE__*/React.createElement(Ellipsis, {
+      tooltip: title
+    }, title)), tooltip && /*#__PURE__*/React.createElement("div", {
       className: cls('title-tooltip')
     }, /*#__PURE__*/React.createElement(Balloon.Tooltip, {
       align: "t",

package/es/card/index.scss

@@ -40,6 +40,13 @@
     }
   }
 
+  .next-card-header-titles {
+    padding-right: 8px;
+  }
+  .next-card-header-extra {
+    margin-top: 2px;
+  }
+
   &-title {
     display: flex;
     align-items: center;
@@ -80,6 +87,7 @@
 
     &-description {
       font-size: 12px;
+      min-width: 40px;
     }
   }
 

package/es/form/ProForm/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["form", "initialValues", "initialRequest", "scope", "context", "components", "layout", "labelAlign", "wrapperAlign", "labelCol", "wrapperCol", "breakpoints", "onChange", "onChangeType", "onSubmit", "onSubmitFailed", "onInitialComplete", "className", "validateFirst", "schema", "children"];
+var _excluded = ["form", "initialValues", "initialRequest", "scope", "context", "components", "onChange", "onChangeType", "onSubmit", "onSubmitFailed", "onInitialComplete", "className", "validateFirst", "schema", "children"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -10,8 +10,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { memo, useEffect, useMemo } from 'react';
-import { usePrefixCls, cls, getLanguage, getGlobalConfig, isBool } from '@teamix/utils';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
+import { usePrefixCls, cls, getLanguage, getGlobalConfig } from '@teamix/utils';
 import { createForm, onFieldValueChange, onFormValuesChange, registerValidateLocale, setValidateLanguage } from '@formily/core';
 import { toJS } from '@formily/reactive';
 import { Form, Upload, SelectTable, FormLayout, FormItem, ArrayCollapse, ArrayCards, ArrayItems, ArrayTable, Space, FormGrid, FormTab, FormCollapse, FormStep, Editable, FormDialog, FormDrawer, FormButtonGroup, Submit, Reset } from '@teamix/formily';
@@ -22,8 +22,8 @@ import FormGroup from '../Components/FormGroup';
 import LightFilter from '../Components/LightFilter';
 import Text from '../Components/Text/index';
 import SchemaForm from '../SchemaForm';
-import { mergeArrayValue } from '../utils';
 import useAutoSubmit from './useAutoSubmit';
+import useAutoLayout from './useAutoLayout';
 import useInitialRequest from './useInitialRequest';
 import validateLocale from '../locales/validate';
 import './index.scss';
@@ -63,12 +63,6 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
       scope = _ref.scope,
       context = _ref.context,
       components = _ref.components,
-      layout = _ref.layout,
-      labelAlign = _ref.labelAlign,
-      wrapperAlign = _ref.wrapperAlign,
-      labelCol = _ref.labelCol,
-      wrapperCol = _ref.wrapperCol,
-      breakpoints = _ref.breakpoints,
       onChange = _ref.onChange,
       onChangeType = _ref.onChangeType,
       onSubmit = _ref.onSubmit,
@@ -80,7 +74,8 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
       children = _ref.children,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  // 获取全局配置
+  var formRef = useRef(); // 获取全局配置
+
   var _ref2 = getGlobalConfig('ProForm') || {},
       globalComponents = _ref2.components,
       globalScope = _ref2.scope;
@@ -98,25 +93,10 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
 
   var mergedComponents = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, globalComponents), components), formilyComponents), ProFieldComponents);
 
-  var onAutoSubmit = useAutoSubmit(onSubmit, context); // todo 需要formily支持断点下的属性更新
-
-  var getTeamixLayout = useMemo(function () {
-    return breakpoints === true ? {
-      breakpoints: [480],
-      layout: mergeArrayValue(['vertical'], layout),
-      labelAlign: mergeArrayValue(['left'], labelAlign),
-      wrapperAlign: mergeArrayValue(['left'], wrapperAlign),
-      labelCol: mergeArrayValue([24], labelCol),
-      wrapperCol: mergeArrayValue([24], wrapperCol)
-    } : {
-      breakpoints: isBool(breakpoints) ? undefined : breakpoints,
-      layout: layout,
-      labelAlign: labelAlign,
-      wrapperAlign: wrapperAlign,
-      labelCol: labelCol,
-      wrapperCol: wrapperCol
-    };
-  }, [breakpoints, layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
+  var onAutoSubmit = useAutoSubmit(onSubmit, context);
+  var autoTeamixLayout = useAutoLayout(_objectSpread(_objectSpread({}, otherProps), {}, {
+    schema: schema
+  }), formRef);
   useMemo(function () {
     // 配置表单默认值
     if (initialValues) {
@@ -157,7 +137,7 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(Form, _objectSpread(_objectSpread(_objectSpread({
     className: cls(prefixCls(), className)
-  }, otherProps), getTeamixLayout), {}, {
+  }, otherProps), autoTeamixLayout), {}, {
     form: form,
     onAutoSubmit: onAutoSubmit,
     onAutoSubmitFailed: onSubmitFailed
@@ -165,7 +145,9 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
     schema: schema,
     scope: mergedScope,
     components: mergedComponents
-  }) : null, children);
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    ref: formRef
+  }), children);
 });
 ProForm.defaultProps = {
   colon: false,

package/es/form/ProForm/index.scss

@@ -338,8 +338,15 @@
 }
 
 // ArrayTable
-.#{$form-array}-table-status-select {
-  display: none;
+.#{$form-array}-table {
+  &-status-select {
+    display: none;
+  }
+  .#{$css-prefix}formily-item:not(.#{$form-item-cls}-feedback-layout-popover) {
+    .#{$form-item-cls}-help {
+      z-index: 2 !important;
+    }
+  }
 }
 
 // SelectTable

package/es/form/ProForm/useAutoLayout.d.ts

@@ -0,0 +1,9 @@
+declare const useAutoLayout: ({ breakpoints: outBreakpoints, layout, labelAlign, wrapperAlign, labelCol: outLabelCol, wrapperCol: outWrapperCol, autoLayout, schema, }: any, formRef: any) => {
+    breakpoints: any;
+    layout: any;
+    labelAlign: any;
+    wrapperAlign: any;
+    labelCol: any;
+    wrapperCol: any;
+};
+export default useAutoLayout;

package/es/form/ProForm/useAutoLayout.js

@@ -0,0 +1,114 @@
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { useEffect, useMemo, useState } from 'react';
+import { isPlainObj, isBool, autoWidthBySpace, getWidthByCharacterMap, isStr } from '@teamix/utils';
+import { mergeArrayValue } from '../utils';
+
+var useAutoLayout = function useAutoLayout(_ref, formRef) {
+  var outBreakpoints = _ref.breakpoints,
+      layout = _ref.layout,
+      labelAlign = _ref.labelAlign,
+      wrapperAlign = _ref.wrapperAlign,
+      outLabelCol = _ref.labelCol,
+      outWrapperCol = _ref.wrapperCol,
+      autoLayout = _ref.autoLayout,
+      schema = _ref.schema;
+
+  var _ref2 = isPlainObj(autoLayout) ? autoLayout : {
+    autoLabel: autoLayout
+  },
+      autoLabel = _ref2.autoLabel;
+
+  var breakpoints = useMemo(function () {
+    return autoLabel ? false : outBreakpoints;
+  }, []); // 当前断点不支持Col更新
+
+  var _useState = useState({
+    labelCol: outLabelCol,
+    wrapperCol: outWrapperCol
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      autoCol = _useState2[0],
+      setAutoCol = _useState2[1];
+
+  var labelCol = autoCol.labelCol,
+      wrapperCol = autoCol.wrapperCol;
+  useEffect(function () {
+    /**
+     * autolayout
+     */
+    if (autoLabel) {
+      var formWidth = formRef.current.getBoundingClientRect().width; // 表单宽度
+
+      var labelArray = schema.map(function (item) {
+        var text = item.title;
+
+        if (isStr(text)) {
+          var _item$decoratorProps;
+
+          if (item.required) {
+            text += '一'; // 必填 + 12
+          }
+
+          if ((_item$decoratorProps = item.decoratorProps) === null || _item$decoratorProps === void 0 ? void 0 : _item$decoratorProps.tooltip) {
+            text += '一'; // 提示 + 18
+          }
+
+          return text;
+        }
+
+        return '';
+      }); // 标题内容集合
+
+      var labelWidthArray = getWidthByCharacterMap(labelArray); // 标题宽度集合
+
+      var _autoWidthBySpace = autoWidthBySpace(labelWidthArray),
+          expectedWidth = _autoWidthBySpace.expectedWidth,
+          consoleArray = _autoWidthBySpace.consoleArray; // 智能计算预期宽度
+
+
+      var expectedCol = Math.ceil(expectedWidth / formWidth * 24); // 预期宽度转换为 Col 值
+
+      setAutoCol({
+        labelCol: expectedCol,
+        wrapperCol: wrapperCol
+      });
+    } else {
+      setAutoCol({
+        labelCol: outLabelCol,
+        wrapperCol: outWrapperCol
+      });
+    }
+  }, [outLabelCol, outWrapperCol]); // Layout配置By断点（配置断点后，目前不支持 Col 更新）
+
+  var autoTeamixLayout = useMemo(function () {
+    return breakpoints === true ? {
+      breakpoints: [480],
+      layout: mergeArrayValue(['vertical'], layout),
+      labelAlign: mergeArrayValue(['left'], labelAlign),
+      wrapperAlign: mergeArrayValue(['left'], wrapperAlign),
+      labelCol: mergeArrayValue([24], labelCol),
+      wrapperCol: mergeArrayValue([24], wrapperCol)
+    } : {
+      breakpoints: isBool(breakpoints) ? undefined : breakpoints,
+      layout: layout,
+      labelAlign: labelAlign,
+      wrapperAlign: wrapperAlign,
+      labelCol: labelCol,
+      wrapperCol: wrapperCol
+    };
+  }, [breakpoints, layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
+  return autoTeamixLayout;
+};
+
+export default useAutoLayout;

package/es/form/SchemaForm/initializeArrayTable.js

@@ -1,4 +1,5 @@
-var _excluded = ["title", "decoratorProps"];
+var _excluded = ["title", "decoratorProps"],
+    _excluded2 = ["title", "dataIndex", "cell", "htmlTitle", "sortable", "width", "align", "alignHeader", "filters", "filterMode", "filterMenuProps", "lock", "resizable", "colSpan"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -12,15 +13,49 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var initializeColumn = function initializeColumn(item) {
   var title = item.title,
-      decoratorProps = item.decoratorProps,
-      children = _objectWithoutProperties(item, _excluded);
+      _item$decoratorProps = item.decoratorProps,
+      decoratorProps = _item$decoratorProps === void 0 ? {} : _item$decoratorProps,
+      children = _objectWithoutProperties(item, _excluded); // 将Table.Column属性和组件FormItem属性通过decoratorProps统一传入，再分别赋值
 
+
+  var columnTitle = decoratorProps.title,
+      dataIndex = decoratorProps.dataIndex,
+      cell = decoratorProps.cell,
+      htmlTitle = decoratorProps.htmlTitle,
+      sortable = decoratorProps.sortable,
+      width = decoratorProps.width,
+      align = decoratorProps.align,
+      alignHeader = decoratorProps.alignHeader,
+      filters = decoratorProps.filters,
+      filterMode = decoratorProps.filterMode,
+      filterMenuProps = decoratorProps.filterMenuProps,
+      lock = decoratorProps.lock,
+      resizable = decoratorProps.resizable,
+      colSpan = decoratorProps.colSpan,
+      formItemDecoratorProps = _objectWithoutProperties(decoratorProps, _excluded2);
+
+  var columnProperties = {
+    title: title !== null && title !== void 0 ? title : columnTitle,
+    dataIndex: dataIndex,
+    cell: cell,
+    htmlTitle: htmlTitle,
+    sortable: sortable,
+    width: width,
+    align: align,
+    alignHeader: alignHeader,
+    filters: filters,
+    filterMode: filterMode,
+    filterMenuProps: filterMenuProps,
+    lock: lock,
+    resizable: resizable,
+    colSpan: colSpan
+  };
   return {
     component: 'ArrayTable.Column',
-    props: _objectSpread(_objectSpread({}, decoratorProps), {}, {
-      title: title
-    }),
-    children: [_objectSpread({}, children)]
+    props: columnProperties,
+    children: [_objectSpread(_objectSpread({}, children), {}, {
+      decoratorProps: formItemDecoratorProps
+    })]
   };
 };
 

package/es/form/typing.d.ts

@@ -59,6 +59,9 @@ export interface ProFormSchemaItem {
     data?: AnyObject;
 }
 export declare type ProFormSchema = ProFormSchemaItem[];
+interface AutoLayout {
+    autoLabel?: boolean;
+}
 export interface ProFormProps extends Omit<IFormLayoutProps, 'breakpoints'> {
     form?: FormType | false;
     schema?: ProFormSchema;
@@ -78,6 +81,7 @@ export interface ProFormProps extends Omit<IFormLayoutProps, 'breakpoints'> {
     onSubmitFailed?: (feedbacks: IFormFeedback[]) => void;
     onInitialComplete?: (form: FormType) => void;
     breakpoints?: number[] | boolean;
+    autoLayout?: AutoLayout | boolean;
 }
 export interface FilterProps extends ProFormProps {
     form: FormType;

package/es/index.d.ts

@@ -28,5 +28,5 @@ export * from './table';
 export * from './sidebar';
 export * from './utils';
 export * from './timeline';
-declare const version = "1.4.14";
+declare const version = "1.4.17";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, hooks, nocode, templates, utils, };

package/es/index.js

@@ -36,6 +36,6 @@ export * from './table';
 export * from './sidebar';
 export * from './utils';
 export * from './timeline';
-var version = '1.4.14';
+var version = '1.4.17';
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, // ProLayout,
 ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, hooks, nocode, templates, utils };

package/es/info/components/baseInfo/index.js

@@ -5,7 +5,7 @@ import './index.scss';
 import { getLayout } from '../../utils/utils';
 import defaultLayoutMap from '../../utils/layout';
 import InfoValueItem from '../InfoValueItem';
-import { getDataIndexValue } from '../../utils';
+import { getDataIndexValue, isHidden } from '../../utils';
 var Row = Grid.Row,
     Col = Grid.Col;
 
@@ -55,7 +55,13 @@ var ProBaseInfo = function ProBaseInfo(props) {
 
   var renderContent = function renderContent() {
     return columns.map(function (item, index) {
-      var _layout$span, _layout$span2, _item$title, _item$valueType, _ref, _item$colSpan;
+      var _ref, _ref2, _layout$span, _layout$span2, _item$title, _item$valueType, _ref3, _item$colSpan;
+
+      var hidden = isHidden(item === null || item === void 0 ? void 0 : item.hidden, getDataIndexValue(item.dataIndex, (_ref = dataSource !== null && dataSource !== void 0 ? dataSource : result) !== null && _ref !== void 0 ? _ref : {}), (_ref2 = dataSource !== null && dataSource !== void 0 ? dataSource : result) !== null && _ref2 !== void 0 ? _ref2 : {}, context);
+
+      if (hidden) {
+        return;
+      }
 
       var span = item.colSpan ? defaultLayout.span * item.colSpan : defaultLayout.span;
       var layoutSpan = item.colSpan ? ((_layout$span = layout === null || layout === void 0 ? void 0 : layout.span) !== null && _layout$span !== void 0 ? _layout$span : span) * item.colSpan : (_layout$span2 = layout === null || layout === void 0 ? void 0 : layout.span) !== null && _layout$span2 !== void 0 ? _layout$span2 : span;
@@ -67,7 +73,7 @@ var ProBaseInfo = function ProBaseInfo(props) {
         loading: loading,
         value: /*#__PURE__*/React.createElement(InfoValueItem, {
           type: (_item$valueType = item === null || item === void 0 ? void 0 : item.valueType) !== null && _item$valueType !== void 0 ? _item$valueType : 'text',
-          value: getDataIndexValue(item.dataIndex, (_ref = dataSource !== null && dataSource !== void 0 ? dataSource : result) !== null && _ref !== void 0 ? _ref : {}),
+          value: getDataIndexValue(item.dataIndex, (_ref3 = dataSource !== null && dataSource !== void 0 ? dataSource : result) !== null && _ref3 !== void 0 ? _ref3 : {}),
           render: item.render,
           dataSource: item.dataSource,
           infoItem: item,

package/es/info/components/headerInfo/index.js

@@ -5,7 +5,7 @@ import './index.scss';
 import defaultLayoutMap from '../../utils/layout';
 import { getLayout } from '../../utils/utils';
 import InfoValueItem from '../InfoValueItem';
-import { getDataIndexValue } from '../../utils';
+import { getDataIndexValue, isHidden } from '../../utils';
 var Row = Grid.Row,
     Col = Grid.Col;
 
@@ -18,12 +18,19 @@ var ProHeaderInfo = function ProHeaderInfo(props) {
       loading = props.loading,
       result = props.result,
       actionRef = props.actionRef,
-      size = props.size;
+      size = props.size,
+      context = props.context;
   var defaultLayout = defaultLayoutMap[getLayout((_size$width = size === null || size === void 0 ? void 0 : size.width) !== null && _size$width !== void 0 ? _size$width : 0)];
 
   var renderContent = function renderContent() {
     return columns.map(function (item, index) {
-      var _item$title, _item$valueType;
+      var _ref, _ref2, _item$title, _item$valueType;
+
+      var hidden = isHidden(item === null || item === void 0 ? void 0 : item.hidden, getDataIndexValue(item.dataIndex, (_ref = dataSource !== null && dataSource !== void 0 ? dataSource : result) !== null && _ref !== void 0 ? _ref : {}), (_ref2 = dataSource !== null && dataSource !== void 0 ? dataSource : result) !== null && _ref2 !== void 0 ? _ref2 : {}, context);
+
+      if (hidden) {
+        return;
+      }
 
       var span = 24;
 
@@ -51,6 +58,7 @@ var ProHeaderInfo = function ProHeaderInfo(props) {
           infoItem: item,
           record: dataSource !== null && dataSource !== void 0 ? dataSource : result,
           actionRef: actionRef,
+          context: context,
           props: item.props
         }),
         headerInfoLayout: layout !== null && layout !== void 0 ? layout : defaultLayout,

package/es/info/components/tableInfo/index.js

@@ -23,7 +23,7 @@ import './index.scss';
 import { LabelIconTip } from '../../../field';
 import InfoValueItem from '../InfoValueItem';
 import { ProSkeletonRaw } from '../../..';
-import { getDataIndexValue } from '../../utils';
+import { getDataIndexValue, isHidden } from '../../utils';
 import cloneDeep from 'lodash.clonedeep';
 
 var ProTableInfo = function ProTableInfo(props) {
@@ -33,7 +33,8 @@ var ProTableInfo = function ProTableInfo(props) {
       layout = _props$layout === void 0 ? {} : _props$layout,
       loading = props.loading,
       result = props.result,
-      actionRef = props.actionRef;
+      actionRef = props.actionRef,
+      context = props.context;
   var _layout$colNum = layout.colNum,
       colNum = _layout$colNum === void 0 ? 2 : _layout$colNum,
       _layout$labelGutter = layout.labelGutter,
@@ -73,7 +74,9 @@ var ProTableInfo = function ProTableInfo(props) {
 
   var newDataSource = useMemo(function () {
     var nResult = [];
-    var columnsCopy = cloneDeep(columns); // 取当前行的数据。直到取完
+    var columnsCopy = cloneDeep(columns).filter(function (item) {
+      return !isHidden(item.hidden, getDataIndexValue(item.dataIndex, dataSource !== null && dataSource !== void 0 ? dataSource : result), dataSource !== null && dataSource !== void 0 ? dataSource : result, context);
+    }); // 取当前行的数据。直到取完
 
     while (columnsCopy.length > 0) {
       var filterColumns = [];

package/es/info/typing.d.ts

@@ -98,6 +98,8 @@ export interface ProInfoColumnsProps {
     props?: any;
     /** 对齐方式 **/
     alignItems?: 'center' | 'flex-start' | 'flex-end' | string;
+    /** 是否隐藏 **/
+    hidden?: boolean | ProInfoCellFunProp | string;
 }
 export declare type ProInfoActionType = {
     /** 刷新Info */

package/es/info/utils/index.d.ts

@@ -10,3 +10,11 @@ export declare const ProInfoGroupContext: React.Context<ProInfoGroupContextProps
  * @returns
  */
 export declare function getDataIndexValue(dataIndex: ProInfoColumnsProps['dataIndex'], dataSource: object): any;
+/**
+ * 判断是否隐藏
+ * @param hidden
+ * @param value
+ * @param record
+ * @param context
+ */
+export declare function isHidden(hidden: ProInfoColumnsProps['hidden'], value: any, record: any, context: any): any;

package/es/info/utils/index.js

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { getDeepValue } from '@teamix/utils';
+import { getDeepValue, getTargetValue } from '@teamix/utils';
 import React from 'react';
 export function useActionType(ref, action) {
   // 合并自定义事件
@@ -30,4 +30,31 @@ export function getDataIndexValue(dataIndex, dataSource) {
   }
 
   return getDeepValue(dataIndex !== null && dataIndex !== void 0 ? dataIndex : '', dataSource);
+}
+/**
+ * 判断是否隐藏
+ * @param hidden
+ * @param value
+ * @param record
+ * @param context
+ */
+
+export function isHidden(hidden, value, record, context) {
+  if (typeof hidden === 'string') {
+    return getTargetValue(hidden, _objectSpread(_objectSpread({}, record), {}, {
+      record: record,
+      value: value,
+      context: context
+    }));
+  }
+
+  if (typeof hidden === 'boolean') {
+    return hidden;
+  }
+
+  if (typeof hidden === 'function') {
+    return hidden === null || hidden === void 0 ? void 0 : hidden(value, record);
+  }
+
+  return false;
 }

package/es/nocode/index.scss

@@ -1,4 +1,4 @@
-.teamix-nocode {
+.teamix-pro-nocode {
   &-empty {
     display: flex;
     flex-direction: column;
@@ -75,7 +75,7 @@
       right: 20px;
       bottom: 20px;
 
-      &>i {
+      & > i {
         cursor: pointer;
         color: var(--color-text1-8, #848484);
         background-color: rgba(0, 0, 0, 0.06);

package/es/nocode/pages/playground.js

@@ -26,7 +26,7 @@ import { useAction } from '../../actions';
 import { initConfigurator } from '../configurators';
 import { ComponentConfiguratorMap } from '../configurators/map';
 import { PlayGroundLayout } from '../playground';
-var cls = usePrefixCls('teamix-nocode');
+var cls = usePrefixCls('teamix-pro-nocode');
 export var PagePlayground = function PagePlayground(props) {
   var _useState = useState(undefined),
       _useState2 = _slicedToArray(_useState, 2),

package/es/nocode/pages/renderer.js

@@ -40,7 +40,7 @@ import PageHeader from '../../page-header';
 import { ProSkeletonRaw } from '../../skeleton';
 import { usePrefixCls } from '@teamix/utils';
 import { PageMap } from '.';
-var cls = usePrefixCls('teamix-nocode');
+var cls = usePrefixCls('teamix-pro-nocode');
 
 var Loading = function Loading(props) {
   return /*#__PURE__*/React.createElement(PageContainer, _objectSpread({

package/es/nocode/playground.js

@@ -20,7 +20,7 @@ import React, { useMemo } from 'react';
 import { usePrefixCls } from '@teamix/utils';
 import { useDebounceFn } from '@teamix/hooks';
 import { initConfigurator } from './configurators';
-var cls = usePrefixCls('teamix-nocode-playground');
+var cls = usePrefixCls('teamix-pro-nocode-playground');
 export var PlayGroundLayout = function PlayGroundLayout(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: cls()