more samples ( custom ctrl )

Author: Administrator

src/CascadeForms/CascadeForms.stories.tsx

@@ -6,10 +6,24 @@ import "./story.css";
 import React,{ createRef } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import CascadeForms,{ CascadeFormProps,FormActions,FormState,FormItem,OnChangeFn } from "./CascadeForms";
+import CascadeForms,{ ControlRenderProps,CascadeFormProps,FormActions,FormState,FormItem,OnChangeFn } from "./CascadeForms";
 import FORM from "./form1.json";
 
-import { Button,Checkbox, InputGroup, RadioGroup, Switch } from "@blueprintjs/core";
+import { Button,Callout,Checkbox, EditableText, InputGroup, RadioGroup, Switch } from "@blueprintjs/core";
+
+
+const CustomCtrl = (props:ControlRenderProps) => {
+	const { item,formState, onChange } = props;
+	console.log("Custom !");
+	return (
+		<div className="customCtrl">
+			<Callout intent="warning">
+				Enter some chars..
+			</Callout>
+			<EditableText value={formState[item.id]?.value} multiline={true} minLines={5} onChange={(text) => onChange(item.id,text || "") } />
+		</div>
+	);
+};
 
 const onRender = (formState:FormState,item:FormItem,onChange:OnChangeFn) => {
 	console.log("onRender",formState);
@@ -20,6 +34,8 @@ const onRender = (formState:FormState,item:FormItem,onChange:OnChangeFn) => {
 		return <Checkbox value={formState[item.id]?.value || false} label={item.title} onChange={(ev) => onChange(item.id,ev.target.checked)} />;
 	case "radio":
 		return <Switch checked={formState[item.id]?.value || false} label={item.title} onChange={(ev) => onChange(item.id,ev.target.checked)} />;
+	case "custom":
+		return <CustomCtrl formState={formState} item={item} onChange={onChange} />;
 	default:
 		return <div className="default">{item.title}</div>;
 	}

src/CascadeForms/CascadeForms.types.ts

@@ -31,6 +31,12 @@ export type OnChangeFn = (id:string,value:string) => void;
 export type FormControlRenderFn = (formState:FormState,item:FormItem,onChange:OnChangeFn) => JSX.Element;
 export type StateUpdateFn = (state:FormState) => void;
 
+export type ControlRenderProps = {
+    formState:FormState;
+    item:FormItem;
+    onChange:OnChangeFn;
+} 
+
 
 export type EntryProps = {
     item:FormItem;

src/CascadeForms/form1.json

@@ -11,6 +11,11 @@
 				"type":"text",
 				"title":"Surpise !",
 				"visible":{ "state":"agree","expect":true }
+			},
+			{
+				"id":"custom",
+				"type":"custom",
+				"title":"Custom"
 			}
 		]
 	},

src/CascadeForms/story.css

@@ -15,4 +15,8 @@ body {
 
 .formView {
     width: 50%;
+}
+
+.customCtrl {
+    color: black;
 }