Tree Form

"tree + from" combined high-level component, suitable for dynamic and complex form submission functionality.

show code

componennt

import { TreeForm } from "mui-eazy";
import { useMemo } from "react";
import useTreeConfig from "./treeConfig";
import "mui-eazy/dist/style.css";
// ----------------------------------------------------------------------
export type EventType = "Create" | "Draft" | "Update" | "Submit" | "Publish";

const transferInput = (value: any) => {
  let newValue = {};
  // ...
  // transfer logic
  // ...
  return newValue;
};

const transferResult = (result: any) => {
  let newValue = {};
  // ...
  // transfer logic
  // ...
  return newValue;
};
export default function ProductEditView() {
  const treeFromConfig = useTreeConfig();
  // handler
  const handleClick = async ({
    type,
    isSuccess,
    result,
  }: {
    type: EventType;
    isSuccess: boolean;
    result: any;
  }) => {
    if (!isSuccess) return;
    switch (type) {
      case "Draft":
        // ...
        // handler logic
        // ...
        break;
      default:
        break;
    }
  };
  const actionBtnArr = useMemo<
    {
      name: EventType;
    }[]
  >(() => {
    return [
      {
        name: "Update",
      },
      {
        name: "Submit",
      },
    ];
  }, []);
  return (
    <TreeForm
      handleClick={handleClick}
      treeConfig={treeFromConfig}
      actionBtnArr={actionBtnArr}
      value={null}
      transferInput={transferInput}
      transferResult={transferResult}
    />
  );
}

tree config

const useTreeConfig = (): TreeItemProps => {
 const rootFromConfigCreater = useFormConfigCreater_root();
 const generalFormConfigCreater = useFormConfigCreater_general();
 return useMemo(() => {
  return {
   depth: 0,
   label: "Deal Basics",
   active: true,
   isCurrent: true,
   formConfig: rootFromConfigCreater(),
   sections: [
    {
     depth: 0,
     label: "Business Details",
     name: "businessDetails",
     active: false,
     type: "object",
     sections: [
      {
       depth: 2,
       label: "Executive Summary",
       name: "executive_summary",
       active: false,
       formConfig: generalFormConfigCreater(),
      },
    ...
    },
    {
     depth: 0,
     label: "Market & Competition",
     name: "marketCompetition",
     active: false,
     type: "object",
     sections: [
      {
       depth: 2,
       label: "Custormers",
       name: "custormers",
       active: false,
       formConfig: generalFormConfigCreater(),
      },
      ...
     ],
    },
    {
     depth: 0,
     label: "Media",
     name: "media",
     active: false,
     formConfig: generalFormConfigCreater(),
    },
    {
     depth: 0,
     label: "FAQ",
     name: "faq",
     active: false,
     formConfig: generalFormConfigCreater(),
    },
   ],
  };
 }, []);
};

form config

export const useFormConfigCreater_general = (
  props: { id?: string } = {}
): (() => FormConfig) => {
  return () => {
    return {
      title: {
        fieldConfig: {},
      },
      sub_title: {
        fieldConfig: {},
      },
      description: {},
      content: {
        type: "editer",
      },
      video: {},
    };
  };
};

Props

tip

• Type: any, can be customized as needed.
• Default value:
  • Not specified: optional.
  • Specified as "require": mandatory.
• Type link: Click to navigate to the details below.

Option	Type	Default	Description
treeConfig	TreeConfig	required	Driving the display of data for tree+form.
handleClick	HandleClick	required	click event handler
actionBtnArr	ActionBtnArr	required	Whether to sync the selected converter across all code blocks.
value	any	null	The value to be edited. Note that you should pass null or not pass it when creating, and pass it when editing.
transferInput	(value)=>value		Translate the target data. into form results.
transferResult	(value)=>value		Translate the form results into target data.

Type

TreeConfig

export interface TreeItemProps {
  isError?: boolean;
  formConfig?: FormConfig | null;
  formCreater?: () => TreeItemProps | null;
  id?: string;
  parentId?: string;
  uuid?: string;
  active: boolean;
  isCurrent?: boolean;
  depth: number;
  label: string;
  name?: string;
  sx?: SxProps<Theme>;
  isAdd?: boolean;
  type?: "array" | "object";
  onAdd?: (listArr: TreeItemProps[]) => void;
  onDelete?: (id: string, listArr: TreeItemProps[]) => void;
  children?: React.ReactNode | undefined;
  sections?: TreeItemProps[];
  judeShow?: () => boolean;
}

HandleClick

  ({ type, isSuccess, result, }: {
    type: any;
    isSuccess: boolean;
    result: any;
  }) => void

ActionBtnArr

{
  name: string;
}
[];