Skip to content
This repository has been archived by the owner on Nov 27, 2021. It is now read-only.

Commit

Permalink
styled-component
Browse files Browse the repository at this point in the history
  • Loading branch information
Yusuke Shibata committed Nov 26, 2017
1 parent 20b58b9 commit 909ad0d
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 129 deletions.
2 changes: 1 addition & 1 deletion demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"aphrodite": "^1.2.5",
"autoprefixer": "7.1.1",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
Expand Down Expand Up @@ -41,6 +40,7 @@
"react-dom": "^15.6.1",
"react-error-overlay": "^1.0.9",
"style-loader": "0.18.2",
"styled-components": "^2.2.3",
"sw-precache-webpack-plugin": "0.11.3",
"url-loader": "0.5.9",
"webpack": "2.6.1",
Expand Down
110 changes: 76 additions & 34 deletions demo/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,14 +138,6 @@ anymatch@^1.3.0:
arrify "^1.0.0"
micromatch "^2.1.5"

aphrodite@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/aphrodite/-/aphrodite-1.2.5.tgz#8358c36c80bb03aee9b97165aaa70186225b4983"
dependencies:
asap "^2.0.3"
inline-style-prefixer "^3.0.1"
string-hash "^1.1.3"

append-transform@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
Expand Down Expand Up @@ -238,7 +230,7 @@ arrify@^1.0.0, arrify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"

asap@^2.0.3, asap@~2.0.3:
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"

Expand Down Expand Up @@ -1074,10 +1066,6 @@ boom@2.x.x:
dependencies:
hoek "2.x.x"

bowser@^1.7.3:
version "1.8.1"
resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.8.1.tgz#49785777e7302febadb1a5b71d9a646520ed310d"

boxen@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6"
Expand Down Expand Up @@ -1210,6 +1198,13 @@ buffer@^4.3.0:
ieee754 "^1.1.4"
isarray "^1.0.0"

buffer@^5.0.3:
version "5.0.8"
resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
dependencies:
base64-js "^1.0.2"
ieee754 "^1.1.4"

builtin-modules@^1.0.0, builtin-modules@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
Expand Down Expand Up @@ -1651,16 +1646,14 @@ crypto-browserify@^3.11.0:
public-encrypt "^4.0.0"
randombytes "^2.0.0"

css-color-keywords@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"

css-color-names@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"

css-in-js-utils@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz#5af1dd70f4b06b331f48d22a3d86e0786c0b9435"
dependencies:
hyphenate-style-name "^1.0.2"

css-loader@0.28.4:
version "0.28.4"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
Expand Down Expand Up @@ -1697,6 +1690,14 @@ css-selector-tokenizer@^0.7.0:
fastparse "^1.1.1"
regexpu-core "^1.0.0"

css-to-react-native@^2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
dependencies:
css-color-keywords "^1.0.0"
fbjs "^0.8.5"
postcss-value-parser "^3.3.0"

css-what@2.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
Expand Down Expand Up @@ -2480,6 +2481,18 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"

fbjs@^0.8.16, fbjs@^0.8.5:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
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.9"

fbjs@^0.8.9:
version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
Expand Down Expand Up @@ -2900,6 +2913,10 @@ hoek@2.x.x:
version "2.16.3"
resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"

hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"

home-or-tmp@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
Expand Down Expand Up @@ -3008,10 +3025,6 @@ https-browserify@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"

hyphenate-style-name@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"

iconv-lite@0.4.13:
version "0.4.13"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
Expand Down Expand Up @@ -3075,13 +3088,6 @@ ini@~1.3.0:
version "1.3.4"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"

inline-style-prefixer@^3.0.1:
version "3.0.8"
resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
dependencies:
bowser "^1.7.3"
css-in-js-utils "^2.0.0"

inquirer@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.1.1.tgz#87621c4fba4072f48a8dd71c9f9df6f100b2d534"
Expand Down Expand Up @@ -3227,6 +3233,10 @@ is-fullwidth-code-point@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"

is-function@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"

is-glob@^2.0.0, is-glob@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
Expand Down Expand Up @@ -3288,6 +3298,12 @@ is-plain-obj@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"

is-plain-object@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
dependencies:
isobject "^3.0.1"

is-posix-bracket@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
Expand Down Expand Up @@ -3372,6 +3388,10 @@ isobject@^2.0.0:
dependencies:
isarray "1.0.0"

isobject@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"

isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
Expand Down Expand Up @@ -4929,6 +4949,14 @@ prop-types@^15.5.10:
fbjs "^0.8.9"
loose-envify "^1.3.1"

