fix(Slider): 滑块输入条 thumbSize属性没有效果, 滑块输入条 thumbSize 设置很大时然后使用 shownThumb=false 输入条拉不满 (#234 # 233) (#236)

* 编写选项卡组件

* 类型名称请调整，添加组件文档在网站上展示

* #162修复报错

* fix:#162修复报错

* SpeedDial 悬浮标记

* 优化类型

* feat(ActionSheet): Add new component.

* fix: ActionSheet 实例优化，组件优化

* feat(SearchInputBar): Add new component.

* feat(Pagination): Add new component.

* fix(Tooltip): 修复cloud弹出元素位置问题

* doc(Drawer): Update README.md

* doc: Update README.md

* fix(Rating): Rating 评分组件 使用繁琐(#244)

* fix(Rating): Rating 评分组件 使用繁琐(#244)

* fix(Slider): 滑块输入条 thumbSize属性没有效果, 滑块输入条 thumbSize 设置很大时然后使用 shownThumb=false 效果如下 (#234 # 233)

* fix(Slider): 滑块输入条 thumbSize属性没有效果, 滑块输入条 thumbSize 设置很大时然后使用 shownThumb=false 输入条拉不满  (#234 # 233)

Author: cuilanxin

example/examples/src/routes/Slider/index.tsx

@@ -44,6 +44,7 @@ export default class SliderView extends React.Component<
                 <Slider
                   value={this.state.sliderValue as number}
                   onChange={this.handleSliderChange}
+                  thumbSize={{width: 60, height: 30}}
                 />
               </WingBlank>
               <WingBlank>

packages/core/src/Slider/index.tsx

@@ -149,7 +149,10 @@ export default class Slider extends Component<SliderProps, SliderState> {
   }
   getThumbLeft(value: number) {
     const ratio = (value - this.props.minValue!) / (this.props.maxValue! - this.props.minValue!);
-    return ratio * (this.state.containerSize.width - this.state.thumbSize.width);
+    if (this.props.shownThumb) {
+      return ratio * (this.state.containerSize.width - this.state.thumbSize.width);
+    }
+    return ratio * this.state.containerSize.width;
   }
   getCurrentValue = () => (this.state.value as any).__getValue();
   handlePanResponderGrant = () => {
@@ -174,8 +177,11 @@ export default class Slider extends Component<SliderProps, SliderState> {
     this.props.onChange!(this.getCurrentValue());
   };
   getValue(gestureState: PanResponderGestureState) {
-    const { vertical, minValue, maxValue } = this.props;
-    const length = this.state.containerSize.width - this.state.thumbSize.width;
+    const { vertical, minValue, maxValue, shownThumb } = this.props;
+    let length = this.state.containerSize.width - this.state.thumbSize.width;
+    if (!shownThumb) {
+      length = this.state.containerSize.width;
+    }
     const thumbLeft = this._previousLeft + (vertical ? gestureState.dy : gestureState.dx);
     const ratio = thumbLeft / length;
     if (this.props.step) {
@@ -216,10 +222,12 @@ export default class Slider extends Component<SliderProps, SliderState> {
     } = { position: 'absolute' };
 
     if (this.props.vertical) {
-      minimumTrackStyle.height = Animated.add(thumbStart, thumbSize.height / 2);
+      minimumTrackStyle.height = Animated.add(thumbStart, 0);
+      // minimumTrackStyle.height = Animated.add(thumbStart, thumbSize.height / 2);
       minimumTrackStyle.marginLeft = -trackSize.width;
     } else {
-      minimumTrackStyle.width = Animated.add(thumbStart, thumbSize.width / 2);
+      minimumTrackStyle.width = Animated.add(thumbStart, 0);
+      // minimumTrackStyle.width = Animated.add(thumbStart, thumbSize.width / 2);
       minimumTrackStyle.marginTop = -trackSize.height;
     }
     return minimumTrackStyle;
@@ -271,9 +279,13 @@ export default class Slider extends Component<SliderProps, SliderState> {
     } = this.props;
     const { value, thumbSize, containerSize } = this.state;
     const touchOverflowStyle = {} as ViewStyle;
+    let outputRange = containerSize.width;
+    if (shownThumb) {
+      outputRange = containerSize.width - thumbSize.width;
+    }
     const thumbStart = value.interpolate({
       inputRange: [minValue!, maxValue!],
-      outputRange: [0, containerSize.width - thumbSize.width],
+      outputRange: [0, outputRange],
       // extrapolate: 'clamp',
     });
     const minimumTrackStyle = {
@@ -325,6 +337,11 @@ export default class Slider extends Component<SliderProps, SliderState> {
                 transform: [...this.getThumbPositionStyles(thumbStart), ...thumbStyleTransform],
                 ...valueVisibleStyle,
               },
+              {
+                width: thumbSize.width,
+                height: thumbSize.height,
+                borderRadius: thumbSize.width / 2,
+              },
             ])}
           />
         )}