@cqsjjb/jjb-react-admin-component 3.0.8 → 3.0.9

package/MediaQuery/index.d.ts

@@ -2,12 +2,12 @@
 import * as React from 'react';
 import { ComponentProps } from '../types';
 
-interface mediaQueryProps extends ComponentProps {
+interface MediaQueryProps extends ComponentProps {
   disabled?: boolean;
 }
 
-interface mediaQueryFc extends React.FC<mediaQueryProps> {
+interface MediaQueryFc extends React.FC<MediaQueryProps> {
 }
 
-declare const mediaQuery: mediaQueryFc;
-export default mediaQuery;
+declare const MediaQuery: MediaQueryFc;
+export default MediaQuery;

package/SearchForm/index.d.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { ComponentProps } from '../types';
 
-interface searchFormProps extends ComponentProps {
+interface SearchFormProps extends ComponentProps {
   /**
    * @description form实例
    */
@@ -45,8 +45,8 @@ interface searchFormProps extends ComponentProps {
   onReset?: (values: { [ p: string ]: any }) => void;
 }
 
-interface searchFormFc extends React.FC<searchFormProps> {
+interface SearchFormFc extends React.FC<SearchFormProps> {
 }
 
-declare const searchForm: searchFormFc;
-export default searchForm;
+declare const SearchForm: SearchFormFc;
+export default SearchForm;

package/Table/index.d.ts

@@ -0,0 +1,15 @@
+// @ts-ignore
+import * as React from 'react';
+// @ts-ignore
+import type { TableProps } from 'antd';
+
+interface OverTableProps extends TableProps {
+  // 是否禁用内容区滚动，默认true
+  disabledResizer?: boolean;
+}
+
+interface TableFc extends React.FC<OverTableProps> {
+}
+
+declare const Table: TableFc;
+export default Table;

package/Table/index.js

@@ -0,0 +1,86 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { ProTable } from '@ant-design/pro-components';
+import { useAntdResizableHeader } from 'use-antd-resizable-header';
+import { getElementAbsRect, antPrefix, className, setTableSize, getTableSize, getPersistenceKey } from './utils';
+import './index.less';
+require('use-antd-resizable-header/dist/style.css');
+export default function TablePro(props) {
+  const [size, setSize] = React.useState(getTableSize() || 'default');
+  const [tableHeight, setTableHeight] = React.useState(0);
+  const persistenceKey = getPersistenceKey();
+  React.useEffect(() => {
+    if (!props.disabledResizer) {
+      let observer;
+      const table = document.querySelector(className('pro-table'));
+      observer = new ResizeObserver(() => {
+        setTimeout(() => {
+          const tBody = document.querySelector(className('table-body'));
+          const tFooter = document.querySelector(className('table-footer'));
+          const tPagination = document.querySelector(className('table-pagination'));
+          const tBodyNativeRect = tBody.getBoundingClientRect();
+          const tFooterAbsRect = getElementAbsRect(tFooter);
+          const tPaginationAbsRect = getElementAbsRect(tPagination);
+          const gap = 24;
+          const height = window.innerHeight - (gap + tBodyNativeRect.y + tFooterAbsRect.absHeight + tPaginationAbsRect.absHeight);
+          setTableHeight(height);
+        }, 100);
+      });
+      observer.observe(table);
+    }
+    return () => {
+      if (observer && !props.disabledResizer) {
+        observer.unobserve(table);
+        observer.disconnect();
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    setTableSize(size);
+  }, [size]);
+  const {
+    components,
+    resizableColumns,
+    tableWidth,
+    resetColumns
+    // refresh
+  } = useAntdResizableHeader({
+    columns: props.columns,
+    columnsState: {
+      persistenceKey: persistenceKey.resizable,
+      persistenceType: 'localStorage'
+    }
+  });
+  const scroll = {
+    x: tableWidth
+  };
+  if (!props.disabledResizer) {
+    scroll.y = tableHeight;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({}, props, {
+    ghost: true,
+    columnEmptyText: true,
+    size: size,
+    search: false,
+    scroll: scroll,
+    columns: resizableColumns,
+    className: `${antPrefix}-gbs-pro-table`,
+    options: {
+      reload: false,
+      fullScreen: true,
+      setting: {
+        checkedReset: true,
+        extra: /*#__PURE__*/React.createElement("a", {
+          className: `${antPrefix}-pro-table-column-setting-action-rest-button`,
+          onClick: resetColumns
+        }, "\u91CD\u7F6E\u5217\u5BBD")
+      }
+    },
+    components: components,
+    columnsState: {
+      persistenceKey: persistenceKey.columnState,
+      persistenceType: 'localStorage'
+    },
+    onSizeChange: setSize
+  })));
+}

package/Table/index.less

@@ -0,0 +1,13 @@
+.@{ant-prefix} {
+  &-gbs-pro-table {
+    .@{ant-prefix}-pro-card {
+      &-body {
+        .@{ant-prefix}-pro-table-list-toolbar {
+          &-container {
+            padding-top: 0;
+          }
+        }
+      }
+    }
+  }
+}

package/Table/index.mjs

@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { ProTable } from '@ant-design/pro-components';
+import { useAntdResizableHeader } from 'use-antd-resizable-header';
+
+import { getElementAbsRect, antPrefix, className, setTableSize, getTableSize, getPersistenceKey } from './utils';
+
+import './index.less';
+
+require('use-antd-resizable-header/dist/style.css');
+
+export default function TablePro(props) {
+  const [ size, setSize ] = React.useState(getTableSize() || 'default');
+  const [ tableHeight, setTableHeight ] = React.useState(0);
+
+  const persistenceKey = getPersistenceKey();
+
+  React.useEffect(() => {
+    if (!props.disabledResizer) {
+      let observer;
+      const table = document.querySelector(className('pro-table'));
+
+      observer = new ResizeObserver(() => {
+        setTimeout(() => {
+          const tBody = document.querySelector(className('table-body'));
+          const tFooter = document.querySelector(className('table-footer'));
+          const tPagination = document.querySelector(className('table-pagination'));
+
+          const tBodyNativeRect = tBody.getBoundingClientRect();
+          const tFooterAbsRect = getElementAbsRect(tFooter);
+          const tPaginationAbsRect = getElementAbsRect(tPagination);
+
+          const gap = 24;
+
+          const height = window.innerHeight - (
+            gap +
+            tBodyNativeRect.y +
+            tFooterAbsRect.absHeight +
+            tPaginationAbsRect.absHeight
+          );
+          setTableHeight(height);
+        }, 100);
+      });
+
+      observer.observe(table);
+    }
+
+    return () => {
+      if (observer && !props.disabledResizer) {
+        observer.unobserve(table);
+        observer.disconnect();
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    setTableSize(size);
+  }, [ size ]);
+
+  const {
+    components,
+    resizableColumns,
+    tableWidth,
+    resetColumns
+    // refresh
+  } = useAntdResizableHeader({
+    columns: props.columns,
+    columnsState: {
+      persistenceKey: persistenceKey.resizable,
+      persistenceType: 'localStorage'
+    }
+  });
+
+  const scroll = {
+    x: tableWidth
+  };
+
+  if (!props.disabledResizer) {
+    scroll.y = tableHeight;
+  }
+
+  return (
+    <>
+      <ProTable
+        {...props}
+        ghost
+        columnEmptyText
+        size={size}
+        search={false}
+        scroll={scroll}
+        columns={resizableColumns}
+        className={`${antPrefix}-gbs-pro-table`}
+        options={{
+          reload: false,
+          fullScreen: true,
+          setting: {
+            checkedReset: true,
+            extra: (
+              <a
+                className={`${antPrefix}-pro-table-column-setting-action-rest-button`}
+                onClick={resetColumns}
+              >
+                重置列宽
+              </a>
+            )
+          }
+        }}
+        components={components}
+        columnsState={{
+          persistenceKey: persistenceKey.columnState,
+          persistenceType: 'localStorage'
+        }}
+        onSizeChange={setSize}
+      />
+    </>
+  );
+}

package/Table/utils.js

@@ -0,0 +1,99 @@
+import { tools } from '@cqsjjb/jjb-common-lib';
+
+/**
+ * @param ele {HTMLElement}
+ * @return {{absHeight: number, absWidth: number}}
+ */
+export function getElementAbsRect(ele) {
+  if (!ele) {
+    return {
+      absWidth: 0,
+      absHeight: 0
+    };
+  }
+
+  const style = getElementRect(ele);
+
+  return {
+    absHeight: tools.arrayHelper.sum([
+      style.height,
+      style.marginTop,
+      style.marginBottom,
+      style.borderTopWidth,
+      style.borderBottomWidth,
+      ...(style.boxSizing === 'content-box'
+        ? [
+          style.paddingTop,
+          style.paddingBottom
+        ]
+        : [])
+    ]),
+    absWidth: tools.arrayHelper.sum([
+      style.width,
+      style.marginLeft,
+      style.marginRight,
+      style.borderLeftWidth,
+      style.borderRightWidth,
+      ...(style.boxSizing === 'content-box'
+        ? [
+          style.paddingLeft,
+          style.paddingRight
+        ]
+        : [])
+    ])
+  };
+}
+
+/**
+ * @param ele {HTMLElement}
+ * @return {{paddingRight: number, marginLeft: number, marginRight: number, paddingBottom: number, borderLeftWidth: number, borderTopWidth: number, borderRightWidth: number, width: number, marginBottom: number, paddingTop: number, borderBottomWidth: number, paddingLeft: number, marginTop: number, height: number, boxSizing: string}}
+ */
+export function getElementRect(ele) {
+  let style;
+  try {
+    style = window.getComputedStyle(ele);
+  } catch (e) {
+    style = {};
+  }
+  return {
+    width: parseFloat(style[ 'width' ] || '0'),
+    height: parseFloat(style[ 'height' ] || '0'),
+    marginTop: parseFloat(style[ 'margin-top' ] || '0'),
+    marginBottom: parseFloat(style[ 'margin-bottom' ] || '0'),
+    marginLeft: parseFloat(style[ 'margin-left' ] || '0'),
+    marginRight: parseFloat(style[ 'margin-bottom' ] || '0'),
+    borderTopWidth: parseFloat(style[ 'border-top-width' ] || '0'),
+    borderBottomWidth: parseFloat(style[ 'border-bottom-width' ] || '0'),
+    borderLeftWidth: parseFloat(style[ 'border-left-width' ] || '0'),
+    borderRightWidth: parseFloat(style[ 'border-right-width' ] || '0'),
+    paddingTop: parseFloat(style[ 'padding-top' ] || '0'),
+    paddingBottom: parseFloat(style[ 'padding-bottom' ] || '0'),
+    paddingLeft: parseFloat(style[ 'padding-left' ] || '0'),
+    paddingRight: parseFloat(style[ 'padding-right' ] || '0'),
+    boxSizing: style[ 'box-sizing' ]
+  };
+}
+
+export const antPrefix = process.env.app.antd[ 'ant-prefix' ];
+
+export function className(name) {
+  return `.${antPrefix}-${name}`;
+}
+
+export function getPersistenceKey() {
+  const basename = process.env?.app?.basename;
+  const pathname = decodeURIComponent(window.location.pathname);
+  return {
+    size: `${basename}#${pathname}#size`,
+    resizable: `${basename}#${pathname}#resizable`,
+    columnState: `${basename}#${pathname}#columnState`
+  };
+}
+
+export function getTableSize() {
+  return window.localStorage.getItem(getPersistenceKey().size);
+}
+
+export function setTableSize(value) {
+  return window.localStorage.setItem(getPersistenceKey().size, value);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",
@@ -12,7 +12,9 @@
     "axios": "^1.6.5",
     "spark-md5": "^3.0.2",
     "classnames": "^2.5.1",
-    "antd-img-crop": "^4.21.0",
-    "@ant-design/pro-layout": "^7.17.16"
+    "antd-img-crop": "latest",
+    "@ant-design/pro-layout": "latest",
+    "use-antd-resizable-header": "latest",
+    "@ant-design/pro-components": "latest"
   }
 }