@4399ywkf/design 1.3.11 → 2.0.0

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

@@ -6,31 +6,32 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { SettingOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Col, Popover, Row, Tooltip } from 'antd';
-import React, { useContext, useMemo } from 'react';
-import { useStore } from 'zustand';
+import React, { useMemo } from 'react';
+import { useColumns } from "../../store/hooks";
 import { genColumnKey } from "../../utils";
-import { StoreContext, TableContext } from "../../utils/Provide";
+import { useStyles } from "./style";
 var ColumnSetting = function ColumnSetting() {
-  var _useContext = useContext(TableContext),
-    columns = _useContext.columns;
-  var store = useContext(StoreContext);
-  var _useStore = useStore(store),
-    columnSetting = _useStore.columnSetting,
-    setColumnSetting = _useStore.setColumnSetting;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useColumns = useColumns(),
+    columns = _useColumns.columns,
+    columnSetting = _useColumns.columnSetting,
+    setColumnSetting = _useColumns.setColumnSetting;
   var checkboxColumnSetting = useMemo(function () {
     return columnSetting.map(function (col, index) {
-      var _columns$find;
+      var _find;
+      var currentColumnTitle = (_find = columns.find(function (column, columnIndex) {
+        var _column$dataIndex;
+        var columnKey = genColumnKey(column.key || (Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : (_column$dataIndex = column.dataIndex) === null || _column$dataIndex === void 0 ? void 0 : _column$dataIndex.toString()), columnIndex);
+        return columnKey === col.key;
+      })) === null || _find === void 0 ? void 0 : _find.title;
       return /*#__PURE__*/React.createElement(Col, {
         span: 24,
         key: index
       }, /*#__PURE__*/React.createElement(Checkbox, {
         value: col.key,
         key: index
-      }, (_columns$find = columns.find(function (column, index) {
-        var _column$dataIndex;
-        var columnKey = genColumnKey(column.key || (Array.isArray(column.dataIndex) ? column.dataIndex.join('.') : (_column$dataIndex = column.dataIndex) === null || _column$dataIndex === void 0 ? void 0 : _column$dataIndex.toString()), index);
-        return columnKey === col.key;
-      })) === null || _columns$find === void 0 ? void 0 : _columns$find.title));
+      }, typeof currentColumnTitle === 'function' ? col.key : currentColumnTitle));
     });
   }, [columnSetting, columns]);
   var onChangeCheckboxGroup = function onChangeCheckboxGroup(v) {
@@ -48,8 +49,6 @@ var ColumnSetting = function ColumnSetting() {
       return o.key;
     });
   }, [columnSetting]);
