Skip to content

Commit 87b0c15

Browse files
bluebill1049bluebill1049
committed
upgrade with react simple aniamte
1 parent 37910ca commit 87b0c15

File tree

6 files changed

+47
-45
lines changed

6 files changed

+47
-45
lines changed

‎example/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
"@types/node": "10.12.18",
88
"@types/react": "16.7.18",
99
"@types/react-dom": "16.0.11",
10-
"react": "^16.7.0",
11-
"react-dom": "^16.7.0",
10+
"react": "^16.8.6",
11+
"react-dom": "^16.8.6",
1212
"react-flip-numbers": "^2.1.0",
1313
"react-scripts": "2.1.3",
14-
"react-smooth-range-input": "0.2.9",
14+
"react-smooth-range-input": "0.3.0-beta.1",
1515
"typescript": "3.2.2"
1616
},
1717
"scripts": {

‎example/yarn.lock

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7936,15 +7936,15 @@ react-dev-utils@^7.0.1:
79367936
strip-ansi "4.0.0"
79377937
text-table "0.2.0"
79387938

7939-
react-dom@^16.7.0:
7940-
version "16.7.0"
7941-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
7942-
integrity sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==
7939+
react-dom@^16.8.6:
7940+
version "16.8.6"
7941+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
7942+
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
79437943
dependencies:
79447944
loose-envify "^1.1.0"
79457945
object-assign "^4.1.1"
79467946
prop-types "^15.6.2"
7947-
scheduler "^0.12.0"
7947+
scheduler "^0.13.6"
79487948

79497949
react-error-overlay@^5.1.2:
79507950
version "5.1.2"
@@ -8030,23 +8030,28 @@ react-simple-animate@^2.6.0:
80308030
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-2.6.4.tgz#6a6fd5d52801c0a52873204dfb236c778d781262"
80318031
integrity sha512-Jj6hVRJbb+OrEOv/yviuIoacQCDOI7hMOXOMZ5pF/rlD7iK8U4F98bta1MgN7PrSXBYHq2Yt7+bhGMxj5pr5XA==
80328032

8033-
[email protected]:
8034-
version "0.2.9"
8035-
resolved "https://registry.yarnpkg.com/react-smooth-range-input/-/react-smooth-range-input-0.2.9.tgz#16201a0062fd0b12dd1eafe9f5274864c8215f74"
8036-
integrity sha512-5l5dLSKhWiZnuAhg+k5g05Mos9LTa6Ama59W3EbOyo7v0nX4sajL7NnLsQWBcm68B+FuPVNJnc8nQ6TcUWBQWw==
8033+
react-simple-animate@^3.0.1:
8034+
version "3.0.1"
8035+
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.1.tgz#4f0768069a5b99744069e8815f7a5d5c848bb093"
8036+
integrity sha512-HlXVleShQvDiwvv7C1sEet166XskRT5TLf2IRdlianz5XJPV/kXALTBB6sJFD3JuvPEvL6siP5+uozCXeZwPYg==
8037+
8038+
[email protected]:
8039+
version "0.3.0-beta.1"
8040+
resolved "https://registry.yarnpkg.com/react-smooth-range-input/-/react-smooth-range-input-0.3.0-beta.1.tgz#c29256c4e3aae8a1b48b4dc4348cf8d5de95484f"
8041+
integrity sha512-1w53iS1lH+eBU0WyJ9vVsycS0XMfmseO0/ZNdEJY+2U/0Orc3xSN90zOlFCx14Kg/NN12aRzGH5oJvuRc31I5w==
80378042
dependencies:
80388043
react-flip-numbers "^2.1.3"
8039-
react-simple-animate "^2.6.0"
8044+
react-simple-animate "^3.0.1"
80408045

8041-
react@^16.7.0:
8042-
version "16.7.0"
8043-
resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
8044-
integrity sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==
8046+
react@^16.8.6:
8047+
version "16.8.6"
8048+
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
8049+
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
80458050
dependencies:
80468051
loose-envify "^1.1.0"
80478052
object-assign "^4.1.1"
80488053
prop-types "^15.6.2"
8049-
scheduler "^0.12.0"
8054+
scheduler "^0.13.6"
80508055

80518056
read-pkg-up@^1.0.1:
80528057
version "1.0.1"
@@ -8509,10 +8514,10 @@ saxes@^3.1.4:
85098514
dependencies:
85108515
xmlchars "^1.3.1"
85118516

8512-
scheduler@^0.12.0:
8513-
version "0.12.0"
8514-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0.tgz#8ab17699939c0aedc5a196a657743c496538647b"
8515-
integrity sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==
8517+
scheduler@^0.13.6:
8518+
version "0.13.6"
8519+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
8520+
integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
85168521
dependencies:
85178522
loose-envify "^1.1.0"
85188523
object-assign "^4.1.1"

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-smooth-range-input",
3-
"version": "0.2.9",
3+
"version": "0.3.0-beta.1",
44
"main": "dist/index.js",
55
"module": "dist/index.es.js",
66
"types": "dist/index.d.ts",
@@ -41,10 +41,10 @@
4141
},
4242
"dependencies": {
4343
"react-flip-numbers": "^2.1.3",
44-
"react-simple-animate": "^2.6.0"
44+
"react-simple-animate": "^3.0.1"
4545
},
4646
"peerDependencies": {
47-
"react": "^16.7.0",
48-
"react-dom": "^16.7.0"
47+
"react": "^16.8.0",
48+
"react-dom": "^16.8.0"
4949
}
5050
}

