Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

react spring upgrade (#10427)

Browse Source 
Upgrading react-spring
This commit is contained in:
rahulramesha 2022-01-21 11:42:46 +05:30 committed by GitHub
parent 978e820b9f
commit 1b2295d31f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 123 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/package.json
View File

@ -124,7 +124,7 @@
"react-router-dom": "^5.1.2",
"react-scripts": "4.0.1",
"react-select": "^3.0.8",
"react-spring": "^8.0.27",
"react-spring": "^9.4.0",
"react-syntax-highlighter": "^15.4.4",
"react-table": "^7.0.0",
"react-tabs": "^3.0.0",
@ -301,4 +301,4 @@
"pre-commit": "lint-staged"
}
}
}
}

2
app/client/src/comments/AppComments/AppCommentThreadsContainer.tsx
View File

@ -29,7 +29,7 @@ function AppCommentThreadsContainer({ isOpen }: Props) {
}, [isOpen]);
return (
<Container style={{ height: springHeight.height as number }}>
<Container style={{ height: springHeight.height }}>
<AppCommentThreads />
</Container>
);

4
app/client/src/components/ads/DraggableList.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
import { clamp } from "lodash-es";
import swap from "lodash-move";
import { useDrag } from "react-use-gesture";
import { useSprings, animated, interpolate } from "react-spring";
import { useSprings, animated, to } from "react-spring";
import styled from "styled-components";
import { debounce, get } from "lodash";
@ -132,7 +132,7 @@ function DraggableList(props: any) {
style={{
zIndex,
width: "100%",
transform: interpolate(
transform: to(
[y, scale],
(y, s) => `translate3d(0,${y}px,0) scale(${s})`,
),

5
app/client/src/components/ads/ScrollIndicator.tsx
View File

@ -1,8 +1,7 @@
import React, { useEffect, useState, useRef } from "react";
import styled from "styled-components";
import _ from "lodash";
import { animated } from "react-spring";
import { useSpring, interpolate } from "react-spring";
import { animated, useSpring, to } from "react-spring";
export const ScrollThumb = styled(animated.div)<{
mode?: "DARK" | "LIGHT";
@ -125,7 +124,7 @@ function ScrollIndicator({
<ScrollThumb
ref={thumbRef}
style={{
transform: interpolate(
transform: to(
[thumbPosition],
(top: number) => `translate3d(0px, ${top}%, 0)`,
),

14
app/client/src/components/ads/ShowcaseCarousel.tsx
View File

@ -98,7 +98,7 @@ export default function ShowcaseCarousel(props: Props) {
setCurrentIdx(props.activeIndex);
}, [props.activeIndex]);
const transition = useTransition("key", null, {
const transition = useTransition("key", {
from: { transform: "translateY(+2%)" },
enter: { transform: "translateY(0%)" },
leave: { transform: "translateY(0%)" },
@ -132,13 +132,11 @@ export default function ShowcaseCarousel(props: Props) {
return (
<Container onKeyDown={handleKeyDown} tabIndex={0}>
{transition.map(
({ item, props: springProps }: { item: string; props: any }) => (
<animated.div key={item} style={springProps}>
<ContentComponent {...componentProps} />
</animated.div>
),
)}
{transition((styles, item) => (
<animated.div key={item} style={styles}>
<ContentComponent {...componentProps} />
</animated.div>
))}
<Footer>
<Dots
activeIndex={activeIndex}

4
app/client/src/resizable/resize/index.tsx
View File

@ -1,12 +1,12 @@
import React, { ReactNode, useState, useEffect, forwardRef, Ref } from "react";
import styled, { StyledComponent } from "styled-components";
import { useDrag } from "react-use-gesture";
import { Spring } from "react-spring/renderprops";
import { Spring, animated } from "react-spring";
import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
const ResizeWrapper = styled.div<{ prevents: boolean }>`
const ResizeWrapper = styled(animated.div)<{ prevents: boolean }>`
display: block;
& {
* {

4
app/client/src/resizable/resizenreflow/index.tsx
View File

@ -2,7 +2,7 @@ import React, { ReactNode, useState, useEffect, useRef, useMemo } from "react";
import styled, { StyledComponent } from "styled-components";
import { WIDGET_PADDING } from "constants/WidgetConstants";
import { useDrag } from "react-use-gesture";
import { Spring } from "react-spring/renderprops";
import { animated, Spring } from "react-spring";
import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
@ -18,7 +18,7 @@ import { getNearestParentCanvas } from "utils/generators";
import { getOccupiedSpaces } from "selectors/editorSelectors";
import { isDropZoneOccupied } from "utils/WidgetPropsUtils";
const ResizeWrapper = styled.div<{ prevents: boolean }>`
const ResizeWrapper = styled(animated.div)<{ prevents: boolean }>`
display: block;
& {
* {

112
app/client/yarn.lock
View File

@ -2374,6 +2374,92 @@
version "2.9.2"
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz"
"@react-spring/animated@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.1.tgz#6b5e57725408ba8347f098a5111a9fb4de74a81b"
integrity sha512-uAJkcrSlpg8uSe8zy7eJcDdNpI5QvRXrZUKhn5dlGAPk3psgY5qj6pahzB0k5NZZQ27ls8Z5Nt4VKhGaXPJNDQ==
dependencies:
"@react-spring/shared" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@react-spring/core@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.1.tgz#0658611dd961d745ac9cfc9dde5e86f2895e182a"
integrity sha512-sXQmGg4wNeyoVZ/LdEF01xtzQKZtLIyFDX03hoa0oa9VTgLNTVSbVXD9q2xsH8HtWpY4OFPTi/9Noi93gjnYyg==
dependencies:
"@react-spring/animated" "~9.4.0"
"@react-spring/rafz" "~9.4.0"
"@react-spring/shared" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@react-spring/konva@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.4.1.tgz#0621e5a65a438574285f627fd2c34298e422d372"
integrity sha512-rDn72jVTOyVbRcg5SEQmbUIPxKXSx3HlRS8sGHgJ6r2IUgmaVVqWApFLoUSoIYW+WF/TnhSUvpEoYWFfOiQ+5g==
dependencies:
"@react-spring/animated" "~9.4.0"
"@react-spring/core" "~9.4.0"
"@react-spring/shared" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@react-spring/native@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.4.1.tgz#c02fcfb95d35aeefff94559076edbc8f70aaeecc"
integrity sha512-RCRemg8XWIK+m4S3/Upu26Jr0caSSU2As2RTvVMKwInZnW+CkZoJNjQSSoUnq9MfC7DvvS+7MCu8PJRiy2/cvQ==
dependencies:
"@react-spring/animated" "~9.4.0"
"@react-spring/core" "~9.4.0"
"@react-spring/shared" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@react-spring/rafz@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.1.tgz#66ed8eadf5c1784d89b210f443fd2ec9fdb59fb6"
integrity sha512-R/mNOQ4axraWsL/jwzoaqfeX6RwUODg3WOGweL8zYbHHheRqQV+QwnhGmDATepBZ1H3UUulhXvOqkzWzjnpuQQ==
"@react-spring/shared@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.1.tgz#6c688cbe093ada7f6cd8ed2b9d28a807b6665ede"
integrity sha512-7atTQOhEQmw5UEYbb5yk7YEaf11AcRF7UISfAmr9FJ2FJD4VUVCn1R4V78omiFiRvnU6qI3GRhkRnIvYM8aAZw==
dependencies:
"@react-spring/rafz" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@react-spring/three@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.4.1.tgz#c2c659c0eda847522dc0e5039c63a97c355ac805"
integrity sha512-TQiR/yzQfoueiIjak5XHE4mHdJOI9rntfpqEtwF0B2hfpeyw/XNl7nMbbY66UGoKLLVGH2YAjqvMAt3Cx4QKuA==
dependencies:
"@react-spring/animated" "~9.4.0"
"@react-spring/core" "~9.4.0"
"@react-spring/shared" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@react-spring/types@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.1.tgz#93a203e5b922362e6643b95aff0989dd1a33b77b"
integrity sha512-eZmlFRc+XkY/HJi4RswLkIHH0nKQkqKRHPUqnseffcBuZ5FNXKDUmNnLUpqkrCpl746QCFVQtI5QptLklDATfQ==
"@react-spring/web@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.1.tgz#dd8560af6834a9c41cd7061bc98721e9f64a8557"
integrity sha512-ajlGJl0Zqa3idhZw0KL5chP8AIn4wPHpDY7WjtWaWjVZSZRSBAeHmfqNLtAGCjazeO/Q6zmt6wdGs8bX8q42rQ==
dependencies:
"@react-spring/animated" "~9.4.0"
"@react-spring/core" "~9.4.0"
"@react-spring/shared" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@react-spring/zdog@~9.4.0":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.4.1.tgz#6dcb358e1314d46dcd3e58ac8ebba057908103ee"
integrity sha512-fd/BWVukp5MYb5izEgt9BRgLWtpiuAh7vl+mjxozqyIFSMs7Uv+uB2sioHh/FrlC9bB44h72vXXx94wSfqZS0g==
dependencies:
"@react-spring/animated" "~9.4.0"
"@react-spring/core" "~9.4.0"
"@react-spring/shared" "~9.4.0"
"@react-spring/types" "~9.4.0"
"@redux-saga/core@^1.1.3":
version "1.1.3"
resolved "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz"
@ -3237,7 +3323,7 @@
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^16.8.2":
"@types/react@*":
version "16.9.52"
resolved "https://registry.npmjs.org/@types/react/-/react-16.9.52.tgz"
dependencies:
@ -3260,6 +3346,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/react@^16.8.2":
version "16.14.21"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/redux-form@^8.1.9":
version "8.3.0"
resolved "https://registry.npmjs.org/@types/redux-form/-/redux-form-8.3.0.tgz"
@ -14218,12 +14313,17 @@ react-side-effect@^1.1.0:
dependencies:
shallowequal "^1.0.1"
react-spring@^8.0.27:
version "8.0.27"
resolved "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz"
react-spring@^9.4.0:
version "9.4.1"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.4.1.tgz#7d17fdbcc527eb89ce9a642c86ec4e91cfee5909"
integrity sha512-1RO7FUpBFrnM2vhiaMyuzpi0YnAsCPpFdzAZtCCGsRKgNYLg28xE1J5vWk/GNoKhvpQePEuK6j9DLoDg9vDZbw==
dependencies:
"@babel/runtime" "^7.3.1"
prop-types "^15.5.8"
"@react-spring/core" "~9.4.0"
"@react-spring/konva" "~9.4.0"
"@react-spring/native" "~9.4.0"
"@react-spring/three" "~9.4.0"
"@react-spring/web" "~9.4.0"
"@react-spring/zdog" "~9.4.0"
react-syntax-highlighter@^15.4.4:
version "15.4.4"