fix(card): fix card bug about description atttribute can't enter reac…

…tNode
growingio · Dec 21, 2021 · 039ab89 · 039ab89
1 parent 0bb93f0
commit 039ab89
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 39 deletions.
diff --git a/src/card/CardMeta.tsx b/src/card/CardMeta.tsx
@@ -17,15 +17,21 @@ const CardMeta: React.FC<CardMetaProps> = ({
     if (isString(image)) return image ? <img src={image} className={`${prefixCls}-image`} alt="" /> : null;
     return React.cloneElement(image, { className: classNames(`${prefixCls}-image`, image.props.className) });
   };
-  const renderTitle = () => <div className={`${prefixCls}-title`}>{title}</div>;
+
+  const renderTitle = () =>
+    title &&
+    React.cloneElement(<div />, { title: isString(title) ? title : '', className: `${prefixCls}-title` }, title);
+
+  const renderDes = () => description && <div className={`${prefixCls}-description`}>{description}</div>;
 
   const renderDetail = () =>
     (title || description) && (
       <div className={`${prefixCls}-detail`}>
         {renderTitle()}
-        {description && <div className={`${prefixCls}-description`}>{description}</div>}
+        {renderDes()}
       </div>
     );
+
   const renderAction = () => (title || description || image) && <div className={`${prefixCls}-action`}>{action}</div>;
 
   const renderHeader =

diff --git a/src/card/demo/Card.stories.tsx b/src/card/demo/Card.stories.tsx
@@ -11,8 +11,7 @@ import Button, { IconButton } from '../../button';
 import Dropdown from '../../dropdown';
 import { Item, List } from '../../list';
 import { Basic, Empty, TreeData } from '../../table/demos/Table.stories';
-import { HaveChildren } from '../../tabs/demos/Tabs.stories';
-import { Card, Divider } from '../..';
+import { Card, Divider, Skeleton } from '../..';
 import Text from '../../typography/text';
 
 export default {
@@ -35,17 +34,32 @@ const infoCardTemplate = () => (
   <Card fullWidthContent>
     <Card.Meta
       image={<Avatar mode="square" size="large" />}
-      description="这里是副标题"
+      description={
+        <Text
+          style={{
+            color: '#7b819c',
+            fontSize: '14px',
+            width: '100%',
+          }}
+          lines={3}
+        >
+          {'这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题'.repeat(
+            5
+          )}
+        </Text>
+      }
       title={
         <div
           style={{
             fontWeight: 500,
             fontSize: '18px',
             lineHeight: '28px',
             color: '#242e59',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
           }}
         >
-          北区项目组
+          {'北区项目组'.repeat(20)}
         </div>
       }
       action={
@@ -115,25 +129,60 @@ const tableCardTemplate = () => (
 export const tableCard = tableCardTemplate.bind({});
 
 const DemoTemplate = () => (
-  <div>
-    <div style={{ margin: '20px', display: 'inline-block' }}>
-      {infoCardTemplate()}
-      {tableCardTemplate()}
-    </div>
-    <div style={{ margin: '20px', display: 'inline-block' }}>
-      <Card>
-        <Card.Meta title="变量使用量" description="variable_userd" />
-        <Empty />
-        <TreeData />
-      </Card>
-    </div>
-    <div style={{ margin: '20px', display: 'inline-block' }}>
-      <Card>
-        <Card.Meta title="变量使用量" description="variable_userd" />
-        <HaveChildren />
-      </Card>
-    </div>
-  </div>
+  <table className="table-demo">
+    <tr>
+      <th>Card</th>
+      <th>Example</th>
+    </tr>
+    <tr>
+      <td>InfoCard</td>
+      <td>{infoCardTemplate()}</td>
+    </tr>
+    <tr>
+      <td>TableCard</td>
+      <td>{tableCardTemplate()}</td>
+    </tr>
+    <tr>
+      <td>TableCard</td>
+      <td>
+        <Card>
+          <Card.Meta title="变量使用量" description="variable_userd" />
+          <Empty />
+          <TreeData />
+        </Card>
+      </td>
+    </tr>
+    <tr>
+      <td>previewCard</td>
+      <td>
+        <Card style={{ width: '320px' }}>
+          <Card.Meta title="计算指标" description="123" />
+          <p>计算属性如下</p>
+          <Skeleton.Image style={{ width: '100%' }} />
+          <Table
+            title="事件属性"
+            pagination={false}
+            columns={[
+              {
+                dataIndex: 'id',
+                title: 'Id',
+              },
+              {
+                dataIndex: 'name',
+                title: 'Name',
+              },
+            ]}
+            dataSource={Array(2)
+              .fill('')
+              .map((_, index) => ({
+                id: `${index + 1 * 1000}`,
+                name: `Name ${index + 1}`,
+              }))}
+          />
+        </Card>
+      </td>
+    </tr>
+  </table>
 );
 
 export const Demo = DemoTemplate.bind({});
@@ -146,8 +195,10 @@ Default.args = {
   children: (
     <Card.Meta
       image={<Avatar>L</Avatar>}
-      title="卡片标题"
-      description="卡片副标题"
+      title={'卡片标题'.repeat(20)}
+      description={'卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题'.repeat(
+        5
+      )}
       action={
         <Dropdown
           placement="bottomRight"

diff --git a/src/card/interfaces.ts b/src/card/interfaces.ts
@@ -12,7 +12,7 @@ export interface CardMetaProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /**
    * meta副标题
    */
-  description?: string;
+  description?: React.ReactNode;
   /**
    * meta内容
    */

diff --git a/src/card/style/index.less b/src/card/style/index.less
@@ -36,38 +36,37 @@
 
 .@{card-meta-prefix-cls} {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   width: 100%;
   color: @gray-4;
   .text-body2();
 
   &-detail {
-    flex-grow: 1;
-    overflow: hidden;
+    flex: 1 1 100%;
   }
   &-image {
+    flex: none;
     margin-right: 16px;
   }
   &-title {
     .text-h4();
+    display: grid;
     color: @gray-5;
     white-space: nowrap;
+    text-overflow: ellipsis;
   }
   &-description {
     margin-top: 4px;
-    color: #7b819c;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 20px;
+    color: @gray-4;
+    .text-body2();
   }
   &-action {
+    flex: none;
     margin-left: 16px;
   }
-
   &-title,
+  &-detail,
   &-description {
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
diff --git a/src/panel/demos/Panel.stories.tsx b/src/panel/demos/Panel.stories.tsx
@@ -196,7 +196,7 @@ export const TitleInfoCard = TitleInfoCardStory.bind({});
 TitleInfoCard.args = {
   title: '北区项目组',
   footer: '这里是footer区域',
-  description: '这是一个副标题这是一个副标题',
+  description: '这是一个副标题这是一个副标题'.repeat(10),
   avatar: <UserOutlined />,
   actions: (
     <div>

diff --git a/src/panel/style/index.less b/src/panel/style/index.less
@@ -42,6 +42,7 @@
 
       &__description {
         position: relative;
+        width: 100%;
         margin-top: 4px;
         color: @gray-4;
         .text-body1();