impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.2

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/context/viewsListContext.tsx

@@ -1,270 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { klona } from "klona/json"
-import { get } from "lodash-es"
-import { FC, ReactNode, createContext, useCallback, useMemo } from "react"
-import { useDispatch, useSelector } from "react-redux"
-import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
-import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
-import { RootState } from "@/store"
-import { newGenerateChildrenComponentNode } from "@/utils/generators/generateComponentNode"
-import { BasicContainerConfig } from "@/widgetLibrary/BasicContainer/BasicContainer"
-import { ViewItemShape } from "../interface"
-import {
-  generateNewViewItem,
-  generateViewItemId,
-} from "../utils/generateNewOptions"
-import { ComponentMapNode } from "@/utils/generators/interface"
-
-interface ProviderProps {
-  viewsList: ViewItemShape[]
-  childrenSetter: PanelFieldConfig[]
-  widgetDisplayName: string
-  attrPath: string
-  componentNode: ComponentMapNode
-  handleUpdateDsl: (attrPath: string, value: any) => void
-  handleUpdateMultiAttrDSL?: (updateSlice: Record<string, any>) => void
-  handleUpdateExecutionResult?: (
-    displayName: string,
-    updateSlice: Record<string, any>,
-  ) => void
-  handleUpdateOtherMultiAttrDSL?: (
-    displayName: string,
-    updateSlice: Record<string, any>,
-  ) => void
-  children: ReactNode
-}
-
-interface Inject extends Omit<ProviderProps, "children"> {
-  currentViewIndex: number
-  handleDeleteOptionItem: (index: number) => void
-  handleCopyOptionItem: (index: number) => void
-  handleUpdateCurrentViewIndex: (index: number) => void
-  handleMoveOptionItem: (dragIndex: number, hoverIndex: number) => void
-}
-
-export const ViewListSetterContext = createContext<Inject>({} as Inject)
-
-export const ViewListSetterProvider: FC<ProviderProps> = (props) => {
-  const {
-    viewsList,
-    attrPath,
-    widgetDisplayName,
-    handleUpdateMultiAttrDSL,
-    handleUpdateExecutionResult,
-    componentNode,
-  } = props
-  const dispatch = useDispatch()
-  const executionResult = useSelector(getExecutionResult)
-
-  const targetComponentProps = useSelector<RootState, Record<string, any>>(
-    (rootState) => {
-      const executionTree = getExecutionResult(rootState)
-      return get(executionTree, widgetDisplayName, {})
-    },
-  )
- 
-  const allViews = useMemo(() => {
-    return get(
-      executionResult,
-      `${widgetDisplayName}.${attrPath}`,
-      [],
-    ) as ViewItemShape[]
-  }, [attrPath, executionResult, widgetDisplayName])
-
-  const linkWidgetDisplayName = useMemo(() => {
-    return get(targetComponentProps, "linkWidgetDisplayName", "") as string
-  }, [targetComponentProps])
-
-  const currentViewIndex = useMemo(() => {
-    return get(executionResult, `${widgetDisplayName}.currentIndex`)
-  }, [executionResult, widgetDisplayName])
-
-  const allViewsKeys = useMemo(() => {
-    return allViews.map((view) => view.key)
-  }, [allViews])
-
-  const handleDeleteOptionItem = useCallback(
-    (index: number) => {
-      if (viewsList.length <= 1) return
-      const updatedArray = viewsList.filter(
-        (optionItem: Record<string, any>, i: number) => {
-          return i !== index
-        },
-      )
-
-      const currentChildrenNodeDisplayName = componentNode.childrenNode[index]
-
-      const updateSlice = {
-        [attrPath]: updatedArray,
-        currentIndex: 0,
-        currentKey: allViewsKeys[0],
-      }
-
-      if (currentViewIndex !== index) {
-        const oldCurrentViewKey = viewsList[currentViewIndex].key
-        const newCurrentViewIndex = updatedArray.findIndex(
-          (item) => item.key === oldCurrentViewKey,
-        )
-        if (newCurrentViewIndex !== -1) {
-          updateSlice.currentIndex = newCurrentViewIndex
-          updateSlice.currentKey = oldCurrentViewKey
-        }
-      }
-
-      handleUpdateMultiAttrDSL?.(updateSlice)
-      dispatch(
-        componentsActions.deleteComponentNodeReducer({
-          displayNames: [currentChildrenNodeDisplayName],
-        }),
-      )
-    },
-    [
-      allViewsKeys,
-      attrPath,
-      componentNode.childrenNode,
-      currentViewIndex,
-      dispatch,
-      handleUpdateMultiAttrDSL,
-      viewsList,
-    ],
-  )
-
-  const handleCopyOptionItem = useCallback(
-    (index: number) => {
-      let targetOptionItem = viewsList.find(
-        (optionItem: Record<string, any>, i: number) => {
-          return i === index
-        },
-      )
-      if (!targetOptionItem) return
-      const newChildrenNodes = newGenerateChildrenComponentNode(
-        BasicContainerConfig,
-        componentNode.displayName,
-      )
-      const newItem = generateNewViewItem(allViewsKeys)
-      targetOptionItem = {
-        ...targetOptionItem,
-        key: newItem.key,
-        id: generateViewItemId(),
-      }
-      const updatedArray = [...viewsList, targetOptionItem]
-      handleUpdateMultiAttrDSL?.({
-        [attrPath]: updatedArray,
-      })
-      dispatch(componentsActions.addComponentReducer([newChildrenNodes]))
-    },
-    [
-      allViewsKeys,
-      attrPath,
-      componentNode.displayName,
-      dispatch,
-      handleUpdateMultiAttrDSL,
-      viewsList,
-    ],
-  )
-
-  const handleUpdateCurrentViewIndex = useCallback(
-    (index: number) => {
-      if (index > viewsList.length || index < 0) return
-      const currentViewKey = allViews[index].key
-      handleUpdateExecutionResult?.(widgetDisplayName, {
-        currentIndex: index,
-        currentKey: currentViewKey || index,
-      })
-      if (linkWidgetDisplayName) {
-        if (Array.isArray(linkWidgetDisplayName)) {
-          linkWidgetDisplayName.forEach((linkDisplayName) => {
-            handleUpdateExecutionResult?.(linkDisplayName, {
-              currentIndex: index,
-              currentKey: currentViewKey || index,
-            })
-          })
-        } else {
-          handleUpdateExecutionResult?.(linkWidgetDisplayName, {
-            currentIndex: index,
-            currentKey: currentViewKey || index,
-          })
-          const linkWidgetLinkedDisplayName = get(
-            executionResult,
-            `${linkWidgetDisplayName}.linkWidgetDisplayName`,
-            [],
-          )
-          linkWidgetLinkedDisplayName &&
-            Array.isArray(linkWidgetLinkedDisplayName) &&
-            linkWidgetLinkedDisplayName.forEach((name) => {
-              name !== widgetDisplayName &&
-                handleUpdateExecutionResult?.(name, {
-                  currentIndex: index,
-                  currentKey: currentViewKey || index,
-                })
-            })
-        }
-      }
-    },
-    [
-      allViews,
-      executionResult,
-      handleUpdateExecutionResult,
-      linkWidgetDisplayName,
-      viewsList.length,
-      widgetDisplayName,
-    ],
-  )
-
-  const handleMoveOptionItem = useCallback(
-    (dragIndex: number, hoverIndex: number) => {
-      const dragOptionItem = viewsList[dragIndex]
-      const currentSelected = viewsList[currentViewIndex]
-      const newComponentNode = klona(componentNode.childrenNode)
-      ;[newComponentNode[dragIndex], newComponentNode[hoverIndex]] = [
-        newComponentNode[hoverIndex],
-        newComponentNode[dragIndex],
-      ]
-      const newViews = [...viewsList]
-      newViews.splice(dragIndex, 1)
-      newViews.splice(hoverIndex, 0, dragOptionItem)
-      const newSelectedIndex = newViews.findIndex(
-        (view) => view.key === currentSelected.key,
-      )
-      const newSelectedKey = newViews[newSelectedIndex].key
-      handleUpdateMultiAttrDSL?.({
-        [attrPath]: newViews,
-        currentIndex: newSelectedIndex,
-        currentKey: newSelectedKey,
-      })
-      dispatch(
-        componentsActions.sortComponentNodeChildrenReducer({
-          parentDisplayName: componentNode.displayName,
-          newChildrenNode: newComponentNode,
-        }),
-      )
-    },
-    [
-      attrPath,
-      componentNode.childrenNode,
-      componentNode.displayName,
-      currentViewIndex,
-      dispatch,
-      handleUpdateMultiAttrDSL,
-      viewsList,
-    ],
-  )
-  const value = {
-    ...props,
-    handleDeleteOptionItem,
-    handleCopyOptionItem,
-    currentViewIndex,
-    handleUpdateCurrentViewIndex,
-    handleMoveOptionItem,
-  }
-
-  return (
-    <ViewListSetterContext.Provider value={value}>
-      {props.children}
-    </ViewListSetterContext.Provider>
-  )
-}
-
-ViewListSetterProvider.displayName = "OptionListSetterProvider"

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/dragIconAndLabel.tsx

