airbnb / rheostat Goto Github PK

updateNewValues ignores new props values when sliding. This reduces the ability to build completely controlled components using Rheostat (rheostat controls rendering while sliding).

A specific use-case: I'm building a 3 handle slider where the outer handles represent the bounds and the inner handle, the midpoint. When dragging an outer handle, I want to move the inner handle as well. As it stands, rheostat only updates the values after I've released the handle (ie: slidingIndex is null).

Clearly the code to skip updates while sliding was added intentionally. I was curious what the reasons are/were and, in general, if there's been consideration for such a use case as described above.

If I comment those lines out, my slider works as I'd expected.

For reference:

https://github.com/airbnb/rheostat/blob/master/src/Slider.jsx#L581

  updateNewValues(nextProps) {
    // Don't update while the slider is sliding
    if (this.state.slidingIndex !== null) {
      return;
    }

Hi,

Thanks for creating this great package, which I am putting to good use. Would it be possible to put out a new release though?

It would be great to finally get rid of the messages like the ones below (which PR#138) addresses.

Warning: Expected `onMouseDown` listener to be a function, instead got `false`.
    
    If you used to conditionally omit it with onMouseDown={condition && value}, pass onMouseDown={condition ? value : undefined} instead.
        in button (created by Button)
        in Button (created by Rheostat)
        in div (created by Rheostat)
        in Rheostat (created by Slider)
        in div (created by <snip>)
        in <snip> (created by <snip>)
        in div (created by <snip>)
        in div (created by <snip>)
        in <snip> (created by <snip>)
        in <snip> (created by <snip>)
        in <snip>

Many thanks

In my app theres different functionality for click keydown whatsoever, so the onChange function doesnt fit my requirements.
It would be pretty neat, if the public state variables that gets passed to onChange would also be passed to the other handlers, like onClick.

Currently I have something like:

min={0}
max={10}
values={[0, 10]}

and yeah, I can move the slider from {0, 10} values, but only for integer values.

Could be possible setup for .5 values? like:

[0, 0.5, 1, 1.5, ... 9.5, 10]

Ideally, something similar to lodash#range

Hi, great work on rheostat. I'm looking for a way to render a tooltip which would display the current value of the slider while it's being dragged. What would be the best way to achieve this?

Reference - https://github.com/react-component/slider

Thanks!

I would imagine onChange would only be called if the value was changed as a result of a keyboard or click interaction.

But it's called when the value prop has changed as well.

Intended, or not?

For now I'm using onValuesUpdated to let me know if the user is in the process of updating the value, and then resetting it when onChange is called.

I've just installed rheostat with yarn and added the import line in my code. I'm getting the following errors.
I don't understand what I must do ...

Uncaught (in promise) Error: Module parse failed: /home/jchapelle/project/frontend-realestate/node_modules/rheostat/src/Slider.jsx Unexpected token (34:11)
You may need an appropriate loader to handle this file type.
| class Button extends React.Component {
|   render() {
|     return <button {...this.props} type="button" />;
|   }
| }

Have two cases to illustrate the unusual behavior:

The working case is if I pass:

min={70}
max={93}
snap
snapPoints={[70, 81, 93]}

The onChange handler gets passed values that land on the snapPoints for both the low and high values.

The failing case is if I pass:

min={1493}
max={3788}
snap
snapPoints={[1493, 2640,3788]}

onChange hander gets passed 2640 at the mid-point, but 1521 (high moved to min) and 3760 (low moved to max).

Looks like some sort of assumptions on the range of values for min and max.

My workaround, for now, is to simply use three values, e.g., 0, 1, 2, and scale everything myself in a wrapping component.

When I create a slider with the snap prop set to true, none of the keys update the value of the slider.

I encountered this in the app I'm working on, and have managed to recreate it as a story in story book using this simple config:

storiesOf('Slider', module)
  .add('Accessible Slider', () => (
    <div style={{margin: 30}}>
      <Rheostat
        min={0}
        max={5}
        snap={true}
        onChange={e => console.log(e.values[0])} />
    </div>
  ));

I would assume that if snap is true and no snap points are passed in, then it should behave in the same way as it would if you were using a mouse, i.e.:

If snap is set to true and no snapPoints are set then the slider is snapped into an absolute position. For example, on a scale of 1-10 if the slider is let go at the 54% mark it'll pick the value 5 and snap to 50%.

Getting this error in chrome console when using custom slider with 1 handle on each side.

commons.js:1342 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're adding a new property in the synthetic event object. The property is never released. See https://fb.me/react-event-pooling for more information.

Error alerts in this section of react:

    if (process.env.NODE_ENV !== 'production') {
      (function () {
        var printWarning = function printWarning(format) {
          for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            args[_key - 1] = arguments[_key];
          }

          var argIndex = 0;
          var message = 'Warning: ' + format.replace(/%s/g, function () {
            return args[argIndex++];
          });
          if (typeof console !== 'undefined') {
            console.error(message); \\ERROR IS CONSOLE LOGGED HERE
          }
          try {
            // --- Welcome to debugging React ---
            // This error was thrown as a convenience so that you can use this stack
            // to find the callsite that caused this warning to fire.
            throw new Error(message);
          } catch (x) {}
        };

i saw someone using this for react-native any idea how??

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 4.19.1 of eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

If we have a slider with multiple handles, and we drag one handle past another, if we mouseup on the slider bar we also trigger the click behavior which will update the position of the handle that we are not dragging.

Here is a GIF of the incorrect behavior:

I'm actually not sure the best way to fix this because we need a global mouseUp handler to trigger endSlide but only a component-level handler for handleClick.

One option would be to set a flag during slide and then ensure that handleClick fires after endSlide using a timeout.

Another option would be to just add a single global mouseUp/touchEnd handler that checks the target of the event and triggers the click behavior if there is no ongoing slide and the target is the component.

I formatted the price with comma and passed it to pitPoints. [eg: 1,23,400]. But I am unable to pass the values into pitPoints. As it is defined with 'PropTypes.arrayOf(PropTypes.number)'. When I format with comma, It treated as string and produce the below error.
'Failed prop type: Invalid prop pitPoints[0] of type string supplied to Rheostat, expected number.'
Please respond to the above question.

Thanks,
Saranya

Version 11.3.0 of nyc was just published.

This version is covered by your current version range and after updating it in your project the build failed.

nyc is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

When using the keyboard to enter a value into the slider, if the slider has been adjusted with the mouse already then interacting with it using the keyboard can cause values at the ends of the scale to be inaccessible. This looks to be something to do with the getNextPositionForKey() method which isn't correctly calculating the proposedPercentage. It should probably just snap to the percentage tied to the next value, at the moment it seems to be trying to step the correct amount percentage-wise which is why it fails when that step takes it over either of the ends.

I encountered this in the app I'm working on, and have managed to recreate it as a story in story book using this simple config:

storiesOf('Slider', module)
  .add('Accessible Slider', () => (
    <div style={{margin: 30}}>
      <Rheostat
        min={0}
        max={5}
        onChange={e => console.log(e.values[0])} />
    </div>
  ));

I'm happy to try and sort this and send a PR, but wanted to throw it up here first in case anyone has any ideas/things I should know about why it's been implemented in the way it has.

Cheers

How to display a US dollar sign to the left of the left and right values below the slider?

It makes sense to add Drag in there...

onSliderDragMove, onSliderDragStart, etc...

Or we can have both?

This is so we can do custom logic for where a value should be snapped to in case we don't want to fit every single snap point into an array at startup time.

☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 4.4.7 of sinon was just published.

This version is covered by your current version range and after updating it in your project the build failed.

sinon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

When i use this component in IE 10, Error is occurred on console like below.
TypeError : Unable to get property 'max' of undefined or null reference
at Rheostat ( xxxxxx bundle.js :5 : 667 )
at g._constructComponentWithoutOwnner..
.
.
.

also bundle.js:5:667 is
Object.getPrototypeOf(Rheostat).call(this,e)),n=t.props,r=n.max,i=n.min,o=n.values;
I check the code 5:667 to bold text

The following examples in the repo's built-in React Storybook (npm run storybook) don't seem to work (tested in Firefox 58 on Mac):

• A Simple Slider
• Dates
• Snapping
• Vertical

(Possibly also "Disabled"; I can't tell if it's working properly or not.)

Props like id, className, style, etc...

there is a performance problem when used as a price filter.

It ends up creating a large dom tree(hundreds of nodes more so when there are more results) and multiple re-renders of the page is ending up hogging memory (like searching a few more times on the page took memory usage of my chrome tab close to 1gb). disabling it steadies memory usage at atound ~200mb most of the time.

I am using Redux and there's a case when I change the values props to default but the slider doesn't reflect that. If I change the slider position everything works fine.

The reason I debugged.
when updateNewValues is called from componentWillReceiveProps, the value of this.state.slidingIndex in Line555 is -1. So it returns from there without updating the state.

It's confusing to have two callbacks for values changing.

So lets kill onValuesChanged which is sort of the same thing as onSliderMove and lets rename onValuesSet to just onChange.

Fix README for values. Talk about how it's initial values, and the length determines the amount of handles, and how you can dynamically alter the values.

Version 6.22.1 of babel-cli just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As babel-cli is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi,

Using the slider, I found a bit cumbersome to add custom props on the slider handles. What do you think about having a handleProps on the <Slider> that would be destructured into the <Handle>? It would simplify small customizations that don't necessarily require a whole new component.

My use case is I want to add a aria-labelledby attribute to the Handle.

Currently, to do this I need to create a new Handle component specific to the Slider I create. For example:

const MyHandle = ({...props}) =>
  <button
    {...props}
    type="button"
    aria-labelledby="aLabelId"
  />;

[...]

<Rheostat handle={MyHandle} />

With a handleProps I could do:

<Rheostat handleProps={{
  aria-labelledby="aLabelId"
}} />

Pressing tab on Shared room checkbox focuses More filters. Similarly pressing shift + tab on More filters focuses Shared room checkbox. Skipping the slider control in both forward and backward navigation.

Please find the stated behavior in the below animation.

For expected keyboard interaction, please refer WAI-ARIA Authoring Practices - Slider (Multi-Thumb).

And I guess for the slider button you would prefer to use<button> instead of <div>. Please check out Use button if you mean it for further details.

I'm currently using Rheostat with the following code:

<Rheostat min={5} max={50} />

When the slider renders, the slide handle is not shown on the slide track. I've been trying to figure it out but haven't had any luck.

From a bit of testing it seems that whenever the min value is greater than zero, the handle initially positions itself off the slide track. Am I perhaps doing something incorrect?

Getting this error after doing a yarn add rheostat...

Seems to be the same error as on react-dates/react-dates#530 where @ljharb suggests that we shouldn't be using babel to transpile the node_modules folder, which sounds sensible. However, I don't know how "not" to do that and I suspect that I am not the only one. I've not consciously made Babel do this, so it seems to be how some of the default templates are setup.

Also, these two Airbnb projects appear to be the top ranking ones for this error, so I do wonder if the issue is more rooted in how this package is setup? I've not experienced this with any other packages....

We'd like to implement two independent ranges on a single slider - The left handle would map from [0, leftMax], and the right would map to [rightMin, 100].

An easy way to support this without having to seriously extend the slider would be to allow the overriding of the canMove validatePosition function. If there is is appetite, I will submit a PR adding canMove to props and some tests.

Hi,

In the process of porting this awesome project to typescript I've faced an issue with default vertical style, which has no visual height:

There are many solutions, for example min-height and position: absolute can solve it:

.rheostat-vertical {
    ...
    min-height: 200px;

    .rheostat-background {
        ....
        position: absolute;
    }

Version 1.0.4 of enzyme-adapter-react-15 was just published.

This version is covered by your current version range and after updating it in your project the build failed.

enzyme-adapter-react-15 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The recent change made to the package.json breaks the default configuration of the eslint-import-resolver-node. Since by default the node resolver only support ['.js', '.json'] it's not able to find the rheostat package because the jsnext:main point to a .jsx file.

IMO we should revert the change in order to avoid to consumer of the package to explicitly set the support of the jsx extension in eslint-import-resolver-node.

334b6cc#diff-b9cfc7f2cdf78a7f4b91a753d10865a2L5

Version 7.3.0 of eslint-plugin-react just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-react is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi,

I need to bring a dual point slider using rheostat. As I have tried giving different handlers as an array, I am unable to fix this. I need different handlers for min value as well as max value.
Do you have any suggestions on it? @ljharb

When using Rheostat, there's always a value with "average" or "median" which is shown in the middle of the data. However this isn't always the preferred behaviour. I have a few options in mind:

• add an option to hide average
• add an option to round the average (with your custom function or Math.round())
• add an option to specify x values to show (although that might be bad for responsive stuff)

Related: algolia/instantsearch#2275

Version 4.18.0 of eslint was just published.

This version is covered by your current version range and after updating it in your project the build failed.

eslint is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The current propType for the components are function, object, or string where string is something like div. It would be great to get more specific or find a propType that actually tests if its a React component.

Version 2.4.0 of eslint-plugin-import just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-import is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 3.4.0 of mocha just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As mocha is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

warning.js:45 Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered bySlider.

I'm getting this warning in React 0.14.6 when clicking/tap the slider icon. I'm using es6 class components with Babel.

In #73 the move from React.PropTypes to PropTypes has happened, but this hasn't been released yet, could that be done? Thanks!

Version 4.2.3 of sinon was just published.

This version is covered by your current version range and after updating it in your project the build failed.

sinon is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

When VioceOver is turned on on my iPhone, neither dragging the handles directly or swiping up/down (as the instruction announced by VoiceOver) can move the handles. This is reproducible in the examples too. Not sure how to fix this accessibility issue. Any suggestions would be appreciated.

https://github.com/mpowaga/react-slider#pearling-bool-default-false

Version 2.3.0 of babel-preset-airbnb just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-airbnb is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