Merge pull request #347 from youluna/feat/rtl

Feat(Badge/Table/Dropdown): support rtl
alibaba-fusion · Feb 21, 2019 · 700b5f1 · 700b5f1
2 parents e59e0c2 + cee4ad5
commit 700b5f1
Show file tree

Hide file tree

Showing 18 changed files with 295 additions and 22 deletions.
diff --git a/src/badge/index.jsx b/src/badge/index.jsx
@@ -12,6 +12,7 @@ class Badge extends Component {
     static propTypes = {
         // 样式类名的品牌前缀
         prefix: PropTypes.string,
+        rtl: PropTypes.bool,
         // 自定义类名
         className: PropTypes.string,
         // 自定义内联样式
@@ -47,7 +48,7 @@ class Badge extends Component {
 
     render() {
         const {
-            prefix, dot, className, children, content, style,
+            prefix, dot, className, children, content, style, rtl,
             count: originCount,
             overflowCount: originOverflowCount
         } = this.props;
@@ -65,7 +66,7 @@ class Badge extends Component {
         }, className);
 
         return (
-            <span className={classes} {...others}>
+            <span dir={rtl ? 'rtl' : undefined} className={classes} {...others}>
                 {children}
                 <Sup {...({prefix, content, count, overflowCount, dot, style})} />
             </span>

diff --git a/src/badge/main.scss b/src/badge/main.scss
@@ -116,3 +116,5 @@
         }
     }
 }
+
+@import './rtl.scss';
diff --git a/src/badge/rtl.scss b/src/badge/rtl.scss
@@ -0,0 +1,12 @@
+
+.#{$css-prefix}badge[dir="rtl"] {
+    .#{$css-prefix}badge-custom {
+        padding-right: $badge-size-custom-padding-lr;
+        padding-left: $badge-size-custom-padding-lr;
+    }
+
+    .#{$css-prefix}badge-scroll-number {
+        left: 0;
+        transform-origin: right center;
+    }
+}
diff --git a/src/dropdown/index.jsx b/src/dropdown/index.jsx
@@ -15,6 +15,7 @@ class Dropdown extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         pure: PropTypes.bool,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         /**
          * 弹层内容
@@ -141,13 +142,14 @@ class Dropdown extends Component {
             });
         }
 
-        const { trigger } = this.props;
+        const { trigger, rtl } = this.props;
         const newTrigger = React.cloneElement(trigger, {
             onKeyDown: makeChain(this.onTriggerKeyDown, trigger.props.onKeyDown)
         });
 
         return (
             <Popup {...this.props}
+                rtl={rtl}
                 autoFocus={this.state.autoFocus}
                 trigger={newTrigger}
                 visible={this.getVisible()}

diff --git a/src/table/base.jsx b/src/table/base.jsx
@@ -487,7 +487,8 @@ export default class Table extends React.Component {
                 onRowClick,
                 onRowMouseEnter,
                 onRowMouseLeave,
-                pure
+                pure,
+                rtl
             } = this.props;
             const { sort } = this.state;
             const {
@@ -506,6 +507,7 @@ export default class Table extends React.Component {
                     {hasHeader ? (
                         <Header
                             prefix={prefix}
+                            rtl={rtl}
                             pure={pure}
                             affixRef={this.getAffixRef}
                             colGroup={colGroup}
@@ -523,6 +525,7 @@ export default class Table extends React.Component {
                     ) : null}
                     <Body
                         prefix={prefix}
+                        rtl={rtl}
                         pure={pure}
                         colGroup={colGroup}
                         className={`${prefix}table-body`}
@@ -620,6 +623,7 @@ export default class Table extends React.Component {
                 rtl,
                 emptyContent,
                 filterParams,
+                columns,
                 loadingComponent: LoadingComponent = Loading,
                 ...others
             } = this.props,

diff --git a/src/table/base/body.jsx b/src/table/base/body.jsx
@@ -62,7 +62,7 @@ export default class Body extends React.Component {
     render() {
         /*eslint-disable no-unused-vars */
         const { prefix, className, children, component: Tag, colGroup, loading, emptyContent, components, getCellProps,
-            primaryKey, getRowProps, dataSource, cellRef, columns, rowRef, onRowClick, onRowMouseEnter, onRowMouseLeave, locale, pure, ...others } = this.props;
+            primaryKey, getRowProps, dataSource, cellRef, columns, rowRef, onRowClick, onRowMouseEnter, onRowMouseLeave, locale, pure, rtl, ...others } = this.props;
 
         const { Row = RowComponent, Cell = CellComponent } = components;
         const empty = loading ? <span>&nbsp;</span> : emptyContent || locale.empty;
