Merge pull request kubesphere#154 from chenz24/hotfix

fix: improve entity expand feature.
harrisonliu5 · Mar 29, 2022 · a704bd7 · a704bd7
2 parents c0e503c + dcdc5dc
commit a704bd7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 30 deletions.
diff --git a/.changeset/wise-bats-crash.md b/.changeset/wise-bats-crash.md
@@ -0,0 +1,5 @@
+---
+'@kubed/components': patch
+---
+
+1. fix: improve entity expand feature.
diff --git a/packages/components/src/Entity/Entity.story.tsx b/packages/components/src/Entity/Entity.story.tsx
@@ -60,8 +60,13 @@ export const EntityExpand = () => {
     width: 100%;
     height: 300px;
   `;
+
+  const onCardClick = (e) => {
+    e.stopPropagation();
+  };
+
   const expandContent = (
-    <Card sectionTitle="容器" className="entity-card" padding={0}>
+    <Card sectionTitle="容器" className="entity-card" padding={0} onClick={onCardClick}>
       <Entity>
         <Field avatar={Avatar} label="镜像: rocksdb" value="kubespheredev/ks-console:master" />
         <Field label="存储卷" value="rocksdbpvc" />
@@ -78,6 +83,12 @@ export const EntityExpand = () => {
         <Field label="容量" value="1Gi" width={100} />
         <Field label="访问模式" value="ReadWriteOnce" />
       </Entity>
+      <Entity expandable hoverable expandContent={expandContent} className="test-classname">
+        <Field avatar={Avatar} label="存储类型: rocksdb" value={<a href="/">rocksdbpvc</a>} />
+        <Field label="存储卷" value="rocksdbpvc" />
+        <Field label="容量" value="1Gi" width={100} />
+        <Field label="访问模式" value="ReadWriteOnce" />
+      </Entity>
     </Wrapper>
   );
 };

diff --git a/packages/components/src/Entity/Entity.tsx b/packages/components/src/Entity/Entity.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import cx from 'classnames';
-import { useToggle } from '@kubed/hooks';
-import { Dropdown } from '../Dropdown/Dropdown';
+import { Dropdown, DropdownProps } from '../Dropdown/Dropdown';
 import { Field } from './Field';
 import { DefaultProps, KubedTheme } from '../theme';
 import forwardRef from '../utils/forwardRef';
@@ -41,7 +39,7 @@ const EntityWrapper = styled('div')<EntityProps>`
   cursor: ${({ expandable }) => (expandable ? 'pointer' : null)};
 
   &:hover,
-  &.is-expand {
+  &[aria-expanded='true'] {
     ${({ hoverable, theme }) => getHoverStyle(hoverable, theme)};
   }
 `;
@@ -87,6 +85,9 @@ export interface EntityProps extends DefaultProps {
 
   /** Gap between children */
   gap?: number;
+
+  /** Props of expand */
+  expandProps?: Omit<DropdownProps, 'children'>;
 }
 
 export const Entity = forwardRef<EntityProps, 'div'>(
@@ -99,19 +100,11 @@ export const Entity = forwardRef<EntityProps, 'div'>(
       bordered = true,
       expandable = false,
       expandContent,
+      expandProps,
       ...rest
     },
     ref
   ) => {
-    const [expand, setExpand] = useToggle(false, [true, false]);
-
-    const handleExpand = (e) => {
-      e.stopPropagation();
-      if (expandable) {
-        setExpand(!expand);
-      }
-    };
-
     if (expandable) {
       return (
         <Wrapper>
@@ -123,15 +116,10 @@ export const Entity = forwardRef<EntityProps, 'div'>(
             className="entity-dropdown"
             maxWidth="100%"
             offset={[0, -3]}
+            placement="bottom"
+            {...expandProps}
           >
-            <EntityWrapper
-              ref={ref}
-              bordered={bordered}
-              expandable={expandable}
-              onClick={handleExpand}
-              className={cx({ 'is-expand': expandable && expand }, className)}
-              {...rest}
-            >
+            <EntityWrapper ref={ref} bordered={bordered} expandable={expandable} {...rest}>
               <EntityContainer $gap={gap} className="entity-main">
                 {children}
               </EntityContainer>
@@ -143,14 +131,7 @@ export const Entity = forwardRef<EntityProps, 'div'>(
     }
 
     return (
-      <EntityWrapper
-        ref={ref}
-        bordered={bordered}
-        expandable={expandable}
-        onClick={handleExpand}
-        className={cx({ 'is-expand': expandable && expand }, className)}
-        {...rest}
-      >
+      <EntityWrapper ref={ref} bordered={bordered} expandable={expandable} {...rest}>
         <EntityContainer $gap={gap} className="entity-main">
           {children}
         </EntityContainer>