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

Commit

Permalink
optimize style
Browse files Browse the repository at this point in the history
  • Loading branch information
Yusuke Shibata committed Nov 25, 2017
1 parent ffc6445 commit 0af3fd9
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 68 deletions.
1 change: 1 addition & 0 deletions demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"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
73 changes: 34 additions & 39 deletions demo/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,14 @@ 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 @@ -230,7 +238,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 @@ -1013,10 +1021,6 @@ base64url@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"

batch-processor@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"

batch@0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
Expand Down Expand Up @@ -1070,6 +1074,10 @@ 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 @@ -1647,6 +1655,12 @@ 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 @@ -2006,12 +2020,6 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.14:
version "1.3.15"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"

element-resize-detector@^1.1.10:
version "1.1.12"
resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.12.tgz#8b3fd6eedda17f9c00b360a0ea2df9927ae80ba2"
dependencies:
batch-processor "^1.0.0"

elliptic@^6.0.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
Expand Down Expand Up @@ -2472,18 +2480,6 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"

fbjs@^0.8.16:
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 @@ -3012,6 +3008,10 @@ 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,6 +3075,13 @@ 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 @@ -4922,14 +4929,6 @@ prop-types@^15.5.10:
fbjs "^0.8.9"
loose-envify "^1.3.1"

prop-types@^15.5.8:
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 @@ -5020,14 +5019,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"

react-container-dimensions@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/react-container-dimensions/-/react-container-dimensions-1.3.2.tgz#e13d3139e42f4110b28551202e4499ed85414bdd"
dependencies:
element-resize-detector "^1.1.10"
invariant "^2.2.2"
prop-types "^15.5.8"

react-dev-utils@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-3.0.2.tgz#1a42263e9b6aa11dcb45d69dfe5eb1b354bd5531"
Expand Down Expand Up @@ -5710,6 +5701,10 @@ 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
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"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 Down
42 changes: 33 additions & 9 deletions src/component/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,45 @@
import React from 'react'
import { clamp } from 'lodash'
import { StyleSheet, css } from 'aphrodite'

const styles = StyleSheet.create({
comp: {
width: '100%',
backgroundColor: 'gray',
overflow: 'hidden',
color: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
refreshing: {
backgroundColor: 'blue'
},
refreshed: {
backgroundColor: 'green'
},
willRefresh: {
backgroundColor: 'red'
}
})

export default (props, state, children) => [
<div
key='pull'
className={css(
styles.comp,
state.refreshing && styles.refreshing,
state.refreshed && styles.refreshed,
state.willRefresh && styles.willRefresh
)}
style={{
width: '100%',
height: clamp(state.y, 0, props.max),
backgroundColor: state.refreshing ? 'blue' : state.refreshed ? 'green' : state.willRefresh ? 'red' : 'gray',
overflow: 'hidden',
color: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
height: clamp(state.y, 0, props.max)
}}
>
{ state.refreshing ? 'refreshing...' : state.refreshed ? 'refreshed' : state.willRefresh ? 'willRefresh' : state.y }
{ state.refreshing && 'refreshing :' }
{ state.refreshed && 'refreshed :' }
{ state.willRefresh && 'willRefresh :' }
{ parseInt(state.y, 10) }
</div>,
children
]
Expand Down
49 changes: 37 additions & 12 deletions src/component/index.native.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,47 @@
import React from 'react'
import { View, Text } from 'react-native'
import { StyleSheet, View, Text } from 'react-native'
import { clamp } from 'lodash'

const styles = StyleSheet.create({
comp: {
width: '100%',
backgroundColor: 'gray',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
refreshing: {
backgroundColor: 'blue'
},
refreshed: {
backgroundColor: 'green'
},
willRefresh: {
backgroundColor: 'red'
},
text: {
color: 'white',
}
})

export default (props, state, children) => [
<View
key='pull'
style={{
width: '100%',
height: clamp(state.y, 0, props.max),
backgroundColor: state.refreshing ? 'blue' : state.refreshed ? 'green' : state.willRefresh ? 'red' : 'gray',
overflow: 'hidden',
color: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
style={Stylesheet.flatten([
styles.comp,
state.refreshing && styles.refreshing,
state.refreshed && styles.refreshed,
state.willRefresh && styles.willRefresh,
{ height: clamp(state.y, 0, props.max) }
])}
>
<Text>{ state.refreshing ? 'refreshing...' : state.refreshed ? 'refreshed' : state.willRefresh ? 'willRefresh' : state.y }</Text>
<Text style={styles.text}>
{ state.refreshing && 'refreshing :' }
{ state.refreshed && 'refreshed :' }
{ state.willRefresh && 'willRefresh :' }
{ parseInt(state.y, 10) }
</Text>
</View>,
children
]
Expand Down
46 changes: 38 additions & 8 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,14 @@ 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"

aproba@^1.0.3:
version "1.1.1"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.1.tgz#95d3600f07710aa0e9298c726ad5ecf2eacbabab"
Expand Down Expand Up @@ -212,6 +220,10 @@ arrify@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"

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

asap@~2.0.3:
version "2.0.5"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
Expand Down Expand Up @@ -965,6 +977,10 @@ 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"

brace-expansion@^1.0.0:
version "1.1.6"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
Expand Down Expand Up @@ -1367,6 +1383,12 @@ 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.7:
version "0.28.7"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
Expand Down Expand Up @@ -1852,7 +1874,7 @@ fastparse@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"

fbjs@^0.8.16, fbjs@^0.8.4:
fbjs@^0.8.16:
version "0.8.16"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
dependencies:
Expand Down Expand Up @@ -2169,6 +2191,10 @@ 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.17:
version "0.4.18"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
Expand Down Expand Up @@ -2226,6 +2252,13 @@ 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.0.6:
version "3.2.3"
resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.3.tgz#1c7b1731cf77b934ec47d22c9ac5aa8fe7fbe095"
Expand Down Expand Up @@ -3360,13 +3393,6 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"

react-addons-shallow-compare@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"

react-dom@^16.1.1:
version "16.1.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
Expand Down Expand Up @@ -3733,6 +3759,10 @@ 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-width@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
Expand Down

0 comments on commit 0af3fd9

Please sign in to comment.