@teamix/pro 1.1.4 → 1.1.8

package/lib/nocode/configurators/common.js

@@ -14,46 +14,50 @@ function array(title, name, fields, main, arrayTitle) {
       name: name,
       title: arrayTitle,
       component: 'ArrayItems',
-      props: {
-        itemType: 'card'
-      },
-      items: [{
-        component: 'FormFlex',
+      items: {
+        type: 'object',
+        decorator: 'ArrayItems.Item',
         children: [{
-          component: 'ArrayItems.SortHandle'
+          component: 'FormFlex',
+          children: [{
+            component: 'ArrayItems.SortHandle'
+          }, {
+            component: 'ArrayItems.Index'
+          }]
         }, {
-          component: 'ArrayItems.Index'
-        }]
-      }, {
-        name: 'drawer',
-        component: 'Editable.Drawer',
-        type: 'void',
-        title: '编辑详情',
-        reactions: {
-          dependencies: [".drawer.layout.".concat(main ? main : fields[0].name)],
-          fulfill: {
-            schema: {
-              title: '{{$deps[0]}}'
+          name: 'drawer',
+          component: 'Editable.Drawer',
+          type: 'void',
+          title: '编辑详情',
+          reactions: {
+            dependencies: [".drawer.layout.".concat(main ? main : fields[0].name)],
+            fulfill: {
+              schema: {
+                title: '{{$deps[0]}}'
+              }
             }
-          }
-        },
-        children: [{
-          name: 'layout',
-          component: 'FormLayout',
-          props: {
-            layout: 'vertical',
-            labelAlign: 'left',
-            colon: false,
-            labelCol: 24,
-            wrapperCol: 24
           },
-          children: fields
+          children: [{
+            name: 'layout',
+            component: 'FormLayout',
+            props: {
+              layout: 'vertical',
+              labelAlign: 'left',
+              colon: false,
+              labelCol: 24,
+              wrapperCol: 24
+            },
+            children: fields
+          }]
+        }, {
+          component: 'ArrayItems.Remove'
         }]
-      }, {
-        component: 'ArrayItems.Remove'
-      }],
+      },
       children: [{
-        title: '添加一条'
+        component: 'ArrayItems.Addition',
+        props: {
+          title: '添加一条'
+        }
       }]
     }]
   };

package/lib/nocode/index.scss

