@fairys/taro-valtio-form-basic 0.0.13 → 1.0.0
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.
- package/README.md +245 -0
- package/esm/form.d.ts +7 -3
- package/esm/form.item.d.ts +5 -5
- package/esm/form.js +3 -1
- package/package.json +2 -2
- package/src/form.item.tsx +8 -6
- package/src/form.tsx +13 -2
package/README.md
CHANGED
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
# taro-valtio-form-basic
|
|
2
|
+
|
|
3
|
+
## 安装
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @fairys/taro-valtio-form-basic # yarn add @fairys/taro-valtio-form-basic # pnpm add @fairys/taro-valtio-form-basic
|
|
7
|
+
```
|
|
8
|
+
## 表单参数
|
|
9
|
+
|
|
10
|
+
### 类型
|
|
11
|
+
|
|
12
|
+
部分参数依赖[基础表单组件概览](https://autumn-fairy-tales.github.io/valtio-form-basic/basic-form/)
|
|
13
|
+
|
|
14
|
+
**布局**
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
import type { FairysValtioFormLayoutAttrsProps } from '@fairys/valtio-form-basic';
|
|
18
|
+
export interface FairysTaroValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps {}
|
|
19
|
+
export declare function FairysTaroValtioFormLayout(props: FairysTaroValtioFormLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
**表单项**
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
/**表单项*/
|
|
27
|
+
import type { ViewProps } from '@tarojs/components';
|
|
28
|
+
import type { FairysValtioFormItemAttrsProps, MObject } from '@fairys/valtio-form-basic';
|
|
29
|
+
export interface FairysTaroValtioFormItemProps<T extends MObject<T> = Record<string, any>> extends Omit<ViewProps, 'style'>, FairysValtioFormItemAttrsProps {
|
|
30
|
+
/**是否使用控制隐藏的表单项*/
|
|
31
|
+
isHide?: boolean;
|
|
32
|
+
/**是否使用无样式表单项*/
|
|
33
|
+
noStyle?: boolean;
|
|
34
|
+
}
|
|
35
|
+
/**普通表单项*/
|
|
36
|
+
export declare function FairysTaroValtioFormItemBase<T extends MObject<T> = Record<string, any>>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
/**控制隐藏的表单项*/
|
|
38
|
+
export declare function FairysTaroValtioFormHideItem<T extends MObject<T> = Record<string, any>>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
/**无样式表单项*/
|
|
40
|
+
export declare function FairysTaroValtioFormItemNoStyle<T extends MObject<T> = Record<string, any>>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
|
|
42
|
+
export declare function FairysTaroValtioFormItem<T extends MObject<T> = Record<string, any>>(props: FairysTaroValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**表单**
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
import React from 'react';
|
|
50
|
+
import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem, FairysTaroValtioFormItemBase } from './form.item';
|
|
51
|
+
import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic';
|
|
52
|
+
import type { FairysValtioFormAttrsProps, FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic';
|
|
53
|
+
|
|
54
|
+
export interface FairysTaroValtioFormProps<T extends MObject<T> = Record<string, any>> extends FairysValtioFormAttrsProps<T> {}
|
|
55
|
+
|
|
56
|
+
declare function FairysTaroValtioFormBase<T extends MObject<T> = Record<string, any>>(props: FairysTaroValtioFormProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
export declare const FairysTaroValtioForm: typeof FairysTaroValtioFormBase & {
|
|
58
|
+
/**初始化实例*/
|
|
59
|
+
useForm: typeof useFairysValtioFormInstance;
|
|
60
|
+
/**获取状态*/
|
|
61
|
+
useFormState: typeof useFairysValtioFormInstanceContextState;
|
|
62
|
+
/**获取隐藏状态*/
|
|
63
|
+
useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
|
|
64
|
+
/**获取上下文实例*/
|
|
65
|
+
useFormInstance: typeof useFairysValtioFormInstanceContext;
|
|
66
|
+
/**表单项基础组件*/
|
|
67
|
+
FormItemBase: typeof FairysTaroValtioFormItemBase;
|
|
68
|
+
/**表单项组件*/
|
|
69
|
+
FormItem: typeof FairysTaroValtioFormItem;
|
|
70
|
+
/**隐藏表单项组件*/
|
|
71
|
+
FormHideItem: typeof FairysTaroValtioFormHideItem;
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## 案例
|
|
77
|
+
### 引入样式
|
|
78
|
+
|
|
79
|
+
```ts title='src/app.tsx'
|
|
80
|
+
import '@fairys/valtio-form-basic/esm/styles/index.css';
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 基础使用
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { View } from '@tarojs/components';
|
|
87
|
+
import { Button, Input } from '@nutui/nutui-react-taro';
|
|
88
|
+
import { FairysTaroValtioForm } from '@fairys/taro-valtio-form-basic';
|
|
89
|
+
interface State {
|
|
90
|
+
username?: string;
|
|
91
|
+
username2?: string;
|
|
92
|
+
username3?: string;
|
|
93
|
+
username4?: string;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
function Basic() {
|
|
97
|
+
const form = FairysTaroValtioForm.useForm<State>();
|
|
98
|
+
|
|
99
|
+
const onSubmit = async () => {
|
|
100
|
+
try {
|
|
101
|
+
const values = await form.validate();
|
|
102
|
+
console.log(values);
|
|
103
|
+
} catch (error) {
|
|
104
|
+
console.log(error);
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
return (
|
|
109
|
+
<View style={{ padding: 20 }}>
|
|
110
|
+
<FairysTaroValtioForm<State>
|
|
111
|
+
form={form}
|
|
112
|
+
rules={{
|
|
113
|
+
username: [{ required: true, message: '请输入用户名' }],
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
<FairysTaroValtioForm.FormItem name="username" label="用户名">
|
|
117
|
+
<Input placeholder="请输入" />
|
|
118
|
+
</FairysTaroValtioForm.FormItem>
|
|
119
|
+
<FairysTaroValtioForm.FormItem rules={[{ required: true, message: '请输入用户名2' }]} name="username2" label="用户名2">
|
|
120
|
+
<Input placeholder="请输入" />
|
|
121
|
+
</FairysTaroValtioForm.FormItem>
|
|
122
|
+
<FairysTaroValtioForm.FormItem rules={[{ required: true, message: '请输入用户名3' }]} name="username3" label="用户名3">
|
|
123
|
+
<Input placeholder="请输入" />
|
|
124
|
+
</FairysTaroValtioForm.FormItem>
|
|
125
|
+
<FairysTaroValtioForm.FormItem rules={[{ required: true, message: '请输入用户名4' }]} name="username4" label="用户名4">
|
|
126
|
+
<Input placeholder="请输入" />
|
|
127
|
+
</FairysTaroValtioForm.FormItem>
|
|
128
|
+
<Button onClick={onSubmit}>提交</Button>
|
|
129
|
+
</FairysTaroValtioForm>
|
|
130
|
+
</View>
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
export default Basic;
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### 隐藏表单
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
import { View } from '@tarojs/components';
|
|
141
|
+
import { Button, Input } from '@nutui/nutui-react-taro';
|
|
142
|
+
import { FairysTaroValtioForm } from '@fairys/taro-valtio-form-basic';
|
|
143
|
+
interface State {
|
|
144
|
+
username?: string;
|
|
145
|
+
隐藏表单项?: string;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
function Basic() {
|
|
149
|
+
const form = FairysTaroValtioForm.useForm<State>();
|
|
150
|
+
|
|
151
|
+
const onSubmit = async () => {
|
|
152
|
+
try {
|
|
153
|
+
const values = await form.validate();
|
|
154
|
+
console.log(values);
|
|
155
|
+
} catch (error) {
|
|
156
|
+
console.log(error);
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
return (
|
|
161
|
+
<View style={{ padding: 20 }}>
|
|
162
|
+
<FairysTaroValtioForm<State>
|
|
163
|
+
form={form}
|
|
164
|
+
rules={{
|
|
165
|
+
username: [{ required: true, message: '请输入用户名' }],
|
|
166
|
+
}}
|
|
167
|
+
>
|
|
168
|
+
<FairysTaroValtioForm.FormItem
|
|
169
|
+
name="username"
|
|
170
|
+
label="输入5隐藏表单项"
|
|
171
|
+
onAfterUpdate={(value) => {
|
|
172
|
+
console.log('value', value);
|
|
173
|
+
form.updatedHideInfo({ 隐藏表单项: value === '5' });
|
|
174
|
+
}}
|
|
175
|
+
>
|
|
176
|
+
<Input placeholder="请输入" />
|
|
177
|
+
</FairysTaroValtioForm.FormItem>
|
|
178
|
+
<FairysTaroValtioForm.FormHideItem
|
|
179
|
+
rules={[{ required: true, message: '请输入隐藏表单项' }]}
|
|
180
|
+
name="隐藏表单项"
|
|
181
|
+
label="隐藏表单项"
|
|
182
|
+
>
|
|
183
|
+
<Input placeholder="请输入隐藏表单项" />
|
|
184
|
+
</FairysTaroValtioForm.FormHideItem>
|
|
185
|
+
<Button onClick={onSubmit}>提交</Button>
|
|
186
|
+
</FairysTaroValtioForm>
|
|
187
|
+
</View>
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
export default Basic;
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### 监听表单
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
import { View } from '@tarojs/components';
|
|
197
|
+
import { Button, Input } from '@nutui/nutui-react-taro';
|
|
198
|
+
import { FairysTaroValtioForm } from '@fairys/taro-valtio-form-basic';
|
|
199
|
+
interface State {
|
|
200
|
+
username?: string;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
const Cusotm = () => {
|
|
204
|
+
const [formState] = FairysTaroValtioForm.useFormState<State>();
|
|
205
|
+
return <View>{formState.username}</View>;
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
function Basic() {
|
|
209
|
+
const form = FairysTaroValtioForm.useForm();
|
|
210
|
+
|
|
211
|
+
const onSubmit = async () => {
|
|
212
|
+
try {
|
|
213
|
+
const values = await form.validate();
|
|
214
|
+
console.log(values);
|
|
215
|
+
} catch (error) {
|
|
216
|
+
console.log(error);
|
|
217
|
+
}
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
const formState = FairysTaroValtioForm.useFormInstanceToState(form);
|
|
221
|
+
|
|
222
|
+
return (
|
|
223
|
+
<View style={{ padding: 20 }}>
|
|
224
|
+
<View>用户名:{formState.username}</View>
|
|
225
|
+
<FairysTaroValtioForm
|
|
226
|
+
form={form}
|
|
227
|
+
rules={{
|
|
228
|
+
username: [{ required: true, message: '请输入用户名' }],
|
|
229
|
+
}}
|
|
230
|
+
>
|
|
231
|
+
<FairysTaroValtioForm.FormItem name="username" label="用户名">
|
|
232
|
+
<Input placeholder="请输入" />
|
|
233
|
+
</FairysTaroValtioForm.FormItem>
|
|
234
|
+
<FairysTaroValtioForm.FormItem label="监听数据渲染">
|
|
235
|
+
<Cusotm />
|
|
236
|
+
</FairysTaroValtioForm.FormItem>
|
|
237
|
+
|
|
238
|
+
<Button onClick={onSubmit}>提交</Button>
|
|
239
|
+
</FairysTaroValtioForm>
|
|
240
|
+
</View>
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
export default Basic;
|
|
244
|
+
|
|
245
|
+
```
|
package/esm/form.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { FairysTaroValtioFormItem, FairysTaroValtioFormHideItem, FairysTaroValtioFormItemBase } from './form.item';
|
|
2
|
-
import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic';
|
|
2
|
+
import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceToState, useFairysValtioFormInstanceToHideState } from '@fairys/valtio-form-basic';
|
|
3
3
|
import type { FairysValtioFormAttrsProps, FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
export * from '@fairys/valtio-form-basic';
|
|
6
6
|
export * from './form.item';
|
|
7
7
|
export * from './layout';
|
|
8
|
-
export interface FairysTaroValtioFormProps<T extends MObject<T> =
|
|
8
|
+
export interface FairysTaroValtioFormProps<T extends MObject<T> = Record<string, any>> extends FairysValtioFormAttrsProps<T> {
|
|
9
9
|
}
|
|
10
|
-
declare function FairysTaroValtioFormBase<T extends MObject<T> =
|
|
10
|
+
declare function FairysTaroValtioFormBase<T extends MObject<T> = Record<string, any>>(props: FairysTaroValtioFormProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export declare const FairysTaroValtioForm: typeof FairysTaroValtioFormBase & {
|
|
12
12
|
/**初始化实例*/
|
|
13
13
|
useForm: typeof useFairysValtioFormInstance;
|
|
@@ -23,4 +23,8 @@ export declare const FairysTaroValtioForm: typeof FairysTaroValtioFormBase & {
|
|
|
23
23
|
FormItem: typeof FairysTaroValtioFormItem;
|
|
24
24
|
/**隐藏表单项组件*/
|
|
25
25
|
FormHideItem: typeof FairysTaroValtioFormHideItem;
|
|
26
|
+
/**传递表单实例获取状态*/
|
|
27
|
+
useFormInstanceToState: typeof useFairysValtioFormInstanceToState;
|
|
28
|
+
/**传递表单实例获取隐藏状态*/
|
|
29
|
+
useFormInstanceToHideState: typeof useFairysValtioFormInstanceToHideState;
|
|
26
30
|
};
|
package/esm/form.item.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
/**表单项*/
|
|
2
2
|
import type { ViewProps } from '@tarojs/components';
|
|
3
3
|
import type { FairysValtioFormItemAttrsProps, MObject } from '@fairys/valtio-form-basic';
|
|
4
|
-
export interface FairysTaroValtioFormItemProps<T extends MObject<T> =
|
|
4
|
+
export interface FairysTaroValtioFormItemProps<T extends MObject<T> = Record<string, any>> extends Omit<ViewProps, 'style'>, FairysValtioFormItemAttrsProps<T> {
|
|
5
5
|
/**是否使用控制隐藏的表单项*/
|
|
6
6
|
isHide?: boolean;
|
|
7
7
|
/**是否使用无样式表单项*/
|
|
8
8
|
noStyle?: boolean;
|
|
9
9
|
}
|
|
10
10
|
/**普通表单项*/
|
|
11
|
-
export declare function FairysTaroValtioFormItemBase<T extends MObject<T> =
|
|
11
|
+
export declare function FairysTaroValtioFormItemBase<T extends MObject<T> = Record<string, any>>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
/**控制隐藏的表单项*/
|
|
13
|
-
export declare function FairysTaroValtioFormHideItem<T extends MObject<T> =
|
|
13
|
+
export declare function FairysTaroValtioFormHideItem<T extends MObject<T> = Record<string, any>>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
/**无样式表单项*/
|
|
15
|
-
export declare function FairysTaroValtioFormItemNoStyle<T extends MObject<T> =
|
|
15
|
+
export declare function FairysTaroValtioFormItemNoStyle<T extends MObject<T> = Record<string, any>>(props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
|
|
17
|
-
export declare function FairysTaroValtioFormItem<T extends MObject<T> =
|
|
17
|
+
export declare function FairysTaroValtioFormItem<T extends MObject<T> = Record<string, any>>(props: FairysTaroValtioFormItemProps<T>): import("react/jsx-runtime").JSX.Element;
|
package/esm/form.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { FairysTaroValtioFormLayout } from "./layout.js";
|
|
3
3
|
import { FairysTaroValtioFormHideItem, FairysTaroValtioFormItem, FairysTaroValtioFormItemBase } from "./form.item.js";
|
|
4
|
-
import { FairysValtioFormInstanceContext, useFairysValtioForm, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState } from "@fairys/valtio-form-basic";
|
|
4
|
+
import { FairysValtioFormInstanceContext, useFairysValtioForm, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceToHideState, useFairysValtioFormInstanceToState } from "@fairys/valtio-form-basic";
|
|
5
5
|
import react from "react";
|
|
6
6
|
export * from "@fairys/valtio-form-basic";
|
|
7
7
|
export * from "./form.item.js";
|
|
@@ -24,4 +24,6 @@ FairysTaroValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
|
|
|
24
24
|
FairysTaroValtioForm.FormItemBase = FairysTaroValtioFormItemBase;
|
|
25
25
|
FairysTaroValtioForm.FormItem = FairysTaroValtioFormItem;
|
|
26
26
|
FairysTaroValtioForm.FormHideItem = FairysTaroValtioFormHideItem;
|
|
27
|
+
FairysTaroValtioForm.useFormInstanceToState = useFairysValtioFormInstanceToState;
|
|
28
|
+
FairysTaroValtioForm.useFormInstanceToHideState = useFairysValtioFormInstanceToHideState;
|
|
27
29
|
export { FairysTaroValtioForm };
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"author": "SunLxy <1011771396@qq.com>",
|
|
4
4
|
"description": "taro表单框架组件",
|
|
5
5
|
"homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
|
|
6
|
-
"version": "0.0
|
|
6
|
+
"version": "1.0.0",
|
|
7
7
|
"main": "lib/index.js",
|
|
8
8
|
"types": "esm/index.d.ts",
|
|
9
9
|
"module": "esm/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"esm"
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@fairys/valtio-form-basic": "^0.0
|
|
28
|
+
"@fairys/valtio-form-basic": "^1.0.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/react": "~18.2.21",
|
package/src/form.item.tsx
CHANGED
|
@@ -11,9 +11,9 @@ import {
|
|
|
11
11
|
FairysValtioFormParentAttrsContext,
|
|
12
12
|
} from '@fairys/valtio-form-basic';
|
|
13
13
|
|
|
14
|
-
export interface FairysTaroValtioFormItemProps<T extends MObject<T> =
|
|
14
|
+
export interface FairysTaroValtioFormItemProps<T extends MObject<T> = Record<string, any>>
|
|
15
15
|
extends Omit<ViewProps, 'style'>,
|
|
16
|
-
|
|
16
|
+
FairysValtioFormItemAttrsProps<T> {
|
|
17
17
|
/**是否使用控制隐藏的表单项*/
|
|
18
18
|
isHide?: boolean;
|
|
19
19
|
/**是否使用无样式表单项*/
|
|
@@ -21,7 +21,7 @@ export interface FairysTaroValtioFormItemProps<T extends MObject<T> = object>
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
/**普通表单项*/
|
|
24
|
-
export function FairysTaroValtioFormItemBase<T extends MObject<T> =
|
|
24
|
+
export function FairysTaroValtioFormItemBase<T extends MObject<T> = Record<string, any>>(
|
|
25
25
|
props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
|
|
26
26
|
) {
|
|
27
27
|
const { label, extra, helpText } = props;
|
|
@@ -68,7 +68,7 @@ export function FairysTaroValtioFormItemBase<T extends MObject<T> = object>(
|
|
|
68
68
|
);
|
|
69
69
|
}
|
|
70
70
|
/**控制隐藏的表单项*/
|
|
71
|
-
export function FairysTaroValtioFormHideItem<T extends MObject<T> =
|
|
71
|
+
export function FairysTaroValtioFormHideItem<T extends MObject<T> = Record<string, any>>(
|
|
72
72
|
props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
|
|
73
73
|
) {
|
|
74
74
|
const [state] = useFairysValtioFormInstanceContextHideState();
|
|
@@ -80,7 +80,7 @@ export function FairysTaroValtioFormHideItem<T extends MObject<T> = object>(
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
/**无样式表单项*/
|
|
83
|
-
export function FairysTaroValtioFormItemNoStyle<T extends MObject<T> =
|
|
83
|
+
export function FairysTaroValtioFormItemNoStyle<T extends MObject<T> = Record<string, any>>(
|
|
84
84
|
props: Omit<FairysTaroValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
|
|
85
85
|
) {
|
|
86
86
|
const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
|
|
@@ -92,7 +92,9 @@ export function FairysTaroValtioFormItemNoStyle<T extends MObject<T> = object>(
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
|
|
95
|
-
export function FairysTaroValtioFormItem<T extends MObject<T> =
|
|
95
|
+
export function FairysTaroValtioFormItem<T extends MObject<T> = Record<string, any>>(
|
|
96
|
+
props: FairysTaroValtioFormItemProps<T>,
|
|
97
|
+
) {
|
|
96
98
|
const { isHide, noStyle, ...rest } = props;
|
|
97
99
|
if (isHide) {
|
|
98
100
|
return <FairysTaroValtioFormHideItem<T> {...rest} />;
|
package/src/form.tsx
CHANGED
|
@@ -7,15 +7,18 @@ import {
|
|
|
7
7
|
useFairysValtioFormInstanceContext,
|
|
8
8
|
useFairysValtioFormInstanceContextState,
|
|
9
9
|
useFairysValtioFormInstanceContextHideState,
|
|
10
|
+
useFairysValtioFormInstanceToState,
|
|
11
|
+
useFairysValtioFormInstanceToHideState,
|
|
10
12
|
} from '@fairys/valtio-form-basic';
|
|
11
13
|
import type { FairysValtioFormAttrsProps, FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic';
|
|
12
14
|
import React from 'react';
|
|
13
15
|
export * from '@fairys/valtio-form-basic';
|
|
14
16
|
export * from './form.item';
|
|
15
17
|
export * from './layout';
|
|
16
|
-
export interface FairysTaroValtioFormProps<T extends MObject<T> =
|
|
18
|
+
export interface FairysTaroValtioFormProps<T extends MObject<T> = Record<string, any>>
|
|
19
|
+
extends FairysValtioFormAttrsProps<T> {}
|
|
17
20
|
|
|
18
|
-
function FairysTaroValtioFormBase<T extends MObject<T> =
|
|
21
|
+
function FairysTaroValtioFormBase<T extends MObject<T> = Record<string, any>>(
|
|
19
22
|
props: FairysTaroValtioFormProps<T>,
|
|
20
23
|
ref: React.Ref<FairysValtioFormInstance<T>>,
|
|
21
24
|
) {
|
|
@@ -44,6 +47,10 @@ export const FairysTaroValtioForm = React.forwardRef(
|
|
|
44
47
|
FormItem: typeof FairysTaroValtioFormItem;
|
|
45
48
|
/**隐藏表单项组件*/
|
|
46
49
|
FormHideItem: typeof FairysTaroValtioFormHideItem;
|
|
50
|
+
/**传递表单实例获取状态*/
|
|
51
|
+
useFormInstanceToState: typeof useFairysValtioFormInstanceToState;
|
|
52
|
+
/**传递表单实例获取隐藏状态*/
|
|
53
|
+
useFormInstanceToHideState: typeof useFairysValtioFormInstanceToHideState;
|
|
47
54
|
};
|
|
48
55
|
/**初始化实例*/
|
|
49
56
|
FairysTaroValtioForm.useForm = useFairysValtioFormInstance;
|
|
@@ -59,3 +66,7 @@ FairysTaroValtioForm.FormItemBase = FairysTaroValtioFormItemBase;
|
|
|
59
66
|
FairysTaroValtioForm.FormItem = FairysTaroValtioFormItem;
|
|
60
67
|
/**隐藏表单项组件*/
|
|
61
68
|
FairysTaroValtioForm.FormHideItem = FairysTaroValtioFormHideItem;
|
|
69
|
+
/**传递表单实例获取状态*/
|
|
70
|
+
FairysTaroValtioForm.useFormInstanceToState = useFairysValtioFormInstanceToState;
|
|
71
|
+
/**传递表单实例获取隐藏状态*/
|
|
72
|
+
FairysTaroValtioForm.useFormInstanceToHideState = useFairysValtioFormInstanceToHideState;
|