@teamix/pro 1.4.0 → 1.4.3

package/es/table/components/ToolBar/index.js

@@ -4,14 +4,14 @@ 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 { baseClass } from '@teamix/utils';
+import { usePrefixCls } from '@teamix/utils';
 import React from 'react';
 import FullScreenIcon from './FullScreenIcon';
 import FilterColumnIcon from './FilterColumnIcon';
 import DensityIcon from './DensityIcon';
 import RefreshIcon from './RefreshIcon';
 import './index.scss';
-var cls = baseClass('teamix-pro-table-toolbar');
+var cls = usePrefixCls('teamix-pro-table-toolbar');
 var presetToolBarMap = {
   refresh: RefreshIcon,
   density: DensityIcon,

package/es/table/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll"];
+var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context"];
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -36,7 +36,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Table, Checkbox } from '@alicloudfe/components';
 import Pagination from './components/Pagination';
 import genProColumnToColumn from './utils/genProColumnToColumn';
-import { baseClass, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, getCookie, usePrefixCls } from '@teamix/utils';
+import { getGlobalConfig, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, usePrefixCls } from '@teamix/utils';
 import { ProSkeletonRaw as Skeleton } from '../skeleton';
 import './index.scss';
 import Layout from './components/Layout';
@@ -46,15 +46,11 @@ import getTableSortIcons from './utils/getTableSortIcons';
 import useTableSelection from './utils/useTableSelection';
 import FullScreen from './components/ToolBar/Fullscreen';
 import EmptyContent from './components/EmptyContent';
-import { formilyReactive } from '../form';
 import { ProActionGroup } from '../actions';
 import classNames from 'classnames';
 import ProPageContainer from '../page-container';
 export * from './typing';
