react-formule 1.1.1 → 1.2.1
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 +23 -6
- package/dist/admin/formComponents/ObjectFieldTemplate.d.ts +1 -1
- package/dist/admin/utils/index.d.ts +0 -1
- package/dist/exposed.d.ts +4 -1
- package/dist/forms/FormErrorBoundary.d.ts +4 -0
- package/dist/forms/fields/internal/TitleField.d.ts +1 -5
- package/dist/forms/templates/ArrayFieldTemplates/ArrayFieldTemplateItem.d.ts +0 -5
- package/dist/forms/widgets/published/DateWidget.d.ts +5 -0
- package/dist/forms/widgets/published/SelectWidget.d.ts +4 -0
- package/dist/forms/widgets/published/TextBoxWidget.d.ts +5 -0
- package/dist/forms/widgets/published/UriWidget.d.ts +1 -1
- package/dist/forms/widgets/published/index.d.ts +4 -0
- package/dist/react-formule.js +42611 -42216
- package/dist/react-formule.umd.cjs +402 -398
- package/dist/store/configureStore.d.ts +1 -1
- package/dist/utils/index.d.ts +2 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -67,7 +67,7 @@ Formule includes a variety of predefined field types, grouped in three categorie
|
|
|
67
67
|
|
|
68
68
|
You can freely remove some of these predefined fields and add your own custom fields and widgets following the JSON Schema specifications. More details below.
|
|
69
69
|
|
|
70
|
-
All of these items contain different settings that you can tinker with, separated into **Schema Settings** (_generally_ affecting how the field _works_) and **UI Schema Settings** (_generally_ affecting how the field
|
|
70
|
+
All of these items contain different settings that you can tinker with, separated into **Schema Settings** (_generally_ affecting how the field _works_) and **UI Schema Settings** (_generally_ affecting how the field _looks like_).
|
|
71
71
|
|
|
72
72
|
## :horse_racing: Setting it up
|
|
73
73
|
|
|
@@ -101,12 +101,29 @@ const useEffect(() => initFormuleSchema(), []);
|
|
|
101
101
|
|
|
102
102
|
### Customizing and adding new field types
|
|
103
103
|
|
|
104
|
+
Override (if existing) or create your own field types (rjsf type definitions) similarly to how it's done in `fieldTypes.jsx`, passing them as `customFieldTypes`. Implement your own custom fields and widgets (react components) by passing them as `customFields` and/or `customWidgets` (see `forms/fields/` and `forms/widgets/` for examples). If you also want to use a different published version of a field or widget, pass the component in `customPublishedFields` or `customPublishedWidgets`.
|
|
105
|
+
|
|
104
106
|
```jsx
|
|
107
|
+
const customFieldTypes = {
|
|
108
|
+
advanced: {
|
|
109
|
+
myfield: {
|
|
110
|
+
title: ...
|
|
111
|
+
...
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
const customFields: {
|
|
117
|
+
myfield: MyField // react component
|
|
118
|
+
}
|
|
119
|
+
|
|
105
120
|
<FormuleContext
|
|
106
|
-
theme={{token: {colorPrimary: "blue"}}}
|
|
107
|
-
customFieldTypes={
|
|
108
|
-
customFields={
|
|
109
|
-
customWidgets={...}
|
|
121
|
+
theme={{token: {colorPrimary: "blue"}}} // antd theme
|
|
122
|
+
customFieldTypes={customFieldTypes}
|
|
123
|
+
customFields={customFields}
|
|
124
|
+
customWidgets={...}
|
|
125
|
+
customPublishedFields={...}
|
|
126
|
+
customPublishedWidgets={...}>
|
|
110
127
|
// ...
|
|
111
128
|
</FormuleContext>
|
|
112
129
|
```
|
|
@@ -115,7 +132,7 @@ If you use Formule to edit existing JSON schemas that include extra fields (e.g.
|
|
|
115
132
|
|
|
116
133
|
```jsx
|
|
117
134
|
const transformSchema = (schema) => {
|
|
118
|
-
// Remove properties...
|
|
135
|
+
// Remove properties here...
|
|
119
136
|
return transformedSchema;
|
|
120
137
|
};
|
|
121
138
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as PropTypes } from 'prop-types';
|
|
2
2
|
export default ObjectFieldTemplate;
|
|
3
|
-
declare function ObjectFieldTemplate({ properties, uiSchema, formContext, idSchema }: {
|
|
3
|
+
declare function ObjectFieldTemplate({ properties, uiSchema, formContext, idSchema, }: {
|
|
4
4
|
properties: any;
|
|
5
5
|
uiSchema: any;
|
|
6
6
|
formContext: any;
|
package/dist/exposed.d.ts
CHANGED
|
@@ -8,12 +8,15 @@ type FormuleContextProps = {
|
|
|
8
8
|
customFieldTypes?: object;
|
|
9
9
|
customFields?: object;
|
|
10
10
|
customWidgets?: object;
|
|
11
|
+
customPublishedFields?: object;
|
|
12
|
+
customPublishedWidgets?: object;
|
|
11
13
|
theme?: ThemeConfig;
|
|
12
14
|
separator?: string;
|
|
15
|
+
errorBoundary?: ReactNode;
|
|
13
16
|
synchronizeState?: (state: SchemaWizardState) => void;
|
|
14
17
|
transformSchema?: (schema: object) => object;
|
|
15
18
|
};
|
|
16
|
-
export declare const FormuleContext: ({ children, customFieldTypes, customFields, customWidgets, theme, separator, synchronizeState, transformSchema, }: FormuleContextProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const FormuleContext: ({ children, customFieldTypes, customFields, customWidgets, customPublishedFields, customPublishedWidgets, theme, separator, errorBoundary, synchronizeState, transformSchema, }: FormuleContextProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
20
|
export declare const initFormuleSchema: (data?: RJSFSchema, name?: string, description?: string) => void;
|
|
18
21
|
export declare const getFormuleState: () => {
|
|
19
22
|
current: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as PropTypes } from 'prop-types';
|
|
2
2
|
export default TitleField;
|
|
3
3
|
declare function TitleField({ formContext, id, fieldId, prefixCls, required, title, uiEmail, uiImport, uiLatex, enableEmail, enableImport, enableLatex, readonly, titleIsMarkdown, isObject, hideAnchors, }: {
|
|
4
|
-
formContext
|
|
4
|
+
formContext?: {} | undefined;
|
|
5
5
|
id: any;
|
|
6
6
|
fieldId: any;
|
|
7
7
|
prefixCls: any;
|
|
@@ -30,8 +30,4 @@ declare namespace TitleField {
|
|
|
30
30
|
let enableLatex: PropTypes.Requireable<(...args: any[]) => any>;
|
|
31
31
|
let enableImport: PropTypes.Requireable<(...args: any[]) => any>;
|
|
32
32
|
}
|
|
33
|
-
namespace defaultProps {
|
|
34
|
-
let formContext_1: {};
|
|
35
|
-
export { formContext_1 as formContext };
|
|
36
|
-
}
|
|
37
33
|
}
|
|
@@ -17,7 +17,6 @@ declare namespace ArrayFieldTemplateItem {
|
|
|
17
17
|
namespace propTypes {
|
|
18
18
|
let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
19
19
|
let disabled: PropTypes.Requireable<boolean>;
|
|
20
|
-
let formContext: PropTypes.Requireable<object>;
|
|
21
20
|
let hasMoveDown: PropTypes.Requireable<boolean>;
|
|
22
21
|
let hasMoveUp: PropTypes.Requireable<boolean>;
|
|
23
22
|
let hasRemove: PropTypes.Requireable<boolean>;
|
|
@@ -27,8 +26,4 @@ declare namespace ArrayFieldTemplateItem {
|
|
|
27
26
|
let onReorderClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
28
27
|
let readonly: PropTypes.Requireable<boolean>;
|
|
29
28
|
}
|
|
30
|
-
namespace defaultProps {
|
|
31
|
-
let formContext_1: {};
|
|
32
|
-
export { formContext_1 as formContext };
|
|
33
|
-
}
|
|
34
29
|
}
|
|
@@ -2,7 +2,7 @@ import { default as PropTypes } from 'prop-types';
|
|
|
2
2
|
export default UriWidget;
|
|
3
3
|
declare function UriWidget({ value }: {
|
|
4
4
|
value: any;
|
|
5
|
-
}):
|
|
5
|
+
}): any;
|
|
6
6
|
declare namespace UriWidget {
|
|
7
7
|
namespace propTypes {
|
|
8
8
|
let value: PropTypes.Requireable<string>;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { default as TextWidget } from './TextWidget';
|
|
2
2
|
import { default as UriWidget } from './UriWidget';
|
|
3
3
|
import { default as RichEditorWidget } from './RichEditorWidget';
|
|
4
|
+
import { default as DateWidget } from './DateWidget';
|
|
5
|
+
import { default as SelectWidget } from './SelectWidget';
|
|
4
6
|
export default widgets;
|
|
5
7
|
declare namespace widgets {
|
|
6
8
|
export { TextWidget as text };
|
|
@@ -8,4 +10,6 @@ declare namespace widgets {
|
|
|
8
10
|
export { UriWidget as uri };
|
|
9
11
|
export { RichEditorWidget as richeditor };
|
|
10
12
|
export { RichEditorWidget as latex };
|
|
13
|
+
export { DateWidget as date };
|
|
14
|
+
export { SelectWidget as select };
|
|
11
15
|
}
|