Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

fix(slider): use and update react slider EE-4522 (#7987)

Browse source
This commit is contained in:
Ali 2022-11-04 14:12:53 +13:00 • committed by GitHub
parent f94147b07b
commit 9f3d5185b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 154 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

23
app/react/components/form-components/Slider/Slider.tsx
View file

@ -9,13 +9,25 @@ export interface Props {
step: number;
value: number;
onChange: (value: number) => void;
// true if you want to always show the tooltip
dataCy: string;
visibleTooltip?: boolean;
}
export function Slider({ min, max, step, value, onChange }: Props) {
export function Slider({
min,
max,
step,
value,
onChange,
dataCy,
visibleTooltip: visible,
}: Props) {
const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
// if the tooltip is always visible, hide the marks when tooltip value gets close to the edges
const marks = {
[min]: translateMinValue(min),
[max]: max.toString(),
[min]: visible && value / max < 0.1 ? '' : translateMinValue(min),
[max]: visible && value / max > 0.9 ? '' : max.toString(),
};
return (
@ -29,6 +41,11 @@ export function Slider({ min, max, step, value, onChange }: Props) {
defaultValue={value}
onAfterChange={onChange}
className={styles.slider}
tipProps={{ visible }}
railStyle={{ height: 8 }}
trackStyle={{ height: 8 }}
dotStyle={{ visibility: 'hidden' }}
data-cy={dataCy}
/>
</div>
);