doui-react 2.0.7 → 2.0.9

package/lib/table/component/display-column.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisplayColumn = DisplayColumn;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _api = require("../../api");
+var _button = require("../../button");
+var _checkbox = require("../../checkbox");
+var _2 = require("./..");
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+var _reactUse = require("react-use");
+var _style = _interopRequireDefault(require("../style"));
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["value", "onChange", "storageKey"];
+function useControllableState(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$storageKey = _ref.storageKey,
+    storageKey = _ref$storageKey === void 0 ? 'default' : _ref$storageKey,
+    defaultOptions = _ref.defaultOptions;
+  var finalStorageKey = "table-display-column-".concat(storageKey);
+  var _useLocalStorage = (0, _reactUse.useLocalStorage)(finalStorageKey, defaultOptions),
+    _useLocalStorage2 = (0, _slicedToArray2.default)(_useLocalStorage, 2),
+    internalValue = _useLocalStorage2[0],
+    setInternalValue = _useLocalStorage2[1];
+  var _useTableContext = (0, _2.useTableContext)(),
+    setContext = _useTableContext.setContext;
+  var finalValue = value !== null && value !== void 0 ? value : internalValue;
+  (0, _react.useEffect)(function () {
+    setContext({
+      displayColumnKeys: finalValue
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [finalValue]);
+  return {
+    value: finalValue,
+    onChange: onChange !== null && onChange !== void 0 ? onChange : setInternalValue
+  };
+}
+function useOptions() {
+  var _useTableContext2 = (0, _2.useTableContext)(),
+    columns = _useTableContext2.columns;
+  var options = _lodash.default.filter(columns, function (column) {
+    return column.title && !(0, _utils.isActionsColumn)(column);
+  }).map(function (column) {
+    return {
+      label: column.title,
+      value: column.dataIndex
+    };
+  });
+  return {
+    options: options,
+    defaultOptions: _lodash.default.map(options, 'value')
+  };
+}
+function Content(props) {
+  var _useOptions = useOptions(),
+    options = _useOptions.options,
+    defaultOptions = _useOptions.defaultOptions;
+  var _useControllableState = useControllableState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      defaultOptions: defaultOptions
+    })),
+    value = _useControllableState.value,
+    onChange = _useControllableState.onChange;
+  return (0, _jsxRuntime.jsx)(_checkbox.Checkbox, {
+    value: value,
+    onChange: onChange,
+    options: options,
+    sort: false,
+    css: _style.default.displayColumn
+  });
+}
+function DisplayColumn(_ref2) {
+  var value = _ref2.value,
+    onChange = _ref2.onChange,
+    storageKey = _ref2.storageKey,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return (0, _jsxRuntime.jsx)(_antd.Popover, {
+    placement: "bottomRight",
+    arrow: false,
+    trigger: "click",
+    forceRender: true,
+    getPopupContainer: _api.getPopupContainer,
+    content: (0, _jsxRuntime.jsx)(Content, {
+      value: value,
+      onChange: onChange,
+      storageKey: storageKey
+    }),
+    children: (0, _jsxRuntime.jsx)(_button.Button, (0, _objectSpread2.default)({
+      icon: (0, _jsxRuntime.jsx)(_icons.SettingOutlined, {})
+    }, props))
+  });
+}

package/lib/table/component/index.d.ts

@@ -1,7 +1,9 @@
 import { ActionButton } from './action-button';
+import { DisplayColumn } from './display-column';
 import { Table as InternalTable } from './table';
 type TableType = typeof InternalTable & {
     ActionButton: typeof ActionButton;
+    DisplayColumn: typeof DisplayColumn;
 };
 export declare const Table: TableType;
 export {};

package/lib/table/component/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Table = void 0;
 var _actionButton = require("./action-button");
+var _displayColumn = require("./display-column");
 var _table = require("./table");
 var Table = exports.Table = _table.Table;
-Table.ActionButton = _actionButton.ActionButton;
+Table.ActionButton = _actionButton.ActionButton;
+Table.DisplayColumn = _displayColumn.DisplayColumn;

package/lib/table/component/table.js

