From a347f9e9170ee208e9b513ec183b7f7b883a5dbd Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 19 Nov 2024 05:42:34 -0500 Subject: [PATCH] Reverted extension. --- .../src/pages/editor/right/ModulePanel.tsx | 365 ++++++------------ 1 file changed, 121 insertions(+), 244 deletions(-) diff --git a/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx b/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx index 1cf3a55a9..dc4ad3cc9 100644 --- a/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx +++ b/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx @@ -1,17 +1,17 @@ import CreateAppButton from "components/CreateAppButton"; import { EmptyContent } from "components/EmptyContent"; -import { ApplicationMeta, AppTypeEnum, FolderMeta } from "constants/applicationConstants"; +import { ApplicationMeta, AppTypeEnum } from "constants/applicationConstants"; import { APPLICATION_VIEW_URL } from "constants/routesURL"; import { - ActiveTextColor, - BorderActiveShadowColor, - BorderColor, - GreyTextColor, + ActiveTextColor, + BorderActiveShadowColor, + BorderColor, + GreyTextColor, } from "constants/style"; -import { FolderIcon, ModuleDocIcon } from "lowcoder-design"; +import { ModuleDocIcon } from "lowcoder-design"; import { trans } from "i18n"; import { draggingUtils } from "layout/draggingUtils"; -import { useContext, useEffect, useState } from "react"; +import { useContext, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { fetchAllModules } from "redux/reduxActions/applicationActions"; import styled from "styled-components"; @@ -21,259 +21,136 @@ import { formatTimestamp } from "util/dateTimeUtils"; import { RightContext } from "./rightContext"; import { modulesSelector } from "../../../redux/selectors/applicationSelector"; import { ComListTitle, ExtensionContentWrapper } from "./styledComponent"; -import { foldersSelector } from "@lowcoder-ee/redux/selectors/folderSelector"; const ItemWrapper = styled.div` - display: flex; - flex-direction: row; - margin-bottom: 12px; - &:last-child { - margin-bottom: 0; - } - &:hover { - cursor: grab; + display: flex; + flex-direction: row; + margin-bottom: 12px; + &:last-child { + margin-bottom: 0; + } + &:hover { + cursor: grab; + .module-icon { + box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15); + border-color: ${BorderActiveShadowColor}; + transform: scale(1.2); + } + .module-name { + color: ${ActiveTextColor}; + } + } .module-icon { - box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15); - border-color: ${BorderActiveShadowColor}; - transform: scale(1.2); + transition: all 200ms linear; + margin-right: 8px; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid ${BorderColor}; + border-radius: 4px; + } + .module-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-around; + overflow: hidden; } .module-name { - color: ${ActiveTextColor}; + line-height: 1.5; + font-size: 13px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - } - .module-icon { - transition: all 200ms linear; - margin-right: 8px; - width: 40px; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - border: 1px solid ${BorderColor}; - border-radius: 4px; - } - .module-content { - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-around; - overflow: hidden; - } - .module-name { - line-height: 1.5; - font-size: 13px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - .module-desc { - line-height: 1.5; - font-size: 12px; - color: ${GreyTextColor}; - } -`; - -const FolderWrapper = styled.div` - display: flex; - flex-direction: row; - margin-bottom: 12px; - &:last-child { - margin-bottom: 0; - } - &:hover { - box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15); - border-color: ${BorderActiveShadowColor}; - cursor: pointer; - transform: scale(1.03); - .folder-name { - color: ${ActiveTextColor}; + .module-desc { + line-height: 1.5; + font-size: 12px; + color: ${GreyTextColor}; } - } - .folder-icon { - transition: all 200ms linear; - margin-right: 8px; - width: 40px; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 4px; - } - .folder-content { - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-around; - overflow: hidden; - } - .folder-name { - line-height: 1.5; - font-size: 13px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - .folder-desc { - line-height: 1.5; - font-size: 12px; - color: ${GreyTextColor}; - } `; interface ModuleItemProps { - meta: ApplicationMeta; - onDrag: (type: string) => void; -} - -interface FolderItemProps { - meta: FolderMeta; + meta: ApplicationMeta; + onDrag: (type: string) => void; } function ModuleItem(props: ModuleItemProps) { - const compType = "module"; - const { meta } = props; - return ( - { - e.dataTransfer.setData("compType", compType); - e.dataTransfer.setDragImage(TransparentImg, 0, 0); - draggingUtils.setData("compType", compType); - draggingUtils.setData( - "compLayout", - meta.containerSize - ? { w: meta.containerSize.width, h: meta.containerSize.height } - : undefined - ); - draggingUtils.setData("compInitialValue", { - appId: props.meta.applicationId, - }); - props.onDrag(compType); - }} - > -
- -
-
-
{props.meta.name}
-
{formatTimestamp(props.meta.createAt)}
-
- - ); + const compType = "module"; + const { meta } = props; + return ( + { + e.dataTransfer.setData("compType", compType); + e.dataTransfer.setDragImage(TransparentImg, 0, 0); + draggingUtils.setData("compType", compType); + draggingUtils.setData( + "compLayout", + meta.containerSize + ? { w: meta.containerSize.width, h: meta.containerSize.height } + : undefined + ); + draggingUtils.setData("compInitialValue", { + appId: props.meta.applicationId, + }); + props.onDrag(compType); + }} + > +
+ +
+
+
{props.meta.name}
+
{formatTimestamp(props.meta.createAt)}
+
+ + ); } export default function ModulePanel() { - const dispatch = useDispatch(); - const modules = useSelector(modulesSelector); - const folders = useSelector(foldersSelector); - const { onDrag, searchValue } = useContext(RightContext); - const { applicationId } = useContext(ExternalEditorContext); - const [isSubItems, setIsSubItems] = useState(false); - // const [subApplications : ApplicationMeta[], setSubApplications] = useState([]); - const [subModuleApp, setSubModuleApp] = useState([]); - - const appArray = () => { - const appIdArray: any[] = []; - folders.map(i => (i.subApplications?.map(p =>(appIdArray.push(p.applicationId))))) - return appIdArray; - } - function FolderItem(props: FolderItemProps) { - const { meta } = props; - - const handleClick = () => { - setIsSubItems(true); - setSubModuleApp(meta.subApplications || []); - console.log(meta.subApplications); - }; - return ( - -
- -
-
-
{meta.name}
-
- - ); - } - - - const appIdArray = appArray(); - - useEffect(() => { - dispatch(fetchAllModules({})); - }, [dispatch]); - - const filteredModules = modules.filter((i) => { - if (appIdArray.includes(i.applicationId)) - return false; - if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) { - return false; - } - return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim(); - }); - - const subModules = (apps: ApplicationMeta[] | undefined) => apps?.filter((i) => { - if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) { - return false; - } - return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim(); - }); - - - // @ts-ignore - const subItems = subModules(subModuleApp).map((i) => ( - - )); - - const items = filteredModules.map((i) => ( - - )); - - const folderItems = folders.map((i) => { - return - }); - const empty = ( - { + dispatch(fetchAllModules({})); + }, [dispatch]); + + const filteredModules = modules.filter((i) => { + if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) { + return false; + } + return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim(); + }); + + const items = filteredModules.map((i) => ( + + )); + const empty = ( + +

{trans("rightPanel.emptyModules")}

+ { + const appId = app.applicationInfoView.applicationId; + const url = APPLICATION_VIEW_URL(appId, "edit"); + window.open(url); + }} + /> + + } + /> + ); + return ( <> -

{trans("rightPanel.emptyModules")}

- { - const appId = app.applicationInfoView.applicationId; - const url = APPLICATION_VIEW_URL(appId, "edit"); - window.open(url); - }} - /> - - } - /> - ); - return ( - <> - { - isSubItems ? <> - {trans("rightPanel.moduleListTitle")} - (setIsSubItems(false))}> -
- -
-
-
. . .
-
- - {subItems.length > 0 ? subItems : null} - : - - {folderItems.length > 0 ? <> - {trans("rightPanel.folderListTitle")} - {folderItems} - : null} {trans("rightPanel.moduleListTitle")} - {items.length > 0 ? items : empty} - - } - - ); + {items.length > 0 ? items : empty} + + ); }