feat: update expandable

arco-design · Mar 15, 2024 · 0850da1 · 0850da1
1 parent 54df7e6
commit 0850da1
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 15 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/__test__/__snapshots__/demo.test.ts.snap b/components/Typography/__test__/__snapshots__/demo.test.ts.snap
@@ -322,6 +322,47 @@ exports[`renders Typography/demo/ellipsis-basic.md correctly 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-layout-horizontal"
+        >
+          <div
+            class="arco-col arco-col-6 arco-form-label-item"
+          >
+            <label
+              for="expandableSingle_input"
+            >
+               展示操作按钮（单行）
+            </label>
+          </div>
+          <div
+            class="arco-col arco-col-18 arco-form-item-wrapper"
+          >
+            <div
+              class="arco-form-item-control-wrapper"
+            >
+              <div
+                class="arco-form-item-control"
+                id="expandableSingle"
+              >
+                <div
+                  class="arco-form-item-control-children"
+                >
+                  <button
+                    aria-checked="false"
+                    class="arco-switch arco-switch-small arco-switch-type-circle"
+                    id="expandableSingle_input"
+                    role="switch"
+                    type="button"
+                  >
+                    <div
+                      class="arco-switch-dot"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div
           class="arco-row arco-row-align-start arco-row-justify-start arco-form-item arco-form-layout-horizontal"
         >
@@ -504,6 +545,21 @@ exports[`renders Typography/demo/ellipsis-basic.md correctly 1`] = `
                   true
                 </td>
               </tr>
+              <tr
+                class="arco-descriptions-row"
+              >
+                <td
+                  class="arco-descriptions-item-label"
+                  style="padding-right:36px"
+                >
+                  expandableSingle
+                </td>
+                <td
+                  class="arco-descriptions-item-value"
+                >
+                  false
+                </td>
+              </tr>
               <tr
                 class="arco-descriptions-row"
               >
@@ -546,7 +602,7 @@ exports[`renders Typography/demo/ellipsis-basic.md correctly 1`] = `
                 <td
                   class="arco-descriptions-item-value"
                 >
-                  4
+                  1
                 </td>
               </tr>
             </tbody>
@@ -563,8 +619,8 @@ exports[`renders Typography/demo/ellipsis-basic.md correctly 1`] = `
       class="arco-ellipsis"
     >
       <div
-        class="arco-ellipsis-content-mirror arco-ellipsis-multiple arco-ellipsis-collapsed"
-        style="-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-line-clamp:4"
+        class="arco-ellipsis-content-mirror arco-ellipsis-single"
+        style="-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-line-clamp:1"
       >
         <span
           class="arco-ellipsis-text"
@@ -573,8 +629,7 @@ exports[`renders Typography/demo/ellipsis-basic.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="arco-ellipsis-content arco-ellipsis-multiple arco-ellipsis-collapsed"
-        style="-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-line-clamp:4"
+        class="arco-ellipsis-content arco-ellipsis-single"
       >
         <span
           class="arco-ellipsis-text"

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