Skip to content

Commit

Permalink
fix(compat): replace the useId hook to support react17 (#2545)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alex-Spike
Alex-Spike committed Apr 23, 2024
1 parent d90a326 commit 831d28d
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 16 deletions.
9 changes: 6 additions & 3 deletions packages/line/src/hooks.js
View file
Expand Up @@ -6,11 +6,12 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
import { useCallback, useMemo, useState, useId } from 'react'
import { useCallback, useMemo, useState } from 'react'
import { area, line } from 'd3-shape'
import { curveFromProp, useTheme, useValueFormatter } from '@nivo/core'
import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
import { computeXYScalesForSeries } from '@nivo/scales'
import uniqueId from 'lodash/uniqueId'
import { LineDefaultProps } from './props'

export const useLineGenerator = ({ curve }) => {
Expand Down Expand Up @@ -93,7 +94,7 @@ export const useSlices = ({ componentId, enableSlices, points, width, height })
else sliceWidth = x - x0 + (nextSlice[0] - x) / 2

return {
id: `slice${componentId}${x}`,
id: `slice:${componentId}:${x}`,
x0,
x,
y0: 0,
Expand Down Expand Up @@ -139,6 +140,8 @@ export const useSlices = ({ componentId, enableSlices, points, width, height })
}, [componentId, enableSlices, height, points, width])
}

export const LINE_UNIQUE_ID_PREFIX = 'line'

export const useLine = ({
data,
xScale: xScaleSpec = LineDefaultProps.xScale,
Expand All @@ -154,7 +157,7 @@ export const useLine = ({
pointBorderColor = LineDefaultProps.pointBorderColor,
enableSlices = LineDefaultProps.enableSlicesTooltip,
}) => {
const componentId = useId()
const [componentId] = useState(uniqueId(LINE_UNIQUE_ID_PREFIX))
const formatX = useValueFormatter(xFormat)
const formatY = useValueFormatter(yFormat)
const getColor = useOrdinalColorScale(colors, 'id')
Expand Down
24 changes: 11 additions & 13 deletions packages/line/tests/Line.test.js
View file
@@ -1,6 +1,7 @@
import { mount } from 'enzyme'
import { Axis } from '@nivo/axes'
import Line from '../src/Line'
import { LINE_UNIQUE_ID_PREFIX } from '../src/hooks'
import SlicesItem from '../src/SlicesItem'
import renderer from 'react-test-renderer'

Expand All @@ -9,12 +10,9 @@ let id = 0
beforeEach(() => {
id = 0
})
const generateId = () => ++id
const generateId = () => `${LINE_UNIQUE_ID_PREFIX}${++id}`

jest.mock('react', () => ({
...jest.requireActual('react'),
useId: () => `:r${generateId()}:`,
}))
jest.mock('lodash/uniqueId', () => generateId)

it('should render a basic line chart', () => {
const data = [
Expand Down Expand Up @@ -185,7 +183,7 @@ describe('mouse events on slices', () => {
it('should call onMouseEnter', () => {
const onMouseEnter = jest.fn()
const wrapper = mount(<Line {...baseProps} onMouseEnter={onMouseEnter} />)
wrapper.find(`[data-ref='slice:r1:0']`).simulate('mouseenter', {
wrapper.find(`[data-ref='slice:${LINE_UNIQUE_ID_PREFIX}1:0']`).simulate('mouseenter', {
clientX: 100,
clientY: 100,
})
Expand All @@ -195,7 +193,7 @@ describe('mouse events on slices', () => {
it('should call onMouseMove', () => {
const onMouseMove = jest.fn()
const wrapper = mount(<Line {...baseProps} onMouseMove={onMouseMove} />)
wrapper.find(`[data-ref='slice:r1:0']`).simulate('mousemove', {
wrapper.find(`[data-ref='slice:${LINE_UNIQUE_ID_PREFIX}1:0']`).simulate('mousemove', {
clientX: 100,
clientY: 100,
})
Expand All @@ -205,14 +203,14 @@ describe('mouse events on slices', () => {
it('should call onMouseLeave', () => {
const onMouseLeave = jest.fn()
const wrapper = mount(<Line {...baseProps} onMouseLeave={onMouseLeave} />)
wrapper.find(`[data-ref='slice:r1:0']`).simulate('mouseleave')
wrapper.find(`[data-ref='slice:${LINE_UNIQUE_ID_PREFIX}1:0']`).simulate('mouseleave')
expect(onMouseLeave).toHaveBeenCalledTimes(1)
})

it('should call onClick', () => {
const onClick = jest.fn()
const wrapper = mount(<Line {...baseProps} onClick={onClick} />)
wrapper.find(`[data-ref='slice:r1:0']`).simulate('click')
wrapper.find(`[data-ref='slice:${LINE_UNIQUE_ID_PREFIX}1:0']`).simulate('click')
expect(onClick).toHaveBeenCalledTimes(1)
})
})
Expand Down Expand Up @@ -294,7 +292,7 @@ describe('touch events with slices', () => {
it('should call onTouchStart', () => {
const onTouchStart = jest.fn()
const wrapper = mount(<Line {...baseProps} onTouchStart={onTouchStart} />)
wrapper.find(`[data-ref='slice:r1:0']`).simulate('touchstart')
wrapper.find(`[data-ref='slice:${LINE_UNIQUE_ID_PREFIX}1:0']`).simulate('touchstart')
expect(onTouchStart).toHaveBeenCalledTimes(1)
})

Expand All @@ -303,11 +301,11 @@ describe('touch events with slices', () => {
// Enzyme doesn't support this, so we mock it
document.elementFromPoint = jest.fn(() => {
const rect = document.createElement('rect')
rect.setAttribute('data-ref', 'slice:r1:1')
rect.setAttribute('data-ref', `slice:${LINE_UNIQUE_ID_PREFIX}1:1`)
return rect
})
const wrapper = mount(<Line {...baseProps} onTouchMove={onTouchMove} />)
wrapper.find(`[data-ref='slice:r1:0']`).simulate('touchmove', {
wrapper.find(`[data-ref='slice:${LINE_UNIQUE_ID_PREFIX}1:0']`).simulate('touchmove', {
touches: [{ clientX: 50, clientY: 50 }],
})
expect(onTouchMove).toHaveBeenCalledTimes(1)
Expand All @@ -316,7 +314,7 @@ describe('touch events with slices', () => {
it('should call onTouchEnd', () => {
const onTouchEnd = jest.fn()
const wrapper = mount(<Line {...baseProps} onTouchEnd={onTouchEnd} />)
wrapper.find(`[data-ref='slice:r1:0']`).simulate('touchend')
wrapper.find(`[data-ref='slice:${LINE_UNIQUE_ID_PREFIX}1:0']`).simulate('touchend')
expect(onTouchEnd).toHaveBeenCalledTimes(1)
})
})

0 comments on commit 831d28d

Please sign in to comment.