@@ -95,11 +95,51 @@ function useInit(_ref2) {
     value: dataSource,
     onChange: setDataSource
   });
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  (0, _react.useEffect)(function () {
-    return void refresh();
-  }, [data]);
+  var updateSelectedStatus = (0, _hooks.useMemoFn)(function (keys) {
+    var data = _lodash.default.map(dataSource, function (item) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        __selected__: (0, _api.includesNonStrictMode)(keys, item[rowKey])
+      });
+    });
+    setDataSource(data);
+  });
+  var refresh = (0, _hooks.useMemoFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+    var _ref4,
+      onlyLoading,
+      params,
+      _yield$Promise$all,
+      _yield$Promise$all2,
+      res,
+      _args2 = arguments;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _ref4 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, onlyLoading = _ref4.onlyLoading, params = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+          setLoading(true);
+          if (!onlyLoading) {
+            _context2.next = 4;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 4:
+          _context2.prev = 4;
+          _context2.next = 7;
+          return Promise.all([(0, _api.executeFunction)(data, params), getInitialContext(params)]);
+        case 7:
+          _yield$Promise$all = _context2.sent;
+          _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 1);
+          res = _yield$Promise$all2[0];
+          setDataSource(res || []);
+        case 11:
+          _context2.prev = 11;
+          setLoading(false);
+          return _context2.finish(11);
+        case 14:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[4,, 11, 14]]);
+  })));
   var context = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, contexts), {}, {
     refresh: refresh,
     dataSource: dataSource,
@@ -112,59 +152,14 @@ function useInit(_ref2) {
     },
     operation: operation,
     rowKey: rowKey,
+    columns: columns,
     editorValueKey: editorValueKey
   });
