fix(Slider): should locate at end when start value is equal to end va…

…lue, close #377
ksc-fe · Oct 28, 2019 · 5112ecd · 5112ecd
1 parent e339261
commit 5112ecd
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 24 deletions.
diff --git a/components/slider/index.spec.js b/components/slider/index.spec.js
@@ -211,15 +211,15 @@ describe('Slider', () => {
     it('should locate at the end if start value is equal to end value', () => {
         class Component extends Intact {
             @Intact.template()
-            static template = `<Slider min={{ 1 }}
-                max={{ 1 }}
-                value={{ 1 }}
-            />`;
+            static template = `<div>
+                <Slider min={{ 1 }} max={{ 1 }} value={{ 1 }} />
+                <Slider min={{ 1 }} max={{ 1 }} isRange />
+            </div>`;
             _init() {
                 this.Slider = Slider;
             }
         }
         instance = mount(Component);
-
+        expect(instance.element.innerHTML).to.matchSnapshot();
     });
 });
diff --git a/components/slider/index.vdt b/components/slider/index.vdt
@@ -21,6 +21,35 @@ const classNameObj = {
 };
 
 const sliderWidth = max - min;
+const toPercent = (value) => value / sliderWidth * 100 + '%';
+let barStyle;
+let handleStartStyle;
+let handleEndStyle;
+if (sliderWidth) {
+    if (isRange) {
+        barStyle = {
+            width: toPercent(Math.abs(_sliderValue[1] - _sliderValue[0])),
+            left: toPercent(Math.min(_sliderValue[0], _sliderValue[1]) - min),
+        };
+        handleStartStyle = {
+            left: toPercent(_sliderValue[0] - min),
+        };
+        handleEndStyle = {
+            left: toPercent(_sliderValue[1] - min),
+        };
+    } else {
+        barStyle = {
+            width: toPercent(_sliderValue - min),
+        };
+        handleStartStyle = {
+            left: toPercent(_sliderValue - min),
+        };
+    }
+} else {
+    barStyle = {width: '100%', left: '0'};
+    handleStartStyle = {left: '100%'};
+    handleEndStyle = {left: '0'};
+}
 
 const tooltip = (value) => {
     return <b:tooltip args={{ [value] }}>{{ value }}</b:tooltip>;
@@ -35,22 +64,8 @@ const tooltipProps = always ? {always, value: true} : {always: false};
             <div class="k-wrapper" 
                 ref={{ dom => self.$slider = dom }}
             >
-                <div class="k-bar"
-                    style={{ isRange ?
-                        {
-                            width: Math.abs(_sliderValue[1] - _sliderValue[0]) / sliderWidth * 100 + '%',
-                            left: (Math.min(_sliderValue[0], _sliderValue[1]) - min) / sliderWidth * 100 + '%'
-                        } :
-                        {
-                            width: (_sliderValue - min) / sliderWidth * 100 + '%'
-                        }
-                    }}
-                ></div>
-                <div class="k-handle-wrapper" style={{ {
-                    left: isRange ?
-                        (_sliderValue[0] - min) / sliderWidth * 100 + '%' :
-                        (_sliderValue - min) / sliderWidth * 100 + '%'
-                } }}>
+                <div class="k-bar" style={{ barStyle }}></div>
+                <div class="k-handle-wrapper" style={{ handleStartStyle }}>
                     <Tooltip ref="tooltip1"
                         disabled={{ !showTooltip }}
                         {{ ...tooltipProps }}
@@ -80,9 +95,7 @@ const tooltipProps = always ? {always, value: true} : {always: false};
                     </Tooltip>
                 </div>
                 <div class="k-handle-wrapper" v-if={{ isRange }}
-                    style={{ {
-                        left: (_sliderValue[1] - min) / sliderWidth * 100 + '%'
-                    } }}
+                    style={{ handleEndStyle }}
                 >
                     <Tooltip ref="tooltip2" 
                         disabled={{ !showTooltip }}

diff --git a/test/__snapshots__/Slider.md b/test/__snapshots__/Slider.md
@@ -98,3 +98,9 @@
 "满2年，优惠4个月"
 ```
 
+#### `should locate at the end if start value is equal to end value`
+
+```
+"<div class=\"k-slider k-show-input k-show-end\"><div class=\"k-slider-wrapper\"><div class=\"k-bar-wrapper\"><div class=\"k-wrapper\"><div class=\"k-bar\" style=\"width: 100%; left: 0px;\"></div><div class=\"k-handle-wrapper\" style=\"left: 100%;\"><div class=\"k-handle\" tabindex=\"0\"></div><!--placeholder--><div class=\"k-dropdown-menu k-tooltip-content k-cannot-hover k-dark\" style=\"display: none;\"><i class=\"k-arrow\"></i>1</div></div></div></div><div class=\"k-box\"><span>1</span><span>1</span></div></div><div class=\"k-spinner-wrapper\"><div class=\"k-spinner k-vertical\"><button class=\"k-btn k-default k-btn-icon k-left k-disabled\" tabindex=\"-1\" type=\"button\"><i class=\"ion-ios-arrow-down\"></i></button><div class=\"k-input\"><div class=\"k-wrapper\"><input class=\"k-inner\" type=\"text\"></div></div><button class=\"k-btn k-default k-btn-icon k-right k-disabled\" tabindex=\"-1\" type=\"button\"><i class=\"ion-ios-arrow-up\"></i></button></div></div></div><div class=\"k-slider k-show-end\"><div class=\"k-slider-wrapper\"><div class=\"k-bar-wrapper\"><div class=\"k-wrapper\"><div class=\"k-bar\" style=\"width: 100%; left: 0px;\"></div><div class=\"k-handle-wrapper\" style=\"left: 100%;\"><div class=\"k-handle\" tabindex=\"0\"></div><!--placeholder--><div class=\"k-dropdown-menu k-tooltip-content k-cannot-hover k-dark\" style=\"display: none;\"><i class=\"k-arrow\"></i>1</div></div><div class=\"k-handle-wrapper\" style=\"left: 0px;\"><div class=\"k-handle\" tabindex=\"0\"></div><!--placeholder--><div class=\"k-dropdown-menu k-tooltip-content k-cannot-hover k-dark\" style=\"display: none;\"><i class=\"k-arrow\"></i>1</div></div></div></div><div class=\"k-box\"><span>1</span><span>1</span></div></div></div>"
+```
+