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

package/MediaQuery/index.d.ts

@@ -0,0 +1,13 @@
+// @ts-ignore
+import * as React from 'react';
+import { ComponentProps } from '../types';
+
+interface MediaQueryProps extends ComponentProps {
+  disabled?: boolean;
+}
+
+interface MediaQueryFc extends React.FC<MediaQueryProps> {
+}
+
+declare const MediaQuery: MediaQueryFc;
+export default MediaQuery;

package/MediaQuery/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+const MEDIA_QUERY_LIST = {
+  MAX_WIDTH_479: '(max-width: 479px)',
+  MIN_WIDTH_480_AND_MAX_WIDTH_599: '(min-width: 480px) and (max-width: 599px)',
+  MIN_WIDTH_600_AND_MAX_WIDTH_899: '(min-width: 600px) and (max-width: 899px)',
+  MIN_WIDTH_900_AND_MAX_WIDTH_1199: '(min-width: 900px) and (max-width: 1199px)',
+  MIN_WIDTH_1200_AND_MAX_WIDTH_1439: '(min-width: 1200px) and (max-width: 1439px)',
+  MIN_WIDTH_1440: '(min-width: 1440px)'
+};
+export default class MediaQuery extends React.Component {
+  state = {
+    media: undefined
+  };
+  componentDidMount() {
+    const {
+      disabled
+    } = this.props;
+    if (disabled) {
+      return;
+    }
+
+    // 超小
+    this.ultraSmall = window.matchMedia(MEDIA_QUERY_LIST.MAX_WIDTH_479);
+    // 正常小
+    this.normalSmall = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_480_AND_MAX_WIDTH_599);
+    // 中等
+    this.normalMiddle = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_600_AND_MAX_WIDTH_899);
+    // 正常大
+    this.normalLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_900_AND_MAX_WIDTH_1199);
+    // 超大
+    this.superLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1200_AND_MAX_WIDTH_1439);
+    // 超宽
+    this.normalHuge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1440);
+    this.handleMediaQueryChange();
+    this.ultraSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalMiddle.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.superLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalHuge.addEventListener('change', this.handleMediaQueryChange.bind(this));
+  }
+  componentWillUnmount() {
+    this.ultraSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalMiddle.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.superLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalHuge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+  }
+  handleMediaQueryChange() {
+    const {
+      disabled
+    } = this.props;
+    if (disabled) {
+      return;
+    }
+    let media;
+    if (this.ultraSmall.matches) {
+      media = this.ultraSmall.media;
+    } else if (this.normalSmall.matches) {
+      media = this.normalSmall.media;
+    } else if (this.normalMiddle.matches) {
+      media = this.normalMiddle.media;
+    } else if (this.normalLarge.matches) {
+      media = this.normalLarge.media;
+    } else if (this.superLarge.matches) {
+      media = this.superLarge.media;
+    } else if (this.normalHuge.matches) {
+      media = this.normalHuge.media;
+    }
+    this.setState({
+      media: Object.keys(MEDIA_QUERY_LIST).find(key => media === MEDIA_QUERY_LIST[key])
+    });
+  }
+  get children() {
+    return this.props.children;
+  }
+  render() {
+    const {
+      media
+    } = this.state;
+    const {
+      children
+    } = this.props;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (Array.isArray(children) ? children : [].concat(children)).map((item, key) => ( /*#__PURE__*/React.createElement(item.type, {
+      key,
+      ...item.props,
+      ['data-media-query']: media
+    }))));
+  }
+}

package/MediaQuery/index.mjs

@@ -0,0 +1,104 @@
+import React from 'react';
+
+const MEDIA_QUERY_LIST = {
+  MAX_WIDTH_479: '(max-width: 479px)',
+  MIN_WIDTH_480_AND_MAX_WIDTH_599: '(min-width: 480px) and (max-width: 599px)',
+  MIN_WIDTH_600_AND_MAX_WIDTH_899: '(min-width: 600px) and (max-width: 899px)',
+  MIN_WIDTH_900_AND_MAX_WIDTH_1199: '(min-width: 900px) and (max-width: 1199px)',
+  MIN_WIDTH_1200_AND_MAX_WIDTH_1439: '(min-width: 1200px) and (max-width: 1439px)',
+  MIN_WIDTH_1440: '(min-width: 1440px)'
+};
+
+export default class MediaQuery extends React.Component {
+  state = {
+    media: undefined
+  };
+
+  componentDidMount () {
+    const { disabled } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    // 超小
+    this.ultraSmall = window.matchMedia(MEDIA_QUERY_LIST.MAX_WIDTH_479);
+    // 正常小
+    this.normalSmall = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_480_AND_MAX_WIDTH_599);
+    // 中等
+    this.normalMiddle = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_600_AND_MAX_WIDTH_899);
+    // 正常大
+    this.normalLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_900_AND_MAX_WIDTH_1199);
+    // 超大
+    this.superLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1200_AND_MAX_WIDTH_1439);
+    // 超宽
+    this.normalHuge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1440);
+
+    this.handleMediaQueryChange();
+
+    this.ultraSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalMiddle.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.superLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalHuge.addEventListener('change', this.handleMediaQueryChange.bind(this));
+  }
+
+  componentWillUnmount () {
+    this.ultraSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalMiddle.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.superLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+    this.normalHuge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
+  }
+
+  handleMediaQueryChange () {
+    const { disabled } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    let media;
+
+    if (this.ultraSmall.matches) {
+      media = this.ultraSmall.media;
+    } else if (this.normalSmall.matches) {
+      media = this.normalSmall.media;
+    } else if (this.normalMiddle.matches) {
+      media = this.normalMiddle.media;
+    } else if (this.normalLarge.matches) {
+      media = this.normalLarge.media;
+    } else if (this.superLarge.matches) {
+      media = this.superLarge.media;
+    } else if (this.normalHuge.matches) {
+      media = this.normalHuge.media;
+    }
+
+    this.setState({ media: Object.keys(MEDIA_QUERY_LIST).find(key => media === MEDIA_QUERY_LIST[ key ]) });
+  }
+
+  get children () {
+    return this.props.children;
+  }
+
+  render () {
+    const { media } = this.state;
+    const { children } = this.props;
+
+    return (
+      <>
+        {(Array.isArray(children)
+          ? children
+          : [].concat(children)).map((item, key) => (
+          React.createElement(item.type, {
+            key,
+            ...item.props,
+            [ 'data-media-query' ]: media
+          })
+        ))}
+      </>
+    );
+  }
+}

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.7",
+  "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"
   }
 }