@carefrees/form-utils-react-taro 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +486 -143
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # taro中使用
1
+ # taro 中使用
2
2
 
3
3
  ## 安装
4
4
 
@@ -12,133 +12,473 @@ npm install @carefrees/form-utils-react-taro # yarn add @carefrees/form-utils-re
12
12
 
13
13
  ```ts
14
14
  import { Form, FormItem } from '@carefrees/form-utils-react-taro';
15
- import React ,{ useState } from 'react';
15
+ import React, { useState } from 'react';
16
16
  import { View, Button, Input } from '@tarojs/components';
17
17
 
18
- const Demo = ()=>{
19
- const [formData]= useState({ name: '张三', age: 18 })
18
+ const Demo = () => {
19
+ const [formData] = useState({ name: '张三', age: 18 });
20
20
  const form = useForm();
21
21
 
22
- const onSubmit = async () =>{
23
- try {
22
+ const onSubmit = async () => {
23
+ try {
24
24
  console.log(form);
25
25
  const result = await form.validate();
26
26
  console.log(result);
27
27
  } catch (error) {
28
28
  console.log(error);
29
29
  }
30
- }
31
-
32
- return (<Form formData={formData} form={form} >
33
- <FormItem trigger="onInput" rules={[{ required: true, message: '必填' }]} name="name" label="name">
34
- <Input style={{ width: '100%' }} placeholder="请输入" />
35
- </FormItem>
36
- <FormItem trigger="onInput" name="age" label="age">
37
- <Input style={{ width: '100%' }} placeholder="请输入" />
38
- </FormItem>
39
- <Button onClick={onSubmit}>
40
- 验😁😝证
41
- </Button>
42
- </Form>)
43
- }
30
+ };
44
31
 
32
+ return (
33
+ <Form formData={formData} form={form}>
34
+ <FormItem trigger="onInput" rules={[{ required: true, message: '必填' }]} name="name" label="name">
35
+ <Input style={{ width: '100%' }} placeholder="请输入" />
36
+ </FormItem>
37
+ <FormItem trigger="onInput" name="age" label="age">
38
+ <Input style={{ width: '100%' }} placeholder="请输入" />
39
+ </FormItem>
40
+ <Button onClick={onSubmit}>验😁😝证</Button>
41
+ </Form>
42
+ );
43
+ };
45
44
  ```
46
45
 
47
46
  ### 控制隐藏
48
47
 
48
+ ```ts
49
+ import { Form, FormItem, FormHideItem } from '@carefrees/form-utils-react';
50
+ import React, { useState } from 'react';
51
+ import { View, Button, Input } from '@tarojs/components';
52
+
53
+ const Demo = () => {
54
+ const [formData] = useState({ name: '张三', age: 18 });
55
+ const form = useForm();
56
+
57
+ const onSubmit = async () => {
58
+ try {
59
+ console.log(form);
60
+ const result = await form.validate();
61
+ console.log(result);
62
+ } catch (error) {
63
+ console.log(error);
64
+ }
65
+ };
66
+
67
+ const onValuesChange = (item: any) => {
68
+ console.log('item', item);
69
+ if (Reflect.has(item, 'age')) {
70
+ if (item.age === '18') {
71
+ form.updatedFieldHideValue({ address: false });
72
+ } else {
73
+ form.updatedFieldHideValue({ address: true });
74
+ }
75
+ }
76
+ };
77
+
78
+ return (
79
+ <Form formData={formData} form={form} onValuesChange={onValuesChange} hideData={{ address: true }}>
80
+ <FormItem rules={[{ required: true, message: '必填' }]} name="name" label="name">
81
+ <Input style={{ width: '100%' }} placeholder="请输入" />
82
+ </FormItem>
83
+ <FormItem name="age" label="age">
84
+ <Input style={{ width: '100%' }} placeholder="请输入18,显示address表单项" />
85
+ </FormItem>
86
+ <FormHideItem name="address" label="address">
87
+ <Input style={{ width: '100%' }} placeholder="请输入" />
88
+ </FormHideItem>
89
+ <Button onClick={onSubmit}>验😁😝证</Button>
90
+ </Form>
91
+ );
92
+ };
93
+ ```
94
+
49
95
  ### 表单字段监听
