support custom track & handle style, for react-tiny #249

silentcloud · 2017-04-06T09:55:14Z

No description provided.

coveralls · 2017-04-06T10:03:26Z

Coverage increased (+1.006%) to 50.8% when pulling 11d765e on custom-handle-track into 39d5e8b on master.

paranoidjk · 2017-04-06T10:10:02Z

examples/slider.js

@@ -102,6 +102,10 @@ ReactDOM.render(
      <Slider tipFormatter={null} onChange={log} />
    </div>
    <div style={style}>
+      <p>custo Slider handle and track style</p>


custom typo

@paranoidjk done

coveralls · 2017-04-07T02:15:03Z

Coverage increased (+1.006%) to 50.8% when pulling b9c73bb on custom-handle-track into 39d5e8b on master.

benjycui · 2017-04-07T02:20:03Z

Why not just trackStyle and handleStyle, then we can remove these APIs.

minimumTrackTintColor
maximumTrackTintColor
handleColor
handleSize
trackSize

silentcloud · 2017-04-07T02:39:18Z

@benjycui for react-tiny, gitlab/react-tiny/issue/85, use xxx-color or xxx-size;

trackStyle can not distinguish between minimum and maximum color;

handleSize & handleColor can be replaced with handleStyle ;

but https://github.com/react-component/slider/pull/249/files#diff-9c6be5d20cab58fc76addf3a454a2dafR20；

Normally it is enough to custom style use color & size

paranoidjk · 2017-04-07T04:20:18Z

@silentcloud
I agree rc-slider to use trackStyle and handleStyle api as @benjycui suggest.
but react-tiny can still use below api, just do a wrap.

minimumTrackTintColor
maximumTrackTintColor
handleColor
handleSize
trackSize

paranoidjk · 2017-04-07T04:22:25Z

trackStyle may split to minimumTrackStyle and maximumTrackStyle

coveralls · 2017-04-07T06:15:05Z

Coverage decreased (-0.002%) to 49.793% when pulling c3df6dc on custom-handle-track into 39d5e8b on master.

paranoidjk · 2017-04-07T06:25:08Z

src/Handle.jsx

-      style.borderColor = minimumTrackTintColor;
-    }
-    return <div {...restProps} className={className} style={style} />;
+    return <div {...restProps} className={className} style={assign({}, style, handleStyle)} />;


disabled 的背景色逻辑不需要了？

Why import object-assign here when you're literally spreading objects all over?

This should be style={{...style, ...handleStyle}}

@STRML fixed in 441779c

paranoidjk · 2017-04-07T06:31:59Z

track 有个 border-radius 而 rail 没有，底色不同的时候左侧就会露出来 @silentcloud 也顺手改下吧

https://github.com/react-component/slider/blob/master/assets/index.less#L43

https://github.com/react-component/slider/blob/master/assets/index.less#L32

coveralls · 2017-04-07T06:37:37Z

Coverage increased (+0.2%) to 50.0% when pulling a1d31f1 on custom-handle-track into 39d5e8b on master.

coveralls · 2017-04-07T06:43:15Z

Coverage increased (+0.2%) to 50.0% when pulling 1ca4303 on custom-handle-track into 39d5e8b on master.

paranoidjk · 2017-04-07T06:46:35Z

src/common/Track.jsx

-  }
-  return <div className={className} style={style} />;
+
+  const trackStyle = disabled ? style : assign({}, style, minimumTrackStyle);


这样感觉有点怪，minimumTrackStyle 用处是自定义样式，除了颜色还有宽高也可能会变，这样如何：

