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

…tNode (#1703) Signed-off-by: zhujiahong <zhujiahong@growingio.com> Co-authored-by: zhujiahong <zhujiahong@growingio.com>
growingio · Dec 21, 2021 · 5d5d156 · 5d5d156
1 parent dc0da22
commit 5d5d156
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 39 deletions.
diff --git a/src/card/CardMeta.tsx b/src/card/CardMeta.tsx
@@ -17,15 +17,18 @@ 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 renderOption = (opt: React.ReactNode, type: 'title' | 'description') =>
+    opt && React.cloneElement(<div />, { title: isString(opt) ? opt : '', className: `${prefixCls}-${type}` }, opt);
 
   const renderDetail = () =>
     (title || description) && (
       <div className={`${prefixCls}-detail`}>
-        {renderTitle()}
-        {description && <div className={`${prefixCls}-description`}>{description}</div>}
+        {renderOption(title, 'title')}
+        {renderOption(description, 'description')}
       </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 {
@@ -34,19 +33,37 @@ export default {
 const infoCardTemplate = () => (
   <Card fullWidthContent>
     <Card.Meta
+      style={{ alignItems: 'flex-start' }}
       image={<Avatar mode="square" size="large" />}
-      description="这里是副标题"
+      description={
+        <Text
+          style={{
+            color: '#7b819c',
+            fontSize: '14px',
+            width: '100%',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'normal',
+          }}
+          lines={3}
+        >
+          {'这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题 这里是副标题'.repeat(
+            5
+          )}
+        </Text>
+      }
       title={
-        <div
+        <Text
           style={{
             fontWeight: 500,
             fontSize: '18px',
             lineHeight: '28px',
             color: '#242e59',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
           }}
         >
-          北区项目组
-        </div>
+          {'北区项目组'.repeat(20)}
+        </Text>
       }
       action={
         <>
@@ -115,25 +132,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 +198,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
@@ -42,28 +42,28 @@
   .text-body2();
 
   &-detail {
-    flex-grow: 1;
+    display: grid;
+    flex: 1 1 100%;
     overflow: hidden;
   }
   &-image {
+    flex: none;
     margin-right: 16px;
   }
   &-title {
     .text-h4();
     color: @gray-5;
-    white-space: nowrap;
   }
   &-description {
     margin-top: 4px;
-    color: #7b819c;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 20px;
+    color: @gray-4;
+    .text-body2();
   }
   &-action {
+    flex: none;
+    align-self: flex-start;
     margin-left: 16px;
   }
-
   &-title,
   &-description {
     overflow: hidden;

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();