feat(*): rtl support for Collapse and Loading

alibaba-fusion · Feb 21, 2019 · a80c4c5 · a80c4c5
1 parent 700b5f1
commit a80c4c5
Show file tree

Hide file tree

Showing 10 changed files with 141 additions and 44 deletions.
diff --git a/docs/collapse/demo/basic.md b/docs/collapse/demo/basic.md
@@ -13,33 +13,60 @@
 ---
 
 ````jsx
-import { Collapse } from '@alifd/next';
+import { Collapse, Radio } from '@alifd/next';
 
 const Panel = Collapse.Panel;
+const RadioGroup = Radio.Group;
+
+const RTL = 'rtl';
+const LTR = 'ltr';
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            rtl: false
+        }
+        this.handleDirectionChange = this.handleDirectionChange.bind(this);
+    }
+
+    handleDirectionChange(v) {
+        this.setState({
+            rtl: !this.state.rtl
+        });
+    }
+
+    render() {
+        return (<div>
+            <RadioGroup dataSource={['ltr', 'rtl']} value={this.state.rtl ? 'rtl' : 'ltr'} onChange={this.handleDirectionChange} />
+            <Collapse rtl={this.state.rtl}>
+                <Panel title="simple tile">
+                    <ul>
+                        <li>Promotions are marketing campaigns ran by Marketplace</li>
+                        <li>Participate to sale your products during that promotion and make a profit</li>
+                    </ul>
+                </Panel>
+                <Panel title="What are Promotion Products?">
+                    <ul>
+                        <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>
+                        <li>You can choose which products should be available for the promotion</li>
+                        <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>
+                    </ul>
+                </Panel>
+                <Panel title="Why can i not submit a higher price?">
+                    <ul>
+                        <li>The Promotion requires a certain price to make sure that our customers are attracted</li>
+                    </ul>
+                </Panel>
+                <Panel title="What is Promo Stock?">
+                    Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
+                </Panel>
+            </Collapse>
+        </div>);
+    }
+}
 
 ReactDOM.render(
-    <Collapse>
-        <Panel title="simple tile">
-            <ul>
-                <li>Promotions are marketing campaigns ran by Marketplace</li>
-                <li>Participate to sale your products during that promotion and make a profit</li>
-            </ul>
-        </Panel>
-        <Panel title="What are Promotion Products?">
-            <ul>
-                <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>
-                <li>You can choose which products should be available for the promotion</li>
-                <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>
-            </ul>
-        </Panel>
-        <Panel title="Why can i not submit a higher price?">
-            <ul>
-                <li>The Promotion requires a certain price to make sure that our customers are attracted</li>
-            </ul>
-        </Panel>
-        <Panel title="What is Promo Stock?">
-            Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.
-        </Panel>
-    </Collapse>,
+    <App />,
     mountNode);
 ````
diff --git a/docs/loading/demo/basic.md b/docs/loading/demo/basic.md
@@ -16,9 +16,20 @@ a basic way to use it
 ````jsx
 import { Loading } from '@alifd/next';
 
-ReactDOM.render(<Loading tip="loading...">
-    <div className="demo">test</div>
-</Loading>, mountNode);
+ReactDOM.render(
+    <div>
+        <div>LTR
+            <Loading tip="加载中..." >
+                <div className="demo">test</div>
+            </Loading>
+        </div>
+        <div>RTL
+            <Loading tip="加载中..." rtl >
+                <div className="demo">test</div>
+            </Loading>
+        </div>
+    </div>
+    , mountNode);
 ````
 
 ````css

diff --git a/src/collapse/collapse.jsx b/src/collapse/collapse.jsx
@@ -45,7 +45,8 @@ class Collapse extends React.Component {
          */
         accordion: PropTypes.bool,
         children: PropTypes.node,
-        id: PropTypes.string
+        id: PropTypes.string,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -192,7 +193,7 @@ class Collapse extends React.Component {
     }
 
     render() {
-        const {prefix, className, style, disabled, dataSource, id} = this.props;
+        const {prefix, className, style, disabled, dataSource, id, rtl} = this.props;
         const collapseClassName = classNames({
             [`${prefix}collapse`]: true,
             [`${prefix}collapse-disabled`]: disabled,
@@ -201,7 +202,7 @@ class Collapse extends React.Component {
 
         const others = obj.pickOthers(Collapse.propTypes, this.props);
         return (
-            <div id={id} className={collapseClassName} style={style} {...others} role="presentation">
+            <div id={id} className={collapseClassName} style={style} {...others} role="presentation" dir={rtl ? 'rtl' : undefined} >
                 {dataSource ? this.getItemsByDataSource() : this.getItemsByChildren()}
             </div>
         );

diff --git a/src/collapse/main.scss b/src/collapse/main.scss
@@ -2,6 +2,7 @@
 @import "../core/index-noreset.scss";
 @import "scss/mixin";
 @import "scss/variable";
+@import "./rtl.scss";
 
 /* put your code here */
 #{$collapse-prefix} {
@@ -23,7 +24,7 @@
         left: $collapse-icon-margin-l;
         margin-top: -2px;
 
-        @include icon-size($collapse-icon-size, 0, 0, rotate(90deg));
+        @include icon-size($collapse-icon-size, 0, 0, rotate($collapse-icon-rotation-collapsed));
     }
 
     &-panel-title {
@@ -62,7 +63,7 @@
         }
 
         #{$collapse-prefix}-panel-icon {
-            @include icon-size($collapse-icon-size, 0, 0, rotate(180deg));
+            @include icon-size($collapse-icon-size, 0, 0, rotate($collapse-icon-rotation-expanded));
         }
     }
 

diff --git a/src/collapse/rtl.scss b/src/collapse/rtl.scss
@@ -0,0 +1,12 @@
+#{$collapse-prefix}[dir=rtl] {
+    #{$collapse-prefix}-panel-title {
+        padding: $collapse-title-padding-tb $collapse-icon-margin-r + $collapse-icon-margin-l + $collapse-icon-size $collapse-title-padding-tb 0;
+    }
+
+    #{$collapse-prefix}-panel-icon {
+        left: inherit;
+        right: $collapse-icon-margin-l;
+
+        @include icon-size($collapse-icon-size, 0, 0, rotate($collapse-icon-rotation-collapsed-rtl));
+    }
+}
diff --git a/src/collapse/scss/variable.scss b/src/collapse/scss/variable.scss
@@ -78,6 +78,10 @@ $collapse-icon-margin-r: $s-2 !default;
 /// @namespace size/icon
 $collapse-icon-margin-l: $s-3 !default;
 
