added grid too shapes comp and lables to shapes lists

Author: freddysundowner

client/packages/lowcoder-design/src/components/shapeSelect/index.tsx

@@ -74,6 +74,12 @@ const StyledSearchIcon = styled(SearchIcon)`
 const IconListWrapper = styled.div`
   padding-left: 10px;
   padding-right: 4px;
+  .gtujLP {
+    overflow: hidden;
+  }
+  .iconsDiv div {
+    float: left;
+  }
 `;
 const IconList = styled(List)`
   scrollbar-gutter: stable;
@@ -278,14 +284,10 @@ function getIconKey(value?: string) {
 }
 
 export function useShape(value?: string) {
-  console.log("icon value ", value);
   const key = getIconKey(value);
-  console.log("icon key ", key);
-
   const [icon, setIcon] = useState<Icon | undefined>(undefined);
   useEffect(() => {
     let allshapes = getAllIcons();
-    console.log("all shapes ", allshapes);
     setIcon(allshapes[key]);
   }, [key]);
   return icon;
@@ -379,28 +381,36 @@ const IconPopup = (props: {
           <StyledCloseIcon onClick={props.onClose} />
         </TitleDiv>
         {/* <SearchDiv>
-          <TacoInput
+          <TacoInput 
             style={{ width: "100%", paddingLeft: "40px" }}
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
             placeholder={trans("shapeSelect.searchPlaceholder")}
           />
           <StyledSearchIcon />
         </SearchDiv> */}
-        <IconListWrapper>
+        <IconListWrapper style={{ display: "flex", flexWrap: "wrap" }}>
           <>
             {Object.keys(shapes).map((shapeType: string, _i: number) => {
               return shapes[shapeType as keyof typeof shapes].map(
                 (Shape: any, index: any) => {
                   return (
-                    <Shape
-                      size={48}
+                    <div
+                      style={{ paddingLeft: "10px" }}
                       key={index}
                       onClick={() => {
-                        console.log("Shape ", index, shapeType);
                         onChangeIcon(index + "_" + shapeType);
                       }}
-                    />
+                    >
+                      <Shape
+                        size={24} 
+                        key={index}
+                        onClick={() => {
+                          onChangeIcon(index + "_" + shapeType);
+                        }}
+                      />
+                      <p>{shapeType}</p>
+                    </div>
                   );
                 }
               );

client/yarn.lock

@@ -7398,13 +7398,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"coolshapes-react@npm:^0.1.1-beta.0":
-  version: 0.1.1-beta.0
-  resolution: "coolshapes-react@npm:0.1.1-beta.0"
+"coolshapes-react@file:/Users/la/Desktop/coolshapes-react::locator=lowcoder%40workspace%3Apackages%2Flowcoder":
+  version: 1.0.1
+  resolution: "coolshapes-react@file:/Users/la/Desktop/coolshapes-react#/Users/la/Desktop/coolshapes-react::hash=163e05&locator=lowcoder%40workspace%3Apackages%2Flowcoder"
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: c3edd7e43ef84f5c34faebc0d97316a2a4177c143d0eb23f9f62022a9fc19451a7d8f2af2730ae7852bba524bb08204ac22871fad2f85305072b048acbad7b78
+  checksum: 858b8476d410d3faae4cb26aab768d7a9d370befd51f54004540b84a08f27f5f11aa6ff4b76dca9f4dee82edfcd030d528819fabdbc82d2a6b0462b6f2d94ff3
   languageName: node
   linkType: hard
 
@@ -13659,7 +13659,7 @@ __metadata:
     buffer: ^6.0.3
     clsx: ^2.0.0
     cnchar: ^3.2.4
-    coolshapes-react: ^0.1.1-beta.0
+    coolshapes-react: /Users/la/Desktop/coolshapes-react
     copy-to-clipboard: ^3.3.3
     core-js: ^3.25.2
     dotenv: ^16.0.3