impaktapps-ui-builder 0.0.382460 → 1.0.0

package/utils/pagination/style.ts

@@ -0,0 +1,199 @@
+import { css, SerializedStyles } from "@emotion/react"
+
+import { PaginationSize } from "./interface"
+import { globalColor } from "../colorBuilder"
+import { getSpecialThemeColor } from "../color-palette"
+
+export const paginationContainer = css`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+export const totalStyle = css`
+  font-size: 14px;
+  margin-right: 8px;
+  color: ${globalColor("grayBlue-02")};
+`
+
+export function applyJumperStyle(disabled?: boolean): SerializedStyles {
+  return css`
+    font-size: 14px;
+    margin-left: 8px;
+    margin-right: 16px;
+    white-space: nowrap;
+    color: ${disabled
+      ? globalColor("grayBlue-07")
+      : globalColor("grayBlue-02")};
+  `
+}
+
+export const jumperContainerStyle = css`
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+`
+
+export const selectorContainerStyle = css`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+export function applySimpleTextStyle(
+  marginStyle?: SerializedStyles,
+  disabled?: boolean,
+): SerializedStyles {
+  let textColor = css`
+    color: ${globalColor("grayBlue-02")};
+  `
+  if (disabled) {
+    textColor = css`
+      color: ${globalColor("grayBlue-07")};
+    `
+  }
+
+  return css`
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: ${disabled ? "not-allowed" : "auto"};
+    ${marginStyle};
+    ${textColor};
+  `
+}
+
+export function applyDirectorIconStyle(
+  marginStyle?: SerializedStyles,
+  size?: PaginationSize,
+  disabled?: boolean,
+  activeColorScheme?: string | undefined,
+  active?: boolean,
+): SerializedStyles {
+  let textColor = css`
+    color: ${active
+      ? getSpecialThemeColor(activeColorScheme ?? "blue")
+      : globalColor("grayBlue-02")};
+  `
+  let bgColor = css`
+    background-color: ${active
+      ? globalColor(activeColorScheme ?? "blue-08")
+      : "unset"};
+  `
+
+  if (disabled) {
+    textColor = css`
+      color: ${active
+        ? globalColor(activeColorScheme ?? "blue-05")
+        : globalColor("grayBlue-07")};
+    `
+    bgColor = css`
+      background-color: ${active
+        ? activeColorScheme
+          ? globalColor(`${activeColorScheme}-07`)
+          : globalColor("grayBlue-09")
+        : "unset"};
+    `
+  }
+
+  let hoverStyle = css``
+
+  if (!disabled && !active) {
+    hoverStyle = css`
+      &:hover {
+        background-color: ${globalColor("grayBlue-09")};
+      }
+    `
+  }
+
+  let s = "32px"
+
+  switch (size) {
+    case "small":
+      s = "24px"
+      break
+    case "medium":
+      s = "32px"
+      break
+    case "large":
+      s = "40px"
+      break
+  }
+
+  return css`
+    font-size: 14px;
+    width: ${s};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: ${s};
+    border-radius: 4px;
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+    ${marginStyle};
+    ${textColor};
+    ${bgColor};
+    ${hoverStyle};
+  `
+}
+
+export function applySelectorInputStyle(
+  size: PaginationSize,
+  inputBorderColorScheme?: string,
+): SerializedStyles {
+  let s = "32px"
+
+  switch (size) {
+    case "small":
+      s = "24px"
+      break
+    case "medium":
+      s = "32px"
+      break
+    case "large":
+      s = "40px"
+      break
+  }
+
+  return css`
+    font-family: inherit;
+    font-size: 14px;
+    color: ${globalColor("grayBlue-02")};
+    width: ${s};
+    box-sizing: border-box;
+    text-align: center;
+    background-color: ${globalColor("grayBlue-09")};
+    border-radius: 4px;
+    height: ${s};
+    outline: none;
+    border: none;
+
+    &:hover {
+      background-color: ${globalColor("grayBlue-08")};
+    }
+
+    &:focus-within {
+      outline: none;
+      background: none;
+      border: 1px solid
+        ${inputBorderColorScheme
+          ? getSpecialThemeColor(inputBorderColorScheme)
+          : globalColor("blue-03")};
+      box-shadow: 0 0 8px 0 blue;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: ${globalColor("grayBlue-05")};
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+    }
+
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+  `
+}

package/utils/shortcut/index.tsx