+$collapse-icon-rotation-collapsed: 90deg;
+$collapse-icon-rotation-expanded: 180deg;
+$collapse-icon-rotation-collapsed-rtl: $collapse-icon-rotation-collapsed * 3;
+
 /// background
 /// @namespace statement/normal/content
 $collapse-content-bg-color: $color-white !default;

diff --git a/src/loading/index.jsx b/src/loading/index.jsx
@@ -5,6 +5,8 @@ import Overlay from '../overlay';
 import ConfigProvider from '../config-provider';
 import {obj, func} from '../util';
 
+/* eslint-disable react/prefer-stateless-function */
+
 /** Loading */
 class Loading extends React.Component {
     static propTypes = {
@@ -59,7 +61,8 @@ class Loading extends React.Component {
         /**
          * should loader be displayed inline
          */
-        inline: PropTypes.bool
+        inline: PropTypes.bool,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -86,7 +89,8 @@ class Loading extends React.Component {
             onVisibleChange,
             tipAlign,
             size,
-            inline
+            inline,
+            rtl
         } = this.props;
 
         let indicatorDom = null;
@@ -100,7 +104,7 @@ class Loading extends React.Component {
                 [`${prefix}loading-fusion-reactor`]: true,
                 [`${prefix}loading-medium-fusion-reactor`]: size === 'medium'
             });
-            indicatorDom = (<div className={fusionReactorCls}>
+            indicatorDom = (<div className={fusionReactorCls} dir={rtl ? 'rtl' : undefined}>
                 <span className={dotCls} style={{backgroundColor}}></span>
                 <span className={dotCls} style={{backgroundColor}}></span>
                 <span className={dotCls} style={{backgroundColor}}></span>

diff --git a/src/loading/main.scss b/src/loading/main.scss
@@ -4,6 +4,7 @@
 @import "../animate/scss/mixin.scss";
 @import "scss/mixin";
 @import "scss/variable";
+@import "./rtl.scss";
 
 /* put your code here */
 
@@ -82,6 +83,7 @@
         @include duration($loading-fusion-vector-seconds);
         @include count(infinite);
         @include function(linear);
+
         @include animation-name(nextVectorRoute);
 
         #{$loading-prefix}-dot {
@@ -152,31 +154,31 @@
 
 @include keyframes(nextVectorRoute) {
     0% {
-        @include transform(rotate(0deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 0));
     }
     5% {
-        @include transform(rotate(90deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 1));
     }
     25% {
-        @include transform(rotate(90deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 1));
     }
     30% {
-        @include transform(rotate(180deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 2));
     }
     50% {
-        @include transform(rotate(180deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 2));
     }
     55% {
-        @include transform(rotate(270deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 3));
     }
     75% {
-        @include transform(rotate(270deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 3));
     }
     80% {
-        @include transform(rotate(360deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 4));
     }
     100% {
-        @include transform(rotate(360deg));
+        @include transform(rotate($loading-fusion-vector-rotation-step * 4));
     }
 }
 

diff --git a/src/loading/rtl.scss b/src/loading/rtl.scss
@@ -0,0 +1,33 @@
+#{$loading-prefix}-fusion-reactor[dir=rtl] {
+    @include animation-name(nextVectorRouteRTL);
+}
+
+@include keyframes(nextVectorRouteRTL) {
+    0% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 0));
+    }
+    5% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 1));
+    }
+    25% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 1));
+    }
+    30% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 2));
+    }
+    50% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 2));
+    }
+    55% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 3));
+    }
+    75% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 3));
+    }
+    80% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 4));
+    }
+    100% {
+        @include transform(rotate($loading-fusion-vector-rotation-step-rtl * 4));
+    }
+}
diff --git a/src/loading/scss/variable.scss b/src/loading/scss/variable.scss
@@ -24,6 +24,8 @@ $loading-dot-color: $color-brand1-6 !default;
 
 $loading-fusion-vector-seconds: 5.6s;
 $loading-fusion-vector-dot-seconds: 1.4s;
+$loading-fusion-vector-rotation-step: 90deg;
+$loading-fusion-vector-rotation-step-rtl: $loading-fusion-vector-rotation-step * -1;
 
 /// width
 /// @namespace size/bounding