Skip to content

Commit 3880389

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1317 from lowcoder-org/feature-extension-revert
Reverted extension.
2 parents b34f6d7 + a347f9e commit 3880389

File tree

1 file changed

+121
-244
lines changed

1 file changed

+121
-244
lines changed

‎client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx‎

Lines changed: 121 additions & 244 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import CreateAppButton from "components/CreateAppButton";
22
import { EmptyContent } from "components/EmptyContent";
3-
import { ApplicationMeta, AppTypeEnum, FolderMeta } from "constants/applicationConstants";
3+
import { ApplicationMeta, AppTypeEnum } from "constants/applicationConstants";
44
import { APPLICATION_VIEW_URL } from "constants/routesURL";
55
import {
6-
ActiveTextColor,
7-
BorderActiveShadowColor,
8-
BorderColor,
9-
GreyTextColor,
6+
ActiveTextColor,
7+
BorderActiveShadowColor,
8+
BorderColor,
9+
GreyTextColor,
1010
} from "constants/style";
11-
import { FolderIcon, ModuleDocIcon } from "lowcoder-design";
11+
import { ModuleDocIcon } from "lowcoder-design";
1212
import { trans } from "i18n";
1313
import { draggingUtils } from "layout/draggingUtils";
14-
import { useContext, useEffect, useState } from "react";
14+
import { useContext, useEffect } from "react";
1515
import { useDispatch, useSelector } from "react-redux";
1616
import { fetchAllModules } from "redux/reduxActions/applicationActions";
1717
import styled from "styled-components";
@@ -21,259 +21,136 @@ import { formatTimestamp } from "util/dateTimeUtils";
2121
import { RightContext } from "./rightContext";
2222
import { modulesSelector } from "../../../redux/selectors/applicationSelector";
2323
import { ComListTitle, ExtensionContentWrapper } from "./styledComponent";
24-
import { foldersSelector } from "@lowcoder-ee/redux/selectors/folderSelector";
2524

2625
const ItemWrapper = styled.div`
27-
display: flex;
28-
flex-direction: row;
29-
margin-bottom: 12px;
30-
&:last-child {
31-
margin-bottom: 0;
32-
}
33-
&:hover {
34-
cursor: grab;
26+
display: flex;
27+
flex-direction: row;
28+
margin-bottom: 12px;
29+
&:last-child {
30+
margin-bottom: 0;
31+
}
32+
&:hover {
33+
cursor: grab;
34+
.module-icon {
35+
box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
36+
border-color: ${BorderActiveShadowColor};
37+
transform: scale(1.2);
38+
}
39+
.module-name {
40+
color: ${ActiveTextColor};
41+
}
42+
}
3543
.module-icon {
36-
box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
37-
border-color: ${BorderActiveShadowColor};
38-
transform: scale(1.2);
44+
transition: all 200ms linear;
45+
margin-right: 8px;
46+
width: 40px;
47+
height: 40px;
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
border: 1px solid ${BorderColor};
52+
border-radius: 4px;
53+
}
54+
.module-content {
55+
flex: 1;
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: space-around;
59+
overflow: hidden;
3960
}
4061
.module-name {
41-
color: ${ActiveTextColor};
62+
line-height: 1.5;
63+
font-size: 13px;
64+
overflow: hidden;
65+
white-space: nowrap;
66+
text-overflow: ellipsis;
4267
}
43-
}
44-
.module-icon {
45-
transition: all 200ms linear;
46-
margin-right: 8px;
47-
width: 40px;
48-
height: 40px;
49-
display: flex;
50-
justify-content: center;
51-
align-items: center;
52-
border: 1px solid ${BorderColor};
53-
border-radius: 4px;
54-
}
55-
.module-content {
56-
flex: 1;
57-
display: flex;
58-
flex-direction: column;
59-
justify-content: space-around;
60-
overflow: hidden;
61-
}
62-
.module-name {
63-
line-height: 1.5;
64-
font-size: 13px;
65-
overflow: hidden;
66-
white-space: nowrap;
67-
text-overflow: ellipsis;
68-
}
69-
.module-desc {
70-
line-height: 1.5;
71-
font-size: 12px;
72-
color: ${GreyTextColor};
73-
}
74-
`;
75-
76-
const FolderWrapper = styled.div`
77-
display: flex;
78-
flex-direction: row;
79-
margin-bottom: 12px;
80-
&:last-child {
81-
margin-bottom: 0;
82-
}
83-
&:hover {
84-
box-shadow: 0 0 5px 0 rgba(49, 94, 251, 0.15);
85-
border-color: ${BorderActiveShadowColor};
86-
cursor: pointer;
87-
transform: scale(1.03);
88-
.folder-name {
89-
color: ${ActiveTextColor};
68+
.module-desc {
69+
line-height: 1.5;
70+
font-size: 12px;
71+
color: ${GreyTextColor};
9072
}
91-
}
92-
.folder-icon {
93-
transition: all 200ms linear;
94-
margin-right: 8px;
95-
width: 40px;
96-
height: 40px;
97-
display: flex;
98-
justify-content: center;
99-
align-items: center;
100-
border-radius: 4px;
101-
}
102-
.folder-content {
103-
flex: 1;
104-
display: flex;
105-
flex-direction: column;
106-
justify-content: space-around;
107-
overflow: hidden;
108-
}
109-
.folder-name {
110-
line-height: 1.5;
111-
font-size: 13px;
112-
overflow: hidden;
113-
white-space: nowrap;
114-
text-overflow: ellipsis;
115-
}
116-
.folder-desc {
117-
line-height: 1.5;
118-
font-size: 12px;
119-
color: ${GreyTextColor};
120-
}
12173
`;
12274