@@ -0,0 +1,510 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FC, ReactNode, useCallback, useEffect, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector, useStore } from "react-redux";
+import { Key } from "ts-key-enum";
+import {
+  getIsIMPAKTEditMode,
+  getSelectedAction,
+  getSelectedComponentDisplayNames,
+  isShowDot,
+} from "@/redux/config/configSelector";
+import { configActions } from "@/redux/config/configSlice";
+import {
+  getComponentMap,
+  getOriginalGlobalDataNames,
+  searchComponentFromMap,
+} from "@/redux/currentApp/components/componentsSelector";
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
+import { CopyManager } from "@/utils/copyManager";
+import { FocusManager } from "@/utils/focusManager";
+import { ShortCutContext } from "@/utils/shortcut/shortcutProvider";
+import IMPAKTAPPSUndoRedoManager from "@/utils/undoRedo/undo"
+import { isMAC } from "@/utils/userAgent";
+import { DisplayNameGenerator } from "../generators/generateDisplayName";
+import { createModal } from "../model/src";
+import { onDeleteActionItem } from "@/page/App/components/Actions/api";
+import { getActionItemByDisplayName } from "@/redux/currentApp/action/actionSelector";
+import { styleActions } from "@/redux/currentApp/style/cursorSlice";
+import { RootState } from "@/store";
+
+export const Shortcut: FC<{ children: ReactNode }> = ({ children }) => {
+  const dispatch = useDispatch();
+
+  const { t } = useTranslation();
+  // const message = useMessage()
+
+  // const { appId } = useParams()
+const store = useStore()
+  const isEditMode = useSelector(getIsIMPAKTEditMode);
+  const currentSelectedComponent = useSelector(
+    getSelectedComponentDisplayNames
+  );
+  const currentSelectedAction: any = useSelector(getSelectedAction);
+  const componentsMap = useSelector(getComponentMap);
+  const executionResult = useSelector(getExecutionResult);
+  const showShadows = useSelector(isShowDot);
+  // const teamInfo = useSelector(getCurrentTeamInfo)
+  // const upgradeModal = useUpgradeModal()
+
+  // shortcut
+  const [alreadyShowDeleteDialog, setAlreadyShowDeleteDialog] =
+    useState<boolean>(false);
+  // const [saveLoading, setSaveLoading] = useState<boolean>(false)
+
+  // const canUseBillingFeature = canUseUpgradeFeature(
+  //   teamInfo?.myRole,
+  //   getPlanUtils(teamInfo),
+  //   teamInfo?.totalTeamLicense?.teamLicensePurchased,
+  //   teamInfo?.totalTeamLicense?.teamLicenseAllPaid,
+  // )
+
+  const showDeleteDialog = (
+    displayName: string[],
+    type?:
+      | "widget"
+      | "page"
+      | "action"
+      | "subpage"
+      | "pageView"
+      | "globalData"
+      | "theme"
+      | "class",
+    options?: Record<string, any>
+  ) => {
+    const modal = createModal();
+    if (!alreadyShowDeleteDialog && displayName.length > 0) {
+      const textList = displayName.join(", ").toString();
+      setAlreadyShowDeleteDialog(true);
+      const id = modal.show({
+        blockOkHide: true,
+        blockCancelHide: true,
+        title: t("editor.component.delete_title", {
+          displayName: textList,
+        }),
+        children: t("editor.component.delete_content", {
+          displayName: textList,
+        }),
+        cancelText: t("editor.component.cancel"),
+        okText: t("editor.component.delete"),
+        okButtonProps: {
+          colorScheme: "red",
+        },
+        closable: false,
+        onCancel: () => {
+          setAlreadyShowDeleteDialog(false);
+          modal.update(id, { visible: false });
+        },
+        onOk: () => {
+          switch (type) {
+            case "page": {
+              dispatch(
+                componentsActions.deletePageNodeReducer({
+                  displayName: displayName[0],
+                  originPageSortedKey: options?.originPageSortedKey || [],
+                })
+              );
+              break;
+            }
+            case "widget": {
+              dispatch(
+                componentsActions.deleteComponentNodeReducer({
+                  displayNames: displayName,
+                  source: options?.source || "left_delete",
+                })
+              );
+              dispatch(configActions.clearSelectedComponent());
+              break;
+            }
+            case "action": {
+              setAlreadyShowDeleteDialog(false);
+              modal.update(id, { okLoading: true });
+              for (let i = 0; i < displayName.length; i++) {
+                const action = getActionItemByDisplayName(
+                store.getState() as RootState,
+                  displayName[i]
+                );
+                const globalDataNames = getOriginalGlobalDataNames(
+                store.getState()as RootState,
+                );
+                if (action) {
+                  // fail to await @chenlongbo
+                  onDeleteActionItem(action,store);
+                }
+                if (globalDataNames.includes(displayName[i])) {
+                  dispatch(
+                    componentsActions.deleteGlobalStateByKeyReducer({
+                      key: displayName[i],
+                    })
+                  );
+                  DisplayNameGenerator.removeDisplayName(displayName[i]);
+                }
+              }
+              modal.update(id, { okLoading: false });
+              modal.update(id, { visible: false });
+              return;
+            }
+            case "subpage": {
+              dispatch(
+                componentsActions.deleteSubPageViewNodeReducer({
+                  pageName: options!.parentPageName,
+                  subPagePath: displayName[0],
+                })
+              );
+              break;
+            }
+            case "pageView": {
+              dispatch(
+                componentsActions.deleteSectionViewReducer({
+                  viewDisplayName: options!.viewDisplayName,
+                  parentNodeName: options!.parentNodeName,
+                  originPageSortedKey: options!.originPageSortedKey,
+                })
+              );
+              break;
+            }
+            case "globalData": {
+              dispatch(
+                componentsActions.deleteGlobalStateByKeyReducer({
+                  key: displayName[0],
+                })
+              );
+              DisplayNameGenerator.removeDisplayName(displayName[0]);
+              break;
+            }
+            case "theme": {
+              dispatch(styleActions.deleteThemeReducer(displayName[0]));
+              dispatch(styleActions.updateCachedTheme(undefined));
+              dispatch(configActions.updateSelectedThemePanel("Default_Theme"));
+              break;
+            }
+            case "class": {
+              dispatch(styleActions.deleteStyleClassReducer(displayName[0]));
+
+              break;
+            }
+          }
+          setAlreadyShowDeleteDialog(false);
+          modal.update(id, { visible: false });
+        },
+      });
+    }
+  };
+
+  const selectAllBodyComponentsHandler = useCallback(() => {
+    switch (FocusManager.getFocus()) {
+      case "none":
+        break;
+      case "data_component":
+        break;
+      case "data_action":
+        break;
+      case "data_page":
+        break;
+      case "data_global_state":
+        break;
+      case "action":
+        break;
+      case "widget_picker":
+        break;
+      case "components_config":
+        break;
+      case "page_config":
+        break;
+      case "canvas": {
+        if (componentsMap) {
+          const rootNode = executionResult.root;
+          if (!rootNode) return;
+          const currentPageDisplayName =
+            rootNode.pageSortedKey[rootNode.currentPageIndex];
+          const pageNode = searchComponentFromMap(
+            componentsMap,
+            currentPageDisplayName
+          );
+          if (!pageNode) return;
+          let bodySectionDisplayName: string = "";
+          pageNode.childrenNode.find((sectionNodeDisplayName) => {
+            const currentSectionProps = executionResult[sectionNodeDisplayName];
+            if (
+              currentSectionProps &&
+              currentSectionProps.viewSortedKey &&
+              currentSectionProps.currentViewIndex >= 0 &&
+              componentsMap[sectionNodeDisplayName].showName === "bodySection"
+            ) {
+              const { currentViewIndex, viewSortedKey } = currentSectionProps;
+              bodySectionDisplayName = viewSortedKey[currentViewIndex];
+            }
+          });
+          if (!bodySectionDisplayName) return;
+          const allChildrenNodeDisplayNames = Array.isArray(
+            componentsMap[bodySectionDisplayName].childrenNode
+          )
+            ? componentsMap[bodySectionDisplayName].childrenNode
+            : [];
+          dispatch(
+            configActions.updateSelectedComponent(allChildrenNodeDisplayNames)
+          );
+        }
+      }
+    }
+  }, [componentsMap, dispatch, executionResult]);
+
+  const copySomethingHandler = () => {
+    switch (FocusManager.getFocus()) {
+      case "data_page":
+        break;
+      case "data_global_state":
+        break;
+      case "none":
+        break;
+      case "canvas":
+      case "data_component":
+        if (
+          currentSelectedComponent != null &&
+          currentSelectedComponent.length > 0
+        ) {
+          CopyManager.copyComponentNodeByDisplayName(currentSelectedComponent,store);
+        }
+        break;
+      case "data_action":
+      case "action":
+        if (currentSelectedAction != null) {
+          // CopyManager.copyActionByActionID(currentSelectedAction.actionID)
+        }
+        break;
+      case "widget_picker":
+        break;
+      case "components_config":
+        break;
+      case "page_config":
+        break;
+    }
+  };
+
+  const copyAndPasteHandler = () => {
+    switch (FocusManager.getFocus()) {
+      case "data_page":
+        break;
+      case "data_global_state":
+        break;
+      case "none":
+        break;
+      case "canvas":
+      case "data_component":
+        if (
+          currentSelectedComponent != null &&
+          currentSelectedComponent.length > 0
+        ) {
+          CopyManager.copyComponentNodeByDisplayName(currentSelectedComponent,store);
+        }
+        break;
+      case "data_action":
+      case "action":
+        if (currentSelectedAction != null) {
+          // CopyManager.copyActionByActionID(currentSelectedAction.actionID)
+        }
+        break;
+      case "widget_picker":
+        break;
+      case "components_config":
+        break;
+      case "page_config":
+        break;
+    }
+    CopyManager.paste("keyboard",store);
+  };
+
+  const showDotHandler = useCallback(
+    (keyboardEventType: string) => {
+      if (keyboardEventType === "keydown") {
+        dispatch(configActions.updateShowDot(true));
+      } else if (keyboardEventType === "keyup") {
+        dispatch(configActions.updateShowDot(false));
+      }
+    },
+    [dispatch]
+  );
+
+  const changeShadowHidden = useCallback(() => {
+    if (showShadows) {
+      dispatch(configActions.updateShowDot(false));
+    }
+  }, [dispatch, showShadows]);
+
+  const handleSaveToHistory = useCallback(async () => {}, []);
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}+s`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+      // if (isCloudVersion) {
+      //   handleSaveToHistory()
+      // } else {
+      //   message.success({
+      //     content: t("dont_need_save"),
+      //   })
+      // }
+    },
+    {
+      enableOnFormTags: true,
+      enableOnContentEditable: true,
+      preventDefault: true,
+      enabled: isEditMode,
+    },
+    [handleSaveToHistory]
+  );
+
+  useHotkeys(
+    Key.Backspace,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+      switch (FocusManager.getFocus()) {
+        case "data_page":
+          break;
+        case "data_global_state":
+          break;
+        case "none":
+          break;
+        case "canvas":
+        case "data_component":
+          showDeleteDialog(
+            currentSelectedComponent.map((displayName) => {
+              return displayName;
+            }),
+            "widget",
+            { source: "keyboard" }
+          );
+          break;
+        case "data_action":
+        case "action":
+          if (currentSelectedAction?.displayName) {
+            showDeleteDialog([currentSelectedAction.displayName], "action", {
+              source: "keyboard",
+            });
+          }
+          break;
+        case "widget_picker":
+          break;
+        case "components_config":
+          break;
+        case "page_config":
+          break;
+      }
+    },
+    {
+      enabled: isEditMode,
+    },
+    [showDeleteDialog, currentSelectedComponent, currentSelectedAction]
+  );
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}+a`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+      selectAllBodyComponentsHandler();
+    },
+    {
+      preventDefault: true,
+      enabled: isEditMode,
+    },
+    [selectAllBodyComponentsHandler]
+  );
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}+c`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+      copySomethingHandler();
+    },
+    {
+      preventDefault: false,
+      enabled: isEditMode,
+    },
+    [copySomethingHandler]
+  );
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}+v`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+      CopyManager.paste("keyboard",store);
+    },
+    {
+      preventDefault: false,
+      enabled: isEditMode,
+    },
+    [copySomethingHandler]
+  );
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}+d`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+      copyAndPasteHandler();
+    },
+    {
+      preventDefault: true,
+      enabled: isEditMode,
+    },
+    [copyAndPasteHandler]
+  );
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+
+      showDotHandler(keyboardEvent.type);
+    },
+    {
+      keydown: true,
+      keyup: true,
+      preventDefault: false,
+      enabled: isEditMode,
+    },
+    [showDotHandler]
+  );
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}+z`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+       IMPAKTAPPSUndoRedoManager.popFromUndoStack(store)
+    },
+    {
+      enabled: isEditMode,
+    },
+    [isEditMode]
+  );
+
+  useHotkeys(
+    `${isMAC() ? Key.Meta : Key.Control}+${Key.Shift}+z`,
+    (keyboardEvent) => {
+      if (keyboardEvent.repeat) return;
+      IMPAKTAPPSUndoRedoManager.popFromRedoStack(store)
+    },
+    {
+      enabled: isEditMode,
+    },
+    [isEditMode]
+  );
+  useEffect(() => {
+    if (isEditMode) {
+      window.addEventListener("blur", changeShadowHidden);
+    }
+
+    return () => {
+      if (isEditMode) {
+        window.removeEventListener("blur", changeShadowHidden);
+      }
+    };
+  }, [changeShadowHidden, dispatch, isEditMode]);
+
+  return (
+    <ShortCutContext.Provider value={{ showDeleteDialog }}>
+      {children}
+    </ShortCutContext.Provider>
+  );
+};