@nokecy/qc-ui 0.2.8 → 0.2.10

package/dist/cjs/ag-grid-plus/ag-gridPlus.js

@@ -31,6 +31,8 @@ var _utils = require("./utils");
 
 var _setting = _interopRequireDefault(require("./setting"));
 
+var _ = require(".");
+
 var _excluded = ["style", "loading", "params", "request", "dataSource", "treeParentName", "rowData", "gridRef", "headerTitle", "toolBarRender", "search", "hideTool", "onGridReady", "gridKey", "gridColumnState", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -86,6 +88,7 @@ function AgGridPlus(props) {
       children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
+  var gridPlusColumnState = (0, _.useGridPlusColumnState)();
   var gridRef = (0, _react.useRef)();
   var apiRef = (0, _react.useRef)();
   var columnsRef = (0, _react.useRef)();
@@ -110,29 +113,24 @@ function AgGridPlus(props) {
       rowData = _useState8[0],
       setRowData = _useState8[1];
 
-  var _useState9 = (0, _react.useState)([]),
+  var _useState9 = (0, _react.useState)({}),
       _useState10 = _slicedToArray(_useState9, 2),
-      selectRows = _useState10[0],
-      setSelectRows = _useState10[1];
+      queryFilter = _useState10[0],
+      setQueryFilter = _useState10[1];
 
-  var _useState11 = (0, _react.useState)({}),
+  var _useState11 = (0, _react.useState)(),
       _useState12 = _slicedToArray(_useState11, 2),
-      queryFilter = _useState12[0],
-      setQueryFilter = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(),
-      _useState14 = _slicedToArray(_useState13, 2),
-      sortColumn = _useState14[0],
-      setSortColumn = _useState14[1];
+      sortColumn = _useState12[0],
+      setSortColumn = _useState12[1];
 
-  var _useState15 = (0, _react.useState)({
+  var _useState13 = (0, _react.useState)({
     pageSize: 200,
     current: 1,
     total: dataSource ? dataSource.length : 0
   }),
-      _useState16 = _slicedToArray(_useState15, 2),
-      pagination = _useState16[0],
-      setPagination = _useState16[1];
+      _useState14 = _slicedToArray(_useState13, 2),
+      pagination = _useState14[0],
+      setPagination = _useState14[1];
 
   (0, _react.useImperativeHandle)(propsGridRef, function () {
     return gridRef.current;
@@ -192,13 +190,13 @@ function AgGridPlus(props) {
   }, [ready, JSON.stringify(gridParams), JSON.stringify(sortColumn), pagination.pageSize, pagination.current]); // 加载列方案
 
   (0, _react.useEffect)(function () {
-    if (gridColumnState && columnsRef.current) {
+    if (gridPlusColumnState && gridKey && gridPlusColumnState[gridKey] && columnsRef.current) {
       columnsRef.current.applyColumnState({
-        state: gridColumnState,
+        state: gridPlusColumnState[gridKey],
         applyOrder: true
       });
     }
-  }, [gridColumnState, columnsRef.current]);
+  }, [gridPlusColumnState, columnsRef.current]);
   (0, _react.useEffect)(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]); //外部loading
@@ -245,7 +243,9 @@ function AgGridPlus(props) {
     });
   };
 
-  var actionDom = toolBarRender && toolBarRender(apiRef.current, (0, _utils.convertFilterModel)(queryFilter), queryFilter);
+  var actionDom = (0, _react.useMemo)(function () {
+    return toolBarRender && toolBarRender(apiRef.current, (0, _utils.convertFilterModel)(queryFilter), queryFilter);
+  }, []);
 
   var sortChanged = function sortChanged(columnApi) {
     var sortedColumn = columnApi.getColumnState().find(function (col) {
@@ -258,7 +258,14 @@ function AgGridPlus(props) {
     request && onRequest(queryFilter);
   };
 
-  var onSaveColumnState = function onSaveColumnState(columnState) {};
+  var onRowChanged = (0, _react.useCallback)(function (e) {
+    props.onSelectionChanged && props.onSelectionChanged(e);
+  }, []);
+  var onRowSelected = (0, _react.useCallback)(function (e) {
+    props.onRowSelected && props.onRowSelected(e);
+  }, []);
+
+  var onColumnStateChanged = function onColumnStateChanged(columnState) {};
 
   (0, _react.useEffect)(function () {
     gridRef.current = {
@@ -268,8 +275,13 @@ function AgGridPlus(props) {
   var colDefs = (0, _react.useMemo)(function () {
     return _react.default.Children.map(children, function (child, index) {
       return child.props;
+    }).filter(function (x) {
+      return !x.hideInTable;
     });
-  }, [children]);
+  }, []);
+  var rowDataMemo = (0, _react.useMemo)(function () {
+    return props.treeData ? (0, _utils.flatten)((0, _utils.toTree)(rowData), treeParentName) : rowData;
+  }, [rowData, props.treeData]);
   return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
     spinning: loading,
     wrapperClassName: "grid-spin"
@@ -319,37 +331,23 @@ function AgGridPlus(props) {
     }), /*#__PURE__*/_react.default.createElement(_setting.default, {
       gridApi: apiRef.current,
       columnApi: columnsRef.current,
-      onSaveColumnState: onSaveColumnState
+      onSaveColumnState: onColumnStateChanged
     })]
   }), /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridReact, _extends({
     className: "ag-theme-alpine"
   }, rest, {
-    onFirstDataRendered: function onFirstDataRendered() {} //指定客户端模式
-    ,
+    //指定客户端模式
     rowModelType: "clientSide",
-    rowData: props.treeData ? (0, _utils.flatten)((0, _utils.toTree)(rowData), treeParentName) : rowData,
+    maintainColumnOrder: true,
+    rowData: rowDataMemo,
     onGridReady: onGridReady,
     defaultColDef: defaultColDef,
     onSortChanged: function onSortChanged(event) {
       sortChanged(event.columnApi);
       props.onSortChanged && props.onSortChanged(event);
     },
-    onSelectionChanged: function onSelectionChanged(e) {
-      props.onSelectionChanged && props.onSelectionChanged(e);
-      setSelectRows(e.api.getSelectedRows());
-    },
-    onDragStopped: function onDragStopped(e) {
-      if (columnsRef.current) {// setColumnState(columnsRef.current?.getColumnState());
-      }
-    },
-    onColumnResized: function onColumnResized(e) {
-      if (columnsRef.current) {// setColumnState(columnsRef.current?.getColumnState());
-      }
-    },
-    onColumnMoved: function onColumnMoved() {
-      if (columnsRef.current) {// setColumnState(columnsRef.current?.getColumnState());
-      }
-    },
+    onSelectionChanged: onRowChanged,
+    onRowSelected: onRowSelected,
     columnTypes: columnTypes,
     animateRows: true //停用默认分页组件
     ,

package/dist/cjs/ag-grid-plus/context/gridContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GridPlusContext: React.Context<any>;

package/dist/cjs/ag-grid-plus/context/gridContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPlusContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var GridPlusContext = /*#__PURE__*/_react.default.createContext(null);
+
+exports.GridPlusContext = GridPlusContext;

package/dist/cjs/ag-grid-plus/index.d.ts

@@ -1,4 +1,5 @@
 import AgGridPlus from "./ag-gridPlus";
 import { AgGridColumn } from "./interface";
+export declare const useGridPlusColumnState: () => any;
 export { AgGridPlus, AgGridColumn };
 export { dateValueFormatter, dateTimeValueFormatter, convertFilterModel, convertSortModel, flattenTreeDeep, toTree, flatten } from "./utils";

package/dist/cjs/ag-grid-plus/index.js

@@ -57,11 +57,22 @@ Object.defineProperty(exports, "toTree", {
     return _utils.toTree;
   }
 });
+exports.useGridPlusColumnState = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _agGridPlus = _interopRequireDefault(require("./ag-gridPlus"));
 
 var _interface = require("./interface");
 
+var _gridContext = require("./context/gridContext");
+
 var _utils = require("./utils");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useGridPlusColumnState = function useGridPlusColumnState() {
+  return _react.default.useContext(_gridContext.GridPlusContext);
+};
+
+exports.useGridPlusColumnState = useGridPlusColumnState;

package/dist/cjs/ag-grid-plus/interface.d.ts

@@ -30,7 +30,7 @@ interface AgGridColumnPropsClone extends ColDef {
     hideInTable?: boolean;
     hideInSearch?: boolean;
     queryField?: string;
-    searchComponent?: ReactNode | JSX.Element;
+    searchComponent?: ReactNode | JSX.Element | ((props: any) => JSX.Element);
     searchComponentProps?: any;
     searchSort?: number;
 }

package/dist/esm/ag-grid-plus/ag-gridPlus.js

@@ -36,6 +36,7 @@ import SettingItem from "./settingItem";
 import { RedoOutlined } from '@ant-design/icons';
 import { convertFilterModel, dateTimeValueFormatter, dateValueFormatter, flatten, toTree } from "./utils";
 import Setting from "./setting";
+import { useGridPlusColumnState } from '.';
 
 var getSort = function getSort(columnState) {
   return columnState ? "".concat(columnState.colId, " ").concat(columnState.sort) : "";
@@ -60,6 +61,7 @@ function AgGridPlus(props) {
       children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
+  var gridPlusColumnState = useGridPlusColumnState();
   var gridRef = useRef();
   var apiRef = useRef();
   var columnsRef = useRef();
@@ -84,29 +86,24 @@ function AgGridPlus(props) {
       rowData = _useState8[0],
       setRowData = _useState8[1];
 
-  var _useState9 = useState([]),
+  var _useState9 = useState({}),
       _useState10 = _slicedToArray(_useState9, 2),
-      selectRows = _useState10[0],
-      setSelectRows = _useState10[1];
+      queryFilter = _useState10[0],
+      setQueryFilter = _useState10[1];
 
-  var _useState11 = useState({}),
+  var _useState11 = useState(),
       _useState12 = _slicedToArray(_useState11, 2),
-      queryFilter = _useState12[0],
-      setQueryFilter = _useState12[1];
+      sortColumn = _useState12[0],
+      setSortColumn = _useState12[1];
 
-  var _useState13 = useState(),
-      _useState14 = _slicedToArray(_useState13, 2),
-      sortColumn = _useState14[0],
-      setSortColumn = _useState14[1];
-
-  var _useState15 = useState({
+  var _useState13 = useState({
     pageSize: 200,
     current: 1,
     total: dataSource ? dataSource.length : 0
   }),
-      _useState16 = _slicedToArray(_useState15, 2),
-      pagination = _useState16[0],
-      setPagination = _useState16[1];
+      _useState14 = _slicedToArray(_useState13, 2),
+      pagination = _useState14[0],
+      setPagination = _useState14[1];
 
   useImperativeHandle(propsGridRef, function () {
     return gridRef.current;
@@ -166,13 +163,13 @@ function AgGridPlus(props) {
   }, [ready, JSON.stringify(gridParams), JSON.stringify(sortColumn), pagination.pageSize, pagination.current]); // 加载列方案
 
   useEffect(function () {
-    if (gridColumnState && columnsRef.current) {
+    if (gridPlusColumnState && gridKey && gridPlusColumnState[gridKey] && columnsRef.current) {
       columnsRef.current.applyColumnState({
-        state: gridColumnState,
+        state: gridPlusColumnState[gridKey],
         applyOrder: true
       });
     }
-  }, [gridColumnState, columnsRef.current]);
+  }, [gridPlusColumnState, columnsRef.current]);
   useEffect(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]); //外部loading
@@ -219,7 +216,9 @@ function AgGridPlus(props) {
     });
   };
 
-  var actionDom = toolBarRender && toolBarRender(apiRef.current, convertFilterModel(queryFilter), queryFilter);
+  var actionDom = useMemo(function () {
+    return toolBarRender && toolBarRender(apiRef.current, convertFilterModel(queryFilter), queryFilter);
+  }, []);
 
   var sortChanged = function sortChanged(columnApi) {
     var sortedColumn = columnApi.getColumnState().find(function (col) {
@@ -232,7 +231,14 @@ function AgGridPlus(props) {
     request && onRequest(queryFilter);
   };
 
-  var onSaveColumnState = function onSaveColumnState(columnState) {};
+  var onRowChanged = useCallback(function (e) {
+    props.onSelectionChanged && props.onSelectionChanged(e);
+  }, []);
+  var onRowSelected = useCallback(function (e) {
+    props.onRowSelected && props.onRowSelected(e);
+  }, []);
+
+  var onColumnStateChanged = function onColumnStateChanged(columnState) {};
 
   useEffect(function () {
     gridRef.current = {
@@ -242,8 +248,13 @@ function AgGridPlus(props) {
   var colDefs = useMemo(function () {
     return React.Children.map(children, function (child, index) {
       return child.props;
+    }).filter(function (x) {
+      return !x.hideInTable;
     });
-  }, [children]);
+  }, []);
+  var rowDataMemo = useMemo(function () {
+    return props.treeData ? flatten(toTree(rowData), treeParentName) : rowData;
+  }, [rowData, props.treeData]);
   return /*#__PURE__*/React.createElement(Spin, {
     spinning: loading,
     wrapperClassName: "grid-spin"
@@ -293,37 +304,23 @@ function AgGridPlus(props) {
     }), /*#__PURE__*/React.createElement(Setting, {
       gridApi: apiRef.current,
       columnApi: columnsRef.current,
-      onSaveColumnState: onSaveColumnState
+      onSaveColumnState: onColumnStateChanged
     })]
   }), /*#__PURE__*/React.createElement(AgGridReact, _extends({
     className: "ag-theme-alpine"
   }, rest, {
-    onFirstDataRendered: function onFirstDataRendered() {} //指定客户端模式
-    ,
+    //指定客户端模式
     rowModelType: "clientSide",
-    rowData: props.treeData ? flatten(toTree(rowData), treeParentName) : rowData,
+    maintainColumnOrder: true,
+    rowData: rowDataMemo,
     onGridReady: onGridReady,
     defaultColDef: defaultColDef,
     onSortChanged: function onSortChanged(event) {
       sortChanged(event.columnApi);
       props.onSortChanged && props.onSortChanged(event);
     },
-    onSelectionChanged: function onSelectionChanged(e) {
-      props.onSelectionChanged && props.onSelectionChanged(e);
-      setSelectRows(e.api.getSelectedRows());
-    },
-    onDragStopped: function onDragStopped(e) {
-      if (columnsRef.current) {// setColumnState(columnsRef.current?.getColumnState());
-      }
-    },
-    onColumnResized: function onColumnResized(e) {
-      if (columnsRef.current) {// setColumnState(columnsRef.current?.getColumnState());
-      }
-    },
-    onColumnMoved: function onColumnMoved() {
-      if (columnsRef.current) {// setColumnState(columnsRef.current?.getColumnState());
-      }
-    },
+    onSelectionChanged: onRowChanged,
+    onRowSelected: onRowSelected,
     columnTypes: columnTypes,
     animateRows: true //停用默认分页组件
     ,

package/dist/esm/ag-grid-plus/context/gridContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GridPlusContext: React.Context<any>;

package/dist/esm/ag-grid-plus/context/gridContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export var GridPlusContext = /*#__PURE__*/React.createContext(null);

package/dist/esm/ag-grid-plus/index.d.ts

@@ -1,4 +1,5 @@
 import AgGridPlus from "./ag-gridPlus";
 import { AgGridColumn } from "./interface";
+export declare const useGridPlusColumnState: () => any;
 export { AgGridPlus, AgGridColumn };
 export { dateValueFormatter, dateTimeValueFormatter, convertFilterModel, convertSortModel, flattenTreeDeep, toTree, flatten } from "./utils";

package/dist/esm/ag-grid-plus/index.js

@@ -1,4 +1,9 @@
+import React from "react";
 import AgGridPlus from "./ag-gridPlus";
 import { AgGridColumn } from "./interface";
+import { GridPlusContext } from "./context/gridContext";
+export var useGridPlusColumnState = function useGridPlusColumnState() {
+  return React.useContext(GridPlusContext);
+};
 export { AgGridPlus, AgGridColumn };
 export { dateValueFormatter, dateTimeValueFormatter, convertFilterModel, convertSortModel, flattenTreeDeep, toTree, flatten } from "./utils";

package/dist/esm/ag-grid-plus/interface.d.ts

@@ -30,7 +30,7 @@ interface AgGridColumnPropsClone extends ColDef {
     hideInTable?: boolean;
     hideInSearch?: boolean;
     queryField?: string;
-    searchComponent?: ReactNode | JSX.Element;
+    searchComponent?: ReactNode | JSX.Element | ((props: any) => JSX.Element);
     searchComponentProps?: any;
     searchSort?: number;
 }