@cqsjjb/jjb-react-admin-component 3.1.3 → 3.2.0-beta.0

package/SearchForm/index.js

@@ -1,127 +1,112 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Form, Button, Space, Row, Col } from 'antd';
 import { SearchOutlined, DoubleRightOutlined, UndoOutlined } from '@ant-design/icons';
-import './index.less';
-class searchForm extends React.Component {
-  form = /*#__PURE__*/React.createRef();
-  state = {
-    isOpen: false
-  };
-  getButtons() {
-    const {
-      form,
-      expand,
-      formLine,
-      colSize,
-      loading,
-      onReset,
-      onExpand
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
-      type: "primary",
-      icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
-      htmlType: "submit",
-      loading: loading
-    }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
-      icon: /*#__PURE__*/React.createElement(UndoOutlined, null),
-      loading: loading,
-      onClick: () => {
-        form ? form.current.resetFields() : this.form.current.resetFields();
-        onReset(form ? form.current.getFieldsValue() : this.form.current.getFieldsValue());
-      }
-    }, "\u91CD\u7F6E"), expand && formLine.length / colSize > 1 && /*#__PURE__*/React.createElement(Button, {
-      icon: /*#__PURE__*/React.createElement(DoubleRightOutlined, {
-        style: {
-          transform: this.state.isOpen ? 'rotate(-90deg)' : 'rotate(90deg)'
-        }
-      }),
-      onClick: () => {
-        const open = !this.state.isOpen;
-        this.setState({
-          isOpen: open
-        }, () => {
-          onExpand && onExpand(open);
-        });
-      }
-    }, this.state.isOpen ? '收起' : '展开'));
-  }
-  groupsList() {
-    const arr = [];
-    this.props.formLine.forEach(i => {
-      arr.push({
-        show: true,
-        node: i
+const SearchForm = ({
+  form: externalForm,
+  style,
+  expand,
+  // 受控
+  defaultExpand = false,
+  // 内部默认展开
+  colSize = 3,
+  loading = false,
+  formLine = [],
+  initialValues = {},
+  onRef = () => {},
+  onReset = () => {},
+  onFinish = () => {},
+  onExpand
+}) => {
+  const internalForm = useRef();
+  const form = externalForm || internalForm;
+  const [internalOpen, setInternalOpen] = useState(defaultExpand);
+  useEffect(() => {
+    if (onRef) {
+      onRef(form);
+    }
+  }, [form, onRef]);
+  const isControlled = expand !== undefined;
+  const isOpen = isControlled ? expand : internalOpen;
+  const handleToggle = () => {
+    if (isControlled) {
+      onExpand && onExpand(!expand);
+    } else {
+      setInternalOpen(prev => {
+        const next = !prev;
+        onExpand && onExpand(next);
+        return next;
       });
-    });
-    if (this.props.expand && this.state.isOpen) {
-      return arr;
     }
-    if (!this.props.expand && arr.length > 3) {
-      return arr;
+  };
+  const getButtons = () => /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    htmlType: "submit",
+    loading: loading
+  }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(UndoOutlined, null),
+    loading: loading,
+    onClick: () => {
+      form.current.resetFields();
+      onReset(form.current.getFieldsValue());
     }
-    arr.forEach((i, index) => {
-      if (index > 2) {
-        i.show = false;
+  }, "\u91CD\u7F6E"), formLine.length / colSize > 1 && /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(DoubleRightOutlined, {
+      style: {
+        transform: isOpen ? 'rotate(-90deg)' : 'rotate(90deg)'
       }
-    });
-    return arr;
-  }
-  componentDidMount() {
-    if (this.props.onRef) {
-      this.props.onRef(this.form);
+    }),
+    onClick: handleToggle
+  }, isOpen ? '收起' : '展开'));
+  const groupsList = () => {
+    const arr = formLine.map(node => ({
+      show: true,
+      node
+    }));
+    if (isOpen || arr.length <= 3) {
+      return arr;
     }
-  }
-  render() {
-    const {
-      form,
-      style,
-      colSize,
-      initialValues,
-      onFinish
-    } = this.props;
-    const formItemList = this.groupsList();
-    return formItemList.length > 0 ? /*#__PURE__*/React.createElement(Form, {
-      ref: form || this.form,
-      style: style,
-      initialValues: initialValues,
-      onFinish: values => onFinish(values)
-    }, /*#__PURE__*/React.createElement(Row, {
-      gutter: [16, 16]
-    }, formItemList.map((item, index) => /*#__PURE__*/React.createElement(Col, {
-      style: {
-        display: item.show ? 'block' : 'none'
-      },
-      key: index,
-      span: 24 / colSize
-    }, item.node)), /*#__PURE__*/React.createElement(Col, {
-      span: 24 / colSize
-    }, /*#__PURE__*/React.createElement(Form.Item, {
-      noStyle: true
-    }, this.getButtons())))) : /*#__PURE__*/React.createElement(React.Fragment, null);
-  }
-}
-searchForm.defaultProps = {
-  style: {},
-  expand: false,
-  colSize: 3,
-  loading: false,
-  formLine: [],
-  initialValues: {},
-  onRef: () => {},
-  onReset: () => {},
-  onFinish: () => {}
+    return arr.map((item, index) => index > 2 ? {
+      ...item,
+      show: false
+    } : item);
+  };
+  const formItemList = groupsList();
+  if (formItemList.length === 0) return null;
+  return /*#__PURE__*/React.createElement(Form, {
+    ref: form,
+    style: style,
+    initialValues: initialValues,
+    onFinish: values => onFinish(values)
+  }, /*#__PURE__*/React.createElement(Row, {
+    gutter: [16, 16]
+  }, formItemList.map((item, index) => /*#__PURE__*/React.createElement(Col, {
+    key: index,
+    span: 24 / colSize,
+    style: {
+      display: item.show ? 'block' : 'none'
+    }
+  }, item.node)), /*#__PURE__*/React.createElement(Col, {
+    span: 24 / colSize
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    noStyle: true
+  }, getButtons()))));
 };
