@hw-component/table 1.9.91 → 1.9.93

package/lib/HTableBody/Options/hooks.js

@@ -1,7 +1,11 @@
 'use strict';
 
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var utils = require('./utils.js');
+var index = require('../../hooks/index.js');
 
 var useCheckKeys = function useCheckKeys(_ref) {
   var columns = _ref.columns,
@@ -26,6 +30,56 @@ var useCheckKeys = function useCheckKeys(_ref) {
     return keys;
   }, [colStatusValue, columns]);
 };
+var useContentTree = function useContentTree(_ref3) {
+  var columns = _ref3.columns,
+    matchKey = _ref3.matchKey;
+  var titleClass = index.useClassName("hw-table-body-option-setting-content-title");
+  return React.useMemo(function () {
+    var treeData = [];
+    _forEachInstanceProperty(columns).call(columns, function (_ref4) {
+      var dataIndex = _ref4.dataIndex,
+        title = _ref4.title,
+        titleStr = _ref4.titleStr,
+        fixed = _ref4.fixed;
+      if (!dataIndex) {
+        return;
+      }
+      if (fixed !== matchKey) {
+        return;
+      }
+      var _getItemValue = utils.getItemValue({
+          titleStr: titleStr,
+          title: title
+        }),
+        cuTitleStr = _getItemValue.title;
+      treeData.push({
+        title: jsxRuntime.jsx("div", {
+          className: titleClass,
+          children: cuTitleStr
+        }),
+        key: dataIndex.toString()
+      });
+    });
+    return treeData;
+  }, [columns]);
+};
+var useTreeKeys = function useTreeKeys(_ref5) {
+  var treeData = _ref5.treeData,
+    checkKeys = _ref5.checkKeys;
+  return React.useMemo(function () {
+    var newKeys = [];
+    _forEachInstanceProperty(treeData).call(treeData, function (_ref6) {
+      var key = _ref6.key;
+      var index = _indexOfInstanceProperty(checkKeys).call(checkKeys, key);
+      if (index !== -1) {
+        newKeys.push(key);
+      }
+    });
+    return newKeys;
+  }, [treeData, checkKeys]);
+};
 
 exports.useCheckKeys = useCheckKeys;
+exports.useContentTree = useContentTree;
+exports.useTreeKeys = useTreeKeys;
 // powered by h

package/lib/HTableBody/Options/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { IProps } from "./modal";
-declare const _default: ({ reload, size, density, setSizeChange, columns, onChange, colStatusValue, reset, settingRender, onDrop }: IProps) => JSX.Element;
+declare const _default: ({ reload, size, density, setSizeChange, columns, onChange, colStatusValue, reset, settingRender, onDrop, }: IProps) => JSX.Element;
 export default _default;

package/lib/HTableBody/Options/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ConfigItemModal } from "../../modal";
+import type { ConfigDataModal, ConfigItemModal } from "../../modal";
 import React from "react";
 export declare const getItemValue: (data: ConfigItemModal) => {
     name?: string | any[] | undefined;
@@ -806,3 +806,10 @@ export declare const getItemValue: (data: ConfigItemModal) => {
     title: any;
     dataIndex: ((string | number | (string | number)[]) & import("rc-table/lib/interface").DataIndex) | undefined;
 };
+interface MoveColProps {
+    startKey: string;
+    endKey: string;
+    data: ConfigDataModal;
+}
+export declare const moveCol: ({ startKey, endKey, data }: MoveColProps) => ConfigItemModal[];
+export {};

package/lib/HTableBody/Options/utils.js

@@ -4,12 +4,14 @@ var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
 var React = require('react');
 
 var _excluded = ["dataIndex", "title", "titleStr"];
@@ -29,6 +31,32 @@ var getItemValue = function getItemValue(data) {
     dataIndex: dataIndex
   }, oData);
 };
+var moveCol = function moveCol(_ref) {
+  var startKey = _ref.startKey,
+    endKey = _ref.endKey,
+    data = _ref.data;
+  var indexArray = [-1, -1];
+  _forEachInstanceProperty(data).call(data, function (item, index) {
+    var dataIndex = item.dataIndex;
+    if (!dataIndex) {
+      return;
+    }
+    if (dataIndex === startKey) {
+      indexArray[0] = index;
+    }
+    if (dataIndex === endKey) {
+      indexArray[1] = index;
+    }
+  });
+  var oldIndex = indexArray[0],
+    newIndex = indexArray[1];
+  var newData = _toConsumableArray(data);
+  var oldItem = data[oldIndex];
+  _spliceInstanceProperty(newData).call(newData, oldIndex, 1);
+  _spliceInstanceProperty(newData).call(newData, newIndex, 0, oldItem);
+  return newData;
+};
 
 exports.getItemValue = getItemValue;
