fix: Table indent bug when hideExpandedColumn is false #1556 (#1564)

Co-authored-by: shijia.me <[email protected]>

package.json

@@ -167,7 +167,7 @@
         "eslint-plugin-markdown": "^2.2.1",
         "eslint-plugin-react": "^7.24.0",
         "eslint-plugin-react-hooks": "^4.2.0",
-        "eslint-plugin-semi-design": "latest",
+        "eslint-plugin-semi-design": "^2.33.0",
         "fs-extra": "^8.1.0",
         "glob": "^7.1.7",
         "html-webpack-plugin": "^3.2.0",
@@ -227,4 +227,4 @@
         ]
     },
     "license": "MIT"
-}
+}

packages/semi-ui/table/Body/BaseRow.tsx

@@ -62,7 +62,7 @@ export interface BaseRowProps {
     store?: Store;
     style?: React.CSSProperties;
     virtualized?: Virtualized;
-    visible: boolean; // required
+    visible: boolean // required
 }
 
 export default class TableRow extends BaseComponent<BaseRowProps, Record<string, any>> {
@@ -246,7 +246,7 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
                 if (level != null && columnIndex === firstIndex) {
                     expandableProps.indent = level;
 
-                    if (!expandableRow) {
+                    if (!expandableRow && hideExpandedColumn) {
                         expandableProps.indent = level + 1;
                     }
                 }

packages/semi-ui/table/_story/v2/Fixed1556/index.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+App.storyName = 'fixed hideExpandedColumn indent';
+/**
+ * @see https://github.com/DouyinFE/semi-design/issues/1556
+ */
+export default function App() {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            key: 'age',
+            width: 150,
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+            key: 'address',
+            width: 400,
+        },
+    ];
+
+    const data = [
+        {
+            key: 1,
+            name: 'John Brown sr.',
+            age: 60,
+            address: 'New York No. 1 Lake Park',
+            children: [
+                {
+                    key: 11,
+                    name: 'John Brown',
+                    age: 42,
+                    address: 'New York No. 2 Lake Park',
+                },
+                {
+                    key: 12,
+                    name: 'John Brown jr.',
+                    age: 30,
+                    address: 'New York No. 3 Lake Park',
+                    children: [
+                        {
+                            key: 121,
+                            name: 'Jimmy Brown',
+                            age: 16,
+                            address: 'New York No. 3 Lake Park',
+                        },
+                    ],
+                },
+                {
+                    key: 13,
+                    name: 'Jim Green sr.',
+                    age: 72,
+                    address: 'London No. 1 Lake Park',
+                    children: [
+                        {
+                            key: 131,
+                            name: 'Jim Green',
+                            age: 42,
+                            address: 'London No. 2 Lake Park',
+                            children: [
+                                {
+                                    key: 1311,
+                                    name: 'Jim Green jr.',
+                                    age: 25,
+                                    address: 'London No. 3 Lake Park',
+                                },
+                                {
+                                    key: 1312,
+                                    name: 'Jimmy Green sr.',
+                                    age: 18,
+                                    address: 'London No. 4 Lake Park',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            key: 2,
+            name: 'Joe Black',
+            age: 32,
+            address: 'Sidney No. 1 Lake Park',
+        }
+    ];
+
+    return (
+        <div>
+            <h4>hideExpandedColumn=false</h4>
+            <Table
+                hideExpandedColumn={false}
+                columns={columns}
+                defaultExpandAllRows
+                dataSource={data}
+            />
+            <h4>hideExpandedColumn=true</h4>
+            <Table
+                hideExpandedColumn={true}
+                columns={columns}
+                defaultExpandAllRows
+                dataSource={data}
+            />
+        </div>
+    );
+}

packages/semi-ui/table/_story/v2/index.js

@@ -14,4 +14,5 @@ export { default as stickyHeaderTable } from './stickyHeader';
 export { default as Fixed1188 } from './Fixed1188';
 export { default as EmptyFilters } from './emptyFilters';
 export { default as fixedResizableWithForm } from './fixedResizableWithForm';
-export { default as zebra } from './zebra';
+export { default as zebra } from './zebra';
+export { default as Fixed1556 } from './Fixed1556';

yarn.lock

@@ -1465,15 +1465,6 @@
     "@douyinfe/semi-animation-styled" "2.23.2"
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]":
-  version "2.32.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.32.2.tgz#c388ed32d1713c13d0400d7c209d8816bc6579cf"
-  integrity sha512-ALi+M7fF5IPQaf2fjLmykMjV/NFiRl9IvaoQsDv4uNFlVLANrZXeuHjqxQb3en6RM2NCcrtq4KwWnvZ8y7V1jw==
-  dependencies:
-    "@douyinfe/semi-animation" "2.12.0"
-    "@douyinfe/semi-animation-styled" "2.23.2"
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
   version "2.23.2"
   resolved "https://registry.npmjs.org/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.23.2.tgz"
@@ -1494,13 +1485,6 @@
   dependencies:
     bezier-easing "^2.1.0"
 
-"@douyinfe/[email protected]":
-  version "2.32.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation/-/semi-animation-2.32.2.tgz#f0b1164941671fa335d4e54027a5a52e6c09ba2c"
-  integrity sha512-dW/1SpcgBWeEnPDshNysFeAu6L6FDcxiOeYHd7u0C6+Oet+4rtDXe/9HqxhFkVuLbjyy0MCLFI+izTgycUvH3w==
-  dependencies:
-    bezier-easing "^2.1.0"
-
 "@douyinfe/[email protected]":
   version "2.30.2"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.30.2.tgz#f7a3f983da02a2843c8e95604f10c08d5c8e922c"
@@ -1515,20 +1499,6 @@
     memoize-one "^5.2.1"
     scroll-into-view-if-needed "^2.2.24"
 
-"@douyinfe/[email protected]":
-  version "2.32.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.32.2.tgz#c61a621e900fdc9a5605532012808a3722f97ac2"
-  integrity sha512-F+b3u1XvqlufKZilyM0eepk/COfBsnLED/XtEimt2uGWWk+Ftv9Th+CNcxs1mAW3fhM8hqw4EkVA5RYEogHq3g==
-  dependencies:
-    "@douyinfe/semi-animation" "2.12.0"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    lodash "^4.17.21"
-    memoize-one "^5.2.1"
-    scroll-into-view-if-needed "^2.2.24"
-
 "@douyinfe/[email protected]":
   version "2.30.2"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.30.2.tgz#03bf9a5ef99bf3b77557379d631908889767b8aa"
@@ -1536,13 +1506,6 @@
   dependencies:
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]", "@douyinfe/semi-icons@^2.0.0":
-  version "2.32.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.32.2.tgz#ba713d95ae4365bf7d05c1dbb78976ba29c7cf04"
-  integrity sha512-Bo085OU8xhqenTiFepKrEXjY63GI1u8310ZAynHQsg2vRNdSVmQH5RRV2Tgqj27Uq6Q3rtEtN0f/lGxE+MNYQw==
-  dependencies:
-    classnames "^2.2.6"
-
 "@douyinfe/semi-icons@latest":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.9.1.tgz#7a04e1a77070220b04f63e6f65aac30155ed8ddd"
@@ -1556,11 +1519,6 @@
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.30.2.tgz#e31007086d75c98c6b87789945bffcdb72cf195e"
   integrity sha512-cjJ02F4Fg6wfWgVCpGSEUU/MDg/fc6zy2eAxMJ2yMqbERYI99y3Qk4RlckPcUnXx5LzfFAeFtM6E/ri+xMtIKQ==
 
-"@douyinfe/[email protected]":
-  version "2.32.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.32.2.tgz#a580339eea5e526bfc33196f6b5b1a5f07d005b6"
-  integrity sha512-DmDo1/DdjJiFgq0vs2se5zrtM8mFdne5F8dL0g96sHcPFAG2tzVYzlcpgQ11gVRiiCpBJKOcem1UwKe32jWv7w==
-
 "@douyinfe/[email protected]":
   version "2.23.2"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-scss-compile/-/semi-scss-compile-2.23.2.tgz#30884bb194ee9ae1e81877985e5663c3297c1ced"
@@ -1634,38 +1592,6 @@
   dependencies:
     glob "^7.1.6"
 
-"@douyinfe/[email protected]":
-  version "2.32.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.32.2.tgz#5ad25f274b66508f9167e05f154db4fada921162"
-  integrity sha512-qjepAmNQ+1JY8dQVfaXAng0jD+n4dWsz33xWnbIRQ93lgmqBsvP7JRKKcNkOsWe5nbhxP3R0HZMQ5KeJoNm0Bg==
-  dependencies:
-    glob "^7.1.6"
-
-"@douyinfe/semi-ui@^2.0.0":
-  version "2.32.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.32.2.tgz#fb21c2ba6a6a6f650d460dcb35d274d608796dec"
-  integrity sha512-AVOLhJ16FIHZuL6izmlM5AYVyLiPcsUtFxbMdm47d6dgCMA2OevvwrkUZX/uMBvprnM62IP12SB3pfpOUoI0Fw==
-  dependencies:
-    "@douyinfe/semi-animation" "2.32.2"
-    "@douyinfe/semi-animation-react" "2.32.2"
-    "@douyinfe/semi-foundation" "2.32.2"
-    "@douyinfe/semi-icons" "2.32.2"
-    "@douyinfe/semi-illustrations" "2.32.2"
-    "@douyinfe/semi-theme-default" "2.32.2"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    copy-text-to-clipboard "^2.1.1"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-    react-resizable "^1.8.0"
-    react-sortable-hoc "^2.0.0"
-    react-window "^1.8.2"
-    resize-observer-polyfill "^1.5.1"
-    scroll-into-view-if-needed "^2.2.24"
-    utility-types "^3.10.0"
-
 "@douyinfe/semi-ui@latest":
   version "2.30.2"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.30.2.tgz#75c2ad58ead2f96845381d8af94d32a58dec3d45"
@@ -10984,11 +10910,6 @@ eslint-plugin-react@^7.20.6, eslint-plugin-react@^7.24.0:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.6"
 
-eslint-plugin-semi-design@latest:
-  version "2.30.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-2.30.2.tgz#ee32382f1d3609a2af7560931ff22fecefc31b29"
-  integrity sha512-AN8fqqf2YLN42G840QY4qScyGb9/8zKpZKSU1FIc9hjahQ9dlTm5vVJpuYSoYzIhJO6taD6PM7uMBwUfH9mxug==
-
 eslint-rule-composer@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz"