feat: blockHeader title support ReactNode (#431)

* feat: blockHeader title support ReactNode

* ci: without eslint import sort

Author: liuxy0551

package.json

@@ -133,7 +133,7 @@
         "increase-memory-limit": "^1.0.7",
         "jest": "^24.9.0",
         "jest-environment-jsdom-sixteen": "^2.0.0",
-        "ko-lint-config": "^2.2.18",
+        "ko-lint-config": "2.2.19",
         "less": "^3.9.0",
         "less-loader": "^5.0.0",
         "lint-md": "^0.1.1",

src/components/blockHeader/index.tsx

@@ -4,7 +4,7 @@ import { Tooltip } from 'antd';
 
 export interface BlockHeaderProps {
     // 标题
-    title: string;
+    title: React.ReactNode;
     // 标题前的图标，默认是一个色块
     beforeTitle?: React.ReactNode;
     // 标题后的提示图标或文案

src/stories/blockHeader.stories.tsx

@@ -10,7 +10,7 @@ stories.addDecorator(withKnobs);
 const propDefinitions = [
     {
         property: 'title',
-        propType: 'string',
+        propType: 'React.ReactNode',
         required: true,
         description: '标题',
         defaultValue: '-',
@@ -136,6 +136,10 @@ stories.add(
             <BlockHeader title="分类标题" onChange={(expand) => console.log(expand)}>
                 Hello World!
             </BlockHeader>
+            <p style={style}>7、标题超长</p>
+            <BlockHeader title={<EllipsisText maxWidth={400} value="标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长" />} />
+            <br />
+
             <h3>大标题 + 无背景</h3>
             <p style={style}>1、默认</p>
             <BlockHeader title="分类标题" showBackground={false} />
@@ -159,6 +163,7 @@ stories.add(
             >
                 Hello World!
             </BlockHeader>
+
             <h2>小标题</h2>
             <h3>小标题 + 有背景</h3>
             <p style={style}>1、默认</p>
@@ -183,6 +188,8 @@ stories.add(
             >
                 Hello World!
             </BlockHeader>
+            <br />
+
             <h3>小标题 + 无背景</h3>
             <p style={style}>1、默认</p>
             <BlockHeader title="分类标题" showBackground={false} isSmall />

src/stories/components/blockHeader/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PieChartOutlined } from '@ant-design/icons';
 import BlockHeader from '../../../components/blockHeader';
+import EllipsisText from '../../../components/ellipsisText';
 
 export default function BlockHeaderRender() {
     const style = {
@@ -28,6 +29,10 @@ export default function BlockHeaderRender() {
             <BlockHeader title="分类标题" onChange={(expand) => console.log(expand)}>
                 Hello World!
             </BlockHeader>
+            <p style={style}>7、标题超长</p>
+            <BlockHeader title={<EllipsisText maxWidth={400} value="标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长标题超长" />} />
+            <br />
+
             <h3>大标题 + 无背景</h3>
             <p style={style}>1、默认</p>
             <BlockHeader title="分类标题" showBackground={false} />
@@ -51,6 +56,7 @@ export default function BlockHeaderRender() {
             >
                 Hello World!
             </BlockHeader>
+
             <h2>小标题</h2>
             <h3>小标题 + 有背景</h3>
             <p style={style}>1、默认</p>
@@ -71,6 +77,8 @@ export default function BlockHeaderRender() {
             <BlockHeader title="分类标题" isSmall onChange={(expand) => console.log(expand)}>
                 Hello World!
             </BlockHeader>
+            <br />
+
             <h3>小标题 + 无背景</h3>
             <p style={style}>1、默认</p>
             <BlockHeader title="分类标题" showBackground={false} isSmall />

yarn.lock

@@ -12820,10 +12820,10 @@ known-css-properties@^0.25.0:
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.25.0.tgz#6ebc4d4b412f602e5cfbeb4086bd544e34c0a776"
   integrity sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==
 
-ko-lint-config@^2.2.18:
-  version "2.2.18"
-  resolved "https://registry.yarnpkg.com/ko-lint-config/-/ko-lint-config-2.2.18.tgz#ea61ef0a89a4e23b478b0390e69a715cdf08280a"
-  integrity sha512-ls5jymX9GjE8atROtwyoIpsOvjYSlXvHwoHH1sZqvJfrS5xHiy+zBe2KP67O1VNudRnIGyJb9J2QqkRdZyCSXA==
+[email protected].19:
+  version "2.2.19"
+  resolved "https://registry.npmmirror.com/ko-lint-config/-/ko-lint-config-2.2.19.tgz#23141b8d8bbbb155b4f6113f894df5e5ea9a0741"
+  integrity sha512-EMdRaxNXXFe90Q2JQNIJeHSRMn1y5LKNrrGVTwRVWvk/jnP3UQ411K4petpATbgkjU36YEDBa6Y3LVXk8asB+Q==
   dependencies:
     "@typescript-eslint/eslint-plugin" "5.30.0"
     "@typescript-eslint/parser" "5.30.0"