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

feat(Slider): add multiThumbBehavior property #1526

Merged
merged 1 commit into from
Aug 25, 2022
Merged

feat(Slider): add multiThumbBehavior property #1526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 26 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/slider/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,32 @@ export const SliderExampleMultiButtons = () => (
</ComponentBox>
)

export const SliderExampleMultiButtonsThumbBehavior = () => (
<ComponentBox>
{
/* jsx */ `
<FormRow vertical>
<Slider
multiThumbBehavior="omit"
value={[30, 70]}
label="Omit behavior:"
onChange={({ value }) => console.log('onChange:', value)}
bottom
/>
<Slider
multiThumbBehavior="push"
value={[10, 50, 70]}
step={1}
label="Push behavior:"
numberFormat={{ decimals: 2, currency: true }}
onChange={({ value, number }) => console.log('onChange:', value, number)}
/>
</FormRow>
`
}
</ComponentBox>
)

export const SliderExampleHorizontalSync = () => (
<ComponentBox useRender>
{
Expand Down
5 changes: 5 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/slider/demos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ SliderExampleHorizontalSync,
SliderExampleSuffix,
SliderExampleRange,
SliderExampleMultiButtons,
SliderExampleMultiButtonsThumbBehavior,
} from 'Docs/uilib/components/slider/Examples'

## Demos
Expand All @@ -24,6 +25,10 @@ Provide the `value` property as an array with numbers. The `onChange` event will

<SliderExampleMultiButtons />

By default, the thumbs can swap positions. You can change that behavior with `multiThumbBehavior`.

<SliderExampleMultiButtonsThumbBehavior />

### Vertical slider with steps of 10

<SliderVerticalWithSteps />
Expand Down
1 change: 1 addition & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/slider/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ showTabs: true
| `reverse` | _(optional)_ show the slider reversed. Defaults to `false`. |
| `stretch` | _(optional)_ if set to `true`, then the slider will be 100% in `width`. |
| `hideButtons` | _(optional)_ removes the helper buttons. Defaults to `false`. |
| `multiThumbBehavior` | _(optional)_ use either `omit`, `push` or `swap`. This property only works for two (range) or more thumb buttons, while `omit` will stop the thumb from swapping, `push` will push its nearest thumb along. Defaults to `swap`. |
| `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 `+`. |
Expand Down
5 changes: 3 additions & 2 deletions packages/dnb-eufemia/src/components/slider/Slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@ import React from 'react'
import { SliderProvider } from './SliderProvider'
import { SliderInstance } from './SliderInstance'

import type { SliderProps, ValueTypes } from './types'
import { ISpacingProps } from '../../shared/interfaces'

export type { SliderProps, ValueTypes }
import type { SliderProps } from './types'

export * from './types'

function Slider(localProps: SliderProps & ISpacingProps) {
return (
Expand Down
57 changes: 45 additions & 12 deletions packages/dnb-eufemia/src/components/slider/SliderProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const defaultProps = {
min: 0,
max: 100,
value: -1,
multiThumbBehavior: 'swap',
}

export const SliderContext = React.createContext<SliderContextTypes>(null)
Expand Down Expand Up @@ -80,6 +81,7 @@ export function SliderProvider(localProps: SliderProps) {
subtractTitle, // eslint-disable-line
addTitle, // eslint-disable-line
hideButtons, // eslint-disable-line
multiThumbBehavior,
numberFormat,
skeleton,
max, // eslint-disable-line
Expand All @@ -99,7 +101,8 @@ export function SliderProvider(localProps: SliderProps) {
...attributes // Find a DOM element to forwards props too when multi buttons are supported
} = allProps

const [value, setValue] = React.useState(_value)
const [value, setValue] = React.useState<ValueTypes>(_value)
const realtimeValue = React.useRef<ValueTypes>(_value)
const [thumbState, setThumbState] =
React.useState<ThumbStateEnums>('initial')
const thumbIndex = React.useRef<number>(-1)
Expand Down Expand Up @@ -134,6 +137,11 @@ export function SliderProvider(localProps: SliderProps) {
return currentIndex
}

const updateValue = (value: ValueTypes) => {
setValue(value)
realtimeValue.current = value
}

const emitChange = (
event: MouseEvent | TouchEvent,
rawValue: number
Expand All @@ -142,34 +150,59 @@ export function SliderProvider(localProps: SliderProps) {
return
}

const currentValue = roundValue(rawValue, step)

if (currentValue > -1 && rawValue !== value) {
let newValue: ValueTypes = currentValue
let numberValue = roundValue(rawValue, step)
let multiValues: ValueTypes = numberValue

if (numberValue > -1) {
if (isMulti) {
const currentIndex = getAndUpdateCurrentIndex(currentValue)
const currentIndex = getAndUpdateCurrentIndex(numberValue)
const lower = realtimeValue.current[currentIndex - 1]
const upper = realtimeValue.current[currentIndex + 1]

newValue = getUpdatedValues(value, currentIndex, currentValue)
if (multiThumbBehavior === 'omit') {
if (numberValue < lower) {
numberValue = lower
}
if (numberValue > upper) {
numberValue = upper
}
}

multiValues = getUpdatedValues(
multiThumbBehavior === 'push'
? (realtimeValue.current as Array<number>)
: value,
currentIndex,
numberValue
)

if (multiThumbBehavior === 'push') {
if (typeof lower !== 'undefined' && numberValue < lower) {
multiValues[currentIndex - 1] = numberValue
}
if (typeof upper !== 'undefined' && numberValue >= upper) {
multiValues[currentIndex + 1] = numberValue
}
}
}

if (typeof onChange === 'function') {
const obj: onChangeEventProps = {
value: newValue,
value: multiValues,
rawValue,
raw_value: rawValue, // deprecated
event,
number: null,
}

if (numberFormat) {
obj.number = formatNumber(currentValue, numberFormat)
obj.number = formatNumber(numberValue, numberFormat)
}

dispatchCustomElementEvent(allProps, 'onChange', obj)
}

setValue(newValue)
updateValue(multiValues)
}
}

Expand All @@ -180,10 +213,10 @@ export function SliderProvider(localProps: SliderProps) {
})

if (hasChanged) {
setValue(_value)
updateValue(_value)
}
} else {
setValue(_value)
updateValue(_value)
}

// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down
157 changes: 153 additions & 4 deletions packages/dnb-eufemia/src/components/slider/__tests__/Slider.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { axeComponent, loadScss } from '../../../core/jest/jestSetup'
import { fireEvent, render } from '@testing-library/react'
import Slider from '../Slider'

import type { SliderProps } from '../Slider'
import type { SliderProps, onChangeEventProps } from '../Slider'

const props: SliderProps = {
id: 'slider',
Expand Down Expand Up @@ -62,6 +62,26 @@ describe('Slider component', () => {
)
})

it('should include className', () => {
render(<Slider {...props} className="custom-class" />)

const element = document.querySelector('.dnb-slider')

expect(Array.from(element.classList)).toEqual(
expect.arrayContaining(['custom-class'])
)
})

it('should apply custom attributes to thumb button', () => {
render(<Slider {...props} data-extra="property-value" />)

const element = document.querySelector(
'.dnb-slider__thumb .dnb-button'
)

expect(element.getAttribute('data-extra')).toBe('property-value')
})

it('should support stretch', () => {
render(<Slider {...props} stretch />)

Expand Down Expand Up @@ -196,6 +216,17 @@ describe('Slider component', () => {
})

describe('multi thumb', () => {
const SliderWithStateUpdate = (props: SliderProps) => {
const [value, setValue] = React.useState(props.value)
const onChangehandler = (event: onChangeEventProps) => {
setValue(event.value)
if (props.onChange) {
props.onChange(event)
}
}
return <Slider {...props} value={value} onChange={onChangehandler} />
}

const resetMouseSimulation = () => {
fireEvent.mouseUp(document.querySelector('.dnb-slider__track'))
}
Expand All @@ -205,7 +236,7 @@ describe('Slider component', () => {

props.value = [20, 30, 90]
render(
<Slider
<SliderWithStateUpdate
{...props}
numberFormat={{ currency: true, decimals: 1 }}
onChange={onChange}
Expand Down Expand Up @@ -266,7 +297,7 @@ describe('Slider component', () => {
const onChange = jest.fn()

props.value = [10, 30, 40]
render(<Slider {...props} onChange={onChange} />)
render(<SliderWithStateUpdate {...props} onChange={onChange} />)

const secondThumb = document.querySelectorAll(
'.dnb-slider__button-helper'
Expand All @@ -290,10 +321,128 @@ describe('Slider component', () => {
resetMouseSimulation()
})

it('will not swap thumb positions when multiThumbBehavior="omit"', () => {
const onChange = jest.fn()

props.value = [10, 30, 60]

render(
<SliderWithStateUpdate
{...props}
step={1}
multiThumbBehavior="omit"
onChange={onChange}
/>
)

const getThumbElements = (index: number) =>
document.querySelectorAll('.dnb-slider__thumb')[
index
] as HTMLElement

const secondThumb = document.querySelectorAll(
'.dnb-slider__button-helper'
)[1]
const thirdThumb = document.querySelectorAll(
'.dnb-slider__button-helper'
)[2]

fireEvent.focus(secondThumb)
simulateMouseMove({ pageX: 50, width: 100, height: 10 })

expect(onChange.mock.calls[0][0].value).toEqual([10, 50, 60])
expect(getThumbElements(0).getAttribute('style')).toBe(
'z-index: 3; left: 10%;'
)
expect(getThumbElements(1).getAttribute('style')).toBe(
'z-index: 4; left: 50%;'
)
expect(getThumbElements(2).getAttribute('style')).toBe(
'z-index: 3; left: 60%;'
)

resetMouseSimulation()

fireEvent.focus(thirdThumb)
simulateMouseMove({ pageX: 20, width: 100, height: 10 })

expect(onChange.mock.calls[1][0].value).toEqual([10, 50, 50])
expect(getThumbElements(0).getAttribute('style')).toBe(
'z-index: 3; left: 10%;'
)
expect(getThumbElements(1).getAttribute('style')).toBe(
'z-index: 3; left: 50%;'
)
expect(getThumbElements(2).getAttribute('style')).toBe(
'z-index: 4; left: 50%;'
tujoworker marked this conversation as resolved.
Show resolved Hide resolved
)

resetMouseSimulation()
})

it('will push thumb positions when multiThumbBehavior="push"', () => {
const onChange = jest.fn()

props.value = [10, 30, 60]

render(
<SliderWithStateUpdate
{...props}
step={1}
onChange={onChange}
multiThumbBehavior="push"
/>
)

const getThumbElements = (index: number) =>
document.querySelectorAll('.dnb-slider__thumb')[
index
] as HTMLElement

const secondThumb = document.querySelectorAll(
'.dnb-slider__button-helper'
)[1]
const thirdThumb = document.querySelectorAll(
'.dnb-slider__button-helper'
)[2]

fireEvent.focus(secondThumb)
simulateMouseMove({ pageX: 50, width: 100, height: 10 })

expect(onChange.mock.calls[0][0].value).toEqual([10, 50, 60])
expect(getThumbElements(0).getAttribute('style')).toBe(
'z-index: 3; left: 10%;'
)
expect(getThumbElements(1).getAttribute('style')).toBe(
'z-index: 4; left: 50%;'
)
expect(getThumbElements(2).getAttribute('style')).toBe(
'z-index: 3; left: 60%;'
)

resetMouseSimulation()

fireEvent.focus(thirdThumb)
simulateMouseMove({ pageX: 20, width: 100, height: 10 })

expect(onChange.mock.calls[1][0].value).toEqual([10, 20, 20])
expect(getThumbElements(0).getAttribute('style')).toBe(
'z-index: 3; left: 10%;'
)
expect(getThumbElements(1).getAttribute('style')).toBe(
'z-index: 3; left: 20%;'
)
expect(getThumbElements(2).getAttribute('style')).toBe(
'z-index: 4; left: 20%;'
)

resetMouseSimulation()
})

it('sets correct inline styles', () => {
props.value = [20, 30, 90]
render(
<Slider
<SliderWithStateUpdate
{...props}
numberFormat={{ currency: true, decimals: 1 }}
/>
Expand Down
Loading