50
96
 
51
- ### list表单项
97
+ ```ts
98
+ import { Form, FormItem, useWatch } from '@carefrees/form-utils-react';
99
+ import React, { useState } from 'react';
100
+ import { View, Button, Input } from '@tarojs/components';
101
+
102
+ // 子节点
103
+ const Child = () => {
104
+ // 第一次监听可以获取到值
105
+ const [value] = useWatch('name');
106
+ return <View>name值：{value}</View>;
107
+ };
108
+
109
+ const Demo = () => {
110
+ const [formData] = useState({ name: '张三', age: 18 });
111
+ const form = useForm();
112
+
113
+ // 在表单包裹内,第一次监听获取不到值
114
+ const [age] = useWatch('age', form);
115
+ console.log(age);
116
+
117
+ const onSubmit = async () => {
118
+ try {
119
+ console.log(form);
120
+ const result = await form.validate();
121
+ console.log(result);
122
+ } catch (error) {
123
+ console.log(error);
124
+ }
125
+ };
126
+
127
+ return (
128
+ <Form formData={formData} form={form}>
129
+ <FormItem rules={[{ required: true, message: '必填' }]} name="name" label="name">
130
+ <Input style={{ width: '100%' }} placeholder="请输入" />
131
+ </FormItem>
132
+ <FormItem name="age" label="age">
133
+ <Input style={{ width: '100%' }} placeholder="请输入" />
134
+ </FormItem>
135
+ <Child />
136
+ <Button onClick={onSubmit}>验😁😝证</Button>
137
+ </Form>
138
+ );
139
+ };
140
+ ```
141
+
142
+ ### list 表单项
143
+
144
+ ```tsx
145
+ import { Form, FormItem, useWatch, useForm, FormList, FormLayoutRows, FormLayout } from '@carefrees/form-utils-react';
146
+ import React, { useState } from 'react';
147
+ import { View, Button, Input } from '@tarojs/components';
148
+
149
+ // 子节点
150
+ const Child = () => {
151
+ // 第一次监听可以获取到值
152
+ const [value] = useWatch('list');
153
+ return <View>list值：{JSON.stringify(value)}</View>;
154
+ };
155
+
156
+ const Demo = () => {
157
+ const [formData] = useState({
158
+ name: '张三',
159
+ age: 18,
160
+ list: [{ name: '张三' }, { name: '李四' }],
161
+ });
162
+ const form = useForm();
163
+
164
+ const onSubmit = async () => {
165
+ try {
166
+ console.log(form);
167
+ const result = await form.validate();
168
+ console.log(result);
169
+ } catch (error) {
170
+ console.log(error);
171
+ }
172
+ };
173
+
174
+ return (
175
+ <Form formData={formData} form={form}>
176
+ <FormItem rules={[{ required: true, message: '必填' }]} name="name" label="name">
177
+ <Input style={{ width: '100%' }} placeholder="请输入" />
178
+ </FormItem>
179
+ <FormItem name="age" label="age">
180
+ <Input style={{ width: '100%' }} placeholder="请输入" />
181
+ </FormItem>
182
+ <FormLayoutRows>
183
+ <FormList name="list">
184
+ {(options) => {
185
+ const fields = options.fields;
186
+ return (
187
+ <View>
188
+ <Button type="button" onClick={() => options.onAdd({})}>
189
+ 添加一项数据
190
+ </Button>
191
+ {fields.map((item, index) => {
192
+ return (
193
+ <FormLayout key={item.key}>
194
+ <FormItem name={`[${item.name}].name`} label="子项name">
195
+ <Input style={{ width: '100%' }} placeholder="请输入" />
196
+ </FormItem>
197
+ <View
198
+ style={{
199
+ display: 'flex',
200
+ alignItems: 'flex-end',
201
+ padding: 8,
202
+ }}
203
+ >
204
+ <Button onClick={() => options.onDelete(index)}>删除数据</Button>
205
+ </View>
206
+ </FormLayout>
207
+ );
208
+ })}
209
+ </View>
210
+ );
211
+ }}
212
+ </FormList>
213
+ </FormLayoutRows>
214
+ <FormLayoutRows>
215
+ <Child />
216
+ <View style={{ display: 'flex', alignItems: 'flex-end', padding: 8 }}>
217
+ <Button onClick={onSubmit}>提交</Button>
218
+ </View>
219
+ </FormLayoutRows>
220
+ </Form>
221
+ );
222
+ };
223
+ export default Demo;
224
+ ```
225
+
226
+ ### 表单项依赖更新(dependencies 参数)
227
+
228
+ ```tsx
229
+ import { Form, FormItem, useWatch, useForm, FormLayoutRows, useFormInstance } from '@carefrees/form-utils-react';
230
+ import React, { useState, useMemo } from 'react';
231
+ import { View, Button, Input } from '@tarojs/components';
232
+
233
+ // 子节点
234
+ const ChildInput = () => {
235
+ const form = useFormInstance();
236
+ const a = form.getFieldValue('a');
237
+ const b = form.getFieldValue('b');
238
+ const value = useMemo(() => {
239
+ if (a && b) {
240
+ return a * b;
241
+ }
242
+ return 0;
243
+ }, [a, b]);
244
+ // 第一次监听可以获取到值
245
+ return <Input placeholder="请输入a和b" disabled value={value} />;
246
+ };
247
+
248
+ const Demo = () => {
249
+ const [formData] = useState({ a: 0, b: 0 });
250
+ const form = useForm();
52
251
 
53
- ### 表单项之间联动校验
252
+ const onSubmit = async () => {
253
+ try {
254
+ console.log(form);
255
+ const result = await form.validate();
256
+ console.log(result);
257
+ } catch (error) {
258
+ console.log(error);
259
+ }
260
+ };
54
261
 
55
- ### 表单输入框属性联动设置
262
+ return (
263
+ <Form formData={formData} form={form}>
264
+ <FormItem name="a" label="a">
265
+ <Input type="number" style={{ width: '100%' }} placeholder="请输入" />
266
+ </FormItem>
267
+ <FormItem name="b" label="b">
268
+ <Input type="number" style={{ width: '100%' }} placeholder="请输入" />
269
+ </FormItem>
270
+ <FormItem dependencies={['a', 'b']} name="c" label="c">
271
+ <ChildInput />
272
+ </FormItem>
273
+ <FormLayoutRows>
274
+ <View style={{ display: 'flex', alignItems: 'flex-end', padding: 8 }}>
275
+ <Button onClick={onSubmit}>提交</Button>
276
+ </View>
277
+ </FormLayoutRows>
278
+ </Form>
279
+ );
280
+ };
281
+ export default Demo;
282
+ ```
56
283
 