12375
interface ModuleItemProps {
124-
meta: ApplicationMeta;
125-
onDrag: (type: string) => void;
126-
}
127-
128-
interface FolderItemProps {
129-
meta: FolderMeta;
76+
meta: ApplicationMeta;
77+
onDrag: (type: string) => void;
13078
}
13179

13280
function ModuleItem(props: ModuleItemProps) {
133-
const compType = "module";
134-
const { meta } = props;
135-
return (
136-
<ItemWrapper
137-
draggable
138-
onDragStart={(e) => {
139-
e.dataTransfer.setData("compType", compType);
140-
e.dataTransfer.setDragImage(TransparentImg, 0, 0);
141-
draggingUtils.setData("compType", compType);
142-
draggingUtils.setData(
143-
"compLayout",
144-
meta.containerSize
145-
? { w: meta.containerSize.width, h: meta.containerSize.height }
146-
: undefined
147-
);
148-
draggingUtils.setData("compInitialValue", {
149-
appId: props.meta.applicationId,
150-
});
151-
props.onDrag(compType);
152-
}}
153-
>
154-
<div className="module-icon">
155-
<ModuleDocIcon width="19px" />
156-
</div>
157-
<div className="module-content">
158-
<div className="module-name">{props.meta.name}</div>
159-
<div className="module-desc">{formatTimestamp(props.meta.createAt)}</div>
160-
</div>
161-
</ItemWrapper>
162-
);
81+
const compType = "module";
82+
const { meta } = props;
83+
return (
84+
<ItemWrapper
85+
draggable
86+
onDragStart={(e) => {
87+
e.dataTransfer.setData("compType", compType);
88+
e.dataTransfer.setDragImage(TransparentImg, 0, 0);
89+
draggingUtils.setData("compType", compType);
90+
draggingUtils.setData(
91+
"compLayout",
92+
meta.containerSize
93+
? { w: meta.containerSize.width, h: meta.containerSize.height }
94+
: undefined
95+
);
96+
draggingUtils.setData("compInitialValue", {
97+
appId: props.meta.applicationId,
98+
});
99+
props.onDrag(compType);
100+
}}
101+
>
102+
<div className="module-icon">
103+
<ModuleDocIcon width="19px" />
104+
</div>
105+
<div className="module-content">
106+
<div className="module-name">{props.meta.name}</div>
107+
<div className="module-desc">{formatTimestamp(props.meta.createAt)}</div>
108+
</div>
109+
</ItemWrapper>
110+
);
163111
}
164112

