From 0af3fd933cbe89e65d4dd77024fd991f462e1575 Mon Sep 17 00:00:00 2001 From: Yusuke Shibata Date: Sat, 25 Nov 2017 15:46:52 +0900 Subject: [PATCH] optimize style --- demo/package.json | 1 + demo/yarn.lock | 73 ++++++++++++++++------------------- package.json | 1 + src/component/index.js | 42 +++++++++++++++----- src/component/index.native.js | 49 +++++++++++++++++------ yarn.lock | 46 ++++++++++++++++++---- 6 files changed, 144 insertions(+), 68 deletions(-) diff --git a/demo/package.json b/demo/package.json index 62d74bc..73e61fc 100644 --- a/demo/package.json +++ b/demo/package.json @@ -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", diff --git a/demo/yarn.lock b/demo/yarn.lock index 82d5d34..c3421b5 100644 --- a/demo/yarn.lock +++ b/demo/yarn.lock @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" @@ -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" diff --git a/package.json b/package.json index 2dccf03..4b5557c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/component/index.js b/src/component/index.js index a05a360..b3e20ac 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -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) => [
- { state.refreshing ? 'refreshing...' : state.refreshed ? 'refreshed' : state.willRefresh ? 'willRefresh' : state.y } + { state.refreshing && 'refreshing :' } + { state.refreshed && 'refreshed :' } + { state.willRefresh && 'willRefresh :' } + { parseInt(state.y, 10) }
, children ] diff --git a/src/component/index.native.js b/src/component/index.native.js index 167443c..c334b80 100644 --- a/src/component/index.native.js +++ b/src/component/index.native.js @@ -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) => [ - { state.refreshing ? 'refreshing...' : state.refreshed ? 'refreshed' : state.willRefresh ? 'willRefresh' : state.y } + + { state.refreshing && 'refreshing :' } + { state.refreshed && 'refreshed :' } + { state.willRefresh && 'willRefresh :' } + { parseInt(state.y, 10) } + , children ] diff --git a/yarn.lock b/yarn.lock index a587b97..8e3afd9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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" @@ -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" @@ -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" @@ -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: @@ -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" @@ -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" @@ -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" @@ -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"