+exports.moveCol = moveCol;
 // powered by h

package/lib/HTableBody/hooks/useColData.d.ts

@@ -5,6 +5,7 @@ import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
 export declare const useCols: ({ configData, rowSelection, table, bordered, }: HTableProps) => {
     cols: ConfigDataModal;
     setCols: import("react").Dispatch<import("react").SetStateAction<ConfigDataModal>>;
+    resetCols: () => void;
 };
 interface useColumnsStateTypeModal {
     columnsState?: ColumnsStateType;
@@ -15,6 +16,6 @@ export declare const useColumnsStateType: ({ columnsState, columns, }: useColumn
     persistenceKey: string | undefined;
     value: Record<string, ColumnsState> | undefined;
     onChange: (keys: string[], notCheck: string[]) => void;
-    reset: () => void;
+    resetCheckCol: () => void;
 };
 export {};

package/lib/HTableBody/hooks/useColData.js

@@ -93,9 +93,13 @@ var useCols = function useCols(_ref) {
   React.useEffect(function () {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
+  var resetCols = function resetCols() {
+    setCols(changeConfigData(configData));
+  };
   return {
     cols: cols,
-    setCols: setCols
+    setCols: setCols,
+    resetCols: resetCols
   };
 };
 var useColumnsStateType = function useColumnsStateType(_ref3) {
@@ -134,7 +138,7 @@ var useColumnsStateType = function useColumnsStateType(_ref3) {
     setSelfValue(newObj);
     onChange === null || onChange === void 0 || onChange(newObj);
   };
-  var reset = function reset() {
+  var resetCheckCol = function resetCheckCol() {
     setSelfValue(initTableColsVal);
   };
   return {
@@ -142,7 +146,7 @@ var useColumnsStateType = function useColumnsStateType(_ref3) {
     persistenceKey: persistenceKey,
     value: selfValue,
     onChange: change,
-    reset: reset
+    resetCheckCol: resetCheckCol
   };
 };
 

package/lib/HTableBody/index.js

@@ -28,7 +28,7 @@ var defaultRender = require('./defaultRender.js');
 var useRowClassName = require('./hooks/useRowClassName.js');
 
 var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender", "paginationActionRender", "localSorter", "columnsState", "tableExtraRender", "table", "onChange", "bordered", "rowClassName"],
-  _excluded2 = ["value", "onChange", "reset"];
+  _excluded2 = ["value", "onChange", "resetCheckCol"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Body = (function (bodyProps) {
@@ -93,14 +93,15 @@ var Body = (function (bodyProps) {
       bordered: bordered
     }),
     cols = _useCols.cols,
-    setCols = _useCols.setCols;
+    setCols = _useCols.setCols,
+    resetCols = _useCols.resetCols;
   var _useColumnsStateType = useColData.useColumnsStateType({
       columnsState: columnsState,
       columns: cols
     }),
     value = _useColumnsStateType.value,
     onChange = _useColumnsStateType.onChange,
-    reset = _useColumnsStateType.reset,
+    resetCheckCol = _useColumnsStateType.resetCheckCol,
     selfColStatus = _objectWithoutProperties(_useColumnsStateType, _excluded2);
   useControl.useSynchronousKeys({
     selectedRowKeys: selectedRowKeys,
@@ -117,7 +118,10 @@ var Body = (function (bodyProps) {
     setSizeChange: setCuSize,
     colStatusValue: value || {},
     onChange: onChange,
-    reset: reset,
+    reset: function reset() {
+      resetCheckCol();
+      resetCols();
+    },
     onDrop: setCols
   }));
   var defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;

package/lib/Table.js

@@ -114,7 +114,7 @@ var Table = (function (_ref) {
       configData: configData,
       onFinish: function onFinish(value) {
         rowSelectionReload();
-        return run(_objectSpread(_objectSpread(_objectSpread({}, saveParams.old), value), {}, {
+        return run(_objectSpread(_objectSpread({}, value), {}, {
           current: 1
         }));
       },

package/lib/index.css

@@ -83,6 +83,10 @@
   display: -ms-flexbox;
   display: flex;
 }
+.ant-hw-table-op-tree-content {
+  padding: 6px 6px 6px 0px;
+  width: 100%;
+}
 .ant-hw-table-body-option-tree .ant-tree-treenode {
   width: 100%;
   padding-left: 24px !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.9.91",
+  "version": "1.9.93",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/HTableBody/Options/Content.tsx

@@ -1,68 +1,40 @@
 import { useClassName } from "../../hooks";
-import { useMemo } from "react";
-import type { ConfigDataModal } from "../../modal";
-import { Tree } from "antd";
 import type { ItemProps } from "./modal";
-import { getItemValue } from "./utils";
+import { moveCol } from "./utils";
+import ContentTree from "./ContentTree";
+import { useContentTree, useTreeKeys } from "./hooks";
 
-interface MoveArrayProps {
-    startKey:string;
-    endKey:string;
-    data: ConfigDataModal;
-}
-
-
-const moveArray=({startKey,endKey,data}:MoveArrayProps)=>{
-   const indexArray=[-1,-1];
-   data.forEach((item,index)=>{
-      const{dataIndex}=item;
-      if(!dataIndex){
-         return;
-      };
-      if(dataIndex===startKey){
-        indexArray[0]=index;
-      }
-      if(dataIndex===endKey){
-        indexArray[1]=index;
-      }
-   });
-  const [oldIndex,newIndex]=indexArray;
-  const newData = [...data];
-  const oldItem = data[oldIndex];
-  newData.splice(oldIndex, 1);
-  newData.splice(newIndex, 0, oldItem);
-  return newData;
-};
 export const ColsSettingContent = ({
   columns,
   onCheck,
   checkKeys,
-  onDrop
+  onDrop,
 }: ItemProps) => {
   const content = useClassName("hw-table-body-option-setting-content");
-  const titleClass = useClassName("hw-table-body-option-setting-content-title");
-  const treeClass = useClassName("hw-table-body-option-tree");
-
-  const contentTreeData = useMemo(() => {
-    const treeData: ConfigDataModal = [];
-    columns.forEach(({ dataIndex, title, titleStr }) => {
-      if (dataIndex) {
-        const { title: cuTitleStr } = getItemValue({
-          titleStr,
-          title,
-        });
-        treeData.push({
-          title: <div className={titleClass}>{cuTitleStr}</div>,
-          key: dataIndex.toString(),
-        });
-      }
-    });
-    return treeData;
-  }, [columns]);
+  const norContentTreeData = useContentTree({ columns });
+  const leftContentTreeData = useContentTree({ columns, matchKey: "left" });
+  const rightContentTreeData = useContentTree({ columns, matchKey: "right" });
+  const norCheckKeys = useTreeKeys({
+    treeData: norContentTreeData,
+    checkKeys,
+  });
+  const leftCheckKeys = useTreeKeys({
+    treeData: leftContentTreeData,
+    checkKeys,
+  });
+  const rightCheckKeys = useTreeKeys({
+    treeData: rightContentTreeData,
+    checkKeys,
+  });
 
   const check = (keys: string[]) => {
     const notCheck: string[] = [];
-    contentTreeData.forEach(({ key }) => {
+    const allTreeData = [
+      ...leftContentTreeData,
+      ...norContentTreeData,
+      ...rightContentTreeData,
+    ];
+    allTreeData.forEach(({ key }) => {
       const cuKey = key as string;
       const index = keys.indexOf(cuKey);
       if (index === -1) {
@@ -71,31 +43,64 @@ export const ColsSettingContent = ({
     });
     onCheck(keys, notCheck);
   };
-  const onDropEnd=({dragNodesKeys,dropPosition})=>{
-      if (dropPosition<1) {
-         return;
-      };
-       const [key]=dragNodesKeys;
-       const sourceKey=contentTreeData[dropPosition-1].key;
-       const newData= moveArray({startKey:key,endKey:(sourceKey as string),data:columns});
-       onDrop(newData);
-  }
+  const onDropEnd = ({ dragNodesKeys, dropPosition }) => {
+    if (dropPosition < 1) {
+      return;
+    }
+    const allTreeData = [
+      ...leftContentTreeData,
+      ...norContentTreeData,
+      ...rightContentTreeData,
+    ];
+    const [key] = dragNodesKeys;
+    const sourceKey = allTreeData[dropPosition - 1].key;
+    const newData = moveCol({
+      startKey: key,
+      endKey: sourceKey as string,
+      data: columns,
+    });
+    onDrop(newData);
+  };
   return (
     <div className={content}>
-      <div style={{ paddingTop: 6, paddingBottom: 6 }}>
-        <Tree
-          checkable
-          className={treeClass}
-          draggable
-          checkedKeys={checkKeys}
-          onDrop={onDropEnd}
-          onCheck={(key) => {
-            check(key as string[]);
-          }}
-          height={268}
-          treeData={contentTreeData}
-        />
-      </div>
+      <ContentTree
+        title="固定在左侧"
+        treeData={leftContentTreeData}
+        checkedKeys={leftCheckKeys}
+        onDrop={onDropEnd}
+        onCheck={(key) => {
+          const curKey = key as string[];
+          check([...curKey, ...norCheckKeys, ...rightCheckKeys]);
+        }}
+      />
+      <ContentTree
+        title="不固定"
+        treeData={norContentTreeData}
+        checkedKeys={norCheckKeys}
+        onDrop={({ dragNodesKeys, dropPosition }) => {
+          const cuDropPosition = leftContentTreeData.length + dropPosition;
+          onDropEnd({ dragNodesKeys, dropPosition: cuDropPosition });
+        }}
+        onCheck={(key) => {
+          const curKey = key as string[];
+          check([...leftCheckKeys, ...curKey, ...rightCheckKeys]);
+        }}
+      />
+      <ContentTree
+        title="固定在右侧"
+        treeData={rightContentTreeData}
+        checkedKeys={rightCheckKeys}
+        onDrop={({ dragNodesKeys, dropPosition }) => {
+          const leftLen = leftContentTreeData.length;
+          const norLen = norContentTreeData.length;
+          const cuDropPosition = leftLen + norLen + dropPosition;
+          onDropEnd({ dragNodesKeys, dropPosition: cuDropPosition });
+        }}
+        onCheck={(key) => {
+          const curKey = key as string[];
+          check([...leftCheckKeys, ...norCheckKeys, ...curKey]);
+        }}
+      />
     </div>
   );
 };

package/src/components/HTableBody/Options/ContentTree.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Space, Tree, Typography } from "antd";
+import { useClassName } from "@/components/hooks";
+import type { TreeProps } from "antd/lib/tree/Tree";
+
+interface IProps extends TreeProps {
+  title: string;
+}
+
+export default ({ treeData, checkedKeys, onDrop, onCheck, title }: IProps) => {
+  const treeClass = useClassName("hw-table-body-option-tree");
+  const treeItemContent = useClassName("hw-table-op-tree-content");
+
+  if (!treeData?.length) {
+    return null;
+  }
+  return (
+    <Space className={treeItemContent} direction="vertical" size={12}>
+      <Typography.Text type={"secondary"} style={{ paddingLeft: 24 }}>
+        {title}
+      </Typography.Text>
+      <Tree
+        checkable
+        className={treeClass}
+        draggable
+        checkedKeys={checkedKeys}
+        onDrop={onDrop}
+        onCheck={onCheck}
+        height={268}
+        treeData={treeData}
+      />
+    </Space>
+  );
+};

package/src/components/HTableBody/Options/Title.tsx

@@ -4,7 +4,12 @@ import type { ItemProps } from "./modal";
 import { useMemo } from "react";
 
 const { Link } = Typography;
-export const Title = ({ columns, onCheck, checkKeys, reset }: Omit<ItemProps,"onDrop">) => {
+export const Title = ({
+  columns,
+  onCheck,
+  checkKeys,
+  reset,
+}: Omit<ItemProps, "onDrop">) => {
   const title = useClassName("hw-table-body-option-setting-title");
   const relArrayKeys = useMemo(() => {
     const keys: string[] = [];

package/src/components/HTableBody/Options/hooks.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useState } from "react";
+import type { IProps, ItemProps } from "@/components/HTableBody/Options/modal";
+import type { ConfigDataModal } from "@/components/modal";
+import { getItemValue } from "@/components/HTableBody/Options/utils";
+import { useClassName } from "@/components/hooks";
+
+export const useCheckKeys = ({
+  columns,
+  colStatusValue,
+}: Pick<IProps, "colStatusValue" | "columns">) => {
+  return useMemo(() => {
+    const keys: string[] = [];
+    columns.forEach((value) => {
+      const { dataIndex, hideInTable } = value;
+      if (hideInTable || !dataIndex) {
+        return;
+      }
+      const dataIndexStr = dataIndex.toString();
+      const { show = true } = colStatusValue[dataIndexStr] || {};
+      if (!show) {
+        return;
+      }
+      keys.push(dataIndexStr);
+    });
+    return keys;
+  }, [colStatusValue, columns]);
+};
+
+interface UseContentTreeModal {
+  columns: ConfigDataModal;
+  matchKey?: "right" | "left";
+}
+interface ColDataNode {
+  title: React.ReactNode;
+  key: string;
+}
+export const useContentTree = ({ columns, matchKey }: UseContentTreeModal) => {
+  const titleClass = useClassName("hw-table-body-option-setting-content-title");
+  return useMemo<ColDataNode[]>(() => {
+    const treeData: ColDataNode[] = [];
+    columns.forEach(({ dataIndex, title, titleStr, fixed }) => {
+      if (!dataIndex) {
+        return;
+      }
+      if (fixed !== matchKey) {
+        return;
+      }
+      const { title: cuTitleStr } = getItemValue({
+        titleStr,
+        title,
+      });
+      treeData.push({
+        title: <div className={titleClass}>{cuTitleStr}</div>,
+        key: dataIndex.toString(),
+      });
+    });
+    return treeData;
+  }, [columns]);
+};
+interface UseTreeKeysModal {
+  treeData: ColDataNode[];
+  checkKeys: string[];
+}
+
+export const useTreeKeys = ({ treeData, checkKeys }: UseTreeKeysModal) => {
+  return useMemo(() => {
+    const newKeys: string[] = [];
+    treeData.forEach(({ key }) => {
+      const index = checkKeys.indexOf(key);
+      if (index !== -1) {
+        newKeys.push(key);
+      }
+    });
+    return newKeys;
+  }, [treeData, checkKeys]);
+};

package/src/components/HTableBody/Options/index.tsx

@@ -12,8 +12,6 @@ import { Title } from "./Title";
 import type { IProps } from "./modal";
 import { useCheckKeys } from "@/components/HTableBody/Options/hooks";
 
-
-
 export default ({
   reload,
   size = "middle",
@@ -24,7 +22,7 @@ export default ({
   colStatusValue,
   reset,
   settingRender,
-    onDrop
+  onDrop,
 }: IProps) => {
   const pointer = useClassName([
     "hw-table-pointer",

package/src/components/HTableBody/Options/modal.d.ts

@@ -12,7 +12,7 @@ export interface IProps extends OptionConfig {
   colStatusValue: Record<string, ColumnsState>;
   reset: VoidFunction;
   settingRender?: () => React.ReactNode;
-  onDrop:(columns:ConfigDataModal)=>void;
+  onDrop: (columns: ConfigDataModal) => void;
 }
 
 export interface ItemProps {
@@ -20,5 +20,5 @@ export interface ItemProps {
   onCheck: (keys: string[], notCheck: string[]) => void;
   columns: ConfigDataModal;
   reset?: VoidFunction;
-  onDrop:(columns:ConfigDataModal)=>void;
+  onDrop: (columns: ConfigDataModal) => void;
 }

package/src/components/HTableBody/Options/utils.ts

@@ -13,3 +13,31 @@ export const getItemValue = (data: ConfigItemModal) => {
     ...oData,
   };
 };
+
+interface MoveColProps {
+  startKey: string;
+  endKey: string;
+  data: ConfigDataModal;
+}
+
+export const moveCol = ({ startKey, endKey, data }: MoveColProps) => {
+  const indexArray = [-1, -1];
+  data.forEach((item, index) => {
+    const { dataIndex } = item;
+    if (!dataIndex) {
+      return;
+    }
+    if (dataIndex === startKey) {
+      indexArray[0] = index;
+    }
+    if (dataIndex === endKey) {
+      indexArray[1] = index;
+    }
+  });
+  const [oldIndex, newIndex] = indexArray;
+  const newData = [...data];
+  const oldItem = data[oldIndex];
+  newData.splice(oldIndex, 1);
+  newData.splice(newIndex, 0, oldItem);
+  return newData;
+};