-searchForm.propTypes = {
+SearchForm.propTypes = {
   form: PropTypes.object,
   style: PropTypes.object,
   expand: PropTypes.bool,
+  // 受控
+  defaultExpand: PropTypes.bool,
+  // 内部默认展开
   colSize: PropTypes.number,
   loading: PropTypes.bool,
   formLine: PropTypes.array,
   initialValues: PropTypes.object,
   onRef: PropTypes.func,
   onReset: PropTypes.func,
-  onFinish: PropTypes.func
+  onFinish: PropTypes.func,
+  onExpand: PropTypes.func
 };
-export default searchForm;
+export default SearchForm;

package/Table/index.d.ts

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

package/Table/index.js

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import { tools } from '@cqsjjb/jjb-common-lib';
 import { ProTable } from '@ant-design/pro-components';

package/TableAction/index.d.ts

@@ -1,16 +1,21 @@
-// @ts-ignore
-import * as React from 'react';
-import { ComponentProps } from '../types';
+import { ReactNode } from 'react';
+import { DropdownProps } from 'antd';
 
-interface TableActionProps extends ComponentProps {
-  // 每行最多显示多少个操作项，默认3
+export interface TableActionProps {
+  // 图标 默认-MoreOutlined
+  icon?: React.ComponentType;
+  // 最大显示数量，超出的会放入下拉菜单 默认-3
   maximum?: number;
-  // 每个操作项之间的间距，默认8
-  space?: number;
+  // 子元素，可以是单个 ReactNode 或数组
+  children: ReactNode | ReactNode[];
+  // Space 间距 默认-8
+  space?: number | string;
+  // 下拉菜单位置，默认 bottomRight
+  placement?: DropdownProps['placement'];
+  // 下拉触发方式，默认 ['hover']
+  trigger?: DropdownProps['trigger'];
 }
 
-interface TableActionFc extends React.FC<TableActionProps> {
-}
+declare const TableAction: React.FC<TableActionProps>;
 
-declare const TableAction: TableActionFc;
 export default TableAction;

package/TableAction/index.js

@@ -2,21 +2,29 @@ import React from 'react';
 import { tools } from '@cqsjjb/jjb-common-lib';
 import { MoreOutlined } from '@ant-design/icons';
 import { Dropdown, Space } from 'antd';
-export default function TableAction(props) {
-  const maximum = props.maximum || 3;
-  const children = (tools.isArray(props.children) ? props.children : [].concat(props.children)).filter(i => i);
-  const showArray = children.slice(0, maximum);
-  const hideArray = children.slice(maximum);
+export default function TableAction({
+  maximum = 3,
+  children,
+  space,
+  icon: Icon = MoreOutlined,
+  placement = 'bottomRight',
+  // 下拉菜单位置，默认 bottomRight
+  trigger = ['hover'] // 下拉触发方式，默认 hover
+}) {
+  // 将 children 统一成数组并过滤空值
+  const childArray = (tools.isArray(children) ? children : [].concat(children)).filter(Boolean);
+  const showArray = childArray.slice(0, maximum);
+  const hideArray = childArray.slice(maximum);
   return /*#__PURE__*/React.createElement(Space, {
-    size: props.space
-  }, showArray, hideArray.length !== 0 && /*#__PURE__*/React.createElement(Dropdown, {
+    size: space
+  }, showArray, hideArray.length > 0 && /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
-      items: hideArray.map((record, index) => {
-        return {
-          key: index,
-          label: record
-        };
-      })
-    }
-  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(MoreOutlined, null))));
+      items: hideArray.map((child, index) => ({
+        key: index,
+        label: child
+      }))
+    },
+    placement: placement,
+    trigger: trigger
+  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(Icon, null))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.1.3",
+  "version": "3.2.0-beta.0",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",
@@ -11,8 +11,8 @@
   "dependencies": {
     "axios": "^1.6.5",
     "spark-md5": "^3.0.2",
-    "classnames": "^2.5.1",
-    "antd-img-crop": "latest",
+    "cropperjs": "latest",
+    "@wangeditor/editor": "latest",
     "@cqsjjb-formily/renderer": "latest",
     "@ant-design/pro-layout": "latest",
     "use-antd-resizable-header": "latest",

package/tools/index.d.ts

@@ -0,0 +1,10 @@
+export function isVersion1(v: string): boolean;
+export function isVersion2(v: string): boolean;
+export function getToken(): string;
+export function getAppKey(): string;
+export function getTenantCode(): string;
+export function getViewAsp(wh: string): number;
+export function isHttpUrl(v: string): boolean;
+export function getPrefixCls(): string;
+export function getAlgorithm(): string;
+export function getAlgorithm(): string;

package/tools/index.js

@@ -0,0 +1,87 @@
+import { tools } from '@cqsjjb/jjb-common-lib';
+
+const { toObject } = tools;
+
+/**
+ * @description 版本1
+ * @param v {string}
+ * @return {boolean}
+ */
+export function isVersion1(v) {
+  return v === 'v1';
+}
+
+/**
+ * @description 版本2
+ * @param v {string}
+ * @return {boolean}
+ */
+export function isVersion2(v) {
+  return v === 'v2';
+}
+
+/**
+ * @description 读取token
+ * @return {string}
+ */
+export function getToken() {
+  return window.sessionStorage.getItem('token');
+}
+
+/**
+ * @description 读取appKey
+ * @return {string}
+ */
+export function getAppKey() {
+  return toObject(toObject(toObject(window.process).env).app).appKey;
+}
+
+/**
+ * @description 读取tenantCode
+ * @return {string}
+ */
+export function getTenantCode() {
+  return window.sessionStorage.getItem('tenantCode');
+}
+
+/**
+ * @description 获取纵横比
+ * @param wh {string}
+ * @return {number[]}
+ */
+export function getViewAsp(wh) {
+  try {
+    return wh.split('*').map(v => parseInt(v));
+  } catch (e) {
+    return [0, 0];
+  }
+}
+
+/**
+ * @description http
+ * @param v {string}
+ * @return {boolean}
+ */
+export function isHttpUrl(v) {
+  return /^http[s]?:\/\//.test(v);
+}
+
+/**
+ * @description 获取前缀
+ * @return {string}
+ */
+export function getPrefixCls() {
+  return window.process?.env?.app?.antd['ant-prefix'] || 'ant';
+}
+export function getAlgorithm() {
+  const value = document.documentElement.style.getPropertyValue(
+    '--gbs-var-algorithm'
+  );
+  return (
+    value ?
+      value === '#FFF' ?
+        'default'
+      : 'dark'
+    : 'default'
+  );
+}

package/Upload/index.d.ts

@@ -1,76 +0,0 @@
-// @ts-ignore
-import * as React from 'react';
-import { ComponentProps } from '../types';
-
-interface UploadProps extends ComponentProps {
-  /**
-   * @description 上传提交字段名，默认file
-   */
-  name?: string;
-  /**
-   * @description 上传文件大小限制，默认Infinity
-   */
-  size?: number;
-  /**
-   * @description 是否开启图片裁剪，需和listType配合使用，text模式下无效
-   */
-  crop?: boolean;
-  /**
-   * @description 上传接口地址
-   */
-  action?: string;
-  /**
-   * @description 上传资源类型，参考HTML.Input，默认*
-   */
-  accept?: string;
-  /**
-   * @description 最大上传数，参考antd官方文档，默认1
-   */
-  maxCount?: number;
-  /**
-   * @description 展示效果，参考antd官方文档，默认text
-   */
-  listType?: 'text' | 'picture' | 'picture-card' | 'picture-circle';
-  /**
-   * @description 开启后支持多选文件，默认false，注意：当maxCount为1时或开启crop时无效
-   */
-  multiple?: boolean;
-  /**
-   * @description 上传类型，默认Post
-   */
-  method?: 'POST' | 'PUT' | 'PATCH' | 'GET' | 'DELETE' | 'OPTIONS';
-  /**
-   * @description 开启后将计算文件签名，默认false，注意：开启了多图上传时建议不开启，可能会导致内存占用过大
-   */
-  signature?: boolean;
-  /**
-   * @description 开启后将强制类型验证，默认false
-   */
-  forceAccept?: boolean;
-  /**
-   * @description 上传是否携带浏览器cookie，默认false
-   */
-  withCredentials?: boolean;
-  /**
-   * @description 上传携带的其他字段属性，默认{}
-   */
-  data?: object,
-  /**
-   * @description 上传携带的请求头字段属性，默认{}
-   */
-  headers?: object;
-  /**
-   * @description 是否开启拖拽上传，默认false
-   */
-  drag?: boolean;
-  /**
-   * @description 应用appKey
-   */
-  appKey?: string;
-}
-
-interface UploadFc extends React.FC<UploadProps> {
-}
-
-declare const Upload: UploadFc;
-export default Upload;