57
284
  ### 布局组件
58
285
 
286
+ ```tsx
287
+ import {
288
+ Form,
289
+ FormItem,
290
+ useWatch,
291
+ useForm,
292
+ FormLayoutRows,
293
+ useFormInstance,
294
+ FormLayout,
295
+ } from '@carefrees/form-utils-react';
296
+ import React, { useState, useMemo } from 'react';
297
+ import { View, Button, Input } from '@tarojs/components';
298
+
299
+ const Demo = () => {
300
+ const [formData] = useState({
301
+ a: '',
302
+ b: '',
303
+ c: '',
304
+ d: '',
305
+ e: '',
306
+ f: '',
307
+ g: '',
308
+ h: '',
309
+ j: '',
310
+ k: '',
311
+ l: '',
312
+ m: '',
313
+ address: '',
314
+ });
315
+ const form = useForm();
316
+
317
+ const onSubmit = async () => {
318
+ try {
319
+ console.log(form);
320
+ const result = await form.validate();
321
+ console.log(result);
322
+ } catch (error) {
323
+ console.log(error);
324
+ }
325
+ };
326
+
327
+ return (
328
+ <Form gap={14} colCount={4} formData={formData} form={form}>
329
+ <FormLayout formItemLabelStyle={{ width: 60 }} isAllColSpan labelMode="left" bordered title="标题1">
330
+ <FormItem rules={[{ required: true, message: '必填' }]} name="a" label="测试1">
331
+ <Input style={{ width: '100%' }} placeholder="请输入18,显示address表单项" />
332
+ </FormItem>
333
+ <FormItem name="address" label="address">
334
+ <Input style={{ width: '100%' }} placeholder="请输入" />
335
+ </FormItem>
336
+ </FormLayout>
337
+ <FormLayout
338
+ isAllColSpan
339
+ labelMode="top"
340
+ bordered
341
+ title="标题2"
342
+ >
343
+ <FormItem colSpan={2} rules={[{ required: true, message: '必填' }]} name="a" label="测试1">
344
+ <Input style={{ width: '100%' }} placeholder="请输入" />
345
+ </FormItem>
346
+ <FormItem rowSpan={2} rules={[{ required: true, message: '必填' }]} name="b" label="测试2">
347
+ <Input style={{ width: '100%', height: '100%' }} placeholder="请输入" />
348
+ </FormItem>
349
+ <FormItem name="c" label="测试3">
350
+ <Input style={{ width: '100%' }} placeholder="请输入" />
351
+ </FormItem>
352
+ <FormItem name="d" label="测试4">
353
+ <Input style={{ width: '100%' }} placeholder="请输入" />
354
+ </FormItem>
355
+ <FormItem name="e" label="测试5">
356
+ <Input style={{ width: '100%' }} placeholder="请输入" />
357
+ </FormItem>
358
+ <FormItem name="f" label="测试6">
359
+ <Input style={{ width: '100%' }} placeholder="请输入" />
360
+ </FormItem>
361
+ <FormItem name="g" label="测试7">
362
+ <Input style={{ width: '100%' }} placeholder="请输入" />
363
+ </FormItem>
364
+ <FormItem name="h" label="测试8">
365
+ <Input style={{ width: '100%' }} placeholder="请输入" />
366
+ </FormItem>
367
+ <FormItem name="j" label="测试9">
368
+ <Input style={{ width: '100%' }} placeholder="请输入" />
369
+ </FormItem>
370
+ <FormItem name="k" label="测试10">
371
+ <Input style={{ width: '100%' }} placeholder="请输入" />
372
+ </FormItem>
373
+ <View>
374
+ <Button onClick={onSubmit}>验😁😝证</Button>
375
+ </View>
376
+ </FormLayout>
377
+ <FormLayout isAllColSpan labelMode="top" title="标题2">
378
+ <FormItem rules={[{ required: true, message: '必填' }]} name="a" label="测试1">
379
+ <Input style={{ width: '100%' }} placeholder="请输入" />
380
+ </FormItem>
381
+ <FormItem name="address" label="address">
382
+ <Input style={{ width: '100%' }} placeholder="请输入" />
383
+ </FormItem>
384
+ </FormLayout>
385
+ </Form>
386
+ );
387
+ };
388
+ export default Demo;
389
+ ```
390
+
59
391
  ## 类型
