react-antd-xform 1.0.2 → 1.0.4
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/dist/form/common-utils.d.ts +3 -0
- package/dist/form/common-utils.js +33 -0
- package/dist/form/extend/form-array.d.ts +12 -0
- package/dist/form/extend/form-array.js +33 -0
- package/dist/form/extend/form-check.d.ts +12 -0
- package/dist/form/extend/form-check.js +44 -0
- package/dist/form/extend/form-effect.d.ts +17 -0
- package/dist/form/extend/form-effect.js +32 -0
- package/dist/form/{layout.d.ts → extend/form-layout.d.ts} +1 -1
- package/dist/form/{layout.js → extend/form-layout.js} +3 -3
- package/dist/form/extend/form-model-consumer.d.ts +4 -0
- package/dist/form/extend/form-model-consumer.js +10 -0
- package/dist/form/extend/form-object.d.ts +7 -0
- package/dist/form/extend/form-object.js +17 -0
- package/dist/form/extend/form-reset.d.ts +9 -0
- package/dist/form/extend/form-reset.js +25 -0
- package/dist/form/extend/form-submit.d.ts +9 -0
- package/dist/form/extend/form-submit.js +28 -0
- package/dist/form/form-item.js +1 -1
- package/dist/form/index.d.ts +17 -6
- package/dist/form/index.js +19 -48
- package/dist/form/type.d.ts +2 -7
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +8 -2
- package/dist/form-ui/default-button.d.ts +0 -3
- package/dist/form-ui/default-button.js +0 -39
- /package/dist/{helpers → form/helpers}/AsyncValue.d.ts +0 -0
- /package/dist/{helpers → form/helpers}/AsyncValue.js +0 -0
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Watchable } from './type';
|
|
2
|
+
import { FormModel } from './model';
|
|
1
3
|
export declare function keyToValueShape(key: string): "array" | "object";
|
|
2
4
|
export declare function splitToPath(name: number | string): string[];
|
|
3
5
|
/** 合并两个值,如果第一个不为 undefined,则使用第一个值,否则使用第二个值 */
|
|
@@ -13,3 +15,4 @@ export declare const range: (n: number) => number[];
|
|
|
13
15
|
export declare function pick<T extends object, K extends string>(obj: T, keys: K[]): {
|
|
14
16
|
[P in K]?: P extends keyof T ? T[P] : never;
|
|
15
17
|
};
|
|
18
|
+
export declare function convertWatchableToExpression(watch: Watchable, model: FormModel<any>): () => any;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
import * as mobx from "mobx";
|
|
3
|
+
import { toJS } from "mobx";
|
|
4
|
+
import { Field, FormModel } from "./model.js";
|
|
5
|
+
import { AsyncValue } from "./helpers/AsyncValue.js";
|
|
3
6
|
function isNumericKey(key) {
|
|
4
7
|
return String(Number.parseInt(key)) === key;
|
|
5
8
|
}
|
|
@@ -86,9 +89,39 @@ function pick(obj, keys) {
|
|
|
86
89
|
});
|
|
87
90
|
return result;
|
|
88
91
|
}
|
|
92
|
+
function convertWatchableToExpression(watch, model) {
|
|
93
|
+
if (typeof watch === "string") {
|
|
94
|
+
return () => toJS(model.getValue(watch));
|
|
95
|
+
} else if (typeof watch === "function") {
|
|
96
|
+
return watch;
|
|
97
|
+
} else if (watch instanceof Field) {
|
|
98
|
+
return () => watch.value;
|
|
99
|
+
} else if (watch instanceof FormModel) {
|
|
100
|
+
return () => toJS(watch.values);
|
|
101
|
+
} else if (watch instanceof AsyncValue) {
|
|
102
|
+
return () => watch.current;
|
|
103
|
+
} else if (Array.isArray(watch)) {
|
|
104
|
+
return () => {
|
|
105
|
+
return watch.map((t) => {
|
|
106
|
+
if (typeof t === "string") {
|
|
107
|
+
return toJS(model.getValue(t));
|
|
108
|
+
} else if (t instanceof AsyncValue) {
|
|
109
|
+
return t.current;
|
|
110
|
+
} else if (t instanceof Field) {
|
|
111
|
+
return t.value;
|
|
112
|
+
} else if (t instanceof FormModel) {
|
|
113
|
+
return toJS(t.values);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
} else {
|
|
118
|
+
console.warn("[xform] 无法识别的 watch 参数", watch);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
89
121
|
export {
|
|
90
122
|
asCSSLength,
|
|
91
123
|
composeValue,
|
|
124
|
+
convertWatchableToExpression,
|
|
92
125
|
isFalsyOrEmptyArray,
|
|
93
126
|
keyToValueShape,
|
|
94
127
|
observableGetIn,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FormModel } from '../model';
|
|
2
|
+
import { FormArrayLayoutInput } from '../type';
|
|
3
|
+
export interface FormArrayProps<T> {
|
|
4
|
+
use?: boolean;
|
|
5
|
+
arrayModel?: FormModel<T[]>;
|
|
6
|
+
name?: string;
|
|
7
|
+
layout?(input: FormArrayLayoutInput): React.ReactElement;
|
|
8
|
+
children?: React.ReactNode | ((index: number, model: FormModel<T>) => React.ReactNode);
|
|
9
|
+
}
|
|
10
|
+
export declare const FormArray: (<T extends unknown>({ name, children, layout, arrayModel: arrayModelProp, use, }: FormArrayProps<T>) => import("react/jsx-runtime").JSX.Element) & {
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
3
|
+
import { useModel, ModelProvider } from "../context/modelContext.js";
|
|
4
|
+
import { range } from "../common-utils.js";
|
|
5
|
+
import { arrayHelpers } from "../array-helper.js";
|
|
6
|
+
import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
|
|
7
|
+
const defaultArrayLayout = ({ arrayModel, itemContent, itemCount }) => {
|
|
8
|
+
return range(itemCount).map(
|
|
9
|
+
(itemIndex) => arrayHelpers.renderArrayItem(arrayModel, itemIndex, itemContent)
|
|
10
|
+
);
|
|
11
|
+
};
|
|
12
|
+
const FormArray = observer(
|
|
13
|
+
({
|
|
14
|
+
name,
|
|
15
|
+
children,
|
|
16
|
+
layout,
|
|
17
|
+
arrayModel: arrayModelProp,
|
|
18
|
+
use
|
|
19
|
+
}) => {
|
|
20
|
+
var _a;
|
|
21
|
+
const parent = useModel();
|
|
22
|
+
if (use === false) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
const arrayModel = arrayModelProp ?? (name === "&" ? parent : parent.getSubModel(name));
|
|
26
|
+
const itemCount = ((_a = arrayModel.values) == null ? void 0 : _a.length) ?? 0;
|
|
27
|
+
const itemContent = typeof children === "function" ? children : () => children;
|
|
28
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: arrayModel, children: (layout ?? defaultArrayLayout)({ arrayModel, itemCount, itemContent }) });
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
export {
|
|
32
|
+
FormArray
|
|
33
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Check } from '../model';
|
|
2
|
+
import { CheckConfig, Watchable } from '../type';
|
|
3
|
+
export interface FormCheckProps<T = any> extends CheckConfig<T> {
|
|
4
|
+
name?: string;
|
|
5
|
+
check?: Check<T>;
|
|
6
|
+
watch?: Watchable;
|
|
7
|
+
renderError?: boolean | ((error: any) => React.ReactNode);
|
|
8
|
+
deps?: unknown[];
|
|
9
|
+
}
|
|
10
|
+
export declare const FormCheck: (<T = any>({ name, check: checkProp, validate, watch, validateOnMount, renderError, deps, }: FormCheckProps<T>) => any) & {
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { useLayoutEffect, useEffect } from "react";
|
|
2
|
+
import { reaction } from "mobx";
|
|
3
|
+
import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
4
|
+
import { useModel } from "../context/modelContext.js";
|
|
5
|
+
import { useFormEnv } from "../context/formEnvContext.js";
|
|
6
|
+
import { composeValue, convertWatchableToExpression } from "../common-utils.js";
|
|
7
|
+
import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
|
|
8
|
+
const FormCheck = observer(function FormCheck2({
|
|
9
|
+
name,
|
|
10
|
+
check: checkProp,
|
|
11
|
+
validate,
|
|
12
|
+
watch = [],
|
|
13
|
+
validateOnMount,
|
|
14
|
+
renderError,
|
|
15
|
+
deps = []
|
|
16
|
+
}) {
|
|
17
|
+
const formEnv = useFormEnv();
|
|
18
|
+
const model = useModel();
|
|
19
|
+
const check = composeValue(checkProp, model.getCheck(name));
|
|
20
|
+
const checkConfig = {
|
|
21
|
+
validateOnMount: validateOnMount ?? formEnv.validateOnMount,
|
|
22
|
+
validate
|
|
23
|
+
};
|
|
24
|
+
useLayoutEffect(() => check._track(checkConfig));
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
return reaction(
|
|
27
|
+
convertWatchableToExpression(watch, model),
|
|
28
|
+
() => {
|
|
29
|
+
check.validate();
|
|
30
|
+
},
|
|
31
|
+
{ fireImmediately: checkConfig.validateOnMount }
|
|
32
|
+
);
|
|
33
|
+
}, [check, model, ...deps]);
|
|
34
|
+
if (renderError === true) {
|
|
35
|
+
return check.error;
|
|
36
|
+
} else if (typeof renderError === "function") {
|
|
37
|
+
return renderError(check.error);
|
|
38
|
+
} else {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
export {
|
|
43
|
+
FormCheck
|
|
44
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { IEqualsComparer } from 'mobx';
|
|
2
|
+
import { Watchable } from '../type';
|
|
3
|
+
import { FormModel } from '../model';
|
|
4
|
+
export interface FormEffectProps<T = any> {
|
|
5
|
+
watch: Watchable<T>;
|
|
6
|
+
effect(value: T, detail: {
|
|
7
|
+
prev: T;
|
|
8
|
+
next: T;
|
|
9
|
+
model: FormModel<any>;
|
|
10
|
+
}): void;
|
|
11
|
+
fireImmediately?: boolean;
|
|
12
|
+
deps?: unknown[];
|
|
13
|
+
equals?: IEqualsComparer<T>;
|
|
14
|
+
}
|
|
15
|
+
export declare const FormEffect: (<T = any>({ watch, effect, fireImmediately, deps, equals, }: FormEffectProps<T>) => React.ReactElement) & {
|
|
16
|
+
displayName: string;
|
|
17
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { useRef, useEffect } from "react";
|
|
2
|
+
import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
3
|
+
import { reaction } from "mobx";
|
|
4
|
+
import { useModel } from "../context/modelContext.js";
|
|
5
|
+
import { convertWatchableToExpression } from "../common-utils.js";
|
|
6
|
+
import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
|
|
7
|
+
const FormEffect = observer(function FormEffect2({
|
|
8
|
+
watch,
|
|
9
|
+
effect,
|
|
10
|
+
fireImmediately,
|
|
11
|
+
deps = [],
|
|
12
|
+
equals
|
|
13
|
+
}) {
|
|
14
|
+
const model = useModel();
|
|
15
|
+
const effectRef = useRef(effect);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
effectRef.current = effect;
|
|
18
|
+
});
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
return reaction(
|
|
21
|
+
convertWatchableToExpression(watch, model),
|
|
22
|
+
(next, prev) => {
|
|
23
|
+
effectRef.current(next, { model, prev, next });
|
|
24
|
+
},
|
|
25
|
+
{ fireImmediately, equals }
|
|
26
|
+
);
|
|
27
|
+
}, deps);
|
|
28
|
+
return null;
|
|
29
|
+
});
|
|
30
|
+
export {
|
|
31
|
+
FormEffect
|
|
32
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FormLayoutProps, FormItemGroupProps } from '
|
|
1
|
+
import { FormLayoutProps, FormItemGroupProps } from '../type';
|
|
2
2
|
export declare function FormLayout({ children, className, style, labelPosition, labelWidth, formItemGap, controlWidth, defaultLabelTopPosition, inlineError, containerProps, }: FormLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
/** @deprecated 请使用 Form.ItemView 代替 ItemGroup */
|
|
4
4
|
export declare const FormItemGroup: ({ label, asterisk, tip, children, labelWidth, controlWidth, className, style, inline, }: FormItemGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { j as jsxRuntimeExports } from "
|
|
2
|
-
import cx from "
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import cx from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import { asCSSLength } from "
|
|
4
|
+
import { asCSSLength } from "../common-utils.js";
|
|
5
5
|
const FormLayoutContainer = styled.div`
|
|
6
6
|
--label-width: auto;
|
|
7
7
|
--control-width: auto;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
2
|
+
import { useModel } from "../context/modelContext.js";
|
|
3
|
+
import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
|
|
4
|
+
const FormModelConsumer = observer(({ children }) => {
|
|
5
|
+
const model = useModel();
|
|
6
|
+
return children(model);
|
|
7
|
+
});
|
|
8
|
+
export {
|
|
9
|
+
FormModelConsumer
|
|
10
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
3
|
+
import { useModel, ModelProvider } from "../context/modelContext.js";
|
|
4
|
+
import { observer } from "../../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
|
|
5
|
+
const FormObject = observer(
|
|
6
|
+
({ name, children, use }) => {
|
|
7
|
+
const parent = useModel();
|
|
8
|
+
if (use === false) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
const model = name === "&" ? parent : parent.getSubModel(name);
|
|
12
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children });
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
export {
|
|
16
|
+
FormObject
|
|
17
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
type FormSubmitProps<T extends object = {}> = {
|
|
3
|
+
/** 必须传入的按钮组件 */
|
|
4
|
+
ButtonComponent: ComponentType<T>;
|
|
5
|
+
/** 按钮内容 */
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
} & T;
|
|
8
|
+
export declare function FormReset<T extends object = {}>({ ButtonComponent, children, ...props }: FormSubmitProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import { action } from "mobx";
|
|
3
|
+
import { modelUtils } from "../model-utils.js";
|
|
4
|
+
import { useModel } from "../context/modelContext.js";
|
|
5
|
+
import { useFormEnv } from "../context/formEnvContext.js";
|
|
6
|
+
function FormReset({
|
|
7
|
+
ButtonComponent,
|
|
8
|
+
children = "提交",
|
|
9
|
+
...props
|
|
10
|
+
}) {
|
|
11
|
+
const model = useModel();
|
|
12
|
+
const formEnv = useFormEnv();
|
|
13
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
14
|
+
ButtonComponent,
|
|
15
|
+
{
|
|
16
|
+
...props,
|
|
17
|
+
onClick: action(() => modelUtils.reset(model, formEnv)),
|
|
18
|
+
children,
|
|
19
|
+
...props
|
|
20
|
+
}
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
FormReset
|
|
25
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
type FormSubmitProps<T extends object = {}> = {
|
|
3
|
+
/** 必须传入的按钮组件 */
|
|
4
|
+
ButtonComponent: ComponentType<T>;
|
|
5
|
+
/** 按钮内容 */
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
} & T;
|
|
8
|
+
export declare function FormSubmit<T extends object = {}>({ ButtonComponent, children, ...props }: FormSubmitProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
+
import { modelUtils } from "../model-utils.js";
|
|
3
|
+
import { useModel } from "../context/modelContext.js";
|
|
4
|
+
import { useFormEnv } from "../context/formEnvContext.js";
|
|
5
|
+
function FormSubmit({
|
|
6
|
+
ButtonComponent,
|
|
7
|
+
children = "提交",
|
|
8
|
+
...props
|
|
9
|
+
}) {
|
|
10
|
+
const model = useModel();
|
|
11
|
+
const { onSubmit, onError } = useFormEnv();
|
|
12
|
+
const submitOptions = {
|
|
13
|
+
onSubmit,
|
|
14
|
+
onError
|
|
15
|
+
};
|
|
16
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
17
|
+
ButtonComponent,
|
|
18
|
+
{
|
|
19
|
+
...props,
|
|
20
|
+
onClick: () => modelUtils.submit(model, submitOptions),
|
|
21
|
+
children,
|
|
22
|
+
...props
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
FormSubmit
|
|
28
|
+
};
|
package/dist/form/form-item.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
2
|
import require$$0, { useLayoutEffect, useEffect } from "react";
|
|
3
3
|
import cx from "../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
|
|
4
|
-
import { isFalsyOrEmptyArray, composeValue, pick, asCSSLength } from "./common-utils.js";
|
|
5
4
|
import "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
6
5
|
import stringifyObject from "../node_modules/.pnpm/stringify-object@5.0.0/node_modules/stringify-object/index.js";
|
|
7
6
|
import { toJS, reaction, runInAction } from "mobx";
|
|
8
7
|
import { FieldType } from "./enum.js";
|
|
8
|
+
import { isFalsyOrEmptyArray, composeValue, pick, asCSSLength } from "./common-utils.js";
|
|
9
9
|
import { Field } from "./model.js";
|
|
10
10
|
import { useModel } from "./context/modelContext.js";
|
|
11
11
|
import { useFormEnv } from "./context/formEnvContext.js";
|
package/dist/form/index.d.ts
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { FormProps } from './type';
|
|
2
3
|
import { FormModel } from './model';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
4
|
+
import { FormItemView } from './form-item';
|
|
5
|
+
import { FormLayout } from './extend/form-layout';
|
|
6
|
+
import { FormSubmit } from './extend/form-submit';
|
|
5
7
|
export declare function Form({ model: modelProp, defaultValue, children, className, style, layout, containerProps, htmlIdPrefix: htmlIdPrefixProp, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
export declare namespace Form {
|
|
7
|
-
var
|
|
8
|
-
var ModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
|
|
9
|
+
var Array: (<T extends unknown>({ name, children, layout, arrayModel: arrayModelProp, use, }: import("./extend/form-array").FormArrayProps<T>) => import("react/jsx-runtime").JSX.Element) & {
|
|
9
10
|
displayName: string;
|
|
10
11
|
};
|
|
11
|
-
var
|
|
12
|
-
|
|
12
|
+
var Check: (<T = any>({ name, check: checkProp, validate, watch, validateOnMount, renderError, deps, }: import("./extend/form-check").FormCheckProps<T>) => any) & {
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
var Effect: (<T = any>({ watch, effect, fireImmediately, deps, equals, }: import("./extend/form-effect").FormEffectProps<T>) => React.ReactElement) & {
|
|
13
16
|
displayName: string;
|
|
14
17
|
};
|
|
15
18
|
var Object: (({ name, children, use }: {
|
|
@@ -19,4 +22,12 @@ export declare namespace Form {
|
|
|
19
22
|
}) => import("react/jsx-runtime").JSX.Element) & {
|
|
20
23
|
displayName: string;
|
|
21
24
|
};
|
|
25
|
+
var Submit: typeof FormSubmit;
|
|
26
|
+
var Layout: typeof FormLayout;
|
|
27
|
+
var ItemView: typeof FormItemView;
|
|
28
|
+
var ModelProvider: React.Provider<FormModel<any>>;
|
|
29
|
+
var ModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
|
|
30
|
+
displayName: string;
|
|
31
|
+
};
|
|
32
|
+
var FormReset: typeof import("./extend/form-reset").FormReset;
|
|
22
33
|
}
|
package/dist/form/index.js
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
-
import "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
|
|
3
2
|
import { useState } from "react";
|
|
4
3
|
import { FormModel } from "./model.js";
|
|
5
|
-
import {
|
|
4
|
+
import { FormItemView } from "./form-item.js";
|
|
5
|
+
import { ModelProvider } from "./context/modelContext.js";
|
|
6
6
|
import { FormEnvProvider } from "./context/formEnvContext.js";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
7
|
+
import { useHtmlIdPrefix, composeValue } from "./common-utils.js";
|
|
8
|
+
import { FormArray } from "./extend/form-array.js";
|
|
9
|
+
import { FormCheck } from "./extend/form-check.js";
|
|
10
|
+
import { FormReset } from "./extend/form-reset.js";
|
|
11
|
+
import { FormLayout } from "./extend/form-layout.js";
|
|
12
|
+
import { FormSubmit } from "./extend/form-submit.js";
|
|
13
|
+
import { FormEffect } from "./extend/form-effect.js";
|
|
14
|
+
import { FormObject } from "./extend/form-object.js";
|
|
15
|
+
import { FormModelConsumer } from "./extend/form-model-consumer.js";
|
|
12
16
|
function Form({
|
|
13
17
|
model: modelProp,
|
|
14
18
|
defaultValue,
|
|
@@ -25,49 +29,16 @@ function Form({
|
|
|
25
29
|
const htmlIdPrefix = useHtmlIdPrefix(htmlIdPrefixProp);
|
|
26
30
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvProvider, { htmlIdPrefix, ...restEnvProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { style, className, containerProps, ...layout, children }) }) });
|
|
27
31
|
}
|
|
28
|
-
const FormModelConsumer = observer(({ children }) => {
|
|
29
|
-
const model = useModel();
|
|
30
|
-
return children(model);
|
|
31
|
-
});
|
|
32
|
-
const defaultArrayLayout = ({ arrayModel, itemContent, itemCount }) => {
|
|
33
|
-
return range(itemCount).map(
|
|
34
|
-
(itemIndex) => arrayHelpers.renderArrayItem(arrayModel, itemIndex, itemContent)
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
const FormArray = observer(
|
|
38
|
-
({
|
|
39
|
-
name,
|
|
40
|
-
children,
|
|
41
|
-
layout,
|
|
42
|
-
arrayModel: arrayModelProp,
|
|
43
|
-
use
|
|
44
|
-
}) => {
|
|
45
|
-
var _a;
|
|
46
|
-
const parent = useModel();
|
|
47
|
-
if (use === false) {
|
|
48
|
-
return null;
|
|
49
|
-
}
|
|
50
|
-
const arrayModel = arrayModelProp ?? (name === "&" ? parent : parent.getSubModel(name));
|
|
51
|
-
const itemCount = ((_a = arrayModel.values) == null ? void 0 : _a.length) ?? 0;
|
|
52
|
-
const itemContent = typeof children === "function" ? children : () => children;
|
|
53
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: arrayModel, children: (layout ?? defaultArrayLayout)({ arrayModel, itemCount, itemContent }) });
|
|
54
|
-
}
|
|
55
|
-
);
|
|
56
|
-
const FormObject = observer(
|
|
57
|
-
({ name, children, use }) => {
|
|
58
|
-
const parent = useModel();
|
|
59
|
-
if (use === false) {
|
|
60
|
-
return null;
|
|
61
|
-
}
|
|
62
|
-
const model = name === "&" ? parent : parent.getSubModel(name);
|
|
63
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children });
|
|
64
|
-
}
|
|
65
|
-
);
|
|
66
|
-
Form.Submit = FormSubmit;
|
|
67
|
-
Form.ModelConsumer = FormModelConsumer;
|
|
68
|
-
Form.ModelProvider = ModelProvider;
|
|
69
32
|
Form.Array = FormArray;
|
|
33
|
+
Form.Check = FormCheck;
|
|
34
|
+
Form.Effect = FormEffect;
|
|
70
35
|
Form.Object = FormObject;
|
|
36
|
+
Form.Submit = FormSubmit;
|
|
37
|
+
Form.Layout = FormLayout;
|
|
38
|
+
Form.ItemView = FormItemView;
|
|
39
|
+
Form.ModelProvider = ModelProvider;
|
|
40
|
+
Form.ModelConsumer = FormModelConsumer;
|
|
41
|
+
Form.FormReset = FormReset;
|
|
71
42
|
export {
|
|
72
43
|
Form
|
|
73
44
|
};
|
package/dist/form/type.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { Field, FormModel } from './model';
|
|
3
3
|
import { FieldType, ModelType } from './enum';
|
|
4
|
+
import { AsyncValue } from './helpers/AsyncValue';
|
|
4
5
|
type valueOf<T> = T[keyof T];
|
|
5
6
|
export type XName<D> = 0 extends D & 1 ? any : D extends (infer U)[] ? number | `${number}` | `${number}.${XName<U>}` : D extends object ? valueOf<{
|
|
6
7
|
[K in keyof D & string]: K | `${K}.${XName<D[K]>}`;
|
|
@@ -279,11 +280,5 @@ export interface FormArrayLayoutInput {
|
|
|
279
280
|
/** 获取每个数组元素对应的子表单 */
|
|
280
281
|
itemContent(itemIndex: number, itemModel: FormModel<any>): React.ReactNode;
|
|
281
282
|
}
|
|
282
|
-
export
|
|
283
|
-
use?: boolean;
|
|
284
|
-
arrayModel?: FormModel<T[]>;
|
|
285
|
-
name?: string;
|
|
286
|
-
layout?(input: FormArrayLayoutInput): React.ReactElement;
|
|
287
|
-
children?: React.ReactNode | ((index: number, model: FormModel<T>) => React.ReactNode);
|
|
288
|
-
}
|
|
283
|
+
export type Watchable<T = any> = (() => T) | string | Field<T> | FormModel<T> | AsyncValue<T> | Array<string | Field | AsyncValue<any> | FormModel<any>>;
|
|
289
284
|
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -4,6 +4,6 @@ import { FormEnvProvider, useFormEnv } from './form/context/formEnvContext';
|
|
|
4
4
|
import { FormItem, createFormItem } from './form/form-item';
|
|
5
5
|
import { FormModel } from './form/model';
|
|
6
6
|
import { arrayHelpers } from './form/array-helper';
|
|
7
|
-
import { AsyncValue } from './helpers/AsyncValue';
|
|
7
|
+
import { AsyncValue } from './form/helpers/AsyncValue';
|
|
8
8
|
import { modelUtils } from './form/model-utils';
|
|
9
9
|
export { Form, FormEnvProvider, useFormEnv, useModel, FormItem, createFormItem, FormModel, arrayHelpers, AsyncValue, modelUtils, };
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { FormEnvProvider, useFormEnv } from "./form/context/formEnvContext.js";
|
|
|
4
4
|
import { FormItem, createFormItem } from "./form/form-item.js";
|
|
5
5
|
import { FormModel } from "./form/model.js";
|
|
6
6
|
import { arrayHelpers } from "./form/array-helper.js";
|
|
7
|
-
import { AsyncValue } from "./helpers/AsyncValue.js";
|
|
7
|
+
import { AsyncValue } from "./form/helpers/AsyncValue.js";
|
|
8
8
|
import { modelUtils } from "./form/model-utils.js";
|
|
9
9
|
export {
|
|
10
10
|
AsyncValue,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-antd-xform",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "基于mobx的form解决方案",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -10,7 +10,13 @@
|
|
|
10
10
|
"files": [
|
|
11
11
|
"dist"
|
|
12
12
|
],
|
|
13
|
-
"keywords": [
|
|
13
|
+
"keywords": [
|
|
14
|
+
"form",
|
|
15
|
+
"antd",
|
|
16
|
+
"react",
|
|
17
|
+
"mobx",
|
|
18
|
+
"react-antd-xform"
|
|
19
|
+
],
|
|
14
20
|
"author": "",
|
|
15
21
|
"license": "MIT",
|
|
16
22
|
"dependencies": {
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { SubmitExtraOptions } from '../form/type';
|
|
2
|
-
import { ButtonProps } from './type';
|
|
3
|
-
export declare function FormSubmit({ type, children, valueFilter, mergeDefaultValue, animateErrorFields, scrollToFirstError, ...props }: ButtonProps & SubmitExtraOptions): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
|
|
2
|
-
import cx from "../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
|
|
3
|
-
import { Button } from "antd";
|
|
4
|
-
import { modelUtils } from "../form/model-utils.js";
|
|
5
|
-
import { useModel } from "../form/context/modelContext.js";
|
|
6
|
-
import { useFormEnv } from "../form/context/formEnvContext.js";
|
|
7
|
-
function FormSubmit({
|
|
8
|
-
type = "primary",
|
|
9
|
-
children = "提交",
|
|
10
|
-
valueFilter,
|
|
11
|
-
mergeDefaultValue,
|
|
12
|
-
animateErrorFields,
|
|
13
|
-
scrollToFirstError,
|
|
14
|
-
...props
|
|
15
|
-
}) {
|
|
16
|
-
const model = useModel();
|
|
17
|
-
const { onSubmit, onError } = useFormEnv();
|
|
18
|
-
const submitOptions = {
|
|
19
|
-
onSubmit,
|
|
20
|
-
onError,
|
|
21
|
-
valueFilter,
|
|
22
|
-
mergeDefaultValue,
|
|
23
|
-
animateErrorFields,
|
|
24
|
-
scrollToFirstError
|
|
25
|
-
};
|
|
26
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
27
|
-
Button,
|
|
28
|
-
{
|
|
29
|
-
onClick: () => modelUtils.submit(model, submitOptions),
|
|
30
|
-
type,
|
|
31
|
-
children,
|
|
32
|
-
...props,
|
|
33
|
-
className: cx("form-submit-button", props.className)
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
export {
|
|
38
|
-
FormSubmit
|
|
39
|
-
};
|
|
File without changes
|
|
File without changes
|