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

package/ImageUploader/index.less

@@ -0,0 +1,100 @@
+@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
+
+.@{com-prefix-cls}_image-file-uploader_ {
+  position: relative;
+  transition: border-color .3s;
+  text-align: center;
+  overflow: hidden;
+  border-radius: var(--gbs-var-border-radius);
+  background-color: var(--gbs-var-algorithm);
+
+  &.@{com-prefix-cls}_image-file-uploader-default_ {
+    border-color: #d9d9d9;
+  }
+
+  &.@{com-prefix-cls}_image-file-uploader-dark_ {
+    border-color: #424242;
+  }
+
+  &:hover {
+    border-color: var(--gbs-var-color-primary);
+  }
+
+  .@{com-prefix-cls}_image-file-uploader-preview_ {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .@{com-prefix-cls}-image {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      border: none;
+      position: relative;
+      z-index: 9;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .@{com-prefix-cls}_image-file-uploader-preview-control_ {
+      position: absolute;
+      z-index: 10;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      transition: opacity .123s linear;
+      background-color: rgba(0, 0, 0, .5);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      color: white;
+      justify-content: center;
+      font-size: 16px;
+    }
+
+    &:hover {
+      .@{com-prefix-cls}_image-file-uploader-preview-control_ {
+        opacity: 1;
+      }
+    }
+  }
+
+  .@{com-prefix-cls}_image-file-uploader-select_ {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+
+    .@{com-prefix-cls}_image-file-uploader-select-tip_ {
+      margin-top: 8px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      padding: 0 10px;
+    }
+  }
+}
+
+.@{com-prefix-cls}-form-item-has-error {
+  .@{com-prefix-cls}_image-file-uploader_ {
+    border-color: #ff4d4f !important;
+
+    .@{com-prefix-cls}_image-file-uploader-select_ {
+      color: #ff4d4f !important;
+    }
+  }
+}

package/MediaQuery/index.d.ts

@@ -1,13 +1,16 @@
-// @ts-ignore
 import * as React from 'react';
-import { ComponentProps } from '../types';
 
-interface MediaQueryProps extends ComponentProps {
+export interface MediaQueryProps {
+  /** 子节点，可以是单个React元素或数组 */
+  children: React.ReactNode | React.ReactNode[];
+  /** 是否禁用媒体查询监听 */
   disabled?: boolean;
 }
 
-interface MediaQueryFc extends React.FC<MediaQueryProps> {
-}
+/**
+ * MediaQuery 组件
+ * 会根据窗口宽度匹配 MEDIA_QUERY_LIST，并将匹配结果通过 `data-media-query` 传给子元素
+ */
+declare const MediaQuery: React.FC<MediaQueryProps>;
 
-declare const MediaQuery: MediaQueryFc;
 export default MediaQuery;

package/MediaQuery/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState, useMemo } 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)',
@@ -7,85 +7,36 @@ const MEDIA_QUERY_LIST = {
   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;
-    }
+export default function MediaQuery({
+  children,
+  disabled
+}) {
+  const [media, setMedia] = useState(undefined);
+  const mediaQueries = useMemo(() => {
+    if (disabled) return {};
+    return Object.fromEntries(Object.entries(MEDIA_QUERY_LIST).map(([key, query]) => [key, window.matchMedia(query)]));
+  }, [disabled]);
+  useEffect(() => {
+    if (disabled) return;
+    const handleChange = () => {
+      for (const [key, mql] of Object.entries(mediaQueries)) {
+        if (mql.matches) {
+          setMedia(key);
+          return;
+        }
+      }
+      setMedia(undefined);
+    };
+    Object.values(mediaQueries).forEach(mql => mql.addEventListener('change', handleChange));
 
-    // 超小
-    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
-    }))));
-  }
+    // 初始化
+    handleChange();
+    return () => {
+      Object.values(mediaQueries).forEach(mql => mql.removeEventListener('change', handleChange));
+    };
+  }, [mediaQueries, disabled]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (Array.isArray(children) ? children : [children]).map((item, index) => /*#__PURE__*/React.isValidElement(item) ? /*#__PURE__*/React.cloneElement(item, {
+    key: index,
+    'data-media-query': media
+  }) : item));
 }

