@qn-pandora/pandora-component 4.1.6 → 4.2.0

package/CHANGELOG.json

@@ -1,6 +1,26 @@
 {
   "name": "@qn-pandora/pandora-component",
   "entries": [
+    {
+      "version": "4.2.0",
+      "tag": "@qn-pandora/pandora-component_v4.2.0",
+      "date": "Mon, 25 Sep 2023 06:36:41 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "2023-09-25发包"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@qn-pandora/pandora-component-icons\" from `^3.1.6` to `^3.2.0`"
+          },
+          {
+            "comment": "Updating dependency \"@qn-pandora/app-sdk\" from `^3.1.6` to `^3.2.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "4.1.6",
       "tag": "@qn-pandora/pandora-component_v4.1.6",

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @qn-pandora/pandora-component
 
-This log was last generated on Fri, 25 Aug 2023 10:29:46 GMT and should not be manually modified.
+This log was last generated on Mon, 25 Sep 2023 06:36:41 GMT and should not be manually modified.
+
+## 4.2.0
+Mon, 25 Sep 2023 06:36:41 GMT
+
+### Minor changes
+
+- 2023-09-25发包
 
 ## 4.1.6
 Fri, 25 Aug 2023 10:29:46 GMT

package/es/components/Collapse/index.js

@@ -36,15 +36,16 @@ export var ECollapseType;
 export function Collapse(props) {
     var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? ECollapseType.Simple : _a, expandIconPosition = props.expandIconPosition, onDelete = props.onDelete, others = __rest(props, ["children", "className", "type", "expandIconPosition", "onDelete"]);
     var position = useMemo(function () {
-        return type === ECollapseType.Primary && !expandIconPosition
+        return type === ECollapseType.Primary && !expandIconPosition && !onDelete
             ? 'right'
             : expandIconPosition || 'left';
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [expandIconPosition, type]);
     var showArrow = useMemo(function () {
         return type !== ECollapseType.Dashed;
     }, [type]);
     var getExtra = useCallback(function (index) {
-        if (type === ECollapseType.Dashed) {
+        if (type === ECollapseType.Dashed || onDelete) {
             return (React.createElement(DeleteOutlined, { onClick: function () {
                     if (onDelete) {
                         onDelete(index);

package/es/components/Collapse/style.css

@@ -184,6 +184,7 @@
   border-bottom-width: 0px;
   background-color: #fafafa;
   font-weight: 500;
+  position: relative;
 }
 .pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-header .pandora-sdk-header-line {
   width: 2px;

package/es/components/Collapse/style.less

@@ -31,6 +31,7 @@
     border-bottom-width: 0px;
     background-color: @table-thead-bg;
     font-weight: 500;
+    position: relative;
     .@{sdk-prefix}-header-line {
       width: 2px;
       height: 16px;

package/es/components/Descriptions/style.css

@@ -328,4 +328,5 @@
 }
 .pandora-sdk-descriptions .ant-descriptions-item-content {
   color: #333;
+  overflow: hidden;
 }

package/es/components/Descriptions/style.less

@@ -11,5 +11,6 @@
 
   .@{ant-prefix}-descriptions-item-content {
     color: @font-color-7;
+    overflow: hidden;
   }
 }

package/es/components/Drawer/index.d.ts

@@ -57,22 +57,33 @@ export declare type IDrawerProps = Overwrite<DrawerProps, {
      * 是否允许拖拽
      */
     canDrag?: boolean;
+    /**
+     * 关闭按钮显示的位置，默认left
+     */
     closeIconPlacement?: 'left' | 'right';
     /**
      * 无遮罩时点击空白处中的哪些元素不关闭
      */
     nonCloseSelector?: string;
     size?: 'small' | 'default' | 'large';
+    /**
+     * 是否显示全屏按钮
+     */
+    showFullScreen?: boolean;
+    onScreenFullChange?: (showFullScreen: boolean) => void;
 }>;
 export declare class Drawer extends React.Component<React.PropsWithChildren<IDrawerProps>, any> {
     drawerId: string;
     isResizing: boolean;
     realWidth: React.ReactText;
+    isFullscreen: boolean;
     throttleMouseMove: import("lodash").DebouncedFunc<(e: any) => void>;
     get closable(): boolean | undefined;
-    get extra(): {} | null | undefined;
+    get extra(): JSX.Element;
     setIsResizing(isResizing?: boolean): void;
     setRealWidth(realWidth: string | number): void;
+    setIsFullscreen(isFullscreen: boolean): void;
+    handleFull(): void;
     onMouseDown(): void;
     onMouseUp(): void;
     onMouseMove(e: any): void;
@@ -136,12 +147,20 @@ declare const _default: (props: {
      * 是否允许拖拽
      */
     canDrag?: boolean | undefined;
+    /**
+     * 关闭按钮显示的位置，默认left
+     */
     closeIconPlacement?: import("antd/es/collapse/Collapse").ExpandIconPosition;
     /**
      * 无遮罩时点击空白处中的哪些元素不关闭
      */
     nonCloseSelector?: string | undefined;
     size?: "small" | "default" | "large" | undefined;
+    /**
+     * 是否显示全屏按钮
+     */
+    showFullScreen?: boolean | undefined;
+    onScreenFullChange?: ((showFullScreen: boolean) => void) | undefined;
 } & Pick<DrawerProps, "style" | "autoFocus" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
     children?: React.ReactNode;
 } & {

package/es/components/Drawer/index.js

@@ -48,14 +48,16 @@ import { throttle } from 'lodash';
 import { observer } from 'mobx-react';
 import { observable, action, computed } from 'mobx';
 import { Drawer as BaseDrawer } from 'antd';
+import screenfull from 'screenfull';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@qn-pandora/pandora-component-icons';
 import { doesDOMMatchSelector } from '../../utils/dom';
 import { SDK_PREFIX, ANT_PREFIX } from '../../constants/style';
 import modalPopupContainerWrapper from '../../hoc/modalPopupContainer';
 import bind from '../../utils/bind';
 import CloseIcon from './CloseIcon';
-var DEFAULT_WIDTH = 640;
-var SMALL_WIDTH = 480;
-var LARGE_WIDTH = 960;
+var DEFAULT_WIDTH = '50%';
+var SMALL_WIDTH = '38%';
+var LARGE_WIDTH = '75%';
 var MAX_WIDTH = 6000;
 var MIN_WIDTH = 300;
 var Drawer = /** @class */ (function (_super) {
@@ -65,6 +67,7 @@ var Drawer = /** @class */ (function (_super) {
         _this.drawerId = "drawer-id-" + Math.floor(Math.random() * 10000);
         _this.isResizing = false;
         _this.realWidth = _this.initWidth(_this.props.width, _this.props.size);
+        _this.isFullscreen = false;
         _this.throttleMouseMove = throttle(function (e) { return _this.onMouseMove(e); }, 100);
         return _this;
     }
@@ -82,13 +85,17 @@ var Drawer = /** @class */ (function (_super) {
     });
     Object.defineProperty(Drawer.prototype, "extra", {
         get: function () {
-            var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, onClose = _a.onClose;
+            var _a = this.props, closable = _a.closable, closeIconPlacement = _a.closeIconPlacement, onClose = _a.onClose, showFullScreen = _a.showFullScreen;
+            var fullIcon = showFullScreen === true ? (this.isFullscreen ? (React.createElement(FullscreenExitOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" })) : (React.createElement(FullscreenOutlined, { onClick: this.handleFull, className: SDK_PREFIX + "-drawer-header-full-icon" }))) : null;
             if (closable !== false && closeIconPlacement === 'right') {
                 return (React.createElement(React.Fragment, null,
                     this.props.extra,
+                    fullIcon,
                     React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: onClose })));
             }
-            return this.props.extra;
+            return (React.createElement(React.Fragment, null,
+                fullIcon,
+                this.props.extra));
         },
         enumerable: true,
         configurable: true
@@ -100,6 +107,17 @@ var Drawer = /** @class */ (function (_super) {
     Drawer.prototype.setRealWidth = function (realWidth) {
         this.realWidth = realWidth;
     };
+    Drawer.prototype.setIsFullscreen = function (isFullscreen) {
+        this.isFullscreen = isFullscreen;
+    };
+    Drawer.prototype.handleFull = function () {
+        var draw = document.querySelector("." + this.drawerId);
+        if (!screenfull || !draw) {
+            return;
+        }
+        this.setIsFullscreen(!this.isFullscreen);
+        screenfull.toggle(draw);
+    };
     Drawer.prototype.onMouseDown = function () {
         this.setIsResizing(true);
     };
@@ -119,6 +137,8 @@ var Drawer = /** @class */ (function (_super) {
     };
     Drawer.prototype.onMouseClick = function (e) {
         var _a = this.props, mask = _a.mask, maskClosable = _a.maskClosable, nonCloseSelector = _a.nonCloseSelector, onClose = _a.onClose, visible = _a.visible;
+        if (this.isResizing)
+            return;
         if (mask === false && maskClosable && visible) {
             var currentEl = e.target;
             var shouldClose = true;
@@ -152,11 +172,21 @@ var Drawer = /** @class */ (function (_super) {
         return DEFAULT_WIDTH;
     };
     Drawer.prototype.componentDidMount = function () {
+        document.body.addEventListener('mousedown', this.onMouseClick);
+        var onScreenFullChange = this.props.onScreenFullChange;
+        if (this.props.showFullScreen) {
+            if (screenfull && onScreenFullChange) {
+                screenfull.on('change', function () {
+                    if (screenfull) {
+                        onScreenFullChange(screenfull.isFullscreen);
+                    }
+                });
+            }
+        }
         if (this.props.canDrag) {
             document.addEventListener('mousemove', this.throttleMouseMove);
             document.addEventListener('mouseup', this.onMouseUp);
         }
-        document.body.addEventListener('click', this.onMouseClick);
     };
     Drawer.prototype.UNSAFE_componentWillUpdate = function (nextProps) {
         if (nextProps.canDrag && !this.props.canDrag) {
@@ -174,9 +204,6 @@ var Drawer = /** @class */ (function (_super) {
         var _b = this.props, width = _b.width, className = _b.className, children = _b.children, canDrag = _b.canDrag, visible = _b.visible, closable = _b.closable, extra = _b.extra, size = _b.size, onClose = _b.onClose, other = __rest(_b, ["width", "className", "children", "canDrag", "visible", "closable", "extra", "size", "onClose"]);
         return (React.createElement(BaseDrawer, __assign({ className: classnames(this.drawerId, SDK_PREFIX + "-drawer", className, (_a = {},
                 _a[SDK_PREFIX + "-drawer-no-mask"] = this.props.mask === false,
-                _a[SDK_PREFIX + "-drawer-size-small"] = size === 'small',
-                _a[SDK_PREFIX + "-drawer-size-default"] = size === 'default',
-                _a[SDK_PREFIX + "-drawer-size-large"] = size === 'large',
                 _a)), width: this.realWidth || 800, zIndex: 1200, visible: visible, closable: this.closable, extra: this.extra, closeIcon: React.createElement(CloseIcon, { className: SDK_PREFIX + "-drawer-close-icon", onClick: onClose }), onClose: onClose }, other),
             canDrag && (React.createElement("div", { className: SDK_PREFIX + "-scroll-handler", onMouseDown: this.onMouseDown })),
             children));
@@ -189,6 +216,10 @@ var Drawer = /** @class */ (function (_super) {
         observable,
         __metadata("design:type", Object)
     ], Drawer.prototype, "realWidth", void 0);
+    __decorate([
+        observable,
+        __metadata("design:type", Boolean)
+    ], Drawer.prototype, "isFullscreen", void 0);
     __decorate([
         computed,
         __metadata("design:type", Object),
@@ -213,6 +244,19 @@ var Drawer = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Drawer.prototype, "setRealWidth", null);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Boolean]),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "setIsFullscreen", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Drawer.prototype, "handleFull", null);
     __decorate([
         bind,
         __metadata("design:type", Function),

package/es/components/Drawer/style.css

@@ -263,6 +263,9 @@
   height: 60px;
   line-height: 60px;
 }
+.pandora-sdk-drawer .ant-drawer-header-title {
+  overflow: hidden;
+}
 .pandora-sdk-drawer-size-small {
   max-width: 38%;
 }
@@ -288,3 +291,8 @@
 .pandora-sdk-drawer-close-icon {
   margin-left: 24px;
 }
+.pandora-sdk-drawer-header-full-icon {
+  margin-left: 24px;
+  color: #333;
+  font-size: 14px;
+}

package/es/components/Drawer/style.less

@@ -14,6 +14,9 @@
     height: 60px;
     line-height: 60px;
   }
+  .@{ant-prefix}-drawer-header-title {
+    overflow: hidden;
+  }
 }
 
 .@{sdk-prefix}-drawer-size-small {
@@ -46,3 +49,9 @@
 .@{sdk-prefix}-drawer-close-icon {
   margin-left: 24px;
 }
+
+.@{sdk-prefix}-drawer-header-full-icon {
+  margin-left: 24px;
+  color: @font-color-7;
+  font-size: 14px;
+}

package/es/components/RadioGroup/style.css

@@ -377,12 +377,19 @@ span.ant-radio + * {
 .ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper-disabled:first-child {
   border-right-color: #e5e5e5;
 }
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked)::before {
+  background-color: #bfbfbf;
+}
 .pandora-sdk-solid-radio-group .ant-radio-button-wrapper {
   padding: 0 12px;
 }
 .pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked) {
   border-color: #bfbfbf;
 }
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:focus-within {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
 .pandora-sdk-solid-radio-group .ant-radio:not(.pandora-sdk-solid-radio-group .ant-radio-checked) .ant-radio-inner {
   border-color: #bfbfbf;
 }

package/es/components/RadioGroup/style.less

@@ -2,11 +2,20 @@
 @import '../../style/theme.less';
 
 .@{sdk-prefix}-solid-radio-group {
+  .@{ant-prefix}-radio-button-wrapper:not(.@{sdk-prefix}-solid-radio-group
+      .@{ant-prefix}-radio-button-wrapper-checked) {
+    &::before {
+      background-color: @border-color-2;
+    }
+  }
   .@{ant-prefix}-radio-button-wrapper {
     padding: 0 12px;
     &:not(&-checked) {
       border-color: @input-border-color;
     }
+    &:focus-within {
+      box-shadow: unset;
+    }
   }
 
   .@{ant-prefix}-radio {

package/es/components/Table/ColumnSetting/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const All = "_all";
+export interface IOption {
+    label: string | React.ReactNode;
+    value: string;
+}
+export interface ISettingBtnProps {
+    overlayClass?: string;
+    onHiddenKeysChange?: (value: string[]) => void;
+    hiddenKeys?: string[];
+    options?: IOption[];
+    loading?: boolean;
+}
+export declare function ColumnSetting(props: ISettingBtnProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ColumnSetting>;
+export default _default;

package/es/components/Table/ColumnSetting/index.js

@@ -0,0 +1,91 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+import React, { useMemo, useCallback, useState, useContext } from 'react';
+import classnames from 'classnames';
+import { includes } from 'lodash';
+import { Popover, Checkbox, Spin } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { ConfigContext } from 'antd/es/config-provider';
+import { formatString } from '../../../utils/language';
+import { TableLocale } from '../../../constants/language/table/type';
+import { SDK_PREFIX } from '../../../constants/style';
+import NameLimiter from '../../NameLimiter';
+import Input from '../../Input';
+export var All = '_all';
+export function ColumnSetting(props) {
+    var overlayClass = props.overlayClass, _a = props.hiddenKeys, hiddenKeys = _a === void 0 ? [] : _a, onHiddenKeysChange = props.onHiddenKeysChange, _b = props.options, options = _b === void 0 ? [] : _b, loading = props.loading;
+    var locale = useContext(ConfigContext).locale;
+    var _c = __read(useState(''), 2), prefix = _c[0], setPrefix = _c[1];
+    var allKeys = useMemo(function () {
+        return options.map(function (item) { return item.value; });
+    }, [options]);
+    var realOptions = useMemo(function () {
+        if (!prefix || prefix.length === 0)
+            return options;
+        return options.filter(function (item) {
+            if (typeof item.label === 'string' &&
+                item.label.toLowerCase().indexOf(prefix.toLowerCase()) !== -1) {
+                return true;
+            }
+            return false;
+        });
+    }, [prefix, options]);
+    var realValues = useMemo(function () {
+        return allKeys.filter(function (item) { return !includes(hiddenKeys, item); });
+    }, [hiddenKeys, allKeys]);
+    var allCheckChange = useCallback(function (e) {
+        if (e.target.checked) {
+            onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange([]);
+            return;
+        }
+        onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys);
+    }, [onHiddenKeysChange, allKeys]);
+    var handlePrefixChange = useCallback(function (value) {
+        setPrefix(value || '');
+    }, [setPrefix]);
+    var handleChange = useCallback(function (e) {
+        var v = e.target.value;
+        var checked = e.target.checked;
+        // 添加
+        if (checked) {
+            var checkedValues_1 = Array.from(new Set(__spread(realValues, [v])));
+            onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys.filter(function (item) { return !includes(checkedValues_1, item); }));
+            return;
+        }
+        // 删除
+        var restValues = realValues.filter(function (item) { return item !== v; });
+        onHiddenKeysChange === null || onHiddenKeysChange === void 0 ? void 0 : onHiddenKeysChange(allKeys.filter(function (item) { return !includes(restValues, item); }));
+    }, [onHiddenKeysChange, realValues, allKeys]);
+    return (React.createElement(Popover, { trigger: "click", placement: "bottomRight", content: React.createElement(Spin, { spinning: !!loading },
+            React.createElement("div", { className: classnames(SDK_PREFIX + "-table-column-setting-popover", overlayClass) },
+                React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-header" },
+                    React.createElement(Checkbox, { value: All, checked: hiddenKeys.length === 0, onChange: allCheckChange, className: SDK_PREFIX + "-table-column-setting-all-check" }, formatString(TableLocale.check_all, locale)),
+                    React.createElement(Input, { value: prefix, allowClear: true, onChange: handlePrefixChange, placeholder: formatString(TableLocale.search, locale), className: SDK_PREFIX + "-table-column-setting-search-input" })),
+                React.createElement("div", null,
+                    React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-content" }, realOptions.map(function (item) {
+                        return (React.createElement("div", { key: item.value },
+                            React.createElement("div", { className: SDK_PREFIX + "-table-column-setting-checkbox-container" },
+                                React.createElement(Checkbox, { checked: !!realValues.find(function (v) { return v === item.value; }), value: item.value, className: SDK_PREFIX + "-table-column-setting-checkbox", onChange: handleChange },
+                                    React.createElement("span", { className: SDK_PREFIX + "-table-column-setting-value" }, typeof item.label === 'string' ? (React.createElement(NameLimiter, { name: item.label })) : (item.label))))));
+                    }))))) },
+        React.createElement(SettingOutlined, { className: SDK_PREFIX + "-table-column-setting-icon" })));
+}
+export default React.memo(ColumnSetting);

package/es/components/Table/ColumnSetting/style.css

@@ -0,0 +1,47 @@
+.pandora-sdk-table-column-setting-popover {
+  padding: 10px;
+  width: 100%;
+  width: 600px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header {
+  border-bottom: 1px solid #e5e5e5;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-bottom: 10px;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-all-check {
+  line-height: 32px;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-search-input {
+  width: 200px;
+}
+.pandora-sdk-table-column-setting-icon {
+  color: #333;
+}
+.pandora-sdk-table-column-setting-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.pandora-sdk-table-column-setting-content > div {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 33.33%;
+          flex: 0 0 33.33%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox {
+  width: 100%;
+  overflow: hidden;
+}
+.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox > span:nth-child(2) {
+  overflow: hidden;
+}

package/es/components/Table/ColumnSetting/style.less

@@ -0,0 +1,46 @@
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-table-column-setting-popover {
+  padding: 10px;
+  width: 100%;
+  width: 600px;
+  .@{sdk-prefix}-table-column-setting-header {
+    border-bottom: 1px solid @border-color-base;
+    display: flex;
+    padding-bottom: 10px;
+    .@{sdk-prefix}-table-column-setting-all-check {
+      line-height: 32px;
+    }
+    .@{sdk-prefix}-table-column-setting-search-input {
+      width: 200px;
+    }
+  }
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.@{sdk-prefix}-table-column-setting-icon {
+  color: @font-color-7;
+}
+
+.@{sdk-prefix}-table-column-setting-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.@{sdk-prefix}-table-column-setting-content > div {
+  flex: 0 0 33.33%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  .@{sdk-prefix}-table-column-setting-checkbox-container {
+    .@{sdk-prefix}-table-column-setting-checkbox {
+      width: 100%;
+      overflow: hidden;
+    }
+    .@{sdk-prefix}-table-column-setting-checkbox > span:nth-child(2) {
+      overflow: hidden;
+    }
+  }
+}

package/es/components/Table/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { TableProps } from 'antd/es/table';
+import { TableProps, ColumnType, ColumnGroupType } from 'antd/es/table';
 import { TableRowSelection } from 'antd/es/table/interface';
+import { IOption } from './ColumnSetting';
 /**
  * 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
  * 需要注意的是, 当在外部进行增删改或者外部需要控制选择状态时, 例如删除之后清空全选状态, 需要受控
@@ -20,7 +21,17 @@ export interface IOptionItem {
      */
     disabled?: boolean | ((selectItems: any[]) => boolean);
 }
-export interface ITableProps<T> extends TableProps<T> {
+export interface IColumnType<T> extends ColumnType<T> {
+    colTitle?: string | React.ReactNode;
+    configurable?: boolean;
+}
+export interface IColumnGroupType<T> extends ColumnGroupType<T> {
+    colTitle?: string | React.ReactNode;
+    configurable?: boolean;
+}
+export declare type IColumnsType<T> = Array<IColumnGroupType<T> | IColumnType<T>>;
+export interface ITableProps<T> extends Omit<TableProps<T>, 'columns'> {
+    columns?: IColumnsType<T>;
     /**
      * 设置selectedRow选项, 可以获取当前选中的所有
      * 数据.
@@ -30,6 +41,10 @@ export interface ITableProps<T> extends TableProps<T> {
     /** 如果支持多选，则batchOptions为多选时的一些批量操作，如删除、添加等 */
     batchOptions?: IOptionItem[];
     emptyText?: React.ReactNode;
+    showColumnSetting?: boolean;
+    hiddenColumns?: string[];
+    onHiddenColumnsChange?: (keys: string[]) => void;
+    columnSettingOverlayClass?: string;
 }
 /**
  * pandora2.0风格的表格
@@ -44,15 +59,25 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     static contextType: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
     indeterminate: boolean;
     checkAll: boolean;
+    hiddenColumn: string[] | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;
     get selectedRowKeys(): React.ReactText[];
     get rowSelection(): TableRowSelection<T> | undefined;
     get undisabledData(): readonly T[];
     get keysOfCurrentPage(): any[];
     get emptyTextComp(): {};
+    get columnsSettingOptions(): IOption[];
+    get columnKeys(): {
+        allKeys: string[];
+        unconfigableKeys: string[];
+        resetKeys: string[];
+    };
+    handleHideColumnsChange(keys: string[]): Promise<void> | undefined;
+    getColumns(): IColumnsType<T> | undefined;
     getRowKey(row: any, index: number): any;
     setIndeterminate(indeterminate: boolean): void;
     setCheckAll(checkAll: boolean): void;
+    setHiddenColumn(hiddenColumn?: string[]): void;
     setCheckboxStatus(selectedRowsOfCurrentPage?: T[], dataSource?: T[]): void;
     handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
     onRowSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;