Add tooltip property

dnbexperience · Sep 5, 2022 · c2f4906 · c2f4906
1 parent af468de
commit c2f4906
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 143 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx
@@ -5,6 +5,7 @@
 
 import React from 'react'
 import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import { format } from '@dnb/eufemia/src/components/number-format/NumberUtils'
 
 export const SliderExampleDefault = () => (
   <ComponentBox data-visual-test="slider-default">
@@ -16,6 +17,7 @@ export const SliderExampleDefault = () => (
   value={70}
   label="Default Slider:"
   numberFormat={{ currency: 'EUR' }}
+  tooltip={true}
   onChange={({ value }) => console.log('onChange:', value)}
 />
   `
@@ -24,7 +26,7 @@ export const SliderExampleDefault = () => (
 )
 
 export const SliderExampleMultiButtons = () => (
-  <ComponentBox data-visual-test="slider-multi">
+  <ComponentBox data-visual-test="slider-multi" scope={{ format }}>
     {
       /* jsx */ `
 <FormRow vertical>
@@ -34,16 +36,18 @@ export const SliderExampleMultiButtons = () => (
     value={[30, 70]}
     step={5}
     label="Range with steps:"
-    numberFormat={{ currency: 'EUR' }}
+    numberFormat={{ currency: 'USD' }}
+    tooltip
     onChange={({ value }) => console.log('onChange:', value)}
     bottom
-  />
-  <Slider
+    />
+    <Slider
     min={0}
     max={100}
     value={[10, 30, 50, 70]}
     label="Multi thumbs:"
-    numberFormat={{ currency: true }}
+    numberFormat={(value) => format(value, { percent: true })}
+    tooltip
     onChange={({ value, number }) => console.log('onChange:', value, number)}
   />
 </FormRow>
@@ -62,6 +66,7 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
     value={[30, 70]}
     label="Omit behavior:"
     numberFormat={{ currency: 'EUR' }}
+    tooltip={true}
     onChange={({ value }) => console.log('onChange:', value)}
     bottom
     />
@@ -71,6 +76,7 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
     step={1}
     label="Push behavior:"
     numberFormat={{ currency: true }}
+    tooltip={true}
     onChange={({ value, number }) => console.log('onChange:', value, number)}
   />
 </FormRow>
@@ -80,29 +86,32 @@ export const SliderExampleMultiButtonsThumbBehavior = () => (
 )
 
 export const SliderExampleHorizontalSync = () => (
-  <ComponentBox useRender>
+  <ComponentBox useRender scope={{ format }}>
     {
       /* jsx */ `
 const Component = () => {
   const [value, setValue] = React.useState(70)
   return (<>
     <Slider
       value={value}
-      step={10}
+      step={1}
       hideButtons
       label="Slider A:"
       numberFormat={{ currency: 'EUR' }}
+      tooltip={true}
       onChange={({ value }) => setValue(value)}
     />
     <VerticalWrapper>
       <Slider
         value={value}
         vertical={true}
         hideButtons={true}
-        step={1}
+        step={10}
         label="Slider B:"
         labelDirection="vertical"
-        numberFormat={{ currency: 'NOK' }}
+        numberFormat={(value) => format(value, { currency: 'NOK' })}
+        tooltip
+        alwaysShowTooltip
         onChange={({ value }) => setValue(value)}
       />
       <Input
@@ -148,29 +157,6 @@ export const SliderExampleSuffix = () => (
   </ComponentBox>
 )
 
-export const SliderExampleRange = () => (
-  <ComponentBox>
-    {
-      /* jsx */ `
-<FormRow>
-  <FormLabel for_id="range-slider">
-    Native Range Slider
-  </FormLabel>
-  <input
-    id="range-slider"
-    type="range"
-    min={0}
-    max={100}
-    step={5}
-    defaultValue={20}
-    onChange={(event) => console.log(event.currentTarget.value)}
-  />
-</FormRow>
-  `
-    }
-  </ComponentBox>
-)
-
 export const SliderVerticalWithSteps = () => (
   <ComponentBox data-visual-test="slider-vertical" useRender>
     {

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/info.md
@@ -9,7 +9,3 @@ The Slider component provides a visual indication of adjustable value. A value c
 ### Define a `min` and `max` value
 
 Keep in mind, you should most probably define your `min` and `max` value, because they are tied closely to your given value property.
-
-### Tooltip
-
-When a `numberFormat` is given, a Tooltip will be shown above the thumb button.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md
@@ -18,7 +18,9 @@ showTabs: true
 | `thumbTitle`                                | _(optional)_ give the slider thumb button a title for accessibility reasons. Defaults to `null`.                                                                                                                                                                                                                                                                                   |
 | `subtractTitle`                             | _(optional)_ give the subtract button a title for accessibility reasons. Defaults to `−`.                                                                                                                                                                                                                                                                                          |
 | `addTitle`                                  | _(optional)_ give the add button a title for accessibility reasons. Defaults to `+`.                                                                                                                                                                                                                                                                                               |
-| `numberFormat`                              | _(optional)_ Will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}` |
+| `numberFormat`                              | _(optional)_ will extend the return object with a `number` property (from `onChange` event). You can use all the options from the [NumberFormat](/uilib/components/number-format/properties) component. It also will use that formatted number in the increase/decrease buttons. If it has to represent a currency, then use e.g. `numberFormat={{ currency: true, decimals: 0 }}` |
+| `tooltip`                                   | _(optional)_ use `true` to show a tooltip on `mouseOver`, `touchStart` and `focus`, showing the current number (if `numberFormat` is given) or the raw value.                                                                                                                                                                                                                      |
+| `alwaysShowTooltip`                         | _(optional)_ use `true` to always show the tooltip, in addition to the `tooltip` property.                                                                                                                                                                                                                                                                                         |
 | `label`                                     | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created.                                                                                                                                                                                                                                                                                      |
 | `labelDirection`                            | _(optional)_ use `labelDirection="vertical"` to change the label layout direction. Defaults to `horizontal`.                                                                                                                                                                                                                                                                       |
 | `labelSrOnly`                               | _(optional)_ use `true` to make the label only readable by screen readers.                                                                                                                                                                                                                                                                                                         |

diff --git a/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx b/packages/dnb-eufemia/src/components/slider/SliderHelpers.tsx
@@ -1,13 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import {
-  format,
-  formatOptionParams,
-  formatValue,
-  formatReturnType,
-  formatReturnValue,
-} from '../number-format/NumberUtils'
+import { format, formatReturnValue } from '../number-format/NumberUtils'
 
-import type { ValueTypes } from './types'
+import type { NumberFormatTypes, ValueTypes } from './types'
 
 export const percentToValue = (
   percent: number,
@@ -124,26 +118,21 @@ export const closestIndex = (goal: number, array: Array<number>) => {
   return array.findIndex((num) => num === res)
 }
 
-export const formatNumber = (
-  value: formatValue,
-  opts: formatOptionParams = null
-): formatReturnType => {
-  if (opts) {
-    return format(value, opts)
-  }
-  return value
-}
-
 export const getFormattedNumber = (
   value: number,
-  numberFormat: formatOptionParams
+  numberFormat: NumberFormatTypes
 ) => {
-  return (
-    numberFormat
-      ? formatNumber(value as number, {
-          ...(numberFormat || {}),
-          returnAria: true,
-        })
-      : { aria: null, number: null }
-  ) as formatReturnValue
+  if (numberFormat) {
+    if (typeof numberFormat === 'function') {
+      const number = numberFormat(value as number) as string
+      return { number, aria: number }
+    }
+
+    return format(value as number, {
+      ...(numberFormat || {}),
+      returnAria: true,
+    }) as formatReturnValue
+  }
+
+  return { aria: null, number: null } as formatReturnValue
 }
diff --git a/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx b/packages/dnb-eufemia/src/components/slider/SliderProvider.tsx
@@ -12,7 +12,7 @@ import {
 import Context from '../../shared/Context'
 import {
   closestIndex,
-  formatNumber,
+  getFormattedNumber,
   getUpdatedValues,
   roundValue,
 } from './SliderHelpers'
@@ -83,6 +83,8 @@ export function SliderProvider(localProps: SliderProps) {
     hideButtons, // eslint-disable-line
     multiThumbBehavior,
     numberFormat,
+    tooltip, // eslint-disable-line
+    alwaysShowTooltip, // eslint-disable-line
     skeleton,
     max, // eslint-disable-line
     min, // eslint-disable-line
@@ -206,14 +208,13 @@ export function SliderProvider(localProps: SliderProps) {
         }
 
         if (numberFormat) {
-          obj.number = formatNumber(numberValue, numberFormat)
+          obj.number = getFormattedNumber(numberValue, numberFormat).number
         }
 
         dispatchCustomElementEvent(allProps, 'onChange', obj)
       }
 
       updateValue(multiValues)
-      setShouldAnimate(false)
     }
   }
 

diff --git a/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx b/packages/dnb-eufemia/src/components/slider/SliderThumb.tsx
@@ -47,6 +47,8 @@ function Thumb({ value, currentIndex }: ThumbProps) {
     disabled,
     suffix,
     numberFormat,
+    tooltip,
+    alwaysShowTooltip,
   } = allProps
 
   const index = thumbIndex.current
@@ -63,12 +65,12 @@ function Thumb({ value, currentIndex }: ThumbProps) {
 
   const { number, aria } = getFormattedNumber(value, numberFormat)
 
-  const [hover, setHover] = React.useState(false)
+  const [showTooltip, setShowTooltip] = React.useState(false)
   const onMouseEnterHandler = () => {
-    setHover(true)
+    setShowTooltip(true)
   }
   const onMouseLeaveHandler = () => {
-    setHover(false)
+    setShowTooltip(false)
   }
 
   const {
@@ -105,16 +107,11 @@ function Thumb({ value, currentIndex }: ThumbProps) {
 
   validateDOMAttributes(allProps, thumbParams) // because we send along rest attributes
 
+  const elemRef = React.useRef()
+
   return (
     <>
-      <span
-        className="dnb-slider__thumb"
-        style={style}
-        onMouseEnter={onMouseEnterHandler}
-        onTouchStart={onMouseEnterHandler}
-        onMouseLeave={onMouseLeaveHandler}
-        onTouchEnd={onMouseLeaveHandler}
-      >
+      <span className="dnb-slider__thumb" style={style} ref={elemRef}>
         <input
           type="range"
           className="dnb-slider__button-helper"
@@ -124,9 +121,13 @@ function Thumb({ value, currentIndex }: ThumbProps) {
           value={value}
           disabled={disabled}
           onChange={onHelperChangeHandler}
-          onFocus={onHelperFocusHandler}
-          onFocusCapture={onMouseEnterHandler}
-          onBlurCapture={onMouseLeaveHandler}
+          onFocus={(event) => {
+            onHelperFocusHandler(event)
+            onMouseEnterHandler()
+          }}
+          onBlur={onMouseLeaveHandler}
+          onMouseDown={onThumbMouseDownHandler}
+          onMouseUp={onThumbMouseUpHandler}
           aria-valuemin={min}
           aria-valuemax={max}
           aria-valuenow={value}
@@ -143,13 +144,21 @@ function Thumb({ value, currentIndex }: ThumbProps) {
           disabled={disabled}
           skeleton={skeleton}
           data-index={currentIndex}
-          onMouseDown={onThumbMouseDownHandler}
-          onMouseUp={onThumbMouseUpHandler}
+          onMouseEnter={onMouseEnterHandler}
+          onMouseLeave={onMouseLeaveHandler}
+          onTouchStart={onMouseEnterHandler}
+          onTouchEnd={onMouseLeaveHandler}
           {...thumbParams}
         />
 
-        {numberFormat && (
-          <Tooltip active={hover} skip_portal>
+        {tooltip && (
+          <Tooltip
+            key={`group-${currentIndex}`}
+            group={allProps.id + currentIndex}
+            target_element={elemRef}
+            show_delay={100}
+            active={showTooltip || alwaysShowTooltip}
+          >
             {number || value}
           </Tooltip>
         )}

diff --git a/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx b/packages/dnb-eufemia/src/components/slider/SliderTrack.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { dispatchCustomElementEvent } from '../../shared/component-helper'
 import { useSliderEvents } from './hooks/useSliderEvents'
 import { useSliderProps } from './hooks/useSliderProps'
-import { clamp, formatNumber } from './SliderHelpers'
+import { clamp, getFormattedNumber } from './SliderHelpers'
 
 export function SliderMainTrack({
   children,
@@ -13,7 +13,7 @@ export function SliderMainTrack({
   const { isMulti, value, allProps, trackRef, animationTimeout } =
     useSliderProps()
   const { id, numberFormat, onInit } = allProps
-  const { onTrackClickHandler, onThumbMouseDownHandler, removeEvents } =
+  const { onTrackMouseUpHandler, onThumbMouseDownHandler, removeEvents } =
     useSliderEvents()
 
   React.useEffect(() => {
@@ -24,7 +24,7 @@ export function SliderMainTrack({
         number: null,
       }
       if (numberFormat) {
-        obj.number = formatNumber(value as number, numberFormat)
+        obj.number = getFormattedNumber(value as number, numberFormat)
       }
       dispatchCustomElementEvent(allProps, 'onInit', obj)
     }
@@ -37,9 +37,9 @@ export function SliderMainTrack({
   }, [])
 
   const trackParams = {
-    onTouchStart: onTrackClickHandler,
+    onTouchStart: onTrackMouseUpHandler,
     onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackClickHandler,
+    onMouseDown: onTrackMouseUpHandler,
     onMouseDownCapture: onThumbMouseDownHandler,
   }