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

Jump to bottom

deps: upgrade react-spring to v9 #1218

Closed
wants to merge 5 commits into from
Closed

deps: upgrade react-spring to v9 #1218

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c40b639
feat(@visx/react-spring): upgrade react-spring to v9
hsunpei May 15, 2021
d111e07
fix(@visx/react-spring): remove the unnecessary yarn lock file
hsunpei May 22, 2021
9388a40
feat(@visx/react-spring): refine the typing for keys of animatedTicks
hsunpei May 22, 2021
2752910
feat(@visx/demo): upgrade react-spring's dependency
hsunpei May 22, 2021
9d16b37
feat(@visx/react-spring): temporarily suppress type checks for styles
hsunpei May 22, 2021
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
2 changes: 1 addition & 1 deletion packages/visx-demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
"react-dom": "^16.9.0",
"react-github-button": "^0.1.10",
"react-markdown": "^4.3.1",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"react-tilt": "^0.1.4",
"recompose": "^0.26.0",
"topojson-client": "^3.0.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"react": "^16.8",
"react-dom": "^16.8",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-shape-pie/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"react": "^16.8",
"react-dom": "^16.8",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-streamgraph/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"react": "^16.8",
"react-dom": "^16.8",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-demo/src/sandboxes/visx-xychart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"react": "^16",
"react-dom": "^16",
"react-scripts-ts": "3.1.0",
"react-spring": "^8.0.27",
"react-spring": "^9.0.0-rc.3",
"typescript": "^3"
},
"keywords": [
Expand Down
7,675 changes: 7,675 additions & 0 deletions packages/visx-demo/yarn.lock
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/visx-react-spring/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
},
"peerDependencies": {
"react": "^16.3.0-0",
"react-spring": "^8.0.27"
"react-spring": "^9.0.0-rc.3"
},
"dependencies": {
"@types/classnames": "^2.2.9",
Expand Down
95 changes: 44 additions & 51 deletions packages/visx-react-spring/src/axis/AnimatedTicks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { animated, useTransition, interpolate } from 'react-spring';
import { animated, useTransition, to, SpringValue } from 'react-spring';
import cx from 'classnames';
import Orientation from '@visx/axis/lib/constants/orientation';
import { TicksRendererProps, AxisScale } from '@visx/axis/lib/types';
Expand All @@ -20,63 +20,56 @@ export default function AnimatedTicks<Scale extends AxisScale>({
ticks,
animationTrajectory,
}: TicksRendererProps<Scale> & { animationTrajectory?: AnimationTrajectory }) {
const animatedTicks = useTransition(
ticks,
tick => `${tick.value}`,
useLineTransitionConfig({ scale, animateXOrY: horizontal ? 'x' : 'y', animationTrajectory }),
);
const animatedTicks = useTransition(ticks, {
...useLineTransitionConfig({
scale,
animateXOrY: horizontal ? 'x' : 'y',
animationTrajectory,
}),
keys: (tick: { value: any }) => `${tick.value}`,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wonder if we could do something like this instead of using any

// add this to the import above
import { ComputedTick, ... } from '@visx/axis/lib/types';

// in hook
keys: (tick: ComputedTick<Scale>) => `${tick.value}`,

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great point! I'll change it.

});

return (
// eslint-disable-next-line react/jsx-no-useless-fragment
<>
{animatedTicks.map(
(
{
item,
key,
// @ts-ignore react-spring types only include CSSProperties
props: { fromX, toX, fromY, toY, opacity },
},
index,
) => {
const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};
return item == null || key == null ? null : (
{animatedTicks(({ fromX, toX, fromY, toY, opacity }, item, { key }, index) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: im getting a ts warning -> Property 'fromX' does not exist on type '{}'.ts(2339) for { fromX, toX, fromY, toY, opacity },
might be good to keep the @ts-ignore if no explicit type is defined

// @ts-ignore react-spring types only include CSSProperties

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may be caused by the type inference issue of 9.1.2.
After running yarn, it picks up9.1.2 automatically instead of 9.0.0-rc.3.
But I think it's not nice to stick to 9.0.0-rc.3 instead of using ^9.0.0-rc.3 in peer dependencies, so I think putting @ts-ignore here is indeed a good idea.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like this is still broken in 9.2.0 so maybe @ts-ignore is the way to go 😢

const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};
return item == null || key == null ? null : (
<animated.g
key={key}
className={cx('visx-axis-tick', tickClassName)}
transform={tickTransform}
>
{!hideTicks && (
<animated.line
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
stroke={tickStroke}
strokeLinecap="square"
strokeOpacity={opacity}
/>
)}
{/** animate the group, not the Text */}
<animated.g
key={key}
className={cx('visx-axis-tick', tickClassName)}
transform={tickTransform}
>
{!hideTicks && (
<animated.line
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
stroke={tickStroke}
strokeLinecap="square"
strokeOpacity={opacity}
/>
key={index}
transform={to(
[toX as SpringValue<number>, toY as SpringValue<number>],
(interpolatedX, interpolatedY) =>
`translate(${interpolatedX},${interpolatedY +
(orientation === Orientation.bottom &&
typeof tickLabelProps.fontSize === 'number'
? tickLabelProps.fontSize ?? 10
: 0)})`,
)}
{/** animate the group, not the Text */}
<animated.g
key={index}
transform={interpolate(
[toX, toY],
(interpolatedX, interpolatedY) =>
`translate(${interpolatedX},${interpolatedY +
(orientation === Orientation.bottom &&
typeof tickLabelProps.fontSize === 'number'
? tickLabelProps.fontSize ?? 10
: 0)})`,
)}
opacity={opacity}
>
<Text {...tickLabelProps}>{item?.formattedValue}</Text>
</animated.g>
opacity={opacity}
>
<Text {...tickLabelProps}>{item?.formattedValue}</Text>
</animated.g>
);
},
)}
</animated.g>
);
})}
</>
);
}
38 changes: 18 additions & 20 deletions packages/visx-react-spring/src/grid/AnimatedGridLines.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,34 +22,32 @@ export default function AnimatedGridLines<Scale extends GridScale>({
lineStyle,
...lineProps
}: AnimatedGridLinesProps<Scale>) {
const animatedLines = useTransition(
lines,
lineKey,
useLineTransitionConfig({
const animatedLines = useTransition(lines, {
...useLineTransitionConfig({
scale,
animateXOrY,
animationTrajectory,
}),
);
key: lineKey,
});

return (
// eslint-disable-next-line react/jsx-no-useless-fragment
<>
{animatedLines.map((
// @ts-ignore react-spring types only include CSSProperties
{ key, props: { fromX, toX, fromY, toY, opacity } },
) => (
<animated.line
key={key}
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
strokeOpacity={opacity}
style={lineStyle}
{...lineProps}
/>
))}
{animatedLines(({ fromX, toX, fromY, toY, opacity }, _, { key }) => {
return (
<animated.line
key={key}
x1={fromX}
x2={toX}
y1={fromY}
y2={toY}
strokeOpacity={opacity}
style={lineStyle}
{...lineProps}
/>
);
})}
</>
);
}
1 change: 0 additions & 1 deletion packages/visx-react-spring/src/spring-configs/useLineTransitionConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@ export default function useLineTransitionConfig<Scale extends AxisScale | GridSc
});

return {
unique: true,
from: fromLeave,
leave: fromLeave,
enter: enterUpdate,
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-xychart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
},
"peerDependencies": {
"react": "^16.4.0-0",
"react-spring": "^8.0.27"
"react-spring": "^9.0.0-rc.3"
},
"dependencies": {
"@types/classnames": "^2.2.9",
Expand Down
Loading