-  function updateSelectedStatus(keys) {
-    var data = _lodash.default.map(dataSource, function (item) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
-        __selected__: (0, _api.includesNonStrictMode)(keys, item[rowKey])
-      });
-    });
-    setDataSource(data);
-  }
-  function refresh() {
-    return _refresh.apply(this, arguments);
-  }
-  function _refresh() {
-    _refresh = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
-      var _ref3,
-        onlyLoading,
-        params,
-        _yield$Promise$all,
-        _yield$Promise$all2,
-        res,
-        _args2 = arguments;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _ref3 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, onlyLoading = _ref3.onlyLoading, params = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-            setLoading(true);
-            if (!onlyLoading) {
-              _context2.next = 4;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 4:
-            _context2.prev = 4;
-            _context2.next = 7;
-            return Promise.all([(0, _api.executeFunction)(data, params), getInitialContext(params)]);
-          case 7:
-            _yield$Promise$all = _context2.sent;
-            _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 1);
-            res = _yield$Promise$all2[0];
-            setDataSource(res || []);
-          case 11:
-            _context2.prev = 11;
-            setLoading(false);
-            return _context2.finish(11);
-          case 14:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2, null, [[4,, 11, 14]]);
-    }));
-    return _refresh.apply(this, arguments);
-  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useEffect)(function () {
+    return void refresh();
+  }, [data]);
   var rowSelection = (0, _utils.getRowSelection)({
     rowKey: rowKey,
     columns: columns,
@@ -184,11 +179,11 @@ function useInit(_ref2) {
     useFormWrapper: useFormWrapper
   };
 }
-function useTable(_ref4) {
-  var onRowClick = _ref4.onRowClick,
-    width = _ref4.width,
-    emptyText = _ref4.emptyText,
-    restProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+function useTable(_ref5) {
+  var onRowClick = _ref5.onRowClick,
+    width = _ref5.width,
+    emptyText = _ref5.emptyText,
+    restProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded3);
   var params = useInit(restProps);
   var _useSearchColumn = (0, _2.useSearchColumn)(),
     getSearchColumn = _useSearchColumn.getSearchColumn;
@@ -196,7 +191,8 @@ function useTable(_ref4) {
     columns: _lodash.default.reject(restProps.columns, {
       type: 'selection'
     }),
-    getSearchColumn: getSearchColumn
+    getSearchColumn: getSearchColumn,
+    context: params.context
   });
   return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
     onRow: function onRow(record) {

package/lib/table/component/utils.d.ts

@@ -1,5 +1,4 @@
 import { FormInstance, FormProps } from "../../form";
-import type { ColumnType } from 'antd/es/table';
 import type { TableRowSelection } from 'antd/es/table/interface';
 import { Column, DataSource, GetSearchColumn, TableContext, TableProps } from '../type';
 import { Actions } from './actions';
@@ -20,7 +19,8 @@ export declare const componentMap: {
     editor: typeof Editor;
     default: (props: any) => any;
 };
-export declare function generateColumns({ columns, getSearchColumn }: GenerateColumnsProps): ColumnType<any>[];
+export declare function isActionsColumn(column: Column): boolean;
+export declare function generateColumns({ columns, getSearchColumn, context }: GenerateColumnsProps): Column[];
 interface RowSelectionProps {
     rowKey: string;
     columns: Column[];

package/lib/table/component/utils.js

@@ -9,6 +9,7 @@ exports.generateColumns = generateColumns;
 exports.getRowSelection = getRowSelection;
 exports.getTableAndFormProps = getTableAndFormProps;
 exports.getTableFormInitialValues = getTableFormInitialValues;
+exports.isActionsColumn = isActionsColumn;
 exports.isUseFormWrapper = isUseFormWrapper;
 exports.updateDataSourceByFormValues = updateDataSourceByFormValues;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -40,9 +41,22 @@ var componentMap = exports.componentMap = {
     return props.children;
   }
 };
-function generateColumns(_ref) {
-  var columns = _ref.columns,
-    getSearchColumn = _ref.getSearchColumn;
+function isHiddenColumn(_ref) {
+  var context = _ref.context,
+    column = _ref.column;
+  var displayColumnKeys = _lodash.default.get(context, 'displayColumnKeys');
+  if (!displayColumnKeys || isActionsColumn(column)) {
+    return;
+  }
+  return !_lodash.default.includes(displayColumnKeys, column.dataIndex);
+}
+function isActionsColumn(column) {
+  return column.type === 'actions';
+}
+function generateColumns(_ref2) {
+  var columns = _ref2.columns,
+    getSearchColumn = _ref2.getSearchColumn,
+    context = _ref2.context;
   return _lodash.default.map(columns, function (column) {
     var newColumn = _lodash.default.clone(column);
     var dataIndex = newColumn.dataIndex,
@@ -68,7 +82,7 @@ function generateColumns(_ref) {
     if (!_lodash.default.isEmpty(filters)) {
       _lodash.default.assign(newColumn, (0, _filter.getFilterColumn)(newColumn));
     }
-    if (newColumn.type === 'actions') {
+    if (isActionsColumn(newColumn)) {
       var _newColumn$fixed;
       (_newColumn$fixed = newColumn.fixed) !== null && _newColumn$fixed !== void 0 ? _newColumn$fixed : newColumn.fixed = 'right';
     }
@@ -97,6 +111,10 @@ function generateColumns(_ref) {
     };
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, newColumn), {}, {
       dataIndex: (0, _utils.transformNameToPath)(dataIndex),
+      hidden: isHiddenColumn({
+        context: context,
+        column: newColumn
+      }),
       align: align,
       render: render
     });
@@ -123,10 +141,10 @@ function renderComponent(props) {
     children: (0, _jsxRuntime.jsx)(Component, (0, _objectSpread2.default)({}, props))
   }));
 }
-function getColumnWidth(_ref2) {
-  var width = _ref2.width,
-    minWidth = _ref2.minWidth,
-    maxWidth = _ref2.maxWidth;
+function getColumnWidth(_ref3) {
+  var width = _ref3.width,
+    minWidth = _ref3.minWidth,
+    maxWidth = _ref3.maxWidth;
   var style;
   if (_lodash.default.isNil(width)) {
     style = {
@@ -145,10 +163,10 @@ function getColumnWidth(_ref2) {
     }
   };
 }
-function getRowSelection(_ref3) {
-  var rowKey = _ref3.rowKey,
-    columns = _ref3.columns,
-    context = _ref3.context;
+function getRowSelection(_ref4) {
+  var rowKey = _ref4.rowKey,
+    columns = _ref4.columns,
+    context = _ref4.context;
   var column = _lodash.default.find(columns, {
     type: 'selection'
   });
@@ -209,10 +227,10 @@ function getTableAndFormProps(props) {
     tableProps: tableProps
   };
 }
-function isUseFormWrapper(_ref4) {
-  var columns = _ref4.columns,
-    context = _ref4.context,
-    form = _ref4.form;
+function isUseFormWrapper(_ref5) {
+  var columns = _ref5.columns,
+    context = _ref5.context,
+    form = _ref5.form;
   // 在 Form 中时，将 context 挂载给 formContext
   if (form) {
     _lodash.default.assign(form.getContext(), context);
@@ -222,10 +240,10 @@ function isUseFormWrapper(_ref4) {
     type: 'editor'
   });
 }
-function getTableFormInitialValues(_ref5) {
-  var rowKey = _ref5.rowKey,
-    columns = _ref5.columns,
-    dataSource = _ref5.dataSource;
+function getTableFormInitialValues(_ref6) {
+  var rowKey = _ref6.rowKey,
+    columns = _ref6.columns,
+    dataSource = _ref6.dataSource;
   var dataIndex = _lodash.default.map(columns, function (col) {
     return col.type === 'editor' && col.dataIndex;
   });

package/lib/table/style/index.d.ts

@@ -5,5 +5,6 @@ declare const style: {
     ellipsisText: (rows: number) => import("@emotion/react").SerializedStyles;
     editor: import("@emotion/react").SerializedStyles;
     divider: import("@emotion/react").SerializedStyles;
+    displayColumn: import("@emotion/react").SerializedStyles;
 };
 export default style;

package/lib/table/style/index.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _api = require("../../api");
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var style = {
   wrapper: function wrapper(maxHeight) {
     return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n\n    .ant-table-wrapper,\n    .ant-spin-nested-loading,\n    .ant-spin-container,\n    .ant-table,\n    .ant-table-container {\n      width: 100%;\n      max-height: 100%;\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n    }\n\n    .ant-table-content {\n      overflow: auto !important;\n      width: calc(100% + 1px); // \u4FEE\u590D\u7A7A\u6570\u636E\u65F6\uFF0C\u51FA\u73B0\u6EDA\u52A8\u6761\u7684 bug\n      max-height: ", ";\n    }\n\n    .ant-table-thead {\n      position: sticky;\n      top: 0;\n      z-index: 10;\n    }\n\n    .ant-table-pagination.ant-pagination {\n      margin-bottom: 0;\n    }\n  "])), (0, _api.transformValueWithStyleUnit)(maxHeight));
@@ -18,6 +18,7 @@ var style = {
     return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    -webkit-line-clamp: ", " !important;\n  "])), rows);
   },
   editor: (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 0;\n\n    .ant-form-item-label {\n      display: none !important;\n    }\n  "]))),
-  divider: (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n  "])))
+  divider: (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n  "]))),
+  displayColumn: (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    & {\n      flex-direction: column;\n      max-width: 200px;\n    }\n\n    .do-checkbox-all {\n      padding-bottom: 10px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .ant-checkbox-group {\n      flex-direction: column;\n      width: 100%;\n    }\n\n    .do-checkbox,\n    .do-box-label {\n      width: 100%;\n    }\n  "])))
 };
 var _default = exports.default = style;

package/lib/table/type/display-column.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "../../button";
+export interface DisplayColumnProps extends Omit<ButtonProps, 'onChange'> {
+    /**
+     * @description 缓存列时, 需要保证key唯一
+     */
+    storageKey?: string;
+    value?: string[];
+    onChange?: (keys: string[]) => void;
+}

package/lib/table/type/display-column.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/table/type/index.d.ts

@@ -6,6 +6,7 @@ import { TableProps as AntdTableProps } from 'antd';
 import { ReactNode } from 'react';
 export * from './action';
 export * from './column';
+export * from './display-column';
 export type DataSource = any[];
 export interface TableContext {
     /**
@@ -37,8 +38,13 @@ export interface TableContext {
      * @description 设置表格上下文
      */
     setContext(state: any): void;
+    /**
+     * @description 列配置
+     */
+    columns: Column[];
     rowKey: string;
     editorValueKey: string;
+    displayColumnKeys?: string[];
     [key: string]: any;
 }
 export interface RefreshProps {

package/lib/table/type/index.js

@@ -24,4 +24,15 @@ Object.keys(_column).forEach(function (key) {
       return _column[key];
     }
   });
+});
+var _displayColumn = require("./display-column");
+Object.keys(_displayColumn).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _displayColumn[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _displayColumn[key];
+    }
+  });
 });

package/lib/tabs/component/utils.d.ts

@@ -6,19 +6,19 @@ export declare function getRenderTabBar({ type, items, size, tabBarGutter, tabBa
 export declare function generateTabItems({ items }: TabsProps): {
     label: import("@emotion/react/jsx-runtime").JSX.Element;
     key: string;
-    children?: import("react").ReactNode;
+    prefixCls?: string | undefined;
+    disabled?: boolean | undefined;
     className?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    closable?: boolean | undefined;
-    prefixCls?: string | undefined;
-    closeIcon?: import("react").ReactNode;
+    children?: import("react").ReactNode;
     forceRender?: boolean | undefined;
     id?: string | undefined;
-    disabled?: boolean | undefined;
-    icon?: import("react").ReactNode;
-    active?: boolean | undefined;
     destroyInactiveTabPane?: boolean | undefined;
     animated?: boolean | undefined;
+    closable?: boolean | undefined;
+    closeIcon?: import("react").ReactNode;
+    icon?: import("react").ReactNode;
     tabKey?: string | undefined;
+    active?: boolean | undefined;
 }[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doui-react",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "A React UI library based on Ant Design",
   "license": "MIT",
   "main": "lib/index.js",