@hw-component/table 1.9.91 → 1.9.92

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/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.92",
   "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,38 @@
+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,79 @@
+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;
+};

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

@@ -78,14 +78,16 @@ export const useCols = ({
   useEffect(() => {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
-
+  const resetCols = () => {
+    setCols(changeConfigData(configData));
+  };
   return {
     cols,
-    setCols
+    setCols,
+    resetCols,
   };
 };
 
-
 interface useColumnsStateTypeModal {
   columnsState?: ColumnsStateType;
   columns: ConfigDataModal;
@@ -96,8 +98,11 @@ export const useColumnsStateType = ({
   columns,
 }: useColumnsStateTypeModal) => {
   const { tableInstance } = useHTableContext();
-  const { persistenceType, persistenceKey, value, defaultValue, onChange } = columnsState || {};
-  const [selfValue, setSelfValue] = useState<Record<string, ColumnsState> | undefined>(defaultValue);
+  const { persistenceType, persistenceKey, value, defaultValue, onChange } =
+    columnsState || {};
+  const [selfValue, setSelfValue] = useState<
+    Record<string, ColumnsState> | undefined
+  >(defaultValue);
 
   const initTableColsVal = useMemo(() => {
     return selfValue || {};
@@ -120,7 +125,7 @@ export const useColumnsStateType = ({
     onChange?.(newObj);
   };
 
-  const reset = () => {
+  const resetCheckCol = () => {
     setSelfValue(initTableColsVal);
   };
   return {
@@ -128,6 +133,6 @@ export const useColumnsStateType = ({
     persistenceKey,
     value: selfValue,
     onChange: change,
-    reset,
+    resetCheckCol,
   };
 }; //设置选项

package/src/components/HTableBody/index.tsx

@@ -66,18 +66,19 @@ export default (bodyProps: HTableBodyProps) => {
   const { records } = data || {};
   const tableInstance = table || contextTableInstance;
 
-  const { cols ,setCols} = useCols({
+  const { cols, setCols, resetCols } = useCols({
     configData: bodyConfigData,
     table: tableInstance,
     rowSelection,
     bordered,
   });
-  const { value, onChange, reset, ...selfColStatus } = useColumnsStateType({
-    columnsState,
-    columns: cols,
-  });
-
+  const { value, onChange, resetCheckCol, ...selfColStatus } =
+    useColumnsStateType({
+      columnsState,
+      columns: cols,
+    });
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
+
   const optionsNode = options && (
     <Options
       reload={() => {
@@ -89,7 +90,10 @@ export default (bodyProps: HTableBodyProps) => {
       setSizeChange={setCuSize}
       colStatusValue={value || {}}
       onChange={onChange}
-      reset={reset}
+      reset={() => {
+        resetCheckCol();
+        resetCols();
+      }}
       onDrop={setCols}
     />
   );

package/src/components/index.less

@@ -85,6 +85,10 @@
 .@{ant-prefix}-hw-table-body-option-setting-content-title{
   display: flex;
 }
+.@{ant-prefix}-hw-table-op-tree-content{
+  padding: 6px 6px 6px 0px;
+  width: 100%;
+}
 .@{ant-prefix}-hw-table-body-option-tree{
   .@{ant-prefix}-tree-treenode{
      width: 100%;