feat: 恢复

ant-design · Feb 2, 2024 · fab54d1 · fab54d1
1 parent be364e1
commit fab54d1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
@@ -53,9 +53,12 @@ interface EditConfig {
 
 export interface EllipsisConfig {
   rows?: number;
-  expandable?: boolean;
   suffix?: string;
+  /* @deprecated Please use `expand` instead */
   symbol?: React.ReactNode;
+  expandable?: boolean;
+  expand?: React.ReactNode;
+  collapsible?: boolean;
   collapse?: React.ReactNode;
   onExpand?: React.MouseEventHandler<HTMLElement>;
   onEllipsis?: (ellipsis: boolean) => void;
@@ -238,7 +241,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   const [enableEllipsis, ellipsisConfig] = useMergedConfig<EllipsisConfig>(ellipsis, {
     expandable: false,
     symbol: textLocale.expand,
-    // collapse: textLocale.collapse,
+    expand: textLocale.expand,
+    collapsible: false,
+    collapse: textLocale.collapse,
   });
 
   const mergedEnableEllipsis = enableEllipsis && !expanded;
@@ -406,11 +411,10 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   // >>>>>>>>>>> Typography
   // Expand
   const renderExpand = (renderExpanded: boolean) => {
-    // 搞不懂
-    // const renderExpanded = !expanded;
-    const { expandable, symbol, collapse } = ellipsisConfig;
+    const { expandable, symbol, expand, collapsible, collapse } = ellipsisConfig;
+    const _expand = expand ?? symbol;
     if (!expandable) return null;
-    if (!collapse && !renderExpanded) return null;
+    if (!collapsible && !renderExpanded) return null;
     const key = renderExpanded ? 'expand' : 'collapse';
     return (
       <a
@@ -419,7 +423,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
         onClick={(e) => onExpandClick(e, renderExpanded)}
         aria-label={renderExpanded ? textLocale?.expand : textLocale?.collapse}
       >
-        {renderExpanded ? symbol : collapse}
+        {renderExpanded ? _expand : collapse}
       </a>
     );
   };

diff --git a/components/typography/demo/ellipsis.tsx b/components/typography/demo/ellipsis.tsx
@@ -24,7 +24,7 @@ const App: React.FC = () => {
         Design, a design language for background applications, is refined by Ant UED Team.
       </Paragraph>
 
-      <Paragraph ellipsis={ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false}>
+      <Paragraph ellipsis={ellipsis ? { rows: 2, expandable: true, collapsible: true } : false}>
         Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
         Design, a design language for background applications, is refined by Ant UED Team. Ant
         Design, a design language for background applications, is refined by Ant UED Team. Ant

diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
@@ -125,7 +125,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | editing | Whether to be editable | boolean | false |  |
 | icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |
 | maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
-| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
+| tooltip | Custom tooltip text, hide when it is false | ReactNode | `Edit` | 4.6.0 |
 | text | Edit text, specify the editing content instead of using the children implicitly | string | - | 4.24.0 |
 | onChange | Called when input at textarea | function(value: string) | - |  |
 | onCancel | Called when type ESC to exit editable state | function | - |  |
@@ -140,7 +140,7 @@ Common props ref：[Common props](/docs/react/common-props)
       rows: number,
       expandable: boolean,
       suffix: string,
-      symbol: ReactNode,
+      expand: ReactNode,
       tooltip: boolean | ReactNode | TooltipProps,
       onExpand: function(event),
       onEllipsis: function(ellipsis),
@@ -149,10 +149,12 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | expandable | Whether to be expandable | boolean | - |  |
+| collapsible | Whether to be collapsible | boolean | - |  |
 | rows | Max rows of content | number | - |  |
 | suffix | Suffix of ellipsis content | string | - |  |
-| symbol | Custom description of ellipsis | ReactNode | `Expand` |  |
-| tooltip | Show tooltip when ellipsis | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#api) | - | 4.11.0 |
+| expand | Custom description of ellipsis | ReactNode | `Expand` | 4.14.0 |
+| collapse | Custom description of ellipsis | ReactNode | `Collapse` | 4.14.0 |
+| tooltip | Show tooltip when ellipsis | ReactNode \| [TooltipProps](/components/tooltip/#api) | - | 4.11.0 |
 | onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
 | onExpand | Called when expand content | function(event) | - |  |
 

diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
@@ -126,7 +126,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | editing | 控制是否是编辑中状态 | boolean | false |  |
 | icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |
 | maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
-| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
+| tooltip | 自定义提示文本，为 false 时关闭 | ReactNode | `编辑` | 4.6.0 |
 | text | 显式地指定编辑文案，为空时将隐式地使用 children | string | - | 4.24.0 |
 | onChange | 文本域编辑时触发 | function(value: string) | - |  |
 | onCancel | 按 ESC 退出编辑状态时触发 | function | - |  |
@@ -141,7 +141,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
       rows: number,
       expandable: boolean,
       suffix: string,
-      symbol: ReactNode,
+      expand: ReactNode,
       tooltip: boolean | ReactNode | TooltipProps,
       onExpand: function(event),
       onEllipsis: function(ellipsis),
@@ -150,10 +150,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | expandable | 是否可展开 | boolean | - |  |
+| collapsible | 是否可收起 | boolean | - |  |
 | rows | 最多显示的行数 | number | - |  |
 | suffix | 自定义省略内容后缀 | string | - |  |
-| symbol | 自定义展开描述文案 | ReactNode | `展开` |  |
-| tooltip | 省略时，展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip-cn/#api) | - | 4.11.0 |
+| expand | 自定义展开描述文案 | ReactNode | `展开` | 4.14.0 |
+| collapse | 自定义收起描述文案 | ReactNode | `收起` | 4.14.0 |
+| tooltip | 省略时，展示提示信息 | ReactNode \| [TooltipProps](/components/tooltip-cn/#api) | - | 4.11.0 |
 | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
 | onExpand | 点击展开时的回调 | function(event) | - |  |