165113
export default function ModulePanel() {
166-
const dispatch = useDispatch();
167-
const modules = useSelector(modulesSelector);
168-
const folders = useSelector(foldersSelector);
169-
const { onDrag, searchValue } = useContext(RightContext);
170-
const { applicationId } = useContext(ExternalEditorContext);
171-
const [isSubItems, setIsSubItems] = useState(false);
172-
// const [subApplications : ApplicationMeta[], setSubApplications] = useState([]);
173-
const [subModuleApp, setSubModuleApp] = useState<ApplicationMeta[]>([]);
174-
175-
const appArray = () => {
176-
const appIdArray: any[] = [];
177-
folders.map(i => (i.subApplications?.map(p =>(appIdArray.push(p.applicationId)))))
178-
return appIdArray;
179-
}
180-
function FolderItem(props: FolderItemProps) {
181-
const { meta } = props;
182-
183-
const handleClick = () => {
184-
setIsSubItems(true);
185-
setSubModuleApp(meta.subApplications || []);
186-
console.log(meta.subApplications);
187-
};
188-
return (
189-
<FolderWrapper onClick={handleClick}>
190-
<div className="folder-icon">
191-
<FolderIcon width="35px"/>
192-
</div>
193-
<div className="folder-content">
194-
<div className="folder-name">{meta.name}</div>
195-
</div>
196-
</FolderWrapper>
197-
);
198-
}
199-
200-
201-
const appIdArray = appArray();
202-
203-
useEffect(() => {
204-
dispatch(fetchAllModules({}));
205-
}, [dispatch]);
206-
207-
const filteredModules = modules.filter((i) => {
208-
if (appIdArray.includes(i.applicationId))
209-
return false;
210-
if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) {
211-
return false;
212-
}
213-
return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim();
214-
});
215-
216-
const subModules = (apps: ApplicationMeta[] | undefined) => apps?.filter((i) => {
217-
if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) {
218-
return false;
219-
}
220-
return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim();
221-
});
222-
223-
224-
// @ts-ignore
225-
const subItems = subModules(subModuleApp).map((i) => (
226-
<ModuleItem onDrag={onDrag} key={i.applicationId} meta={i} />
227-
));
228-
229-
const items = filteredModules.map((i) => (
230-
<ModuleItem onDrag={onDrag} key={i.applicationId} meta={i} />
231-
));
232-
233-
const folderItems = folders.map((i) => {
234-
return <FolderItem key={i.folderId} meta={i} />
235-
});
236-
const empty = (
237-
<EmptyContent
238-
text={
114+
const dispatch = useDispatch();
115+
const modules = useSelector(modulesSelector);
116+
const { onDrag, searchValue } = useContext(RightContext);
117+
const { applicationId } = useContext(ExternalEditorContext);
118+
119+
useEffect(() => {
120+
dispatch(fetchAllModules({}));
121+
}, [dispatch]);
122+
123+
const filteredModules = modules.filter((i) => {
124+
if (i.applicationId === applicationId || i.applicationType !== AppTypeEnum.Module) {
125+
return false;
126+
}
127+
return i.name?.toLowerCase()?.includes(searchValue.trim()?.toLowerCase()) || !searchValue?.trim();
128+
});
129+
130+
const items = filteredModules.map((i) => (
131+
<ModuleItem onDrag={onDrag} key={i.applicationId} meta={i} />
132+
));
133+
const empty = (
134+
<EmptyContent
135+
text={
136+
<>
137+
<p>{trans("rightPanel.emptyModules")}</p>
138+
<CreateAppButton
139+
type={AppTypeEnum.Module}
140+
onSuccess={(app) => {
141+
const appId = app.applicationInfoView.applicationId;
142+
const url = APPLICATION_VIEW_URL(appId, "edit");
143+
window.open(url);
144+
}}
145+
/>
146+
</>
147+
}
148+
/>
149+
);
150+
return (
239151
<>
240-
<p>{trans("rightPanel.emptyModules")}</p>
241-
<CreateAppButton
242-
type={AppTypeEnum.Module}
243-
onSuccess={(app) => {
244-
const appId = app.applicationInfoView.applicationId;
245-
const url = APPLICATION_VIEW_URL(appId, "edit");
246-
window.open(url);
247-
}}
248-
/>
249-
</>
250-
}
251-
/>
252-
);
253-
return (
254-
<>
255-
{
256-
isSubItems ? <>
257-
<ComListTitle>{trans("rightPanel.moduleListTitle")}</ComListTitle>
258-
<FolderWrapper onClick={() => (setIsSubItems(false))}>
259-
<div className="folder-icon">
260-
<FolderIcon width="35px"/>
261-
</div>
262-
<div className="folder-content">
263-
<div className="folder-name">. . .</div>
264-
</div>
265-
</FolderWrapper>
266-
<ExtensionContentWrapper>{subItems.length > 0 ? subItems : null}</ExtensionContentWrapper>
267-
</> :
268-
<ExtensionContentWrapper>
269-
{folderItems.length > 0 ? <>
270-
<ComListTitle>{trans("rightPanel.folderListTitle")}</ComListTitle>
271-
{folderItems}
272-
</> : null}
273152
<ComListTitle>{trans("rightPanel.moduleListTitle")}</ComListTitle>
274-
{items.length > 0 ? items : empty}
275-
</ExtensionContentWrapper>
276-
}
277-
</>
278-
);
153+
<ExtensionContentWrapper>{items.length > 0 ? items : empty}</ExtensionContentWrapper>
154+
</>
155+
);
279156
}

0 commit comments

Comments
 (0)