60
392
 
61
- ### Form表单
393
+ ### Form 表单
62
394
 
63
395
  ```ts
64
396
  import React from 'react';
65
397
  import { FormInstanceBase, ValidateErrorEntity } from '@carefrees/form-utils';
66
398
  import { FormLayoutProps } from '@carefrees/form-utils-react-taro/esm/layout';
67
399
  export interface FormProps<T = any> extends FormLayoutProps {
68
- children?: React.ReactNode;
69
- form?: FormInstanceBase;
70
- style?: React.CSSProperties;
71
- className?: string;
72
- layoutClassName?: string;
73
- layoutStyle?: React.CSSProperties;
74
- /**表单数据*/
75
- formData?: any;
76
- /**值更新触发*/
77
- onValuesChange?: (changedValues: Partial<T>, values: T) => void;
78
- /**提交保存 验证成功*/
79
- onFinish?: (values: T) => void;
80
- /**提交保存 验证失败*/
81
- onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
82
- /**隐藏表单项初始值*/
83
- hideData?: Record<string, boolean>;
84
- /**表单名称*/
85
- name?: string;
86
- /**隐藏规则校验*/
87
- hideRuleData?: Record<string, boolean>;
88
- /**自动重置更新formData数据*/
89
- isAutoUpdatedFormData?: boolean;
400
+ children?: React.ReactNode;
401
+ form?: FormInstanceBase;
402
+ style?: React.CSSProperties;
403
+ className?: string;
404
+ layoutClassName?: string;
405
+ layoutStyle?: React.CSSProperties;
406
+ /**表单数据*/
407
+ formData?: any;
408
+ /**值更新触发*/
409
+ onValuesChange?: (changedValues: Partial<T>, values: T) => void;
410
+ /**提交保存 验证成功*/
411
+ onFinish?: (values: T) => void;
412
+ /**提交保存 验证失败*/
413
+ onFinishFailed?: (errorInfo: ValidateErrorEntity<T>) => void;
414
+ /**隐藏表单项初始值*/
415
+ hideData?: Record<string, boolean>;
416
+ /**表单名称*/
417
+ name?: string;
418
+ /**隐藏规则校验*/
419
+ hideRuleData?: Record<string, boolean>;
420
+ /**自动重置更新formData数据*/
421
+ isAutoUpdatedFormData?: boolean;
90
422
  }
91
- export declare function Form<T = any>(props: FormProps<T>): import("react/jsx-runtime").JSX.Element;
92
-
423
+ export declare function Form<T = any>(props: FormProps<T>): import('react/jsx-runtime').JSX.Element;
93
424
  ```
