Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiDualRange] Fix initial incorrect thumb position #4230

Merged
merged 6 commits into from
Nov 6, 2020
Merged

[EuiDualRange] Fix initial incorrect thumb position #4230

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f1c4858
trigger rerender after width is no longer 0
thompsongl Nov 5, 2020
8240e6f
revert me
thompsongl Nov 5, 2020
877b1c7
Merge branch 'master' into dualrange-isvisible
thompsongl Nov 6, 2020
a6a2f5b
Revert "revert me"
thompsongl Nov 6, 2020
f78a32e
add comment
thompsongl Nov 6, 2020
1f3fa03
CL
thompsongl Nov 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions src-docs/src/views/range/dual_range.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,34 @@ import { EuiDualRange } from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

export default () => {
const [value, setValue] = useState(['', '']);
const [value, setValue] = useState(['20', '100']);
const [isOpen, setIsOpen] = useState(false);

const onChange = (value) => {
setValue(value);
};

const onToggle = () => {
setIsOpen(!isOpen);
};

return (
<EuiDualRange
id={htmlIdGenerator()()}
min={-100}
max={200}
step={10}
value={value}
onChange={onChange}
showLabels
aria-label="An example of EuiDualRange"
/>
<div>
<button type="button" onClick={onToggle}>
Toggle
</button>
<div className={isOpen ? '' : 'eui-showFor'}>
<EuiDualRange
id={htmlIdGenerator()()}
min={0}
max={200}
step={10}
value={value}
onChange={onChange}
showLabels
aria-label="An example of EuiDualRange"
/>
</div>
</div>
);
};
19 changes: 19 additions & 0 deletions src/components/form/range/dual_range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
rangeSliderRefAvailable: false,
isPopoverOpen: false,
rangeWidth: undefined,
isVisible: true,
thompsongl marked this conversation as resolved.
Show resolved Hide resolved
};

preventPopoverClose = false;
Expand Down Expand Up @@ -155,6 +156,24 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
return this.lowerValueIsValid && this.upperValueIsValid;
}

componentDidMount() {
if (this.rangeSliderRef && this.rangeSliderRef.clientWidth === 0) {
// Safe to call `setState` inside conditional
// https://reactjs.org/docs/react-component.html#componentdidmount
// eslint-disable-next-line react/no-did-mount-set-state
this.setState({ isVisible: false });
}
}

componentDidUpdate() {
if (this.rangeSliderRef?.clientWidth && !this.state.isVisible) {
// Safe to call `setState` inside conditional
// https://reactjs.org/docs/react-component.html#componentdidupdate
// eslint-disable-next-line react/no-did-update-set-state
this.setState({ isVisible: true });
}
}

_determineInvalidThumbMovement = (
newVal: ValueMember,
lower: ValueMember,
Expand Down