🐛 fix: rm styled-components (#78)

Co-authored-by: jiangchu <jiangchu.wzy@antgroup.com>
ant-design · Jan 10, 2024 · ab3a670 · ab3a670
1 parent 319bb00
commit ab3a670
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -66,7 +66,6 @@
     "@dagrejs/dagre": "^1.0.4",
     "@dnd-kit/core": "^6.1.0",
     "@floating-ui/react": "^0.24",
-    "@types/styled-components": "^5.1.34",
     "ahooks": "^3",
     "antd": "^5",
     "antd-style": "^3",
@@ -79,7 +78,6 @@
     "react-hotkeys-hook": "^4",
     "react-layout-kit": "^1",
     "reactflow": "^11.10.0",
-    "styled-components": "^6.1.0",
     "use-merge-value": "^1",
     "yjs": "^13",
     "zustand": "^4.4.1",

diff --git a/src/BasicGroupNode/index.tsx b/src/BasicGroupNode/index.tsx
@@ -1,18 +1,12 @@
-import { ArtboardTitle } from '@/BasicNode';
+import { zoomNum } from '@/BasicNode';
 import { NodeMapItem, SelectType } from '@/FlowView/constants';
 import { BasicGroupNodeData, BasicNodeData } from '@/constants';
 import { getClsFromSelectType } from '@/utils';
 import { cx } from 'antd-style';
 import React from 'react';
 import { Handle, Position } from 'reactflow';
-import styled from 'styled-components';
 import { useStyles } from './styles';
 
-const Wrap = styled.div`
-  width: 357px;
-  height: 632px;
-  position: relative;
-`;
 export interface BasicNodeGroupProps {
   id?: string;
   zoom?: number;
@@ -62,15 +56,32 @@ const BasicNodeGroup: React.FC<{
   const nodeList = convertMappingNode(_data as BasicGroupNodeData[]);
 
   return (
-    <Wrap>
+    <div
+      style={{
+        width: '357px',
+        height: '632px',
+        position: 'relative',
+      }}
+    >
       {handleType === 'output' || handleType === 'both' ? (
         <Handle type="target" position={Position.Left} style={{ top: 41.5, left: -6 }} />
       ) : null}
       <div>
         {label && (
-          <ArtboardTitle zoom={zoom}>
+          <div
+            style={{
+              position: 'absolute',
+              zIndex: 10,
+              top: `-${zoomNum(24, zoom, true)}px`,
+              padding: `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`,
+              color: `rgba(0, 0, 0, 0.45)`,
+              borderRadius: `4px`,
+              fontSize: `${14 / zoom}px`,
+              whiteSpace: `nowrap`,
+            }}
+          >
             {zoom <= 0.1 ? `${String(label).substring(0, 3)}...` : label}
-          </ArtboardTitle>
+          </div>
         )}
         <div className={cx(styles.groupWrap, styles[getClsFromSelectType(selectType)])}>
           {nodeList!.map((_node, index) => {
@@ -97,7 +108,7 @@ const BasicNodeGroup: React.FC<{
       {handleType === 'input' || handleType === 'both' ? (
         <Handle type="source" position={Position.Right} style={{ top: 41.5, right: -6 }} />
       ) : null}
-    </Wrap>
+    </div>
   );
 };
 

diff --git a/src/BasicNode/index.tsx b/src/BasicNode/index.tsx
@@ -2,7 +2,6 @@ import { SelectType } from '@/FlowView/constants';
 import { getClsFromSelectType } from '@/utils';
 import React from 'react';
 import { Handle, Position } from 'reactflow';
-import styled from 'styled-components';
 import { useStyles } from './styles';
 
 interface BloodNodeProps {
@@ -23,23 +22,12 @@ interface BloodNodeProps {
   handleType?: 'input' | 'output' | 'none' | ' both';
 }
 
-const zoomNum = (num: number, zoom: number, limitMax?: boolean) => {
+export const zoomNum = (num: number, zoom: number, limitMax?: boolean) => {
   if (limitMax) return zoom > 1 ? num : num / zoom;
 
   return num / zoom;
 };
 
-export const ArtboardTitle = styled.div<{ zoom: number }>`
-  position: absolute;
-  z-index: 10;
-  top: -${({ zoom }) => zoomNum(24, zoom, true)}px;
-  padding: ${({ zoom }) => `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`};
-  color: rgba(0, 0, 0, 0.45);
-  border-radius: 4px;
-  font-size: ${({ zoom }) => `${14 / zoom}px`};
-  white-space: nowrap;
-`;
-
 const BasicNode: React.FC<{
   data: BloodNodeProps;
 }> = ({ data }) => {
@@ -63,9 +51,20 @@ const BasicNode: React.FC<{
       ) : null}
       <div>
         {label && (
-          <ArtboardTitle zoom={zoom}>
+          <div
+            style={{
+              position: 'absolute',
+              zIndex: 10,
+              top: `-${zoomNum(24, zoom, true)}px`,
+              padding: `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`,
+              color: `rgba(0, 0, 0, 0.45)`,
+              borderRadius: `4px`,
+              fontSize: `${14 / zoom}px`,
+              whiteSpace: `nowrap`,
+            }}
+          >
             {zoom <= 0.1 ? `${String(label).substring(0, 3)}...` : label}
-          </ArtboardTitle>
+          </div>
         )}
         <div className={cx(styles.nodeWrap, styles[getClsFromSelectType(selectType)], className)}>
           <img className={'img'} src={logo} alt="" />