-
-  // ====================== 列展示的控制 ======================
   var allColumnSetting = useMemo(function () {
     return columnSetting.filter(function (o) {
       return !o.hidden;
@@ -64,32 +63,28 @@ var ColumnSetting = function ColumnSetting() {
   }, [columnSetting]);
   var onChangeAll = function onChangeAll(e) {
     var filterDisabledSetting = columnSetting.map(function (o) {
-      return o;
+      return _objectSpread({}, o);
     });
     if (e.target.checked) {
-      // 全选
-      filterDisabledSetting.map(function (o) {
+      filterDisabledSetting.forEach(function (o) {
         if (o.disabled) {
-          return o;
+          return;
         }
         o.hidden = false;
-        return o;
       });
     } else {
-      // 全部取消选择
-      filterDisabledSetting.map(function (o) {
+      filterDisabledSetting.forEach(function (o) {
         if (o.disabled) {
-          return o;
+          return;
         }
         o.hidden = true;
-        return o;
       });
     }
     setColumnSetting(filterDisabledSetting);
   };
   var resetColumnSetting = function resetColumnSetting() {
     var columnSettingList = [];
-    columns.map(function (col, index) {
+    columns.forEach(function (col, index) {
       var _col$dataIndex;
       var columnKey = genColumnKey(col.key || (Array.isArray(col.dataIndex) ? col.dataIndex.join('.') : (_col$dataIndex = col.dataIndex) === null || _col$dataIndex === void 0 ? void 0 : _col$dataIndex.toString()), index);
       columnSettingList.push({
@@ -106,7 +101,7 @@ var ColumnSetting = function ColumnSetting() {
     placement: 'bottomRight',
     trigger: 'click',
     title: /*#__PURE__*/React.createElement("div", {
-      className: 'columnSettingTitle'
+      className: styles.title
     }, /*#__PURE__*/React.createElement(Checkbox, {
       onChange: onChangeAll,
       checked: allColumnSetting,
@@ -114,16 +109,11 @@ var ColumnSetting = function ColumnSetting() {
     }, "\u5217\u5C55\u793A"), /*#__PURE__*/React.createElement(Button, {
       onClick: resetColumnSetting,
       type: 'link',
-      style: {
-        paddingRight: 0
-      }
+      className: styles.resetButton
     }, "\u91CD\u7F6E")),
     content: /*#__PURE__*/React.createElement(Checkbox.Group, {
-      className: 'columnSettingContent',
+      className: styles.content,
       onChange: onChangeCheckboxGroup,
-      style: {
-        width: 200
-      },
       value: columnShow
     }, /*#__PURE__*/React.createElement(Row, {
       gutter: [0, 8]

package/dist/Table/components/ColumnSetting/style.d.ts

@@ -0,0 +1,16 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    title: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "space-between";
+        height: number;
+    };
+    content: {
+        maxHeight: number;
+        overflow: "auto";
+        width: number;
+    };
+    resetButton: {
+        paddingRight: number;
+    };
+}>;

package/dist/Table/components/ColumnSetting/style.js

@@ -0,0 +1,19 @@
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function () {
+  return {
+    title: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 32
+    },
+    content: {
+      maxHeight: 200,
+      overflow: 'auto',
+      width: 200
+    },
+    resetButton: {
+      paddingRight: 0
+    }
+  };
+});

package/dist/Table/components/EnumFilter/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import './index.css';
+type EnumOption = {
+    text: React.ReactNode;
+    value: React.Key;
+};
 interface EnumFilterProps {
-    options: {
-        text: any;
-        value: any;
-    }[];
-    columnKey: any;
-    onChange: any;
-    value: string[];
+    options: EnumOption[];
+    columnKey: string;
+    onChange: (values: React.Key[]) => void;
+    value: React.Key[];
     mode?: 'multiple' | 'radio';
 }
 declare const EnumFilter: (props: EnumFilterProps) => React.JSX.Element;

package/dist/Table/components/EnumFilter/index.js

@@ -13,11 +13,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useMemo, useState } from 'react';
 import { Button, Checkbox, Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
-import "./index.css";
 import _ from 'lodash-es';
+import { useStyles } from "./style";
 var EnumFilter = function EnumFilter(props) {
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   var options = props.options,
-    columnKey = props.columnKey,
     onChange = props.onChange,
     value = props.value,
     _props$mode = props.mode,
@@ -26,6 +28,19 @@ var EnumFilter = function EnumFilter(props) {
     _useState2 = _slicedToArray(_useState, 2),
     filterValue = _useState2[0],
     setFilterValue = _useState2[1];
+  var filterOptions = useMemo(function () {
+    return options.filter(function (o) {
+      var _o$text;
+      return String((_o$text = o.text) !== null && _o$text !== void 0 ? _o$text : '').toUpperCase().includes(filterValue.toUpperCase());
+    });
+  }, [options, filterValue]);
+  var filterCheckboxValue = useMemo(function () {
+    return value.filter(function (o) {
+      return filterOptions.map(function (option) {
+        return option.value;
+      }).includes(o);
+    });
+  }, [value, filterOptions]);
   var onCheckChange = function onCheckChange(e) {
     // 首先需要知道当前的过滤项有哪些
     // 如果e的值存在 filterOptions里面，代表新增
@@ -77,12 +92,6 @@ var EnumFilter = function EnumFilter(props) {
   var onChangeFilter = function onChangeFilter(e) {
     setFilterValue(e.target.value);
   };
-  var filterOptions = useMemo(function () {
-    return options.filter(function (o) {
-      var _o$text;
-      return (_o$text = o.text) === null || _o$text === void 0 ? void 0 : _o$text.toUpperCase().includes(filterValue === null || filterValue === void 0 ? void 0 : filterValue.toUpperCase());
-    });
-  }, [options, filterValue]);
   var onChangeSelectAll = function onChangeSelectAll(e) {
     if (e.target.checked) {
       // 全选
@@ -99,24 +108,17 @@ var EnumFilter = function EnumFilter(props) {
    */
   var onCounterElection = function onCounterElection() {
     var copyFilterOptions = _.cloneDeep(filterOptions);
-    var res = copyFilterOptions.map(function (o) {
-      if (!filterCheckboxValue.includes(o.value)) {
-        return o.value;
-      }
-    }).filter(Boolean);
+    var res = copyFilterOptions.filter(function (o) {
+      return !filterCheckboxValue.includes(o.value);
+    }).map(function (o) {
+      return o.value;
+    });
     onCheckChange(res);
   };
-  var filterCheckboxValue = useMemo(function () {
-    return value.filter(function (o) {
-      return filterOptions.map(function (o) {
-        return o.value;
-      }).includes(o);
-    });
-  }, [value, filterOptions]);
   return /*#__PURE__*/React.createElement("div", {
-    className: 'table-filter-dropdown'
+    className: styles.dropdown
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'table-filter-dropdown-search'
+    className: styles.search
   }, /*#__PURE__*/React.createElement(Input, {
     value: filterValue,
     onChange: onChangeFilter,
@@ -124,13 +126,13 @@ var EnumFilter = function EnumFilter(props) {
     placeholder: '在筛序选项中搜索',
     allowClear: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'dropdown-menu'
+    className: styles.menu
   }, mode === 'multiple' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: 'dropdown-menu-action'
+    className: styles.action
   }, /*#__PURE__*/React.createElement(Checkbox, {
     onChange: onChangeSelectAll,
-    checked: filterCheckboxValue.length == filterOptions.length,
-    indeterminate: filterCheckboxValue.length > 0 && filterCheckboxValue.length != filterOptions.length
+    checked: filterCheckboxValue.length === filterOptions.length,
+    indeterminate: filterCheckboxValue.length > 0 && filterCheckboxValue.length !== filterOptions.length
   }, "\u5168\u9009"), /*#__PURE__*/React.createElement(Button, {
     size: 'small',
     type: 'link',
@@ -142,32 +144,28 @@ var EnumFilter = function EnumFilter(props) {
     disabled: _.isEmpty(filterCheckboxValue),
     onClick: onCancel
   }, "\u53D6\u6D88")), /*#__PURE__*/React.createElement(Checkbox.Group, {
-    className: 'dropdown-menu-ul',
+    className: styles.menuList,
     onChange: onCheckChange,
     value: value
   }, filterOptions.map(function (o, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: "dropdown-menu-item ".concat(value !== null && value !== void 0 && value.includes(o.value) ? 'dropdown-menu-item-selected' : '')
+      className: cx(styles.menuItem, (value === null || value === void 0 ? void 0 : value.includes(o.value)) && styles.menuItemSelected)
     }, /*#__PURE__*/React.createElement(Checkbox, {
-      style: {
-        width: '100%'
-      },
+      className: styles.fullWidth,
       value: o.value
     }, o.text));
   }))), mode === 'radio' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: 'dropdown-menu-ul'
+    className: styles.menuList
   }, filterOptions.map(function (o, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: "dropdown-menu-item ".concat(value !== null && value !== void 0 && value.includes(o.value) ? 'dropdown-menu-item-selected' : '')
+      className: cx(styles.menuItem, (value === null || value === void 0 ? void 0 : value.includes(o.value)) && styles.menuItemSelected)
     }, /*#__PURE__*/React.createElement(Checkbox, {
       onChange: function onChange() {
         return onRadioCheckChange(o.value);
       },
-      style: {
-        width: '100%'
-      },
+      className: styles.fullWidth,
       checked: o.value === (value === null || value === void 0 ? void 0 : value[0])
     }, o.text));
   })))));

package/dist/Table/components/EnumFilter/style.d.ts

@@ -0,0 +1,54 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    dropdown: {
+        minWidth: number;
+    };
+    search: {
+        padding: string;
+        borderBottom: string;
+    };
+    menu: {
+        maxHeight: number;
+        border: number;
+        overflowX: "hidden";
+        overflowY: "auto";
+        background: string;
+        paddingTop: number;
+    };
+    menuList: {
+        display: "flex !important";
+        flexDirection: "column";
+        gap: number;
+    };
+    menuItem: {
+        clear: "both";
+        margin: number;
+        padding: string;
+        color: string;
+        fontWeight: number;
+        fontSize: number;
+        lineHeight: number;
+        cursor: "pointer";
+        transition: "all 0.2s";
+        borderRadius: number;
+        '&:hover': {
+            backgroundColor: string;
+        };
+    };
+    menuItemSelected: {
+        color: string;
+        backgroundColor: string;
+        '&:hover': {
+            backgroundColor: string;
+        };
+    };
+    action: {
+        padding: string;
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+    };
+    fullWidth: {
+        width: string;
+    };
+}>;

package/dist/Table/components/EnumFilter/style.js

@@ -0,0 +1,58 @@
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var token = _ref.token;
+  return {
+    dropdown: {
+      minWidth: 120
+    },
+    search: {
+      padding: "".concat(token.paddingXS, "px ").concat(token.paddingXXS, "px"),
+      borderBottom: "1px solid ".concat(token.colorBorderSecondary)
+    },
+    menu: {
+      maxHeight: 264,
+      border: 0,
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      background: token.colorBgContainer,
+      paddingTop: token.paddingXXS
+    },
+    menuList: {
+      display: 'flex !important',
+      flexDirection: 'column',
+      gap: token.marginXXS
+    },
+    menuItem: {
+      clear: 'both',
+      margin: 0,
+      padding: '5px 12px',
+      color: token.colorText,
+      fontWeight: token.fontWeightStrong,
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight,
+      cursor: 'pointer',
+      transition: 'all 0.2s',
+      borderRadius: token.borderRadiusSM,
+      '&:hover': {
+        backgroundColor: token.colorFillSecondary
+      }
+    },
+    menuItemSelected: {
+      color: token.colorPrimary,
+      backgroundColor: token.colorPrimaryBg,
+      '&:hover': {
+        backgroundColor: token.colorPrimaryBgHover
+      }
+    },
+    action: {
+      padding: "".concat(token.paddingXXS, "px 12px"),
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    fullWidth: {
+      width: '100%'
+    }
+  };
+});

package/dist/Table/components/Export/RadioMode.d.ts

@@ -1,12 +1,8 @@
-import React from 'react';
 import type { RadioChangeEvent } from 'antd';
+import React from 'react';
 interface RadioModeProps {
     value?: string;
     onChange: (v: RadioChangeEvent) => void;
 }
-/**
- * 导出范围单选框
- * @constructor
- */
 declare const RadioMode: (props: RadioModeProps) => React.JSX.Element;
 export default RadioMode;

package/dist/Table/components/Export/RadioMode.js

@@ -1,16 +1,14 @@
-import React, { useContext } from 'react';
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import { Radio, Space } from 'antd';
-import { TableContext } from "../../utils/Provide";
-/**
- * 导出范围单选框
- * @constructor
- */
+import React from 'react';
+import { useTableContext } from "../../context";
 var RadioMode = function RadioMode(props) {
   var value = props.value,
     onChange = props.onChange;
-  var _useContext = useContext(TableContext),
-    isShowExport = _useContext.isShowExport,
-    rowSelection = _useContext.rowSelection;
+  var ctx = useTableContext();
+  var isShowExport = ctx.isShowExport,
+    rowSelection = ctx.rowSelection;
+  var exportConfig = isShowExport && _typeof(isShowExport) === 'object' ? isShowExport : undefined;
   var radioOptions = [{
     label: '仅导出搜索结果',
     value: 'part'
@@ -21,11 +19,11 @@ var RadioMode = function RadioMode(props) {
   }, {
     label: '导出全部结果',
     value: 'all',
-    disabled: !isShowExport.query
+    disabled: !(exportConfig !== null && exportConfig !== void 0 && exportConfig.query)
   }, {
     label: '导出全部结果(异步)',
     value: 'async',
-    disabled: !isShowExport.query
+    disabled: !(exportConfig !== null && exportConfig !== void 0 && exportConfig.query)
   }];
   return /*#__PURE__*/React.createElement(Radio.Group, {
     value: value,
@@ -34,6 +32,7 @@ var RadioMode = function RadioMode(props) {
     direction: 'vertical'
   }, radioOptions.map(function (o) {
     return /*#__PURE__*/React.createElement(Radio, {
+      key: o.value,
       value: o.value,
       disabled: o.disabled
     }, o.label);