-var cls = baseClass('teamix-pro-table');
-var toJS = formilyReactive.toJS; // 判断是否是 root 组织
-
-var isRoot = getCookie('organizationId') === '1';
+var cls = usePrefixCls('teamix-pro-table');
 /**
  * 处理原生传入的 columns 以便于 选择列 方便处理
  * @param columns 原生传入的 columns
@@ -62,24 +58,17 @@ var isRoot = getCookie('organizationId') === '1';
  */
 
 var processColumns = function processColumns(columns, initialColumns) {
-  var _filterColumns;
+  var _getGlobalConfig;
 
+  var globalFilterColumns = (_getGlobalConfig = getGlobalConfig('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.filterColumns;
   var filterColumns = columns.filter(function (item) {
-    return item.columnFilters !== false && (item === null || item === void 0 ? void 0 : item.hidden) !== true;
-  });
-
-  if (isRoot) {
-    // root 组织下不显示标签管理
-    filterColumns = filterColumns.filter(function (item) {
-      return item.valueType !== 'selectGroup';
-    });
-  } // 处理只剩一列批量选择的情况下宽度错乱问题
-
+    return item.columnFilters !== false && (item === null || item === void 0 ? void 0 : item.hidden) !== true && (!globalFilterColumns || globalFilterColumns(item));
+  }); // 处理只剩一列批量选择的情况下宽度错乱问题
 
-  if ((_filterColumns = filterColumns) === null || _filterColumns === void 0 ? void 0 : _filterColumns.length) {
-    var _filterColumns2, _initialColumns$;
+  if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
+    var _initialColumns$;
 
-    if (((_filterColumns2 = filterColumns) === null || _filterColumns2 === void 0 ? void 0 : _filterColumns2.length) === 1) {
+    if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
       var _filterColumns$, _filterColumns$2;
 
       if ((_filterColumns$ = filterColumns[0]) === null || _filterColumns$ === void 0 ? void 0 : _filterColumns$.width) {
@@ -129,6 +118,7 @@ var ProTable = function ProTable(props) {
       mainAction = props.mainAction,
       extra = props.extra,
       propsDataFilter = props.dataFilter,
+      afterDataFilter = props.afterDataFilter,
       toolBar = props.toolBar,
       propsColumns = props.columns,
       useRowSelection = props.useRowSelection,
@@ -181,6 +171,7 @@ var ProTable = function ProTable(props) {
       _props$size = props.size,
       propsSize = _props$size === void 0 ? 'medium' : _props$size,
       disableSelectAll = props.disableSelectAll,
+      context = props.context,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var targetPageKey = pageKey || globalPageKey;
@@ -269,7 +260,10 @@ var ProTable = function ProTable(props) {
 
     var tableDom = tableRef.current;
     var headerDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements = tableDom.getElementsByClassName('teamix-pro-table-layout')) === null || _tableDom$getElements === void 0 ? void 0 : _tableDom$getElements[0];
-    var tableHeaderDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements2 = tableDom.getElementsByClassName("".concat(usePrefixCls(), "table-header-inner"))) === null || _tableDom$getElements2 === void 0 ? void 0 : _tableDom$getElements2[0];
+    var basePrefix = usePrefixCls('', {
+      base: true
+    });
+    var tableHeaderDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements2 = tableDom.getElementsByClassName(basePrefix('table-header-inner'))) === null || _tableDom$getElements2 === void 0 ? void 0 : _tableDom$getElements2[0];
     return new Promise(function (resolve) {
       setTimeout(function () {
         var _headerDom$offsetHeig, _tableHeaderDom$offse;
@@ -813,13 +807,14 @@ var ProTable = function ProTable(props) {
         actionRef: actionRef,
         columns: propsColumns,
         dataFilter: dataFilter,
+        afterDataFilter: afterDataFilter,
         dataFilterFormRef: isFullScreen ? fullscreenDataFilterFormRef : normalDataFilterFormRef,
         rowSelection: rowSelection,
         filterColumnType: filterColumnType
       }), /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
-        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef),
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context),
         loading: getTableLoading(),
         className: classNames('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection

package/es/table/index.scss

@@ -134,4 +134,11 @@ $fullscreenPadding: 24px;
       color: var(--table-row-hover-color);
     }
   }
+}
+
+// 排序icon hover 颜色跟随主题
+.next-table-sort.next-table-header-icon {
+  a:hover {
+    color: var(--color-brand1-5);
+  }
 }

package/es/table/typing.d.ts

@@ -6,7 +6,7 @@ import { ProFieldType, ProFieldRenderProps, ProFieldDataSourceItem } from '../fi
 import { QueryFilterProps, ProFormType } from '../form';
 import { ProActionGroupProps, ProActionButtonProps } from '../actions';
 import { PaginationProps } from '@alicloudfe/components/types/pagination';
-import { HeaderProps as ProTableHeaderProps } from '@teamix/utils';
+import { HeaderProps as ProTableHeaderProps } from '../field';
 import { Method } from 'axios';
 import React from 'react';
 declare type IFieldRenderProps = keyof ProFieldRenderProps;
@@ -139,6 +139,8 @@ export declare type ProTableProps = {
     };
     /** 禁用掉批量选择中的全选 */
     disableSelectAll?: boolean;
+    /** 接收外部传来的 context，eg: dialog-table */
+    context?: any;
 } & Omit<TableProps, 'columns'> & ProTableTopAreaProps;
 export declare type rowSelectionType = {
     getProps?: (record: any, index: number) => any;
@@ -254,6 +256,8 @@ export declare type ProTableTopAreaProps = {
     extra?: ProActionButtonProps | React.ReactNode | React.ReactNode[];
     /** 数据过滤区 */
     dataFilter?: ProTableDataFilterProps;
+    /** 数据过滤区下方自定义区域 */
+    afterDataFilter?: React.ReactNode;
     /** 传给 QueryFilter 的 formRef */
     dataFilterFormRef?: any;
     /** 排序、筛选列展示状态 */

package/es/table/utils/columnRender.d.ts

@@ -10,4 +10,4 @@ export declare const renderColumnsTitle: (item: ProTableColumnProps, actionRef:
 /**
  * 负责单元格的具体渲染
  */
-export declare const renderCell: (value: any, item: ProTableColumnProps, index: number, record: any, actionRef: React.MutableRefObject<ProTableActionType | undefined>) => JSX.Element;
+export declare const renderCell: (value: any, item: ProTableColumnProps, index: number, record: any, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any) => JSX.Element;

package/es/table/utils/columnRender.js

@@ -28,9 +28,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * 渲染列的逻辑函数
  */
 import React from 'react';
-import { getTargetValue, LabelIconTip } from '@teamix/utils';
+import { getTargetValue } from '@teamix/utils';
 import { ProActionGroup } from '../../actions';
-import ProField from '../../field';
+import ProField, { LabelIconTip } from '../../field';
 import Filter from '../components/Filter';
 /**
  * 增加了 icon 的功能 render title
@@ -108,7 +108,9 @@ export var renderColumnsTitle = function renderColumnsTitle(item, actionRef) {
  * 负责单元格的具体渲染
  */
 
-export var renderCell = function renderCell(value, item, index, record, actionRef) {
+export var renderCell = function renderCell(value, item, index, record, actionRef,
+/** 接收外部比如 dialog-table 传过来的 context，用于弹窗关闭等 */
+context) {
   var _actionSchema$actions;
 
   var _item$valueType = item.valueType,
@@ -169,12 +171,13 @@ export var renderCell = function renderCell(value, item, index, record, actionRe
 
   if (actionSchema && ((_actionSchema$actions = actionSchema.actions) === null || _actionSchema$actions === void 0 ? void 0 : _actionSchema$actions.length)) {
     // 默认 context
-    var defaultContext = {
+    var defaultContext = _objectSpread({
       value: value,
       index: index,
       record: record,
       action: actionRef.current
-    };
+    }, context);
+
     return /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({
       type: "text"
     }, actionSchema), {}, {

package/es/table/utils/genProColumnToColumn.d.ts

@@ -6,4 +6,4 @@ import { ColumnProps } from '@alicloudfe/components/types/table';
  */
 export default function genProColumnToColumn(columns: ProTableColumnProps[], 
 /** 是否渲染骨架屏 */
-showSkeleton: boolean, actionRef: React.MutableRefObject<ProTableActionType | undefined>): ColumnProps[];
+showSkeleton: boolean, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any): ColumnProps[];

package/es/table/utils/genProColumnToColumn.js

@@ -20,6 +20,7 @@ import { ProSkeletonRaw as Skeleton } from '../../skeleton';
 export default function genProColumnToColumn(columns,
 /** 是否渲染骨架屏 */
 showSkeleton, actionRef) {
+  var context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   return columns.map(function (columnProps) {
     var filters = columnProps.filters,
         dataIndex = columnProps.dataIndex,
@@ -44,7 +45,7 @@ showSkeleton, actionRef) {
       dataIndex: dataIndex === null || dataIndex === void 0 ? void 0 : dataIndex.toString(),
       title: renderColumnsTitle(columnProps, actionRef),
       cell: function cell(value, index, record) {
-        return renderCell(value, columnProps, index, record, actionRef);
+        return renderCell(value, columnProps, index, record, actionRef, context);
       }
     });
   });

package/es/table/utils/pureColumnRender.js

@@ -28,8 +28,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * 渲染列的逻辑函数，用于非 ProTable 比如 selectTable
  */
 import React from 'react';
-import { getTargetValue, LabelIconTip } from '@teamix/utils';
-import ProField from '../../field';
+import { getTargetValue } from '@teamix/utils';
+import ProField, { LabelIconTip } from '../../field';
 /**
  * 增加了 icon 的功能 render title
  */

package/es/timeline/ProTimeLineItem/index.js

@@ -28,11 +28,11 @@ import React, { useCallback, useState } from 'react';
 import './index.scss';
 import { Icon, Timeline } from '@alicloudfe/components';
 import classnames from 'classnames';
-import { baseClass, dateFormat } from '@teamix/utils';
-import { renderTags } from '@teamix/utils';
+import { usePrefixCls, dateFormat } from '@teamix/utils';
+import { renderTags } from '../../field';
 import TeamixIcon from '@teamix/icon';
 var TimelineItem = Timeline.Item;
-var cls = baseClass('teamix-pro-timeline');
+var cls = usePrefixCls('teamix-pro-timeline');
 
 var ProTimeLineItem = function ProTimeLineItem(props) {
   var _props$_comment = props._comment,

package/es/timeline/index.js

@@ -13,10 +13,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useMemo } from 'react';
 import { Timeline } from '@alicloudfe/components';
 import ProTimeLineItem from './ProTimeLineItem';
-import { baseClass } from '@teamix/utils';
+import { usePrefixCls } from '@teamix/utils';
 import classNames from 'classnames';
 import './index.scss';
-var cls = baseClass('teamix-pro-timeline');
+var cls = usePrefixCls('teamix-pro-timeline');
 
 var ProTimeline = function ProTimeline(props) {
   var items = props.items,

package/es/timeline/typing.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ProTagItem } from '@teamix/utils';
+import { ProTagItem } from '../field';
 export declare type ProTimeLineItemStatus = 'success' | 'fail' | 'process' | 'warning' | 'wait';
 export declare type FoldProps = {
     /**

package/lib/actions/dialog-form.js

@@ -154,7 +154,7 @@ var DialogForm = function DialogForm(props) {
     }
   }, /*#__PURE__*/_react.default.createElement(_form.default, _objectSpread(_objectSpread({
     form: form,
-    schema: (0, _utils.getTargetValue)(formSchema, context)
+    schema: formSchema
   }, getDefaultFormPropsByDialogSize(size)), (0, _utils2.addContext)((0, _utils.getTargetValue)(others, context), context))));
 };
 

package/lib/actions/dialog.js

@@ -85,7 +85,8 @@ var FooterForm = function FooterForm(props) {
     layout: "inline",
     feedbackLayout: "none",
     form: form,
-    schema: (0, _utils.getTargetValue)(schema, context)
+    context: context,
+    schema: schema
   });
 };
 

package/lib/actions/index.js

@@ -262,6 +262,10 @@ var ProActionMenuButtonItem = function ProActionMenuButtonItem(props) {
       tooltip = action.tooltip,
       disabledTooltip = action.disabledTooltip,
       tooltipProps = action.tooltipProps;
+  var basePrefix = (0, _utils.usePrefixCls)('', {
+    base: true
+  });
+  var prefixCls = (0, _utils.usePrefixCls)('teamix-pro-action');
   var menuItemActionConfig = Object.assign({}, config, {
     trigger: 'onClick'
   });
@@ -299,7 +303,7 @@ var ProActionMenuButtonItem = function ProActionMenuButtonItem(props) {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", _objectSpread({
-    className: (0, _classnames.default)('teamix-pro-action-menu-item', "".concat((0, _utils.usePrefixCls)(), "menu-item"), _defineProperty({}, "".concat((0, _utils.usePrefixCls)(), "disabled"), disabled))
+    className: (0, _classnames.default)(_defineProperty({}, basePrefix('disabled'), disabled), basePrefix('menu-item'), prefixCls('menu-item'))
   }, buttonProps), content);
 };
 

package/lib/card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ProTagItem } from '@teamix/utils';
+import { ProTagItem } from '../field';
 import { ProMessageProps } from '../utils/message';
 import { ProActionGroupProps } from '../actions';
 import './index.scss';
@@ -41,6 +41,8 @@ export interface ProCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 't
     centered?: boolean;
     /** 加载中状态 */
     loading?: boolean;
+    /** 是否只是内容区加载，标题正常显示 */
+    contentLoading?: boolean;
     /** 空状态 */
     empty?: boolean;
     /** 边框颜色 */

package/lib/card/index.js

@@ -20,6 +20,8 @@ var _icon = _interopRequireDefault(require("@teamix/icon"));
 
 var _utils = require("@teamix/utils");
 
+var _field = require("../field");
+
 var _message = require("../utils/message");
 
 var _skeleton = require("../skeleton");
@@ -52,7 +54,7 @@ Object.keys(_cardContainer).forEach(function (key) {
   });
 });
 var _excluded = ["context"],
