fix(Slider): use numbers instead of css reverse when reversing slider (…

…#1532)
dnbexperience · Aug 26, 2022 · e2e83a0 · e2e83a0
1 parent 115b056
commit e2e83a0
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 47 deletions.
diff --git a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
@@ -14,12 +14,14 @@ export const percentToValue = (
   min: number,
   max: number
 ) => {
+  // Deprecated, can be removed in v10
   if (typeof min === 'string') {
     min = parseFloat(min)
   }
   if (typeof max === 'string') {
     max = parseFloat(max)
   }
+
   return ((max - min) * percent) / 100 + min
 }
 
@@ -56,8 +58,7 @@ export const getMousePosition = (event: MouseEvent & TouchEvent) => {
 export const calculatePercent = (
   node: HTMLElement,
   event: MouseEvent | TouchEvent,
-  isVertical: boolean,
-  isReverted: boolean
+  isVertical: boolean
 ) => {
   const { width, height } = node.getBoundingClientRect()
   const { top, left } = getOffset(node)
@@ -66,7 +67,7 @@ export const calculatePercent = (
   const value = isVertical ? y - top : x - left
   const onePercent = (isVertical ? height : width) / 100
 
-  return Math.abs((isReverted ? 100 : 0) - clamp(value / onePercent))
+  return Math.abs(clamp(value / onePercent))
 }
 
 export const clamp = (value: number, min = 0, max = 100) =>

diff --git a/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx b/packages/dnb-eufemia/src/components/slider/SliderInstance.tsx
@@ -53,7 +53,6 @@ export function SliderInstance() {
   const mainParams = {
     className: classnames(
       'dnb-slider',
-      isReverse && 'dnb-slider--reverse',
       isVertical && 'dnb-slider--vertical',
       disabled && 'dnb-slider__state--disabled',
       !showButtons && 'dnb-slider--no-buttons',
@@ -137,7 +136,8 @@ function SliderSuffix() {
 }
 
 function SubtractButton() {
-  const { emitChange, value, attributes, allProps } = useSliderProps()
+  const { emitChange, value, isReverse, attributes, allProps } =
+    useSliderProps()
   const {
     step,
     min,
@@ -149,7 +149,13 @@ function SubtractButton() {
   } = allProps
 
   const onSubtractClickHandler = (event: MouseEvent | TouchEvent) => {
-    emitChange(event, clamp((value as number) - (step || 1), min, max))
+    let newValue = clamp((value as number) - (step || 1), min, max)
+
+    if (isReverse) {
+      newValue = max - newValue
+    }
+
+    emitChange(event, newValue)
   }
 
   const subtractParams = {}
@@ -176,12 +182,19 @@ function SubtractButton() {
 }
 
 function AddButton() {
-  const { emitChange, value, attributes, allProps } = useSliderProps()
+  const { emitChange, value, isReverse, attributes, allProps } =
+    useSliderProps()
   const { step, min, max, disabled, skeleton, addTitle, numberFormat } =
     allProps
 
   const onAddClickHandler = (event: MouseEvent | TouchEvent) => {
-    emitChange(event, clamp((value as number) + (step || 1), min, max))
+    let newValue = clamp((value as number) + (step || 1), min, max)
+
+    if (isReverse) {
+      newValue = max - newValue
+    }
+
+    emitChange(event, newValue)
   }
 
   const addParams = {}

diff --git a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx
@@ -150,6 +150,10 @@ export function SliderProvider(localProps: SliderProps) {
       return
     }
 
+    if (isReverse) {
+      rawValue = max - rawValue
+    }
+
     let numberValue = roundValue(rawValue, step)
     let multiValues: ValueTypes = numberValue
 

diff --git a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
@@ -14,6 +14,7 @@ export function SliderThumb() {
     values,
     thumbIndex,
     isVertical,
+    isReverse,
     showStatus,
     attributes,
     allProps,
@@ -70,7 +71,13 @@ export function SliderThumb() {
     <>
       {values.map((value, i) => {
         const index = thumbIndex.current
-        const percent = clamp(((value - min) * 100) / (max - min))
+        let percent = clamp(
+          ((value - (isReverse ? 0 : min)) * 100) / (max - min)
+        )
+
+        if (isReverse) {
+          percent = 100 - percent
+        }
 
         const style: React.CSSProperties = {
           zIndex: index === i ? 4 : 3,

diff --git a/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx b/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx
@@ -70,6 +70,7 @@ export function SliderTrackBefore() {
   const {
     values: origValues,
     isVertical,
+    isReverse,
     thumbIndex,
     allProps: { min, max },
   } = useSliderProps()
@@ -84,22 +85,22 @@ export function SliderTrackBefore() {
   const index = thumbIndex.current
   const upperValue = values[isBetween ? 0 : index > -1 ? index : 0]
   const upperPercent = isBetween
-    ? clamp(((upperValue - min) * 100) / (max - min))
+    ? clamp(((upperValue - (isReverse ? 0 : min)) * 100) / (max - min))
     : 0
 
   const lowerValue =
     values[isBetween ? values.length - 1 : index > -1 ? index : 0]
   const lowerPercent =
-    100 - clamp(((lowerValue - min) * 100) / (max - min))
+    100 - clamp(((lowerValue - (isReverse ? 0 : min)) * 100) / (max - min))
 
   const units = [
     trackObj[isVertical ? 1 : 0][0],
     trackObj[isVertical ? 1 : 0][1],
   ]
 
   const style: React.CSSProperties = {}
-  style[units[0]] = `${lowerPercent}%`
-  style[units[1]] = `${upperPercent}%`
+  style[units[isReverse ? 1 : 0]] = `${lowerPercent}%`
+  style[units[isReverse ? 0 : 1]] = `${upperPercent}%`
 
   return (
     <span

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -776,10 +776,6 @@ legend.dnb-form-label {
     height: inherit;
     min-width: inherit;
     min-height: inherit; }
-  .dnb-slider--reverse .dnb-slider__track {
-    transform: scaleX(-1); }
-  .dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track {
-    transform: scaleY(-1); }
   .dnb-slider__line {
     position: absolute;
     left: 0;
@@ -827,7 +823,7 @@ legend.dnb-form-label {
     width: var(--slider-button-size);
     line-height: var(--slider-button-size);
     transform: translateY(0.25rem);
-    z-index: 5; }
+    z-index: 2; }
   .dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
     transform: translateX(0.25rem); }
   .dnb-slider__state--jumped .dnb-slider__thumb,

diff --git a/packages/dnb-eufemia/src/components/slider/hooks/useSliderEvents.tsx b/packages/dnb-eufemia/src/components/slider/hooks/useSliderEvents.tsx
@@ -16,7 +16,6 @@ export function useSliderEvents() {
     emitChange,
     trackRef,
     isVertical,
-    isReverse,
     setJumpedState,
     setThumbState,
     setThumbIndex,
@@ -25,12 +24,7 @@ export function useSliderEvents() {
   const { min, max, onDragStart, onDragEnd } = allProps
 
   const onTrackClickHandler = (event: MouseEvent | TouchEvent) => {
-    const percent = calculatePercent(
-      trackRef.current,
-      event,
-      isVertical,
-      isReverse
-    )
+    const percent = calculatePercent(trackRef.current, event, isVertical)
 
     emitChange(event, percentToValue(percent, min, max))
     setJumpedState()
@@ -125,7 +119,7 @@ export function useSliderEvents() {
     }
 
     if (elem) {
-      const percent = calculatePercent(elem, event, isVertical, isReverse)
+      const percent = calculatePercent(elem, event, isVertical)
       emitChange(event, percentToValue(percent, min, max))
     }
   }

diff --git a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx
@@ -7,14 +7,7 @@ import React from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 import styled from '@emotion/styled'
 
-import {
-  Slider,
-  ToggleButton,
-  Input,
-  FormRow,
-  FormLabel,
-  Tooltip,
-} from '../../'
+import { Slider, ToggleButton, Input, FormRow, FormLabel } from '../../'
 
 import '../../slider/style/dnb-range.scss'
 
@@ -45,17 +38,24 @@ const FixedSizeWrapper = styled.div`
 `
 
 export function MultiButtons() {
-  const [value, setValue] = React.useState<Array<number>>([10, 40, 80])
+  const [value, setValue] = React.useState<Array<number>>([100, 400, 800])
+  const [valueSecond, setValueSecond] = React.useState<number>(800)
 
   return (
     <>
       <FixedSizeWrapper>
-        <Tooltip active show>
-          Tooltip
-        </Tooltip>
         <Slider
-          label="Label2:"
+          top="x-large"
+          label="Label with some text"
+          labelDirection="vertical"
+          multiThumbBehavior="push"
+          // multiThumbBehavior="omit"
+          // vertical
+          reverse
           value={value}
+          min={100}
+          max={1000}
+          step={10}
           stretch
           numberFormat={{ decimals: 2, currency: true }}
           onChange={({ value, number }) => {
@@ -67,7 +67,28 @@ export function MultiButtons() {
       </FixedSizeWrapper>
 
       <FixedSizeWrapper>
-        <Slider value={80} step={1} stretch />
+        <Slider
+          top="x-large"
+          label="Label with some text"
+          labelDirection="vertical"
+          value={valueSecond}
+          min={100}
+          max={1000}
+          step={10}
+          stretch
+          // vertical
+          reverse
+          numberFormat={{
+            decimals: 2,
+            currency: 'EUR',
+            currency_display: 'symbol',
+          }}
+          onChange={({ value, number }) => {
+            console.log('onChange:', value, number)
+            setValueSecond(value as number)
+          }}
+        />
+        <code>{valueSecond}</code>
       </FixedSizeWrapper>
     </>
   )

diff --git a/packages/dnb-eufemia/src/components/slider/style/_slider.scss b/packages/dnb-eufemia/src/components/slider/style/_slider.scss
@@ -101,12 +101,6 @@
     min-width: inherit;
     min-height: inherit;
   }
-  &--reverse &__track {
-    transform: scaleX(-1);
-  }
-  &--reverse#{&}--vertical &__track {
-    transform: scaleY(-1);
-  }
 
   &__line {
     position: absolute;
@@ -180,7 +174,7 @@
     line-height: var(--slider-button-size);
     transform: translateY(0.25rem);
 
-    z-index: 5;
+    z-index: 2;
   }
   &--vertical &__button.dnb-button--size-small {
     transform: translateX(0.25rem);