add_icon_component

lowcoder-org · FalkWolsky · Feb 20, 2024 · Aug 4, 2023 · Aug 9, 2023 · Aug 9, 2023
commit f3cb6746830fb915b42e184bf7ed30922875f8c5
diff --git a/client/packages/lowcoder-design/src/icons/IconCompIcon.svg b/client/packages/lowcoder-design/src/icons/IconCompIcon.svg
diff --git 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";
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx 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<typeof childrenMap>) => {
+  const conRef = useRef<HTMLDivElement>(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 (
+    <ReactResizeDetector onResize={onResize}>
+      <Container
+        ref={conRef}
+        $style={props.style}
+        style={{
+          fontSize: props.autoHeight
+            ? `${height < width ? height : width}px`
+            : props.iconSize,
+          background: props.style.background,
+        }}
+        onClick={() => props.onEvent("click")}
+      >
+        {props.icon}
+      </Container>
+    </ReactResizeDetector>
+  );
+};
+
+let IconBasicComp = (function () {
+  return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
+    .setPropertyViewFn((children) => (
+      <>
+        <Section name={sectionNames.basic}>
+          {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"),
+            })}
+        </Section>
+        <Section name={sectionNames.interaction}>
+          {children.onEvent.getPropertyView()}
+        </Section>
+        <Section name={sectionNames.layout}>
+          {hiddenPropertyView(children)}
+        </Section>
+        <Section name={sectionNames.style}>
+          {children.style.getPropertyView()}
+        </Section>
+      </>
+    ))
+    .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
@@ -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<typeof DividerStyle>;
 export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
 export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
+export type IconStyleType = StyleConfigType<typeof IconStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
 export type JsonSchemaFormStyleType = StyleConfigType<typeof JsonSchemaFormStyle>;
 export type TreeSelectStyleType = StyleConfigType<typeof TreeSelectStyle>;

diff --git 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
@@ -114,6 +114,7 @@ export type UICompType =
   | "timeline"
   | "mention"
   | "autocomplete"
+  | "icon"
 
 export const uiCompRegistry = {} as Record<UICompType | string, UICompManifest>;
 

diff --git 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
@@ -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
@@ -39,6 +39,7 @@ import {
   TimeLineIcon,
   MentionIcon,
   AutoCompleteCompIcon,
+  IconCompIcon,
 } from "lowcoder-design";
 
 export const CompStateIcon: {
@@ -107,4 +108,5 @@ export const CompStateIcon: {
   timeline: <TimeLineIcon />,
   mention: <MentionIcon/>,
   autocomplete: <AutoCompleteCompIcon />,
+  icon: <IconCompIcon />,
 };