| 1 | import { shallowEqual } from 'react-redux';
|
|---|
| 2 | var propsToShallowCompare = new Set(['axisLine', 'tickLine', 'activeBar', 'activeDot', 'activeLabel', 'activeShape', 'allowEscapeViewBox', 'background', 'cursor', 'dot', 'label', 'line', 'margin', 'padding', 'position', 'shape', 'style', 'tick', 'wrapperStyle',
|
|---|
| 3 | // radius can be an array of 4 numbers, easy to compare shallowly
|
|---|
| 4 | 'radius']);
|
|---|
| 5 |
|
|---|
| 6 | /**
|
|---|
| 7 | * When comparing two values, returns true if they are the same value or
|
|---|
| 8 | * are both NaN.
|
|---|
| 9 | *
|
|---|
| 10 | * If we used just a simple triple equals, we would get false negatives for two NaNs
|
|---|
| 11 | * which could cause extra re-renders so let's have this instead.
|
|---|
| 12 | *
|
|---|
| 13 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness#same-value-zero_equality
|
|---|
| 14 | *
|
|---|
| 15 | * @param x first value to compare
|
|---|
| 16 | * @param y second value to compare
|
|---|
| 17 | * return true if the same, false if different
|
|---|
| 18 | */
|
|---|
| 19 | function sameValueZero(x, y) {
|
|---|
| 20 | if (x == null && y == null) {
|
|---|
| 21 | /*
|
|---|
| 22 | * treat null and undefined as equal. Internally in Recharts we make no difference between these two
|
|---|
| 23 | * so there is no need to re-render.
|
|---|
| 24 | */
|
|---|
| 25 | return true;
|
|---|
| 26 | }
|
|---|
| 27 | if (typeof x === 'number' && typeof y === 'number') {
|
|---|
| 28 | // x and y are equal (this is true for -0 and 0) or they are both NaN
|
|---|
| 29 | // eslint-disable-next-line no-self-compare
|
|---|
| 30 | return x === y || x !== x && y !== y;
|
|---|
| 31 | }
|
|---|
| 32 | return x === y;
|
|---|
| 33 | }
|
|---|
| 34 |
|
|---|
| 35 | /**
|
|---|
| 36 | * So usually React would compare only the first level of props using Object.is.
|
|---|
| 37 | * However, in our case many props are objects or arrays, and our own docs recommend to do that!
|
|---|
| 38 | * Therefore, we need a custom comparison function that does a shallow comparison of each prop value.
|
|---|
| 39 | *
|
|---|
| 40 | * Because charts can and do receive large props (typically the data array),
|
|---|
| 41 | * we only limit this to a subset of known props that are likely to be objects/arrays.
|
|---|
| 42 | *
|
|---|
| 43 | * @param prevProps
|
|---|
| 44 | * @param nextProps
|
|---|
| 45 | */
|
|---|
| 46 | export function propsAreEqual(prevProps, nextProps) {
|
|---|
| 47 | var allKeys = new Set([...Object.keys(prevProps), ...Object.keys(nextProps)]);
|
|---|
| 48 | for (var key of allKeys) {
|
|---|
| 49 | /*
|
|---|
| 50 | * If a key is on a special allowlist, go one level deeper
|
|---|
| 51 | * and do a shallow comparison of the values.
|
|---|
| 52 | */
|
|---|
| 53 | if (propsToShallowCompare.has(key)) {
|
|---|
| 54 | if (prevProps[key] == null && nextProps[key] == null) {
|
|---|
| 55 | /*
|
|---|
| 56 | * treat null and undefined as equal. Internally in Recharts we make no difference between these two
|
|---|
| 57 | * so there is no need to re-render.
|
|---|
| 58 | */
|
|---|
| 59 | continue;
|
|---|
| 60 | }
|
|---|
| 61 | if (!shallowEqual(prevProps[key], nextProps[key])) {
|
|---|
| 62 | return false;
|
|---|
| 63 | }
|
|---|
| 64 | /*
|
|---|
| 65 | * Otherwise do a simple same-value comparison (with NaN support).
|
|---|
| 66 | */
|
|---|
| 67 | } else if (!sameValueZero(prevProps[key], nextProps[key])) {
|
|---|
| 68 | return false;
|
|---|
| 69 | }
|
|---|
| 70 | }
|
|---|
| 71 | return true;
|
|---|
| 72 | } |
|---|