zanghb / workai-components · 提交

提交 3e7a53319ef6468c5cc4ef7b6e5d9c0f57e2fac1

作者 juvenile
1 个父辈 e02927c2
构建： 未知

update

内嵌 并排对比
正在显示 77 个修改的文件 包含 362 行增加 和 310 行删除
  1 +import { defineConfig } from 'father';
  2 +
  3 +export default defineConfig({
  4 + umd: { output: 'dist/lib' },
  5 + esm: {
  6 + output: 'dist',
  7 + input: 'src', // 默认编译目录
  8 + platform: 'browser', // 默认构建为 Browser 环境的产物
  9 + transformer: 'babel', // 默认使用 babel 以提供更好的兼容性
  10 + },
  11 + // 或者
  12 + cjs: {
  13 + output: 'dist/cjs',
  14 + input: 'src', // 默认编译目录
  15 + platform: 'node', // 默认构建为 Node.js 环境的产物
  16 + transformer: 'esbuild', // 默认使用 esbuild 以获得更快的构建速度
  17 + },
  18 +});
... ...
... ... @@ -14,4 +14,5 @@ packages-lock.json
14 14 *.map
15 15 package-lock.*
16 16 pnpm-lock.yaml
17   -dist
\ No newline at end of file
  17 +dist
  18 +build
\ No newline at end of file
... ...
... ... @@ -9,6 +9,6 @@
9 9 </head>
10 10 <body>
11 11 <div id="app"></div>
12   - <script type="module" src="/index.tsx"></script>
  12 + <script type="module" src="/src/app.tsx"></script>
13 13 </body>
14 14 </html>
... ...
... ... @@ -4,8 +4,10 @@
4 4 "description": "",
5 5 "main": "index.js",
6 6 "scripts": {
  7 + "father:dev": "father dev",
  8 + "father:build": "father build",
7 9 "dev": "vite",
8   - "build": "vite build && tsc --declaration --emitDeclarationOnly --noEmitOnError false",
  10 + "build": "vite build&&tsc",
9 11 "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
10 12 "lint-staged": "lint-staged",
11 13 "test": "echo \"Error: no test specified\" && exit 1"
... ... @@ -25,11 +27,6 @@
25 27 "author": "juvenile <juvenile.business01@gmail.com>",
26 28 "license": "MIT",
27 29 "devDependencies": {
28   - "@amap/amap-jsapi-loader": "^1.0.1",
29   - "@ant-design/icons": "^5.1.2",
30   - "@formily/antd-v5": "1.1.0-beta.3",
31   - "@formily/core": "^2.2.24",
32   - "@formily/react": "^2.2.24",
33 30 "@types/jquery": "^3.5.16",
34 31 "@types/node": "^20.2.5",
35 32 "@types/react": "^18.2.7",
... ... @@ -37,7 +34,6 @@
37 34 "@typescript-eslint/eslint-plugin": "^5.59.7",
38 35 "@typescript-eslint/parser": "^5.59.7",
39 36 "@vitejs/plugin-react": "^4.0.0",
40   - "antd": "^5.5.1",
41 37 "braft-editor": "^2.3.9",
42 38 "classnames": "^2.3.2",
43 39 "eslint": "^8.41.0",
... ... @@ -50,7 +46,7 @@
50 46 "lint-staged": "^13.2.2",
51 47 "moment": "^2.29.4",
52 48 "prettier": "^2.8.8",
53   - "react-router-dom": "^6.11.2",
  49 + "styled-components": "^5.3.11",
54 50 "stylelint": "^15.6.2",
55 51 "stylelint-config-rational-order": "^0.1.2",
56 52 "stylelint-config-standard": "^33.0.0",
... ... @@ -61,8 +57,16 @@
61 57 "vite": "^4.3.9"
62 58 },
63 59 "dependencies": {
64   - "react": "^18.2.0",
65   - "react-dom": "^18.2.0",
66   - "react-is": "^18.2.0"
  60 + "@amap/amap-jsapi-loader": "^1.0.1",
  61 + "@ant-design/icons": "^5.1.4",
  62 + "@formily/antd-v5": "1.1.0-beta.3",
  63 + "@formily/core": "^2.2.24",
  64 + "@formily/react": "^2.2.24",
  65 + "antd": "5.3.2",
  66 + "father": "^4.2.2",
  67 + "react": "^18.0.0",
  68 + "react-dom": "^18.0.0",
  69 + "react-is": "^18.2.0",
  70 + "react-router-dom": "^6.0.2"
67 71 }
68 72 }
... ...
1   -import React from 'react';
2   -import { ItemType } from 'antd/lib/breadcrumb/Breadcrumb';
3   -import './bread.less';
4   -interface P {
5   - separator?: string;
6   - items: ItemType[];
7   -}
8   -declare const Breadcrumb: React.FC<P>;
9   -export default Breadcrumb;
1   -import React from 'react';
2   -import { ButtonProps } from 'antd';
3   -import type { SpaceProps } from 'antd';
4   -export interface ButtonRadioProps extends SpaceProps {
5   - className?: string;
6   - prefixCls?: string;
7   - buttonProps?: ButtonProps;
8   - onChange?: (value: any) => void;
9   - value?: any;
10   - [props: string]: any;
11   -}
12   -declare const ButtonRadio: React.FC<ButtonRadioProps>;
13   -export default ButtonRadio;
1   -import React from 'react';
2   -import { ModalProps } from 'antd';
3   -interface Props extends ModalProps {
4   - handleOk?: (values: {
5   - [props: string]: string;
6   - }, e: React.MouseEvent<HTMLButtonElement>) => void;
7   - handleCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
8   - initialValues?: {
9   - props?: string;
10   - };
11   - open: boolean;
12   -}
13   -declare const FormModal: React.FC<Props>;
14   -export default FormModal;
1   -/// <reference types="react" />
2   -import { ImageProps } from 'antd';
3   -interface Props extends ImageProps {
4   - imgValues?: string[];
5   - show_image?: boolean;
6   - setShowImage?: (value: any) => void;
7   -}
8   -declare const Image: React.FC<Props>;
9   -export default Image;
1   -import { ImageProps, Image as MyImage } from 'antd';
2   -
3   -interface Props extends ImageProps {
4   - imgValues?: string[];
5   - show_image?: boolean;
6   - setShowImage?: (value: any) => void;
7   -}
8   -
9   -const Image: React.FC<Props> = (props) => {
10   - const { src, style, preview, imgValues = [], show_image, setShowImage, ...args } = props;
11   - let my_preview = preview
12   - ? preview
13   - : {
14   - visible: show_image,
15   - src: src,
16   - };
17   -
18   - return (
19   - <>
20   - <MyImage
21   - width={200}
22   - style={style}
23   - src={src}
24   - preview={my_preview}
25   - {...args}
26   - onClick={() => setShowImage && setShowImage(!show_image)}
27   - />
28   - <div style={{ display: 'none' }}>
29   - <MyImage.PreviewGroup
30   - preview={{
31   - visible: show_image,
32   - onVisibleChange: (vis) => setShowImage && setShowImage(vis),
33   - }}
34   - >
35   - {imgValues.map((data: string, index: number) => (
36   - <MyImage src={data} key={index} />
37   - ))}
38   - </MyImage.PreviewGroup>
39   - </div>
40   - </>
41   - );
42   -};
43   -
44   -export default Image;
1   -import './index.less';
2   -declare global {
3   - interface Window {
4   - _AMapSecurityConfig: any;
5   - AMapUI: any;
6   - AMap: any;
7   - }
8   -}
9   -declare const MapSelect: (props: any) => import("react/jsx-runtime").JSX.Element;
10   -export default MapSelect;
1   -import { ModalFuncProps } from 'antd';
2   -declare const showPropsConfirm: (props: ModalFuncProps) => void;
3   -export default showPropsConfirm;
  1 +declare const App: () => import("react/jsx-runtime").JSX.Element;
  2 +export default App;