94
425
 
95
- ### FormItem表单项
426
+ ### FormItem 表单项
96
427
 
97
428
  ```ts
98
429
  import { LayoutFormItemProps } from '@carefrees/form-utils-react-taro/esm/layout/layout.formItem';
99
430
  import { FormItemAttrOptions } from '@carefrees/form-utils-react-taro/esm/hooks/attr/attr.FormItem';
100
431
  export interface FormItemProps extends FormItemAttrOptions, LayoutFormItemProps {
101
- /**不进行样式渲染*/
102
- noStyle?: boolean;
432
+ /**不进行样式渲染*/
433
+ noStyle?: boolean;
103
434
  }
104
435
  /**表单项*/
105
- export declare const FormItem: import("react").MemoExoticComponent<(props: Partial<FormItemProps>) => import("react/jsx-runtime").JSX.Element>;
436
+ export declare const FormItem: import('react').MemoExoticComponent<
437
+ (props: Partial<FormItemProps>) => import('react/jsx-runtime').JSX.Element
438
+ >;
106
439
  /**隐藏表单项*/
107
- export declare const FormHideItem: import("react").MemoExoticComponent<(props: FormItemProps) => import("react/jsx-runtime").JSX.Element>;
108
-
440
+ export declare const FormHideItem: import('react').MemoExoticComponent<
441
+ (props: FormItemProps) => import('react/jsx-runtime').JSX.Element
442
+ >;
109
443
  ```
110
444
 
111
- ### FormList表单List
445
+ ### FormList 表单 List
112
446
 
