fix(Table): make marginLeft of icon be congifurable, close #1474

alibaba-fusion · Dec 30, 2019 · 84a0c69 · 84a0c69
1 parent 8fe69f9
commit 84a0c69
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 9 deletions.
diff --git a/src/table/base/cell.jsx b/src/table/base/cell.jsx
@@ -11,6 +11,7 @@ export default class Cell extends React.Component {
         className: PropTypes.string,
         record: PropTypes.any,
         value: PropTypes.any,
+        isIconLeft: PropTypes.bool,
         colIndex: PropTypes.number,
         rowIndex: PropTypes.number,
         title: PropTypes.any,
@@ -40,6 +41,7 @@ export default class Cell extends React.Component {
     static defaultProps = {
         component: 'td',
         type: 'body',
+        isIconLeft: false,
         cell: value => value,
         prefix: 'next-',
     };
@@ -83,6 +85,7 @@ export default class Cell extends React.Component {
             locale,
             expandedIndexSimulate,
             rtl,
+            isIconLeft,
             ...others
         } = this.props;
         const tagStyle = { ...style };
@@ -115,8 +118,8 @@ export default class Cell extends React.Component {
                     className={`${prefix}table-cell-wrapper`}
                     style={innerStyle}
                 >
-                    {children}
-                    {content}
+                    {isIconLeft ? children : content}
+                    {isIconLeft ? content : children}
                 </div>
             </Tag>
         );

diff --git a/src/table/base/filter.jsx b/src/table/base/filter.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Dropdown from '../../dropdown';
 import Menu from '../../menu';
 import Button from '../../button';
@@ -123,6 +124,7 @@ export default class Filter extends React.Component {
             filters,
             prefix,
             locale,
+            className,
             filterMode,
             filterMenuProps,
             filterProps,
@@ -168,6 +170,11 @@ export default class Filter extends React.Component {
                 </div>
             );
 
+        const cls = classnames({
+            [`${prefix}table-filter`]: true,
+            [className]: className,
+        });
+
         return (
             <Dropdown
                 trigger={
@@ -176,7 +183,7 @@ export default class Filter extends React.Component {
                         aria-label={locale.filter}
                         onKeyDown={this.filterKeydown}
                         tabIndex="0"
-                        className={`${prefix}table-filter`}
+                        className={cls}
                     >
                         <Icon type="filter" size="small" />
                     </span>

diff --git a/src/table/base/header.jsx b/src/table/base/header.jsx
@@ -116,6 +116,7 @@ export default class Header extends React.Component {
                         sortElement = (
                             <Sort
                                 prefix={prefix}
+                                className={`${prefix}table-header-icon`}
                                 dataIndex={dataIndex}
                                 onSort={this.onSort}
                                 sortIcons={sortIcons}
@@ -140,6 +141,7 @@ export default class Header extends React.Component {
                         filterElement = filters.length ? (
                             <Filter
                                 dataIndex={dataIndex}
+                                className={`${prefix}table-header-icon`}
                                 filters={filters}
                                 prefix={prefix}
                                 locale={locale}

diff --git a/src/table/base/sort.jsx b/src/table/base/sort.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Icon from '../../icon';
 import { KEYCODE } from '../../util';
 
@@ -20,7 +21,15 @@ export default class Sort extends React.Component {
     };
     // 渲染排序
     renderSort() {
-        const { prefix, sort, sortIcons, dataIndex, locale, rtl } = this.props,
+        const {
+                prefix,
+                sort,
+                sortIcons,
+                className,
+                dataIndex,
+                locale,
+                rtl,
+            } = this.props,
             sortStatus = sort[dataIndex],
             map = {
                 desc: 'descending',
@@ -42,12 +51,17 @@ export default class Sort extends React.Component {
             );
         });
 
+        const cls = classnames({
+            [`${prefix}table-sort`]: true,
+            [className]: className,
+        });
+
         return (
             <span
                 role="button"
                 tabIndex="0"
                 aria-label={locale[sortStatus]}
-                className={`${prefix}table-sort`}
+                className={cls}
                 onClick={this.handleClick.bind(this)}
                 onKeyDown={this.keydownHandler}
             >

diff --git a/src/table/main.scss b/src/table/main.scss
@@ -80,8 +80,7 @@
             .#{$css-prefix}icon-arrow-down.#{$css-prefix}table-tree-arrow,
             .#{$css-prefix}icon-arrow-right.#{$css-prefix}table-tree-arrow,
             #{$table-prefix}-tree-placeholder {
-                margin-right: 3px;
-                float: left;
+                margin-right: $table-header-icon-margin-left;
                 outline: 0;
                 cursor: pointer;
             }
@@ -332,7 +331,6 @@
 }
 
 #{$table-prefix}-filter {
-    margin-left: 5px;
     cursor: pointer;
     width: 20px;
     display: inline-block;
@@ -345,6 +343,10 @@
     }
 }
 
+#{$table-prefix}-header-icon {
+    margin-left: $table-header-icon-margin-left;
+}
+
 #{$table-prefix}-expanded-ctrl {
     cursor: pointer;
     &:focus {

diff --git a/src/table/scss/variable.scss b/src/table/scss/variable.scss
@@ -54,6 +54,9 @@ $table-header-padding-top: $s-3 !default;
 /// padding (l, r)
 /// @namespace size/header
 $table-header-padding-left: $s-4 !default;
+/// icon margin
+/// @namespace size/header
+$table-header-icon-margin-left: $s-2 !default;
 
 /// padding (t, b)
 /// @namespace size/cell

diff --git a/src/table/tree/cell.jsx b/src/table/tree/cell.jsx
@@ -97,7 +97,11 @@ export default class TreeCell extends React.Component {
             }
         }
         return (
-            <CellComponent {...this.props} innerStyle={firstCellStyle}>
+            <CellComponent
+                {...this.props}
+                innerStyle={firstCellStyle}
+                isIconLeft
+            >
                 {children}
                 {treeArrowNode}
             </CellComponent>