-    _excluded2 = ["children", "title", "subTitle", "tooltip", "tooltipIcon", "tags", "description", "extra", "actions", "message", "style", "className", "image", "hoveredShadow", "divider", "bordered", "compacted", "centered", "loading", "empty", "borderColor", "backgroundColor", "contentClassName", "contentStyle", "direction", "wrap", "spacing", "split", "collapsible", "defaultCollapsed", "collapsed", "onCollapse", "context"];
+    _excluded2 = ["children", "title", "subTitle", "tooltip", "tooltipIcon", "tags", "description", "extra", "actions", "message", "style", "className", "image", "hoveredShadow", "divider", "bordered", "compacted", "centered", "loading", "contentLoading", "empty", "borderColor", "backgroundColor", "contentClassName", "contentStyle", "direction", "wrap", "spacing", "split", "collapsible", "defaultCollapsed", "collapsed", "onCollapse", "context"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -78,7 +80,7 @@ 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; }
 
-var cls = (0, _utils.baseClass)('teamix-pro-card');
+var cls = (0, _utils.usePrefixCls)('teamix-pro-card');
 
 var renderActionGroup = function renderActionGroup(extra, context) {
   if (!extra) {
@@ -131,6 +133,7 @@ var ProCard = function ProCard(props) {
       compacted = props.compacted,
       centered = props.centered,
       loading = props.loading,
+      contentLoading = props.contentLoading,
       empty = props.empty,
       borderColor = props.borderColor,
       backgroundColor = props.backgroundColor,
@@ -258,7 +261,7 @@ var ProCard = function ProCard(props) {
     }, /*#__PURE__*/_react.default.createElement(_components.Balloon.Tooltip, {
       align: "t",
       trigger: tooltipTrigger
-    }, tooltip)), tags && (0, _utils.renderTags)(tags, 'small'), description && /*#__PURE__*/_react.default.createElement("div", {
+    }, tooltip)), tags && (0, _field.renderTags)(tags, 'small'), description && /*#__PURE__*/_react.default.createElement("div", {
       className: cls('title-description')
     }, /*#__PURE__*/_react.default.createElement(_proField.default, {
       value: description,
@@ -279,7 +282,7 @@ var ProCard = function ProCard(props) {
     component: "img",
     src: image
   }), (title || extra) && /*#__PURE__*/_react.default.createElement(_components.Card.Header, {
-    title: loading ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Card.Title, null) : renderTitle(),
+    title: loading && !contentLoading ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Card.Title, null) : renderTitle(),
     subTitle: !loading && subTitle,
     extra: !loading && renderActionGroup(extra, context)
   }), hasDivider && /*#__PURE__*/_react.default.createElement(_components.Card.Divider, null), showContent && /*#__PURE__*/_react.default.createElement(_components.Card.Content, {
@@ -287,7 +290,7 @@ var ProCard = function ProCard(props) {
       padding: 0,
       margin: 0
     } : {}
-  }, loading && /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Card.Content, null), !loading && /*#__PURE__*/_react.default.createElement("div", {
+  }, (loading || contentLoading) && /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Card.Content, null), !loading && /*#__PURE__*/_react.default.createElement("div", {
     className: cardContentClassName,
     style: cardContentStyle
   }, empty && /*#__PURE__*/_react.default.createElement("div", {

package/lib/card/selectable.js

@@ -29,7 +29,7 @@ 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; }
 
-var cls = (0, _utils.baseClass)('teamix-pro-card-selectable');
+var cls = (0, _utils.usePrefixCls)('teamix-pro-card-selectable');
 
 var ProCardSelectable = function ProCardSelectable(props) {
   var selected = props.selected,

package/lib/card/utils.js

@@ -8,7 +8,7 @@ exports.getColClassAndStyle = getColClassAndStyle;
 
 var _utils = require("@teamix/utils");
 
-var cls = (0, _utils.baseClass)('teamix-pro-card');
+var cls = (0, _utils.usePrefixCls)('teamix-pro-card');
 
 function formatSpacing(spacing) {
   var spacingArray = spacing instanceof Array ? spacing : [spacing || 0, spacing || 0];

package/lib/form/Components/Editable/index.js

@@ -73,7 +73,9 @@ Editable.BaseBuilder = function (type) {
         visible = _useState2[0],
         setVisible = _useState2[1];
 
-    var prefixCls = (0, _utils.usePrefixCls)('formily-editable');
+    var prefixCls = (0, _utils.usePrefixCls)('formily-editable', {
+      base: true
+    });
 
     var onOk = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
@@ -131,13 +133,13 @@ Editable.BaseBuilder = function (type) {
       },
       onClick: onOpen
     }, /*#__PURE__*/_react.default.createElement(_formily.BaseItem, {
-      className: "".concat(prefixCls, "-trigger")
+      className: prefixCls('trigger')
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: prefixCls('content')
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-preview")
+      className: prefixCls('preview')
     }, field.title), pattern === 'editable' && /*#__PURE__*/_react.default.createElement(_icon.default, {
-      className: "".concat(prefixCls, "-edit-btn"),
+      className: prefixCls('edit-btn'),
       type: "form-line",
       size: "small"
     })))), /*#__PURE__*/_react.default.createElement(type, _objectSpread(_objectSpread({
@@ -162,7 +164,9 @@ Editable.Popover = (0, _react2.observer)(function (_ref3) {
       visible = _useState4[0],
       setVisible = _useState4[1];
 
-  var prefixCls = (0, _utils.usePrefixCls)('formily-editable');
+  var prefixCls = (0, _utils.usePrefixCls)('formily-editable', {
+    base: true
+  });
 
   var closePopover = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
@@ -229,13 +233,13 @@ Editable.Popover = (0, _react2.observer)(function (_ref3) {
         display: 'inline-flex'
       }
     }, /*#__PURE__*/_react.default.createElement(_formily.BaseItem, {
-      className: "".concat(prefixCls, "-trigger")
+      className: prefixCls('trigger')
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: prefixCls('content')
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-preview")
+      className: prefixCls('preview')
     }, props.title || field.title), pattern === 'editable' && /*#__PURE__*/_react.default.createElement(_icon.default, {
-      className: "".concat(prefixCls, "-edit-btn"),
+      className: prefixCls('edit-btn'),
       type: "form-line",
       size: "small"
     }))))

package/lib/form/Components/FormGroup/index.js

@@ -62,23 +62,27 @@ var FormGroupGroupPanel = (0, _react2.observer)(function (_ref) {
       xIndex = _ref.xIndex,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var prefixCls = (0, _utils.usePrefixCls)('formily-group-panel');
+  var prefixCls = (0, _utils.usePrefixCls)('formily-group-panel', {
+    base: true
+  });
   return /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames.default)(prefixCls, props.className)
+    className: (0, _classnames.default)(prefixCls(), props.className)
   }), xIndex !== 0 ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-divider")
+    className: prefixCls('divider')
   }) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-title")
+    className: prefixCls('title')
   }, title), children);
 });
 var FormGroup = (0, _react2.observer)(function (_ref2) {
   var children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  var prefixCls = (0, _utils.usePrefixCls)('formily-group');
+  var prefixCls = (0, _utils.usePrefixCls)('formily-group', {
+    base: true
+  });
   var panels = usePanels();
   return /*#__PURE__*/_react.default.createElement("div", _objectSpread(_objectSpread({}, props), {}, {
-    className: (0, _classnames.default)(prefixCls, props.className)
+    className: (0, _classnames.default)(prefixCls(), props.className)
   }), panels.map(function (_ref3, index) {
     var props = _ref3.props,
         schema = _ref3.schema,

package/lib/form/Components/LightFilter/index.js

@@ -118,10 +118,10 @@ var LightFilter = (0, _react2.observer)(function (props) {
 
   var main = useMain(active);
   var currentSchema = (_main$ = main[0]) === null || _main$ === void 0 ? void 0 : _main$.schema;
-  var defaultCls = (0, _utils.usePrefixCls)();
-  var prefixCls = (0, _utils.usePrefixCls)('', {
-    prefix: 'teamix-pro-form-light-filter'
+  var basePrefix = (0, _utils.usePrefixCls)('', {
+    base: true
   });
+  var prefixCls = (0, _utils.usePrefixCls)('teamix-pro-form-light-filter');
   var content = main.map(function (_ref, key) {
     var schema = _ref.schema,
         name = _ref.name;
@@ -136,16 +136,19 @@ var LightFilter = (0, _react2.observer)(function (props) {
     onFilterChange && onFilterChange(value);
   }, [onFilterChange]);
   return /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(prefixCls, "".concat(defaultCls).concat(size), isInputCategory(currentSchema) ? "".concat(prefixCls, "-input-category") : '')
+    className: (0, _classnames.default)(basePrefix(size), prefixCls({
+      '': true,
+      'input-category': isInputCategory(currentSchema)
+    }))
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(prefixCls, "-main")
+    className: prefixCls('main')
   }, /*#__PURE__*/_react.default.createElement(_components.Select, _objectSpread(_objectSpread({}, filterProps), {}, {
-    className: (0, _classnames.default)("".concat(prefixCls, "-select"), filterProps === null || filterProps === void 0 ? void 0 : filterProps.className),
+    className: (0, _classnames.default)(prefixCls('select'), filterProps === null || filterProps === void 0 ? void 0 : filterProps.className),
     dataSource: filterItems,
     onChange: onSelectChange,
     value: active
   })), content), /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(prefixCls, "-addonAfter")
+    className: prefixCls('addonAfter')
   }, /*#__PURE__*/_react.default.createElement(_components.Button, _objectSpread({}, buttonProps), /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "search-line"
   }))));

package/lib/form/Components/Text/index.js

@@ -32,11 +32,9 @@ var Text = function Text(_ref) {
       className = _ref.className,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var prefixCls = (0, _utils.usePrefixCls)('', {
-    prefix: 'teamix-pro-form-text'
-  });
+  var prefixCls = (0, _utils.usePrefixCls)('teamix-pro-form-text');
   return /*#__PURE__*/_react.default.createElement("span", _objectSpread({
-    className: (0, _classnames.default)(prefixCls, className)
+    className: (0, _classnames.default)(prefixCls(), className)
   }, otherProps), children);
 };
 

package/lib/form/Filter/AdvancedFilter.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@teamix/utils");
 
 var _ProForm = _interopRequireDefault(require("../ProForm"));
@@ -62,9 +60,7 @@ var AdvancedFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
       forceClear = props.forceClear,
       otherProps = _objectWithoutProperties(props, _excluded);
 
-  var prefixCls = (0, _utils.usePrefixCls)('', {
-    prefix: 'teamix-pro-form-query-filter-advanced'
-  });
+  var prefixCls = (0, _utils.usePrefixCls)('teamix-pro-form-query-filter-advanced');
   var gridSchema = (0, _react.useMemo)(function () {
     return [{
       name: 'FormGrid',
@@ -117,7 +113,7 @@ var AdvancedFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
     };
   }, [layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
   return /*#__PURE__*/_react.default.createElement(_ProForm.default, _objectSpread(_objectSpread(_objectSpread({
-    className: (0, _classnames.default)(prefixCls, props.className),
+    className: (0, _utils.cls)(prefixCls(), props.className),
     schema: gridSchema,
     feedbackLayout: "popover"
   }, otherProps), getTeamixLayout), {}, {