@webiny/app-headless-cms-common 6.0.0-beta.0 → 6.0.0-rc.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/Fields/ErrorBoundary.d.ts +24 -0
- package/Fields/ErrorBoundary.js +40 -0
- package/Fields/ErrorBoundary.js.map +1 -0
- package/Fields/FieldElement.d.ts +64 -0
- package/Fields/FieldElement.js +77 -0
- package/Fields/FieldElement.js.map +1 -0
- package/Fields/FieldElementError.d.ts +7 -0
- package/Fields/FieldElementError.js +25 -0
- package/Fields/FieldElementError.js.map +1 -0
- package/Fields/Fields.d.ts +11 -0
- package/Fields/Fields.js +43 -0
- package/Fields/Fields.js.map +1 -0
- package/Fields/Label.d.ts +6 -0
- package/Fields/Label.js +10 -0
- package/Fields/Label.js.map +1 -0
- package/Fields/index.d.ts +3 -0
- package/Fields/index.js +5 -0
- package/Fields/index.js.map +1 -0
- package/Fields/useBind.d.ts +9 -0
- package/Fields/useBind.js +113 -0
- package/Fields/useBind.js.map +1 -0
- package/Fields/useRenderPlugins.d.ts +1 -0
- package/Fields/useRenderPlugins.js +7 -0
- package/Fields/useRenderPlugins.js.map +1 -0
- package/ModelFieldProvider/ModelFieldContext.d.ts +38 -0
- package/ModelFieldProvider/ModelFieldContext.js +26 -0
- package/ModelFieldProvider/ModelFieldContext.js.map +1 -0
- package/ModelFieldProvider/index.d.ts +2 -0
- package/ModelFieldProvider/index.js +4 -0
- package/ModelFieldProvider/index.js.map +1 -0
- package/ModelFieldProvider/useModelField.d.ts +15 -0
- package/ModelFieldProvider/useModelField.js +29 -0
- package/ModelFieldProvider/useModelField.js.map +1 -0
- package/ModelProvider/ModelContext.d.ts +9 -0
- package/ModelProvider/ModelContext.js +12 -0
- package/ModelProvider/ModelContext.js.map +1 -0
- package/ModelProvider/index.d.ts +2 -0
- package/ModelProvider/index.js +4 -0
- package/ModelProvider/index.js.map +1 -0
- package/ModelProvider/useModel.d.ts +9 -0
- package/ModelProvider/useModel.js +16 -0
- package/ModelProvider/useModel.js.map +1 -0
- package/README.md +6 -13
- package/constants.d.ts +1 -0
- package/constants.js +3 -0
- package/constants.js.map +1 -0
- package/createFieldsList.d.ts +6 -2
- package/createFieldsList.js +31 -32
- package/createFieldsList.js.map +1 -1
- package/createValidationContainer.d.ts +18 -0
- package/createValidationContainer.js +23 -0
- package/createValidationContainer.js.map +1 -0
- package/createValidators.d.ts +3 -0
- package/createValidators.js +52 -0
- package/createValidators.js.map +1 -0
- package/entries.graphql.d.ts +54 -2
- package/entries.graphql.js +338 -55
- package/entries.graphql.js.map +1 -1
- package/exports/admin/cms.d.ts +1 -0
- package/exports/admin/cms.js +3 -0
- package/exports/admin/cms.js.map +1 -0
- package/getModelTitleFieldId.d.ts +1 -1
- package/getModelTitleFieldId.js +1 -7
- package/getModelTitleFieldId.js.map +1 -1
- package/index.d.ts +10 -4
- package/index.js +10 -49
- package/index.js.map +1 -1
- package/package.json +20 -25
- package/prepareFormData.d.ts +1 -1
- package/prepareFormData.js +23 -42
- package/prepareFormData.js.map +1 -1
- package/types/index.d.ts +53 -43
- package/types/index.js +1 -38
- package/types/index.js.map +1 -1
- package/types/model.d.ts +23 -17
- package/types/model.js +1 -5
- package/types/model.js.map +1 -1
- package/types/shared.js +1 -5
- package/types/validation.d.ts +3 -3
- package/types/validation.js +1 -5
- package/types/validation.js.map +1 -1
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { ErrorInfo } from "react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import type { CmsModelField } from "../types/index.js";
|
|
4
|
+
type State = {
|
|
5
|
+
hasError: true;
|
|
6
|
+
error: Error;
|
|
7
|
+
} | {
|
|
8
|
+
hasError: false;
|
|
9
|
+
error: undefined;
|
|
10
|
+
};
|
|
11
|
+
interface Props {
|
|
12
|
+
field: CmsModelField;
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}
|
|
15
|
+
export declare class ErrorBoundary extends React.Component<Props, State> {
|
|
16
|
+
constructor(props: Props);
|
|
17
|
+
static getDerivedStateFromError(error: Error): {
|
|
18
|
+
hasError: boolean;
|
|
19
|
+
error: Error;
|
|
20
|
+
};
|
|
21
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
22
|
+
render(): any;
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { FieldElementError } from "./FieldElementError.js";
|
|
3
|
+
export class ErrorBoundary extends React.Component {
|
|
4
|
+
constructor(props) {
|
|
5
|
+
super(props);
|
|
6
|
+
this.state = {
|
|
7
|
+
hasError: false,
|
|
8
|
+
error: undefined
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
static getDerivedStateFromError(error) {
|
|
12
|
+
return {
|
|
13
|
+
hasError: true,
|
|
14
|
+
error
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
componentDidCatch(error, errorInfo) {
|
|
18
|
+
const {
|
|
19
|
+
field
|
|
20
|
+
} = this.props;
|
|
21
|
+
if (!field) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
console.groupCollapsed(`%cFIELD ERROR%c: An error occurred while rendering model field "${field.fieldId}" (${field.id}) of type "${field.type}".`, "color:red", "color:default");
|
|
25
|
+
console.log("Field definition", field);
|
|
26
|
+
console.error(error, errorInfo);
|
|
27
|
+
console.groupEnd();
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
if (this.state.hasError) {
|
|
31
|
+
return /*#__PURE__*/React.createElement(FieldElementError, {
|
|
32
|
+
title: `Error: ${this.state.error.message}`,
|
|
33
|
+
description: "See developer console for more details."
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
return this.props.children;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=ErrorBoundary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","FieldElementError","ErrorBoundary","Component","constructor","props","state","hasError","error","undefined","getDerivedStateFromError","componentDidCatch","errorInfo","field","console","groupCollapsed","fieldId","id","type","log","groupEnd","render","createElement","title","message","description","children"],"sources":["ErrorBoundary.tsx"],"sourcesContent":["import type { ErrorInfo } from \"react\";\nimport React from \"react\";\nimport type { CmsModelField } from \"~/types/index.js\";\nimport { FieldElementError } from \"./FieldElementError.js\";\n\ntype State =\n | {\n hasError: true;\n error: Error;\n }\n | { hasError: false; error: undefined };\n\ninterface Props {\n field: CmsModelField;\n [key: string]: any;\n}\n\nexport class ErrorBoundary extends React.Component<Props, State> {\n constructor(props: Props) {\n super(props);\n this.state = {\n hasError: false,\n error: undefined\n };\n }\n\n static getDerivedStateFromError(error: Error) {\n return {\n hasError: true,\n error\n };\n }\n\n public override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n const { field } = this.props;\n if (!field) {\n return;\n }\n console.groupCollapsed(\n `%cFIELD ERROR%c: An error occurred while rendering model field \"${field.fieldId}\" (${field.id}) of type \"${field.type}\".`,\n \"color:red\",\n \"color:default\"\n );\n console.log(\"Field definition\", field);\n console.error(error, errorInfo);\n console.groupEnd();\n }\n\n public override render() {\n if (this.state.hasError) {\n return (\n <FieldElementError\n title={`Error: ${this.state.error.message}`}\n description={\"See developer console for more details.\"}\n />\n );\n }\n\n return this.props.children;\n }\n}\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,iBAAiB;AAc1B,OAAO,MAAMC,aAAa,SAASF,KAAK,CAACG,SAAS,CAAe;EAC7DC,WAAWA,CAACC,KAAY,EAAE;IACtB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,KAAK,GAAG;MACTC,QAAQ,EAAE,KAAK;MACfC,KAAK,EAAEC;IACX,CAAC;EACL;EAEA,OAAOC,wBAAwBA,CAACF,KAAY,EAAE;IAC1C,OAAO;MACHD,QAAQ,EAAE,IAAI;MACdC;IACJ,CAAC;EACL;EAEgBG,iBAAiBA,CAACH,KAAY,EAAEI,SAAoB,EAAE;IAClE,MAAM;MAAEC;IAAM,CAAC,GAAG,IAAI,CAACR,KAAK;IAC5B,IAAI,CAACQ,KAAK,EAAE;MACR;IACJ;IACAC,OAAO,CAACC,cAAc,CAClB,mEAAmEF,KAAK,CAACG,OAAO,MAAMH,KAAK,CAACI,EAAE,cAAcJ,KAAK,CAACK,IAAI,IAAI,EAC1H,WAAW,EACX,eACJ,CAAC;IACDJ,OAAO,CAACK,GAAG,CAAC,kBAAkB,EAAEN,KAAK,CAAC;IACtCC,OAAO,CAACN,KAAK,CAACA,KAAK,EAAEI,SAAS,CAAC;IAC/BE,OAAO,CAACM,QAAQ,CAAC,CAAC;EACtB;EAEgBC,MAAMA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACf,KAAK,CAACC,QAAQ,EAAE;MACrB,oBACIP,KAAA,CAAAsB,aAAA,CAACrB,iBAAiB;QACdsB,KAAK,EAAE,UAAU,IAAI,CAACjB,KAAK,CAACE,KAAK,CAACgB,OAAO,EAAG;QAC5CC,WAAW,EAAE;MAA0C,CAC1D,CAAC;IAEV;IAEA,OAAO,IAAI,CAACpB,KAAK,CAACqB,QAAQ;EAC9B;AACJ","ignoreList":[]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { BindComponent, CmsEditorContentModel, CmsModelField } from "../types/index.js";
|
|
3
|
+
declare module "react" {
|
|
4
|
+
namespace JSX {
|
|
5
|
+
interface IntrinsicElements {
|
|
6
|
+
"hcms-model-field": {
|
|
7
|
+
"data-id": string;
|
|
8
|
+
"data-type": string;
|
|
9
|
+
"data-field-id": string;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
export interface FieldElementProps {
|
|
16
|
+
field: CmsModelField;
|
|
17
|
+
Bind: BindComponent;
|
|
18
|
+
contentModel: CmsEditorContentModel;
|
|
19
|
+
}
|
|
20
|
+
export declare const FieldElement: (({ field, ...props }: FieldElementProps) => React.JSX.Element | null) & {
|
|
21
|
+
original: ({ field, ...props }: FieldElementProps) => React.JSX.Element | null;
|
|
22
|
+
originalName: string;
|
|
23
|
+
displayName: string;
|
|
24
|
+
} & {
|
|
25
|
+
original: (({ field, ...props }: FieldElementProps) => React.JSX.Element | null) & {
|
|
26
|
+
original: ({ field, ...props }: FieldElementProps) => React.JSX.Element | null;
|
|
27
|
+
originalName: string;
|
|
28
|
+
displayName: string;
|
|
29
|
+
};
|
|
30
|
+
originalName: string;
|
|
31
|
+
displayName: string;
|
|
32
|
+
} & {
|
|
33
|
+
createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ field, ...props }: FieldElementProps) => React.JSX.Element | null) & {
|
|
34
|
+
original: ({ field, ...props }: FieldElementProps) => React.JSX.Element | null;
|
|
35
|
+
originalName: string;
|
|
36
|
+
displayName: string;
|
|
37
|
+
}>) => (props: unknown) => React.JSX.Element;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* @deprecated Use `FieldElement` instead.
|
|
41
|
+
*/
|
|
42
|
+
export declare const RenderFieldElement: (({ field, ...props }: FieldElementProps) => React.JSX.Element | null) & {
|
|
43
|
+
original: ({ field, ...props }: FieldElementProps) => React.JSX.Element | null;
|
|
44
|
+
originalName: string;
|
|
45
|
+
displayName: string;
|
|
46
|
+
} & {
|
|
47
|
+
original: (({ field, ...props }: FieldElementProps) => React.JSX.Element | null) & {
|
|
48
|
+
original: ({ field, ...props }: FieldElementProps) => React.JSX.Element | null;
|
|
49
|
+
originalName: string;
|
|
50
|
+
displayName: string;
|
|
51
|
+
};
|
|
52
|
+
originalName: string;
|
|
53
|
+
displayName: string;
|
|
54
|
+
} & {
|
|
55
|
+
createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ field, ...props }: FieldElementProps) => React.JSX.Element | null) & {
|
|
56
|
+
original: ({ field, ...props }: FieldElementProps) => React.JSX.Element | null;
|
|
57
|
+
originalName: string;
|
|
58
|
+
displayName: string;
|
|
59
|
+
}>) => (props: unknown) => React.JSX.Element;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* @deprecated Use `FieldElementProps` instead.
|
|
63
|
+
*/
|
|
64
|
+
export type RenderFieldElementProps = FieldElementProps;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import get from "lodash/get.js";
|
|
3
|
+
import { makeDecoratable } from "@webiny/app-admin";
|
|
4
|
+
import { i18n } from "@webiny/app/i18n/index.js";
|
|
5
|
+
import Label from "./Label.js";
|
|
6
|
+
import { useBind } from "./useBind.js";
|
|
7
|
+
import { useRenderPlugins } from "./useRenderPlugins.js";
|
|
8
|
+
import { ModelFieldProvider, useModelField } from "../ModelFieldProvider/index.js";
|
|
9
|
+
import { ErrorBoundary } from "./ErrorBoundary.js";
|
|
10
|
+
const t = i18n.ns("app-headless-cms/admin/components/content-form");
|
|
11
|
+
const RenderField = props => {
|
|
12
|
+
const renderPlugins = useRenderPlugins();
|
|
13
|
+
const {
|
|
14
|
+
Bind,
|
|
15
|
+
contentModel
|
|
16
|
+
} = props;
|
|
17
|
+
const {
|
|
18
|
+
field
|
|
19
|
+
} = useModelField();
|
|
20
|
+
const getBind = useBind({
|
|
21
|
+
Bind
|
|
22
|
+
});
|
|
23
|
+
if (typeof field.renderer === "function") {
|
|
24
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, field.renderer({
|
|
25
|
+
field,
|
|
26
|
+
getBind,
|
|
27
|
+
Label,
|
|
28
|
+
contentModel
|
|
29
|
+
}));
|
|
30
|
+
}
|
|
31
|
+
const fieldRendererName = get(field, "renderer.name");
|
|
32
|
+
if (!fieldRendererName) {
|
|
33
|
+
return t`Cannot render "{fieldName}" field - field renderer not defined.`({
|
|
34
|
+
fieldName: /*#__PURE__*/React.createElement("strong", null, field.fieldId)
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
const renderPlugin = renderPlugins.find(plugin => plugin.renderer.rendererName === fieldRendererName);
|
|
38
|
+
if (!renderPlugin) {
|
|
39
|
+
return t`Cannot render "{fieldName}" field - field renderer missing in Admin UI plugins.`({
|
|
40
|
+
fieldName: /*#__PURE__*/React.createElement("strong", null, field.fieldId)
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, renderPlugin.renderer.render({
|
|
44
|
+
field,
|
|
45
|
+
getBind,
|
|
46
|
+
Label,
|
|
47
|
+
contentModel
|
|
48
|
+
}));
|
|
49
|
+
};
|
|
50
|
+
export const FieldElement = makeDecoratable("FieldElement", ({
|
|
51
|
+
field,
|
|
52
|
+
...props
|
|
53
|
+
}) => {
|
|
54
|
+
if (!field) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
return /*#__PURE__*/React.createElement("hcms-model-field", {
|
|
58
|
+
"data-id": field.id,
|
|
59
|
+
"data-field-id": field.fieldId,
|
|
60
|
+
"data-type": field.type
|
|
61
|
+
}, /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
62
|
+
field: field
|
|
63
|
+
}, /*#__PURE__*/React.createElement(ModelFieldProvider, {
|
|
64
|
+
field: field
|
|
65
|
+
}, /*#__PURE__*/React.createElement(RenderField, props))));
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* @deprecated Use `FieldElement` instead.
|
|
70
|
+
*/
|
|
71
|
+
export const RenderFieldElement = FieldElement;
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* @deprecated Use `FieldElementProps` instead.
|
|
75
|
+
*/
|
|
76
|
+
|
|
77
|
+
//# sourceMappingURL=FieldElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","get","makeDecoratable","i18n","Label","useBind","useRenderPlugins","ModelFieldProvider","useModelField","ErrorBoundary","t","ns","RenderField","props","renderPlugins","Bind","contentModel","field","getBind","renderer","createElement","Fragment","fieldRendererName","fieldName","fieldId","renderPlugin","find","plugin","rendererName","render","FieldElement","id","type","RenderFieldElement"],"sources":["FieldElement.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport { makeDecoratable } from \"@webiny/app-admin\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport Label from \"./Label.js\";\nimport { useBind } from \"./useBind.js\";\nimport { useRenderPlugins } from \"./useRenderPlugins.js\";\nimport { ModelFieldProvider, useModelField } from \"../ModelFieldProvider/index.js\";\nimport type { BindComponent, CmsEditorContentModel, CmsModelField } from \"~/types/index.js\";\nimport { ErrorBoundary } from \"./ErrorBoundary.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/content-form\");\n\ndeclare module \"react\" {\n namespace JSX {\n interface IntrinsicElements {\n \"hcms-model-field\": {\n \"data-id\": string;\n \"data-type\": string;\n \"data-field-id\": string;\n children: React.ReactNode;\n };\n }\n }\n}\n\ntype RenderFieldProps = Omit<FieldElementProps, \"field\">;\n\nconst RenderField = (props: RenderFieldProps) => {\n const renderPlugins = useRenderPlugins();\n const { Bind, contentModel } = props;\n const { field } = useModelField();\n const getBind = useBind({ Bind });\n\n if (typeof field.renderer === \"function\") {\n return <>{field.renderer({ field, getBind, Label, contentModel })}</>;\n }\n\n const fieldRendererName = get(field, \"renderer.name\");\n if (!fieldRendererName) {\n return t`Cannot render \"{fieldName}\" field - field renderer not defined.`({\n fieldName: <strong>{field.fieldId}</strong>\n });\n }\n\n const renderPlugin = renderPlugins.find(\n plugin => plugin.renderer.rendererName === fieldRendererName\n );\n\n if (!renderPlugin) {\n return t`Cannot render \"{fieldName}\" field - field renderer missing in Admin UI plugins.`({\n fieldName: <strong>{field.fieldId}</strong>\n });\n }\n\n return <>{renderPlugin.renderer.render({ field, getBind, Label, contentModel })}</>;\n};\n\nexport interface FieldElementProps {\n field: CmsModelField;\n Bind: BindComponent;\n contentModel: CmsEditorContentModel;\n}\n\nexport const FieldElement = makeDecoratable(\n \"FieldElement\",\n ({ field, ...props }: FieldElementProps) => {\n if (!field) {\n return null;\n }\n\n return (\n <hcms-model-field\n data-id={field.id}\n data-field-id={field.fieldId}\n data-type={field.type}\n >\n <ErrorBoundary field={field}>\n <ModelFieldProvider field={field}>\n <RenderField {...props} />\n </ModelFieldProvider>\n </ErrorBoundary>\n </hcms-model-field>\n );\n }\n);\n\n/**\n * @deprecated Use `FieldElement` instead.\n */\nexport const RenderFieldElement = FieldElement;\n\n/**\n * @deprecated Use `FieldElementProps` instead.\n */\nexport type RenderFieldElementProps = FieldElementProps;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAC/B,SAASC,eAAe,QAAQ,mBAAmB;AACnD,SAASC,IAAI,QAAQ,2BAA2B;AAChD,OAAOC,KAAK;AACZ,SAASC,OAAO;AAChB,SAASC,gBAAgB;AACzB,SAASC,kBAAkB,EAAEC,aAAa;AAE1C,SAASC,aAAa;AAEtB,MAAMC,CAAC,GAAGP,IAAI,CAACQ,EAAE,CAAC,gDAAgD,CAAC;AAiBnE,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EAC7C,MAAMC,aAAa,GAAGR,gBAAgB,CAAC,CAAC;EACxC,MAAM;IAAES,IAAI;IAAEC;EAAa,CAAC,GAAGH,KAAK;EACpC,MAAM;IAAEI;EAAM,CAAC,GAAGT,aAAa,CAAC,CAAC;EACjC,MAAMU,OAAO,GAAGb,OAAO,CAAC;IAAEU;EAAK,CAAC,CAAC;EAEjC,IAAI,OAAOE,KAAK,CAACE,QAAQ,KAAK,UAAU,EAAE;IACtC,oBAAOnB,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAAqB,QAAA,QAAGJ,KAAK,CAACE,QAAQ,CAAC;MAAEF,KAAK;MAAEC,OAAO;MAAEd,KAAK;MAAEY;IAAa,CAAC,CAAI,CAAC;EACzE;EAEA,MAAMM,iBAAiB,GAAGrB,GAAG,CAACgB,KAAK,EAAE,eAAe,CAAC;EACrD,IAAI,CAACK,iBAAiB,EAAE;IACpB,OAAOZ,CAAC,iEAAiE,CAAC;MACtEa,SAAS,eAAEvB,KAAA,CAAAoB,aAAA,iBAASH,KAAK,CAACO,OAAgB;IAC9C,CAAC,CAAC;EACN;EAEA,MAAMC,YAAY,GAAGX,aAAa,CAACY,IAAI,CACnCC,MAAM,IAAIA,MAAM,CAACR,QAAQ,CAACS,YAAY,KAAKN,iBAC/C,CAAC;EAED,IAAI,CAACG,YAAY,EAAE;IACf,OAAOf,CAAC,iFAAiF,CAAC;MACtFa,SAAS,eAAEvB,KAAA,CAAAoB,aAAA,iBAASH,KAAK,CAACO,OAAgB;IAC9C,CAAC,CAAC;EACN;EAEA,oBAAOxB,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAAqB,QAAA,QAAGI,YAAY,CAACN,QAAQ,CAACU,MAAM,CAAC;IAAEZ,KAAK;IAAEC,OAAO;IAAEd,KAAK;IAAEY;EAAa,CAAC,CAAI,CAAC;AACvF,CAAC;AAQD,OAAO,MAAMc,YAAY,GAAG5B,eAAe,CACvC,cAAc,EACd,CAAC;EAAEe,KAAK;EAAE,GAAGJ;AAAyB,CAAC,KAAK;EACxC,IAAI,CAACI,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EAEA,oBACIjB,KAAA,CAAAoB,aAAA;IACI,WAASH,KAAK,CAACc,EAAG;IAClB,iBAAed,KAAK,CAACO,OAAQ;IAC7B,aAAWP,KAAK,CAACe;EAAK,gBAEtBhC,KAAA,CAAAoB,aAAA,CAACX,aAAa;IAACQ,KAAK,EAAEA;EAAM,gBACxBjB,KAAA,CAAAoB,aAAA,CAACb,kBAAkB;IAACU,KAAK,EAAEA;EAAM,gBAC7BjB,KAAA,CAAAoB,aAAA,CAACR,WAAW,EAAKC,KAAQ,CACT,CACT,CACD,CAAC;AAE3B,CACJ,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMoB,kBAAkB,GAAGH,YAAY;;AAE9C;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import _styled from "@emotion/styled/base";
|
|
2
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
3
|
+
import React from "react";
|
|
4
|
+
const StyledError = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
5
|
+
target: "e11oiyxk0"
|
|
6
|
+
} : {
|
|
7
|
+
target: "e11oiyxk0",
|
|
8
|
+
label: "StyledError"
|
|
9
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
10
|
+
name: "1ybf6v5",
|
|
11
|
+
styles: "border:2px solid red;background-color:#f87e7e;border-radius:5px;padding:5px 10px"
|
|
12
|
+
} : {
|
|
13
|
+
name: "1ybf6v5",
|
|
14
|
+
styles: "border:2px solid red;background-color:#f87e7e;border-radius:5px;padding:5px 10px/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpZWxkRWxlbWVudEVycm9yLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHOEIiLCJmaWxlIjoiRmllbGRFbGVtZW50RXJyb3IudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmNvbnN0IFN0eWxlZEVycm9yID0gc3R5bGVkLmRpdmBcbiAgICBib3JkZXI6IDJweCBzb2xpZCByZWQ7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogI2Y4N2U3ZTtcbiAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgcGFkZGluZzogNXB4IDEwcHg7XG5gO1xuXG5pbnRlcmZhY2UgRmllbGRFbGVtZW50RXJyb3JQcm9wcyB7XG4gICAgdGl0bGU6IHN0cmluZztcbiAgICBkZXNjcmlwdGlvbjogc3RyaW5nO1xufVxuXG5jb25zdCBzaG93RXJyb3IgPSBwcm9jZXNzLmVudi5OT0RFX0VOViA9PT0gXCJkZXZlbG9wbWVudFwiO1xuXG5leHBvcnQgY29uc3QgRmllbGRFbGVtZW50RXJyb3IgPSAocHJvcHM6IEZpZWxkRWxlbWVudEVycm9yUHJvcHMpID0+IHtcbiAgICBpZiAoIXNob3dFcnJvcikge1xuICAgICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8U3R5bGVkRXJyb3I+XG4gICAgICAgICAgICA8aDU+e3Byb3BzLnRpdGxlfTwvaDU+XG4gICAgICAgICAgICA8cD57cHJvcHMuZGVzY3JpcHRpb259PC9wPlxuICAgICAgICA8L1N0eWxlZEVycm9yPlxuICAgICk7XG59O1xuIl19 */",
|
|
15
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
16
|
+
});
|
|
17
|
+
const showError = process.env.NODE_ENV === "development";
|
|
18
|
+
export const FieldElementError = props => {
|
|
19
|
+
if (!showError) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
return /*#__PURE__*/React.createElement(StyledError, null, /*#__PURE__*/React.createElement("h5", null, props.title), /*#__PURE__*/React.createElement("p", null, props.description));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
//# sourceMappingURL=FieldElementError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","StyledError","_styled","process","env","NODE_ENV","target","label","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","showError","FieldElementError","props","createElement","title","description"],"sources":["FieldElementError.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nconst StyledError = styled.div`\n border: 2px solid red;\n background-color: #f87e7e;\n border-radius: 5px;\n padding: 5px 10px;\n`;\n\ninterface FieldElementErrorProps {\n title: string;\n description: string;\n}\n\nconst showError = process.env.NODE_ENV === \"development\";\n\nexport const FieldElementError = (props: FieldElementErrorProps) => {\n if (!showError) {\n return null;\n }\n\n return (\n <StyledError>\n <h5>{props.title}</h5>\n <p>{props.description}</p>\n </StyledError>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,MAAMC,WAAW,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,EAKhB;AAOD,MAAMC,SAAS,GAAGT,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa;AAExD,OAAO,MAAMQ,iBAAiB,GAAIC,KAA6B,IAAK;EAChE,IAAI,CAACF,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACIZ,KAAA,CAAAe,aAAA,CAACd,WAAW,qBACRD,KAAA,CAAAe,aAAA,aAAKD,KAAK,CAACE,KAAU,CAAC,eACtBhB,KAAA,CAAAe,aAAA,YAAID,KAAK,CAACG,WAAe,CAChB,CAAC;AAEtB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { BindComponent, CmsEditorContentModel, CmsEditorFieldsLayout, CmsModelField } from "../types/index.js";
|
|
3
|
+
interface FieldsProps {
|
|
4
|
+
Bind: BindComponent;
|
|
5
|
+
contentModel: CmsEditorContentModel;
|
|
6
|
+
fields: CmsModelField[];
|
|
7
|
+
layout: CmsEditorFieldsLayout;
|
|
8
|
+
gridClassName?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const Fields: ({ Bind, fields, layout, contentModel, gridClassName }: FieldsProps) => React.JSX.Element;
|
|
11
|
+
export {};
|
package/Fields/Fields.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Alert, Grid } from "@webiny/admin-ui";
|
|
3
|
+
import { FieldElement } from "./FieldElement.js";
|
|
4
|
+
import { FieldElementError } from "./FieldElementError.js";
|
|
5
|
+
const getFieldById = (fields, id) => {
|
|
6
|
+
return fields.find(field => field.id === id) || null;
|
|
7
|
+
};
|
|
8
|
+
const LayoutNotDefined = () => {
|
|
9
|
+
return /*#__PURE__*/React.createElement(Alert, {
|
|
10
|
+
type: "warning"
|
|
11
|
+
}, "You are missing the layout definition in your code content model. Please ensure you have the layout property correctly defined.");
|
|
12
|
+
};
|
|
13
|
+
export const Fields = ({
|
|
14
|
+
Bind,
|
|
15
|
+
fields,
|
|
16
|
+
layout,
|
|
17
|
+
contentModel,
|
|
18
|
+
gridClassName
|
|
19
|
+
}) => {
|
|
20
|
+
if (!layout?.length) {
|
|
21
|
+
return /*#__PURE__*/React.createElement(LayoutNotDefined, null);
|
|
22
|
+
}
|
|
23
|
+
return /*#__PURE__*/React.createElement(Grid, {
|
|
24
|
+
className: gridClassName
|
|
25
|
+
}, layout.map((row, rowIndex) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
26
|
+
key: rowIndex
|
|
27
|
+
}, row.map(id => {
|
|
28
|
+
const field = getFieldById(fields, id);
|
|
29
|
+
return /*#__PURE__*/React.createElement(Grid.Column, {
|
|
30
|
+
span: Math.floor(12 / row.length),
|
|
31
|
+
key: id
|
|
32
|
+
}, field ? /*#__PURE__*/React.createElement(FieldElement, {
|
|
33
|
+
field: field,
|
|
34
|
+
Bind: Bind,
|
|
35
|
+
contentModel: contentModel
|
|
36
|
+
}) : /*#__PURE__*/React.createElement(FieldElementError, {
|
|
37
|
+
title: `Missing field with id "${id}"!`,
|
|
38
|
+
description: "Make sure field layout contains the correct field ids (hint: check for typos)."
|
|
39
|
+
}));
|
|
40
|
+
}))));
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
//# sourceMappingURL=Fields.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Alert","Grid","FieldElement","FieldElementError","getFieldById","fields","id","find","field","LayoutNotDefined","createElement","type","Fields","Bind","layout","contentModel","gridClassName","length","className","map","row","rowIndex","Fragment","key","Column","span","Math","floor","title","description"],"sources":["Fields.tsx"],"sourcesContent":["import React from \"react\";\nimport { Alert, type ColumnProps, Grid } from \"@webiny/admin-ui\";\nimport { FieldElement } from \"./FieldElement.js\";\nimport { FieldElementError } from \"./FieldElementError.js\";\nimport type {\n BindComponent,\n CmsEditorContentModel,\n CmsEditorFieldsLayout,\n CmsModelField\n} from \"~/types/index.js\";\n\ninterface FieldsProps {\n Bind: BindComponent;\n contentModel: CmsEditorContentModel;\n fields: CmsModelField[];\n layout: CmsEditorFieldsLayout;\n gridClassName?: string;\n}\n\nconst getFieldById = (fields: CmsModelField[], id: string): CmsModelField | null => {\n return fields.find(field => field.id === id) || null;\n};\n\nconst LayoutNotDefined = () => {\n return (\n <Alert type={\"warning\"}>\n You are missing the layout definition in your code content model. Please ensure you have\n the layout property correctly defined.\n </Alert>\n );\n};\n\nexport const Fields = ({ Bind, fields, layout, contentModel, gridClassName }: FieldsProps) => {\n if (!layout?.length) {\n return <LayoutNotDefined />;\n }\n\n return (\n <Grid className={gridClassName}>\n {layout.map((row, rowIndex) => (\n <React.Fragment key={rowIndex}>\n {row.map(id => {\n const field = getFieldById(fields, id) as CmsModelField;\n\n return (\n <Grid.Column\n span={Math.floor(12 / row.length) as ColumnProps[\"span\"]}\n key={id}\n >\n {field ? (\n <FieldElement\n field={field}\n Bind={Bind}\n contentModel={contentModel}\n />\n ) : (\n <FieldElementError\n title={`Missing field with id \"${id}\"!`}\n description={\n \"Make sure field layout contains the correct field ids (hint: check for typos).\"\n }\n />\n )}\n </Grid.Column>\n );\n })}\n </React.Fragment>\n ))}\n </Grid>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAoBC,IAAI,QAAQ,kBAAkB;AAChE,SAASC,YAAY;AACrB,SAASC,iBAAiB;AAgB1B,MAAMC,YAAY,GAAGA,CAACC,MAAuB,EAAEC,EAAU,KAA2B;EAChF,OAAOD,MAAM,CAACE,IAAI,CAACC,KAAK,IAAIA,KAAK,CAACF,EAAE,KAAKA,EAAE,CAAC,IAAI,IAAI;AACxD,CAAC;AAED,MAAMG,gBAAgB,GAAGA,CAAA,KAAM;EAC3B,oBACIV,KAAA,CAAAW,aAAA,CAACV,KAAK;IAACW,IAAI,EAAE;EAAU,GAAC,iIAGjB,CAAC;AAEhB,CAAC;AAED,OAAO,MAAMC,MAAM,GAAGA,CAAC;EAAEC,IAAI;EAAER,MAAM;EAAES,MAAM;EAAEC,YAAY;EAAEC;AAA2B,CAAC,KAAK;EAC1F,IAAI,CAACF,MAAM,EAAEG,MAAM,EAAE;IACjB,oBAAOlB,KAAA,CAAAW,aAAA,CAACD,gBAAgB,MAAE,CAAC;EAC/B;EAEA,oBACIV,KAAA,CAAAW,aAAA,CAACT,IAAI;IAACiB,SAAS,EAAEF;EAAc,GAC1BF,MAAM,CAACK,GAAG,CAAC,CAACC,GAAG,EAAEC,QAAQ,kBACtBtB,KAAA,CAAAW,aAAA,CAACX,KAAK,CAACuB,QAAQ;IAACC,GAAG,EAAEF;EAAS,GACzBD,GAAG,CAACD,GAAG,CAACb,EAAE,IAAI;IACX,MAAME,KAAK,GAAGJ,YAAY,CAACC,MAAM,EAAEC,EAAE,CAAkB;IAEvD,oBACIP,KAAA,CAAAW,aAAA,CAACT,IAAI,CAACuB,MAAM;MACRC,IAAI,EAAEC,IAAI,CAACC,KAAK,CAAC,EAAE,GAAGP,GAAG,CAACH,MAAM,CAAyB;MACzDM,GAAG,EAAEjB;IAAG,GAEPE,KAAK,gBACFT,KAAA,CAAAW,aAAA,CAACR,YAAY;MACTM,KAAK,EAAEA,KAAM;MACbK,IAAI,EAAEA,IAAK;MACXE,YAAY,EAAEA;IAAa,CAC9B,CAAC,gBAEFhB,KAAA,CAAAW,aAAA,CAACP,iBAAiB;MACdyB,KAAK,EAAE,0BAA0BtB,EAAE,IAAK;MACxCuB,WAAW,EACP;IACH,CACJ,CAEI,CAAC;EAEtB,CAAC,CACW,CACnB,CACC,CAAC;AAEf,CAAC","ignoreList":[]}
|
package/Fields/Label.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { FormComponentLabel } from "@webiny/admin-ui";
|
|
3
|
+
export const Label = ({
|
|
4
|
+
children
|
|
5
|
+
}) => /*#__PURE__*/React.createElement(FormComponentLabel, {
|
|
6
|
+
text: children
|
|
7
|
+
});
|
|
8
|
+
export default Label;
|
|
9
|
+
|
|
10
|
+
//# sourceMappingURL=Label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","FormComponentLabel","Label","children","createElement","text"],"sources":["Label.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\n\ninterface LabelProps {\n children?: React.ReactNode;\n}\n\nexport const Label = ({ children }: LabelProps) => <FormComponentLabel text={children} />;\n\nexport default Label;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAQ,kBAAkB;AAMrD,OAAO,MAAMC,KAAK,GAAGA,CAAC;EAAEC;AAAqB,CAAC,kBAAKH,KAAA,CAAAI,aAAA,CAACH,kBAAkB;EAACI,IAAI,EAAEF;AAAS,CAAE,CAAC;AAEzF,eAAeD,KAAK","ignoreList":[]}
|
package/Fields/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./FieldElement.js\";\nexport * from \"./Fields.js\";\nexport * from \"./useBind.js\";\n"],"mappings":"AAAA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { BindComponent } from "../types/index.js";
|
|
2
|
+
interface UseBindProps {
|
|
3
|
+
Bind: BindComponent;
|
|
4
|
+
}
|
|
5
|
+
export interface GetBindCallable {
|
|
6
|
+
(index?: number): BindComponent;
|
|
7
|
+
}
|
|
8
|
+
export declare function useBind({ Bind }: UseBindProps): (index?: number) => BindComponent;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import React, { useRef, cloneElement } from "react";
|
|
2
|
+
import { useForm } from "@webiny/form";
|
|
3
|
+
import { createValidators } from "../createValidators.js";
|
|
4
|
+
import { useModelField } from "../ModelFieldProvider/index.js";
|
|
5
|
+
import { createValidationContainer } from "../createValidationContainer.js";
|
|
6
|
+
const createFieldCacheKey = field => {
|
|
7
|
+
return [field.id, field.fieldId, JSON.stringify(field.validation), JSON.stringify(field.listValidation)].join(";");
|
|
8
|
+
};
|
|
9
|
+
const emptyValidators = [];
|
|
10
|
+
export function useBind({
|
|
11
|
+
Bind
|
|
12
|
+
}) {
|
|
13
|
+
const {
|
|
14
|
+
field
|
|
15
|
+
} = useModelField();
|
|
16
|
+
const memoizedBindComponents = useRef({});
|
|
17
|
+
const cacheKey = createFieldCacheKey(field);
|
|
18
|
+
const form = useForm();
|
|
19
|
+
return (index = -1) => {
|
|
20
|
+
const {
|
|
21
|
+
parentName
|
|
22
|
+
} = Bind;
|
|
23
|
+
|
|
24
|
+
// If there's a parent name assigned to the given Bind component, we need to include it in the new field "name".
|
|
25
|
+
// This allows us to have nested fields (like "object" field with nested properties)
|
|
26
|
+
const name = [parentName, field.fieldId, index >= 0 ? index : undefined].filter(v => v !== undefined).join(".");
|
|
27
|
+
const componentId = `${name};${cacheKey}`;
|
|
28
|
+
if (memoizedBindComponents.current[componentId]) {
|
|
29
|
+
return memoizedBindComponents.current[componentId];
|
|
30
|
+
}
|
|
31
|
+
const validators = createValidators(field, field.validation || emptyValidators);
|
|
32
|
+
const listValidators = createValidators(field, field.listValidation || emptyValidators);
|
|
33
|
+
const isMultipleValues = index === -1 && field.list;
|
|
34
|
+
const inputValidators = isMultipleValues ? listValidators : validators;
|
|
35
|
+
|
|
36
|
+
// We only use default values for single-value fields.
|
|
37
|
+
const defaultValueFromSettings = !isMultipleValues ? field.settings?.defaultValue : null;
|
|
38
|
+
memoizedBindComponents.current[componentId] = function UseBind(params) {
|
|
39
|
+
const {
|
|
40
|
+
name: childName,
|
|
41
|
+
validators: childValidators,
|
|
42
|
+
children,
|
|
43
|
+
defaultValue = defaultValueFromSettings
|
|
44
|
+
} = params;
|
|
45
|
+
const {
|
|
46
|
+
field
|
|
47
|
+
} = useModelField();
|
|
48
|
+
return /*#__PURE__*/React.createElement(Bind, {
|
|
49
|
+
name: childName || name,
|
|
50
|
+
validators: childValidators || inputValidators,
|
|
51
|
+
defaultValue: defaultValue ?? null,
|
|
52
|
+
context: {
|
|
53
|
+
field
|
|
54
|
+
}
|
|
55
|
+
}, bind => {
|
|
56
|
+
// Multiple-values functions below.
|
|
57
|
+
const props = {
|
|
58
|
+
...bind
|
|
59
|
+
};
|
|
60
|
+
if (field.list && index === -1) {
|
|
61
|
+
props.appendValue = (newValue, index) => {
|
|
62
|
+
const currentValue = bind.value || [];
|
|
63
|
+
const newIndex = index ?? currentValue.length;
|
|
64
|
+
bind.onChange([...currentValue.slice(0, newIndex), newValue, ...currentValue.slice(newIndex)]);
|
|
65
|
+
};
|
|
66
|
+
props.prependValue = newValue => {
|
|
67
|
+
bind.onChange([newValue, ...(bind.value || [])]);
|
|
68
|
+
};
|
|
69
|
+
props.appendValues = newValues => {
|
|
70
|
+
bind.onChange([...(bind.value || []), ...newValues]);
|
|
71
|
+
};
|
|
72
|
+
props.removeValue = index => {
|
|
73
|
+
if (index < 0) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
const value = [...bind.value.slice(0, index), ...bind.value.slice(index + 1)];
|
|
77
|
+
bind.onChange(value.length === 0 ? null : value);
|
|
78
|
+
|
|
79
|
+
// To make sure the field is still valid, we must trigger validation.
|
|
80
|
+
form.validateInput(field.fieldId);
|
|
81
|
+
};
|
|
82
|
+
props.moveValueUp = index => {
|
|
83
|
+
if (index <= 0) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
const value = [...bind.value];
|
|
87
|
+
value.splice(index, 1);
|
|
88
|
+
value.splice(index - 1, 0, bind.value[index]);
|
|
89
|
+
bind.onChange(value);
|
|
90
|
+
};
|
|
91
|
+
props.moveValueDown = index => {
|
|
92
|
+
if (index >= bind.value.length) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const value = [...bind.value];
|
|
96
|
+
value.splice(index, 1);
|
|
97
|
+
value.splice(index + 1, 0, bind.value[index]);
|
|
98
|
+
bind.onChange(value);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
return typeof children === "function" ? children(props) : /*#__PURE__*/cloneElement(children, props);
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
// We need to keep track of current field name, to support nested fields.
|
|
106
|
+
memoizedBindComponents.current[componentId].parentName = name;
|
|
107
|
+
memoizedBindComponents.current[componentId].displayName = `Bind<${name}>`;
|
|
108
|
+
memoizedBindComponents.current[componentId].ValidationContainer = createValidationContainer(name);
|
|
109
|
+
return memoizedBindComponents.current[componentId];
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
//# sourceMappingURL=useBind.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useRef","cloneElement","useForm","createValidators","useModelField","createValidationContainer","createFieldCacheKey","field","id","fieldId","JSON","stringify","validation","listValidation","join","emptyValidators","useBind","Bind","memoizedBindComponents","cacheKey","form","index","parentName","name","undefined","filter","v","componentId","current","validators","listValidators","isMultipleValues","list","inputValidators","defaultValueFromSettings","settings","defaultValue","UseBind","params","childName","childValidators","children","createElement","context","bind","props","appendValue","newValue","currentValue","value","newIndex","length","onChange","slice","prependValue","appendValues","newValues","removeValue","validateInput","moveValueUp","splice","moveValueDown","displayName","ValidationContainer"],"sources":["useBind.tsx"],"sourcesContent":["import React, { useRef, cloneElement } from \"react\";\nimport type { Validator } from \"@webiny/validation/types.js\";\nimport { useForm } from \"@webiny/form\";\nimport { createValidators } from \"~/createValidators.js\";\nimport type { BindComponent, CmsModelField } from \"~/types/index.js\";\nimport { useModelField } from \"~/ModelFieldProvider/index.js\";\nimport { createValidationContainer } from \"~/createValidationContainer.js\";\n\ninterface UseBindProps {\n Bind: BindComponent;\n}\n\ninterface UseBindParams {\n name?: string;\n validators?: Validator | Validator[];\n children?: any;\n defaultValue?: any;\n}\n\nconst createFieldCacheKey = (field: CmsModelField) => {\n return [\n field.id,\n field.fieldId,\n JSON.stringify(field.validation),\n JSON.stringify(field.listValidation)\n ].join(\";\");\n};\n\nexport interface GetBindCallable {\n (index?: number): BindComponent;\n}\n\nconst emptyValidators: Validator[] = [];\n\nexport function useBind({ Bind }: UseBindProps) {\n const { field } = useModelField();\n const memoizedBindComponents = useRef<Record<string, BindComponent>>({});\n const cacheKey = createFieldCacheKey(field);\n const form = useForm();\n\n return (index = -1) => {\n const { parentName } = Bind;\n\n // If there's a parent name assigned to the given Bind component, we need to include it in the new field \"name\".\n // This allows us to have nested fields (like \"object\" field with nested properties)\n const name = [parentName, field.fieldId, index >= 0 ? index : undefined]\n .filter(v => v !== undefined)\n .join(\".\");\n\n const componentId = `${name};${cacheKey}`;\n\n if (memoizedBindComponents.current[componentId]) {\n return memoizedBindComponents.current[componentId];\n }\n\n const validators = createValidators(field, field.validation || emptyValidators);\n const listValidators = createValidators(field, field.listValidation || emptyValidators);\n const isMultipleValues = index === -1 && field.list;\n const inputValidators = isMultipleValues ? listValidators : validators;\n\n // We only use default values for single-value fields.\n const defaultValueFromSettings = !isMultipleValues ? field.settings?.defaultValue : null;\n\n memoizedBindComponents.current[componentId] = function UseBind(params: UseBindParams) {\n const {\n name: childName,\n validators: childValidators,\n children,\n defaultValue = defaultValueFromSettings\n } = params;\n\n const { field } = useModelField();\n\n return (\n <Bind\n name={childName || name}\n validators={childValidators || inputValidators}\n defaultValue={defaultValue ?? null}\n context={{ field }}\n >\n {bind => {\n // Multiple-values functions below.\n const props = { ...bind };\n if (field.list && index === -1) {\n props.appendValue = (newValue: any, index?: number) => {\n const currentValue = bind.value || [];\n const newIndex = index ?? currentValue.length;\n\n bind.onChange([\n ...currentValue.slice(0, newIndex),\n newValue,\n ...currentValue.slice(newIndex)\n ]);\n };\n props.prependValue = (newValue: any) => {\n bind.onChange([newValue, ...(bind.value || [])]);\n };\n props.appendValues = (newValues: any[]) => {\n bind.onChange([...(bind.value || []), ...newValues]);\n };\n\n props.removeValue = (index: number) => {\n if (index < 0) {\n return;\n }\n\n const value = [\n ...bind.value.slice(0, index),\n ...bind.value.slice(index + 1)\n ];\n\n bind.onChange(value.length === 0 ? null : value);\n\n // To make sure the field is still valid, we must trigger validation.\n form.validateInput(field.fieldId);\n };\n\n props.moveValueUp = (index: number) => {\n if (index <= 0) {\n return;\n }\n\n const value = [...bind.value];\n value.splice(index, 1);\n value.splice(index - 1, 0, bind.value[index]);\n\n bind.onChange(value);\n };\n\n props.moveValueDown = (index: number) => {\n if (index >= bind.value.length) {\n return;\n }\n\n const value = [...bind.value];\n value.splice(index, 1);\n value.splice(index + 1, 0, bind.value[index]);\n\n bind.onChange(value);\n };\n }\n\n return typeof children === \"function\"\n ? children(props)\n : cloneElement(children, props);\n }}\n </Bind>\n );\n } as BindComponent;\n\n // We need to keep track of current field name, to support nested fields.\n memoizedBindComponents.current[componentId].parentName = name;\n memoizedBindComponents.current[componentId].displayName = `Bind<${name}>`;\n memoizedBindComponents.current[componentId].ValidationContainer =\n createValidationContainer(name);\n\n return memoizedBindComponents.current[componentId];\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useRenderPlugins(): import("@webiny/plugins/PluginsContainer").WithName<import("~/types/index.js").CmsModelFieldRendererPlugin>[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["plugins","useMemo","useRenderPlugins","byType"],"sources":["useRenderPlugins.ts"],"sourcesContent":["import { plugins } from \"@webiny/plugins\";\nimport { useMemo } from \"react\";\nimport type { CmsEditorFieldRendererPlugin } from \"~/types/index.js\";\n\nexport function useRenderPlugins() {\n return useMemo(\n () => plugins.byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\"),\n []\n );\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,iBAAiB;AACzC,SAASC,OAAO,QAAQ,OAAO;AAG/B,OAAO,SAASC,gBAAgBA,CAAA,EAAG;EAC/B,OAAOD,OAAO,CACV,MAAMD,OAAO,CAACG,MAAM,CAA+B,2BAA2B,CAAC,EAC/E,EACJ,CAAC;AACL","ignoreList":[]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { CmsModelField } from "../types/index.js";
|
|
3
|
+
export type ModelFieldContext = CmsModelField;
|
|
4
|
+
export declare const ModelFieldContext: React.Context<{
|
|
5
|
+
id: string;
|
|
6
|
+
type: string;
|
|
7
|
+
fieldId: import("~/types/index.js").CmsEditorFieldId;
|
|
8
|
+
storageId?: string;
|
|
9
|
+
label: string;
|
|
10
|
+
help?: string | React.ReactNode;
|
|
11
|
+
description?: string | React.ReactNode;
|
|
12
|
+
note?: string | React.ReactNode;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
validation?: (import("~/types/index.js").CmsModelFieldValidator | import("@webiny/validation/types").Validator)[];
|
|
15
|
+
listValidation?: import("~/types/index.js").CmsModelFieldValidator[];
|
|
16
|
+
list?: boolean;
|
|
17
|
+
predefinedValues?: import("~/types/index.js").CmsEditorFieldPredefinedValues;
|
|
18
|
+
settings?: import("~/types/index.js").CmsModelFieldSettings<unknown> | undefined;
|
|
19
|
+
renderer: {
|
|
20
|
+
name: string;
|
|
21
|
+
settings?: Record<string, any>;
|
|
22
|
+
} | import("~/types/index.js").CmsModelFieldRendererPlugin["renderer"]["render"];
|
|
23
|
+
tags?: string[];
|
|
24
|
+
} | undefined>;
|
|
25
|
+
export interface ModelFieldProviderProps {
|
|
26
|
+
field: CmsModelField;
|
|
27
|
+
children: React.ReactNode;
|
|
28
|
+
}
|
|
29
|
+
export declare const ModelFieldProvider: ({ field, children }: ModelFieldProviderProps) => React.JSX.Element;
|
|
30
|
+
export declare const ParentValueIndexProvider: {
|
|
31
|
+
({ children, ...props }: {
|
|
32
|
+
index: number;
|
|
33
|
+
} & {
|
|
34
|
+
children: React.ReactNode;
|
|
35
|
+
}): React.JSX.Element;
|
|
36
|
+
displayName: string;
|
|
37
|
+
};
|
|
38
|
+
export declare const useParentValueIndex: () => number;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { createGenericContext } from "@webiny/app-admin";
|
|
3
|
+
export const ModelFieldContext = /*#__PURE__*/React.createContext(undefined);
|
|
4
|
+
export const ModelFieldProvider = ({
|
|
5
|
+
field,
|
|
6
|
+
children
|
|
7
|
+
}) => {
|
|
8
|
+
return /*#__PURE__*/React.createElement(ModelFieldContext.Provider, {
|
|
9
|
+
value: field
|
|
10
|
+
}, children);
|
|
11
|
+
};
|
|
12
|
+
const {
|
|
13
|
+
Provider,
|
|
14
|
+
useHook
|
|
15
|
+
} = createGenericContext("FieldIndex");
|
|
16
|
+
export const ParentValueIndexProvider = Provider;
|
|
17
|
+
export const useParentValueIndex = () => {
|
|
18
|
+
try {
|
|
19
|
+
const context = useHook();
|
|
20
|
+
return context.index;
|
|
21
|
+
} catch {
|
|
22
|
+
return -1;
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
//# sourceMappingURL=ModelFieldContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","createGenericContext","ModelFieldContext","createContext","undefined","ModelFieldProvider","field","children","createElement","Provider","value","useHook","ParentValueIndexProvider","useParentValueIndex","context","index"],"sources":["ModelFieldContext.tsx"],"sourcesContent":["import React from \"react\";\nimport type { CmsModelField } from \"~/types/index.js\";\nimport { createGenericContext } from \"@webiny/app-admin\";\n\nexport type ModelFieldContext = CmsModelField;\n\nexport const ModelFieldContext = React.createContext<ModelFieldContext | undefined>(undefined);\n\nexport interface ModelFieldProviderProps {\n field: CmsModelField;\n children: React.ReactNode;\n}\n\nexport const ModelFieldProvider = ({ field, children }: ModelFieldProviderProps) => {\n return <ModelFieldContext.Provider value={field}>{children}</ModelFieldContext.Provider>;\n};\n\nconst { Provider, useHook } = createGenericContext<{ index: number }>(\"FieldIndex\");\n\nexport const ParentValueIndexProvider = Provider;\n\nexport const useParentValueIndex = () => {\n try {\n const context = useHook();\n return context.index;\n } catch {\n return -1;\n }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,oBAAoB,QAAQ,mBAAmB;AAIxD,OAAO,MAAMC,iBAAiB,gBAAGF,KAAK,CAACG,aAAa,CAAgCC,SAAS,CAAC;AAO9F,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAkC,CAAC,KAAK;EAChF,oBAAOP,KAAA,CAAAQ,aAAA,CAACN,iBAAiB,CAACO,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GAAEC,QAAqC,CAAC;AAC5F,CAAC;AAED,MAAM;EAAEE,QAAQ;EAAEE;AAAQ,CAAC,GAAGV,oBAAoB,CAAoB,YAAY,CAAC;AAEnF,OAAO,MAAMW,wBAAwB,GAAGH,QAAQ;AAEhD,OAAO,MAAMI,mBAAmB,GAAGA,CAAA,KAAM;EACrC,IAAI;IACA,MAAMC,OAAO,GAAGH,OAAO,CAAC,CAAC;IACzB,OAAOG,OAAO,CAACC,KAAK;EACxB,CAAC,CAAC,MAAM;IACJ,OAAO,CAAC,CAAC;EACb;AACJ,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ModelFieldContext.js\";\nexport * from \"./useModelField.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
|