Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix Dynamically Decreasing Number of Handles Results in Incorrect Han…
…dles (#694)

* tests(Range): display dynamically decreased number of handles (#690)

As expected, this test case currently fails due to the bug described in #690.

* style: automatic formatting by Git hook

* fix(Range): correctly handle dynamic decrease in number of handles (#690)

* tests(Range): increase robustness of test for #690

The test that corresponds to issue #690 now also verifies that `Range` displays handles correctly after increasing their number.
  • Loading branch information
dnlfrst committed Oct 6, 2020
1 parent 38e22f1 commit 179633c
Show file tree
Hide file tree
Showing 2 changed files with 387 additions and 88 deletions.
38 changes: 23 additions & 15 deletions src/Range.tsx
Expand Up @@ -132,28 +132,36 @@ class Range extends React.Component<RangeProps, RangeState> {
}

static getDerivedStateFromProps(props, state) {
if ('value' in props || 'min' in props || 'max' in props) {
const value = props.value || state.bounds;
const nextBounds = value.map((v, i) =>
if (!('value' in props || 'min' in props || 'max' in props)) return null;

const value = props.value || state.bounds;
let nextBounds = value.map((v, i) =>
trimAlignValue({
value: v,
handle: i,
bounds: state.bounds,
props,
}),
);

if (state.bounds.length === nextBounds.length) {
if (nextBounds.every((v, i) => v === state.bounds[i])) {
return null;
}
} else {
nextBounds = value.map((v, i) =>
trimAlignValue({
value: v,
handle: i,
bounds: state.bounds,
props,
}),
);
if (
nextBounds.length === state.bounds.length &&
nextBounds.every((v, i) => v === state.bounds[i])
) {
return null;
}
return {
...state,
bounds: nextBounds,
};
}
return null;

return {
...state,
bounds: nextBounds,
};
}

componentDidUpdate(prevProps, prevState) {
Expand Down

1 comment on commit 179633c

@vercel
Copy link

@vercel vercel bot commented on 179633c Oct 6, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.