feat(Range): RTL feature of Range Component

alibaba-fusion · Mar 11, 2019 · 2127ee6 · 2127ee6
1 parent 0b93378
commit 2127ee6
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 65 deletions.
diff --git a/docs/range/demo/accessibility.md b/docs/range/demo/accessibility.md
@@ -22,14 +22,10 @@ const style = {
     marginBottom: '15px'
 };
 
-ReactDOM.render((
-    <div style={{width: '400px', margin: '50px'}}>
-
+ReactDOM.render(<div style={{width: '400px', margin: '50px'}}>
         <h4>single slider - from left to right</h4>
         <Range defaultValue={30} style={style} hasTip={false} />
         <h4>single slider - from right to left</h4>
         <Range defaultValue={30} style={style} reverse hasTip={false} />
-
-    </div>
-), mountNode);
+    </div>, mountNode);
 ````
diff --git a/docs/range/demo/basic.md b/docs/range/demo/basic.md
@@ -24,9 +24,7 @@ const style = {
     marginBottom: '15px'
 };
 
-ReactDOM.render((
-    <div style={{width: '400px', margin: '50px'}}>
-
+ReactDOM.render(<div style={{width: '400px', margin: '50px'}}>
         <h4>single slider - from left to right</h4>
         <Range defaultValue={30} style={style} hasTip={false} />
         <h4>single slider - from right to left</h4>
@@ -47,6 +45,5 @@ ReactDOM.render((
         <Range disabled tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />
         <h4>tooltipVisible</h4>
         <Range tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />
-    </div>
-), mountNode);
+    </div>, mountNode);
 ````
diff --git a/docs/range/demo/marks.md b/docs/range/demo/marks.md
@@ -23,8 +23,7 @@ const style = {
     marginTop: '20px'
 };
 
-ReactDOM.render((
-    <div style={{width: '400px', margin: '50px'}}>
+ReactDOM.render(<div style={{width: '400px', margin: '50px'}}>
         <p>With minimal and maximal value</p>
         <Range defaultValue={0} marks={[0, 100]} style={style} />
         <Range slider={'double'} defaultValue={[20, 40]} scales={[0, 100]} marks={[0, 100]} style={style} />
@@ -41,6 +40,5 @@ ReactDOM.render((
         <Range defaultValue={30} marks={[0, 26, 37, 100]} style={style} />
         <Range slider={'double'} defaultValue={[20, 40]} marks={[0, 26, 37, 100]} style={style} hasTip={false}/>
         <Range defaultValue={30} marks={{0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C'}} style={style} />
-    </div>
-), mountNode);
+    </div>, mountNode);
 ````
diff --git a/docs/range/demo/range.md b/docs/range/demo/range.md
@@ -22,13 +22,13 @@ const style = {
     marginBottom: '40px',
     marginTop: '40px'
 };
-ReactDOM.render((
+ReactDOM.render(
     <div style={{width: '400px', margin: '50px'}}>
         <p>Range 0 ~ 1024</p>
         <Range defaultValue={128} min={0} max={1024} marks={[0, 1024]} style={style} />
         <p>Range 0 ~ 1024，step 128</p>
         <Range defaultValue={512} min={0} max={1024} step={128} marks={[0, 1024]}
             style={style} />
     </div>
-), mountNode);
+, mountNode);
 ````
diff --git a/docs/range/demo/reverse.md b/docs/range/demo/reverse.md
@@ -22,7 +22,7 @@ const style = {
     marginBottom: '15px'
 };
 
-ReactDOM.render((
+ReactDOM.render(
     <div style={{width: '400px', margin: '50px'}}>
         <Range defaultValue={30} style={style} hasTip={false} />
         <Range defaultValue={30} style={style} reverse hasTip={false} />
@@ -32,6 +32,5 @@ ReactDOM.render((
         <Range defaultValue={30} disabled style={style} reverse />
         <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />
         <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} reverse />
-    </div>
-), mountNode);
+    </div>, mountNode);
 ````
diff --git a/src/range/main.scss b/src/range/main.scss
@@ -54,4 +54,18 @@
             );
         }
     }
+
+    &range[dir=rtl] {
+        .#{$css-prefix}range-mark {
+            position: relative;
+            cursor: auto;
+            .#{$css-prefix}range-mark-text {
+                position: absolute;
+                right: 0;
+                transform: translateX(50%);
+                padding-right: 2px;
+                text-align: center;
+            }
+        }
+    }
 }
diff --git a/src/range/view/fixedSlider.jsx b/src/range/view/fixedSlider.jsx
@@ -7,7 +7,13 @@ import { getPercent } from '../utils';
 const Tooltip = Balloon.Tooltip;
 const { noop } = func;
 
-function _getStyle(min, max, value) {
+function _getStyle(min, max, value, rtl) {
+    if (rtl) {
+        return {
+            left: `${getPercent(min, max, max + min - value[1])}%`,
+            right: `${getPercent(min, max, value[0])}%`,
+        };
+    }
     return {
         left: `${getPercent(min, max, value[0])}%`,
         right: `${100 - getPercent(min, max, value[1])}%`,
@@ -24,6 +30,7 @@ function sliderFrag(props) {
         onMouseEnter,
         onMouseLeave,
         onMouseDown,
+        rtl,
     } = props;
 
     const activeClass =
@@ -32,7 +39,7 @@ function sliderFrag(props) {
     return (
         <div
             className={`${prefix}range-frag ${activeClass}`}
-            style={_getStyle(min, max, value)}
+            style={_getStyle(min, max, value, rtl)}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
             onMouseDown={onMouseDown}
@@ -59,6 +66,7 @@ sliderFrag.propTypes = {
     onMouseDown: PropTypes.func,
     value: PropTypes.arrayOf(PropTypes.number),
     disabled: PropTypes.bool,
+    rtl: PropTypes.bool,
 };
 
 export default class FixedSlider extends React.Component {
@@ -77,6 +85,7 @@ export default class FixedSlider extends React.Component {
         tipRender: PropTypes.func,
         disabled: PropTypes.bool,
         hasMovingClass: PropTypes.bool,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -86,6 +95,7 @@ export default class FixedSlider extends React.Component {
         onProcess: noop,
         tipRender: value => value,
         reverse: false,
+        rtl: false,
     };
 
     constructor(props) {

diff --git a/src/range/view/mark.jsx b/src/range/view/mark.jsx
@@ -14,6 +14,7 @@ export default class Mark extends React.Component {
         prefix: PropTypes.string,
         marks: PropTypes.object,
         marksPosition: PropTypes.string,
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -22,22 +23,34 @@ export default class Mark extends React.Component {
         max: 100,
         value: 0,
         marksPosition: '',
+        rtl: false,
     };
 
     _renderItems() {
-        const { min, max, value, prefix, marks } = this.props;
+        const { min, max, value, prefix, marks, rtl } = this.props;
         const items = [];
 
         Object.keys(marks).forEach((mark, i) => {
             const classes = classNames({
                 [`${prefix}range-mark-text`]: true,
                 activated: inRange(mark, value, min),
             });
-            const left = `${getPercent(min, max, mark)}%`;
+            let style;
+            if (rtl) {
+                style = {
+                    right: `${getPercent(min, max, mark)}%`,
+                    left: 'auto',
+                };
+            } else {
+                style = {
+                    left: `${getPercent(min, max, mark)}%`,
+                    right: 'auto',
+                };
+            }
 
             items.push(
                 // "key" is for https://fb.me/react-warning-keys
-                <span className={classes} style={{ left: left }} key={i}>
+                <span className={classes} style={style} key={i}>
                     {marks[mark]}
                 </span>
             );

diff --git a/src/range/view/range.jsx b/src/range/view/range.jsx
@@ -243,6 +243,10 @@ export default class Range extends React.Component {
          * tooltip是否默认展示
          */
         tooltipVisible: PropTypes.bool,
+        /**
+         * 是否已rtl模式展示
+         */
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -262,6 +266,7 @@ export default class Range extends React.Component {
         reverse: false,
         pure: false,
         marksPosition: 'above',
+        rtl: false,
     };
 
     constructor(props) {
@@ -553,15 +558,15 @@ export default class Range extends React.Component {
     // position => current (value type)
     _positionToCurrent(position) {
         const { start, end } = this._moving;
-        const { step, min, max } = this.props;
+        const { step, min, max, rtl } = this.props;
 
         if (position < start) {
             position = start;
         } else if (position > end) {
             position = end;
         }
-        const percent = getPercent(start, end, position);
-
+        let percent = getPercent(start, end, position);
+        percent = rtl ? 100 - percent : percent;
         // reset by step
         const newValue = parseFloat(
             (Math.round(((percent / 100) * (max - min)) / step) * step).toFixed(
@@ -574,12 +579,12 @@ export default class Range extends React.Component {
 
     _currentToValue(current, preValue, lastPosition, isFixedWidth) {
         const { dragging } = this._moving;
+        const { min, max } = this.props;
 
         if (!_isMultiple(this.props.slider, isFixedWidth)) {
             return current;
         } else {
             let result;
-            const { min, max } = this.props;
 
             const precision = getPrecision(this.props.step);
             const diff = current - lastPosition;
@@ -659,6 +664,7 @@ export default class Range extends React.Component {
             fixedWidth,
             defaultValue,
             tooltipVisible,
+            rtl,
         } = this.props;
         const classes = classNames({
             [`${prefix}range`]: true,
@@ -689,6 +695,7 @@ export default class Range extends React.Component {
             tooltipVisible,
             hasMovingClass: this.state.hasMovingClass,
             disabled,
+            rtl,
         };
 
         this.isFixedWidth =
@@ -707,6 +714,7 @@ export default class Range extends React.Component {
                 style={style}
                 className={classes}
                 id={id}
+                dir={rtl ? 'rtl' : 'ltr'}
                 onMouseDown={disabled ? noop : this._onMouseDown.bind(this)}
             >
                 {marks !== false && marksPosition === 'above' ? (

diff --git a/src/range/view/scale.jsx b/src/range/view/scale.jsx
@@ -13,29 +13,42 @@ export default class Scale extends React.Component {
         ]),
         prefix: PropTypes.string,
         scales: PropTypes.arrayOf(PropTypes.number),
+        rtl: PropTypes.bool,
     };
 
     static defaultProps = {
         prefix: 'next-',
         min: 0,
         max: 100,
         value: 0,
+        rtl: false,
     };
 
     _renderItems() {
-        const { min, max, value, prefix, scales } = this.props;
+        const { min, max, value, prefix, scales, rtl } = this.props;
         const items = [];
 
         scales.forEach((scale, i) => {
             const classes = classNames({
                 [`${prefix}range-scale-item`]: true,
                 activated: inRange(scale, value, min),
             });
-            const left = `${getPercent(min, max, scale)}%`;
+            let style;
+            if (rtl) {
+                style = {
+                    right: `${getPercent(min, max, scale)}%`,
+                    left: 'auto',
+                };
+            } else {
+                style = {
+                    left: `${getPercent(min, max, scale)}%`,
+                    right: 'auto',
+                };
+            }
 
             items.push(
                 // "key" is for https://fb.me/react-warning-keys
-                <span className={classes} style={{ left: left }} key={i} />
+                <span className={classes} style={style} key={i} />
             );
         });