['modifyProps'] = (props) => {
304 | const { itemProps = {} } = props;
305 | const { children } = itemProps;
306 | return {
307 | itemProps: {
308 | viewProps: {
309 | format: (value, pureValue) => {
310 | if (pureValue) {
311 | return value;
312 | }
313 | return isValidElement(children) ? (
314 |
315 | ) : (
316 | children
317 | );
318 | },
319 | },
320 | ...itemProps,
321 | },
322 | };
323 | };
324 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/__test__/Submit.test.tsx:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-console */
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import { mount } from 'enzyme';
5 | import SecureButton from '../component/SecureButton';
6 | import { delay, waitForComponentToPaint } from './utils';
7 |
8 | describe('SecureButton', () => {
9 | // 组件卸载
10 | let container: any;
11 | beforeEach(() => {
12 | container = document.createElement('div');
13 | mount(, { attachTo: container });
14 | });
15 |
16 | afterEach(() => {
17 | ReactDOM.unmountComponentAtNode(container);
18 | });
19 |
20 | test('click', async () => {
21 | const onClick = () => {};
22 | const wrapper = mount();
23 | await wrapper.find('.ant-btn').at(0).simulate('click');
24 | });
25 |
26 | test('click loading', async () => {
27 | const onClick = jest.fn();
28 | const wrapper = mount();
29 | await wrapper.find('.ant-btn').at(0).simulate('click');
30 | expect(onClick).not.toHaveBeenCalled();
31 | });
32 |
33 | test('click error', async () => {
34 | const onClick = async () => {
35 | await Promise.reject();
36 | };
37 | const wrapper = mount();
38 | waitForComponentToPaint(wrapper);
39 | await wrapper.find('.ant-btn').at(0).simulate('click');
40 | });
41 | test('click delay', async () => {
42 | const onClick = async () => {
43 | await delay(600);
44 | };
45 | const wrapper = mount();
46 | waitForComponentToPaint(wrapper);
47 | await wrapper.find('.ant-btn').at(0).simulate('click');
48 | });
49 | test('click 500', async () => {
50 | const onClick = async () => {};
51 | const onLoaded = jest.fn();
52 | const wrapper = mount();
53 | waitForComponentToPaint(wrapper);
54 | await wrapper.find('.ant-btn').at(0).simulate('click');
55 | await delay(500);
56 | expect(onLoaded).toHaveBeenCalled();
57 | });
58 | test('click 600', async () => {
59 | const onClick = async () => {
60 | await delay(600);
61 | };
62 | const onLoaded = jest.fn();
63 | const wrapper = mount();
64 | waitForComponentToPaint(wrapper);
65 | await wrapper.find('.ant-btn').at(0).simulate('click');
66 | await delay(700);
67 | expect(onLoaded).toHaveBeenCalled();
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/__test__/Utils.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { searchSelect, calculateStrLength, oneLineItemStyle, getFieldKeyValue } from '../utils';
3 |
4 | const dom = (
5 |
6 |
7 | 12
8 |
9 |
10 | 23
11 |
12 | 34
13 | 45
14 |
15 | );
16 |
17 | describe('Utils test', () => {
18 | test('test Utils', () => {
19 | searchSelect.filterOption('1', dom);
20 | expect(calculateStrLength()).toBe(0);
21 | expect(calculateStrLength('我')).toBe(2);
22 | expect(calculateStrLength(123)).toBe(3);
23 | expect(oneLineItemStyle()).toEqual([]);
24 | expect(oneLineItemStyle(['50%', 8, '50%'])).toEqual([
25 | { display: 'inline-block', width: 'calc(50% - 4px)' },
26 | { display: 'inline-block', width: '8px' },
27 | { display: 'inline-block', width: 'calc(50% - 4px)' },
28 | ]);
29 | expect(getFieldKeyValue({ id: 1 }, 1, 'id')).toBe(1);
30 | expect(getFieldKeyValue({ id: 1 }, 1, () => undefined)).toBe(1);
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/__test__/fields.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input } from 'antd';
3 | import moment from 'moment';
4 | import { YFormItemProps } from '../Items';
5 |
6 | const options = [
7 | { id: '1', name: '语文' },
8 | { id: '2', name: '数学' },
9 | ];
10 |
11 | const initialValues = {
12 | name: '张三',
13 | age: '10',
14 | textarea: '这里是长文本',
15 | text: '这里是文本',
16 | custom: '这里是自定义文本',
17 | money: '999999999',
18 | 单选: true,
19 | 开关: true,
20 | 多选: ['1', '2'],
21 | 下拉框多选: ['1', '2'],
22 | 下拉框: '1',
23 | radio: '1',
24 | users: [
25 | { name: '张三', age: '10' },
26 | { name: '李四', age: '20' },
27 | ],
28 | phones: [{ phone: '18888888888' }, { phone: '18888888888' }],
29 | date: moment(),
30 | };
31 |
32 | const fields: YFormItemProps['children'] = [
33 | { type: 'input', label: '空值', name: 'names', scenes: { base: false } },
34 | {
35 | type: 'list',
36 | name: 'phones',
37 | componentProps: {
38 | showIcons: { showBottomAdd: { text: '添加手机号' }, showAdd: true, showRemove: false },
39 | onShowIcons: () => ({
40 | showAdd: true,
41 | showRemove: true,
42 | }),
43 | },
44 | items: ({ index }) => {
45 | return [
46 | {
47 | label: index === 0 && '手机号',
48 | type: 'input',
49 | name: [index, 'phone'],
50 | componentProps: { placeholder: '请输入手机号' },
51 | },
52 | ];
53 | },
54 | },
55 | {
56 | label: '用户',
57 | type: 'list',
58 | name: 'users',
59 | items: ({ index }) => {
60 | return [
61 | {
62 | type: 'oneLine',
63 | componentProps: { oneLineStyle: ['50%', 8, '50%'] },
64 | items: () => [
65 | { label: '姓名', type: 'input', name: [index, 'name'] },
66 | { type: 'custom', children: },
67 | { label: '年龄', type: 'input', name: [index, 'age'] },
68 | ],
69 | },
70 | ];
71 | },
72 | },
73 | {
74 | type: 'input',
75 | label: '姓名',
76 | name: 'name',
77 | format: (name) => `${name} 修改了`,
78 | },
79 | {
80 | type: 'datePicker',
81 | label: '日期',
82 | name: 'date',
83 | componentProps: { style: { width: '100%' } },
84 | format: (date) => moment(date).format('YYYY-MM-DD'),
85 | },
86 | {
87 | type: 'money',
88 | label: '金额',
89 | componentProps: { suffix: '元' },
90 | name: 'money',
91 | },
92 | { type: 'textarea', label: '文本域', name: 'textarea' },
93 | { type: 'checkbox', label: '单选', name: '单选', componentProps: { children: '已阅读' } },
94 | {
95 | type: 'checkboxGroup',
96 | label: '多选',
97 | name: '多选',
98 | componentProps: { options },
99 | },
100 | {
101 | type: 'checkboxGroup',
102 | label: '多选2',
103 | name: '多选2',
104 | componentProps: { onAddProps: () => ({ disabled: true }), renderOption: () => '1', options },
105 | },
106 | {
107 | type: 'switch',
108 | label: '开关',
109 | name: '开关',
110 | componentProps: { checkedChildren: '开', unCheckedChildren: '关' },
111 | },
112 | {
113 | type: 'select',
114 | label: '下拉框',
115 | name: '下拉框',
116 | componentProps: {
117 | optionLabelProp: 'checked-value',
118 | onAddProps: (item) => ({ 'checked-value': `(${item.name})` }),
119 | showField: (record) => `${record.id}-${record.name}`,
120 | options,
121 | },
122 | },
123 | {
124 | type: 'select',
125 | label: '下拉框多选',
126 | name: '下拉框多选',
127 | componentProps: { mode: 'multiple', options },
128 | },
129 | {
130 | type: 'radio',
131 | label: '单选按钮',
132 | name: 'radio',
133 | componentProps: { showField: (record) => `${record.id}-${record.name}`, options },
134 | },
135 | {
136 | type: 'radio',
137 | label: '单选按钮2',
138 | name: 'radio2',
139 | componentProps: { onAddProps: () => ({ disabled: true }), options },
140 | },
141 | {
142 | type: 'radio',
143 | label: '单选按钮3',
144 | name: 'radio3',
145 | componentProps: { renderOption: () => '1', options },
146 | },
147 | { label: '文本', name: 'text', type: 'text' },
148 | {
149 | label: '自定义渲染',
150 | type: 'custom',
151 | name: 'custom',
152 | children: ,
153 | },
154 | { type: 'submit' },
155 |
156 | {
157 | label: '精简使用',
158 | type: 'input',
159 | name: 'children_field2',
160 | shouldUpdate: (prevValues, curValues) => prevValues.type !== curValues.type,
161 | isShow: (values) => values.type === '2',
162 | },
163 | ];
164 |
165 | export { fields, initialValues };
166 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/__test__/index.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import { mount } from 'enzyme';
4 |
5 | import { YForm } from '../..';
6 | import { layoutMore } from '../utils';
7 | import { YFormProps } from '../Form';
8 |
9 | const YFormDemo = (props: YFormProps) => {
10 | const onFinish = (values: any) => {
11 | console.log('Success:', values);
12 | };
13 |
14 | const { onFormatFieldsValue, formatFieldsValue } = YForm.useFormatFieldsValue();
15 |
16 | onFormatFieldsValue([
17 | { name: ['demo', 'aa'], format: (_, values: { users: any }) => values.users },
18 | ]);
19 |
20 | return (
21 |
27 | {[
28 | { type: 'input', name: 'demo' },
29 | { type: 'money', name: 'money', label: 'money' },
30 | {
31 | dataSource: [
32 | {
33 | type: 'button',
34 | noStyle: true,
35 | componentProps: {
36 | type: 'primary',
37 | htmlType: 'submit',
38 | children: 'submit',
39 | },
40 | },
41 | ],
42 | },
43 | ]}
44 |
45 | );
46 | };
47 |
48 | describe('YForm', () => {
49 | test('renders', () => {
50 | const wrapper = render();
51 | expect(wrapper).toMatchSnapshot();
52 | });
53 | test('isShow', () => {
54 | const wrapper = render();
55 | expect(wrapper).toMatchSnapshot();
56 | });
57 | test('loading', () => {
58 | const wrapper = render();
59 | expect(wrapper).toMatchSnapshot();
60 | });
61 | test('layout', () => {
62 | const wrapper = render(
63 |
64 |
65 |
66 |
,
67 | );
68 | expect(wrapper).toMatchSnapshot();
69 | });
70 | test('layout2', () => {
71 | const itemsType: any = {
72 | demo: { component: 123
, formatStr: '请输入${label}' },
73 | };
74 | YForm.Config({ itemsType });
75 | const wrapper = render({[{ type: 'demo' }]});
76 | expect(wrapper).toMatchSnapshot();
77 | });
78 | test('onFinish', () => {
79 | const wrapper = mount();
80 | wrapper.find('Button').simulate('submit');
81 | const wrapper2 = mount();
82 | wrapper2.find('Button').simulate('submit');
83 | });
84 | });
85 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/__test__/utils.tsx:
--------------------------------------------------------------------------------
1 | import { act } from 'react-dom/test-utils';
2 | import { ReactWrapper } from 'enzyme';
3 |
4 | export const delay = (timeout = 0) =>
5 | new Promise((resolve) => {
6 | setTimeout(resolve, timeout);
7 | });
8 |
9 | export async function waitForComponentToPaint(wrapper: ReactWrapper
, amount = 0) {
10 | await act(async () => {
11 | await new Promise((resolve) => setTimeout(resolve, amount));
12 | wrapper.update();
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/Card.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import { Card } from 'antd';
3 | import { CardProps } from 'antd/lib/card';
4 |
5 | import YForm from '..';
6 | import { YFormItemProps } from '../Items';
7 |
8 | export interface YFormCardProps extends YFormItemProps {
9 | componentProps?: CardProps;
10 | items?: YFormItemProps['children'];
11 | }
12 |
13 | export default forwardRef((props, ref) => {
14 | const itemProps = React.useContext(YForm.YFormItemContext);
15 | const { items } = itemProps as YFormCardProps;
16 |
17 | React.useImperativeHandle(ref, () => props);
18 |
19 | return (
20 |
21 | {items}
22 |
23 | );
24 | });
25 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/CheckboxGroup.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import { Checkbox } from 'antd';
3 | import { map } from 'lodash';
4 | import { CheckboxGroupProps } from 'antd/lib/checkbox';
5 |
6 | import { getFieldKeyValue } from '../utils';
7 | import { OptionsProps } from '../ItemsType';
8 | import { useGetOptions } from '../hooks';
9 |
10 | export interface YCheckGroupProps extends OptionsProps, Omit {}
11 |
12 | export default forwardRef((props, ref) => {
13 | const {
14 | value,
15 | postField = 'id',
16 | showField = 'name',
17 | options,
18 | renderOption,
19 | onAddProps,
20 | getOptions,
21 | ...rest
22 | } = props;
23 | const list = useGetOptions();
24 |
25 | const children = map(list, (item, index: number) => {
26 | if (item) {
27 | const _postField = getFieldKeyValue(item, index, postField);
28 | const _showField = getFieldKeyValue(item, index, showField);
29 | return (
30 |
36 | {/* 如果有 renderOption 就渲染 renderOption 如果没有默认用 showField 字段 */}
37 | {renderOption ? renderOption(item) : _showField}
38 |
39 | );
40 | }
41 | });
42 | React.useImperativeHandle(ref, () => props);
43 |
44 | return (
45 |
46 | {children}
47 |
48 | );
49 | });
50 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/ComponentView.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import classNames from 'classnames';
3 | import { get, isArray } from 'lodash';
4 | import { ConfigContext } from 'antd/lib/config-provider';
5 |
6 | import { YForm } from '../..';
7 | import { YFormItemProps } from '../Items';
8 |
9 | export const noData = -/-;
10 |
11 | export interface YFormComponentViewComponentProps {
12 | addonBefore?: React.ReactNode;
13 | addonAfter?: React.ReactNode;
14 | suffix?: React.ReactNode;
15 | prefix?: React.ReactNode;
16 | className?: string;
17 | oldValue?: any;
18 | }
19 |
20 | export interface YFormComponentViewProps extends YFormItemProps {
21 | componentProps?: YFormComponentViewComponentProps;
22 | }
23 |
24 | export default forwardRef((props, ref) => {
25 | const AntdConfig = React.useContext(ConfigContext);
26 | const itemProps = React.useContext(YForm.YFormItemContext);
27 | const { viewProps: { format } = {}, valuePropName = 'value' } = itemProps;
28 | const { addonBefore, addonAfter, suffix, prefix, className, oldValue } = props;
29 | // diff 渲染使用 oldValue
30 | let _value = 'oldValue' in props ? oldValue : get(props, valuePropName);
31 | if (format) {
32 | _value = format(_value);
33 | }
34 | const prefixCls = AntdConfig.getPrefixCls('');
35 |
36 | return (
37 |
38 | {addonBefore && {addonBefore} }
39 | {prefix && {prefix} }
40 | {_value === undefined || _value === '' || (isArray(_value) && _value.length === 0)
41 | ? noData
42 | : _value}
43 | {suffix && {suffix}}
44 | {addonAfter && {addonAfter}}
45 |
46 | );
47 | });
48 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/Diff.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { get, concat } from 'lodash';
3 | import classNames from 'classnames';
4 |
5 | import ComponentView from './ComponentView';
6 | import { YForm } from '../..';
7 | import { modifyType } from '../ItemsType';
8 |
9 | const DiffDom = (props: modifyType) => {
10 | const { formProps, itemProps, componentProps } = props;
11 | const { oldValues = {} } = formProps;
12 | const { name } = itemProps;
13 |
14 | const context = React.useContext(YForm.ListContent);
15 | const allName = context.prefixName ? concat(context.prefixName, name) : name;
16 | const _oldValue = 'oldValue' in itemProps ? itemProps.oldValue : get(oldValues, allName);
17 | return (
18 |
19 | {[
20 | {
21 | noStyle: true,
22 | shouldUpdate: (prevValues, curValues) => {
23 | return get(prevValues, allName) !== get(curValues, allName);
24 | },
25 | children: ({ getFieldValue }) => {
26 | // 如果字段为 undefined 则改为 ''，为了字段输入值再删除一样的道理
27 | const value = getFieldValue(allName) === undefined ? '' : getFieldValue(allName);
28 | const oldValue = _oldValue === undefined ? '' : _oldValue;
29 | let equal = value === oldValue;
30 | // 如果有渲染方法，就按照次来对比
31 | if (itemProps.viewProps) {
32 | const { format } = itemProps.viewProps;
33 | if (format) {
34 | // 这里用的 pureValue = true（纯值），直接 === 判断就可以。
35 | equal = format(value, true) === format(oldValue, true);
36 | }
37 | }
38 | if (itemProps.diffProps) {
39 | const { onEqual } = itemProps.diffProps;
40 | if (onEqual) {
41 | // 如果有 onEqual，则最终使用该方法判断
42 | equal = onEqual(value, oldValue);
43 | }
44 | }
45 |
46 | if (equal) {
47 | return null;
48 | }
49 | return (
50 |
51 |
52 |
57 |
58 |
59 | );
60 | },
61 | },
62 | ]}
63 |
64 | );
65 | };
66 |
67 | export default DiffDom;
68 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/List.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Form } from 'antd';
3 | import { MinusCircleOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
4 | import { map, isArray, concat } from 'lodash';
5 | import classNames from 'classnames';
6 |
7 | import YForm from '../index';
8 | import { oneLineItemStyle, mergeWithDom } from '../utils';
9 | import { YFormItemProps } from '../Items';
10 |
11 | export type ShowIconsType = {
12 | showBottomAdd?: boolean | { text?: string };
13 | showAdd?: boolean;
14 | showRemove?: boolean;
15 | };
16 |
17 | export interface YFormListComponentProps {
18 | maxNum?: number;
19 | minNum?: number;
20 | showRightIcons?: boolean;
21 | isUseIconStyle?: boolean;
22 | showIcons?: ShowIconsType;
23 | onShowIcons?: (p: { index: number }) => Pick;
24 | }
25 |
26 | export interface YFormListItems {
27 | index: number;
28 | field: { name: number; key: number; fieldKey: number; isListField?: boolean };
29 | add: () => void;
30 | remove: (index: number) => void;
31 | move: (from: number, to: number) => void;
32 | icons: React.ReactNode;
33 | iconsWidth: number;
34 | layoutStyles: React.CSSProperties[];
35 | }
36 |
37 | export interface YFormListProps extends YFormItemProps {
38 | items?: (p: YFormListItems) => YFormItemProps['children'];
39 | componentProps?: YFormListComponentProps;
40 | // 用于 diff 状态下处理数据
41 | addonBefore?: React.ReactNode;
42 | }
43 |
44 | export default (props: YFormListProps['componentProps']) => {
45 | const itemProps = React.useContext(YForm.YFormItemContext);
46 | const { disabled, scenes, label, items, name, addonBefore, offset } = itemProps as YFormListProps;
47 | const {
48 | maxNum,
49 | minNum,
50 | showRightIcons = true,
51 | isUseIconStyle = true,
52 | showIcons: { showBottomAdd = true, showAdd = true, showRemove = true } = {},
53 | onShowIcons,
54 | } = props;
55 | const context = React.useContext(YForm.ListContent);
56 | // 支持多级 List name 拼接
57 | const _name = context.prefixName ? concat(context.prefixName, name) : name;
58 |
59 | return (
60 |
61 | {addonBefore}
62 |
63 | {(fields, { add, remove, move }) => {
64 | const isMax = maxNum ? fields.length < maxNum : true;
65 | const isMin = minNum ? fields.length > minNum : true;
66 |
67 | return (
68 | <>
69 | {fields.map((field, index) => {
70 | const _showIcons = onShowIcons ? onShowIcons({ index }) : {};
71 | const { showAdd: _showAdd, showRemove: _showRemove } = mergeWithDom(
72 | { showAdd, showRemove },
73 | _showIcons,
74 | );
75 | const icons: React.ReactNode[] = [];
76 | if (!disabled) {
77 | if (isMax && _showAdd) {
78 | icons.push(
79 | {
82 | // 先增加一位
83 | add();
84 | // 再把最后一位移动到当前
85 | move(fields.length, index);
86 | }}
87 | />,
88 | );
89 | }
90 | if (isMin && _showRemove) {
91 | icons.push( remove(index)} />);
92 | }
93 | }
94 |
95 | const iconsWidth = icons.length * (8 + 14);
96 | const _oneLineStyle = oneLineItemStyle(['100%', iconsWidth]);
97 | // 第一行有 label（当然，外部需要传 label 参数）
98 | const _label = index === 0 && label;
99 |
100 | const _iconsDom = {icons}
;
101 |
102 | const style = {
103 | ...(!disabled && showRightIcons && isUseIconStyle && _oneLineStyle[0]),
104 | };
105 | const dataSource =
106 | items &&
107 | items({
108 | index,
109 | field,
110 | add,
111 | remove,
112 | move,
113 | icons: _iconsDom,
114 | iconsWidth,
115 | layoutStyles: _oneLineStyle,
116 | });
117 | let _children = dataSource;
118 | if (isArray(dataSource)) {
119 | _children = map(dataSource, (item, index) => {
120 | const _item = mergeWithDom(
121 | {
122 | componentProps: { style },
123 | label: index === 0 && _label,
124 | hideLable: label,
125 | },
126 | item,
127 | {
128 | // 内部使用
129 | _addonAfter: [
130 | showRightIcons && !disabled && index === 0 && (
131 |
136 | {icons}
137 |
138 | ),
139 | ].filter((x) => x),
140 | },
141 | );
142 | return _item;
143 | });
144 | }
145 | return (
146 |
150 |
151 | {_children}
152 |
153 |
154 | );
155 | })}
156 | {showBottomAdd && isMax && !disabled && (
157 |
158 | {[
159 | {
160 | type: 'button',
161 | offset,
162 | componentProps: {
163 | disabled,
164 | type: 'dashed',
165 | onClick: () => add(),
166 | style: { width: '100%' },
167 | children: (
168 | <>
169 |
170 | {typeof showBottomAdd === 'object'
171 | ? showBottomAdd.text
172 | : `添加${label || ''}`}
173 |
174 | ),
175 | },
176 | },
177 | ]}
178 |
179 | )}
180 |
181 | );
182 | }}
183 |
184 |
37 |
38 |
{convertMoney(`${value || ''}`)}
39 |
40 | {_childrenDataSource}
41 |
42 | );
43 | });
44 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/Radio.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import { Radio } from 'antd';
3 | import { map } from 'lodash';
4 | import { RadioGroupProps } from 'antd/lib/radio';
5 |
6 | import { getFieldKeyValue } from '../utils';
7 | import { OptionsProps } from '../ItemsType';
8 | import { useGetOptions } from '../hooks';
9 |
10 | export interface YRadioProps extends OptionsProps, Omit {}
11 |
12 | export default forwardRef((props, ref) => {
13 | const {
14 | value,
15 | postField = 'id',
16 | showField = 'name',
17 | options,
18 | renderOption,
19 | onAddProps,
20 | getOptions,
21 | ...rest
22 | } = props;
23 | // 可以是方法返回的异步数据
24 | const list = useGetOptions();
25 | const children = map(list, (item, index: number) => {
26 | if (item) {
27 | const _postField = getFieldKeyValue(item, index, postField);
28 | const _showField = getFieldKeyValue(item, index, showField);
29 | return (
30 |
36 | {/* 如果有 renderOption 就渲染 renderOption 如果没有默认用 showField 字段 */}
37 | {renderOption ? renderOption(item) : _showField}
38 |
39 | );
40 | }
41 | });
42 | React.useImperativeHandle(ref, () => props);
43 | return (
44 |
45 | {children}
46 |
47 | );
48 | });
49 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/SecureButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef, useCallback } from 'react';
2 | import { Button } from 'antd';
3 | import { ButtonProps } from 'antd/lib/button';
4 |
5 | export interface YFormSecureButtonProps {
6 | componentProps?: ButtonProps & { onLoaded?: () => void; minBtnLoadingTime?: number };
7 | }
8 |
9 | const SecureButton: React.FC = (props) => {
10 | const { onClick, onLoaded, minBtnLoadingTime = 500, ...rest } = props;
11 | const [loading, setLoading] = useState(false);
12 | const timeOut = useRef(null);
13 |
14 | useEffect(() => {
15 | return () => clearTimeout(timeOut.current);
16 | }, []);
17 |
18 | const handleSetFalseLoading = useCallback(
19 | (end: number, begin: number, err?: any) => {
20 | if (err) {
21 | setLoading(false);
22 | } else if (end - begin > minBtnLoadingTime) {
23 | // 如果 onClick 执行时间大于 0.5s，就立刻取消 loading
24 | setLoading(false);
25 | if (onLoaded) onLoaded();
26 | } else {
27 | // 如果 onClick 执行时间小于 0.5s，就设置 0.5s 后再取消 loading
28 | timeOut.current = window.setTimeout(() => {
29 | setLoading(false);
30 | if (onLoaded) onLoaded();
31 | }, minBtnLoadingTime);
32 | }
33 | },
34 | [onLoaded, minBtnLoadingTime],
35 | );
36 |
37 | const handleClick = async (e: React.MouseEvent) => {
38 | if (onClick) {
39 | setLoading(true);
40 | const begin = new Date().getTime();
41 | try {
42 | await onClick(e);
43 | const end = new Date().getTime();
44 | handleSetFalseLoading(end, begin);
45 | } catch (e) {
46 | const end = new Date().getTime();
47 | handleSetFalseLoading(end, begin, e || 'secure-button click error');
48 | }
49 | }
50 | };
51 |
52 | return ;
53 | };
54 |
55 | export default SecureButton;
56 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/Select.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import { Select } from 'antd';
3 | import { map } from 'lodash';
4 | import { SelectProps } from 'antd/lib/select';
5 |
6 | import { getFieldKeyValue } from '../utils';
7 | import { OptionsProps } from '../ItemsType';
8 | import { useGetOptions } from '../hooks';
9 |
10 | export interface YSelectProps extends OptionsProps, Omit, 'options'> {}
11 |
12 | export default forwardRef((props, ref) => {
13 | const {
14 | postField = 'id',
15 | showField = 'name',
16 | options,
17 | renderOption,
18 | onAddProps,
19 | getOptions,
20 | ...rest
21 | } = props;
22 | const list = useGetOptions();
23 |
24 | const children = map(list, (item, index: number) => {
25 | if (item) {
26 | const _postField = getFieldKeyValue(item, index, postField);
27 | const _showField = getFieldKeyValue(item, index, showField);
28 | return (
29 |
35 | {/* 如果有 renderOption 就渲染 renderOption 如果没有默认用 showField 字段 */}
36 | {renderOption ? renderOption(item) : _showField}
37 |
38 | );
39 | }
40 | });
41 | return (
42 |
45 | );
46 | });
47 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/Space.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { map, isArray } from 'lodash';
3 | import { Space } from 'antd';
4 | import { SpaceProps } from 'antd/lib/space';
5 |
6 | import YForm from '..';
7 | import { YFormItemProps } from '../Items';
8 |
9 | export interface YFormSpaceProps extends YFormItemProps {
10 | componentProps?: SpaceProps;
11 | items?: YFormItemProps['children'];
12 | }
13 |
14 | export default (props: YFormSpaceProps['componentProps']) => {
15 | const itemProps = React.useContext(YForm.YFormItemContext) as YFormSpaceProps;
16 | const { items, scenes } = itemProps;
17 |
18 | return (
19 |
20 | {isArray(items)
21 | ? map(items, (item, index) => {
22 | return (
23 |
24 | {[item]}
25 |
26 | );
27 | })
28 | : items}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/Submit.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { reverse, mergeWith } from 'lodash';
3 | import { ButtonProps } from 'antd/lib/button';
4 |
5 | import { YForm, mergeWithDom } from '../..';
6 | import { YFormDataSource } from '../Items';
7 | import { YFormSecureButtonProps } from './SecureButton';
8 | import { YFormSpaceProps } from './Space';
9 |
10 | export interface ShowBtns {
11 | showSubmit?: ButtonProps;
12 | showSave?: YFormSecureButtonProps['componentProps'];
13 | showCancel?: ButtonProps;
14 | showEdit?: ButtonProps;
15 | showBack?: ButtonProps;
16 | }
17 |
18 | type showBtns = {
19 | [P in keyof ShowBtns]?: boolean | ShowBtns[P];
20 | };
21 |
22 | export interface YFormSubmitComponentProps {
23 | showBtns?: showBtns | boolean;
24 | reverseBtns?: boolean;
25 | spaceProps?: YFormSpaceProps;
26 | }
27 | export interface YFormSubmitProps {
28 | componentProps?: YFormSubmitComponentProps;
29 | }
30 |
31 | export default (props: YFormSubmitProps['componentProps']) => {
32 | const { showBtns = true, reverseBtns, spaceProps } = props;
33 | const formProps = useContext(YForm.YFormContext);
34 | const itemsProps = useContext(YForm.YFormItemsContext);
35 | const { form, onSave, submitComponentProps, disabled } = mergeWithDom({}, formProps, itemsProps);
36 | const { getFieldsValue, getFormatFieldsValue } = form;
37 |
38 | const handleOnSave = async (e) => {
39 | e.preventDefault();
40 | if (onSave) {
41 | await onSave(getFormatFieldsValue(getFieldsValue(true)));
42 | }
43 | };
44 |
45 | const _showBtns: ShowBtns = {
46 | showSubmit: { children: '提交', type: 'primary', htmlType: 'submit' },
47 | showSave: { children: '保存', type: 'primary', onClick: handleOnSave },
48 | showCancel: { children: '取消' },
49 | showEdit: { children: '编辑' },
50 | showBack: { children: '返回', type: 'link' },
51 | };
52 | mergeWithDom(_showBtns, submitComponentProps.showBtns);
53 | const { showSubmit, showSave, showCancel, showEdit, showBack } = mergeWith(
54 | _showBtns,
55 | showBtns,
56 | (objValue, srcValue) => {
57 | // boolean 类型则用 objValue
58 | if (typeof srcValue === 'boolean') {
59 | return srcValue ? objValue : srcValue;
60 | }
61 | },
62 | );
63 |
64 | const actionBtns: Record = {
65 | submit: { type: 'button', noStyle: true, isShow: !!showSubmit, componentProps: showSubmit },
66 | save: { type: 'secureButton', noStyle: true, isShow: !!showSave, componentProps: showSave },
67 | cancel: { type: 'button', noStyle: true, isShow: !!showCancel, componentProps: showCancel },
68 | edit: { type: 'button', noStyle: true, isShow: !!showEdit, componentProps: showEdit },
69 | back: { type: 'button', noStyle: true, isShow: !!showBack, componentProps: showBack },
70 | };
71 |
72 | let btns = [];
73 | if (disabled) {
74 | btns = [actionBtns.edit, actionBtns.back];
75 | } else {
76 | btns = [actionBtns.submit, actionBtns.save, actionBtns.cancel];
77 | }
78 | if (reverseBtns) {
79 | btns = reverse(btns);
80 | }
81 | return (
82 |
83 | {[{ type: 'space', ...spaceProps, items: btns }]}
84 |
85 | );
86 | };
87 |
--------------------------------------------------------------------------------
/packages/yforms/src/YForm/component/TextArea.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import { Input } from 'antd';
3 | import { TextAreaProps } from 'antd/lib/input';
4 |
5 | import { calculateStrLength } from '../utils';
6 |
7 | export interface YTextAreaProps extends TextAreaProps {
8 | inputMax?: number;
9 | }
10 |
11 | export default forwardRef((props, ref) => {
12 | const { inputMax, ...rest } = props;
13 | const { value } = rest;
14 | return (
15 |
16 |
17 |
18 | {inputMax && `${calculateStrLength(`${value || ''}`)}/${inputMax}`}
19 |
20 |