package/PageLayout/index.d.ts

@@ -0,0 +1,44 @@
+// PageLayout.d.ts
+import { CSSProperties, ReactNode, FC } from 'react';
+import { History } from 'history';
+
+export interface PageLayoutProps {
+  // 页面名称
+  title?: string;
+  // 右侧多余部分扩展(自定义)
+  extra?: ReactNode;
+  // 自定义头部
+  header?: ReactNode;
+  // 自定义底部
+  footer?: ReactNode;
+  // 路由历史对象
+  history?: History;
+  // 去除所有样式 默认-false
+  noStyle?: boolean;
+  // 取消边框 默认-false
+  noBorder?: boolean;
+  // form 表单行 默认-空
+  formLine?: ReactNode;
+  // form 表单行样式 默认-空
+  formLineStyle?: CSSProperties;
+  // 是否显示左箭头按钮 默认-false
+  previous?: boolean;
+  // 背景透明 默认-false
+  transparent?: boolean;
+  // 内容样式 默认-空
+  contentStyle?: CSSProperties;
+  // 底部样式 默认-空
+  footerStyle?: CSSProperties;
+  // 头部样式 默认-空
+  pageHeaderStyle?: CSSProperties;
+  // 自定义返回事件 默认-空
+  onBack?: () => void;
+  // 容器样式 默认-空
+  style?: CSSProperties;
+  // data-node-id 属性 默认-空
+  'data-node-id'?: string;
+}
+
+declare const PageLayout: FC<PageLayoutProps>;
+
+export default PageLayout;

package/PageLayout/index.js

