feat: update expandable

arco-design · Mar 15, 2024 · 5948c83 · 5948c83
1 parent 41a957f
commit 5948c83
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/components/Typography/__demo__/ellipsis-basic.md b/components/Typography/__demo__/ellipsis-basic.md
@@ -8,12 +8,12 @@ title:
 ## zh-CN
 
 当文字内容超出容器后会自动显示省略号。
-当 `rows = 1` 时为单行省略，此时操作按钮不会展示。
+当 `rows = 1` 时为单行省略，此时操作按钮默认不会展示，可以设置 `expandable = { single: true }` 开启。
 
 ## en-US
 
 When the text content exceeds the container, an ellipsis will be automatically displayed.
-When `rows = 1`, a single row is omitted, and the operation button will not be displayed.
+When `rows = 1`, a single row is omitted. At this time, the operation button will not be displayed by default. You can set `expandable = { single: true }` to enable it.
 
 ```js
 import {
@@ -34,11 +34,12 @@ function App() {
   const [config, setConfig] = useState({
     disabled: false,
     expandable: true,
+    expandableSingle: false,
     expanded: false,
     showTooltip: false
   });
   const [text, setText] = useState(defaultText);
-  const [rows, setRows] = useState(4);
+  const [rows, setRows] = useState(1);
 
   return (
     <div>
@@ -61,6 +62,9 @@ function App() {
           <Form.Item label="展示操作按钮" field="expandable" triggerPropName="checked">
             <Switch/>
           </Form.Item>
+          <Form.Item label="展示操作按钮（单行）" field="expandableSingle" triggerPropName="checked">
+            <Switch/>
+          </Form.Item>
           <Form.Item label="禁用省略" field="disabled" triggerPropName="checked">
             <Switch/>
           </Form.Item>
@@ -99,9 +103,12 @@ function App() {
           minWidth: 100,
         }}
       >
-        <Typography.Ellipsis rows={rows} {...config} onExpand={(v) => form.setFieldsValue({
-          expanded: v
-        })}>{text}</Typography.Ellipsis>
+        <Typography.Ellipsis
+          rows={rows} {...config}
+          expandable={config.expandableSingle ? { single: true } : config.expandable}
+          onExpand={(v) => form.setFieldsValue({
+            expanded: v
+          })}>{text}</Typography.Ellipsis>
       </ResizeBox>
     </div>
   );

diff --git a/components/Typography/ellipsis.tsx b/components/Typography/ellipsis.tsx
@@ -60,7 +60,13 @@ const EllipsisComponent: React.ForwardRefRenderFunction<
   });
   const [overflow, setOverflow] = useState(false);
 
-  const single = useMemo(() => `${rows}` === '1', [rows]);
+  const single = useMemo(() => {
+    if (isObject(expandable)) {
+      return !expandable.single && rows === 1;
+    }
+    return rows === 1;
+  }, [rows, expandable]);
+
   const tooltipData = useMemo(() => {
     if (isObject(showTooltip)) {
       return {

diff --git a/components/Typography/interface.tsx b/components/Typography/interface.tsx
@@ -238,11 +238,11 @@ export interface TypographyEllipsisProps {
    */
   showTooltip?: boolean | TooltipProps;
   /**
-   * @zh 是否显示操控按钮
-   * @en Whether to show control button
+   * @zh 是否显示操控按钮。`2.61.0` 版本支持 `single` 属性
+   * @en Whether to show control button. `2.61.0` version supports `single` attribute
    * @defaultValue true
    */
-  expandable?: boolean;
+  expandable?: boolean | { single?: boolean };
   /**
    * @zh 自定义渲染操控按钮
    * @en Custom rendering control buttons