fix(Table): expand icon can be configurable

Author: youluna

docs/table/theme/index.jsx

@@ -389,6 +389,9 @@ class TableFunctionDemo extends React.Component {
                     <DemoGroup label="Selected & Expanded">
                         <Table rowSelection={rowSelection} expandedRowRender={(record) => record.price} dataSource={listDataSource} hasHeader={hasHeader} isZebra={isZebra}>{cols}</Table>
                     </DemoGroup>
+                    <DemoGroup label="Tree">
+                        <Table rowSelection={rowSelection} dataSource={listDataSource} hasHeader={hasHeader} isZebra={isZebra} isTree>{cols.slice(1)}</Table>
+                    </DemoGroup>
                     <DemoGroup label="No Data">
                         <Table rowSelection={rowSelection} dataSource={[]} hasHeader={hasHeader} isZebra={isZebra}>{cols}</Table>
                     </DemoGroup>

src/balloon/index.jsx

@@ -2,7 +2,6 @@ import ConfigProvider from '../config-provider';
 import Balloon from './balloon';
 import Tooltip from './tooltip';
 import Inner from './inner';
-import { log } from '../util';
 
 Balloon.Tooltip = ConfigProvider.config(Tooltip, {
     transform: /* istanbul ignore next */ (props, deprecated) => {

src/table/expanded.jsx

@@ -111,9 +111,17 @@ export default function expanded(BaseComponent) {
                 { primaryKey } = this.props,
                 hasExpanded = openRowKeys.indexOf(record[primaryKey]) > -1,
                 switchNode = hasExpanded ? (
-                    <Icon type="minus" size="xs" />
+                    <Icon
+                        type="minus"
+                        size="xs"
+                        className={`${prefix}table-expand-unfold`}
+                    />
                 ) : (
-                    <Icon type="add" size="xs" />
+                    <Icon
+                        type="add"
+                        size="xs"
+                        className={`${prefix}table-expand-fold`}
+                    />
                 ),
                 attrs = getExpandedColProps(record, index) || {};
             const cls = classnames({

src/table/main.scss

@@ -21,7 +21,7 @@
         }
 
         #{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
-            padding: $s-3 $s-4;
+            padding: $s-2 $s-2;
         }
     }
 
@@ -103,6 +103,7 @@
             padding: $s-3 $s-4;
         }
     }
+
     #{$table-prefix}-expanded,
     #{$table-prefix}-selection {
         #{$table-prefix}-cell-wrapper {
@@ -396,8 +397,19 @@
     &.disabled {
         color: $table-expanded-ctrl-disabled-color;
     }
-    .#{$css-prefix}icon {
+
+    .#{$css-prefix}table-expand-unfold {
         @include icon-size($table-expanded-icon-size);
+        &::before {
+            content: $table-expand-unfold-icon-content;
+        }
+    }
+
+    .#{$css-prefix}table-expand-fold {
+        @include icon-size($table-expanded-icon-size);
+        &::before {
+            content: $table-expand-fold-icon-content;
+        }
     }
 }
 

src/table/scss/variable.scss

@@ -150,3 +150,13 @@ $table-tree-fold-icon-content: $icon-content-arrow-right !default;
 /// @namespace statement/normal
 /// @type icon
 $table-tree-unfold-icon-content: $icon-content-arrow-down !default;
+
+/// expand fold icon
+/// @namespace statement/normal
+/// @type icon
+$table-expand-fold-icon-content: $icon-content-add !default;
+
+/// expand unfold icon
+/// @namespace statement/normal
+/// @type icon
+$table-expand-unfold-icon-content: $icon-content-minus !default;