@@ -17,13 +17,10 @@
     border: 1px solid var(--color-line1-1, #eaeaea);
 
     &-component {
+      position: relative;
       padding: 20px;
       flex-grow: 1;
       border-right: 1px solid var(--color-line1-1, #eaeaea);
-
-      &>.teamix-pro-page-container {
-        padding: 0;
-      }
     }
 
     &-configurator {

package/lib/page-header/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IActionButton } from '../actions';
+import { ProInfoProps } from '../info';
 import './index.scss';
 export interface BreadcrumbItem {
     link?: string;
@@ -35,8 +36,10 @@ export declare type PageHeaderProps = {
     breadcrumb?: BreadcrumbItem[];
     extra?: IActionButton[] | React.ReactNode;
     operation?: IActionButton[] | React.ReactNode;
+    maxActions?: number;
     tags?: TagItem[];
     data?: DataItem[];
+    info?: ProInfoProps | React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>;
 declare const PageHeader: React.FC<PageHeaderProps>;
 export default PageHeader;

package/lib/page-header/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactRouterDom = require("react-router-dom");
+
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
 var _icon = _interopRequireDefault(require("@teamix/icon"));
@@ -19,20 +21,22 @@ var _actions = require("../actions");
 
 var _skeleton = require("../skeleton");
 
+var _info = _interopRequireDefault(require("../info"));
+
 require("./index.scss");
 
-var _excluded = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "children", "className", "style"];
+var _excluded = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "maxActions", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 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; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 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; }
 
 var cls = (0, _utils.baseClass)('teamix-pro-page-header');
@@ -50,16 +54,22 @@ var renderNav = function renderNav(breadcrumbs) {
   return null;
 };
 
-var renderExtra = function renderExtra(helps) {
+var renderExtra = function renderExtra(helps, max) {
   if (!helps) {
     return null;
   }
 
   if (helps instanceof Array && helps.length) {
+    var actions = helps.map(function (item) {
+      return Object.assign({
+        type: 'normal'
+      }, item);
+    });
     return /*#__PURE__*/_react.default.createElement(_actions.ActionGroup, {
-      actions: helps,
+      actions: actions,
       type: "text",
-      divider: false
+      divider: false,
+      max: max
     });
   }
 
@@ -95,14 +105,15 @@ var isPresetColor = function isPresetColor(color) {
   return PRESET_COLOR_REG.test(color);
 };
 
-var renderOperations = function renderOperations(operations) {
+var renderOperations = function renderOperations(operations, max) {
   if (!operations) {
     return null;
   }
 
   if (operations instanceof Array && operations.length) {
     return /*#__PURE__*/_react.default.createElement(_actions.ActionGroup, {
-      actions: operations
+      actions: operations,
+      max: max
     });
   }
 
@@ -149,6 +160,18 @@ var renderData = function renderData(data) {
   }));
 };
 
+var renderInfo = function renderInfo(info) {
+  // @ts-ignore
+  if (info === null || info === void 0 ? void 0 : info.columns) {
+    // @ts-ignore
+    return /*#__PURE__*/_react.default.createElement(_info.default, _objectSpread({
+      type: "header"
+    }, info));
+  }
+
+  return info;
+};
+
 var PageHeader = function PageHeader(props) {
   var title = props.title,
       description = props.description,
@@ -157,6 +180,8 @@ var PageHeader = function PageHeader(props) {
       _props$iconBackground = props.iconBackgroundType,
       iconBackgroundType = _props$iconBackground === void 0 ? 'square' : _props$iconBackground,
       iconBackgroundColor = props.iconBackgroundColor,
+      _props$maxActions = props.maxActions,
+      maxActions = _props$maxActions === void 0 ? 4 : _props$maxActions,
       goback = props.goback,
       operation = props.operation,
       extra = props.extra,
@@ -165,11 +190,13 @@ var PageHeader = function PageHeader(props) {
       breadcrumb = props.breadcrumb,
       tags = props.tags,
       data = props.data,
+      info = props.info,
       children = props.children,
       className = props.className,
       style = props.style,
       others = _objectWithoutProperties(props, _excluded);
 
+  var history = (0, _reactRouterDom.useHistory)();
   var backgroundImage = image ? "url('".concat(image, "')") : undefined;
 
   var showList = function showList(list) {
@@ -189,7 +216,7 @@ var PageHeader = function PageHeader(props) {
       if (goback === true) {
         history.go(-1);
       } else if (typeof goback === 'string') {
-        location.href = goback;
+        history.push && history.push(goback);
       }
     };
 
@@ -217,7 +244,7 @@ var PageHeader = function PageHeader(props) {
     className: cls('nav')
   }, loading && /*#__PURE__*/_react.default.createElement(_skeleton.BaseSkeleton.Header.Nav, null), !loading && renderNav(breadcrumb)), /*#__PURE__*/_react.default.createElement("section", {
     className: cls('extra')
-  }, !loading && renderExtra(extra))), (goback || icon || title !== undefined || description !== undefined || data || tags || operation) && /*#__PURE__*/_react.default.createElement("section", {
+  }, !loading && renderExtra(extra, maxActions))), (goback || icon || title !== undefined || description !== undefined || data || tags || operation) && /*#__PURE__*/_react.default.createElement("section", {
     className: (0, _classnames2.default)(cls('section'), {
       'with-description': description
     })
@@ -233,7 +260,9 @@ var PageHeader = function PageHeader(props) {
     className: cls('data')
   }, renderData(data)), /*#__PURE__*/_react.default.createElement("section", {
     className: cls('operation')
-  }, !loading && renderOperations(operation)))), children);
+  }, !loading && renderOperations(operation, maxActions)))), info && !loading && /*#__PURE__*/_react.default.createElement("section", {
+    className: (0, _classnames2.default)(cls('section'), cls('info'))
+  }, renderInfo(info)), children);
 };
 
 var _default = PageHeader;

package/lib/page-header/index.scss