@@ -1,86 +0,0 @@
-import { get } from "lodash-es"
-import { FC, MouseEvent, useCallback, useContext, useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { useSelector } from "react-redux"
-import { ViewListSetterContext } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/context/viewsListContext"
-import {
-  DragIconAndLabelProps,
-  ViewItemShape,
-} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface"
-import {
-  applyOptionStyle,
-  labelAndDragIconWrapperStyle,
-  labelWrapperStyle,
-} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/style"
-import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
-import { Trigger } from "@/utils/trigger"
-
-interface optionIconProps {
-  isSelected: boolean
-  onClick: (e: MouseEvent<HTMLDivElement>) => void
-}
-
-const OptionIcon: FC<optionIconProps> = ({ isSelected, onClick }) => {
-  return <div css={applyOptionStyle(isSelected)} onClick={onClick} />
-}
-
-export const DragIconAndLabel: FC<DragIconAndLabelProps> = (props) => {
-  const { index, label, isSelected } = props
-  const { widgetDisplayName, attrPath, handleUpdateCurrentViewIndex } =
-    useContext(ViewListSetterContext)
-
-  const { t } = useTranslation()
-  const executionResult = useSelector(getExecutionResult)
-
-  const currentViews = useMemo(() => {
-    return get(executionResult, `${widgetDisplayName}.${attrPath}.${index}`, {})
-  }, [attrPath, executionResult, index, widgetDisplayName])
-
-  const otherViewKeys = useMemo(() => {
-    const allViews = get(
-      executionResult,
-      `${widgetDisplayName}.${attrPath}`,
-      [],
-    ) as ViewItemShape[]
-    return allViews
-      .map((views, i) => views.key || i)
-      .filter((_key, i) => i != index)
-  }, [attrPath, executionResult, index, widgetDisplayName])
-
-  const isDuplicationKey = useMemo(() => {
-    return otherViewKeys.some((viewKey) => viewKey == currentViews.key)
-  }, [otherViewKeys, currentViews])
-
-  const handleChangeCurrentView = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
-      e.stopPropagation()
-      handleUpdateCurrentViewIndex(index)
-    },
-    [handleUpdateCurrentViewIndex, index],
-  )
-
-  return (
-    <span css={labelAndDragIconWrapperStyle}>
-      {/* <DragPointIcon css={moveIconStyle} id="dragIcon" /> */}
-      <div css={labelWrapperStyle}>
-        <OptionIcon isSelected={isSelected} onClick={handleChangeCurrentView} />
-        <span style={{ maxWidth: "147px" }}>{label}</span>
-        {isDuplicationKey && (
-          <Trigger
-            trigger="hover"
-            showArrow={false}
-            position="bottom"
-            content={`${t("widget.container.key_duplicated")}`}
-          >
-            <div>Warning Icon</div>
-            {/* <WarningCircleIcon
-              color={globalColor(`--${IMPAKTAPPSPrefix}-orange-03`)}
-            /> */}
-          </Trigger>
-        )}
-      </div>
-    </span>
-  )
-}
-
-DragIconAndLabel.displayName = "DragIconAndLabel"

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/header.tsx

