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