@cqsjjb/jjb-react-admin-component 3.0.30 → 3.1.0

package/Table/index.d.ts

@@ -4,11 +4,13 @@ import * as React from 'react';
 import type { TableProps } from 'antd';
 
 interface OverTableProps extends TableProps {
-  // 是否禁用内容区滚动，默认true
+  /**
+   * 是否禁用内容区滚动，默认false
+   */
   disabledResizer?: boolean;
-  // 当一个路由下存在多个表格的情况下
-  // 需要给每一个表格设置一个唯一存储索引
-  // 若没有设置则使用默认索引，请注意缓存数据会被覆盖
+  /**
+   * 当一个路由下存在多个表格的情况下 需要给每一个表格设置一个唯一存储索引 若没有设置则使用默认索引，请注意缓存数据会被覆盖
+   */
   storeIndex?: string;
 }
 

package/Table/index.js

@@ -1,46 +1,74 @@
 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 { tools } from '@cqsjjb/jjb-common-lib';
 import { ProTable } from '@ant-design/pro-components';
 import { useAntdResizableHeader } from 'use-antd-resizable-header';
-import { getElementAbsRect, antPrefix, className, setTableSize, getTableSize, getPersistenceKey } from './utils';
+import { antPrefix, setTableSize, getTableSize, getPersistenceKey } from './utils';
 import './index.less';
 require('use-antd-resizable-header/dist/style.css');
 export default function TablePro(props) {
+  const prefix = antPrefix || 'ant';
+  const baseCls = `.${prefix}-table`;
+  const tableCls = `${baseCls}-wrapper`;
+  const tableBodyCls = `${baseCls}-body`;
   const {
     storeIndex
   } = props;
   const [size, setSize] = React.useState(getTableSize(storeIndex) || 'default');
   const [tableHeight, setTableHeight] = React.useState(0);
   const persistenceKey = getPersistenceKey(storeIndex);
+  const enabledResizer = tools.isUndefined(props.disabledResizer);
   React.useEffect(() => {
-    let observer;
-    const table = document.querySelector(className('pro-table'));
-    if (!props.disabledResizer) {
-      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 = 38;
-          const height = window.innerHeight - (gap + tBodyNativeRect.y + tFooterAbsRect.absHeight + tPaginationAbsRect.absHeight);
-          setTableHeight(height);
-        }, 100);
+    let mutationObserver, resizeObserver;
+    if (enabledResizer) {
+      // 监听-DOM树
+      mutationObserver = new MutationObserver(mutations => mutations.forEach(() => calcTableHeight()));
+      // 监听-缩放
+      resizeObserver = new ResizeObserver(entries => entries.forEach(() => calcTableHeight()));
+
+      // 初始化首次计算
+      setTimeout(() => calcTableHeight(), 500);
+
+      // 执行-监听-缩放
+      resizeObserver.observe(document.body);
+      // 执行-监听-DOM树是否发生变化
+      mutationObserver.observe(document.body, {
+        subtree: true,
+        childList: true
       });
-      observer.observe(table);
     }
     return () => {
-      if (observer && !props.disabledResizer) {
-        observer.unobserve(table);
-        observer.disconnect();
+      if (mutationObserver && resizeObserver && enabledResizer) {
+        resizeObserver.unobserve(document.body);
+        mutationObserver.unobserve(document.body);
       }
     };
   }, []);
   React.useEffect(() => {
     setTableSize(size, storeIndex);
   }, [size]);
+
+  // 计算高度
+  const calcTableHeight = () => {
+    try {
+      // table元素
+      const tableEl = document.querySelector(tableCls);
+      // table-body元素
+      const tableBodyEl = document.querySelector(tableBodyCls);
+      if (tableBodyEl && tableEl) {
+        // 获取table元素的矩形数据
+        const tableRect = tableEl.getBoundingClientRect();
+        // 获取table-body元素的矩形数据
+        const tableBodyRect = tableBodyEl.getBoundingClientRect();
+        // 获取底部的高度差
+        const bottomHeight = tableRect.bottom - tableBodyRect.bottom;
+        // 计算最终值
+        setTableHeight(innerHeight - tableBodyRect.top - bottomHeight - 22);
+      }
+    } catch (e) {
+      window.console['error'](e);
+    }
+  };
   const {
     components,
     resizableColumns,
@@ -57,7 +85,7 @@ export default function TablePro(props) {
   const scroll = {
     x: tableWidth
   };
-  if (!props.disabledResizer) {
+  if (enabledResizer) {
     scroll.y = tableHeight;
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProTable, _extends({}, props, {

package/Table/utils.js

@@ -1,79 +1,5 @@
 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.30",
+  "version": "3.1.0",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",

package/ControlWrapper/index.mjs

@@ -1,399 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Cascader as OriginCascader,
-  Col,
-  DatePicker as OriginDatePicker,
-  Input as OriginInput,
-  Row,
-  Select as OriginSelect,
-  TreeSelect as OriginTreeSelect
-} from 'antd';
-import './index.less';
-
-const prefixCls = process?.env?.app?.antd[ 'ant-prefix' ] || 'ant';
-
-/**
- * @param classList {string[]}
- * @return {string}
- */
-function classnames (classList) {
-  return classList.filter(i => i).join(' ');
-}
-
-function algorithm () {
-  const value = document.documentElement.style.getPropertyValue('--saas-algorithm');
-  return value
-    ? value === '#FFF'
-      ? 'default'
-      : 'dark'
-    : 'default';
-}
-
-class Input extends React.Component {
-  get algorithm () {
-    return algorithm();
-  }
-
-  render () {
-    return (
-      <div
-        style={this.props.style}
-        className={classnames([
-          `${prefixCls}-form-item-control-label-wrapper`,
-          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
-          this.props.label && `${prefixCls}-form-item-control-label-has`
-        ])}
-      >
-        <Row
-          align="middle"
-          wrap={false}
-        >
-          {this.props.label && (
-            <Col
-              span={this.props.labelSpan}
-              className={`${prefixCls}-form-item-control-label-span`}
-            >
-              {this.props.label}
-            </Col>
-          )}
-          <Col flex={1}>
-            <OriginInput
-              style={{
-                width: '100%'
-              }}
-              value={this.props.value}
-              maxLength={this.props.maxLength}
-              allowClear={this.props.allowClear}
-              placeholder={this.props.placeholder}
-              onChange={e => this.props.onChange(e.target.value || undefined)}
-            />
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-Input.propTypes = {
-  value: PropTypes.any,
-  label: PropTypes.string,
-  labelSpan: PropTypes.number,
-  maxLength: PropTypes.number,
-  allowClear: PropTypes.bool,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-class Select extends React.Component {
-  get algorithm () {
-    return algorithm();
-  }
-
-  render () {
-    return (
-      <div
-        style={this.props.style}
-        className={classnames([
-          `${prefixCls}-form-item-control-label-wrapper`,
-          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
-          this.props.label && `${prefixCls}-form-item-control-label-has`
-        ])}
-      >
-        <Row
-          align="middle"
-          wrap={false}
-        >
-          {this.props.label && (
-            <Col
-              span={this.props.labelSpan}
-              className={`${prefixCls}-form-item-control-label-span`}
-            >
-              {this.props.label}
-            </Col>
-          )}
-          <Col flex={1}>
-            <OriginSelect
-              mode={this.props.mode}
-              style={{
-                width: '100%'
-              }}
-              value={this.props.value}
-              allowClear={this.props.allowClear}
-              maxTagCount={this.props.maxTagCount || 3}
-              placeholder={this.props.placeholder}
-              onChange={value => this.props.onChange(value || undefined)}
-            >
-              {this.props.options
-                ? this.props.options
-                : this.props.children}
-            </OriginSelect>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-Select.propTypes = {
-  mode: PropTypes.string,
-  value: PropTypes.any,
-  label: PropTypes.string,
-  labelSpan: PropTypes.number,
-  allowClear: PropTypes.bool,
-  maxTagCount: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-class Cascader extends React.Component {
-  get algorithm () {
-    return algorithm();
-  }
-
-  render () {
-    return (
-      <div
-        style={this.props.style}
-        className={classnames([
-          `${prefixCls}-form-item-control-label-wrapper`,
-          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
-          this.props.label && `${prefixCls}-form-item-control-label-has`
-        ])}
-      >
-        <Row
-          align="middle"
-          wrap={false}
-        >
-          {this.props.label && (
-            <Col
-              span={this.props.labelSpan}
-              className={`${prefixCls}-form-item-control-label-span`}
-            >
-              {this.props.label}
-            </Col>
-          )}
-          <Col flex={1}>
-            <OriginCascader
-              style={{
-                width: '100%'
-              }}
-              value={this.props.value}
-              options={this.props.options}
-              multiple={this.props.multiple}
-              allowClear={this.props.allowClear}
-              fieldNames={this.props.fieldNames}
-              maxTagCount={this.props.maxTagCount || 3}
-              placeholder={this.props.placeholder}
-              showCheckedStrategy={this.props.showCheckedStrategy}
-              onChange={value => this.props.onChange(value || undefined)}
-            />
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-Cascader.propTypes = {
-  mode: PropTypes.string,
-  value: PropTypes.any,
-  label: PropTypes.string,
-  options: PropTypes.array,
-  multiple: PropTypes.bool,
-  labelSpan: PropTypes.number,
-  allowClear: PropTypes.bool,
-  fieldNames: PropTypes.object,
-  maxTagCount: PropTypes.number,
-  placeholder: PropTypes.string,
-  showCheckedStrategy: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-
-class RangePicker extends React.Component {
-  get algorithm () {
-    return algorithm();
-  }
-
-  render () {
-    return (
-      <div
-        style={this.props.style}
-        className={classnames([
-          `${prefixCls}-form-item-control-label-wrapper`,
-          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
-          this.props.label && `${prefixCls}-form-item-control-label-has`
-        ])}
-      >
-        <Row
-          align="middle"
-          wrap={false}
-        >
-          {this.props.label && (
-            <Col
-              span={this.props.labelSpan}
-              className={`${prefixCls}-form-item-control-label-span`}
-            >
-              {this.props.label}
-            </Col>
-          )}
-          <Col style={{ flex: 1 }}>
-            <OriginDatePicker.RangePicker
-              style={{
-                width: '100%'
-              }}
-              value={this.props.value}
-              format={this.props.format}
-              showTime={this.props.showTime || undefined}
-              placeholder={this.props.placeholder}
-              onChange={value => this.props.onChange(value || undefined)}
-            />
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-RangePicker.propTypes = {
-  value: PropTypes.any,
-  label: PropTypes.string,
-  format: PropTypes.string,
-  labelSpan: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-class DatePicker extends React.Component {
-  static RangePicker = RangePicker;
-
-  get algorithm () {
-    return algorithm();
-  }
-
-  render () {
-    return (
-      <div
-        style={this.props.style}
-        className={classnames([
-          `${prefixCls}-form-item-control-label-wrapper`,
-          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
-          this.props.label && `${prefixCls}-form-item-control-label-has`
-        ])}
-      >
-        <Row
-          align="middle"
-          wrap={false}
-        >
-          {this.props.label && (
-            <Col
-              span={this.props.labelSpan}
-              className={`${prefixCls}-form-item-control-label-span`}
-            >
-              {this.props.label}
-            </Col>
-          )}
-          <Col flex={1}>
-            <OriginDatePicker
-              style={{
-                width: '100%'
-              }}
-              value={this.props.value}
-              format={this.props.format}
-              picker={this.props.picker || undefined}
-              showTime={this.props.showTime || undefined}
-              placeholder={this.props.placeholder}
-              onChange={value => this.props.onChange(value || undefined)}
-            />
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-DatePicker.propTypes = {
-  value: PropTypes.any,
-  label: PropTypes.string,
-  format: PropTypes.string,
-  labelSpan: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-class TreeSelect extends React.Component {
-  get algorithm () {
-    return algorithm();
-  }
-
-  render () {
-    return (
-      <div
-        style={this.props.style}
-        className={classnames([
-          `${prefixCls}-form-item-control-label-wrapper`,
-          `${prefixCls}-form-item-control-label-wrapper-${this.algorithm}`,
-          this.props.label && `${prefixCls}-form-item-control-label-has`
-        ])}
-      >
-        <Row
-          align="middle"
-          wrap={false}
-        >
-          {this.props.label && (
-            <Col
-              span={this.props.labelSpan}
-              className={`${prefixCls}-form-item-control-label-span`}
-            >
-              {this.props.label}
-            </Col>
-          )}
-          <Col flex={1}>
-            <OriginTreeSelect
-              showSearch
-              allowClear
-              style={{
-                width: '100%'
-              }}
-              treeData={this.props.treeData}
-              fieldNames={this.props.fieldNames}
-              dropdownStyle={this.props.dropdownStyle}
-              maxTagCount={2}
-              value={this.props.value}
-              placeholder={this.props.placeholder
-                ? this.props.placeholder
-                : '请选择分类'}
-              defaultValue={this.props.defaultValue
-                ? this.props.defaultValue
-                : undefined}
-              treeCheckable={this.props.checkbox}
-              treeNodeFilterProp="title"
-              showCheckedStrategy={OriginTreeSelect.SHOW_PARENT}
-              onChange={value => this.props.onChange(value)}
-            />
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
-
-TreeSelect.propTypes = {
-  label: PropTypes.string,
-  checkbox: PropTypes.bool,
-  treeData: PropTypes.array,
-  labelSpan: PropTypes.number,
-  fieldNames: PropTypes.object,
-  defaultValue: PropTypes.array,
-  dropdownStyle: PropTypes.object,
-  onChange: PropTypes.func
-};
-
-export default {
-  Input,
-  Select,
-  Cascader,
-  DatePicker,
-  TreeSelect
-};

package/ErrorBoundary/index.mjs

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Result, Tooltip, Button } from 'antd';
-
-export default class ErrorBoundary extends React.Component {
-  state = {
-    hasError: false,
-    errorInfo: '',
-    errorStack: undefined
-  };
-
-  componentDidCatch(error, info) {
-    this.setState({
-      hasError: true,
-      errorInfo: error.message,
-      errorStack: info.componentStack
-    });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <Result
-          status="error"
-          title="应用运行异常"
-          subTitle={(
-            <React.Fragment>
-              <div>{this.state.errorInfo}</div>
-              <div
-                style={{
-                  width: 700,
-                  display: 'inline-block',
-                  overflow: 'auto',
-                  maxHeight: 400,
-                  textAlign: 'left',
-                  whiteSpace: 'pre-line'
-                }}
-              >
-                {this.state.errorStack}
-              </div>
-            </React.Fragment>
-          )}
-          extra={(
-            <Tooltip title="若刷新任然无法解决，请联系技术人员解决">
-              <Button
-                type="primary"
-                onClick={() => window.location.reload()}
-              >
-                刷新重试
-              </Button>
-            </Tooltip>
-          )}
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}