victory-core 36.9.2 → 37.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/victory-core.js +4371 -5749
- package/dist/victory-core.min.js +1 -1
- package/es/victory-accessible-group/victory-accessible-group.js +9 -15
- package/es/victory-animation/util.js +28 -47
- package/es/victory-animation/victory-animation.js +51 -67
- package/es/victory-clip-container/victory-clip-container.js +153 -229
- package/es/victory-container/victory-container.js +157 -216
- package/es/victory-label/victory-label.js +246 -323
- package/es/victory-portal/portal-context.js +1 -2
- package/es/victory-portal/portal.js +30 -76
- package/es/victory-portal/victory-portal.js +47 -104
- package/es/victory-primitives/arc.js +44 -47
- package/es/victory-primitives/background.js +14 -17
- package/es/victory-primitives/border.js +20 -24
- package/es/victory-primitives/circle.js +13 -27
- package/es/victory-primitives/clip-path.js +3 -7
- package/es/victory-primitives/line-segment.js +20 -24
- package/es/victory-primitives/line.js +13 -27
- package/es/victory-primitives/path.js +13 -27
- package/es/victory-primitives/point.js +36 -40
- package/es/victory-primitives/rect.js +13 -27
- package/es/victory-primitives/text.js +15 -28
- package/es/victory-primitives/tspan.js +13 -26
- package/es/victory-primitives/whisker.js +43 -47
- package/es/victory-theme/grayscale.js +22 -22
- package/es/victory-theme/material.js +46 -46
- package/es/victory-theme/victory-theme.js +3 -3
- package/es/victory-transition/victory-transition.js +126 -206
- package/es/victory-util/add-events.js +263 -374
- package/es/victory-util/axis.js +126 -222
- package/es/victory-util/collection.js +13 -41
- package/es/victory-util/data.js +159 -214
- package/es/victory-util/default-transitions.js +33 -51
- package/es/victory-util/domain.js +122 -171
- package/es/victory-util/events.js +168 -258
- package/es/victory-util/helpers.js +153 -178
- package/es/victory-util/hooks/use-animation-state.js +61 -99
- package/es/victory-util/hooks/use-previous-props.js +2 -2
- package/es/victory-util/immutable.js +6 -8
- package/es/victory-util/label-helpers.js +128 -130
- package/es/victory-util/line-helpers.js +29 -41
- package/es/victory-util/log.js +1 -1
- package/es/victory-util/point-path-helpers.js +89 -49
- package/es/victory-util/scale.js +24 -42
- package/es/victory-util/selection.js +39 -40
- package/es/victory-util/style.js +8 -13
- package/es/victory-util/textsize.js +80 -154
- package/es/victory-util/timer-context.js +2 -2
- package/es/victory-util/timer.js +40 -76
- package/es/victory-util/transitions.js +110 -150
- package/es/victory-util/type-helpers.js +2 -3
- package/es/victory-util/user-props.js +24 -49
- package/es/victory-util/wrapper.js +184 -247
- package/lib/index.js +0 -30
- package/lib/victory-accessible-group/victory-accessible-group.js +9 -19
- package/lib/victory-animation/util.js +28 -63
- package/lib/victory-animation/victory-animation.js +54 -83
- package/lib/victory-clip-container/victory-clip-container.js +156 -243
- package/lib/victory-container/victory-container.js +160 -232
- package/lib/victory-label/victory-label.js +248 -344
- package/lib/victory-portal/portal-context.js +1 -6
- package/lib/victory-portal/portal.js +31 -81
- package/lib/victory-portal/victory-portal.js +50 -116
- package/lib/victory-primitives/arc.js +48 -57
- package/lib/victory-primitives/background.js +16 -28
- package/lib/victory-primitives/border.js +22 -34
- package/lib/victory-primitives/circle.js +16 -36
- package/lib/victory-primitives/clip-path.js +3 -11
- package/lib/victory-primitives/index.js +0 -28
- package/lib/victory-primitives/line-segment.js +22 -34
- package/lib/victory-primitives/line.js +16 -36
- package/lib/victory-primitives/path.js +16 -36
- package/lib/victory-primitives/point.js +38 -52
- package/lib/victory-primitives/rect.js +16 -36
- package/lib/victory-primitives/text.js +15 -33
- package/lib/victory-primitives/tspan.js +13 -31
- package/lib/victory-primitives/whisker.js +45 -57
- package/lib/victory-theme/grayscale.js +23 -24
- package/lib/victory-theme/material.js +47 -48
- package/lib/victory-theme/victory-theme.js +2 -7
- package/lib/victory-transition/victory-transition.js +129 -224
- package/lib/victory-util/add-events.js +263 -380
- package/lib/victory-util/axis.js +128 -241
- package/lib/victory-util/collection.js +13 -50
- package/lib/victory-util/data.js +160 -239
- package/lib/victory-util/default-transitions.js +33 -54
- package/lib/victory-util/domain.js +123 -193
- package/lib/victory-util/events.js +167 -274
- package/lib/victory-util/helpers.js +156 -207
- package/lib/victory-util/hooks/index.js +0 -2
- package/lib/victory-util/hooks/use-animation-state.js +63 -113
- package/lib/victory-util/hooks/use-previous-props.js +2 -7
- package/lib/victory-util/immutable.js +6 -18
- package/lib/victory-util/index.js +2 -51
- package/lib/victory-util/label-helpers.js +130 -141
- package/lib/victory-util/line-helpers.js +31 -49
- package/lib/victory-util/log.js +1 -2
- package/lib/victory-util/point-path-helpers.js +91 -63
- package/lib/victory-util/scale.js +26 -57
- package/lib/victory-util/selection.js +41 -49
- package/lib/victory-util/style.js +8 -16
- package/lib/victory-util/textsize.js +80 -157
- package/lib/victory-util/timer-context.js +2 -8
- package/lib/victory-util/timer.js +40 -76
- package/lib/victory-util/transitions.js +110 -152
- package/lib/victory-util/type-helpers.js +2 -9
- package/lib/victory-util/user-props.js +25 -59
- package/lib/victory-util/wrapper.js +186 -281
- package/package.json +2 -2
|
@@ -1,31 +1,28 @@
|
|
|
1
1
|
import _identity from "lodash/identity";
|
|
2
2
|
import _defaults from "lodash/defaults";
|
|
3
3
|
import React from "react";
|
|
4
|
-
|
|
5
4
|
function getDatumKey(datum, idx) {
|
|
6
5
|
return (datum.key || idx).toString();
|
|
7
6
|
}
|
|
8
|
-
|
|
9
7
|
function getKeyedData(data) {
|
|
10
|
-
return data.reduce(
|
|
11
|
-
|
|
8
|
+
return data.reduce((keyedData, datum, idx) => {
|
|
9
|
+
const key = getDatumKey(datum, idx);
|
|
12
10
|
keyedData[key] = datum;
|
|
13
11
|
return keyedData;
|
|
14
12
|
}, {});
|
|
15
13
|
}
|
|
16
|
-
|
|
17
14
|
function getKeyedDataDifference(a, b) {
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
let hasDifference = false;
|
|
16
|
+
const difference = Object.keys(a).reduce((_difference, key) => {
|
|
20
17
|
if (!(key in b)) {
|
|
21
18
|
hasDifference = true;
|
|
22
19
|
_difference[key] = true;
|
|
23
20
|
}
|
|
24
|
-
|
|
25
21
|
return _difference;
|
|
26
22
|
}, {});
|
|
27
23
|
return hasDifference && difference;
|
|
28
24
|
}
|
|
25
|
+
|
|
29
26
|
/**
|
|
30
27
|
* Calculate which data-points exist in oldData and not nextData -
|
|
31
28
|
* these are the `exiting` data-points. Also calculate which
|
|
@@ -39,24 +36,21 @@ function getKeyedDataDifference(a, b) {
|
|
|
39
36
|
* entering[datum.key] will be true if the data is
|
|
40
37
|
* entering, and similarly for `exiting`.
|
|
41
38
|
*/
|
|
42
|
-
|
|
43
|
-
|
|
44
39
|
function getNodeTransitions(oldData, nextData) {
|
|
45
|
-
|
|
46
|
-
|
|
40
|
+
const oldDataKeyed = oldData && getKeyedData(oldData);
|
|
41
|
+
const nextDataKeyed = nextData && getKeyedData(nextData);
|
|
47
42
|
return {
|
|
48
43
|
entering: oldDataKeyed && getKeyedDataDifference(nextDataKeyed, oldDataKeyed),
|
|
49
44
|
exiting: nextDataKeyed && getKeyedDataDifference(oldDataKeyed, nextDataKeyed)
|
|
50
45
|
};
|
|
51
46
|
}
|
|
52
|
-
|
|
53
47
|
function getChildData(child) {
|
|
54
48
|
if (child.type && child.type.getData) {
|
|
55
49
|
return child.type.getData(child.props);
|
|
56
50
|
}
|
|
57
|
-
|
|
58
51
|
return child.props && child.props.data || false;
|
|
59
52
|
}
|
|
53
|
+
|
|
60
54
|
/**
|
|
61
55
|
* If a parent component has animation enabled, calculate the transitions
|
|
62
56
|
* for any data of any child component that supports data transitions.
|
|
@@ -73,21 +67,17 @@ function getChildData(child) {
|
|
|
73
67
|
* - childrenTransitions
|
|
74
68
|
* - nodesShouldEnter
|
|
75
69
|
*/
|
|
76
|
-
|
|
77
|
-
|
|
78
70
|
export function getInitialTransitionState(oldChildren, nextChildren) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
var getTransition = function (oldChild, newChild) {
|
|
71
|
+
let nodesWillExit = false;
|
|
72
|
+
let nodesWillEnter = false;
|
|
73
|
+
const getTransition = (oldChild, newChild) => {
|
|
83
74
|
if (!newChild || oldChild.type !== newChild.type) {
|
|
84
75
|
return {};
|
|
85
76
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
77
|
+
const {
|
|
78
|
+
entering,
|
|
79
|
+
exiting
|
|
80
|
+
} = getNodeTransitions(getChildData(oldChild), getChildData(newChild)) || {};
|
|
91
81
|
nodesWillExit = nodesWillExit || !!exiting;
|
|
92
82
|
nodesWillEnter = nodesWillEnter || !!entering;
|
|
93
83
|
return {
|
|
@@ -95,23 +85,20 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
|
|
|
95
85
|
exiting: exiting || false
|
|
96
86
|
};
|
|
97
87
|
};
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return old.map(function (child, idx) {
|
|
88
|
+
const getTransitionsFromChildren = (old, next) => {
|
|
89
|
+
return old.map((child, idx) => {
|
|
101
90
|
if (child && child.props && child.props.children && next[idx]) {
|
|
102
91
|
return getTransitionsFromChildren(React.Children.toArray(old[idx].props.children), React.Children.toArray(next[idx].props.children));
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
|
|
92
|
+
}
|
|
93
|
+
// get Transition entering and exiting nodes
|
|
106
94
|
return getTransition(child, next[idx]);
|
|
107
95
|
});
|
|
108
96
|
};
|
|
109
|
-
|
|
110
|
-
var childrenTransitions = getTransitionsFromChildren(React.Children.toArray(oldChildren), React.Children.toArray(nextChildren));
|
|
97
|
+
const childrenTransitions = getTransitionsFromChildren(React.Children.toArray(oldChildren), React.Children.toArray(nextChildren));
|
|
111
98
|
return {
|
|
112
|
-
nodesWillExit
|
|
113
|
-
nodesWillEnter
|
|
114
|
-
childrenTransitions
|
|
99
|
+
nodesWillExit,
|
|
100
|
+
nodesWillEnter,
|
|
101
|
+
childrenTransitions,
|
|
115
102
|
// TODO: This may need to be refactored for the following situation.
|
|
116
103
|
// The component receives new props, and the data provided
|
|
117
104
|
// is a perfect match for the previous data and domain except
|
|
@@ -120,32 +107,27 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
|
|
|
120
107
|
nodesShouldEnter: false
|
|
121
108
|
};
|
|
122
109
|
}
|
|
123
|
-
|
|
124
110
|
function getInitialChildProps(animate, data) {
|
|
125
|
-
|
|
111
|
+
const after = animate.onEnter && animate.onEnter.after ? animate.onEnter.after : _identity;
|
|
126
112
|
return {
|
|
127
|
-
data: data.map(
|
|
128
|
-
return Object.assign({}, datum, after(datum, idx, data));
|
|
129
|
-
})
|
|
113
|
+
data: data.map((datum, idx) => Object.assign({}, datum, after(datum, idx, data)))
|
|
130
114
|
};
|
|
131
|
-
}
|
|
132
|
-
|
|
115
|
+
}
|
|
133
116
|
|
|
117
|
+
// eslint-disable-next-line max-params
|
|
134
118
|
function getChildBeforeLoad(animate, child, data, cb) {
|
|
135
|
-
|
|
119
|
+
const newAnimate = Object.assign({}, animate, {
|
|
136
120
|
onEnd: cb
|
|
137
121
|
});
|
|
138
|
-
|
|
139
122
|
if (newAnimate && newAnimate.onLoad && !newAnimate.onLoad.duration) {
|
|
140
123
|
return {
|
|
141
124
|
animate: newAnimate,
|
|
142
|
-
data
|
|
125
|
+
data
|
|
143
126
|
};
|
|
144
127
|
}
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
var newData = data.map(function (datum, idx) {
|
|
128
|
+
const before = newAnimate.onLoad && newAnimate.onLoad.before ? newAnimate.onLoad.before : _identity;
|
|
129
|
+
// If nodes need to exit, transform them with the provided onLoad.before function.
|
|
130
|
+
const newData = data.map((datum, idx) => {
|
|
149
131
|
return Object.assign({}, datum, before(datum, idx, data));
|
|
150
132
|
});
|
|
151
133
|
return {
|
|
@@ -153,111 +135,104 @@ function getChildBeforeLoad(animate, child, data, cb) {
|
|
|
153
135
|
data: newData,
|
|
154
136
|
clipWidth: 0
|
|
155
137
|
};
|
|
156
|
-
}
|
|
157
|
-
|
|
138
|
+
}
|
|
158
139
|
|
|
140
|
+
// eslint-disable-next-line max-params
|
|
159
141
|
function getChildOnLoad(animate, data, cb) {
|
|
160
|
-
|
|
142
|
+
const newAnimate = Object.assign({}, animate, {
|
|
161
143
|
onEnd: cb
|
|
162
144
|
});
|
|
163
|
-
|
|
164
|
-
|
|
145
|
+
let newData = data;
|
|
165
146
|
if (newAnimate && newAnimate.onLoad && !newAnimate.onLoad.duration) {
|
|
166
147
|
return {
|
|
167
|
-
animate
|
|
168
|
-
data
|
|
148
|
+
animate,
|
|
149
|
+
data
|
|
169
150
|
};
|
|
170
151
|
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
newData = data.map(function (datum, idx) {
|
|
152
|
+
const after = animate.onLoad && animate.onLoad.after ? animate.onLoad.after : _identity;
|
|
153
|
+
// If nodes need to exit, transform them with the provided onLoad.after function.
|
|
154
|
+
newData = data.map((datum, idx) => {
|
|
175
155
|
return Object.assign({}, datum, after(datum, idx, data));
|
|
176
156
|
});
|
|
177
157
|
return {
|
|
178
158
|
animate: newAnimate,
|
|
179
159
|
data: newData
|
|
180
160
|
};
|
|
181
|
-
}
|
|
182
|
-
|
|
161
|
+
}
|
|
183
162
|
|
|
163
|
+
// eslint-disable-next-line max-params, max-len
|
|
184
164
|
function getChildPropsOnExit(animate, child, data, exitingNodes, cb) {
|
|
185
165
|
// Whether or not _this_ child has exiting nodes, we want the exit-
|
|
186
166
|
// transition for all children to have the same duration, delay, etc.
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
167
|
+
const onExit = animate && animate.onExit;
|
|
168
|
+
const newAnimate = Object.assign({}, animate, onExit);
|
|
169
|
+
let newData = data;
|
|
191
170
|
if (exitingNodes) {
|
|
192
171
|
// After the exit transition occurs, trigger the animations for
|
|
193
172
|
// nodes that are neither exiting nor entering.
|
|
194
173
|
animate.onEnd = cb;
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
newData = data.map(
|
|
198
|
-
|
|
174
|
+
const before = animate.onExit && animate.onExit.before ? animate.onExit.before : _identity;
|
|
175
|
+
// If nodes need to exit, transform them with the provided onExit.before function.
|
|
176
|
+
newData = data.map((datum, idx) => {
|
|
177
|
+
const key = (datum.key || idx).toString();
|
|
199
178
|
return exitingNodes[key] ? Object.assign({}, datum, before(datum, idx, data)) : datum;
|
|
200
179
|
});
|
|
201
180
|
}
|
|
202
|
-
|
|
203
181
|
return {
|
|
204
182
|
animate: newAnimate,
|
|
205
183
|
data: newData
|
|
206
184
|
};
|
|
207
|
-
}
|
|
208
|
-
|
|
185
|
+
}
|
|
209
186
|
|
|
187
|
+
// eslint-disable-next-line max-params,max-len
|
|
210
188
|
function getChildPropsBeforeEnter(animate, child, data, enteringNodes, cb) {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
189
|
+
let newAnimate = animate;
|
|
190
|
+
let newData = data;
|
|
214
191
|
if (enteringNodes) {
|
|
215
192
|
// Perform a normal animation here, except - when it finishes - trigger
|
|
216
193
|
// the transition for entering nodes.
|
|
217
194
|
newAnimate = Object.assign({}, animate, {
|
|
218
195
|
onEnd: cb
|
|
219
196
|
});
|
|
220
|
-
|
|
197
|
+
const before = animate.onEnter && animate.onEnter.before ? animate.onEnter.before : _identity;
|
|
198
|
+
// We want the entering nodes to be included in the transition target
|
|
221
199
|
// domain. However, we may not want these nodes to be displayed initially,
|
|
222
200
|
// so perform the `onEnter.before` transformation on each node.
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
var key = (datum.key || idx).toString();
|
|
201
|
+
newData = data.map((datum, idx) => {
|
|
202
|
+
const key = (datum.key || idx).toString();
|
|
226
203
|
return enteringNodes[key] ? Object.assign({}, datum, before(datum, idx, data)) : datum;
|
|
227
204
|
});
|
|
228
205
|
}
|
|
229
|
-
|
|
230
206
|
return {
|
|
231
207
|
animate: newAnimate,
|
|
232
208
|
data: newData
|
|
233
209
|
};
|
|
234
|
-
}
|
|
235
|
-
|
|
210
|
+
}
|
|
236
211
|
|
|
212
|
+
// eslint-disable-next-line max-params, max-len
|
|
237
213
|
function getChildPropsOnEnter(animate, data, enteringNodes, cb) {
|
|
238
214
|
// Whether or not _this_ child has entering nodes, we want the entering-
|
|
239
215
|
// transition for all children to have the same duration, delay, etc.
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
216
|
+
const onEnter = animate && animate.onEnter;
|
|
217
|
+
const newAnimate = Object.assign({}, animate, onEnter);
|
|
218
|
+
let newData = data;
|
|
244
219
|
if (enteringNodes) {
|
|
245
220
|
// Old nodes have been transitioned to their new values, and the
|
|
246
221
|
// domain should encompass the nodes that will now enter. So perform
|
|
247
222
|
// the `onEnter.after` transformation on each node.
|
|
248
223
|
newAnimate.onEnd = cb;
|
|
249
|
-
|
|
250
|
-
newData = data.map(
|
|
251
|
-
|
|
224
|
+
const after = newAnimate.onEnter && newAnimate.onEnter.after ? newAnimate.onEnter.after : _identity;
|
|
225
|
+
newData = data.map((datum, idx) => {
|
|
226
|
+
const key = getDatumKey(datum, idx);
|
|
252
227
|
return enteringNodes[key] ? Object.assign({}, datum, after(datum, idx, data)) : datum;
|
|
253
228
|
});
|
|
254
229
|
}
|
|
255
|
-
|
|
256
230
|
return {
|
|
257
231
|
animate: newAnimate,
|
|
258
232
|
data: newData
|
|
259
233
|
};
|
|
260
234
|
}
|
|
235
|
+
|
|
261
236
|
/**
|
|
262
237
|
* getTransitionPropsFactory - putting the Java in JavaScript. This will return a
|
|
263
238
|
* function that returns prop transformations for a child, given that child's props
|
|
@@ -276,120 +251,106 @@ function getChildPropsOnEnter(animate, data, enteringNodes, cb) {
|
|
|
276
251
|
*
|
|
277
252
|
* @return {Function} Child-prop transformation function.
|
|
278
253
|
*/
|
|
279
|
-
|
|
280
|
-
|
|
281
254
|
export function getTransitionPropsFactory(props, state, setState) {
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
255
|
+
const nodesWillExit = state && state.nodesWillExit;
|
|
256
|
+
const nodesWillEnter = state && state.nodesWillEnter;
|
|
257
|
+
const nodesShouldEnter = state && state.nodesShouldEnter;
|
|
258
|
+
const nodesShouldLoad = state && state.nodesShouldLoad;
|
|
259
|
+
const nodesDoneLoad = state && state.nodesDoneLoad;
|
|
260
|
+
const childrenTransitions = state && state.childrenTransitions || [];
|
|
261
|
+
const transitionDurations = {
|
|
289
262
|
enter: props.animate && props.animate.onEnter && props.animate.onEnter.duration,
|
|
290
263
|
exit: props.animate && props.animate.onExit && props.animate.onExit.duration,
|
|
291
264
|
load: props.animate && props.animate.onLoad && props.animate.onLoad.duration,
|
|
292
265
|
move: props.animate && props.animate.duration
|
|
293
266
|
};
|
|
294
|
-
|
|
295
|
-
var onLoad = function (child, data, animate) {
|
|
267
|
+
const onLoad = (child, data, animate) => {
|
|
296
268
|
if (nodesShouldLoad) {
|
|
297
|
-
return getChildOnLoad(animate, data,
|
|
269
|
+
return getChildOnLoad(animate, data, () => {
|
|
298
270
|
setState({
|
|
299
271
|
nodesShouldLoad: false,
|
|
300
272
|
nodesDoneLoad: true
|
|
301
273
|
});
|
|
302
274
|
});
|
|
303
275
|
}
|
|
304
|
-
|
|
305
|
-
return getChildBeforeLoad(animate, child, data, function () {
|
|
276
|
+
return getChildBeforeLoad(animate, child, data, () => {
|
|
306
277
|
setState({
|
|
307
278
|
nodesDoneLoad: true
|
|
308
279
|
});
|
|
309
280
|
});
|
|
310
|
-
};
|
|
311
|
-
|
|
281
|
+
};
|
|
312
282
|
|
|
313
|
-
|
|
314
|
-
|
|
283
|
+
// eslint-disable-next-line max-params
|
|
284
|
+
const onExit = (nodes, child, data, animate) => {
|
|
285
|
+
return getChildPropsOnExit(animate, child, data, nodes, () => {
|
|
315
286
|
setState({
|
|
316
287
|
nodesWillExit: false
|
|
317
288
|
});
|
|
318
289
|
});
|
|
319
|
-
};
|
|
320
|
-
|
|
290
|
+
};
|
|
321
291
|
|
|
322
|
-
|
|
292
|
+
// eslint-disable-next-line max-params
|
|
293
|
+
const onEnter = (nodes, child, data, animate) => {
|
|
323
294
|
if (nodesShouldEnter) {
|
|
324
|
-
return getChildPropsOnEnter(animate, data, nodes,
|
|
295
|
+
return getChildPropsOnEnter(animate, data, nodes, () => {
|
|
325
296
|
setState({
|
|
326
297
|
nodesWillEnter: false
|
|
327
298
|
});
|
|
328
299
|
});
|
|
329
300
|
}
|
|
330
|
-
|
|
331
|
-
return getChildPropsBeforeEnter(animate, child, data, nodes, function () {
|
|
301
|
+
return getChildPropsBeforeEnter(animate, child, data, nodes, () => {
|
|
332
302
|
setState({
|
|
333
303
|
nodesShouldEnter: true
|
|
334
304
|
});
|
|
335
305
|
});
|
|
336
306
|
};
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
var animate = child.props.animate;
|
|
340
|
-
|
|
307
|
+
const getChildTransitionDuration = function (child, type) {
|
|
308
|
+
const animate = child.props.animate;
|
|
341
309
|
if (!child.type) {
|
|
342
310
|
return {};
|
|
343
311
|
}
|
|
344
|
-
|
|
345
|
-
var defaultTransitions = child.props && child.props.polar ? child.type.defaultPolarTransitions || child.type.defaultTransitions : child.type.defaultTransitions;
|
|
346
|
-
|
|
312
|
+
const defaultTransitions = child.props && child.props.polar ? child.type.defaultPolarTransitions || child.type.defaultTransitions : child.type.defaultTransitions;
|
|
347
313
|
if (defaultTransitions) {
|
|
348
|
-
|
|
314
|
+
const animationDuration = animate[type] && animate[type].duration;
|
|
349
315
|
return animationDuration !== undefined ? animationDuration : defaultTransitions[type] && defaultTransitions[type].duration;
|
|
350
316
|
}
|
|
351
|
-
|
|
352
317
|
return {};
|
|
353
|
-
};
|
|
354
|
-
|
|
318
|
+
};
|
|
355
319
|
|
|
320
|
+
// eslint-disable-next-line max-statements, complexity, max-len
|
|
356
321
|
return function getTransitionProps(child, index) {
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
var defaultTransitions = child.props.polar ? child.type.defaultPolarTransitions || child.type.defaultTransitions : child.type.defaultTransitions;
|
|
322
|
+
const data = getChildData(child) || [];
|
|
323
|
+
const animate = _defaults({}, props.animate, child.props.animate);
|
|
324
|
+
const defaultTransitions = child.props.polar ? child.type.defaultPolarTransitions || child.type.defaultTransitions : child.type.defaultTransitions;
|
|
362
325
|
animate.onExit = _defaults({}, animate.onExit, defaultTransitions && defaultTransitions.onExit);
|
|
363
326
|
animate.onEnter = _defaults({}, animate.onEnter, defaultTransitions && defaultTransitions.onEnter);
|
|
364
327
|
animate.onLoad = _defaults({}, animate.onLoad, defaultTransitions && defaultTransitions.onLoad);
|
|
365
|
-
|
|
366
|
-
|
|
328
|
+
const childTransitions = childrenTransitions[index] || childrenTransitions[0];
|
|
367
329
|
if (!nodesDoneLoad) {
|
|
368
330
|
// should do onLoad animation
|
|
369
|
-
|
|
370
|
-
|
|
331
|
+
const load = transitionDurations.load !== undefined ? transitionDurations.load : getChildTransitionDuration(child, "onLoad");
|
|
332
|
+
const animation = {
|
|
371
333
|
duration: load
|
|
372
334
|
};
|
|
373
335
|
return onLoad(child, data, Object.assign({}, animate, animation));
|
|
374
336
|
} else if (nodesWillExit) {
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
337
|
+
const exitingNodes = childTransitions && childTransitions.exiting;
|
|
338
|
+
const exit = transitionDurations.exit !== undefined ? transitionDurations.exit : getChildTransitionDuration(child, "onExit");
|
|
339
|
+
// if nodesWillExit, but this child has no exiting nodes, set a delay instead of a duration
|
|
340
|
+
const animation = exitingNodes ? {
|
|
379
341
|
duration: exit
|
|
380
342
|
} : {
|
|
381
343
|
delay: exit
|
|
382
344
|
};
|
|
383
|
-
|
|
384
|
-
return onExit(exitingNodes, child, data, Object.assign({}, animate, _animation));
|
|
345
|
+
return onExit(exitingNodes, child, data, Object.assign({}, animate, animation));
|
|
385
346
|
} else if (nodesWillEnter) {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
347
|
+
const enteringNodes = childTransitions && childTransitions.entering;
|
|
348
|
+
const enter = transitionDurations.enter !== undefined ? transitionDurations.enter : getChildTransitionDuration(child, "onEnter");
|
|
349
|
+
const move = transitionDurations.move !== undefined ? transitionDurations.move : child.props.animate && child.props.animate.duration;
|
|
350
|
+
const animation = {
|
|
390
351
|
duration: nodesShouldEnter && enteringNodes ? enter : move
|
|
391
352
|
};
|
|
392
|
-
return onEnter(enteringNodes, child, data, Object.assign({}, animate,
|
|
353
|
+
return onEnter(enteringNodes, child, data, Object.assign({}, animate, animation));
|
|
393
354
|
} else if (!state && animate && animate.onExit) {
|
|
394
355
|
// This is the initial render, and nodes may enter when props change. Because
|
|
395
356
|
// animation interpolation is determined by old- and next- props, data may need
|
|
@@ -402,10 +363,9 @@ export function getTransitionPropsFactory(props, state, setState) {
|
|
|
402
363
|
//
|
|
403
364
|
return getInitialChildProps(animate, data);
|
|
404
365
|
}
|
|
405
|
-
|
|
406
366
|
return {
|
|
407
|
-
animate
|
|
408
|
-
data
|
|
367
|
+
animate,
|
|
368
|
+
data
|
|
409
369
|
};
|
|
410
370
|
};
|
|
411
371
|
}
|
|
@@ -2,7 +2,6 @@ export function hasValueForAxis(value, axis) {
|
|
|
2
2
|
if (typeof value === "object" && value !== null) {
|
|
3
3
|
return axis in value;
|
|
4
4
|
}
|
|
5
|
-
|
|
6
5
|
return false;
|
|
7
6
|
}
|
|
8
7
|
export function isTuple(value) {
|
|
@@ -12,10 +11,10 @@ export function getValueForAxis(value, axis) {
|
|
|
12
11
|
if (hasValueForAxis(value, axis)) {
|
|
13
12
|
return value[axis];
|
|
14
13
|
}
|
|
15
|
-
|
|
16
14
|
return value;
|
|
17
|
-
}
|
|
15
|
+
}
|
|
18
16
|
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
19
18
|
export function isFunction(func) {
|
|
20
19
|
return typeof func === "function";
|
|
21
20
|
}
|
|
@@ -1,34 +1,18 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
-
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
-
|
|
17
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
18
|
-
|
|
19
1
|
import * as React from "react";
|
|
20
2
|
import { evaluateProp } from "./helpers";
|
|
3
|
+
|
|
21
4
|
/*
|
|
22
5
|
USER_PROPS_SAFELIST is to contain any string deemed safe for user props.
|
|
23
6
|
The startsWidth array will contain the start of any accepted user-prop that
|
|
24
7
|
starts with these characters.
|
|
25
8
|
The exactMatch will contain a list of exact prop names that are accepted.
|
|
26
9
|
*/
|
|
27
|
-
|
|
28
|
-
var USER_PROPS_SAFELIST = {
|
|
10
|
+
const USER_PROPS_SAFELIST = {
|
|
29
11
|
startsWith: ["data-", "aria-"],
|
|
30
12
|
exactMatch: []
|
|
31
|
-
};
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
// Normally we'd use Template Literal Types, but we're avoiding it to maximize TS compatibility with TS < 4.1
|
|
32
16
|
|
|
33
17
|
// `data-${string}` | `aria-${string}`;
|
|
34
18
|
|
|
@@ -40,14 +24,15 @@ var USER_PROPS_SAFELIST = {
|
|
|
40
24
|
* @returns {Boolean}: returns true if the key starts with an option or false if
|
|
41
25
|
* otherwise
|
|
42
26
|
*/
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
USER_PROPS_SAFELIST.startsWith.forEach(
|
|
46
|
-
|
|
27
|
+
const doesPropStartWith = key => {
|
|
28
|
+
let startsWith = false;
|
|
29
|
+
USER_PROPS_SAFELIST.startsWith.forEach(starterString => {
|
|
30
|
+
const regex = new RegExp(`\\b(${starterString})(\\w|-)+`, "g");
|
|
47
31
|
if (regex.test(key)) startsWith = true;
|
|
48
32
|
});
|
|
49
33
|
return startsWith;
|
|
50
34
|
};
|
|
35
|
+
|
|
51
36
|
/**
|
|
52
37
|
* isExactMatch: checks to see if the given key matches any of the 'exactMatch'
|
|
53
38
|
* items in the whitelist
|
|
@@ -56,34 +41,29 @@ var doesPropStartWith = function (key) {
|
|
|
56
41
|
* @returns {Boolean}: return true if whitelist contains that key, otherwise
|
|
57
42
|
* returns false.
|
|
58
43
|
*/
|
|
44
|
+
const isExactMatch = key => USER_PROPS_SAFELIST.exactMatch.includes(key);
|
|
59
45
|
|
|
60
|
-
|
|
61
|
-
var isExactMatch = function (key) {
|
|
62
|
-
return USER_PROPS_SAFELIST.exactMatch.includes(key);
|
|
63
|
-
};
|
|
64
46
|
/**
|
|
65
47
|
* testIfSafeProp: tests prop's key against both startsWith and exactMatch values
|
|
66
48
|
* @param {String} key: prop key to be tested against the whitelist
|
|
67
49
|
* @returns {Boolean}: returns true if found in whitelist, otherwise returns false
|
|
68
50
|
*/
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var testIfSafeProp = function (key) {
|
|
51
|
+
const testIfSafeProp = key => {
|
|
72
52
|
if (doesPropStartWith(key) || isExactMatch(key)) return true;
|
|
73
53
|
return false;
|
|
74
54
|
};
|
|
55
|
+
|
|
75
56
|
/**
|
|
76
57
|
* Asserts that value is not null or undefined, throwing an error if it is.
|
|
77
58
|
* @param value The value to assert
|
|
78
59
|
* @param message The error message to throw
|
|
79
60
|
*/
|
|
80
|
-
|
|
81
|
-
|
|
82
61
|
export function assert(value, message) {
|
|
83
62
|
if (value === undefined || value === null) {
|
|
84
63
|
throw new Error(message);
|
|
85
64
|
}
|
|
86
65
|
}
|
|
66
|
+
|
|
87
67
|
/**
|
|
88
68
|
* getSafeUserProps - function that takes in a props object and removes any
|
|
89
69
|
* key-value entries that do not match filter strings in the USER_PROPS_SAFELIST
|
|
@@ -92,23 +72,19 @@ export function assert(value, message) {
|
|
|
92
72
|
* @param {Object} props: props to be filtered against USER_PROPS_SAFELIST
|
|
93
73
|
* @returns {Object}: object containing remaining acceptable props
|
|
94
74
|
*/
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
return Object.fromEntries(Object.entries(propsToFilter).filter(
|
|
100
|
-
|
|
101
|
-
key = _ref2[0];
|
|
102
|
-
|
|
75
|
+
export const getSafeUserProps = props => {
|
|
76
|
+
const propsToFilter = {
|
|
77
|
+
...props
|
|
78
|
+
};
|
|
79
|
+
return Object.fromEntries(Object.entries(propsToFilter).filter(_ref => {
|
|
80
|
+
let [key] = _ref;
|
|
103
81
|
return testIfSafeProp(key);
|
|
104
|
-
}).map(
|
|
105
|
-
|
|
106
|
-
key = _ref4[0],
|
|
107
|
-
value = _ref4[1];
|
|
108
|
-
|
|
82
|
+
}).map(_ref2 => {
|
|
83
|
+
let [key, value] = _ref2;
|
|
109
84
|
return [key, evaluateProp(value, props)];
|
|
110
85
|
}));
|
|
111
86
|
};
|
|
87
|
+
|
|
112
88
|
/**
|
|
113
89
|
* Wraps a component and adds safe user props
|
|
114
90
|
*
|
|
@@ -116,7 +92,6 @@ export var getSafeUserProps = function (props) {
|
|
|
116
92
|
* @param {Object} props: props to be filtered
|
|
117
93
|
* @returns {ReactElement} modified component
|
|
118
94
|
*/
|
|
119
|
-
|
|
120
|
-
export var withSafeUserProps = function (component, props) {
|
|
95
|
+
export const withSafeUserProps = (component, props) => {
|
|
121
96
|
return /*#__PURE__*/React.cloneElement(component, getSafeUserProps(props));
|
|
122
97
|
};
|