@@ -88,6 +88,7 @@ export default class Body extends React.Component {
                     {...rowProps}
                     ref={this.getRowRef.bind(this, index)}
                     colGroup={colGroup}
+                    rtl={rtl}
                     columns={columns}
                     primaryKey={primaryKey}
                     record={record}

diff --git a/src/table/base/cell.jsx b/src/table/base/cell.jsx
@@ -49,7 +49,7 @@ export default class Cell extends React.Component {
     render() {
         /* eslint-disable no-unused-vars */
         const {prefix, className, cell, value, resizable, colIndex, rowIndex, record, context, align, style = {}, component: Tag,
-            children, title, width, innerStyle, primaryKey, __normalized, filterMode, filters, sortable, lock, pure, locale, ...others} = this.props;
+            children, title, width, innerStyle, primaryKey, __normalized, filterMode, filters, sortable, lock, pure, locale, rtl, ...others} = this.props;
         const tagStyle = {...style};
         const cellProps = {value, index: rowIndex, record, context};
         let content = cell;
@@ -60,6 +60,9 @@ export default class Cell extends React.Component {
         }
         if (align) {
             tagStyle.textAlign = align;
+            if (rtl) {
+                tagStyle.textAlign = align === 'left' ? 'right' : align === 'right' ? 'left' : align;
+            }
         }
         const cls = classnames({
             [`${prefix}table-cell`]: true,

diff --git a/src/table/base/filter.jsx b/src/table/base/filter.jsx
@@ -15,7 +15,8 @@ export default class Filter extends React.Component {
         filterParams: PropTypes.object,
         locale: PropTypes.object,
         onFilter: PropTypes.func,
-        prefix: PropTypes.string
+        prefix: PropTypes.string,
+        rtl: PropTypes.bool
     }
 
     static defaultProps = {
@@ -111,7 +112,7 @@ export default class Filter extends React.Component {
     }
 
     render() {
-        const { filters, prefix, locale, filterMode } = this.props;
+        const { filters, prefix, locale, filterMode, rtl } = this.props;
         const { visible, selectedKeys } = this.state;
 
         function renderMenuItem(item) {
@@ -157,9 +158,11 @@ export default class Filter extends React.Component {
             triggerType="click"
             visible={visible}
             autoFocus
+            rtl={rtl}
             container={node => node.parentNode}
             onVisibleChange={this.onFilterVisible}>
                 <Menu footer={footer}
+                    rtl={rtl}
                     selectedKeys={selectedKeys}
                     selectMode={filterMode}
                     onSelect={this.onFilterSelect}>

diff --git a/src/table/base/header.jsx b/src/table/base/header.jsx
@@ -46,7 +46,7 @@ export default class Header extends React.Component {
     render() {
         /*eslint-disable no-unused-vars */
         const { prefix, className, children, component: Tag, colGroup, columns, locale, filterParams,
-            onFilter, components, affixRef, headerCellRef, onSort, sort, onResizeChange, pure, ...others
+            onFilter, components, affixRef, headerCellRef, onSort, sort, onResizeChange, pure, rtl, ...others
         } = this.props;
 
         const { Cell = CellComponent, Filter = FilterComponent, Sort = SortComponent, Resize = ResizeComponent } = components;
@@ -71,10 +71,11 @@ export default class Header extends React.Component {
                             dataIndex={dataIndex}
                             onSort={this.onSort}
                             sort={sort}
+                            rtl={rtl}
                             locale={locale}/>);
                     }
                     if (resizable) {
-                        resizeElement = <Resize prefix={prefix} dataIndex={dataIndex} onChange={onResizeChange}/>;
+                        resizeElement = <Resize prefix={prefix} rtl={rtl} dataIndex={dataIndex} onChange={onResizeChange}/>;
                     }
 
                     if (filters) {
@@ -83,6 +84,7 @@ export default class Header extends React.Component {
                                 filters={filters}
                                 prefix={prefix}
                                 locale={locale}
+                                rtl={rtl}
                                 filterParams={filterParams}
                                 filterMode={filterMode}
                                 onFilter={onFilter} />) : null;
@@ -93,6 +95,7 @@ export default class Header extends React.Component {
                     key={j}
                     prefix={prefix}
                     pure={pure}
+                    rtl={rtl}
                     cell={title}
                     component="th"
                     align={alignHeader ? alignHeader : align}

diff --git a/src/table/base/resize.jsx b/src/table/base/resize.jsx
@@ -5,6 +5,7 @@ import { events, dom } from '../../util';
 class Resize extends React.Component {
     static propTypes = {
         prefix: T.string,
+        rtl: T.bool,
         onChange: T.func,
         dataIndex: T.string
     }
@@ -22,7 +23,12 @@ class Resize extends React.Component {
     }
     onMouseMove = (e) => {
         const pageX = e.pageX;
-        const changedPageX = pageX - this.lastPageX;
+        let changedPageX = pageX - this.lastPageX;
+
+        if (this.props.rtl) {
+            changedPageX = -changedPageX;
+        }
+
         this.props.onChange(this.props.dataIndex, changedPageX);
         this.lastPageX = pageX;
     }

diff --git a/src/table/base/row.jsx b/src/table/base/row.jsx
@@ -82,7 +82,7 @@ export default class Row extends React.Component {
     }
 
     renderCells(record) {
-        const { Cell, columns, getCellProps, cellRef, prefix, rowIndex, primaryKey, pure, locale } = this.props;
+        const { Cell, columns, getCellProps, cellRef, prefix, rowIndex, primaryKey, pure, locale, rtl } = this.props;
         const { lockType } = this.context;
         return columns.map((child, colIndex) => {
             /* eslint-disable no-unused-vars, prefer-const */
@@ -124,6 +124,7 @@ export default class Row extends React.Component {
                 rowIndex={rowIndex}
                 align={align}
                 locale={locale}
+                rtl={rtl}
                 width={width}
             />);
         });
@@ -143,7 +144,7 @@ export default class Row extends React.Component {
 
     render() {
         /* eslint-disable no-unused-vars*/
-        const { prefix, className, onClick, onMouseEnter, onMouseLeave, columns, Cell, getCellProps, rowIndex, record, children, primaryKey, cellRef, colGroup, pure, locale, ...others } = this.props;
+        const { prefix, className, onClick, onMouseEnter, onMouseLeave, columns, Cell, getCellProps, rowIndex, record, children, primaryKey, cellRef, colGroup, pure, locale, rtl, ...others } = this.props;
         const cls = classnames({
             [`${prefix}table-row`]: true,
             [className]: className

diff --git a/src/table/base/sort.jsx b/src/table/base/sort.jsx
@@ -7,6 +7,7 @@ import { KEYCODE } from '../../util';
 export default class Sort extends React.Component {
     static propTypes = {
         prefix: PropTypes.string,
+        rtl: PropTypes.bool,
         className: PropTypes.string,
         sort: PropTypes.object,
         onSort: PropTypes.func,
@@ -18,7 +19,7 @@ export default class Sort extends React.Component {
     }
     // 渲染排序
     renderSort() {
-        const {prefix, sort, dataIndex, locale} = this.props,
+        const { prefix, sort, dataIndex, locale, rtl } = this.props,
             sortStatus = sort[dataIndex],
             map = {
                 desc: 'descending',
@@ -30,7 +31,7 @@ export default class Sort extends React.Component {
                 <a href="javascript:;"
                     key={sortOrder}
                     className={sortStatus === sortOrder ? 'current' : ''}>
-                    <Icon type={map[sortOrder]} size="small"/>
+                    <Icon rtl={rtl} type={map[sortOrder]} size="small"/>
                 </a>
             );
         });

diff --git a/src/table/list/row.jsx b/src/table/list/row.jsx
@@ -16,7 +16,7 @@ export default class GroupListRow extends Row {
 
     render() {
         /* eslint-disable no-unused-vars*/
-        const { prefix, className, onClick, onMouseEnter, onMouseLeave, columns, Cell, rowIndex, record, children, primaryKey, colGroup, cellRef, getCellProps, locale, ...others } = this.props;
+        const { prefix, className, onClick, onMouseEnter, onMouseLeave, columns, Cell, rowIndex, record, children, primaryKey, colGroup, cellRef, getCellProps, locale, rtl, ...others } = this.props;
         const cls = classnames({
             [`${prefix}table-row`]: true,
             [className]: className

diff --git a/src/table/lock.jsx b/src/table/lock.jsx
@@ -268,10 +268,11 @@ export default function lock(BaseComponent) {
 
         onLockBodyScroll = () => {
             if (this.isLock()) {
+                const { rtl } = this.props;
                 const lockRightBody = this.bodyRightNode,
                     lockLeftBody = this.bodyLeftNode,
-                    lockRightTable = this.getWrapperNode('right'),
-                    lockLeftTable = this.getWrapperNode('left'),
+                    lockRightTable = rtl ? this.getWrapperNode('left') : this.getWrapperNode('right'),
+                    lockLeftTable = rtl ? this.getWrapperNode('right') : this.getWrapperNode('left'),
                     shadowClassName = 'shadow';
 
                 const x = this.bodyNode.scrollLeft, y = this.bodyNode.scrollTop;
@@ -351,6 +352,7 @@ export default function lock(BaseComponent) {
 
         adjustBodySize() {
             if (this.isLock()) {
+                const { rtl } = this.props;
                 const body = this.bodyNode,
                     lockLeftBody = this.bodyLeftNode,
                     lockRightBody = this.bodyRightNode,
@@ -364,7 +366,8 @@ export default function lock(BaseComponent) {
 
                 lockLeftBody && dom.setStyle(lockLeftBody, 'max-height', lockBodyHeight);
                 lockRightBody && dom.setStyle(lockRightBody, 'max-height', lockBodyHeight);
-                lockRightBodyWrapper && dom.setStyle(lockRightBodyWrapper, 'right', width);
+
+                lockRightBodyWrapper && dom.setStyle(lockRightBodyWrapper, rtl ? 'left' : 'right', width);
             }
         }
 

diff --git a/src/table/main.scss b/src/table/main.scss
@@ -317,3 +317,5 @@
         @include icon-size($table-expanded-icon-size);
     }
 }
+
+@import "./rtl.scss";
-Original file line number
+Diff line change
@@ Expand Up / @@ -116,3 +116,5 @@ @@
             }
         }
     }
+    @import './rtl.scss';