‎src/__snapshots__/controller.test.tsx.snap

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ exports[`Controller should render correct when isThin set to true 1`] = `
3434
"position": "absolute",
3535
"top": "-25px",
3636
"transform": "translateY(0)",
37-
"transition": "all 0.3s cubic-bezier(0.86, 0, 0.07, 1) 0s",
3837
}
3938
}
4039
viewBox="0 0 40 64"
@@ -61,7 +60,6 @@ exports[`Controller should render correct when isThin set to true 1`] = `
6160
"height": "0px",
6261
"position": "absolute",
6362
"transform": "translateY(0)",
64-
"transition": "all 0.1s cubic-bezier(0.86, 0, 0.07, 1) 0s",
6563
"width": "0px",
6664
}
6765
}
@@ -107,7 +105,7 @@ exports[`Controller should render correct when isThin set to true 1`] = `
107105
"height": "100%",
108106
"position": "absolute",
109107
"transformStyle": "preserve-3d",
110-
"transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
108+
"transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
111109
}
112110
}
113111
>
@@ -377,7 +375,7 @@ exports[`Controller should render correct when isThin set to true 1`] = `
377375
"height": "100%",
378376
"position": "absolute",
379377
"transformStyle": "preserve-3d",
380-
"transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
378+
"transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
381379
}
382380
}
383381
>
@@ -668,7 +666,6 @@ exports[`Controller should render correct when shouldAnimateNumber set to false
668666
"position": "absolute",
669667
"top": "-25px",
670668
"transform": "translateY(0)",
671-
"transition": "all 0.3s cubic-bezier(0.86, 0, 0.07, 1) 0s",
672669
}
673670
}
674671
viewBox="0 0 40 64"
@@ -695,7 +692,6 @@ exports[`Controller should render correct when shouldAnimateNumber set to false
695692
"height": "0px",
696693
"position": "absolute",
697694
"transform": "translateY(0)",
698-
"transition": "all 0.1s cubic-bezier(0.86, 0, 0.07, 1) 0s",
699695
"width": "0px",
700696
}
701697
}
@@ -757,7 +753,6 @@ exports[`Controller should render correctly 1`] = `
757753
"position": "absolute",
758754
"top": "-25px",
759755
"transform": "translateY(0)",
760-
"transition": "all 0.3s cubic-bezier(0.86, 0, 0.07, 1) 0s",
761756
}
762757
}
763758
viewBox="0 0 40 64"
@@ -784,7 +779,6 @@ exports[`Controller should render correctly 1`] = `
784779
"height": "0px",
785780
"position": "absolute",
786781
"transform": "translateY(0)",
787-
"transition": "all 0.1s cubic-bezier(0.86, 0, 0.07, 1) 0s",
788782
"width": "0px",
789783
}
790784
}
@@ -830,7 +824,7 @@ exports[`Controller should render correctly 1`] = `
830824
"height": "100%",
831825
"position": "absolute",
832826
"transformStyle": "preserve-3d",
833-
"transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
827+
"transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
834828
}
835829
}
836830
>
@@ -1100,7 +1094,7 @@ exports[`Controller should render correctly 1`] = `
11001094
"height": "100%",
11011095
"position": "absolute",
11021096
"transformStyle": "preserve-3d",
1103-
"transition": "all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s",
1097+
"transition": "all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s",
11041098
}
11051099
}
11061100
>