@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types';
+import React, { memo, useCallback } from 'react';
+import { PageHeader } from '@ant-design/pro-layout';
+import './index.less';
+import { getPrefixCls } from '../tools/index.js';
+const prefixCls = getPrefixCls();
+const PageLayout = /*#__PURE__*/memo(props => {
+  const {
+    title,
+    extra,
+    style = {},
+    header,
+    footer,
+    history = {},
+    noStyle,
+    formLine,
+    formLineStyle,
+    noBorder = false,
+    previous = false,
+    children,
+    transparent,
+    contentStyle,
+    footerStyle,
+    pageHeaderStyle,
+    onBack,
+    'data-node-id': dataNodeId
+  } = props;
+  const containerClass = [`${prefixCls}-layout-container`, transparent && `${prefixCls}-layout-container-transparent`, noStyle && `${prefixCls}-layout-container-no-style`].filter(Boolean).join(' ');
+  const backHandler = useCallback(() => {
+    if (onBack) {
+      onBack();
+    } else if (previous) {
+      history.go(-1);
+    }
+  }, [onBack, previous, history]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: noBorder ? {
+      border: 'none',
+      ...style
+    } : style,
+    className: containerClass,
+    "data-node-id": dataNodeId
+  }, !header ? /*#__PURE__*/React.createElement(PageHeader, {
+    title: title,
+    extra: extra,
+    style: pageHeaderStyle,
+    onBack: previous || onBack ? backHandler : undefined
+  }) : header, formLine && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-tools`,
+    style: formLineStyle
+  }, formLine), /*#__PURE__*/React.createElement("div", {
+    style: contentStyle,
+    className: `${prefixCls}-layout-container-content`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-content-abs`
+  }, children)), footer && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-lay-container-bottom`,
+    style: footerStyle
+  }, footer));
+});
+PageLayout.propTypes = {
+  style: PropTypes.object,
+  title: PropTypes.string,
+  extra: PropTypes.node,
+  header: PropTypes.node,
+  footer: PropTypes.any,
+  history: PropTypes.object,
+  noStyle: PropTypes.bool,
+  noBorder: PropTypes.bool,
+  formLine: PropTypes.node,
+  previous: PropTypes.bool,
+  transparent: PropTypes.bool,
+  formLineStyle: PropTypes.object,
+  contentStyle: PropTypes.object,
+  footerStyle: PropTypes.object,
+  pageHeaderStyle: PropTypes.object,
+  onBack: PropTypes.func
+};
+PageLayout.defaultProps = {
+  style: {},
+  history: {},
+  noBorder: false,
+  previous: false
+};
+export default PageLayout;

package/PageLayout/index.less

@@ -0,0 +1,47 @@
+@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
+
+.@{com-prefix-cls}-layout-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+  border: 1px solid #f0f0f0;
+  background-color: #fff;
+
+  &.@{com-prefix-cls}-layout-container-transparent {
+    background-color: transparent;
+  }
+
+  &.@{com-prefix-cls}-layout-container-no-style {
+    .@{com-prefix-cls}-layout-container-content {
+      padding: 0;
+    }
+  }
+
+  .@{com-prefix-cls}-layout-container-tools {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 0 20px 16px 20px;
+  }
+
+  .@{com-prefix-cls}-layout-container-content {
+    flex: 1;
+    margin: 0 20px 20px 20px;
+    position: relative;
+    &-abs {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+
+  .@{com-prefix-cls}-lay-container-bottom {
+    padding: 20px;
+    border-top: 1px #f0f0f0 solid;
+  }
+}

package/SearchForm/index.d.ts

@@ -1,57 +1,34 @@
-// @ts-ignore
-import * as React from 'react';
-import { ComponentProps } from '../types';
+import React from 'react';
+import { FormInstance } from 'antd';
+import { CSSProperties, ReactNode } from 'react';
 
-interface SearchFormProps extends ComponentProps {
-  /**
-   * @description form实例
-   */
-  form?: any,
-  /**
-   * @description 样式
-   */
-  style?: React.CSSProperties,
-  /**
-   * @description 是否显示展开按钮
-   */
+export interface SearchFormProps {
+  // 可选外部传入 form 实例
+  form?: React.RefObject<FormInstance>;
+  // 样式 默认-空
+  style?: CSSProperties;
+  // 是否展开，受控模式 默认-false
   expand?: boolean;
-  /**
-   * @description 每行列数，默认3
-   */
-  colSize?: boolean;
-  /**
-   * @description 表单内容列表 [<Form.Item>...</Form.Item>,...]
-   */
-  formLine: Array<React.ReactNode>;
-  /**
-   * @description 加载中
-   */
+  // 内部默认展开状态，仅在 expand 未传入时生效 默认-false
+  defaultExpand?: boolean;
+  // 列数 默认-3
+  colSize?: number;
+  // 查询 loading 状态 默认-false
   loading?: boolean;
-  /**
-   * @description 表单默认值，只有初始化以及重置时生效
-   */
-  initialValues?:object
-  /**
-   * @description 组件挂载完成 通过事件返回form实例
-   */
-  onRef?: (ref: React.Ref<any>) => void;
-  /**
-   * @description 搜索 按钮触发，返回表单字段
-   */
-  onFinish?: (values: { [ p: string ]: any }) => void;
-  /**
-   * @description 重置 按钮触发
-   */
-  onReset?: (values: { [ p: string ]: any }) => void;
-  /**
-   * @description 展开/收起事件
-   * @param open 展开/收起状态
-   */
+  // 表单行节点数组 默认-[]
+  formLine: ReactNode[];
+  // 表单初始值
+  initialValues?: Record<string, any>;
+  /** 获取 form 实例回调 @deprecated */
+  onRef?: (form: React.RefObject<FormInstance>) => void;
+  // 重置回调
+  onReset?: (values: Record<string, any>) => void;
+  // 提交回调
+  onFinish?: (values: Record<string, any>) => void;
+  // 展开/收起状态变化回调
   onExpand?: (open: boolean) => void;
 }
 
-interface SearchFormFc extends React.FC<SearchFormProps> {
-}
+declare const SearchForm: React.FC<SearchFormProps>;
 
-declare const SearchForm: SearchFormFc;
 export default SearchForm;