@@ -20,6 +20,10 @@ $prefix: 'teamix-pro-page-header';
     }
   }
 
+  .#{$prefix}-info {
+    padding-top: var(--s-2, 8px);
+  }
+
   .#{$prefix}-title {
     display: flex;
     font-size: var(--font-size-display-1, 24px);
@@ -130,7 +134,7 @@ $prefix: 'teamix-pro-page-header';
       color: var(--color-help-5);
     }
   }
-  
+
   .#{$prefix}-bg-color {
     &-blue {
       background-color: var(--color-notice-5);
@@ -148,7 +152,7 @@ $prefix: 'teamix-pro-page-header';
       background-color: var(--color-help-5);
     }
   }
-  
+
   .#{$prefix}-bg-type {
     &-circle {
       border-radius: 100%;
@@ -157,8 +161,6 @@ $prefix: 'teamix-pro-page-header';
       border-radius: 4px;
     }
   }
-
-  
 }
 
 .#{$prefix}-link {

package/lib/table/components/Filter/index.js

@@ -51,7 +51,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var CheckboxItem = _components.Menu.CheckboxItem;
 var cls = (0, _utils.baseClass)('teamix-pro-table-toolbar-filter');
-var RadioGroup = _components.Radio.Group;
+var RadioItem = _components.Menu.RadioItem;
 
 var Filter = function Filter(props) {
   var column = props.column,
@@ -105,27 +105,19 @@ var Filter = function Filter(props) {
   }, []); // 渲染单选
 
   var renderSingle = function renderSingle() {
-    var _selected$;
-
-    return /*#__PURE__*/_react.default.createElement(RadioGroup, {
-      value: (_selected$ = selected === null || selected === void 0 ? void 0 : selected[0]) !== null && _selected$ !== void 0 ? _selected$ : '',
-      onChange: function onChange(check) {
-        setSelected([check]);
-      }
-    }, filters === null || filters === void 0 ? void 0 : filters.map(function (_ref3) {
+    return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref3) {
       var label = _ref3.label,
           value = _ref3.value;
       var valueStr = value.toString();
-      return /*#__PURE__*/_react.default.createElement(_components.Radio, {
+      return /*#__PURE__*/_react.default.createElement(RadioItem, {
         id: valueStr,
-        value: valueStr,
+        checked: selected.includes(valueStr),
         key: valueStr,
-        style: {
-          display: 'block',
-          marginLeft: '5px'
+        onChange: function onChange(check) {
+          setSelected([valueStr]);
         }
       }, label);
-    }));
+    });
   }; // 渲染多选
 
 

package/lib/table/components/Layout/index.js

@@ -58,6 +58,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-table-layout');
+var toJS = _form.formilyReactive.toJS;
 
 var Layout = function Layout(props) {
   var header = props.header,
@@ -137,7 +138,7 @@ var Layout = function Layout(props) {
   var renderFilterBtn = function renderFilterBtn() {
     var handleBtnClick = function handleBtnClick() {
       setExpand(!expand);
-      var filterValues = Object.values((0, _form.toJS)(dataFilterForm === null || dataFilterForm === void 0 ? void 0 : dataFilterForm.values)).filter(function (v) {
+      var filterValues = Object.values(toJS(dataFilterForm === null || dataFilterForm === void 0 ? void 0 : dataFilterForm.values)).filter(function (v) {
         return !(0, _lodash.default)(v);
       }); // console.log('filterValues', filterValues);
 

package/lib/table/components/Layout/index.scss

@@ -34,6 +34,6 @@ $prefix: 'teamix-pro-table-layout';
   &-panel-filter {
     margin: 8px 0;
     padding: 16px;
-    background: var(--panel-filter-bg, #fff);
+    background: var(--panel-filter-bg, var(--color-fill1-2));
   }
 }

package/lib/table/components/ToolBar/FilterColumnIcon.js

@@ -43,8 +43,9 @@ 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; }
 
-var CheckboxItem = _components.Menu.CheckboxItem; // const { Tooltip } = Balloon;
-
+var CheckboxItem = _components.Menu.CheckboxItem;
+var Row = _components.Grid.Row,
+    Col = _components.Grid.Col;
 var cls = (0, _utils.baseClass)('teamix-pro-table-toolbar-filter-column');
 
 var processColumns = function processColumns(columns) {
@@ -144,6 +145,13 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
       return item;
     });
     notifyTableRender(keyNewColumns);
+  }; // 修改：dialog
+
+
+  var onChangeColumnsForDialog = function onChangeColumnsForDialog() {
+    var keyNewColumns = (0, _utils2.cloneDeep)(newColumns);
+    notifyTableRender(keyNewColumns);
+    setDropdownVisible(false);
   }; // 向上
 
 
@@ -283,20 +291,71 @@ var FilterColumnIcon = function FilterColumnIcon(props) {
     })))));
   };
 
