fix: adjust node styles

ant-design · Sep 27, 2024 · 10c9cea · 10c9cea
1 parent a823f91
commit 10c9cea
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/graphs/src/core/base/node/organization-chart-node.tsx b/packages/graphs/src/core/base/node/organization-chart-node.tsx
@@ -13,7 +13,7 @@ export interface OrganizationChartNodeProps extends Pick<React.HTMLAttributes<HT
   /**
    * Working status of the person
    */
-  status: string;
+  status?: string;
   /**
    * Whether the node is hovered
    */
@@ -33,8 +33,7 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
   ${(props) =>
     props.$isActive &&
     css`
-      height: calc(100% - 6px);
-      width: calc(100% - 6px);
+      transform: translate(-3px, -3px);
       border: 3px solid #1783ff;
     `}
 
@@ -65,25 +64,31 @@ const StyledWrapper = styled.div<{ $color?: string; $isActive?: boolean }>`
     }
 
     &-detail {
-      flex: 1;
+      width: calc(100% - 56px);
     }
 
     &-name {
       color: #242424;
       font-weight: 600;
       font-size: 18px;
       margin-bottom: 5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     &-post {
       color: #616161;
       font-size: 14px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 `;
 
 export const OrganizationChartNode: React.FC<OrganizationChartNodeProps> = (props) => {
-  const { name, position, status, isActive, className, style } = props;
+  const { name, position, status = 'online', isActive, className, style } = props;
 
   const colorMap = {
     online: '#1783FF',
@@ -98,7 +103,7 @@ export const OrganizationChartNode: React.FC<OrganizationChartNodeProps> = (prop
         <div className="org-chart-node-content-avatar">{name.slice(0, 1)}</div>
         <div className="org-chart-node-content-detail">
           <div className="org-chart-node-content-name">{name}</div>
-          <div className="org-chart-node-content-post">{position}</div>
+          {position && <div className="org-chart-node-content-post">{position}</div>}
         </div>
       </div>
     </StyledWrapper>

diff --git a/packages/graphs/tests/demos/organization-chart2.tsx b/packages/graphs/tests/demos/organization-chart2.tsx
@@ -42,6 +42,7 @@ export const OrganizationChart2 = () => {
         endArrow: true,
       },
     },
+    behaviors: (prev) => [...prev, 'hover-activate-neighbors'],
     transforms: (prev) => [
       ...prev.filter((t) => (t as any).type !== 'collapse-expand-react-node'),
       {