From 5919277935c49790e51a4f1756d762aa216f8ba6 Mon Sep 17 00:00:00 2001 From: mou <10402885@qq.com> Date: Fri, 4 Aug 2023 16:29:41 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0antD=E5=9B=BE=E6=A0=87=20ic?= =?UTF-8?q?onControl=20add=20antd=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/iconSelect/index.tsx | 101 +++++++++++++----- .../src/comps/controls/controlParams.tsx | 1 + .../src/comps/controls/dropdownControl.tsx | 1 + .../src/comps/controls/iconControl.tsx | 5 +- 4 files changed, 80 insertions(+), 28 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx index 41f0bcf61..425b19185 100644 --- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx @@ -1,16 +1,24 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import type { IconDefinition } from "@fortawesome/free-regular-svg-icons"; import { Popover } from "antd"; -import { ActionType } from '@rc-component/trigger/lib/interface'; +import { ActionType } from "@rc-component/trigger/lib/interface"; import { TacoInput } from "components/tacoInput"; import { Tooltip } from "components/toolTip"; import { trans } from "i18n/design"; import _ from "lodash"; -import { ReactNode, useEffect, useCallback, useMemo, useRef, useState } from "react"; +import { + ReactNode, + useEffect, + useCallback, + useMemo, + useRef, + useState, +} from "react"; import Draggable from "react-draggable"; import { List, ListRowProps } from "react-virtualized"; import styled from "styled-components"; import { CloseIcon, SearchIcon } from "icons"; +import { ANTDICON } from "../../../../lowcoder/src/comps/comps/timelineComp/antIcon"; const PopupContainer = styled.div` width: 408px; @@ -110,11 +118,23 @@ const IconItemContainer = styled.div` class Icon { readonly title: string; - constructor(readonly def: IconDefinition, readonly names: string[]) { - this.title = def.iconName.split("-").map(_.upperFirst).join(" "); + constructor(readonly def: IconDefinition | any, readonly names: string[]) { + if (def?.iconName) { + this.title = def.iconName.split("-").map(_.upperFirst).join(" "); + } else { + this.title = names[0].slice(5); + this.def = def; + } } getView() { - return ; + if (this.names[0].startsWith("antd/")) return this.def; + else + return ( + + ); } } @@ -144,6 +164,13 @@ async function getAllIcons() { } } } + //append ant icon + for (let key of Object.keys(ANTDICON)) { + ret["antd/" + key] = new Icon( + ANTDICON[key.toLowerCase() as keyof typeof ANTDICON], + ["antd/" + key] + ); + } allIcons = ret; return ret; } @@ -151,7 +178,11 @@ async function getAllIcons() { export const iconPrefix = "/icon:"; export function removeQuote(value?: string) { - return value ? (value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value) : ""; + return value + ? value.startsWith('"') && value.endsWith('"') + ? value.slice(1, -1) + : value + : ""; } function getIconKey(value?: string) { @@ -171,7 +202,8 @@ export function useIcon(value?: string) { function search( allIcons: Record, searchText: string, - searchKeywords?: Record + searchKeywords?: Record, + IconType?: "OnlyAntd" | "All" | "default" | undefined ) { const tokens = searchText .toLowerCase() @@ -182,6 +214,8 @@ function search( if (icon.names.length === 0) { return false; } + if (IconType === "OnlyAntd" && !key.startsWith("antd/")) return false; + if (IconType === "default" && key.startsWith("antd/")) return false; let text = icon.names .flatMap((name) => [name, searchKeywords?.[name]]) .filter((t) => t) @@ -198,16 +232,20 @@ const IconPopup = (props: { label?: ReactNode; onClose: () => void; searchKeywords?: Record; + IconType?: "OnlyAntd" | "All" | "default" | undefined; }) => { const [searchText, setSearchText] = useState(""); const [allIcons, setAllIcons] = useState>({}); const searchResults = useMemo( - () => search(allIcons, searchText, props.searchKeywords), + () => search(allIcons, searchText, props.searchKeywords, props.IconType), [searchText, allIcons] ); const onChangeRef = useRef(props.onChange); onChangeRef.current = props.onChange; - const onChangeIcon = useCallback((key: string) => onChangeRef.current(iconPrefix + key), []); + const onChangeIcon = useCallback( + (key: string) => onChangeRef.current(iconPrefix + key), + [] + ); const columnNum = 8; useEffect(() => { @@ -217,24 +255,26 @@ const IconPopup = (props: { const rowRenderer = useCallback( (p: ListRowProps) => ( - {searchResults.slice(p.index * columnNum, (p.index + 1) * columnNum).map(([key, icon]) => ( - - { - onChangeIcon(key); - }} + {searchResults + .slice(p.index * columnNum, (p.index + 1) * columnNum) + .map(([key, icon]) => ( + - {icon.getView()} - - - ))} + { + onChangeIcon(key); + }} + > + {icon.getView()} + + + ))} ), [searchResults, allIcons, onChangeIcon] @@ -279,6 +319,7 @@ export const IconSelectBase = (props: { leftOffset?: number; parent?: HTMLElement | null; searchKeywords?: Record; + IconType?: "OnlyAntd" | "All" | "default" | undefined; }) => { const { setVisible, parent } = props; return ( @@ -290,7 +331,11 @@ export const IconSelectBase = (props: { onOpenChange={setVisible} getPopupContainer={parent ? () => parent : undefined} // hide the original background when dragging the popover is allowed - overlayInnerStyle={{ border: "none", boxShadow: "none", background: "transparent" }} + overlayInnerStyle={{ + border: "none", + boxShadow: "none", + background: "transparent", + }} // when dragging is allowed, always re-location to avoid the popover exceeds the screen destroyTooltipOnHide content={ @@ -299,6 +344,7 @@ export const IconSelectBase = (props: { label={props.label} onClose={() => setVisible?.(false)} searchKeywords={props.searchKeywords} + IconType={props.IconType} /> } > @@ -312,6 +358,7 @@ export const IconSelect = (props: { label?: ReactNode; children?: ReactNode; searchKeywords?: Record; + IconType?: "OnlyAntd" | "All" | "default" | undefined; }) => { const [visible, setVisible] = useState(false); return ( diff --git a/client/packages/lowcoder/src/comps/controls/controlParams.tsx b/client/packages/lowcoder/src/comps/controls/controlParams.tsx index 0ee9de8e6..7b84c439d 100644 --- a/client/packages/lowcoder/src/comps/controls/controlParams.tsx +++ b/client/packages/lowcoder/src/comps/controls/controlParams.tsx @@ -18,6 +18,7 @@ export interface ControlParams extends CodeEditorControlParams { preInputNode?: ReactNode; childrenWrapperStyle?: CSSProperties; extraChildren?: ReactNode; + IconType?: "OnlyAntd" | "All" | "default" | undefined; } export interface ControlType { diff --git a/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx b/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx index 211dd0910..838b98a34 100644 --- a/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/dropdownControl.tsx @@ -28,6 +28,7 @@ interface DropdownControlParams extends ControlParams { showSearch?: boolean; dropdownStyle?: React.CSSProperties; labelStyle?: React.CSSProperties; + IconType?: "OnlyAntd" | "All" | "default" | undefined; } interface DropdownPropertyViewProps diff --git a/client/packages/lowcoder/src/comps/controls/iconControl.tsx b/client/packages/lowcoder/src/comps/controls/iconControl.tsx index 26a768b4e..ca954b47d 100644 --- a/client/packages/lowcoder/src/comps/controls/iconControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/iconControl.tsx @@ -75,6 +75,7 @@ const IconPicker = (props: { value: string; onChange: (value: string) => void; label?: ReactNode; + IconType?: "OnlyAntd" | "All" | "default" | undefined; }) => { const icon = useIcon(props.value); return ( @@ -82,6 +83,7 @@ const IconPicker = (props: { onChange={props.onChange} label={props.label} searchKeywords={i18nObjs.iconSearchKeywords} + IconType={props.IconType} > {icon ? ( @@ -251,7 +253,7 @@ export class IconControl extends AbstractComp - {this.useCodeEditor && } + {this.useCodeEditor && } ); } @@ -262,6 +264,7 @@ export class IconControl extends AbstractComp this.dispatchChangeValueAction(x)} label={params.label} + IconType={params.IconType} /> )} From f3cb6746830fb915b42e184bf7ed30922875f8c5 Mon Sep 17 00:00:00 2001 From: mou <10402885@qq.com> Date: Wed, 9 Aug 2023 09:55:58 +0800 Subject: [PATCH 2/5] add_icon_component --- .../src/icons/IconCompIcon.svg | 1 + .../lowcoder-design/src/icons/index.ts | 2 + .../lowcoder/src/comps/comps/iconComp.tsx | 142 ++++++++++++++++++ .../comps/controls/styleControlConstants.tsx | 5 + client/packages/lowcoder/src/comps/index.tsx | 16 ++ .../lowcoder/src/comps/uiCompRegistry.ts | 1 + .../packages/lowcoder/src/i18n/locales/en.ts | 8 + .../packages/lowcoder/src/i18n/locales/zh.ts | 33 ++++ .../src/pages/editor/editorConstants.tsx | 2 + 9 files changed, 210 insertions(+) create mode 100644 client/packages/lowcoder-design/src/icons/IconCompIcon.svg create mode 100644 client/packages/lowcoder/src/comps/comps/iconComp.tsx diff --git a/client/packages/lowcoder-design/src/icons/IconCompIcon.svg b/client/packages/lowcoder-design/src/icons/IconCompIcon.svg new file mode 100644 index 000000000..ce549b56c --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/IconCompIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index 4ac1b051e..6d620cf46 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -291,3 +291,5 @@ export { ReactComponent as TimeLineIcon } from "icons/icon-timeline-comp.svg" export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg"; export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg"; export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg"; + +export { ReactComponent as IconCompIcon } from "icons/IconCompIcon.svg"; \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx new file mode 100644 index 000000000..41b73da71 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx @@ -0,0 +1,142 @@ +import { useEffect, useRef, useState } from "react"; +import styled, { css } from "styled-components"; +import { RecordConstructorToView } from "lowcoder-core"; +import { styleControl } from "comps/controls/styleControl"; +import _ from "lodash"; +import { + IconStyle, + IconStyleType, + heightCalculator, + widthCalculator, +} from "comps/controls/styleControlConstants"; +import { UICompBuilder } from "comps/generators/uiCompBuilder"; +import { withDefault } from "../generators"; +import { + NameConfigHidden, + withExposingConfigs, +} from "comps/generators/withExposing"; +import { Section, sectionNames } from "lowcoder-design"; +import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { NumberControl } from "comps/controls/codeControl"; +import { IconControl } from "comps/controls/iconControl"; +import ReactResizeDetector from "react-resize-detector"; +import { AutoHeightControl } from "../controls/autoHeightControl"; +import { + clickEvent, + eventHandlerControl, +} from "../controls/eventHandlerControl"; + +const Container = styled.div<{ $style: IconStyleType | undefined }>` + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + svg { + object-fit: contain; + pointer-events: auto; + } + ${(props) => props.$style && getStyle(props.$style)} +`; + +const getStyle = (style: IconStyleType) => { + return css` + svg { + color: ${style.fill}; + } + padding: ${style.padding}; + border: 1px solid ${style.border}; + border-radius: ${style.radius}; + margin: ${style.margin}; + max-width: ${widthCalculator(style.margin)}; + max-height: ${heightCalculator(style.margin)}; + `; +}; + +const EventOptions = [clickEvent] as const; + +const childrenMap = { + style: styleControl(IconStyle), + icon: withDefault(IconControl, "/icon:antd/homefilled"), + autoHeight: withDefault(AutoHeightControl, "auto"), + iconSize: withDefault(NumberControl, 20), + onEvent: eventHandlerControl(EventOptions), +}; + +const IconView = (props: RecordConstructorToView) => { + const conRef = useRef(null); + const [width, setWidth] = useState(0); + const [height, setHeight] = useState(0); + + useEffect(() => { + if (height && width) { + onResize(); + } + }, [height, width]); + + const onResize = () => { + const container = conRef.current; + setWidth(container?.clientWidth ?? 0); + setHeight(container?.clientHeight ?? 0); + }; + + return ( + + props.onEvent("click")} + > + {props.icon} + + + ); +}; + +let IconBasicComp = (function () { + return new UICompBuilder(childrenMap, (props) => ) + .setPropertyViewFn((children) => ( + <> +
+ {children.icon.propertyView({ + label: trans("iconComp.icon"), + IconType: "All", + })} + {children.autoHeight.propertyView({ + label: trans("iconComp.autoSize"), + })} + {!children.autoHeight.getView() && + children.iconSize.propertyView({ + label: trans("iconComp.iconSize"), + })} +
+
+ {children.onEvent.getPropertyView()} +
+
+ {hiddenPropertyView(children)} +
+
+ {children.style.getPropertyView()} +
+ + )) + .build(); +})(); + +IconBasicComp = class extends IconBasicComp { + override autoHeight(): boolean { + return false; + } +}; + +export const IconComp = withExposingConfigs(IconBasicComp, [ + NameConfigHidden, +]); diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 5d650faea..ca58c2836 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -775,6 +775,10 @@ export const NavigationStyle = [ export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, MARGIN, PADDING] as const; +export const IconStyle = [getStaticBackground("#00000000"), + getStaticBorder("#00000000"), FILL, RADIUS, MARGIN, PADDING] as const; + + export const ListViewStyle = BG_STATIC_BORDER_RADIUS; export const JsonSchemaFormStyle = BG_STATIC_BORDER_RADIUS; @@ -934,6 +938,7 @@ export type DividerStyleType = StyleConfigType; export type ProgressStyleType = StyleConfigType; export type NavigationStyleType = StyleConfigType; export type ImageStyleType = StyleConfigType; +export type IconStyleType = StyleConfigType; export type ListViewStyleType = StyleConfigType; export type JsonSchemaFormStyleType = StyleConfigType; export type TreeSelectStyleType = StyleConfigType; diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index 5dc0f2923..b70906d20 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -96,6 +96,7 @@ import { LottieIcon, MentionIcon, AutoCompleteCompIcon, + IconCompIcon, } from "lowcoder-design"; import { defaultFormData, FormComp } from "./comps/formComp/formComp"; @@ -124,6 +125,8 @@ import { SignatureComp } from "./comps/signatureComp"; import { TimeLineComp } from "./comps/timelineComp/timelineComp"; import { MentionComp } from "./comps/textInputComp/mentionComp"; import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp" +import { IconComp } from "./comps/iconComp"; + //Added by Aqib Mirza import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; @@ -881,6 +884,19 @@ const uiCompMap: Registry = { h: 5, }, }, + icon: { + name: trans("uiComp.iconCompName"), + enName: "icon", + description: trans("uiComp.iconCompDesc"), + categories: ["dataDisplay"], + icon: IconCompIcon, + keywords: trans("uiComp.iconCompKeywords"), + comp: IconComp, + layoutInfo: { + w: 2, + h: 10, + }, + }, }; export function loadComps() { diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts index 6cd63e920..9ba13b930 100644 --- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts +++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts @@ -114,6 +114,7 @@ export type UICompType = | "timeline" | "mention" | "autocomplete" + | "icon" export const uiCompRegistry = {} as Record; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 941a77767..304651c62 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -853,6 +853,9 @@ export const en = { autoCompleteCompName: "autoComplete", autoCompleteCompDesc: "autoComplete", autoCompleteCompKeywords: "", + iconCompName: "icon", + iconCompDesc: "icon", + iconCompKeywords: "", }, comp: { menuViewDocs: "View documentation", @@ -2505,4 +2508,9 @@ export const en = { helpLabel: "label", helpValue: "value", }, + iconComp: { + icon: "icon", + autoSize: "icon AutoSize", + iconSize: "icon size", + } }; diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index 7fb2416d5..0539f15ca 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -836,6 +836,9 @@ uiComp: { autoCompleteCompName: "自动完成", autoCompleteCompDesc: "自动完成", autoCompleteCompKeywords: "zdwc", + iconCompName: "图标", + iconCompDesc: "图标", + iconCompKeywords: "tb", }, comp: { menuViewDocs: "查看文档", @@ -2495,5 +2498,35 @@ timeLine: { helpLabel: "标签", helpValue: "值", }, + comment: { + value: "评论列表数据", + showSendButton: "允许评论", + title: "标题", + titledDefaultValue: "共有%d条评论", + placeholder: "shift + enter 快捷发送评论;输入@或#可快速输入", + placeholderDec: "占位符", + buttonTextDec: "按钮文本", + buttonText: "发表", + mentionList: "提及列表数据", + mentionListDec: "key-提及关键字;value-提及列表", + userInfo: "用户信息", + dateErr: "日期错误", + commentList: "评论列表数据", + deletedItem: "已删除的数据", + submitedItem: "已提交的数据", + deleteAble: "显示删除按钮", + Introduction: "属性介绍", + helpUser: "用户信息(必填)", + helpname: "用户名(必填)", + helpavatar: "头像地址(高优先)", + helpdisplayName: "头像文字(低优先)", + helpvalue: "评论内容", + helpcreatedAt: "创建时间", + }, + iconComp: { + icon: "图标", + autoSize: "图标自动大小", + iconSize: "图标大小", + } }; diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx index a09a9a56e..cd3c81c3a 100644 --- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx @@ -39,6 +39,7 @@ import { TimeLineIcon, MentionIcon, AutoCompleteCompIcon, + IconCompIcon, } from "lowcoder-design"; export const CompStateIcon: { @@ -107,4 +108,5 @@ export const CompStateIcon: { timeline: , mention: , autocomplete: , + icon: , }; From fd9c3ccfe95ff3de8f2d4f46f43fb86fbdb0e6b6 Mon Sep 17 00:00:00 2001 From: mou <10402885@qq.com> Date: Wed, 9 Aug 2023 10:26:48 +0800 Subject: [PATCH 3/5] fix_toggle_button_icon_bug --- .../lowcoder-design/src/components/iconSelect/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx index 425b19185..da47c2dab 100644 --- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx @@ -127,7 +127,7 @@ class Icon { } } getView() { - if (this.names[0].startsWith("antd/")) return this.def; + if (this.names[0]?.startsWith("antd/")) return this.def; else return ( Date: Wed, 21 Feb 2024 12:43:52 +0100 Subject: [PATCH 4/5] Add Icon Comp - Fixes --- client/package.json | 1 + .../src/components/iconSelect/index.tsx | 2 + .../lowcoder-design/src/icons/index.ts | 21 ----- client/packages/lowcoder/package.json | 9 ++- client/packages/lowcoder/src/comps/index.tsx | 67 ++++------------ client/yarn.lock | 77 +++++++++++-------- 6 files changed, 70 insertions(+), 107 deletions(-) diff --git a/client/package.json b/client/package.json index fccf0fff1..92d3afa24 100644 --- a/client/package.json +++ b/client/package.json @@ -77,6 +77,7 @@ "chalk": "4", "number-precision": "^1.6.0", "react-player": "^2.11.0", + "remixicon-react": "^1.0.0", "tui-image-editor": "^3.15.3" } } diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx index ac3264aa2..7ffc8cc72 100644 --- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx @@ -1,5 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import type { IconDefinition } from "@fortawesome/free-regular-svg-icons"; +import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons"; import { Popover } from "antd"; import { ActionType } from "@rc-component/trigger/lib/interface"; import { TacoInput } from "components/tacoInput"; @@ -147,6 +148,7 @@ async function getAllIcons() { const [{ far }, { fas }] = await Promise.all([ import("@fortawesome/free-regular-svg-icons"), import("@fortawesome/free-solid-svg-icons"), + // import("@fontawesome/free-brands-svg-icons"), ]); const ret: Record = {}; for (const [type, pack] of Object.entries({ solid: fas, regular: far })) { diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index 662c4b0ed..1eee6b5e2 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -278,28 +278,7 @@ export { ReactComponent as SignatureIcon } from "./icon-signature.svg"; export { ReactComponent as ManualIcon } from "./icon-manual.svg"; export { ReactComponent as WarnIcon } from "./icon-warn.svg"; export { ReactComponent as SyncManualIcon } from "./icon-sync-manual.svg"; - -export { ReactComponent as DangerIcon } from "icons/icon-danger.svg"; -export { ReactComponent as TableMinusIcon } from "icons/icon-table-minus.svg"; -export { ReactComponent as TablePlusIcon } from "icons/icon-table-plus.svg"; -export { ReactComponent as MobileAppIcon } from "icons/icon-mobile-app.svg"; -export { ReactComponent as MobileNavIcon } from "icons/icon-navigation-mobile.svg"; -export { ReactComponent as PcNavIcon } from "icons/icon-navigation-pc.svg"; -export { ReactComponent as UnLockIcon } from "icons/icon-unlock.svg"; -export { ReactComponent as CalendarDeleteIcon } from "icons/icon-calendar-delete.svg"; -export { ReactComponent as TableCheckedIcon } from "icons/icon-table-checked.svg"; -export { ReactComponent as TableUnCheckedIcon } from "icons/icon-table-boolean-false.svg"; -export { ReactComponent as FileFolderIcon } from "icons/icon-editor-folder.svg"; -export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg"; -export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"; -export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg"; // Added By Aqib Mirza -export { ReactComponent as TimeLineIcon } from "icons/icon-timeline-comp.svg" -export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg"; -export { ReactComponent as MentionIcon } from "icons/icon-mention-comp.svg"; -export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg"; - export { ReactComponent as IconCompIcon } from "icons/IconCompIcon.svg"; - export { ReactComponent as DangerIcon } from "./icon-danger.svg"; export { ReactComponent as TableMinusIcon } from "./icon-table-minus.svg"; export { ReactComponent as TablePlusIcon } from "./icon-table-plus.svg"; diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json index 1e8e50789..addc573f8 100644 --- a/client/packages/lowcoder/package.json +++ b/client/packages/lowcoder/package.json @@ -6,7 +6,7 @@ "main": "src/index.sdk.ts", "types": "src/index.sdk.ts", "dependencies": { - "@ant-design/icons": "^4.7.0", + "@ant-design/icons": "^5.3.0", "@codemirror/autocomplete": "^6.11.1", "@codemirror/commands": "^6.3.2", "@codemirror/lang-css": "^6.2.1", @@ -19,9 +19,10 @@ "@dnd-kit/modifiers": "^5.0.0", "@dnd-kit/sortable": "^6.0.0", "@dnd-kit/utilities": "^3.1.0", - "@fortawesome/fontawesome-svg-core": "^6.4.0", - "@fortawesome/free-regular-svg-icons": "^6.4.0", - "@fortawesome/free-solid-svg-icons": "^6.4.0", + "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/free-brands-svg-icons": "^6.5.1", + "@fortawesome/free-regular-svg-icons": "^6.5.1", + "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "latest", "@manaflair/redux-batch": "^1.0.0", "@rjsf/antd": "^5.15.1", diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index 072eec5e9..aebaae3bf 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -67,6 +67,7 @@ import { VideoMeetingStreamComp } from "./comps/meetingComp/videoMeetingStreamCo import { ControlButton } from "./comps/meetingComp/controlButton"; import { VideoMeetingControllerComp } from "./comps/meetingComp/videoMeetingControllerComp"; import { VideoSharingStreamComp } from "./comps/meetingComp/videoSharingStreamComp"; +import { IconComp } from "./comps/iconComp"; import { AudioCompIcon, @@ -130,43 +131,9 @@ import { CommentIcon, MentionIcon, AutoCompleteCompIcon, - - IconCompIcon, -} from "lowcoder-design"; -// from Mousheng -import { defaultFormData, FormComp } from "./comps/formComp/formComp"; -import { IFrameComp } from "./comps/iframeComp"; -import { defaultGridData, defaultListViewData, GridComp, ListViewComp } from "./comps/listViewComp"; -import { ModuleComp } from "./comps/moduleComp/moduleComp"; -import { NavComp } from "./comps/navComp/navComp"; -import { TableComp } from "./comps/tableComp"; -import { registerComp, UICompManifest, UICompType } from "./uiCompRegistry"; -import { QRCodeComp } from "./comps/qrCodeComp"; -import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp"; -import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp"; -import { TreeComp } from "./comps/treeComp/treeComp"; -import { TreeSelectComp } from "./comps/treeComp/treeSelectComp"; -import { trans } from "i18n"; -import { remoteComp } from "./comps/remoteComp/remoteComp"; -import { AudioComp } from "./comps/mediaComp/audioComp"; -import { VideoComp } from "./comps/mediaComp/videoComp"; -import { DrawerComp } from "./hooks/drawerComp"; -import { CarouselComp } from "./comps/carouselComp"; -import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp"; -import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp"; -import { RemoteCompInfo } from "types/remoteComp"; -import { ScannerComp } from "./comps/buttonComp/scannerComp"; -import { SignatureComp } from "./comps/signatureComp"; -import { TimeLineComp } from "./comps/timelineComp/timelineComp"; -import { MentionComp } from "./comps/textInputComp/mentionComp"; -import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp" -import { IconComp } from "./comps/iconComp"; -// from Mousheng - -//Added by Aqib Mirza -import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; ResponsiveLayoutCompIcon, MermaidIcon, + IconCompIcon, } from "lowcoder-design"; type Registry = { @@ -950,6 +917,19 @@ var uiCompMap: Registry = { h: 40, }, }, + icon: { + name: trans("uiComp.iconCompName"), + enName: "icon", + description: trans("uiComp.iconCompDesc"), + categories: ["multimedia"], + icon: IconCompIcon, + keywords: trans("uiComp.iconCompKeywords"), + comp: IconComp, + layoutInfo: { + w: 2, + h: 10, + }, + }, imageEditor: { name: trans("uiComp.imageEditorCompName"), enName: "Image Editor", @@ -1058,23 +1038,6 @@ var uiCompMap: Registry = { }, }, -// from Mousheng - icon: { - name: trans("uiComp.iconCompName"), - enName: "icon", - description: trans("uiComp.iconCompDesc"), - categories: ["dataDisplay"], - icon: IconCompIcon, - keywords: trans("uiComp.iconCompKeywords"), - comp: IconComp, - layoutInfo: { - w: 2, - h: 10, - }, - }, - -// from Mousheng - // Integration iframe: { diff --git a/client/yarn.lock b/client/yarn.lock index 548e5b874..baff44425 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -63,15 +63,6 @@ __metadata: languageName: node linkType: hard -"@ant-design/colors@npm:^6.0.0": - version: 6.0.0 - resolution: "@ant-design/colors@npm:6.0.0" - dependencies: - "@ctrl/tinycolor": ^3.4.0 - checksum: 55110ac8a3353f3ec2d2fdee6ffb841967dd75f3783ef4e68c22731e042606bc5b3c3febb6cd20aed3f14585729ce8eddf75b531c703c06a2e95b8569861bb47 - languageName: node - linkType: hard - "@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.0.2": version: 7.0.2 resolution: "@ant-design/colors@npm:7.0.2" @@ -106,36 +97,42 @@ __metadata: languageName: node linkType: hard -"@ant-design/icons@npm:^4.7.0": - version: 4.8.1 - resolution: "@ant-design/icons@npm:4.8.1" +"@ant-design/icons-svg@npm:^4.4.0": + version: 4.4.2 + resolution: "@ant-design/icons-svg@npm:4.4.2" + checksum: c66cda4533ec2f86162a9adda04be2aba5674d5c758ba886bd9d8de89dc45473ef3124eb755b4cfbd09121d3bdc34e075ee931e47dd0f8a7fdc01be0cb3d6c40 + languageName: node + linkType: hard + +"@ant-design/icons@npm:^5.2.6": + version: 5.2.6 + resolution: "@ant-design/icons@npm:5.2.6" dependencies: - "@ant-design/colors": ^6.0.0 + "@ant-design/colors": ^7.0.0 "@ant-design/icons-svg": ^4.3.0 "@babel/runtime": ^7.11.2 classnames: ^2.2.6 - lodash: ^4.17.15 - rc-util: ^5.9.4 + rc-util: ^5.31.1 peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: abd3603ea951983a8bfa7f4c7e6fcc787ccdc4804faa8bb8641b6904a95cf5fc04753cf636a6c5b5b798f371f4075fddae29684779bb16e2a025b727ab2c8ad3 + checksum: 2f571699b1903383cd09faa78e4cce34973debb0e7ec6223b9d9a0a6ab2b2f0c876072db62bbd4e6a45e864df5447343315e066abeffaf58aa5b97df3acc89f1 languageName: node linkType: hard -"@ant-design/icons@npm:^5.2.6": - version: 5.2.6 - resolution: "@ant-design/icons@npm:5.2.6" +"@ant-design/icons@npm:^5.3.0": + version: 5.3.0 + resolution: "@ant-design/icons@npm:5.3.0" dependencies: "@ant-design/colors": ^7.0.0 - "@ant-design/icons-svg": ^4.3.0 + "@ant-design/icons-svg": ^4.4.0 "@babel/runtime": ^7.11.2 classnames: ^2.2.6 rc-util: ^5.31.1 peerDependencies: react: ">=16.0.0" react-dom: ">=16.0.0" - checksum: 2f571699b1903383cd09faa78e4cce34973debb0e7ec6223b9d9a0a6ab2b2f0c876072db62bbd4e6a45e864df5447343315e066abeffaf58aa5b97df3acc89f1 + checksum: 6b58bb057f0c92b5d1fc5bd062119e070ac0ef86979c011dbae657b54e51bdfc4efd1d7f52cd3e0e05a8f82c81847f86bb4bb7f797154b5fcfc750f4758b4a45 languageName: node linkType: hard @@ -1946,7 +1943,7 @@ __metadata: languageName: node linkType: hard -"@ctrl/tinycolor@npm:^3.4.0, @ctrl/tinycolor@npm:^3.6.1": +"@ctrl/tinycolor@npm:^3.6.1": version: 3.6.1 resolution: "@ctrl/tinycolor@npm:3.6.1" checksum: cefec6fcaaa3eb8ddf193f981e097dccf63b97b93b1e861cb18c645654824c831a568f444996e15ee509f255658ed82fba11c5365494a6e25b9b12ac454099e0 @@ -2336,7 +2333,7 @@ __metadata: languageName: node linkType: hard -"@fortawesome/fontawesome-svg-core@npm:^6.4.0": +"@fortawesome/fontawesome-svg-core@npm:^6.5.1": version: 6.5.1 resolution: "@fortawesome/fontawesome-svg-core@npm:6.5.1" dependencies: @@ -2345,7 +2342,16 @@ __metadata: languageName: node linkType: hard -"@fortawesome/free-regular-svg-icons@npm:^6.4.0": +"@fortawesome/free-brands-svg-icons@npm:^6.5.1": + version: 6.5.1 + resolution: "@fortawesome/free-brands-svg-icons@npm:6.5.1" + dependencies: + "@fortawesome/fontawesome-common-types": 6.5.1 + checksum: c29f8a9ad9886c0733d3616b5ea05b08b4943c1b5231c73f31a07e7df36c337e5a51cfe7cc610e623cb2b4a0607e3f82a8a3f46107c4347aa653784489672314 + languageName: node + linkType: hard + +"@fortawesome/free-regular-svg-icons@npm:^6.5.1": version: 6.5.1 resolution: "@fortawesome/free-regular-svg-icons@npm:6.5.1" dependencies: @@ -2354,7 +2360,7 @@ __metadata: languageName: node linkType: hard -"@fortawesome/free-solid-svg-icons@npm:^6.4.0": +"@fortawesome/free-solid-svg-icons@npm:^6.5.1": version: 6.5.1 resolution: "@fortawesome/free-solid-svg-icons@npm:6.5.1" dependencies: @@ -11622,6 +11628,7 @@ __metadata: number-precision: ^1.6.0 prettier: ^3.1.0 react-player: ^2.11.0 + remixicon-react: ^1.0.0 rimraf: ^3.0.2 rollup: ^2.79.0 shelljs: ^0.8.5 @@ -11665,7 +11672,7 @@ __metadata: version: 0.0.0-use.local resolution: "lowcoder@workspace:packages/lowcoder" dependencies: - "@ant-design/icons": ^4.7.0 + "@ant-design/icons": ^5.3.0 "@codemirror/autocomplete": ^6.11.1 "@codemirror/commands": ^6.3.2 "@codemirror/lang-css": ^6.2.1 @@ -11678,9 +11685,10 @@ __metadata: "@dnd-kit/modifiers": ^5.0.0 "@dnd-kit/sortable": ^6.0.0 "@dnd-kit/utilities": ^3.1.0 - "@fortawesome/fontawesome-svg-core": ^6.4.0 - "@fortawesome/free-regular-svg-icons": ^6.4.0 - "@fortawesome/free-solid-svg-icons": ^6.4.0 + "@fortawesome/fontawesome-svg-core": ^6.5.1 + "@fortawesome/free-brands-svg-icons": ^6.5.1 + "@fortawesome/free-regular-svg-icons": ^6.5.1 + "@fortawesome/free-solid-svg-icons": ^6.5.1 "@fortawesome/react-fontawesome": latest "@manaflair/redux-batch": ^1.0.0 "@rjsf/antd": ^5.15.1 @@ -14398,7 +14406,7 @@ __metadata: languageName: node linkType: hard -"rc-util@npm:^5.0.1, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.25.2, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.28.0, rc-util@npm:^5.30.0, rc-util@npm:^5.31.1, rc-util@npm:^5.32.2, rc-util@npm:^5.34.1, rc-util@npm:^5.35.0, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.8.0, rc-util@npm:^5.9.4": +"rc-util@npm:^5.0.1, rc-util@npm:^5.16.1, rc-util@npm:^5.17.0, rc-util@npm:^5.18.1, rc-util@npm:^5.19.2, rc-util@npm:^5.2.0, rc-util@npm:^5.20.1, rc-util@npm:^5.21.0, rc-util@npm:^5.24.4, rc-util@npm:^5.25.2, rc-util@npm:^5.26.0, rc-util@npm:^5.27.0, rc-util@npm:^5.28.0, rc-util@npm:^5.30.0, rc-util@npm:^5.31.1, rc-util@npm:^5.32.2, rc-util@npm:^5.34.1, rc-util@npm:^5.35.0, rc-util@npm:^5.36.0, rc-util@npm:^5.37.0, rc-util@npm:^5.38.0, rc-util@npm:^5.38.1, rc-util@npm:^5.8.0": version: 5.38.1 resolution: "rc-util@npm:5.38.1" dependencies: @@ -15225,6 +15233,15 @@ __metadata: languageName: node linkType: hard +"remixicon-react@npm:^1.0.0": + version: 1.0.0 + resolution: "remixicon-react@npm:1.0.0" + peerDependencies: + react: ">=0.14.0" + checksum: be7abfb3558c9ed18ccfff5a28bd66dbee4207887682ae7a00c697e6051eadecad0da83f1e83910ed6ddebe7f2ab73e488f0f4c604897605bbb3d8f519f416ed + languageName: node + linkType: hard + "request-promise-core@npm:1.1.4": version: 1.1.4 resolution: "request-promise-core@npm:1.1.4" From 48b46ccdf00ca8f5250369f95fd0fafb70f18a11 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Thu, 22 Feb 2024 21:58:15 +0100 Subject: [PATCH 5/5] Fixing IconComponent --- .../src/components/iconSelect/index.tsx | 55 +++++++++++---- .../lowcoder/src/comps/comps/iconComp.tsx | 68 ++++++++++--------- .../comps/controls/styleControlConstants.tsx | 10 ++- 3 files changed, 84 insertions(+), 49 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx index 7ffc8cc72..232f89ca7 100644 --- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx +++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import type { IconDefinition } from "@fortawesome/free-regular-svg-icons"; -import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons"; +// import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons"; import { Popover } from "antd"; import { ActionType } from "@rc-component/trigger/lib/interface"; import { TacoInput } from "components/tacoInput"; @@ -19,10 +19,11 @@ import Draggable from "react-draggable"; import { default as List, ListRowProps } from "react-virtualized/dist/es/List"; import styled from "styled-components"; import { CloseIcon, SearchIcon } from "icons"; -import { ANTDICON } from "../../../../lowcoder/src/comps/comps/timelineComp/antIcon"; +import { ANTDICON } from "icons/antIcon"; +import { Divider } from "antd-mobile"; const PopupContainer = styled.div` - width: 408px; + width: 580px; background: #ffffff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); border-radius: 8px; @@ -85,10 +86,11 @@ const IconList = styled(List)` background-color: rgba(139, 143, 163, 0.36); } `; + const IconRow = styled.div` padding: 0 6px; display: flex; - align-items: center; + align-items: flex-start; /* Align items to the start to allow different heights */ justify-content: space-between; &:last-child { @@ -96,14 +98,16 @@ const IconRow = styled.div` justify-content: flex-start; } `; + const IconItemContainer = styled.div` - width: 40px; - height: 40px; + width: 60px; display: flex; - align-items: center; - justify-content: center; + flex-direction: column; + align-items: center; + justify-content: flex-start; cursor: pointer; - font-size: 20px; + font-size: 28px; + margin-bottom: 24px; &:hover { border: 1px solid #315efb; @@ -117,6 +121,22 @@ const IconItemContainer = styled.div` } `; +const IconWrapper = styled.div` + height: auto; + display: flex; + align-items: center; + justify-content: center; +`; + +const IconKeyDisplay = styled.div` + font-size: 8px; + color: #8b8fa3; + margin-top: 4px; /* Space between the icon and the text */ + text-align: center; + word-wrap: break-word; /* Ensure text wraps */ + width: 100%; /* Ensure the container can grow */ +`; + class Icon { readonly title: string; constructor(readonly def: IconDefinition | any, readonly names: string[]) { @@ -133,7 +153,7 @@ class Icon { return ( ); } @@ -254,6 +274,10 @@ const IconPopup = (props: { getAllIcons().then(setAllIcons); }, []); + const smallTextStyle = { + fontSize: '8px' + }; + const rowRenderer = useCallback( (p: ListRowProps) => ( @@ -262,7 +286,7 @@ const IconPopup = (props: { .map(([key, icon]) => ( - {icon.getView()} + {icon.getView()} + {key} ))} @@ -299,9 +324,9 @@ const IconPopup = (props: { diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx index 41b73da71..d2db61596 100644 --- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx @@ -26,33 +26,31 @@ import { clickEvent, eventHandlerControl, } from "../controls/eventHandlerControl"; +import { useContext } from "react"; +import { EditorContext } from "comps/editorState"; const Container = styled.div<{ $style: IconStyleType | undefined }>` - height: 100%; - width: 100%; display: flex; align-items: center; justify-content: center; - svg { - object-fit: contain; - pointer-events: auto; - } - ${(props) => props.$style && getStyle(props.$style)} -`; -const getStyle = (style: IconStyleType) => { - return css` + ${(props) => props.$style && css` + height: calc(100% - ${props.$style.margin}); + width: calc(100% - ${props.$style.margin}); + padding: ${props.$style.padding}; + margin: ${props.$style.margin}; + border: ${props.$style.borderWidth} solid ${props.$style.border}; + border-radius: ${props.$style.radius}; + background: ${props.$style.background}; svg { - color: ${style.fill}; + max-width: ${widthCalculator(props.$style.margin)}; + max-height: ${heightCalculator(props.$style.margin)}; + color: ${props.$style.fill}; + object-fit: contain; + pointer-events: auto; } - padding: ${style.padding}; - border: 1px solid ${style.border}; - border-radius: ${style.radius}; - margin: ${style.margin}; - max-width: ${widthCalculator(style.margin)}; - max-height: ${heightCalculator(style.margin)}; - `; -}; + `} +`; const EventOptions = [clickEvent] as const; @@ -94,7 +92,7 @@ const IconView = (props: RecordConstructorToView) => { }} onClick={() => props.onEvent("click")} > - {props.icon} + {props.icon} ); @@ -109,23 +107,29 @@ let IconBasicComp = (function () { label: trans("iconComp.icon"), IconType: "All", })} - {children.autoHeight.propertyView({ + + + + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( +
+ {children.onEvent.getPropertyView()} + {hiddenPropertyView(children)} +
+ )} + + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <>
+ {children.autoHeight.propertyView({ label: trans("iconComp.autoSize"), })} - {!children.autoHeight.getView() && + {!children.autoHeight.getView() && children.iconSize.propertyView({ label: trans("iconComp.iconSize"), })} -
-
- {children.onEvent.getPropertyView()} -
-
- {hiddenPropertyView(children)} -
-
- {children.style.getPropertyView()} -
+
+ {children.style.getPropertyView()} +
+ )} )) .build(); diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 9626e4fbf..11f4e012d 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -1078,8 +1078,14 @@ export const NavigationStyle = [ export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const; -export const IconStyle = [getStaticBackground("#00000000"), - getStaticBorder("#00000000"), FILL, RADIUS, MARGIN, PADDING] as const; +export const IconStyle = [ + getStaticBackground("#00000000"), + getStaticBorder("#00000000"), + FILL, + RADIUS, + BORDER_WIDTH, + MARGIN, + PADDING] as const; export const ListViewStyle = BG_STATIC_BORDER_RADIUS;