Skip to content

Commit b20c196

Browse files
committed
Fixed MultiIcon styled issue
1 parent bc86b04 commit b20c196

File tree

8 files changed

+23
-24
lines changed

8 files changed

+23
-24
lines changed

client/packages/lowcoder/src/components/resultPanel/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { DarkActiveTextColor, GreyTextColor } from "../../constants/style";
99
import { default as AntdTable } from "antd/es/table";
1010
import { Switch } from "components/Switch";
1111
import {MultiIconDisplay} from "@lowcoder-ee/comps/comps/multiIconDisplay";
12-
import {CloseIcon, SuccessIcon} from "icons";
12+
import {CloseIcon, ErrorIcon, SuccessIcon} from "icons";
1313

1414
export const HeaderWrapper = styled.div`
1515
display: flex;
@@ -236,7 +236,7 @@ export function useResultPanel(params: BottomResCompResult & { onClose: () => vo
236236
header: (
237237
<>
238238
<HeaderTitle>
239-
<IconWrapper>{success ? <MultiIconDisplay identifier={SuccessIcon} /> : <MultiIconDisplay identifier="/icon:svg/ErrorIcon" />}</IconWrapper>
239+
<IconWrapper>{success ? <MultiIconDisplay identifier={SuccessIcon} /> : <MultiIconDisplay identifier={ErrorIcon} />}</IconWrapper>
240240
{title}
241241
{runTime ? (
242242
<TimeLabel>

client/packages/lowcoder/src/comps/comps/multiIconDisplay.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ const appendStyleSuffix = (name: string) => {
5555

5656
// Multi icon Display Component
5757

58-
const baseMultiIconDisplay: React.FC<any> = ({identifier, width = '24px', height = '24px', style}) => {
58+
const baseMultiIconDisplay: React.FC<any> = (props) => {
59+
const {identifier, width, height, style, ...others} = props;
5960

6061
const iconData = parseIconIdentifier(identifier);
6162

@@ -84,7 +85,7 @@ const baseMultiIconDisplay: React.FC<any> = ({identifier, width = '24px', height
8485
style={{width, height, ...style,}}/>;
8586
} else if (iconData.type === 'customize') {
8687
const Icon = iconData.data as React.FC<any>; //TreeSelectCompIcon
87-
return <Suspense fallback={null}><Icon style={{width: width, height: height, ...style}}/></Suspense>;
88+
return <Suspense fallback={null}><Icon {...others} style={{width, height, ...style}}/></Suspense>;
8889
} else {
8990
return null; // Unknown type
9091
}

client/packages/lowcoder/src/comps/index-test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ var uiCompMap: Registry = {
238238
enName: "Table",
239239
description: trans("uiComp.tableCompDesc"),
240240
categories: ["dashboards", "projectmanagement"],
241-
icon:MultiIcon("/icon:svg/TableCompIcon" ),
241+
icon:MultiIcon(TableCompIcon),
242242
keywords: trans("uiComp.tableCompKeywords"),
243243
comp: TableComp,
244244
layoutInfo: {

client/packages/lowcoder/src/pages/ApplicationV2/MarketplaceResCard.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,6 @@ const MONTH_MILLIS = 30 * 24 * 60 * 60 * 1000;
147147
export function MarketplaceResCard(props: { res: HomeRes; }) {
148148
const { res } = props;
149149

150-
console.log(res);
151-
152150
const subTitle = trans("home.resCardSubTitle", { time: timestampToHumanReadable(res.lastModifyTime, MONTH_MILLIS), creator: res.creator});
153151

154152
const resInfo = HomeResInfo[res.type];

client/packages/lowcoder/src/pages/ApplicationV2/index.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,13 @@ export default function ApplicationHome() {
211211
text: <TabLabel>{trans("home.profile")}</TabLabel>,
212212
routePath: USER_PROFILE_URL,
213213
routeComp: UserProfileView,
214-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={UserIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/UserIcon" {...otherProps} width={"24px"}/>,
214+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={UserIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={UserIcon} {...otherProps} width={"24px"}/>,
215215
},
216216
{
217217
text: <TabLabel>{trans("home.news")}</TabLabel>,
218218
routePath: NEWS_URL,
219219
routeComp: NewsView,
220-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={NewsIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/NewsIcon" {...otherProps} width={"24px"}/>,
220+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={NewsIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={NewsIcon} {...otherProps} width={"24px"}/>,
221221
visible: ({ user }) => user.orgDev,
222222
style: { color: "red" },
223223
},
@@ -226,15 +226,15 @@ export default function ApplicationHome() {
226226
routePath: ORG_HOME_URL,
227227
routePathExact: false,
228228
routeComp: OrgView,
229-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={WorkspacesIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/WorkspacesIcon" {...otherProps} width={"24px"}/>,
229+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={WorkspacesIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={WorkspacesIcon} {...otherProps} width={"24px"}/>,
230230
visible: ({ user }) => !user.orgDev,
231231
},
232232
{
233233
text: <TabLabel>{trans("home.marketplace")}</TabLabel>,
234234
routePath: MARKETPLACE_URL,
235235
routePathExact: false,
236236
routeComp: MarketplaceView,
237-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={MarketplaceIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/MarketplaceIcon" {...otherProps} width={"24px"}/>,
237+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={MarketplaceIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={MarketplaceIcon} {...otherProps} width={"24px"}/>,
238238
},
239239
]
240240
},
@@ -245,13 +245,13 @@ export default function ApplicationHome() {
245245
text: <MoreFoldersWrapper>{trans("home.allFolders")}</MoreFoldersWrapper>,
246246
routePath: FOLDERS_URL,
247247
routeComp: RootFolderListView,
248-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={FolderIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/FolderIcon" {...otherProps} width={"24px"}/>,
248+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={FolderIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={FolderIcon} {...otherProps} width={"24px"}/>,
249249
},
250250
{
251251
text: <TabLabel>{trans("home.allApplications")}</TabLabel>,
252252
routePath: ALL_APPLICATIONS_URL,
253253
routeComp: HomeView,
254-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={AppsIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/AppsIcon" {...otherProps} width={"24px"}/>,
254+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={AppsIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={AppsIcon} {...otherProps} width={"24px"}/>,
255255
},
256256
],
257257
},
@@ -263,15 +263,15 @@ export default function ApplicationHome() {
263263
text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
264264
routePath: QUERY_LIBRARY_URL,
265265
routeComp: QueryLibraryEditor,
266-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={HomeQueryLibraryIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/HomeQueryLibraryIcon" {...otherProps} width={"24px"}/>,
266+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={HomeQueryLibraryIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={HomeQueryLibraryIcon} {...otherProps} width={"24px"}/>,
267267
visible: ({ user }) => user.orgDev,
268268
},
269269
{
270270
text: <TabLabel>{trans("home.datasource")}</TabLabel>,
271271
routePath: DATASOURCE_URL,
272272
routePathExact: false,
273273
routeComp: DatasourceHome,
274-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={HomeDataSourceIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/HomeDataSourceIcon" {...otherProps} width={"24px"}/>,
274+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={HomeDataSourceIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={HomeDataSourceIcon} {...otherProps} width={"24px"}/>,
275275
visible: ({ user }) => user.orgDev,
276276
onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
277277
},
@@ -284,7 +284,7 @@ export default function ApplicationHome() {
284284
routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
285285
routePathExact: false,
286286
routeComp: AppEditor,
287-
icon: ({ selected, ...otherProps }) => selected ? ( <MultiIconDisplay identifier={EnterpriseIcon} {...otherProps} width={"24px"}/> ) : ( <MultiIconDisplay identifier="/icon:svg/EnterpriseIcon" {...otherProps} width={"24px"}/> ),
287+
icon: ({ selected, ...otherProps }) => selected ? ( <MultiIconDisplay identifier={EnterpriseIcon} {...otherProps} width={"24px"}/> ) : ( <MultiIconDisplay identifier={EnterpriseIcon} {...otherProps} width={"24px"}/> ),
288288
visible: ({ user }) => user.orgDev,
289289
},
290290
],
@@ -309,7 +309,7 @@ export default function ApplicationHome() {
309309
routePath: SETTING_URL,
310310
routePathExact: false,
311311
routeComp: Setting,
312-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={HomeSettingIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/HomeSettingIcon" {...otherProps} width={"24px"}/>,
312+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={HomeSettingIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={HomeSettingIcon} {...otherProps} width={"24px"}/>,
313313
visible: ({ user }) => user.orgDev,
314314
onSelected: (_, currentPath) => currentPath.split("/")[1] === "setting",
315315
}
@@ -322,7 +322,7 @@ export default function ApplicationHome() {
322322
text: <TabLabel>{trans("home.trash")}</TabLabel>,
323323
routePath: TRASH_URL,
324324
routeComp: TrashView,
325-
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={RecyclerIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier="/icon:svg/RecyclerIcon" {...otherProps} width={"24px"}/>,
325+
icon: ({ selected, ...otherProps }) => selected ? <MultiIconDisplay identifier={RecyclerIcon} {...otherProps} width={"24px"}/> : <MultiIconDisplay identifier={RecyclerIcon} {...otherProps} width={"24px"}/>,
326326
visible: ({ user }) => user.orgDev,
327327
},
328328
],

client/packages/lowcoder/src/pages/editor/LeftContent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
ScrollBar,
99
Tooltip,
1010
UnShow,
11-
TacoButton, LeftClose, LeftCommon, FoldedIcon,
11+
TacoButton, LeftClose, LeftCommon, FoldedIcon, UnfoldIcon,
1212
} from "lowcoder-design";
1313
import React, { ReactNode, useCallback, useContext, useMemo, useState } from "react";
1414
import { hookCompCategory } from "comps/hooks/hookCompTypes";
@@ -493,7 +493,7 @@ export const LeftContent = (props: LeftContentProps) => {
493493
</div>
494494
)}
495495
switcherIcon={(props: any) =>
496-
props.expanded ? <MultiIconDisplay identifier={FoldedIcon} /> : <MultiIconDisplay identifier="/icon:svg/UnfoldIcon" />
496+
props.expanded ? <MultiIconDisplay identifier={FoldedIcon} /> : <MultiIconDisplay identifier={UnfoldIcon} />
497497
}
498498
expandedKeys={expandedKeys}
499499
onExpand={(keys) => setExpandedKeys(keys)}

client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CompInfo, EditorContext } from "comps/editorState";
22
import {
33
BaseSection, FoldedIcon, LeftCommon, LeftShow,
4-
ScrollBar,
4+
ScrollBar, UnfoldIcon,
55
} from "lowcoder-design";
66
import React, { useCallback, useContext, useMemo, useState, useEffect, useRef } from "react";
77
import _, { get, set } from "lodash";
@@ -524,7 +524,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
524524
{CompStateIcon[props.type as UICompType] || <MultiIconDisplay identifier={LeftCommon} />}
525525
</div>
526526
)}
527-
switcherIcon={(props: any) => props.expanded ? <MultiIconDisplay identifier={FoldedIcon} /> : <MultiIconDisplay identifier="/icon:svg/UnfoldIcon" />}
527+
switcherIcon={(props: any) => props.expanded ? <MultiIconDisplay identifier={FoldedIcon} /> : <MultiIconDisplay identifier={UnfoldIcon} />}
528528
expandedKeys={expandedKeys}
529529
onExpand={(keys) => setExpandedKeys(keys)}
530530
titleRender={(nodeData) => getTreeNode(nodeData as NodeItem, uiCompInfos)}

client/packages/lowcoder/src/pages/editor/codeEditorPanel.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { CompNameContext } from "../../comps/editorState";
1010
import { isEmpty } from "lodash";
1111
import { trans } from "i18n";
1212
import {MultiIcon, MultiIconDisplay} from "@lowcoder-ee/comps/comps/multiIconDisplay";
13-
import {CodeEditorCloseIcon, CodeEditorPinnedIcon, CodeEditorUnPinnedIcon, DragIcon} from "icons";
13+
import {CodeEditorCloseIcon, CodeEditorOpenIcon, CodeEditorPinnedIcon, CodeEditorUnPinnedIcon, DragIcon} from "icons";
1414

1515
const Wrapper = styled.div`
1616
max-width: 60vw;
@@ -218,7 +218,7 @@ export const CodeEditorPanel = (props: {
218218
)}
219219
>
220220
<OpenButton className={"code-editor-panel-open-button"} onClick={() => setVisible(true)}>
221-
<MultiIconDisplay identifier={"/icon:svg/CodeEditorOpenIcon"} />
221+
<MultiIconDisplay identifier={CodeEditorOpenIcon} />
222222
</OpenButton>
223223
</Trigger>
224224
);

0 commit comments

Comments
 (0)