const baseTrackStyle = assign({}, style, minimumTrackStyle); const disabledTrackStyle = { // 原来 disable 的样式逻辑 }; const trackStyle = disabled ? assign(baseTrackStyle, disabledTrackStyle) : baseTrackStyle;

@paranoidjk 我就是按照没加 minimumTintColor 的时候的逻辑搞的

恩，主要是我们的api 从 minimumTintColor 自定义颜色扩大到了 minimumTrackStyle 自定义样式，如果用户发现 disable 的时候他自定义的样式全没了，就不太合理。

看了之前的记录 https://github.com/react-component/slider/blob/0017ed4bc4a5e5184e9e76aef6f487a052e8a7fc/src/common/Track.jsx，之前没有 disabled 的逻辑

我直接把 disabled 去掉好了

ok，把 disabled 的样式逻辑去掉也行。

coveralls · 2017-04-07T07:04:10Z

Coverage decreased (-0.002%) to 49.793% when pulling db4a0f1 on custom-handle-track into 39d5e8b on master.

paranoidjk · 2017-04-07T07:19:16Z

@silentcloud 7.0.0

benjycui · 2017-04-07T08:10:34Z

README.md

@@ -105,8 +105,9 @@ The following APIs are shared by Slider and Range.
 | onBeforeChange | Function | NOOP | `onBeforeChange` will be triggered when `ontouchstart` or `onmousedown` is triggered. |
 | onChange | Function | NOOP | `onChange` will be triggered while the value of Slider changing. |
 | onAfterChange | Function | NOOP | `onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered. |
-| minimumTrackTintColor | String |  | The color used for the track to the left of the button. |
-| maximumTrackTintColor | String |  | The color used for the track to the right of the button. |
+| minimumTrackStyle | Object |`{}` | The style used for the track to the left of the button. |


看了源码和内网 issue 才知道这个 API 是干嘛用的 😢

@benjycui 没啊，RN 官方也这么命名的 http://facebook.github.io/react-native/releases/next/docs/slider.html

对于单滑块，这个命名是没问题的，但对于多滑块，就含义不清了。。不过算了，先用着看看吧。

恩多滑块貌似是不适合，当时也没想到好名字，就跟着 RN 来了

gragland · 2017-04-07T19:23:12Z

Was the handleSize prop also added to Range or just Slider? Would love to have this functionality for Range as well.

#249

react-component/slider#249

silentcloud force-pushed the custom-handle-track branch from 2a51f4a to 11d765e Compare April 6, 2017 09:59

paranoidjk reviewed Apr 6, 2017

View reviewed changes

silentcloud force-pushed the custom-handle-track branch from 11d765e to b9c73bb Compare April 7, 2017 02:11

silentcloud force-pushed the custom-handle-track branch from b9c73bb to c3df6dc Compare April 7, 2017 06:11

paranoidjk reviewed Apr 7, 2017

View reviewed changes

silentcloud force-pushed the custom-handle-track branch from c3df6dc to a1d31f1 Compare April 7, 2017 06:34

silentcloud force-pushed the custom-handle-track branch from a1d31f1 to 1ca4303 Compare April 7, 2017 06:39

paranoidjk reviewed Apr 7, 2017

View reviewed changes

support custom track & handle style, for react-tiny

db4a0f1

silentcloud force-pushed the custom-handle-track branch from 1ca4303 to db4a0f1 Compare April 7, 2017 07:00

paranoidjk merged commit cbb3b8a into master Apr 7, 2017

paranoidjk deleted the custom-handle-track branch April 7, 2017 07:16

benjycui reviewed Apr 7, 2017

View reviewed changes

paranoidjk mentioned this pull request Apr 9, 2017

Add handleStyle and minimumTrackStyle props to Range #251

Closed

paranoidjk added a commit that referenced this pull request Apr 21, 2017

refactor: remove object-assign, user spread operator.

441779c

#249

jspyhotdev pushed a commit to jspyhotdev/React-slider that referenced this pull request Jul 13, 2018

refactor: remove object-assign, user spread operator.

2e1967c

react-component/slider#249

Senior-Hayato-Suzuki pushed a commit to Senior-Hayato-Suzuki/react-slider that referenced this pull request Feb 16, 2020

refactor: remove object-assign, user spread operator.

5a1e277

react-component/slider#249

Senior-Hayato-Suzuki added a commit to Senior-Hayato-Suzuki/react-slider that referenced this pull request Feb 26, 2020

refactor: remove object-assign, user spread operator.

5f0f385

react-component/slider#249

blue-git-pro added a commit to blue-git-pro/dashboard-next.js that referenced this pull request May 14, 2021

refactor: remove object-assign, user spread operator.

a3f9ccb

react-component/slider#249

web3gru pushed a commit to web3gru/slider that referenced this pull request May 13, 2023

refactor: remove object-assign, user spread operator.

404fef8

react-component/slider#249

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

support custom track & handle style, for react-tiny #249

support custom track & handle style, for react-tiny #249

silentcloud commented Apr 6, 2017

coveralls commented Apr 6, 2017

paranoidjk Apr 6, 2017

silentcloud Apr 7, 2017

coveralls commented Apr 7, 2017

benjycui commented Apr 7, 2017

silentcloud commented Apr 7, 2017 •

edited

Loading

paranoidjk commented Apr 7, 2017

paranoidjk commented Apr 7, 2017

coveralls commented Apr 7, 2017

paranoidjk Apr 7, 2017

STRML Apr 21, 2017

paranoidjk Apr 21, 2017

paranoidjk commented Apr 7, 2017

coveralls commented Apr 7, 2017

coveralls commented Apr 7, 2017

paranoidjk Apr 7, 2017

paranoidjk Apr 7, 2017

silentcloud Apr 7, 2017

paranoidjk Apr 7, 2017

silentcloud Apr 7, 2017

silentcloud Apr 7, 2017

paranoidjk Apr 7, 2017

coveralls commented Apr 7, 2017

paranoidjk commented Apr 7, 2017

benjycui Apr 7, 2017

silentcloud Apr 7, 2017

benjycui Apr 7, 2017

silentcloud Apr 7, 2017

gragland commented Apr 7, 2017

support custom track & handle style, for react-tiny #249

support custom track & handle style, for react-tiny #249

Conversation

silentcloud commented Apr 6, 2017

coveralls commented Apr 6, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Apr 7, 2017

benjycui commented Apr 7, 2017

silentcloud commented Apr 7, 2017 • edited Loading

paranoidjk commented Apr 7, 2017

paranoidjk commented Apr 7, 2017

coveralls commented Apr 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paranoidjk commented Apr 7, 2017

coveralls commented Apr 7, 2017

coveralls commented Apr 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Apr 7, 2017

paranoidjk commented Apr 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gragland commented Apr 7, 2017

silentcloud commented Apr 7, 2017 •

edited

Loading