feat: add more examples

headless-cms/conditional-fields/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@demo/conditional-fields",
+	"main": "src/index.tsx",
+	"version": "1.0.0",
+	"keywords": [
+		"webiny-extension",
+		"webiny-extension-type:admin"
+	],
+	"dependencies": {
+		"@webiny/app-headless-cms": "0.0.0",
+		"@webiny/form": "0.0.0",
+		"react": "18.2.0"
+	}
+}

headless-cms/conditional-fields/src/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
+import { useForm } from "@webiny/form";
+
+const { FieldElement } = ContentEntryEditorConfig;
+
+type VideoInputType = "url" | "upload" | undefined;
+
+const ConditionalFields = FieldElement.createDecorator(Original => {
+    return function ConditionalRender(props) {
+        const form = useForm();
+        const videoInputType = form.getValue("videoType") as VideoInputType;
+
+        const field = props.field;
+
+        if (field.fieldId === "videoUrl" && videoInputType !== "url") {
+            return null;
+        }
+
+        if (field.fieldId === "videoUpload" && videoInputType !== "upload") {
+            return null;
+        }
+
+        return <Original {...props} />;
+    };
+});
+
+export const Extension = () => {
+    return (
+        <>
+            <ContentEntryEditorConfig>
+                <ConditionalFields modelIds={["conditionalFields"]} />
+            </ContentEntryEditorConfig>
+        </>
+    );
+};

headless-cms/conditional-fields/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}

headless-cms/conditional-renderer/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@demo/conditional-renderer",
+	"main": "src/index.tsx",
+	"version": "1.0.0",
+	"keywords": [
+		"webiny-extension",
+		"webiny-extension-type:admin"
+	],
+	"dependencies": {
+		"@webiny/app-headless-cms": "0.0.0",
+		"@webiny/form": "0.0.0",
+		"react": "18.2.0"
+	}
+}

headless-cms/conditional-renderer/src/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
+import { useForm } from "@webiny/form";
+
+const { FieldElement } = ContentEntryEditorConfig;
+
+type VideoInputType = "url" | "upload" | undefined;
+
+const ConditionalRenderer = FieldElement.createDecorator(Original => {
+    return function ConditionalRender(props) {
+        const form = useForm();
+        const videoInputType = form.getValue("videoType") as VideoInputType;
+
+        const field = props.field;
+
+        if (field.fieldId === "video") {
+            const renderer = videoInputType === "url" ? "text-input" : "file-input";
+
+            return (
+                <Original
+                    {...props}
+                    field={{
+                        ...field,
+                        renderer: {
+                            name: renderer
+                        }
+                    }}
+                />
+            );
+        }
+
+        return <Original {...props} />;
+    };
+});
+
+export const Extension = () => {
+    return (
+        <>
+            <ContentEntryEditorConfig>
+                <ConditionalRenderer modelIds={["conditionalRenderer"]} />
+            </ContentEntryEditorConfig>
+        </>
+    );
+};

headless-cms/conditional-renderer/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}

headless-cms/conditional-validation/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@demo/conditional-validation",
+	"main": "src/index.tsx",
+	"version": "1.0.0",
+	"keywords": [
+		"webiny-extension",
+		"webiny-extension-type:admin"
+	],
+	"dependencies": {
+		"@webiny/app-headless-cms": "0.0.0",
+		"@webiny/form": "0.0.0",
+		"react": "18.2.0"
+	}
+}

headless-cms/conditional-validation/src/index.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
+import { useForm } from "@webiny/form";
+
+const { FieldElement } = ContentEntryEditorConfig;
+
+const validators = {
+    low: {
+        helpText: "Enter value between 0 and 99.",
+        validators: [
+            {
+                name: "lte",
+                message: "Value is too high! Enter value lower than 100.",
+                settings: {
+                    value: 99
+                }
+            }
+        ]
+    },
+    medium: {
+        helpText: "Enter value between 100 and 500.",
+        validators: [
+            {
+                name: "gte",
+                message: "Value is too low! Enter value between 100 and 500.",
+                settings: {
+                    value: 100
+                }
+            },
+            {
+                name: "lte",
+                message: "Value is too high! Enter value between 100 and 500.",
+                settings: {
+                    value: 500
+                }
+            }
+        ]
+    },
+    high: {
+        helpText: "Enter value above 500.",
+        validators: [
+            {
+                name: "gte",
+                message: "Value is too low! Enter value above 500.",
+                settings: {
+                    value: 500
+                }
+            }
+        ]
+    }
+};
+
+type PricingClassValue = "low" | "medium" | "high" | undefined;
+
+const ConditionalValidation = FieldElement.createDecorator(Original => {
+    return function ConditionalRender(props) {
+        const form = useForm();
+        const pricingClass = form.getValue("pricingClass") as PricingClassValue;
+
+        const field = props.field;
+        if (field.fieldId === "price" && pricingClass !== undefined) {
+            return (
+                <Original
+                    {...props}
+                    field={{
+                        ...field,
+                        helpText: validators[pricingClass].helpText,
+                        validation: validators[pricingClass].validators
+                    }}
+                />
+            );
+        }
+
+        return <Original {...props} />;
+    };
+});
+
+export const Extension = () => {
+    return (
+        <>
+            <ContentEntryEditorConfig>
+                <ConditionalValidation modelIds={["conditionalValidation"]} />
+            </ContentEntryEditorConfig>
+        </>
+    );
+};

headless-cms/conditional-validation/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}