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

package/page/App/components/PagePanel/Modules/Frame/index.tsx

@@ -1,778 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// import { IMPAKTAPPS_MIXPANEL_EVENT_TYPE } from "@IMPAKTAPPS-public/mixpanel-utils"
-import {
-  ChangeEvent,
-  FC,
-  FocusEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
-// import {
-//   InputNumber,
-//   RadioGroup,
-//   Switch,
-//   useMessage,
-//   useModal,
-// } from "@IMPAKTAPPS-design/react"
-import FrameFixedIcon from "@/assets/rightPagePanel/frame-fixed.svg";
-import FrameResponsiveIcon from "@/assets/rightPagePanel/frame-responsive.svg";
-import { PanelBar } from "@/components/PanelBar";
-import i18n from "@/i18n/config";
-import {
-  BODY_MIN_HEIGHT,
-  BODY_MIN_WIDTH,
-  DEFAULT_PERCENT_WIDTH,
-  DEFAULT_PX_WIDTH,
-  // FOOTER_MIN_HEIGHT,
-  // HEADER_MIN_HEIGHT,
-  LEFT_MIN_WIDTH,
-  RIGHT_MIN_WIDTH,
-} from "@/page/App/components/dotPanel/constant/canvas";
-import { PageLabel } from "@/page/App/components/PagePanel/Components/Label";
-import { LayoutSelect } from "@/page/App/components/PagePanel/Components/LayoutSelect";
-import { PanelActionBar } from "@/page/App/components/PagePanel/Components/PanelActionBar";
-import { PanelDivider } from "@/page/App/components/PagePanel/Layout/divider";
-import { LeftAndRightLayout } from "@/page/App/components/PagePanel/Layout/leftAndRight";
-import { SetterPadding } from "@/page/App/components/PagePanel/Layout/setterPadding";
-import { optionListWrapperStyle } from "@/page/App/components/PagePanel/style";
-import { getCanvasShape } from "@/redux/config/configSelector";
-import {
-  getComponentMap,
-  searchComponentFromMap,
-} from "@/redux/currentApp/components/componentsSelector";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { PageNodeProps } from "@/redux/currentApp/components/componentsState";
-import { getRootNodeExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
-import { RootState } from "@/store";
-import { groupWrapperStyle } from "./style";
-import { ToggleButton, ToggleButtonGroup } from "@mui/material";
-import { useModal } from "@/utils/model/src";
-const getRealCanvasWidth = (canvasWidth: unknown) => {
-  if (typeof canvasWidth !== "number") return 100;
-  return canvasWidth;
-};
-
-const canvasSizeOptions = [
-  {
-    label: (
-      <div css={optionListWrapperStyle}>
-        <FrameResponsiveIcon />
-        <span>{i18n.t("page.size.model.auto")}</span>
-      </div>
-    ),
-    value: "auto",
-  },
-  {
-    label: (
-      <div css={optionListWrapperStyle}>
-        <FrameFixedIcon />
-        <span>{i18n.t("page.size.model.fixed")}</span>
-      </div>
-    ),
-    value: "fixed",
-  },
-];
-
-export const PageFrame: FC = () => {
-  const { t } = useTranslation();
-  const rootNodeProps = useSelector(getRootNodeExecutionResult);
-  const { currentPageIndex, pageSortedKey } = rootNodeProps;
-  const currentPageDisplayName = pageSortedKey[currentPageIndex];
-  const pageProps = useSelector<RootState>((state) => {
-    const components = getComponentMap(state);
-    return (
-      searchComponentFromMap(components, currentPageDisplayName)?.props || {}
-    );
-  }) as PageNodeProps;
-  // const message = useMessage()
-
-  const canvasShape = useSelector(getCanvasShape);
-  const dispatch = useDispatch();
-  const {
-    canvasSize,
-    canvasWidth,
-    layout,
-    leftWidth,
-    rightWidth,
-    isLeftFixed,
-    isRightFixed,
-    isFooterFixed,
-    isHeaderFixed,
-    hasLeft,
-    hasRight,
-    hasFooter,
-    hasHeader,
-    // showLeftFoldIcon,
-    // showRightFoldIcon,
-  } = pageProps;
-  const [finalLeftWidth, setFinalLeftWidth] = useState(hasLeft ? leftWidth : 0);
-  const [finalRightWidth, setFinalRightWidth] = useState(
-    hasRight ? rightWidth : 0
-  );
-
-  useEffect(() => {
-    setFinalLeftWidth(leftWidth);
-  }, [leftWidth]);
-
-  useEffect(() => {
-    setFinalRightWidth(rightWidth);
-  }, [rightWidth]);
-
-  const bodyWidth = useMemo(() => {
-    if (canvasSize === "fixed")
-      return (
-        canvasWidth - (hasLeft ? leftWidth : 0) - (hasRight ? rightWidth : 0)
-      );
-    return 100 - (hasLeft ? leftWidth : 0) - (hasRight ? rightWidth : 0);
-  }, [canvasSize, canvasWidth, hasLeft, hasRight, leftWidth, rightWidth]);
-
-  const [finalBodyWidth, setFinalBodyWidth] = useState(bodyWidth);
-
-  useEffect(() => {
-    setFinalBodyWidth(bodyWidth);
-  }, [bodyWidth]);
-
-  const [finalCanvasWidth, setFinalCanvasWidth] = useState(
-    getRealCanvasWidth(canvasWidth)
-  );
-
-  useEffect(() => {
-    setFinalCanvasWidth(getRealCanvasWidth(canvasWidth));
-  }, [canvasWidth]);
-
-  const finalCanvasSize = canvasSize === "fixed" ? "fixed" : "auto";
-
-  const widthI18n = useMemo(() => {
-    return canvasSize === "fixed"
-      ? `${t("editor.page.label_name.width")}(px)`
-      : `${t("editor.page.label_name.width")}(%)`;
-  }, [canvasSize, t]);
-
-  const modal = useModal();
-
-  const handleDeleteSection = useCallback(
-    (
-      deleteSectionName:
-        | "leftSection"
-        | "rightSection"
-        | "headerSection"
-        | "footerSection"
-    ) => {
-      if (!currentPageDisplayName) return;
-      dispatch(
-        componentsActions.deleteTargetPageSectionReducer({
-          pageName: currentPageDisplayName,
-          deleteSectionName,
-        })
-      );
-      modal.show({
-        w: "496px",
-        children: t("editor.page.model_tips.delete_section_message"),
-        cancelText: t("editor.page.model_tips.cancel_button"),
-        okText: t("editor.page.model_tips.ok_button"),
-        okButtonProps: {
-          colorScheme: "red",
-        },
-        closable: false,
-        onOk: () => {
-          dispatch(
-            componentsActions.deleteTargetPageSectionReducer({
-              pageName: currentPageDisplayName,
-              deleteSectionName,
-            })
-          );
-        },
-      });
-    },
-    [currentPageDisplayName, dispatch, t, modal]
-  );
-
-  const handleAddSection = useCallback(
-    (
-      addedSectionName:
-        | "leftSection"
-        | "rightSection"
-        | "headerSection"
-        | "footerSection"
-    ) => {
-      if (!currentPageDisplayName) return;
-      dispatch(
-        componentsActions.addTargetPageSectionReducer({
-          pageName: currentPageDisplayName,
-          addedSectionName,
-        })
-      );
-    },
-    [currentPageDisplayName, dispatch]
-  );
-
-  const handleUpdateBodyPanelWidth = useCallback(
-    (e?: any) => {
-      if (!currentPageDisplayName || !e.target.value) return;
-      setFinalBodyWidth(+e.target.value);
-    },
-    [currentPageDisplayName]
-  );
-
-  const handleBlurUpdateBodyPanelWidth = useCallback(() => {
-    let finalValue = finalBodyWidth;
-    let finalLeftValue = leftWidth;
-    let finalRightValue = rightWidth;
-    if (canvasSize === "fixed") {
-      let currentRightValue = finalRightValue;
-      let currentLeftValue = finalLeftValue;
-      if (finalValue < BODY_MIN_WIDTH) {
-        finalValue = BODY_MIN_WIDTH;
-        currentRightValue =
-          canvasShape.canvasWidth - finalValue - finalLeftValue;
-      } else {
-        currentRightValue =
-          canvasShape.canvasWidth - finalValue - finalLeftValue;
-      }
-      if (currentRightValue < RIGHT_MIN_WIDTH) {
-        finalRightValue = RIGHT_MIN_WIDTH;
-        currentLeftValue =
-          canvasShape.canvasWidth - finalValue - finalRightValue;
-      }
-      if (currentLeftValue < LEFT_MIN_WIDTH) {
-        finalLeftValue = LEFT_MIN_WIDTH;
-        currentRightValue =
-          canvasShape.canvasWidth - finalValue - finalLeftValue;
-      }
-      if (
-        currentLeftValue < LEFT_MIN_WIDTH &&
-        currentRightValue < RIGHT_MIN_WIDTH
-      ) {
-        finalLeftValue = LEFT_MIN_WIDTH;
-        finalRightValue = RIGHT_MIN_WIDTH;
-      }
-      setFinalBodyWidth(
-        canvasShape.canvasWidth - finalLeftValue - finalRightValue
-      );
-    } else {
-      let finalLeftValuePX = (finalLeftValue / 100) * canvasShape.canvasWidth;
-      let finalRightValuePX = (finalRightValue / 100) * canvasShape.canvasWidth;
-      const finalValuePX = (finalValue / 100) * canvasShape.canvasWidth;
-      if (finalValuePX <= BODY_MIN_HEIGHT) {
-        const restWidth = canvasShape.canvasWidth - BODY_MIN_HEIGHT;
-        finalLeftValuePX =
-          (finalLeftValuePX / (finalLeftValuePX + finalRightValuePX)) *
-          restWidth;
-        finalRightValuePX = restWidth - finalLeftValuePX;
-        finalLeftValue = (finalLeftValuePX / canvasShape.canvasWidth) * 100;
-        finalRightValue = (finalRightValuePX / canvasShape.canvasWidth) * 100;
-      } else {
-        const restWidth = canvasShape.canvasWidth - finalValuePX;
-        finalLeftValuePX =
-          (finalLeftValuePX / (finalLeftValuePX + finalRightValuePX)) *
-          restWidth;
-        if (finalLeftValuePX < LEFT_MIN_WIDTH) {
-          finalLeftValuePX = LEFT_MIN_WIDTH;
-        }
-        finalRightValuePX = restWidth - finalLeftValuePX;
-        if (finalRightValuePX < RIGHT_MIN_WIDTH) {
-          finalRightValuePX = LEFT_MIN_WIDTH;
-        }
-        finalLeftValue = (finalLeftValuePX / canvasShape.canvasWidth) * 100;
-        finalRightValue = (RIGHT_MIN_WIDTH / canvasShape.canvasWidth) * 100;
-      }
-      setFinalBodyWidth((1 - finalLeftValue - finalRightValue) * 100);
-    }
-
-    dispatch(
-      componentsActions.updateTargetPagePropsReducer({
-        pageName: currentPageDisplayName,
-        newProps: {
-          leftWidth: finalLeftValue,
-          rightWidth: finalRightValue,
-        },
-      })
-    );
-  }, [
-    canvasShape.canvasWidth,
-    canvasSize,
-    currentPageDisplayName,
-    dispatch,
-    finalBodyWidth,
-    leftWidth,
-    rightWidth,
-  ]);
-
-  const handleUpdateLeftPanelWidth = (e: any) => {
-    if (!e.target.value) return;
-    setFinalLeftWidth(+e.target.value);
-  };
-
-  const handleBlurUpdateLeftPanelWidth = useCallback(() =>
-    // e: FocusEvent<HTMLInputElement, Element>
-    {
-
-
-      let finalValue = finalLeftWidth;
-      if (canvasSize === "fixed") {
-        if (
-          canvasShape.canvasWidth - finalValue - finalRightWidth <
-          BODY_MIN_WIDTH
-        ) {
-          finalValue =
-            canvasShape.canvasWidth - BODY_MIN_WIDTH - finalRightWidth;
-        }
-        if (finalValue < LEFT_MIN_WIDTH) {
-          finalValue = LEFT_MIN_WIDTH;
-        }
-      } else {
-        const leftWidthPX = (finalLeftWidth / 100) * canvasShape.canvasWidth;
-        const currentRightWidthPX =
-          (finalRightWidth / 100) * canvasShape.canvasWidth;
-        if (
-          canvasShape.canvasWidth - leftWidthPX - currentRightWidthPX <
-          BODY_MIN_WIDTH
-        ) {
-          finalValue =
-            ((canvasShape.canvasWidth - currentRightWidthPX - BODY_MIN_WIDTH) /
-              canvasShape.canvasWidth) *
-            100;
-        }
-        if ((finalValue / 100) * canvasShape.canvasWidth < LEFT_MIN_WIDTH) {
-          finalValue = (LEFT_MIN_WIDTH / canvasShape.canvasWidth) * 100;
-        }
-      }
-
-      dispatch(
-        componentsActions.updateTargetPagePropsReducer({
-          pageName: currentPageDisplayName,
-          newProps: {
-            leftWidth: finalValue,
-          },
-        })
-      );
-      setFinalLeftWidth(finalValue);
-    }, [
-    canvasShape.canvasWidth,
-    canvasSize,
-    currentPageDisplayName,
-    dispatch,
-    finalLeftWidth,
-    finalRightWidth,
-  ]);
-
-  const handleUpdateRightPanelWidth = (v?: any) => {
-    if (!v) setFinalRightWidth(0);
-    setFinalRightWidth(v);
-  };
-
-  const handleBlurUpdateRightPanelWidth = useCallback(
-    (e: FocusEvent<HTMLInputElement, Element>) => {
-
-      let finalValue = finalLeftWidth;
-      if (canvasSize === "fixed") {
-        if (
-          canvasShape.canvasWidth - finalValue - finalLeftWidth <
-          BODY_MIN_WIDTH
-        ) {
-          finalValue =
-            canvasShape.canvasWidth - BODY_MIN_WIDTH - finalLeftWidth;
-        }
-        if (finalValue < RIGHT_MIN_WIDTH) {
-          finalValue = RIGHT_MIN_WIDTH;
-        }
-      } else {
-        const rightWidthPX = (finalLeftWidth / 100) * canvasShape.canvasWidth;
-        const currentLeftWidthPX = (leftWidth / 100) * canvasShape.canvasWidth;
-        if (
-          canvasShape.canvasWidth - rightWidthPX - currentLeftWidthPX <
-          BODY_MIN_WIDTH
-        ) {
-          finalValue =
-            ((canvasShape.canvasWidth - currentLeftWidthPX - BODY_MIN_WIDTH) /
-              canvasShape.canvasWidth) *
-            100;
-        }
-        if ((finalValue / 100) * canvasShape.canvasWidth < RIGHT_MIN_WIDTH) {
-          finalValue = (RIGHT_MIN_WIDTH / canvasShape.canvasWidth) * 100;
-        }
-      }
-
-      dispatch(
-        componentsActions.updateTargetPagePropsReducer({
-          pageName: currentPageDisplayName,
-          newProps: {
-            rightWidth: finalValue,
-          },
-        })
-      );
-    },
-    [
-      canvasShape.canvasWidth,
-      canvasSize,
-      currentPageDisplayName,
-      dispatch,
-      finalLeftWidth,
-      leftWidth,
-    ]
-  );
-
-  const handleUpdateShowFoldIcon = useCallback(
-    (value: boolean, sectionName: string) => {
-      if (!currentPageDisplayName) return;
-      const newProps =
-        sectionName === "leftSection"
-          ? {
-              showLeftFoldIcon: value,
-            }
-          : { showRightFoldIcon: value };
-      dispatch(
-        componentsActions.updateTargetPagePropsReducer({
-          pageName: currentPageDisplayName,
-          newProps,
-        })
-      );
-    },
-    [currentPageDisplayName, dispatch]
-  );
-  const handleUpdateFrameSize = useCallback(
-    (value: "auto" | "fixed") => {
-      if (canvasSize === value || !currentPageDisplayName) return;
-      const newProps: Partial<PageNodeProps> = {
-        canvasSize: value,
-        canvasWidth:
-          value === "fixed"
-            ? DEFAULT_PX_WIDTH.CANVAS
-            : DEFAULT_PERCENT_WIDTH.CANVAS,
-        leftWidth: 0,
-        rightWidth: 0,
-      };
-      if (value === "fixed") {
-        if (hasLeft) newProps.leftWidth = DEFAULT_PX_WIDTH.LEFT;
-        if (hasRight) newProps.rightWidth = DEFAULT_PX_WIDTH.RIGHT;
-      } else {
-        if (hasLeft) newProps.leftWidth = DEFAULT_PERCENT_WIDTH.LEFT;
-        if (hasRight) newProps.rightWidth = DEFAULT_PERCENT_WIDTH.RIGHT;
-      }
-      dispatch(
-        componentsActions.updateTargetPagePropsReducer({
-          pageName: currentPageDisplayName,
-          newProps,
-        })
-      );
-    },
-    [canvasSize, currentPageDisplayName, dispatch, hasLeft, hasRight]
-  );
-
-  const handleChangeCanvasWidth = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      if (!currentPageDisplayName || event.target.value == undefined) return;
-      setFinalCanvasWidth(+event.target.value);
-    },
-    [currentPageDisplayName]
-  );
-
-  const handleBlurCanvasWidth = useCallback(() => {
-    if (canvasSize === "fixed") {
-      if (
-        finalCanvasWidth <
-        BODY_MIN_WIDTH + LEFT_MIN_WIDTH + RIGHT_MIN_WIDTH
-      ) {
-        // message.error({
-        //   content: t("frame_size.invalid_tips", {
-        //     size: BODY_MIN_HEIGHT + HEADER_MIN_HEIGHT + FOOTER_MIN_HEIGHT,
-        //   }),
-        // })
-        dispatch(
-          componentsActions.updateTargetPagePropsReducer({
-            pageName: currentPageDisplayName,
-            newProps: {
-              canvasWidth: BODY_MIN_WIDTH + LEFT_MIN_WIDTH + RIGHT_MIN_WIDTH,
-              leftWidth: LEFT_MIN_WIDTH,
-              rightWidth: RIGHT_MIN_WIDTH,
-            },
-          })
-        );
-        setFinalCanvasWidth(BODY_MIN_WIDTH + LEFT_MIN_WIDTH + RIGHT_MIN_WIDTH);
-      } else {
-        dispatch(
-          componentsActions.updateTargetPagePropsReducer({
-            pageName: currentPageDisplayName,
-            newProps: {
-              canvasWidth: finalCanvasWidth,
-            },
-          })
-        );
-      }
-    } else {
-      const originalWidth = canvasShape.canvasWidth / (canvasWidth / 100);
-      const currentWidth = originalWidth * (finalCanvasWidth / 100);
-      if (currentWidth < BODY_MIN_WIDTH + LEFT_MIN_WIDTH + RIGHT_MIN_WIDTH) {
-        const minWidth =
-          (BODY_MIN_WIDTH + LEFT_MIN_WIDTH + RIGHT_MIN_WIDTH) /
-          (originalWidth / 100);
-        dispatch(
-          componentsActions.updateTargetPagePropsReducer({
-            pageName: currentPageDisplayName,
-            newProps: {
-              canvasWidth: minWidth,
-            },
-          })
-        );
-        setFinalCanvasWidth(minWidth);
-      } else {
-        dispatch(
-          componentsActions.updateTargetPagePropsReducer({
-            pageName: currentPageDisplayName,
-            newProps: {
-              canvasWidth: finalCanvasWidth,
-            },
-          })
-        );
-      }
-    }
-  }, [
-    canvasShape.canvasWidth,
-    canvasSize,
-    canvasWidth,
-    currentPageDisplayName,
-    dispatch,
-    finalCanvasWidth,
-  ]);
-  function onChangeValue(_e: any, v: any): void {
-    handleUpdateFrameSize(v);
-  }
-  return (
-    <PanelBar title={t("editor.page.panel_bar_title.frame")}>
-      <LeftAndRightLayout>
-        <ToggleButtonGroup
-          color="primary"
-          size="small"
-          sx={{ paddingTop: "2px" }}
-          value={finalCanvasSize}
-          exclusive
-          onChange={onChangeValue}
-          aria-label="Platform"
-        >
-          {canvasSizeOptions?.map((e) => {
-            return (
-              <ToggleButton
-                sx={{ fontSize: "10px" }}
-                size="small"
-                value={e?.value}
-              >
-                {e?.value}
-              </ToggleButton>
-            );
-          })}
-        </ToggleButtonGroup>
-      </LeftAndRightLayout>
-      <LeftAndRightLayout>
-        <PageLabel
-          labelName={widthI18n}
-          size="big"
-          tooltip={
-            finalCanvasSize !== "fixed"
-              ? t("editor.page.tooltips.auto_canvas_width")
-              : undefined
-          }
-        />
-        <SetterPadding>
-          <input
-            type="number"
-            width="96px"
-            style={{ borderRadius: "5px", color: "techPurple" }}
-            value={Number(finalCanvasWidth.toFixed(0))}
-            onChange={handleChangeCanvasWidth}
-            onBlur={handleBlurCanvasWidth}
-          />
-        </SetterPadding>
-      </LeftAndRightLayout>
-      <PanelDivider />
-      <div css={groupWrapperStyle}>
-        <LeftAndRightLayout>
-          <PageLabel
-            labelName={t("editor.page.label_name.preset")}
-            size="big"
-          />
-          <SetterPadding>
-            <LayoutSelect
-              value={layout}
-              currentPageName={currentPageDisplayName}
-            />
-          </SetterPadding>
-        </LeftAndRightLayout>
-      </div>
-      <PanelDivider hasMargin={false} />
-      <div css={groupWrapperStyle}>
-        <LeftAndRightLayout>
-          <PageLabel
-            labelName={t("editor.page.label_name.left_panel")}
-            size="big"
-          />
-          <PanelActionBar
-            isFixed={isLeftFixed}
-            hasPanel={hasLeft}
-            deletePanelAction={() => {
-              handleDeleteSection("leftSection");
-            }}
-            addPanelAction={() => {
-              handleAddSection("leftSection");
-            }}
-          />
-        </LeftAndRightLayout>
-        {hasLeft && (
-          <>
-            <LeftAndRightLayout>
-              <PageLabel labelName={widthI18n} size="small" />
-              <SetterPadding>
-                <input
-                  type="number"
-                  width="96px"
-                  style={{ borderRadius: "5px", color: "techPurple" }}
-                  value={Number(finalLeftWidth.toFixed(0))}
-                  onChange={handleUpdateLeftPanelWidth}
-                  onBlur={handleBlurUpdateLeftPanelWidth}
-                />
-              </SetterPadding>
-            </LeftAndRightLayout>
-            <LeftAndRightLayout>
-              <PageLabel
-                labelName={t("editor.page.label_name.show_fold_icon")}
-                size="small"
-                tooltip={t("editor.page.tooltips.show_fold_icon")}
-              />
-              <SetterPadding>
-                Switch
-                {/* <Switch
-                  checked={showLeftFoldIcon}
-                  onChange={(value) => {
-                    handleUpdateShowFoldIcon(value, "leftSection")
-                  }}
-                  colorScheme="techPurple"
-                /> */}
-              </SetterPadding>
-            </LeftAndRightLayout>
-          </>
-        )}
-      </div>
-      <PanelDivider hasMargin={false} />
-      <div css={groupWrapperStyle}>
-        <LeftAndRightLayout>
-          <PageLabel
-            labelName={t("editor.page.label_name.right_panel")}
-            size="small"
-          />
-          <PanelActionBar
-            isFixed={isRightFixed}
-            hasPanel={hasRight}
-            deletePanelAction={() => {
-              handleDeleteSection("rightSection");
-            }}
-            addPanelAction={() => {
-              handleAddSection("rightSection");
-            }}
-          />
-        </LeftAndRightLayout>
-        {hasRight && (
-          <>
-            <LeftAndRightLayout>
-              <PageLabel labelName={widthI18n} size="small" />
-              <SetterPadding>
-                <input
-                  type="number"
-                  width="96px"
-                  style={{ borderRadius: "5px", color: "techPurple" }}
-                  value={Number(finalRightWidth.toFixed(0))}
-                  onChange={(e) =>
-                    handleUpdateRightPanelWidth(
-                      e.target.value ? +e.target.value : NaN
-                    )
-                  }
-                  onBlur={handleBlurUpdateRightPanelWidth}
-                />
-              </SetterPadding>
-            </LeftAndRightLayout>
-            <LeftAndRightLayout>
-              <PageLabel
-                labelName={t("editor.page.label_name.show_fold_icon")}
-                size="small"
-                tooltip={t("editor.page.tooltips.show_fold_icon")}
-              />
-              <SetterPadding>
-                Switch
-                {/* <Switch
-                  checked={showRightFoldIcon}
-                  onChange={(value) => {
-                    handleUpdateShowFoldIcon(value, "rightSection")
-                  }}
-                  colorScheme="techPurple"
-                /> */}
-              </SetterPadding>
-            </LeftAndRightLayout>
-          </>
-        )}
-      </div>
-
-      <PanelDivider hasMargin={false} />
-      <div css={groupWrapperStyle}>
-        <LeftAndRightLayout>
-          <PageLabel labelName={t("editor.page.label_name.body")} size="big" />
-        </LeftAndRightLayout>
-        <LeftAndRightLayout>
-          <PageLabel labelName={widthI18n} size="small" />
-          <SetterPadding>
-            <input
-              type="number"
-              width="96px"
-              style={{ borderRadius: "5px", color: "techPurple" }}
-              value={Number(finalBodyWidth.toFixed(0))}
-              onChange={handleUpdateBodyPanelWidth}
-              onBlur={handleBlurUpdateBodyPanelWidth}
-              disabled={!hasLeft && !hasRight}
-            />
-          </SetterPadding>
-        </LeftAndRightLayout>
-      </div>
-      <PanelDivider hasMargin={false} />
-      <div css={groupWrapperStyle}>
-        <LeftAndRightLayout>
-          <PageLabel
-            labelName={t("editor.page.label_name.header")}
-            size="big"
-          />
-          <PanelActionBar
-            isFixed={isHeaderFixed}
-            hasPanel={hasHeader}
-            deletePanelAction={() => {
-              handleDeleteSection("headerSection");
-            }}
-            addPanelAction={() => {
-              handleAddSection("headerSection");
-            }}
-          />
-        </LeftAndRightLayout>
-      </div>
-      <PanelDivider hasMargin={false} />
-      <div css={groupWrapperStyle}>
-        <LeftAndRightLayout>
-          <PageLabel
-            labelName={t("editor.page.label_name.footer")}
-            size="big"
-          />
-          <PanelActionBar
-            isFixed={isFooterFixed}
-            hasPanel={hasFooter}
-            deletePanelAction={() => {
-              handleDeleteSection("footerSection");
-            }}
-            addPanelAction={() => {
-              handleAddSection("footerSection");
-            }}
-          />
-        </LeftAndRightLayout>
-      </div>
-    </PanelBar>
-  );
-};
-
-PageFrame.displayName = "PageFrame";