-  return renderDropdown(); // <Tooltip
-  //   trigger={renderDropdown()}
-  //   align={fullscreen ? 'b' : 't'}
-  //   popupProps={{
-  //     offset: fullscreen ? [5, 20] : [5, -18],
-  //     animation: { in: 'fadeIn', out: 'fadeOut' },
-  //     visible: tooltipVisible && !dropdownVisible,
-  //     onVisibleChange: (state) => {
-  //       setTooltipVisible(state);
-  //     },
-  //   }}
-  // >
-  //   {getMessage('customColumnSetting')}
-  // </Tooltip>
+  var renderDialog = function renderDialog() {
+    // 对话框关闭
+    var dialogOnClose = function dialogOnClose() {
+      setDropdownVisible(false);
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_components.Button, {
+      iconSize: "small",
+      className: "teamix-pro-table-toolbar-icon",
+      onClick: function onClick() {
+        setDropdownVisible(!dropdownVisible);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      size: "small",
+      type: "set-line"
+    })), /*#__PURE__*/_react.default.createElement(_components.Dialog, {
+      title: (0, _utils.getMessage)('customColumnSetting'),
+      visible: dropdownVisible,
+      onOk: onChangeColumnsForDialog,
+      onCancel: dialogOnClose,
+      onClose: dialogOnClose,
+      style: {
+        width: '440px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(Row, {
+      gutter: 20,
+      wrap: true,
+      className: cls('row')
+    }, newColumns.map(function (item, index) {
+      var _newColumns$find2;
+
+      var dataIndex = item.dataIndex,
+          title = item.title,
+          columnFiltersDisabled = item.columnFiltersDisabled;
+      return /*#__PURE__*/_react.default.createElement(Col, {
+        span: 8,
+        key: index,
+        className: cls('col')
+      }, /*#__PURE__*/_react.default.createElement(_components.Checkbox, {
+        checked: (_newColumns$find2 = newColumns.find(function (_ref5) {
+          var key = _ref5.dataIndex;
+          return key === dataIndex;
+        })) === null || _newColumns$find2 === void 0 ? void 0 : _newColumns$find2.columnFilters,
+        onChange: function onChange(check) {
+          var columnsList = (0, _utils2.cloneDeep)(newColumns).map(function (item) {
+            if (item.dataIndex === dataIndex) {
+              item.columnFilters = check;
+            }
+
+            return item;
+          });
+          setNewColumns(columnsList);
+        },
+        disabled: columnFiltersDisabled
+      }, /*#__PURE__*/_react.default.createElement(_utils.Ellipsis, {
+        tooltip: false
+      }, title)));
+    }))));
+  };
+
+  if (newColumns.length > 10) {
+    return renderDialog();
+  }
+
+  return renderDropdown();
 };
 
 var _default = FilterColumnIcon;

package/lib/table/components/ToolBar/index.scss

@@ -66,8 +66,18 @@
       }
     }
   }
+
+  
+}
+.teamix-pro-table-toolbar-filter-column-col {
+  height: 28px;
+  .next-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+  }
 }
 
+
 // fullscreen
 .teamix-pro-table-full-screen {
   width: 100vw;

package/lib/table/index.d.ts

@@ -2,6 +2,5 @@ import { ProTableProps } from './typing';
 import './index.scss';
 export * from './typing';
 export * from '../actions';
-export { default as ActionButton } from '../actions';
 declare const ProTable: (props: ProTableProps) => JSX.Element;
 export default ProTable;