Skip to content

Commit

Permalink
update react simple animate
Browse files Browse the repository at this point in the history
  • Loading branch information
bluebill1049 committed May 15, 2019
1 parent e212961 commit c2197be
Show file tree
Hide file tree
Showing 9 changed files with 105 additions and 159 deletions.
38 changes: 14 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,32 +26,22 @@ import react from 'react';
import FlipNumbers from 'react-flip-numbers';

export default () => {
return (
<FlipNumbers
height={12}
width={12}
color="red"
background="white"
play
perspective={100}
numbers="12345"
/>
);
return <FlipNumbers height={12} width={12} color="red" background="white" play perspective={100} numbers="12345" />;
};
```

## API

| Prop | Type | Required | Description |
| :---------------- | :------ | :------: | :--------------------------------------- |
| `numbers` | string || |
| `play` | boolean || Start the animation ||
| `height` | number || Individual number height |
| `width` | number || Individual number width |
| `color` | string || Number color |
| `background` | string || Background color |
| `perspective` | number | | Css 3D transition perspective |
| `nonNumberStyle` | string | | Css inline style for not number eg , : . |
| `numberStyle` | string | | Css inline style for number
| `durationSeconds` | number | | |
| `delaySeconds` | number | | |
| Prop | Type | Required | Description |
| :--------------- | :------ | :------: | :--------------------------------------- |
| `numbers` | string || |
| `play` | boolean || Start the animation | |
| `height` | number || Individual number height |
| `width` | number || Individual number width |
| `color` | string || Number color |
| `background` | string || Background color |
| `perspective` | number | | Css 3D transition perspective |
| `nonNumberStyle` | string | | Css inline style for not number eg , : . |
| `numberStyle` | string | | Css inline style for number |
| `duration` | number | | |
| `delay` | number | | |
9 changes: 4 additions & 5 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-flip-numbers": "2.1.0-beta.1",
"react-scripts": "1.1.4",
"react-simple-animate": "2.0.0"
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-flip-numbers": "3.0.0-beta.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
Expand Down
137 changes: 48 additions & 89 deletions example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1898,11 +1898,6 @@ copy-descriptor@^0.1.0:
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=

core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=

core-js@^2.4.0, core-js@^2.5.0:
version "2.5.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
Expand Down Expand Up @@ -2482,13 +2477,6 @@ encodeurl@~1.0.2:
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=

encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
dependencies:
iconv-lite "~0.4.13"

enhanced-resolve@^3.4.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
Expand Down Expand Up @@ -3061,19 +3049,6 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"

fbjs@^0.8.16:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"

figures@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
Expand Down Expand Up @@ -3736,7 +3711,7 @@ iconv-lite@0.4.19:
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
integrity sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==

iconv-lite@0.4.23, iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
iconv-lite@0.4.23, iconv-lite@^0.4.17, iconv-lite@^0.4.4:
version "0.4.23"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
integrity sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==
Expand Down Expand Up @@ -4165,7 +4140,7 @@ is-root@1.0.0:
resolved "https://registry.yarnpkg.com/is-root/-/is-root-1.0.0.tgz#07b6c233bc394cd9d02ba15c966bd6660d6342d5"
integrity sha1-B7bCM7w5TNnQK6FclmvWZg1jQtU=

is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
is-stream@^1.0.0, is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
Expand Down Expand Up @@ -4229,14 +4204,6 @@ isobject@^3.0.0, isobject@^3.0.1:
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=

isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"

isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
Expand Down Expand Up @@ -4904,7 +4871,7 @@ longest@^1.0.1:
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=

loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
Expand Down Expand Up @@ -5265,14 +5232,6 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"

node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"

node-forge@0.7.5:
version "0.7.5"
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
Expand Down Expand Up @@ -6217,21 +6176,23 @@ promise@8.0.1:
dependencies:
asap "~2.0.3"

promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
dependencies:
asap "~2.0.3"

prop-types@^15.5.10, prop-types@^15.6.0:
prop-types@^15.5.10:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
dependencies:
loose-envify "^1.3.1"
object-assign "^4.1.1"

prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.8.1"

proxy-addr@~2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
Expand Down Expand Up @@ -6399,27 +6360,32 @@ react-dev-utils@^5.0.1:
strip-ansi "3.0.1"
text-table "0.2.0"

react-dom@^16.4.2:
version "16.4.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"
integrity sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==
react-dom@^16.8.0:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
prop-types "^15.6.2"
scheduler "^0.13.6"

react-error-overlay@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
integrity sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==

react-flip-numbers@2.1.0-beta.1:
version "2.1.0-beta.1"
resolved "https://registry.yarnpkg.com/react-flip-numbers/-/react-flip-numbers-2.1.0-beta.1.tgz#ba1c6eb27e6409a501ca56e547583e3ce4927f05"
integrity sha512-glgTrrMQt9gHLwPJRkHNu+S7cj3XJXGMY+jco4dgbbMdQOYzxvk1yKpPQLBpo6PDKF0PhxlVsJ9PoiobSpOf2g==
react-flip-numbers@3.0.0-beta.1:
version "3.0.0-beta.1"
resolved "https://registry.yarnpkg.com/react-flip-numbers/-/react-flip-numbers-3.0.0-beta.1.tgz#4948ff83ce44acae8eb5ecb55a4d3c0b3974f3d2"
integrity sha512-Gwu4/eeYS5Nbu6CIL+G/Pg+5LDtBRsn5bTO28RxG501T6McCjw7xcx978F0IYBjGzt/6pSDMaAEUOa/NSbvUsw==
dependencies:
react-simple-animate "2.5.0"
react-simple-animate "^3.0.1"

react-is@^16.8.1:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==

react-scripts@1.1.4:
version "1.1.4"
Expand Down Expand Up @@ -6467,25 +6433,20 @@ react-scripts@1.1.4:
optionalDependencies:
fsevents "^1.1.3"

react-simple-animate@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-2.0.0.tgz#5bf6762584807d60636af7628a33a85c51c8e8d2"
integrity sha512-iXA1qjZLVtkW7kv5cHULFi4GvxPRcP9D8fFWHZYU/KxNbNxISxHIlgpLrSdgQAcc4NdIvAWbOJXmWnpIKP4yGw==

react-simple-animate@2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-2.5.0.tgz#f25c83bee1299367714fe5161f40e417120fd74e"
integrity sha512-e2GL46oVO0Y7CwuHEf1ZvLQt3wbJ5B9f5H+UkHXEvDDDkMMcCRz+w0DAWkz7icD0d+++1FfQt5MR9IBnYYMuAQ==
react-simple-animate@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.1.tgz#4f0768069a5b99744069e8815f7a5d5c848bb093"
integrity sha512-HlXVleShQvDiwvv7C1sEet166XskRT5TLf2IRdlianz5XJPV/kXALTBB6sJFD3JuvPEvL6siP5+uozCXeZwPYg==

react@^16.4.2:
version "16.4.2"
resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
integrity sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==
react@^16.8.0:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
prop-types "^15.6.2"
scheduler "^0.13.6"

read-pkg-up@^1.0.1:
version "1.0.1"
Expand Down Expand Up @@ -6899,6 +6860,14 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==

scheduler@^0.13.6:
version "0.13.6"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"

schema-utils@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
Expand Down Expand Up @@ -7007,7 +6976,7 @@ set-value@^2.0.0:
is-plain-object "^2.0.3"
split-string "^3.0.1"

setimmediate@^1.0.4, setimmediate@^1.0.5:
setimmediate@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
Expand Down Expand Up @@ -7658,11 +7627,6 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=

ua-parser-js@^0.7.18:
version "0.7.18"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
integrity sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==

uglify-js@3.4.x, uglify-js@^3.0.13:
version "3.4.7"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.7.tgz#4df6b92e54789aa921a254cb1e33704d6ec12b89"
Expand Down Expand Up @@ -8054,11 +8018,6 @@ whatwg-fetch@2.0.3:
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
integrity sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=

whatwg-fetch@>=0.10.0:
version "2.0.4"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==

whatwg-url@^4.3.0:
version "4.8.0"
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.8.0.tgz#d2981aa9148c1e00a41c5a6131166ab4683bbcc0"
Expand Down
10 changes: 6 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-flip-numbers",
"version": "2.1.4",
"version": "3.0.0-beta.1",
"description": "react flip your numbers",
"main": "lib/index.js",
"keywords": [
Expand Down Expand Up @@ -75,8 +75,10 @@
"rollup-plugin-flow": "^1.1.1"
},
"peerDependencies": {
"react": ">= 15.6.1",
"react-dom": ">= 15.6.1",
"react-simple-animate": ">= 2.0.0"
"react": "^16.8.0",
"react-dom": "^16.8.0"
},
"dependencies": {
"react-simple-animate": "^3.0.1"
}
}
14 changes: 7 additions & 7 deletions src/flipNumber.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ type Props = {
background: string,
width: number,
perspective: number,
durationSeconds: number,
duration: number,
activeNumber: number,
delaySeconds: number,
delay: number,
play: boolean,
numberStyle: { [string]: string | number },
};
Expand Down Expand Up @@ -89,9 +89,9 @@ export default class FlipNumber extends React.Component<Props, State> {
background,
width,
perspective,
durationSeconds,
duration,
play,
delaySeconds,
delay,
length,
position,
numberStyle = {},
Expand Down Expand Up @@ -119,14 +119,14 @@ export default class FlipNumber extends React.Component<Props, State> {
<Animate
tag="span"
play={play}
startStyle={{
start={{
...commonAnimateStyle,
}}
endStyle={{
end={{
...commonAnimateStyle,
transform: `rotateX(${degree}deg)`,
}}
{...{ easeType, durationSeconds, delaySeconds }}
{...{ easeType, duration, delay }}
>
{numbers.map((n, i) => (
<span
Expand Down
Loading

0 comments on commit c2197be

Please sign in to comment.