‎src/controller.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { bubbleWithTail, bubble } from './constants/svgPath';
55

66
const commonAnimationProps = {
77
easeType: 'cubic-bezier(0.86, 0, 0.07, 1)',
8-
startStyle: {
8+
start: {
99
transform: 'translateY(0)',
1010
},
1111
};
@@ -43,7 +43,7 @@ const flipNumberProps = {
4343
color: 'black',
4444
background: 'white',
4545
perspective: 370,
46-
durationSeconds: 0.4,
46+
duration: 0.4,
4747
play: true,
4848
numberStyle: { outline: '1px solid transparent' },
4949
disabled: false,
@@ -124,12 +124,11 @@ export default React.forwardRef(function Controller(
124124
<Animate
125125
play={showBubble}
126126
{...commonAnimationProps}
127-
reverseDurationSeconds={0.3}
128-
durationSeconds={0.2}
129-
startStyle={{
127+
duration={showBubble ? 0.2 : 0.3}
128+
start={{
130129
transform: 'translateY(0)',
131130
}}
132-
endStyle={{
131+
end={{
133132
transform: `translateY(-${isThin ? 32 : 22}px) scale(1.65)`,
134133
}}
135134
easeType="cubic-bezier(0.86, 0, 0.07, 1)"
@@ -162,11 +161,10 @@ export default React.forwardRef(function Controller(
162161
<Animate
163162
play={showBubble}
164163
{...commonAnimationProps}
165-
endStyle={{
164+
end={{
166165
transform: `translateY(-${isThin ? 58 : 48}px) scale(1.3)`,
167166
}}
168-
durationSeconds={0.3}
169-
reverseDurationSeconds={0.1}
167+
duration={showBubble? 0.3 : 0.1}
170168
render={({ style }) =>
171169
customController ? (
172170
customController({

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3323,6 +3323,11 @@ react-simple-animate@^2.6.0:
33233323
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-2.6.4.tgz#6a6fd5d52801c0a52873204dfb236c778d781262"
33243324
integrity sha512-Jj6hVRJbb+OrEOv/yviuIoacQCDOI7hMOXOMZ5pF/rlD7iK8U4F98bta1MgN7PrSXBYHq2Yt7+bhGMxj5pr5XA==
33253325

3326+
react-simple-animate@^3.0.1:
3327+
version "3.0.1"
3328+
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.1.tgz#4f0768069a5b99744069e8815f7a5d5c848bb093"
3329+
integrity sha512-HlXVleShQvDiwvv7C1sEet166XskRT5TLf2IRdlianz5XJPV/kXALTBB6sJFD3JuvPEvL6siP5+uozCXeZwPYg==
3330+
33263331
react-test-renderer@^16.0.0-0:
33273332
version "16.7.0"
33283333
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0.tgz#1ca96c2b450ab47c36ba92cd8c03fcefc52ea01c"

0 commit comments

Comments
 (0)