... ...
... ... @@ -2,7 +2,7 @@ import { useMemo } from 'react';
2 2 import AddTags from '@/hr/add_tags';
3 3 import { FormProvider } from '@formily/react';
4 4 import { createForm } from '@formily/core';
5   -import SearchWrap from '@/hr/search/search';
  5 +import SearchWrap from '@/hr/search';
6 6 import InputField from '@/hr/antd_input';
7 7
8 8 const App = () => {
... ...
... ... @@ -7,18 +7,19 @@ import { Field } from '@formily/react';
7 7 import { FieldProps } from '../typings';
8 8 import { FormItem } from '@formily/antd-v5';
9 9
10   -interface Props {
  10 +export interface TagProps extends FieldProps {
  11 + name: string;
  12 + title?: string;
11 13 initValues?: string[];
12   - tag_text?: string;
13   - showValues?: boolean;
14   - onChange?: (value: string[]) => void;
15   - value?: string[];
16   - maxLength?: number;
17 14 }
18 15
19   -export const AddTag = (props: Props) => {
20   - const { onChange, tag_text, showValues = true, value = [], maxLength = 0 } = props;
21   -
  16 +export const TagComponent: React.FC<TagProps> = ({
  17 + onChange,
  18 + tag_text,
  19 + showValues = true,
  20 + value = [],
  21 + maxLength = 0,
  22 +}) => {
22 23 const [inputVisible, setInputVisible] = useState(false);
23 24 const [inputValue, setInputValue] = useState('');
24 25 const inputRef = useRef<InputRef>(null);
... ... @@ -30,7 +31,7 @@ export const AddTag = (props: Props) => {
30 31 }, [inputVisible]);
31 32
32 33 const handleClose = (removedTag: string) => {
33   - const newTags = value?.filter((tag) => tag !== removedTag) || [];
  34 + const newTags = value?.filter((tag: string) => tag !== removedTag) || [];
34 35
35 36 onChange && onChange([...newTags]);
36 37 };
... ... @@ -56,7 +57,7 @@ export const AddTag = (props: Props) => {
56 57 {showValues && (
57 58 <Space size={10} wrap>
58 59 {value &&
59   - value.map((tag, index) => {
  60 + value.map((tag: string, index: number) => {
60 61 const isLongTag = tag.length > 20;
61 62 const tagElem = (
62 63 <Tag
... ... @@ -115,21 +116,20 @@ export const AddTag = (props: Props) => {
115 116 );
116 117 };
117 118
118   -interface AddTagsProps extends FieldProps {
119   - name: string;
120   - title?: string;
121   - initValues?: string[];
122   -}
123   -const AddTags: React.FC<AddTagsProps> = (props) => {
124   - const { name, title, decoratorProps, componentProps, validator } = props;
125   -
  119 +const AddTags: React.FC<TagProps> = ({
  120 + name,
  121 + title,
  122 + decoratorProps,
  123 + componentProps,
  124 + validator,
  125 +}) => {
126 126 return (
127 127 <Field
128 128 name={name}
129 129 title={title}
130 130 decorator={[FormItem, { ...decoratorProps }]}
131 131 component={[
132   - AddTag,
  132 + TagComponent,
133 133 {
134 134 ...componentProps,
135 135 },
... ...
... ... @@ -10,12 +10,11 @@ import { FormItem } from '@formily/antd-v5';
10 10 import { Field } from '@formily/react';
11 11 import { IFieldProps } from '@formily/core';
12 12
13   -interface Props extends BraftEditorProps {
  13 +interface EditorProps extends BraftEditorProps {
14 14 contentStyle?: { [props: string]: string | number };
15 15 changeEditor?: (editorState: EditorState) => void;
16 16 }
17   -
18   -const Editor: React.FC<Props> = (props) => {
  17 +const Editor: React.FC<EditorProps> = (props) => {
19 18 const {
20 19 value = null,
21 20 changeEditor,
... ... @@ -60,7 +59,7 @@ const Editor: React.FC<Props> = (props) => {
60 59 );
61 60 };
62 61
63   -interface P extends IFieldProps {
  62 +export interface BraftDeitorProps extends IFieldProps {
64 63 name: string | [string, string];
65 64 title?: string | ReactElement;
66 65 validator?: any;
... ... @@ -73,7 +72,7 @@ interface P extends IFieldProps {
73 72 };
74 73 }
75 74
76   -const BraftDeitor: React.FC<P> = (props) => {
  75 +const BraftDeitor: React.FC<BraftDeitorProps> = (props) => {
77 76 const { name, title, validator, decoratorProps, componentProps } = props;
78 77
79 78 return (
... ...
1   -.bread_warp {
  1 +.breadcrumb-wrapper {
2 2 margin-bottom: 20px;
3 3
4 4 .ant-breadcrumb li:last-child {
... ...
... ... @@ -3,16 +3,14 @@ import { Breadcrumb as MyBreadcrumb } from 'antd';
3 3 import { ItemType } from 'antd/lib/breadcrumb/Breadcrumb';
4 4 import './bread.less';
5 5
6   -interface P {
  6 +export interface BreadcrumbProps {
7 7 separator?: string;
8 8 items: ItemType[];
9 9 }
10 10
11   -const Breadcrumb: React.FC<P> = (props) => {
12   - const { separator = '>', items = [] } = props;
13   -
  11 +const Breadcrumb: React.FC<BreadcrumbProps> = ({ separator = '>', items = [] }) => {
14 12 return (
15   - <div className={'bread_warp'}>
  13 + <div className="breadcrumb-wrapper">
16 14 <MyBreadcrumb separator={separator} items={items} />
17 15 </div>
18 16 );
... ...
1 1 import React from 'react';
2 2 import { Button, Space, ButtonProps } from 'antd';
3 3 import type { SpaceProps } from 'antd';
  4 +
  5 +interface OptionType {
  6 + value: any;
  7 + label:
  8 + | string
  9 + | number
  10 + | boolean
  11 + | React.ReactElement
  12 + | React.ReactFragment
  13 + | React.ReactPortal
  14 + | null
  15 + | undefined;
  16 +}
  17 +
4 18 export interface ButtonRadioProps extends SpaceProps {
5 19 className?: string;
6 20 prefixCls?: string;
7 21 buttonProps?: ButtonProps;
8 22 onChange?: (value: any) => void;
9 23 value?: any;
10   - [props: string]: any;
  24 + options?: OptionType[];
11 25 }
12 26
13   -const ButtonRadio: React.FC<ButtonRadioProps> = (props) => {
14   - const { options = [], buttonProps = {}, value, onChange } = props;
15   -
  27 +const ButtonRadio: React.FC<ButtonRadioProps> = ({
  28 + options = [],
  29 + buttonProps = {},
  30 + value,
  31 + onChange,
  32 + ...restProps
  33 +}) => {
16 34 return (
17   - <Space {...props}>
18   - {options.map(
19   - (
20   - option: {
21   - value: any;
22   - label:
23   - | string
24   - | number
25   - | boolean
26   - | React.ReactElement<any, string | React.JSXElementConstructor<any>>
27   - | React.ReactFragment
28   - | React.ReactPortal
29   - | null
30   - | undefined;
31   - },
32   - i: React.Key | null | undefined,
33   - ) => {
34   - const type = option.value === value ? 'primary' : 'default';
35   - return (
36   - <Button
37   - key={i}
38   - {...buttonProps}
39   - type={type}
40   - onClick={() => {
41   - onChange && onChange(option.value);
42   - }}
43   - >
44   - {option.label}
45   - </Button>
46   - );
47   - },
48   - )}
  35 + <Space {...restProps}>
  36 + {options.map((option, i) => {
  37 + const type = option.value === value ? 'primary' : 'default';
  38 + return (
  39 + <Button
  40 + key={i}
  41 + {...buttonProps}
  42 + type={type}
  43 + onClick={() => {
  44 + onChange && onChange(option.value);
  45 + }}
  46 + >
  47 + {option.label}
  48 + </Button>
  49 + );
  50 + })}
49 51 </Space>
50 52 );
51 53 };
... ...
... ... @@ -3,46 +3,36 @@ import { Modal, ModalProps } from 'antd';
3 3 import { FormProvider } from '@formily/react';
4 4 import { createForm } from '@formily/core';
5 5
6   -interface Props extends ModalProps {
  6 +export interface FormModalProps extends ModalProps {
7 7 handleOk?: (values: { [props: string]: string }, e: React.MouseEvent<HTMLButtonElement>) => void;
8 8 handleCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
9 9 initialValues?: { props?: string };
10 10 open: boolean;
11 11 }
12 12
13   -const FormModal: React.FC<Props> = (props) => {
  13 +const FormModal: React.FC<FormModalProps> = ({
  14 + initialValues,
  15 + title = '我是弹框标题',
  16 + handleOk,
  17 + handleCancel,
  18 + children,
  19 + open,
  20 + ...args
  21 +}) => {
14 22 const form = createForm();
15   - const {
16   - initialValues,
17   - title = '我是弹框标题',
18   - handleOk,
19   - handleCancel,
20   - children = [],
21   - open,
22   - ...args
23   - } = props;
24   - const items = React.Children.toArray(children);
25 23
26 24 useEffect(() => {
27 25 form.setInitialValues(initialValues);
28   - });
  26 + }, [initialValues]);
29 27
30 28 const onOK = (e: React.MouseEvent<HTMLButtonElement>) => {
31   - if (handleOk) {
32   - form.submit().then((values: any) => {
33   - handleOk(values, e);
34   - });
35   -
36   - return;
37   - }
  29 + form.submit().then((values: any) => {
  30 + handleOk && handleOk(values, e);
  31 + });
38 32 };
39 33
40 34 const onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
41   - if (handleCancel) {
42   - handleCancel(e);
43   -
44   - return;
45   - }
  35 + handleCancel && handleCancel(e);
46 36 };
47 37
48 38 return (
... ... @@ -56,7 +46,7 @@ const FormModal: React.FC<Props> = (props) => {
56 46 {...args}
57 47 getContainer={false}
58 48 >
59   - <FormProvider form={form}>{React.Children.map(items, (item: any) => item)}</FormProvider>
  49 + <FormProvider form={form}>{React.Children.map(children, (item) => item)}</FormProvider>
60 50 </Modal>
61 51 );
62 52 };
... ...
  1 +import { ImageProps, Image as AntdImage } from 'antd';
  2 +
  3 +export interface ImageComponentProps extends ImageProps {
  4 + imageSources?: string[];
  5 + showImage?: boolean;
  6 + toggleImageVisibility?: (value: any) => void;
  7 +}
  8 +
  9 +const ImageComponent: React.FC<ImageComponentProps> = ({
  10 + src,
  11 + style,
  12 + preview,
  13 + imageSources = [],
  14 + showImage,
  15 + toggleImageVisibility,
  16 + ...args
  17 +}) => {
  18 + let myPreview = preview
  19 + ? preview
  20 + : {
  21 + visible: showImage,
  22 + src: src,
  23 + };
  24 +
  25 + return (
  26 + <>
  27 + <AntdImage
  28 + width={200}
  29 + style={style}
  30 + src={src}
  31 + preview={myPreview}
  32 + {...args}
  33 + onClick={() => toggleImageVisibility && toggleImageVisibility(!showImage)}
  34 + />
  35 + <div style={{ display: 'none' }}>
  36 + <AntdImage.PreviewGroup
  37 + preview={{
  38 + visible: showImage,
  39 + onVisibleChange: (vis) => toggleImageVisibility && toggleImageVisibility(vis),
  40 + }}
  41 + >
  42 + {imageSources.map((data: string, index: number) => (
  43 + <AntdImage src={data} key={index} />
  44 + ))}
  45 + </AntdImage.PreviewGroup>
  46 + </div>
  47 + </>
  48 + );
  49 +};
  50 +
  51 +export default ImageComponent;
... ...
1 1 import { Modal, ModalFuncProps } from 'antd';
2 2 import { ExclamationCircleFilled } from '@ant-design/icons';
3   -const { confirm } = Modal;
4 3
5   -const showPropsConfirm = (props: ModalFuncProps) => {
6   - const { title, icon, content, okText, okType, okButtonProps, cancelText, onOk, onCancel } = props;
  4 +const { confirm } = Modal;
7 5
  6 +const showPropsConfirm = ({
  7 + title,
  8 + icon,
  9 + content,
  10 + okText,
  11 + okType,
  12 + okButtonProps,
  13 + cancelText,
  14 + onOk,
  15 + onCancel,
  16 +}: ModalFuncProps) => {
8 17 confirm({
9 18 title: title,
10 19 icon: icon || <ExclamationCircleFilled />,
... ...
1 1 import { Pagination } from 'antd';
2 2
3   -interface paginationProps {
4   - [props: string]: any;
5   - onChange: Function;
  3 +interface PaginationValues {
  4 + offset: number;
  5 + limit: number;
  6 + total_count: number;
6 7 }
7 8
8   -const PaginationWrap = (props: paginationProps) => {
  9 +export interface PaginationProps {
  10 + pagination: PaginationValues;
  11 + changePagination: (pagination: PaginationValues) => void;
  12 + onChange: (pagination: PaginationValues) => void;
  13 +}
  14 +
  15 +const PaginationWrap = (props: PaginationProps) => {
9 16 const { pagination, changePagination, onChange, ...rest } = props;
10 17
11 18 const { offset, limit = 10, total_count } = pagination;
12 19
13 20 // 分页改变
14 21 const onPaginationChange = (page: number, limit: number) => {
15   - changePagination({
  22 + const newPagination = {
16 23 ...pagination,
17 24 offset: (page - 1) * (limit || 10),
18 25 limit: limit,
19   - });
20   - onChange({
21   - offset: (page - 1) * (limit || 10),
22   - limit: limit,
23   - });
  26 + };
  27 +
  28 + changePagination(newPagination);
  29 + onChange(newPagination);
24 30 };
25 31
26 32 return (
... ... @@ -35,7 +41,6 @@ const PaginationWrap = (props: paginationProps) => {
35 41 onPaginationChange(page, pageSize);
36 42 }}
37 43 {...rest}
38   - // pageSizeOptions={['10', '25', '50', '100']}
39 44 />
40 45 );
41 46 };
... ...
1   -import { ReactElement, useEffect, useMemo, useState } from 'react';
  1 +import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
2 2 import { Space, Button, Tooltip, Tag } from 'antd';
3 3 import './index.less';
4 4 import { FormProvider, VoidField } from '@formily/react';
5   -import { createForm, onFieldValueChange, Field } from '@formily/core';
  5 +import { createForm, onFieldValueChange, Field, FormPath } from '@formily/core';
6 6 import { ossAddress } from '@/utils/ossAddress';
7 7 import { useDebounce } from '@/utils/format';
8 8 import moment from 'moment';
  9 +
  10 +// Avoid magic numbers
  11 +const MAX_COMPONENTS = 6;
  12 +const DEBOUNCE_DELAY = 800;
  13 +
9 14 export interface SearchWrapProps {
10 15 leftSectionComponents?: ReactElement[];
11 16 searchInput?: ReactElement;
... ... @@ -15,17 +20,32 @@ export interface SearchWrapProps {
15 20 moreCategories?: Boolean;
16 21 ProForm?: any;
17 22 }
18   -
  23 +type FormPathPattern =
  24 + | string
  25 + | number
  26 + | Array<string | number>
  27 + | FormPath
  28 + | RegExp
  29 + | (((address: Array<string | number>) => boolean) & {
  30 + path: FormPath;
  31 + });
19 32 interface SearchChooseProps {
20 33 name: string;
21 34 title: string;
22 35 value: string;
23   - path: any;
  36 + path: FormPathPattern;
24 37 address: any;
25 38 }
26 39
27   -const _getValueLable = (field: Field) => {
28   - const { title, value, dataSource, props, path, address, componentProps } = field;
  40 +const getValueLable = ({
  41 + title,
  42 + value,
  43 + dataSource,
  44 + props,
  45 + path,
  46 + address,
  47 + componentProps,
  48 +}: Field) => {
29 49 const { name } = props;
30 50
31 51 const { componenttypename, format } = componentProps;
... ... @@ -35,6 +55,7 @@ const _getValueLable = (field: Field) => {
35 55 address,
36 56 title: title ? title : '',
37 57 };
  58 +
38 59 const getValue = (key: any) => {
39 60 const dataSourceMap: Record<string, string> = {};
40 61 dataSource.map((item) => {
... ... @@ -44,6 +65,7 @@ const _getValueLable = (field: Field) => {
44 65 });
45 66 return dataSourceMap[key];
46 67 };
  68 +
47 69 switch (componenttypename) {
48 70 case 'Radio.Group':
49 71 labelMap.value = getValue(value);
... ... @@ -87,12 +109,12 @@ const _getValueLable = (field: Field) => {
87 109 return labelMap;
88 110 };
89 111
90   -const _getPopupValuesLabel = (field: any, searchLabels: SearchChooseProps[]) => {
  112 +const getPopupValuesLabel = (field: any, searchLabels: SearchChooseProps[]) => {
91 113 const { props } = field;
92 114 const { name } = props;
93 115
94 116 const searchLableMap: any = {};
95   - const changeLabel = _getValueLable(field);
  117 + const changeLabel = getValueLable(field);
96 118 if (searchLabels.length > 0) {
97 119 searchLabels.map((label) => {
98 120 if (name == label.name) {
... ... @@ -110,7 +132,7 @@ const _getPopupValuesLabel = (field: any, searchLabels: SearchChooseProps[]) =>
110 132 searchLableMap[name] = changeLabel;
111 133 }
112 134 return searchLableMap;
113   -};
  135 +}
114 136
115 137 const SearchWrap: React.FC<SearchWrapProps> = (props) => {
116 138 const {
... ... @@ -129,7 +151,7 @@ const SearchWrap: React.FC<SearchWrapProps> = (props) => {
129 151 const [centerWidth, setCenterWidth] = useState<number>(0);
130 152 const valueChange = useDebounce((value: any) => {
131 153 searchChange && searchChange(value);
132   - }, 800);
  154 + }, DEBOUNCE_DELAY);
133 155
134 156 const form = ProForm ? ProForm : useMemo(() => createForm(), []);
135 157
... ... @@ -140,7 +162,7 @@ const SearchWrap: React.FC<SearchWrapProps> = (props) => {
140 162 }, [searchLabels]);
141 163
142 164 useEffect(() => {
143   - form.addEffects('popup_search', () => {
  165 + const removeEffects = form.addEffects('popup_search', () => {
144 166 onFieldValueChange('*', (field) => {
145 167 const {
146 168 address: { entire = '' },
... ... @@ -150,13 +172,16 @@ const SearchWrap: React.FC<SearchWrapProps> = (props) => {
150 172 }
151 173 if ((entire as string).indexOf('popup') > -1) {
152 174 setSearchLabels((searchLabels) => {
153   - const labelValues = _getPopupValuesLabel(field, searchLabels);
  175 + const labelValues = getPopupValuesLabel(field, searchLabels);
154 176
155 177 return Object.values(labelValues);
156 178 });
157 179 }
158 180 });
159 181 });
  182 + return () => {
  183 + form.removeEffects(removeEffects);
  184 + };
160 185 }, [ProForm]);
161 186
162 187 useEffect(() => {
... ... @@ -176,14 +201,14 @@ const SearchWrap: React.FC<SearchWrapProps> = (props) => {
176 201 setOpen(!open);
177 202 };
178 203
179   - const submit = () => {
  204 + const submit = useCallback(() => {
180 205 const { values: allValue } = form;
181 206 searchChange && searchChange(allValue);
182 207 togglePopup();
183 208 setShowPopupValue(true);
184   - };
  209 + }, []);
185 210
186   - const closeLabel = (label: SearchChooseProps) => {
  211 + const closeLabel = useCallback((label: SearchChooseProps) => {
187 212 const { path } = label;
188 213 const field = form.query(path).take();
189 214 if (field && field.setValue) {
... ... @@ -191,16 +216,16 @@ const SearchWrap: React.FC<SearchWrapProps> = (props) => {
191 216 }
192 217 const { values: allValue } = form;
193 218 searchChange && searchChange(allValue);
194   - };
  219 + }, []);
195 220
196   - const handleCancle = () => {
  221 + const handleCancle = useCallback(() => {
197 222 form.reset('popup.*');
198 223 const { values: allValue } = form;
199 224 searchChange && searchChange(allValue);
200 225 togglePopup();
201   - };
  226 + }, []);
202 227
203   - const text = () => {
  228 + const text = useCallback(() => {
204 229 return (
205 230 <div>
206 231 <VoidField name="popup">
... ... @@ -217,16 +242,16 @@ const SearchWrap: React.FC<SearchWrapProps> = (props) => {
217 242 </div>
218 243 </div>
219 244 );
220   - };
  245 + }, [popupContent]);
221 246
222   - const labels = () => {
  247 + const labels = useCallback(() => {
223 248 // 左边显示操作6个搜索条件
224 249 const len = (leftSectionComponents && leftSectionComponents.length - 1) || 0;
225 250 return (
226 251 <div style={{ width: centerWidth, overflow: 'hidden' }}>
227 252 {showPopupValue &&
228 253 searchLabels &&
229   - searchLabels.slice(0, 6 - len).map((item, index) => {
  254 + searchLabels.slice(0, MAX_COMPONENTS - len).map((item) => {
230 255 return (
231 256 <Tag key={item.name} closable onClose={() => closeLabel(item)}>
232 257 {item.value}
... ... @@ -235,14 +260,14 @@ const SearchWrap: React.FC<SearchWrapProps> = (props) => {
235 260 })}
236 261 </div>
237 262 );
238   - };
  263 + }, [showPopupValue, centerWidth]);
239 264
240 265 return (
241 266 <FormProvider form={form}>
242 267 <div className="search-component">
243 268 <Space className="left-section">
244   - {leftSectionComponents.slice(0, 6).map((component, index) => (
245   - <div key={index} className="left-section-component">
  269 + {leftSectionComponents.slice(0, MAX_COMPONENTS).map((component) => (
  270 + <div key={component.key || component.props.id} className="left-section-component">
246 271 {component}
247 272 </div>
248 273 ))}
... ...
... ... @@ -10,7 +10,7 @@ export interface tableProps extends TableProps<Record<string, number>> {
10 10 }
11 11
12 12 export const dealNumber = (val: number) => {
13   - if (val && val != null) {
  13 + if (val || val === 0) {
14 14 let money = String(val);
15 15 let left = money.split('.')[0],
16 16 right = money.split('.')[1];
... ... @@ -19,10 +19,8 @@ export const dealNumber = (val: number) => {
19 19 .split('')
20 20 .reverse()
21 21 .join('')
22   - .match(/(\d{1,3})/g); // 将字符串顺序反转 ：字符串-->数组 --> 顺序反转-->字符串
23   - return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
24   - } else if (val === 0) {
25   - return '0.00';
  22 + .match(/(\d{1,3})/g);
  23 + return `${Number(money) < 0 ? '-' : ''}${temp.join(',').split('').reverse().join('')}${right}`;
26 24 } else {
27 25 return '';
28 26 }
... ... @@ -31,9 +29,11 @@ export const dealNumber = (val: number) => {
31 29 const TableWrap: React.FC<tableProps> = (props) => {
32 30 const { tableHeader, columns, scroll } = props;
33 31 const [newScroll, setNewScroll] = useState<any>(0);
34   - const [tableColumns, setTableColumns] = useState<any>([]);
  32 + const [tableColumns, setTableColumns] = useState<TableProps<Record<string, number>>['columns']>(
  33 + [],
  34 + );
35 35
36   - const sex = {
  36 + const sex: Record<string, string> = {
37 37 '1': '男',
38 38 '2': '女',
39 39 };
... ... @@ -52,7 +52,7 @@ const TableWrap: React.FC<tableProps> = (props) => {
52 52
53 53 useEffect(() => {
54 54 let calculateScroll = 0;
55   - columns?.map((item: any) => {
  55 + const newColumns = columns?.map((item: any) => {
56 56 // 处理attr
57 57 if (item.attr) {
58 58 handleAttr(item);
... ... @@ -61,9 +61,11 @@ const TableWrap: React.FC<tableProps> = (props) => {
61 61 item.ellipsis = true;
62 62 // 计算scroll
63 63 if (item.width) calculateScroll += item.width;
  64 +
  65 + return item;
64 66 });
65 67
66   - setTableColumns(columns);
  68 + setTableColumns(newColumns);
67 69 setNewScroll(calculateScroll);
68 70 }, [columns]);
69 71
... ...
1   -
2   -import { Tabs as MyTabs } from 'antd';
  1 +import { Tabs as MyTabs, TabPaneProps } from 'antd';
3 2 import { TabsProps } from 'antd/lib/Tabs';
4 3 import './tabs.less';
5 4
6   -const Tabs: React.FC<TabsProps> = (props) => {
  5 +export interface Tab extends Omit<TabPaneProps, 'tab'> {
  6 + key: string;
  7 + label: React.ReactNode;
  8 +}
  9 +
  10 +export interface MyTabsProps extends TabsProps {
  11 + items?: Tab[];
  12 +}
  13 +
  14 +const Tabs: React.FC<MyTabsProps> = (props) => {
7 15 const { defaultActiveKey, items = [], ...other } = props;
8   - const defaultKey = defaultActiveKey || items[0].key;
  16 + const defaultKey = items.length > 0 ? defaultActiveKey || items[0].key : undefined;
9 17
10 18 return (
11 19 <div className={'tabs_warp'}>
12   - <MyTabs defaultActiveKey={defaultKey} items={items} {...other} />
  20 + <MyTabs defaultActiveKey={defaultKey} {...other} />
13 21 </div>
14 22 );
15 23 };
... ...
1 1 import { ReactElement } from 'react';
2   -
3 2 export interface FieldProps {
4   - name: string | [string, string];
5   - title?: string | ReactElement;
6   - validator?: any;
7   - [props: string]: any;
8   - decoratorProps?: {
  3 + name: string | [string, string];
  4 + title?: string | ReactElement;
  5 + validator?: any;
9 6 [props: string]: any;
10   - };
11   - componentProps?: {
12   - [props: string]: any;
13   - };
  7 + decoratorProps?: {
  8 + [props: string]: any;
  9 + };
  10 + componentProps?: {
  11 + [props: string]: any;
  12 + };
14 13 }
... ...
1   -import React, { ReactElement } from 'react';
2   -import 'braft-editor/dist/index.css';
3   -import './index.less';
4   -import { IFieldProps } from '@formily/core';
5   -interface P extends IFieldProps {
6   - name: string | [string, string];
7   - title?: string | ReactElement;
8   - validator?: any;
  1 +import { ReactElement } from 'react';
  2 +
  3 +export interface FieldProps {
  4 + name: string | [string, string];
  5 + title?: string | ReactElement;
  6 + validator?: any;
  7 + [props: string]: any;
  8 + decoratorProps?: {
9 9 [props: string]: any;
10   - decoratorProps?: {
11   - [props: string]: any;
12   - };
13   - componentProps?: {
14   - [props: string]: any;
15   - };
  10 + };
  11 + componentProps?: {
  12 + [props: string]: any;
  13 + };
16 14 }
17   -declare const BraftDeitor: React.FC<P>;
18   -export default BraftDeitor;
... ...
... ... @@ -5,7 +5,7 @@ import { UploadFile, UploadListType, UploadProps } from 'antd/lib/upload/interfa
5 5 import { UploadOutlined } from '@ant-design/icons';
6 6 import cx from 'classnames';
7 7
8   -interface UploadFileProps {
  8 +export interface UploadFileProps {
9 9 accept?: string;
10 10 listType?: UploadListType;
11 11 Callback?: (e: any) => void;
... ... @@ -26,12 +26,11 @@ type Config = Record<
26 26 | 'signature'
27 27 | 'callback'
28 28 | 'x:access_token'
29   - // | 'x-oss-security-token'
30 29 | 'success_action_status',
31 30 string
32 31 >;
33 32
34   -// picture-card
  33 +
35 34 const UploadFiles: React.FC<UploadFileProps> = (props) => {
36 35 const {
37 36 value,
... ... @@ -85,22 +84,29 @@ const UploadFiles: React.FC<UploadFileProps> = (props) => {
85 84
86 85 const onchange = ({ fileList }: { fileList: any }) => {
87 86 if (fileList[fileList.length - 1].status === 'done') {
88   - // setFileList([...fileLists, fileList[fileList.length - 1]]);
  87 + setFileList([...fileLists, fileList[fileList.length - 1]]);
89 88
90   - if (onChange) {
91   - onChange([...fileLists, fileList[fileList.length - 1]]);
92   - }
93   - if (Callback) Callback([...fileLists, fileList[fileList.length - 1]]);
  89 + // if (onChange) {
  90 + // onChange([...fileLists, fileList[fileList.length - 1]]);
  91 + // }
  92 + // if (Callback) Callback([...fileLists, fileList[fileList.length - 1]]);
94 93 }
95 94 };
96 95
  96 + useEffect(() => {
  97 + if (onChange) {
  98 + onChange(fileLists);
  99 + }
  100 + if (Callback) Callback(fileLists);
  101 + }, [fileLists]);
  102 +
97 103 const onRemove = (file: UploadFile) => {
98 104 const files = value.filter((v: { uid: string }) => v.uid !== file.uid);
99 105 setFileList(files);
100   - if (onChange) {
101   - onChange(files);
102   - }
103   - if (Callback) Callback([...files]);
  106 + // if (onChange) {
  107 + // onChange(files);
  108 + // }
  109 + // if (Callback) Callback([...files]);
104 110 };
105 111
106 112 const onPreview = async (file: any) => {
... ...
  1 +export { default as AddTags } from './hr/add_tags';
  2 +export type { TagProps } from './hr/add_tags';
  3 +
  4 +export { default as InputItem } from './hr/antd_input';
  5 +
  6 +export { default as BraftEditor } from './hr/braft_editor';
  7 +export type { BraftDeitorProps } from './hr/braft_editor';
  8 +
  9 +export { default as Breadcrumb } from './hr/bread_crumb';
  10 +export type { BreadcrumbProps } from './hr/bread_crumb';
  11 +
  12 +export { default as ButtonRadio } from './hr/button_radio';
  13 +export type { ButtonRadioProps } from './hr/button_radio';
  14 +
  15 +export { default as FormModal } from './hr/form_modal';
  16 +export type { FormModalProps } from './hr/form_modal';
  17 +
  18 +export { default as Image } from './hr/image';
  19 +export type { ImageComponentProps } from './hr/image';
  20 +
  21 +export { default as ModalConfirm } from './hr/modal_confirm';
  22 +
  23 +export { default as Pagination } from './hr/pagination';
  24 +export type { PaginationProps } from './hr/pagination';
  25 +
  26 +export { default as SearchWrap } from './hr/search';
  27 +export type { SearchWrapProps } from './hr/search';
  28 +
  29 +export { default as TableWrap } from './hr/table';
  30 +export type { tableProps } from './hr/table';
  31 +
  32 +export { default as Tabs } from './hr/tabs';
  33 +export type { MyTabsProps } from './hr/tabs';
  34 +
  35 +export { default as UploadFiles } from './hr/upload_file';
  36 +export type { UploadFileProps } from './hr/upload_file';
  37 +
  38 +export { default as NoData } from './hr/nodata';
  39 +
... ...
... ... @@ -15,16 +15,16 @@
15 15 "jsx": "react-jsx",
16 16 "allowSyntheticDefaultImports": true,
17 17 "paths": {
18   - "@/hr/*": ["./packages/hr/*"],
19   - "@/hro/*": ["./packages/hro/*"],
20   - "@/utils/*": ["./utils/*"],
21   - "@/services/*": ["./services/*"]
  18 + "@/hr/*": ["./src/hr/*"],
  19 + "@/hro/*": ["./src/hro/*"],
  20 + "@/utils/*": ["./src/utils/*"],
  21 + "@/services/*": ["./src/services/*"]
22 22 },
23 23 "declaration": true, // 自动生成声明文件
24   - "declarationDir": "./", // 声明文件生成的目录
  24 + // "declarationDir": "./", // 声明文件生成的目录
25 25 "noEmitOnError": false
26 26 },
27   - "include": ["packages", "index.tsx", "typings.d.ts"],
  27 + "include": ["src/*", "src/*.d.ts", "src/utils/*"],
28 28 "exclude": ["node_modules"],
29 29 "references": [{ "path": "./tsconfig.node.json" }]
30 30 }
... ...
... ... @@ -18,10 +18,10 @@ export default defineConfig({
18 18 },
19 19 resolve: {
20 20 alias: {
21   - '@/hr': resolve(__dirname, 'packages/hr'),
22   - '@/hro': resolve(__dirname, 'packages/hro'),
23   - '@/utils': resolve(__dirname, 'utils'),
24   - '@/services': resolve(__dirname, 'services'),
  21 + '@/hr': resolve(__dirname, 'src/hr'),
  22 + '@/hro': resolve(__dirname, 'src/hro'),
  23 + '@/utils': resolve(__dirname, 'src/utils'),
  24 + '@/services': resolve(__dirname, 'src/services'),
25 25 },
26 26 },
27 27 });
... ...
请 注册 或 登录 后发表评论