clean up

Author: Administrator

package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
+    "@blueprintjs/core": "^4.13.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-image": "^3.0.1",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -58,7 +59,6 @@
     "@typescript-eslint/parser": "^5.41.0",
     "babel-loader": "^8.2.2",
     "babel-preset-react-app": "^10.0.0",
-    "clsx": "^1.2.1",
     "css-loader": "^6.7.1",
     "eslint": "^8.26.0",
     "eslint-plugin-react": "^7.31.10",
@@ -79,7 +79,6 @@
     "webpack": "^5.74.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^4.13.0",
     "fastest-validator": "^1.16.0"
   }
 }

src/CascadeForms/CascadeForms.stories.tsx

@@ -5,7 +5,6 @@ import "./story.css";
 
 import React,{ createRef } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import _ from "lodash";
 
 import CascadeForms,{ CascadeFormProps,FormActions,FormState,FormItem,OnChangeFn } from "./CascadeForms";
 import FORM from "./form1.json";
@@ -30,10 +29,7 @@ const onRender = (formState:FormState,item:FormItem,onChange:OnChangeFn) => {
 const CascadeFormsTest = (props:CascadeFormProps) => {
 	const st = createRef<FormActions>();
 	const [formState,setFormState] = React.useState<FormState>({
-		color:{ value:false },
-		gender:{ value:true },
-		male:{ value:true },
-		accept:{ value:true }
+		...props.formState
 	});
 
 	const onUpdate = (state:any) => {
@@ -59,6 +55,11 @@ export default {
 	title: "Demo",
 	component:CascadeFormsTest,
 	argTypes:{
+		formState:{
+			details:{
+				value:true
+			}
+		},
 		form:{
 			table:{
 				disable:true

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,OnChangeFn, RenderProps,CascadeFormProps } from "./CascadeForms.types";
+import { FormActions,FormItem,FormState,EntryProps, RenderProps,CascadeFormProps } from "./CascadeForms.types";
 
 export * from "./CascadeForms.types";
 
@@ -26,9 +26,7 @@ const Entry : React.FC<EntryProps> = ({ item,formState,onUpdate,onRender }) => {
 			const res = check({ [item.id]:value }) as ValidationError[];
 			if ( res.length )
 				err = res.map((e) => e.message).join(",");
-			console.log("VALIDATIOM",res);
 		}
-		console.log({ [id]:value,state });
 		setState({ ...formState,
 			[id]:{
 				value,
@@ -71,7 +69,6 @@ const CascadeForms = React.forwardRef<FormActions,CascadeFormProps>(({ form,form
 	const getState = () => {
 		let res = {};
 		const iterate = (item:FormItem) => {		
-			console.log("Processing",item?.id);
 			if ( isVisible(item,formState) ) {
 				res = {
 					...res,
@@ -85,7 +82,6 @@ const CascadeForms = React.forwardRef<FormActions,CascadeFormProps>(({ form,form
 				iterate(item);
 			});            
 		};
-		console.log("Gettting state",formState);
 		form.forEach(iterate);
 		return Object.entries(res).reduce((agg,[key,val])=>{
 			if ( !val )
@@ -107,16 +103,5 @@ const CascadeForms = React.forwardRef<FormActions,CascadeFormProps>(({ form,form
 });
 
 CascadeForms.displayName = "CascadeForms";
-/*
-function DynaForm<T>(props:CascadeFormProps) {
-	const { form,formState,onRender, onUpdate } = props;    
-	const view = React.useMemo(()=>{
-		if ( !form?.length )
-			return <div>empty</div>;
-		return <Render formState={formState} items={form} onUpdate={onUpdate} onRender={onRender} />;
-	},[form,formState]);
-	return <div>{view}</div>;
-}
-*/
 
 export default CascadeForms;

src/CascadeForms/CascadeForms.types.ts

@@ -12,9 +12,12 @@ type FormValue = {
 
 export type FormState = Record<string | number,FormValue>;
 
+export type FormPayload = any;
+
 export type FormItem = {
     id:string;
     type:string;
+    payload?:FormPayload;
     validator?:ValidationRuleObject;
     className?:string;
     title?:string;

src/CascadeForms/form1.json

@@ -24,7 +24,7 @@
 				"id":"name",
 				"title":"Name",
 				"type":"input",
-				"validator":{ "type":"string","max":5 }
+				"validator":{ "type":"string","min":2,"max":5 }
 			},
 			{
 				"title":"More details",

src/CascadeForms/story.css

@@ -11,4 +11,8 @@ body {
 .rowForm {
     display: flex;
     flex-direction: row;
+}
+
+.formView {
+    width: 50%;
 }