extended-dynamic-forms 0.2.0 → 0.3.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 +398 -1075
- package/dist/WizardForm.d.ts +4 -1
- package/dist/events/FormEventContext.d.ts +3 -0
- package/dist/events/FormEventHub.d.ts +19 -2
- package/dist/index.es.js +21051 -12923
- package/dist/index.umd.js +63 -36
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +6 -1
- package/dist/utils/fieldChangeDetector.d.ts +22 -0
- package/dist/widgets/base/index.d.ts +2 -0
- package/dist/widgets/base/types.d.ts +135 -0
- package/dist/widgets/base/utils.d.ts +63 -0
- package/dist/widgets/choice/ChoiceWidget.d.ts +30 -0
- package/dist/widgets/choice/ChoiceWidget.types.d.ts +496 -0
- package/dist/widgets/choice/examples/ChoiceWidget.example.d.ts +7 -0
- package/dist/widgets/choice/hooks/__tests__/useChoiceWidget.test.d.ts +1 -0
- package/dist/widgets/choice/hooks/__tests__/useDataSource.test.d.ts +1 -0
- package/dist/widgets/choice/hooks/examples/useChoiceWidget.example.d.ts +18 -0
- package/dist/widgets/choice/hooks/examples/useDataSourceExample.d.ts +22 -0
- package/dist/widgets/choice/hooks/index.d.ts +6 -0
- package/dist/widgets/choice/hooks/useChoiceWidget.d.ts +65 -0
- package/dist/widgets/choice/hooks/useDataSource.d.ts +69 -0
- package/dist/widgets/choice/index.d.ts +59 -0
- package/dist/widgets/choice/presenters/CheckboxPresenter.d.ts +70 -0
- package/dist/widgets/choice/presenters/DropdownPresenter.d.ts +37 -0
- package/dist/widgets/choice/presenters/PresenterStrategy.d.ts +230 -0
- package/dist/widgets/choice/presenters/RadioPresenter.d.ts +39 -0
- package/dist/widgets/choice/presenters/examples/RadioPresenterExample.d.ts +7 -0
- package/dist/widgets/choice/presenters/index.d.ts +20 -0
- package/dist/widgets/choice/providers/ApiDataSource.d.ts +241 -0
- package/dist/widgets/choice/providers/DataSourceProvider.d.ts +260 -0
- package/dist/widgets/choice/providers/StaticDataSource.d.ts +258 -0
- package/dist/widgets/choice/providers/WebSocketDataSource.d.ts +310 -0
- package/dist/widgets/choice/providers/index.d.ts +12 -0
- package/dist/widgets/choice/utils/index.d.ts +1 -0
- package/dist/widgets/choice/utils/responseMappers.d.ts +342 -0
- package/dist/widgets/date/DateTimeWidget.d.ts +26 -0
- package/dist/widgets/date/EnhancedDateWidget.d.ts +26 -0
- package/dist/widgets/date/index.d.ts +13 -0
- package/dist/widgets/file/FileUploadWidget.d.ts +40 -0
- package/dist/widgets/file/index.d.ts +2 -0
- package/dist/widgets/index.d.ts +33 -17
- package/dist/widgets/input/EmailWidget.d.ts +34 -0
- package/dist/widgets/input/NumberWidget.d.ts +39 -0
- package/dist/widgets/input/TelephoneWidget.d.ts +34 -0
- package/dist/widgets/input/URLWidget.d.ts +34 -0
- package/dist/widgets/input/index.d.ts +7 -0
- package/dist/widgets/text/PasswordWidget.d.ts +45 -0
- package/dist/widgets/text/TextWidget.d.ts +40 -0
- package/dist/widgets/text/TextareaWidget.d.ts +38 -0
- package/dist/widgets/text/index.d.ts +20 -0
- package/package.json +8 -8
- package/dist/vanilla-entry.d.ts +0 -204
- package/dist/widgets/enhanced/EnhancedWidgets.d.ts +0 -37
- package/examples/conditional-v2-example.tsx +0 -64
- package/examples/dynamic-array-items-example.tsx +0 -211
- package/examples/form-devtools-example.tsx +0 -384
- package/examples/global-ui-rules-example.tsx +0 -371
- package/examples/vanilla-js/README.md +0 -212
- package/examples/vanilla-js/basic-form.html +0 -142
- package/examples/vanilla-js/conditional-form.html +0 -159
- package/examples/vanilla-js/wizard-form.html +0 -185
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { WidgetProps } from '@rjsf/utils';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Password Widget with full Ant Design Input.Password support
|
|
6
|
+
*
|
|
7
|
+
* Uses Ant Design's Input.Password component which provides:
|
|
8
|
+
* - Password visibility toggle button
|
|
9
|
+
* - Secure password input
|
|
10
|
+
* - All standard Input properties
|
|
11
|
+
*
|
|
12
|
+
* Supports all Ant Design Input properties through uiSchema options:
|
|
13
|
+
* - size: 'small' | 'middle' | 'large'
|
|
14
|
+
* - placeholder: string
|
|
15
|
+
* - prefix: ReactNode
|
|
16
|
+
* - allowClear: boolean
|
|
17
|
+
* - bordered: boolean
|
|
18
|
+
* - maxLength: number
|
|
19
|
+
* - showCount: boolean
|
|
20
|
+
* - addonBefore: ReactNode
|
|
21
|
+
* - addonAfter: ReactNode
|
|
22
|
+
* - visibilityToggle: boolean | { visible?: boolean, onVisibleChange?: (visible: boolean) => void }
|
|
23
|
+
* - iconRender: (visible: boolean) => ReactNode
|
|
24
|
+
* - status: 'error' | 'warning'
|
|
25
|
+
* - style: CSSProperties
|
|
26
|
+
* - className: string
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // In uiSchema
|
|
30
|
+
* {
|
|
31
|
+
* "password": {
|
|
32
|
+
* "ui:widget": "password",
|
|
33
|
+
* "ui:options": {
|
|
34
|
+
* "placeholder": "Enter your password",
|
|
35
|
+
* "allowClear": true,
|
|
36
|
+
* "maxLength": 50,
|
|
37
|
+
* "visibilityToggle": true,
|
|
38
|
+
* "prefix": <LockOutlined />
|
|
39
|
+
* }
|
|
40
|
+
* }
|
|
41
|
+
* }
|
|
42
|
+
*/
|
|
43
|
+
declare const PasswordWidget: FC<WidgetProps>;
|
|
44
|
+
export default PasswordWidget;
|
|
45
|
+
export { PasswordWidget };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { WidgetProps } from '@rjsf/utils';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Enhanced Text Widget with full Ant Design Input support
|
|
6
|
+
*
|
|
7
|
+
* Supports all Ant Design Input properties through uiSchema options:
|
|
8
|
+
* - size: 'small' | 'middle' | 'large'
|
|
9
|
+
* - placeholder: string
|
|
10
|
+
* - prefix: ReactNode
|
|
11
|
+
* - suffix: ReactNode
|
|
12
|
+
* - allowClear: boolean
|
|
13
|
+
* - bordered: boolean
|
|
14
|
+
* - maxLength: number
|
|
15
|
+
* - showCount: boolean
|
|
16
|
+
* - addonBefore: ReactNode
|
|
17
|
+
* - addonAfter: ReactNode
|
|
18
|
+
* - status: 'error' | 'warning'
|
|
19
|
+
* - style: CSSProperties
|
|
20
|
+
* - className: string
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* // In uiSchema
|
|
24
|
+
* {
|
|
25
|
+
* "myField": {
|
|
26
|
+
* "ui:widget": "text",
|
|
27
|
+
* "ui:options": {
|
|
28
|
+
* "placeholder": "Enter text here",
|
|
29
|
+
* "allowClear": true,
|
|
30
|
+
* "showCount": true,
|
|
31
|
+
* "maxLength": 100,
|
|
32
|
+
* "prefix": <UserOutlined />,
|
|
33
|
+
* "addonAfter": ".com"
|
|
34
|
+
* }
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
*/
|
|
38
|
+
declare const TextWidget: FC<WidgetProps>;
|
|
39
|
+
export default TextWidget;
|
|
40
|
+
export { TextWidget };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { WidgetProps } from '@rjsf/utils';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Enhanced Textarea Widget with full Ant Design TextArea support
|
|
6
|
+
*
|
|
7
|
+
* Supports all Ant Design TextArea properties through uiSchema options:
|
|
8
|
+
* - rows: number (default: 4)
|
|
9
|
+
* - autoSize: boolean | { minRows: number, maxRows: number }
|
|
10
|
+
* - size: 'small' | 'middle' | 'large'
|
|
11
|
+
* - placeholder: string
|
|
12
|
+
* - allowClear: boolean
|
|
13
|
+
* - bordered: boolean
|
|
14
|
+
* - maxLength: number
|
|
15
|
+
* - showCount: boolean | { formatter: (info: { count: number, maxLength?: number }) => string }
|
|
16
|
+
* - status: 'error' | 'warning'
|
|
17
|
+
* - style: CSSProperties
|
|
18
|
+
* - className: string
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* // In uiSchema
|
|
22
|
+
* {
|
|
23
|
+
* "myField": {
|
|
24
|
+
* "ui:widget": "textarea",
|
|
25
|
+
* "ui:options": {
|
|
26
|
+
* "rows": 6,
|
|
27
|
+
* "autoSize": { "minRows": 3, "maxRows": 10 },
|
|
28
|
+
* "placeholder": "Enter detailed description",
|
|
29
|
+
* "allowClear": true,
|
|
30
|
+
* "showCount": true,
|
|
31
|
+
* "maxLength": 500
|
|
32
|
+
* }
|
|
33
|
+
* }
|
|
34
|
+
* }
|
|
35
|
+
*/
|
|
36
|
+
declare const TextareaWidget: FC<WidgetProps>;
|
|
37
|
+
export default TextareaWidget;
|
|
38
|
+
export { TextareaWidget };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Text-based widgets for extended-dynamic-forms
|
|
3
|
+
*
|
|
4
|
+
* This module exports text input widgets that provide enhanced functionality
|
|
5
|
+
* over standard RJSF widgets by leveraging Ant Design components.
|
|
6
|
+
*/
|
|
7
|
+
export { default as TextWidget } from './TextWidget';
|
|
8
|
+
export * from './TextWidget';
|
|
9
|
+
export { default as TextareaWidget } from './TextareaWidget';
|
|
10
|
+
export * from './TextareaWidget';
|
|
11
|
+
export { default as PasswordWidget } from './PasswordWidget';
|
|
12
|
+
export * from './PasswordWidget';
|
|
13
|
+
export declare const textWidgets: {
|
|
14
|
+
text: () => Promise<import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>>;
|
|
15
|
+
TextWidget: () => Promise<import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>>;
|
|
16
|
+
textarea: () => Promise<import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>>;
|
|
17
|
+
TextareaWidget: () => Promise<import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>>;
|
|
18
|
+
password: () => Promise<import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>>;
|
|
19
|
+
PasswordWidget: () => Promise<import('react').FC<import('@rjsf/utils').WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>>;
|
|
20
|
+
};
|
package/package.json
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "extended-dynamic-forms",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist",
|
|
10
|
-
"examples",
|
|
11
10
|
"LICENSE",
|
|
12
11
|
"README.md"
|
|
13
12
|
],
|
|
@@ -41,10 +40,10 @@
|
|
|
41
40
|
"prepublishOnly": "npm run build",
|
|
42
41
|
"playground": "cd playground && npm install && npm run dev",
|
|
43
42
|
"playground:build": "cd playground && npm run build",
|
|
44
|
-
"serve:examples": "npx http-server examples/vanilla-js -p 8080 -o",
|
|
45
43
|
"setup:dev": "git clone https://github.com/rjsf-team/react-jsonschema-form ../react-jsonschema-form && cd ../react-jsonschema-form && npm install && npm run build",
|
|
46
44
|
"link:rjsf": "cd ../react-jsonschema-form/packages/core && npm link && cd ../antd && npm link && cd ../utils && npm link && cd ../validator-ajv8 && npm link",
|
|
47
|
-
"dev:install": "npm run setup:dev && npm run link:rjsf && npm install"
|
|
45
|
+
"dev:install": "npm run setup:dev && npm run link:rjsf && npm install",
|
|
46
|
+
"generate:widget": "plop --plopfile plopfile.js --dest ."
|
|
48
47
|
},
|
|
49
48
|
"keywords": [
|
|
50
49
|
"react",
|
|
@@ -70,10 +69,10 @@
|
|
|
70
69
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
71
70
|
},
|
|
72
71
|
"devDependencies": {
|
|
73
|
-
"@rjsf/antd": "
|
|
74
|
-
"@rjsf/core": "
|
|
75
|
-
"@rjsf/utils": "
|
|
76
|
-
"@rjsf/validator-ajv8": "
|
|
72
|
+
"@rjsf/antd": "6.0.0-beta.13",
|
|
73
|
+
"@rjsf/core": "6.0.0-beta.13",
|
|
74
|
+
"@rjsf/utils": "6.0.0-beta.13",
|
|
75
|
+
"@rjsf/validator-ajv8": "6.0.0-beta.13",
|
|
77
76
|
"@testing-library/dom": "^10.4.0",
|
|
78
77
|
"@testing-library/jest-dom": "^6.6.3",
|
|
79
78
|
"@testing-library/react": "^16.3.0",
|
|
@@ -93,6 +92,7 @@
|
|
|
93
92
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
94
93
|
"eslint-plugin-react-refresh": "^0.4.5",
|
|
95
94
|
"jsdom": "^26.1.0",
|
|
95
|
+
"plop": "^4.0.1",
|
|
96
96
|
"prettier": "^3.5.3",
|
|
97
97
|
"react": "^18.2.0",
|
|
98
98
|
"react-dom": "^18.2.0",
|
package/dist/vanilla-entry.d.ts
DELETED
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { default as ReactDOM } from 'react-dom/client';
|
|
3
|
-
import { default as dayjs } from 'dayjs';
|
|
4
|
-
|
|
5
|
-
import * as antd from 'antd';
|
|
6
|
-
import * as ExtendedDynamicFormsExports from './index';
|
|
7
|
-
declare function createForm(config: {
|
|
8
|
-
container: string | HTMLElement;
|
|
9
|
-
schema: any;
|
|
10
|
-
uiSchema?: any;
|
|
11
|
-
formData?: any;
|
|
12
|
-
onChange?: (data: any) => void;
|
|
13
|
-
onSubmit?: (data: any) => void;
|
|
14
|
-
onError?: (errors: any) => void;
|
|
15
|
-
webhooks?: any;
|
|
16
|
-
widgets?: any;
|
|
17
|
-
fields?: any;
|
|
18
|
-
}): {
|
|
19
|
-
setFormData: (data: any) => void;
|
|
20
|
-
destroy: () => void;
|
|
21
|
-
};
|
|
22
|
-
declare function createWizardForm(config: {
|
|
23
|
-
container: string | HTMLElement;
|
|
24
|
-
schema: any;
|
|
25
|
-
uiSchema?: any;
|
|
26
|
-
formData?: any;
|
|
27
|
-
onStepChange?: (step: number, data: any) => void;
|
|
28
|
-
onSubmit?: (data: any) => void;
|
|
29
|
-
webhooks?: any;
|
|
30
|
-
}): {
|
|
31
|
-
destroy: () => void;
|
|
32
|
-
};
|
|
33
|
-
declare const ExtendedDynamicForms: {
|
|
34
|
-
utils: {
|
|
35
|
-
createSchema: (properties: any) => {
|
|
36
|
-
type: string;
|
|
37
|
-
properties: any;
|
|
38
|
-
required: string[];
|
|
39
|
-
};
|
|
40
|
-
createUiSchema: (fields: any) => any;
|
|
41
|
-
widgets: {
|
|
42
|
-
text: string;
|
|
43
|
-
textarea: string;
|
|
44
|
-
select: string;
|
|
45
|
-
checkbox: string;
|
|
46
|
-
radio: string;
|
|
47
|
-
date: string;
|
|
48
|
-
datetime: string;
|
|
49
|
-
email: string;
|
|
50
|
-
password: string;
|
|
51
|
-
number: string;
|
|
52
|
-
file: string;
|
|
53
|
-
hidden: string;
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
validator: import('@rjsf/validator-ajv8/lib/validator.js').default<any, ExtendedDynamicFormsExports.RJSFSchema, any>;
|
|
57
|
-
ExtendedForm: React.ForwardRefExoticComponent<Omit<ExtendedDynamicFormsExports.ExtendedFormProps, "ref"> & React.RefAttributes<any>>;
|
|
58
|
-
WizardForm: typeof ExtendedDynamicFormsExports.WizardForm;
|
|
59
|
-
customFields: {
|
|
60
|
-
address: React.FC<ExtendedDynamicFormsExports.FieldProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
61
|
-
phone: React.FC<ExtendedDynamicFormsExports.FieldProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
62
|
-
currency: React.FC<ExtendedDynamicFormsExports.FieldProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
63
|
-
};
|
|
64
|
-
customTemplates: {
|
|
65
|
-
FieldTemplate: React.FC<ExtendedDynamicFormsExports.FieldTemplateProps>;
|
|
66
|
-
ArrayFieldTemplate: (props: ExtendedDynamicFormsExports.ArrayFieldTemplateProps) => import("react/jsx-runtime").JSX.Element;
|
|
67
|
-
ArrayFieldItemTemplate: (props: import('@rjsf/utils').ArrayFieldItemTemplateType) => import("react/jsx-runtime").JSX.Element;
|
|
68
|
-
WizardObjectFieldTemplate: React.FC<ExtendedDynamicFormsExports.ObjectFieldTemplateProps>;
|
|
69
|
-
WizardSectionTemplate: React.FC<import('./layouts/wizard/WizardSectionTemplate').WizardSectionTemplateProps>;
|
|
70
|
-
ButtonTemplates: {
|
|
71
|
-
SubmitButton: React.FC<import('@rjsf/utils').SubmitButtonProps>;
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
|
-
AddressField: React.FC<ExtendedDynamicFormsExports.FieldProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
75
|
-
PhoneField: React.FC<ExtendedDynamicFormsExports.FieldProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
76
|
-
CurrencyField: React.FC<ExtendedDynamicFormsExports.FieldProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
77
|
-
FieldTemplate: React.FC<ExtendedDynamicFormsExports.FieldTemplateProps>;
|
|
78
|
-
ArrayFieldTemplate: (props: ExtendedDynamicFormsExports.ArrayFieldTemplateProps) => import("react/jsx-runtime").JSX.Element;
|
|
79
|
-
ArrayFieldItemTemplate: (props: import('@rjsf/utils').ArrayFieldItemTemplateType) => import("react/jsx-runtime").JSX.Element;
|
|
80
|
-
WizardObjectFieldTemplate: React.FC<ExtendedDynamicFormsExports.ObjectFieldTemplateProps>;
|
|
81
|
-
WizardSectionTemplate: React.FC<import('./layouts/wizard/WizardSectionTemplate').WizardSectionTemplateProps>;
|
|
82
|
-
SubmitButton: React.FC<import('@rjsf/utils').SubmitButtonProps>;
|
|
83
|
-
customWidgets: {
|
|
84
|
-
TextWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
85
|
-
TextareaWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
86
|
-
SelectWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
87
|
-
CheckboxWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
88
|
-
RadioWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
89
|
-
UpDownWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
90
|
-
FileWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
91
|
-
tel: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
92
|
-
email: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
93
|
-
url: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
94
|
-
password: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
95
|
-
date: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
96
|
-
'datetime-local': React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
97
|
-
TelWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
98
|
-
EmailWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
99
|
-
URLWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
100
|
-
PasswordWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
101
|
-
DateWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
102
|
-
DateTimeWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
103
|
-
color: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
104
|
-
file: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
105
|
-
range: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
106
|
-
rating: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
107
|
-
};
|
|
108
|
-
ColorWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
109
|
-
DateWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
110
|
-
FileWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
111
|
-
RangeWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
112
|
-
RatingWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
113
|
-
EnhancedTextWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
114
|
-
EnhancedTextareaWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
115
|
-
EnhancedSelectWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
116
|
-
EnhancedCheckboxWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
117
|
-
EnhancedRadioWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
118
|
-
EnhancedNumberWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
119
|
-
TelephoneWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
120
|
-
EmailWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
121
|
-
URLWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
122
|
-
PasswordWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
123
|
-
DateTimeWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
124
|
-
FileUploadWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
125
|
-
enhancedWidgets: {
|
|
126
|
-
TextWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
127
|
-
TextareaWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
128
|
-
SelectWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
129
|
-
CheckboxWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
130
|
-
RadioWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
131
|
-
UpDownWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
132
|
-
FileWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
133
|
-
tel: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
134
|
-
email: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
135
|
-
url: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
136
|
-
password: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
137
|
-
date: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
138
|
-
'datetime-local': React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
139
|
-
TelWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
140
|
-
EmailWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
141
|
-
URLWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
142
|
-
PasswordWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
143
|
-
DateWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
144
|
-
DateTimeWidget: React.FC<ExtendedDynamicFormsExports.WidgetProps<any, ExtendedDynamicFormsExports.RJSFSchema, any>>;
|
|
145
|
-
};
|
|
146
|
-
WizardLayout: React.FC<import('./layouts/wizard/WizardLayout').WizardLayoutProps>;
|
|
147
|
-
ProgressIndicator: React.FC<import('./layouts/wizard/ProgressIndicator').ProgressIndicatorProps>;
|
|
148
|
-
StepNavigation: React.FC<import('./layouts/wizard/StepNavigation').StepNavigationProps>;
|
|
149
|
-
WizardNavigation: React.FC<import('./layouts/wizard/WizardNavigation').WizardNavigationProps>;
|
|
150
|
-
FormEventManager: typeof ExtendedDynamicFormsExports.FormEventManager;
|
|
151
|
-
FormEventHub: typeof ExtendedDynamicFormsExports.FormEventHub;
|
|
152
|
-
FormEventProvider: React.FC<import('./events/FormEventContext').FormEventProviderProps>;
|
|
153
|
-
useFormEventHub: () => import('./events/FormEventContext').FormEventContextType;
|
|
154
|
-
useFieldEventHandlers: (fieldId: string, schema?: any, fieldPath?: string[]) => {
|
|
155
|
-
onFocus: (value: any) => Promise<void>;
|
|
156
|
-
onBlur: (value: any) => Promise<void>;
|
|
157
|
-
onChange: (value: any) => Promise<void>;
|
|
158
|
-
};
|
|
159
|
-
createConditionalEngineHook: typeof ExtendedDynamicFormsExports.createConditionalEngineHook;
|
|
160
|
-
useConditionalUi: ExtendedDynamicFormsExports.ConditionalEngineHook<ExtendedDynamicFormsExports.UiEffect[]>;
|
|
161
|
-
useConditionalSchema: ExtendedDynamicFormsExports.ConditionalEngineHook<ExtendedDynamicFormsExports.SchemaEffect[]>;
|
|
162
|
-
useConditionalValidation: ExtendedDynamicFormsExports.ConditionalEngineHook<ExtendedDynamicFormsExports.ValidationEffect>;
|
|
163
|
-
createDynamicArrayItemsUiSchema: typeof ExtendedDynamicFormsExports.createDynamicArrayItemsUiSchema;
|
|
164
|
-
mergeItemUiSchema: typeof ExtendedDynamicFormsExports.mergeItemUiSchema;
|
|
165
|
-
arrayItemPatterns: {
|
|
166
|
-
hideField: (fieldName: string, condition: (itemData: any) => boolean) => ExtendedDynamicFormsExports.ArrayItemConditionalFn;
|
|
167
|
-
requireField: (fieldName: string, condition: (itemData: any) => boolean) => ExtendedDynamicFormsExports.ArrayItemConditionalFn;
|
|
168
|
-
applyIndexStyles: (totalItems: number) => ExtendedDynamicFormsExports.ArrayItemConditionalFn;
|
|
169
|
-
};
|
|
170
|
-
uiEngineConfig: ExtendedDynamicFormsExports.EngineConfig<ExtendedDynamicFormsExports.UiEffect[], ExtendedDynamicFormsExports.UiSchema>;
|
|
171
|
-
schemaEngineConfig: ExtendedDynamicFormsExports.EngineConfig<ExtendedDynamicFormsExports.SchemaEffect[], ExtendedDynamicFormsExports.RJSFSchema>;
|
|
172
|
-
validationEngineConfig: ExtendedDynamicFormsExports.EngineConfig<ExtendedDynamicFormsExports.ValidationEffect, import('./conditionals/v2/engines/validationEngineConfig').ValidationConfig>;
|
|
173
|
-
createCustomValidate: typeof ExtendedDynamicFormsExports.createCustomValidate;
|
|
174
|
-
deepEquals(obj1: any, obj2: any): boolean;
|
|
175
|
-
formDataUtils: {
|
|
176
|
-
cloneFormData: (data: any) => any;
|
|
177
|
-
mergeFormData: (current: any, updates: any) => any;
|
|
178
|
-
getNestedValue: (data: any, path: string) => any;
|
|
179
|
-
setNestedValue: (data: any, path: string, value: any) => any;
|
|
180
|
-
removeEmptyValues: (data: any) => any;
|
|
181
|
-
};
|
|
182
|
-
schemaUtils: {
|
|
183
|
-
getRequiredFields: (schema: ExtendedDynamicFormsExports.RJSFSchema) => string[];
|
|
184
|
-
isFieldRequired: (schema: ExtendedDynamicFormsExports.RJSFSchema, fieldName: string) => boolean;
|
|
185
|
-
getFieldSchema: (schema: ExtendedDynamicFormsExports.RJSFSchema, path: string) => ExtendedDynamicFormsExports.RJSFSchema | undefined;
|
|
186
|
-
mergeSchemas: (schema1: ExtendedDynamicFormsExports.RJSFSchema, schema2: ExtendedDynamicFormsExports.RJSFSchema) => ExtendedDynamicFormsExports.RJSFSchema;
|
|
187
|
-
getAllFieldPaths: (schema: ExtendedDynamicFormsExports.RJSFSchema, prefix?: string) => string[];
|
|
188
|
-
};
|
|
189
|
-
validationUtils: {
|
|
190
|
-
isValidEmail: (email: string) => boolean;
|
|
191
|
-
isValidPhone: (phone: string) => boolean;
|
|
192
|
-
isValidUrl: (url: string) => boolean;
|
|
193
|
-
isValidDate: (date: string) => boolean;
|
|
194
|
-
isInRange: (value: number, min?: number, max?: number) => boolean;
|
|
195
|
-
getValidationMessage: (type: string, params?: any) => string;
|
|
196
|
-
};
|
|
197
|
-
createForm: typeof createForm;
|
|
198
|
-
createWizardForm: typeof createWizardForm;
|
|
199
|
-
React: typeof React;
|
|
200
|
-
ReactDOM: typeof ReactDOM;
|
|
201
|
-
antd: typeof antd;
|
|
202
|
-
dayjs: typeof dayjs;
|
|
203
|
-
};
|
|
204
|
-
export default ExtendedDynamicForms;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { default as React, FC } from 'react';
|
|
2
|
-
import { WidgetProps } from '@rjsf/utils';
|
|
3
|
-
|
|
4
|
-
export declare const EnhancedTextWidget: FC<WidgetProps>;
|
|
5
|
-
export declare const EnhancedTextareaWidget: FC<WidgetProps>;
|
|
6
|
-
export declare const EnhancedSelectWidget: FC<WidgetProps>;
|
|
7
|
-
export declare const EnhancedCheckboxWidget: FC<WidgetProps>;
|
|
8
|
-
export declare const EnhancedRadioWidget: FC<WidgetProps>;
|
|
9
|
-
export declare const EnhancedNumberWidget: FC<WidgetProps>;
|
|
10
|
-
export declare const TelephoneWidget: FC<WidgetProps>;
|
|
11
|
-
export declare const EmailWidget: FC<WidgetProps>;
|
|
12
|
-
export declare const URLWidget: FC<WidgetProps>;
|
|
13
|
-
export declare const PasswordWidget: FC<WidgetProps>;
|
|
14
|
-
export declare const DateWidget: FC<WidgetProps>;
|
|
15
|
-
export declare const DateTimeWidget: FC<WidgetProps>;
|
|
16
|
-
export declare const FileUploadWidget: FC<WidgetProps>;
|
|
17
|
-
export declare const customWidgets: {
|
|
18
|
-
TextWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
19
|
-
TextareaWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
20
|
-
SelectWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
21
|
-
CheckboxWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
22
|
-
RadioWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
23
|
-
UpDownWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
24
|
-
FileWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
25
|
-
tel: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
26
|
-
email: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
27
|
-
url: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
28
|
-
password: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
29
|
-
date: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
30
|
-
'datetime-local': React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
31
|
-
TelWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
32
|
-
EmailWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
33
|
-
URLWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
34
|
-
PasswordWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
35
|
-
DateWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
36
|
-
DateTimeWidget: React.FC<WidgetProps<any, import('@rjsf/utils').RJSFSchema, any>>;
|
|
37
|
-
};
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ExtendedForm } from '../src/ExtendedForm';
|
|
3
|
-
import { RJSFSchema, UiSchema } from '@rjsf/utils';
|
|
4
|
-
import { useConditionalUi, UiRule, JsonLogicRule } from '../src/conditionals/v2';
|
|
5
|
-
|
|
6
|
-
const schema: RJSFSchema = {
|
|
7
|
-
type: 'object',
|
|
8
|
-
properties: {
|
|
9
|
-
requiresShipping: {
|
|
10
|
-
type: 'boolean',
|
|
11
|
-
title: 'Requires Shipping?'
|
|
12
|
-
},
|
|
13
|
-
shippingAddress: {
|
|
14
|
-
type: 'object',
|
|
15
|
-
title: 'Shipping Address',
|
|
16
|
-
properties: {
|
|
17
|
-
street: { type: 'string', title: 'Street' },
|
|
18
|
-
city: { type: 'string', title: 'City' },
|
|
19
|
-
zip: { type: 'string', title: 'ZIP Code' }
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
const baseUiSchema: UiSchema = {
|
|
26
|
-
requiresShipping: {
|
|
27
|
-
'ui:widget': 'checkbox'
|
|
28
|
-
},
|
|
29
|
-
shippingAddress: {
|
|
30
|
-
street: { 'ui:widget': 'text' },
|
|
31
|
-
city: { 'ui:widget': 'text' },
|
|
32
|
-
zip: { 'ui:widget': 'text' }
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export function ConditionalV2Example() {
|
|
37
|
-
const [formData, setFormData] = React.useState({});
|
|
38
|
-
|
|
39
|
-
// Define UI rules
|
|
40
|
-
const uiRules: UiRule[] = [
|
|
41
|
-
{
|
|
42
|
-
name: 'Hide shipping address when not required',
|
|
43
|
-
condition: { "!": { "var": "requiresShipping" } } as JsonLogicRule,
|
|
44
|
-
effect: [
|
|
45
|
-
{ op: 'add', path: '/shippingAddress/ui:widget', value: 'hidden' }
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
];
|
|
49
|
-
|
|
50
|
-
// Apply conditional UI logic
|
|
51
|
-
const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<div>
|
|
55
|
-
<h1>Conditional V2 Example - Three Pillars Architecture</h1>
|
|
56
|
-
<ExtendedForm
|
|
57
|
-
schema={schema}
|
|
58
|
-
uiSchema={conditionalUiSchema}
|
|
59
|
-
formData={formData}
|
|
60
|
-
onChange={({ formData }) => setFormData(formData)}
|
|
61
|
-
/>
|
|
62
|
-
</div>
|
|
63
|
-
);
|
|
64
|
-
}
|