113
447
  ```ts
114
448
  import { RuleInstanceBase, FormItemInstanceBase, FormListInstanceBase } from '@carefrees/form-utils';
115
449
  import React from 'react';
116
450
  import { RegisterFormListOptions } from '@carefrees/form-utils-react-hooks';
117
451
  export interface FormListChildrenProps {
118
- /**数据集合*/
119
- fields: {
120
- name: number;
121
- key: number;
122
- }[];
123
- /**添加*/
124
- onAdd: (initialValue?: Object) => void;
125
- /**删除*/
126
- onDelete: (index: number | number[]) => void;
127
- /**移动*/
128
- onMove: (from: number, to: number) => void;
452
+ /**数据集合*/
453
+ fields: {
454
+ name: number;
455
+ key: number;
456
+ }[];
457
+ /**添加*/
458
+ onAdd: (initialValue?: Object) => void;
459
+ /**删除*/
460
+ onDelete: (index: number | number[]) => void;
461
+ /**移动*/
462
+ onMove: (from: number, to: number) => void;
129
463
  }
130
464
  export interface FormListProps extends RegisterFormListOptions {
131
- children: (options: FormListChildrenProps, instances: {
132
- ruleInstance: RuleInstanceBase;
133
- formItemInstance: FormItemInstanceBase;
134
- formListInstance: FormListInstanceBase;
135
- }) => React.ReactNode;
465
+ children: (
466
+ options: FormListChildrenProps,
467
+ instances: {
468
+ ruleInstance: RuleInstanceBase;
469
+ formItemInstance: FormItemInstanceBase;
470
+ formListInstance: FormListInstanceBase;
471
+ },
472
+ ) => React.ReactNode;
136
473
  }
137
474
  /**form list 组件*/
138
- export declare const FormList: React.MemoExoticComponent<(props: FormListProps) => import("react/jsx-runtime").JSX.Element>;
475
+ export declare const FormList: React.MemoExoticComponent<
476
+ (props: FormListProps) => import('react/jsx-runtime').JSX.Element
477
+ >;
139
478
  /**隐藏 form list item 组件*/
140
- export declare const FormHideList: React.MemoExoticComponent<(props: FormListProps) => import("react/jsx-runtime").JSX.Element>;
141
-
479
+ export declare const FormHideList: React.MemoExoticComponent<
480
+ (props: FormListProps) => import('react/jsx-runtime').JSX.Element
481
+ >;
142
482
  ```
143
483
 
144
484
  ### 布局组件 类型
@@ -148,37 +488,39 @@ import React from 'react';
148
488
  import { ViewProps } from '@tarojs/components';
149
489
  import { AttrsOptions } from '@carefrees/form-utils-react-hooks';
150
490
  export interface FormLayoutProps extends AttrsOptions {
151
- /**标题*/
152
- title?: React.ReactNode;
153
- /**额外内容*/
154
- extra?: React.ReactNode;
155
- /**内容*/
156
- children?: React.ReactNode;
157
- /**是否占据整行*/
158
- isAllColSpan?: boolean;
159
- className?: string;
160
- /**头部ClassName*/
161
- headerClassName?: string;
162
- /**内容ClassName*/
163
- bodyClassName?: string;
164
- style?: React.CSSProperties;
165
- /**头部样式*/
166
- headerStyle?: React.CSSProperties;
167
- /**内容样式*/
168
- bodyStyle?: React.CSSProperties;
169
- /**是否添加边框*/
170
- bordered?: boolean;
171
- /**列数据*/
172
- colCount?: number;
173
- /**
174
- * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
175
- */
176
- gap?: string | number;
491
+ /**标题*/
492
+ title?: React.ReactNode;
493
+ /**额外内容*/
494
+ extra?: React.ReactNode;
495
+ /**内容*/
496
+ children?: React.ReactNode;
497
+ /**是否占据整行*/
498
+ isAllColSpan?: boolean;
499
+ className?: string;
500
+ /**头部ClassName*/
501
+ headerClassName?: string;
502
+ /**内容ClassName*/
503
+ bodyClassName?: string;
504
+ style?: React.CSSProperties;
505
+ /**头部样式*/
506
+ headerStyle?: React.CSSProperties;
507
+ /**内容样式*/
508
+ bodyStyle?: React.CSSProperties;
509
+ /**是否添加边框*/
510
+ bordered?: boolean;
511
+ /**列数据*/
512
+ colCount?: number;
513
+ /**
514
+ * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
515
+ */
516
+ gap?: string | number;
177
517
  }
178
518
  /**布局组件*/
179
- export declare const FormLayout: React.MemoExoticComponent<(props: FormLayoutProps) => import("react/jsx-runtime").JSX.Element>;
519
+ export declare const FormLayout: React.MemoExoticComponent<
520
+ (props: FormLayoutProps) => import('react/jsx-runtime').JSX.Element
521
+ >;
180
522
  /**布局组件 占据一整行*/
181
- export declare const FormLayoutRows: (props: ViewProps) => import("react/jsx-runtime").JSX.Element;
523
+ export declare const FormLayoutRows: (props: ViewProps) => import('react/jsx-runtime').JSX.Element;
182
524
  ```
183
525
 
184
526
  ### 表单项布局组件类型
@@ -186,47 +528,48 @@ export declare const FormLayoutRows: (props: ViewProps) => import("react/jsx-run
186
528
  ```ts
