welp, some extensions

Author: Administrator

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4bones/react-cascade-forms",
-  "version": "1.0",
+  "version": "1.1",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "files": [
@@ -43,6 +43,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@blueprintjs/core": "^4.13.0",
+    "@blueprintjs/select": "^4.8.12",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-image": "^3.0.1",
     "@rollup/plugin-node-resolve": "^11.2.1",

src/CascadeForms/CascadeForms.stories.tsx

@@ -1,6 +1,7 @@
 // Generated with util/create-component.js
 import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "@blueprintjs/core/lib/css/blueprint.css";
+import "@blueprintjs/select/lib/css/blueprint-select.css";
 import "./story.css";
 
 import React,{ createRef } from "react";
@@ -24,17 +25,30 @@ const CustomCtrl = (props:ControlRenderProps) => {
 	);
 };
 
+const PayloadTest = (props:ControlRenderProps) => {
+	const { item,formState, onChange } = props;
+	const { payload } = item;
+	return (
+		<select value={formState[item.id]?.value || 1} onChange={(ev) => onChange(item.id,ev.target.value)}>
+			{payload.map(({ value,label })=>{
+				return <option key={label} value={value}>{label}</option>;
+			})}
+		</select>
+	);
+};
+
 const onRender = (formState:FormState,item:FormItem,onChange:OnChangeFn) => {
-	console.log("onRender",formState);
 	switch ( item.type ) {
 	case "input":
 		return <InputGroup intent={formState[item.id]?.state ? "danger" : "primary"} value={formState[item.id]?.value || ""} placeholder={item.title} onChange={(ev) => onChange(item.id,ev.target.value)} />;
 	case "checkbox":
-		return <Checkbox value={formState[item.id]?.value || false} label={item.title} onChange={(ev) => onChange(item.id,ev.target.checked)} />;
+		return <Checkbox value={formState[item.id]?.value} 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)} />;
+		return <Switch checked={formState[item.id]?.value} label={item.title} onChange={(ev) => onChange(item.id,ev.target.checked)} />;
 	case "custom":
 		return <CustomCtrl formState={formState} item={item} onChange={onChange} />;
+	case "select":
+		return <PayloadTest formState={formState} item={item} onChange={onChange} />;
 	default:
 		return <div className="default">{item.title}</div>;
 	}

src/CascadeForms/CascadeForms.tsx

@@ -1,6 +1,6 @@
 import React,{ useEffect,useImperativeHandle,useState } from "react";
 import Validator,{ ValidationError } from "fastest-validator";
-import { FormActions,FormItem,FormState,EntryProps, RenderProps,CascadeFormProps } from "./CascadeForms.types";
+import { FormActions,FormItem,FormState,ControlItemProps, RenderProps,CascadeFormProps } from "./CascadeForms.types";
 
 export * from "./CascadeForms.types";
 
@@ -14,7 +14,7 @@ const isVisible = (item:FormItem,formState:FormState) => {
 };
 
 
-const Entry : React.FC<EntryProps> = ({ item,formState,onUpdate,onRender }) => {
+const ControlItem : React.FC<ControlItemProps> = ({ item,formState,onUpdate,onRender }) => {
 	const [state,setState] = useState(formState);
 
 	const onChange = (id:string,value:string) => {
@@ -54,7 +54,7 @@ const Render = ({ parent, items,formState,onUpdate,onRender } : RenderProps) =>
 			{items.filter(entry => isVisible(entry,formState)).map((entry:FormItem,idx:number) => {
 				return ( 
 					<div className={entry.className} key={`render_${idx}_${entry.id}`}>
-						<Entry key={`entry_${idx}_${entry.id}`} onRender={onRender} item={entry} formState={formState} onUpdate={onUpdate} />
+						<ControlItem key={`entry_${idx}_${entry.id}`} onRender={onRender} item={entry} formState={formState} onUpdate={onUpdate} />
 						{entry.items?.length && <Render parent={entry} formState={formState} items={entry.items} onRender={onRender} onUpdate={onUpdate} />}
 					</div>
 				);

src/CascadeForms/CascadeForms.types.ts

@@ -38,7 +38,7 @@ export type ControlRenderProps = {
 } 
 
 
-export type EntryProps = {
+export type ControlItemProps = {
     item:FormItem;
     formState:FormState;
     onRender:FormControlRenderFn;
@@ -47,12 +47,12 @@ export type EntryProps = {
 
 export type CascadeFormProps = {
     form:FormItems;
-} & Omit<EntryProps,"item">
+} & Omit<ControlItemProps,"item">
 
 export type RenderProps = {
     items:FormItems;
     parent?:FormItem;
-} & Omit<EntryProps,"item">
+} & Omit<ControlItemProps,"item">
 
 export type FormActions = {
     getState:() => FormState;

src/CascadeForms/form1.json

@@ -31,6 +31,34 @@
 				"type":"input",
 				"validator":{ "type":"string","min":2,"max":5 }
 			},
+			{
+				"id":"select",
+				"title":"Payload test",
+				"type":"select",
+				"payload":[
+					{"value":1,"label":"The One"},
+					{"value":2,"label":"Two.."},
+					{"value":3,"label":"Ten !"}
+				]
+			},
+			{
+				"id":"select1",
+				"className":"select-1",
+				"title":"Selected one",
+				"visible":{ "state":"select","expect":"1" }
+			},
+			{
+				"id":"select2",
+				"className":"select-2",
+				"title":"Selected Two",
+				"visible":{ "state":"select","expect":"2" }
+			},
+			{
+				"id":"select3",
+				"className":"select-3",
+				"title":"Selected TEN !",
+				"visible":{ "state":"select","expect":"3" }
+			},
 			{
 				"title":"More details",
 				"type":"checkbox",
@@ -41,7 +69,6 @@
 						"type":"input",
 						"id":"first_name",
 						"visible":{ "state":"details","expect":false },
-
 						"items":[
 							{
 								"title":"More opts...",

src/CascadeForms/story.css

@@ -19,4 +19,19 @@ body {
 
 .customCtrl {
     color: black;
-}
+}
+
+.select-1 {
+    font-size: 24px;
+}
+
+.select-2 {
+    font-size: 14px;
+    background-color: green;
+}
+
+
+.select-3 {
+    font-size: 16px;
+    background-color: yellow;
+}