prop-types@^15.5.4:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.3.1"
object-assign "^4.1.1"

proxy-addr@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
Expand Down Expand Up @@ -5701,10 +5729,6 @@ strict-uri-encode@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"

string-hash@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"

string-length@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
Expand Down Expand Up @@ -5779,6 +5803,24 @@ style-loader@0.18.2:
loader-utils "^1.0.2"
schema-utils "^0.3.0"

styled-components@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.3.tgz#154575c269880c840f903f580287dab155cf684c"
dependencies:
buffer "^5.0.3"
css-to-react-native "^2.0.3"
fbjs "^0.8.9"
hoist-non-react-statics "^1.2.0"
is-function "^1.0.1"
is-plain-object "^2.0.1"
prop-types "^15.5.4"
stylis "3.x"
supports-color "^3.2.3"

stylis@3.x:
version "3.4.5"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"

supports-color@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
"react-native-svg": "^5.1.6"
},
"devDependencies": {
"aphrodite": "^1.2.5",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-loader": "^7.1.2",
Expand All @@ -52,6 +51,7 @@
"webpack-node-externals": "^1.6.0"
},
"dependencies": {
"event-emitter": "^0.3.5"
"event-emitter": "^0.3.5",
"styled-components": "^2.2.3"
}
}
99 changes: 46 additions & 53 deletions src/component/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,73 @@
import React from 'react'
import { StyleSheet, css } from 'aphrodite'
import styled, { keyframes } from 'styled-components'

const rotateKey = {
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(270deg)'
const rotating = keyframes`
0% {
transform: rotate(0deg);
}
}
const dashKey = {
'0%': {
strokeDashoffset: 62
},
'50%': {
strokeDashoffset: 62 / 4,
transform: 'rotate(135deg)'
},
'100%': {
strokeDashoffset: 62,
transform: 'rotate(450deg)'
100% {
transform: rotate(270deg);
}
}

const styles = StyleSheet.create({
comp: {
position: 'absolute',
left: '50%',
borderRadius: 20,
width: 40,
height: 40,
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
},
rotate: {
transformOrigin: 'center',
animationName: rotateKey,
animationDuration: '1400ms',
animationTimingFunction: 'linear',
animationIterationCount: 'infinite'
},
dash: {
strokeDasharray: 62,
transformOrigin: 'center',
animationName: dashKey,
animationDuration: '1400ms',
animationTimingFunction: 'ease-in-out',
animationIterationCount: 'infinite'
`
const dashed = keyframes`
0% {
stroke-dashoffset: 62px;
}
50% {
stroke-dashoffset: ${62 / 4}px;
transform: rotate(135deg);
}
})
100% {
stroke-dashoffset: 62px;
transform: rotate(450deg);
}
`

const Component = styled.div`
position: absolute;
left: 50%;
border-radius: 20px;
width: 40px;
height: 40px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
`

const RotatingSvg = styled.svg`
transform-origin: center;
animation: ${rotating} 1.4s linear infinite;
`

const DashedCircle = styled.circle`
stroke-dasharray: 62px;
transform-origin: center;
animation: ${dashed} 1.4s ease-in-out infinite;
`

export default (props, state, children) => {
const { yMax, y, refreshing, refreshed } = state
const p = Math.atan(y / props.max)
const pMax = Math.atan(yMax / props.max)
const r = Math.PI * 10 * 2
const Svg = refreshing ? RotatingSvg : 'svg'
const Circle = refreshing ? DashedCircle : 'circle'
return [
<div
<Component
key='pull'
className={css(styles.comp)}
style={{
top: Math.max(refreshed ? Math.atan(1) : p, 0) * props.max - 10,
transform: `translate(-50%, -100%) scale(${refreshed ? p : 1},${refreshed ? p : 1})`,
backgroundColor: props.bgColor
}}
>
<svg
<Svg
style={{
transform:`rotate(${yMax}deg)`
}}
className={css(refreshing && styles.rotate)}
width={40}
height={40}
viewBox='0 0 40 40'
>
<circle
className={css(refreshing && styles.dash)}
<Circle
style={{ opacity:pMax }}
stroke={props.color}
strokeWidth={2.5}
Expand All @@ -96,8 +89,8 @@ export default (props, state, children) => {
points='30,24 26,20 34,20'
/>
}
</svg>
</div>,
</Svg>
</Component>,
children
]
}
Expand Down
Loading

0 comments on commit 909ad0d

Please sign in to comment.