187
529
  import React from 'react';
188
530
  export interface LayoutFormItemProps {
189
- /**规则校验失败错误提示位置*/
190
- errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
191
- /**必填样式*/
192
- required?: boolean;
193
- /**label显示模式*/
194
- labelMode?: 'left' | 'top' | 'between' | 'hide';
195
- /**内容*/
196
- children?: React.ReactNode;
197
- /**只进行规则样式*/
198
- onlyRuleStyle?: boolean;
199
- label?: React.ReactNode;
200
- /**底部提示内容*/
201
- helpText?: React.ReactNode;
202
- /**额外内容*/
203
- extra?: React.ReactNode;
204
- /**是否显示label后的冒号*/
205
- showColon?: boolean;
206
- /**
207
- * 表单项占据列数
208
- * @default 1
209
- */
210
- colSpan?: number;
211
- /**
212
- * 表单项占据行数
213
- * @default 1
214
- */
215
- rowSpan?: number;
216
- htmlFor?: string;
217
- /**规则验证结果*/
218
- validateResult?: {
219
- tip: string | (string | undefined)[];
220
- isInvalid: boolean;
221
- };
222
- style?: React.CSSProperties;
223
- className?: string;
224
- labelStyle?: React.CSSProperties;
225
- labelClassName?: string;
226
- /**底部边框*/
227
- inputBordered?: boolean;
531
+ /**规则校验失败错误提示位置*/
532
+ errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
533
+ /**必填样式*/
534
+ required?: boolean;
535
+ /**label显示模式*/
536
+ labelMode?: 'left' | 'top' | 'between' | 'hide';
537
+ /**内容*/
538
+ children?: React.ReactNode;
539
+ /**只进行规则样式*/
540
+ onlyRuleStyle?: boolean;
541
+ label?: React.ReactNode;
542
+ /**底部提示内容*/
543
+ helpText?: React.ReactNode;
544
+ /**额外内容*/
545
+ extra?: React.ReactNode;
546
+ /**是否显示label后的冒号*/
547
+ showColon?: boolean;
548
+ /**
549
+ * 表单项占据列数
550
+ * @default 1
551
+ */
552
+ colSpan?: number;
553
+ /**
554
+ * 表单项占据行数
555
+ * @default 1
556
+ */
557
+ rowSpan?: number;
558
+ htmlFor?: string;
559
+ /**规则验证结果*/
560
+ validateResult?: {
561
+ tip: string | (string | undefined)[];
562
+ isInvalid: boolean;
563
+ };
564
+ style?: React.CSSProperties;
565
+ className?: string;
566
+ labelStyle?: React.CSSProperties;
567
+ labelClassName?: string;
568
+ /**底部边框*/
569
+ inputBordered?: boolean;
228
570
  }
229
571
  /**布局组件 表单项*/
230
- export declare const LayoutFormItem: React.MemoExoticComponent<(props: LayoutFormItemProps) => import("react/jsx-runtime").JSX.Element>;
231
-
572
+ export declare const LayoutFormItem: React.MemoExoticComponent<
573
+ (props: LayoutFormItemProps) => import('react/jsx-runtime').JSX.Element
574
+ >;
232
575
  ```
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "author": "SunLxy <1011771396@qq.com>",
4
4
  "description": "taro react 表单组件",
5
5
  "homepage": "https://github.com/SunLxy/carefrees-form-utils",
6
- "version": "0.0.7",
6
+ "version": "0.0.8",
7
7
  "main": "lib/index.js",
8
8
  "types": "lib/index.d.ts",
9
9
  "module": "esm/index.js",
@@ -21,8 +21,8 @@
21
21
  "esm"
22
22
  ],
23
23
  "dependencies": {
24
- "@carefrees/form-utils": "^0.0.7",
25
- "@carefrees/form-utils-react-hooks": "^0.0.7",
24
+ "@carefrees/form-utils": "^0.0.8",
25
+ "@carefrees/form-utils-react-hooks": "^0.0.8",
26
26
  "classnames": "2.5.1"
27
27
  },
28
28
  "devDependencies": {