@@ -1,28 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import {
-  HeaderLabelStyle,
-  HeaderWrapperStyle,
-} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/style"
-import { Button } from "@mui/material"
-
-export interface HeaderProps {
-  labelName: string
-  addAction: () => void
-  hasAddAction: boolean
-}
-
-export const Header: FC<HeaderProps> = (props) => {
-  const { t } = useTranslation()
-  const { labelName, addAction, hasAddAction } = props
-  return (
-    <div css={HeaderWrapperStyle}>
-      <span css={HeaderLabelStyle}>{labelName}</span>
-      {hasAddAction && (
-        <Button onClick={addAction}>
-         {t("editor.inspect.setter_content.column_setter.new")} 
-        </Button>
-      )}
-    </div>
-  )
-}

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/index.tsx

@@ -1,238 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { get } from "lodash-es";
-import { FC, memo, useCallback, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector, useStore } from "react-redux";
-import { ViewListSetterProvider } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/context/viewsListContext";
-import { Header } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/header";
-import {
-  ViewItemShape,
-  ViewSetterProps,
-} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface";
-import { ListBody } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/listBody";
-import {
-  setterPublicWrapper,
-  viewSetterWrapperStyle,
-} from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/style";
-import { generateNewViewItem } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/utils/generateNewOptions";
-import {
-  getComponentMap,
-  searchComponentFromMap,
-} from "@/redux/currentApp/components/componentsSelector";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
-import  { RootState } from "@/store";
-import { newGenerateChildrenComponentNode } from "@/utils/generators/generateComponentNode";
-import { BasicContainerConfig } from "@/widgetLibrary/BasicContainer/BasicContainer";
-import { ComponentMapNode } from "@/utils/generators/interface";
-
-const ViewsSetter: FC<ViewSetterProps> = memo((props: ViewSetterProps) => {
-  const {
-    value,
-    attrName,
-    widgetDisplayName,
-    childrenSetter,
-    handleUpdateExecutionResult,
-    handleUpdateMultiAttrDSL,
-    handleUpdateOtherMultiAttrDSL,
-    componentNode,
-  } = props;
-  const { t } = useTranslation();
-  const executionResult = useSelector(getExecutionResult);
-  const dispatch = useDispatch();
- const store = useStore();
-  const targetComponentProps = useSelector<RootState, Record<string, any>>(
-    (rootState) => {
-      const executionTree = getExecutionResult(rootState);
-      return get(executionTree, widgetDisplayName, {});
-    }
-  );
-
-  const linkWidgetDisplayName = useMemo(() => {
-    return get(targetComponentProps, "linkWidgetDisplayName", "") as string;
-  }, [targetComponentProps]);
-
-  const allViews = useMemo(() => {
-    return get(
-      executionResult,
-      `${widgetDisplayName}.${attrName}`,
-      []
-    ) as ViewItemShape[];
-  }, [attrName, executionResult, widgetDisplayName]);
-
-  const allViewsKeys = useMemo(() => {
-    return value.map((view) => view.key);
-  }, [value]);
-
-  const updateMultiAttrDSL = useCallback(
-    (updateSlice: Record<string, unknown>) => {
-      handleUpdateMultiAttrDSL?.(updateSlice);
-      if (linkWidgetDisplayName) {
-        if (Array.isArray(linkWidgetDisplayName)) {
-          linkWidgetDisplayName.forEach((linkDisplayName) => {
-            handleUpdateOtherMultiAttrDSL?.(linkDisplayName, updateSlice);
-          });
-        } else {
-          handleUpdateOtherMultiAttrDSL?.(linkWidgetDisplayName, updateSlice);
-          const linkWidgetLinkedDisplayName = get(
-            executionResult,
-            `${linkWidgetDisplayName}.linkWidgetDisplayName`,
-            []
-          );
-          linkWidgetLinkedDisplayName &&
-            Array.isArray(linkWidgetLinkedDisplayName) &&
-            linkWidgetLinkedDisplayName.forEach((name) => {
-              name !== widgetDisplayName &&
-                handleUpdateOtherMultiAttrDSL?.(name, updateSlice);
-            });
-        }
-      }
-    },
-    [
-      executionResult,
-      handleUpdateMultiAttrDSL,
-      handleUpdateOtherMultiAttrDSL,
-      linkWidgetDisplayName,
-      widgetDisplayName,
-    ]
-  );
-
-  const handleUpdateDsl = useCallback(
-    (attrName: string, value: any) => {
-      handleUpdateMultiAttrDSL?.({
-        [attrName]: value,
-      });
-      if (linkWidgetDisplayName) {
-        if (Array.isArray(linkWidgetDisplayName)) {
-          linkWidgetDisplayName.forEach((linkDisplayName) => {
-            handleUpdateOtherMultiAttrDSL?.(linkDisplayName, {
-              [attrName]: value,
-            });
-          });
-        } else {
-          handleUpdateOtherMultiAttrDSL?.(linkWidgetDisplayName, {
-            [attrName]: value,
-          });
-          const linkWidgetLinkedDisplayName = get(
-            executionResult,
-            `${linkWidgetDisplayName}.linkWidgetDisplayName`,
-            []
-          );
-          linkWidgetLinkedDisplayName &&
-            Array.isArray(linkWidgetLinkedDisplayName) &&
-            linkWidgetLinkedDisplayName.forEach((name) => {
-              name !== widgetDisplayName &&
-                handleUpdateOtherMultiAttrDSL?.(name, {
-                  [attrName]: value,
-                });
-            });
-        }
-      }
-    },
-    [
-      handleUpdateMultiAttrDSL,
-      linkWidgetDisplayName,
-      handleUpdateOtherMultiAttrDSL,
-      executionResult,
-      widgetDisplayName,
-    ]
-  );
-
-  const _componentNode = useMemo(() => {
-    if (
-      componentNode.type === "CONTAINER_WIDGET" ||
-      componentNode.type === "GridCONTAINER_WIDGET"
-    ) {
-      return componentNode;
-    }
-    const finalNode = searchComponentFromMap(
-      getComponentMap(store.getState() as RootState),
-      linkWidgetDisplayName
-    );
-    if (
-      finalNode?.type === "CONTAINER_WIDGET" ||
-      componentNode.type === "GridCONTAINER_WIDGET"
-    )
-      return finalNode;
-    return {} as ComponentMapNode;
-  }, [componentNode, linkWidgetDisplayName]);
-  const handleAddViewItem = useCallback(() => {
-    const newItem = generateNewViewItem(allViewsKeys);
-    const newChildrenNodes = newGenerateChildrenComponentNode(
-      BasicContainerConfig,
-      _componentNode?.displayName
-    );
-    handleUpdateMultiAttrDSL?.({
-      [attrName]: [...value, newItem],
-    });
-
-    if (linkWidgetDisplayName) {
-      if (Array.isArray(linkWidgetDisplayName)) {
-        linkWidgetDisplayName.forEach((linkDisplayName) => {
-          handleUpdateOtherMultiAttrDSL?.(linkDisplayName, {
-            [attrName]: [...value, newItem],
-          });
-        });
-      } else {
-        handleUpdateOtherMultiAttrDSL?.(linkWidgetDisplayName, {
-          [attrName]: [...value, newItem],
-        });
-        const linkWidgetLinkedDisplayName = get(
-          executionResult,
-          `${linkWidgetDisplayName}.linkWidgetDisplayName`,
-          []
-        );
-        linkWidgetLinkedDisplayName &&
-          Array.isArray(linkWidgetLinkedDisplayName) &&
-          linkWidgetLinkedDisplayName.forEach((name) => {
-            name !== widgetDisplayName &&
-              handleUpdateOtherMultiAttrDSL?.(name, {
-                [attrName]: [...value, newItem],
-              });
-          });
-      }
-    }
-    dispatch(componentsActions.addComponentReducer([newChildrenNodes]));
-  }, [
-    _componentNode?.displayName,
-    allViewsKeys,
-    attrName,
-    dispatch,
-    executionResult,
-    handleUpdateMultiAttrDSL,
-    handleUpdateOtherMultiAttrDSL,
-    linkWidgetDisplayName,
-    value,
-    widgetDisplayName,
-  ]);
-
-  return (
-    <ViewListSetterProvider
-      viewsList={value}
-      childrenSetter={childrenSetter || []}
-      widgetDisplayName={widgetDisplayName}
-      attrPath={attrName}
-      handleUpdateDsl={handleUpdateDsl}
-      handleUpdateMultiAttrDSL={updateMultiAttrDSL}
-      handleUpdateExecutionResult={handleUpdateExecutionResult}
-      handleUpdateOtherMultiAttrDSL={handleUpdateOtherMultiAttrDSL}
-      componentNode={_componentNode}
-    >
-      <div css={setterPublicWrapper}>
-        <div css={viewSetterWrapperStyle}>
-          <Header
-            labelName={t("editor.inspect.setter_content.view_setter.views")}
-            addAction={handleAddViewItem}
-            hasAddAction
-          />
-          <ListBody />
-        </div>
-      </div>
-    </ViewListSetterProvider>
-  );
-});
-
-ViewsSetter.displayName = "ViewsSetter";
-
-export default ViewsSetter;

package/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface.ts

@@ -1,28 +0,0 @@
-
-import { BaseSetter } from "@/page/App/components/InspectPanel/PanelSetters/interface"
-import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
-import { ComponentMapNode } from "@/utils/generators/interface"
-
-export interface ViewItemShape {
-  id: string
-  key: string
-  label: string
-  disabled?: string
-  hidden?: string
-  xs?:number
-  sm?:number,
-  md?:number,
-  lg?:number
-}
-
-export interface ViewSetterProps extends BaseSetter {
-  value: ViewItemShape[]
-  childrenSetter?: PanelFieldConfig[]
-  componentNode: ComponentMapNode
-}
-
-export interface DragIconAndLabelProps {
-  index: number
-  label?: string
-  isSelected: boolean
-}