From 70f0fdf7faf96523265f60b80b60b044de3b7e2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Th=C3=BCring?= <t.thuering@linguala.com>
Date: Wed, 25 Oct 2017 15:12:00 +0200
Subject: [PATCH] refactor: compose components with react-komposer, adjust
unit-size to 20px, add 'huge' prop in imgStyle
---
package.json | 3 ++-
src/lib/Logo.js | 20 ++++++++------------
src/lib/Pin.js | 14 +++++++++++---
src/lib/utils/imgStyle.js | 15 +++++++++++++++
src/lib/utils/index.js | 8 ++++++++
src/lib/utils/width.js | 9 +++++----
src/stories/logo.js | 5 +++++
src/stories/pin.js | 12 ++++++++++++
tests/width.test.js | 16 ++++++++--------
9 files changed, 74 insertions(+), 28 deletions(-)
create mode 100644 src/lib/utils/imgStyle.js
create mode 100644 src/lib/utils/index.js
diff --git a/package.json b/package.json
index 947e95e..e0ad99b 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,12 @@
"dependencies": {
"@linguala/react-dependencies": "^0.0.2",
"material-ui": "^0.18.6",
+ "react-komposer": "^2.0.0",
"react-tap-event-plugin": "^2.0.1",
"storybook-addon-material-ui": "^0.8.0"
},
"scripts": {
- "start":"npm run storybook",
+ "start": "npm run storybook",
"test": "node_modules/ava/cli.js tests/**/*.js",
"storybook": "node_modules/@storybook/react/dist/server/index.js -p 9001 -s public",
"build-storybook": "node_modules/@storybook/react/dist/server/build.js -s public"
diff --git a/src/lib/Logo.js b/src/lib/Logo.js
index 129d27d..df653c0 100644
--- a/src/lib/Logo.js
+++ b/src/lib/Logo.js
@@ -1,23 +1,19 @@
import React from 'react';
import { logo } from './assets'
-import { mapToWidth, unitWidth } from './utils/width'
+import { compose } from 'react-komposer'
+import { imgStyle } from './utils'
-const calcWidth = unitWidth()
-
-const Logo = (props) => {
- const {small, medium, big, style} = props
- const imgStyle = {
- ...style,
- width: mapToWidth(calcWidth, { small, medium, big }),
- }
+const Logo = ({style, width}) => {
return (
<img
- width={imgStyle.width}
- style={{imgStyle}}
+ width={width}
+ style={style}
src={logo}
alt="logo"
/>
)
}
-export default Logo
+// use react-komposer or recompose
+//export default withSize(Logo)
+export default compose(imgStyle)(Logo)
diff --git a/src/lib/Pin.js b/src/lib/Pin.js
index 979290d..fe57b43 100644
--- a/src/lib/Pin.js
+++ b/src/lib/Pin.js
@@ -1,12 +1,14 @@
import React from 'react'
import { logo, pin } from './assets'
+import { compose } from 'react-komposer'
+import { imgStyle } from './utils'
// TODO: make pin orientation configurable by rotating svg
// TODO: implement 'big medium small props logic like Logo (composition?)
// FIXME: theming, take primary color (green) from Theme
// FIXME: relative scaling, orientation on grid
// MAYBE: embed svg directly instead of a linked svg file
-export default ({ children }) => (
+const Pin = ({ children, style, width }) => (
<div>
<div
style={{
@@ -15,8 +17,12 @@ export default ({ children }) => (
left: 0,
width: '100%'
}}
- ><img
- src={pin} />
+ >
+ <img
+ src={pin}
+ width={width}
+ style={style}
+ />
</div>
<div
style={{
@@ -28,3 +34,5 @@ export default ({ children }) => (
>{children}</div>
</div>
)
+
+export default compose( imgStyle )( Pin )
diff --git a/src/lib/utils/imgStyle.js b/src/lib/utils/imgStyle.js
new file mode 100644
index 0000000..3d1fefe
--- /dev/null
+++ b/src/lib/utils/imgStyle.js
@@ -0,0 +1,15 @@
+import { mapToWidth, unitWidth } from './index'
+
+export default function ({small, medium, big, huge, style}, onData) {
+ const calcWidth = unitWidth()
+ const width = mapToWidth(calcWidth, { small, medium, big, huge })
+
+ const data = (style) ? {
+ ...style,
+ width
+ } : {
+ width
+ }
+
+ onData(null, data)
+}
diff --git a/src/lib/utils/index.js b/src/lib/utils/index.js
new file mode 100644
index 0000000..8e07114
--- /dev/null
+++ b/src/lib/utils/index.js
@@ -0,0 +1,8 @@
+import imgStyle from './imgStyle'
+import { unitWidth, mapToWidth } from './width'
+
+export {
+ imgStyle,
+ unitWidth,
+ mapToWidth,
+}
diff --git a/src/lib/utils/width.js b/src/lib/utils/width.js
index aba78f9..ee65cfd 100644
--- a/src/lib/utils/width.js
+++ b/src/lib/utils/width.js
@@ -1,6 +1,6 @@
const settings = {
- unit: 'em',
- nOfUnit: 120
+ unit: 'px',
+ nOfUnit: 20
}
export const unitWidth = (n, s) => {
@@ -13,11 +13,12 @@ export const unitWidth = (n, s) => {
}
}
-export const mapToWidth = (calcWidth, {small, medium, big, width}) => {
+export const mapToWidth = (calcWidth, {small, medium, big, huge, width}) => {
let multiplier = 1
if (small) { multiplier = 1 }
if (medium) { multiplier = 2 }
if (big) { multiplier = 3 }
+ if (huge) { multiplier = 6 }
if (width) { multiplier = null}
return ( multiplier ) ? calcWidth(multiplier) : width
-}
\ No newline at end of file
+}
diff --git a/src/stories/logo.js b/src/stories/logo.js
index f39f4b8..a34895c 100644
--- a/src/stories/logo.js
+++ b/src/stories/logo.js
@@ -29,6 +29,11 @@ export default storiesOf('Linguala Logo', module)
<Logo big />
</ShowCaseBox>
))
+ .add('huge', () => (
+ <ShowCaseBox>
+ <Logo huge />
+ </ShowCaseBox>
+ ))
.add('black background', () => (
<ShowCaseBox backgroundColor="black">
<Logo />
diff --git a/src/stories/pin.js b/src/stories/pin.js
index 3257f95..501be5c 100644
--- a/src/stories/pin.js
+++ b/src/stories/pin.js
@@ -13,6 +13,18 @@ storiesOf('Linguala Pin', module)
.add('default Pin', () => (
<Pin />
))
+ .add('small Pin', () => (
+ <Pin small />
+ ))
+ .add('medium Pin', () => (
+ <Pin medium />
+ ))
+ .add('big Pin', () => (
+ <Pin big />
+ ))
+ .add('huge Pin', () => (
+ <Pin huge />
+ ))
.add('Logo + Pin', () => (
<ShowCaseBox backgroundColor="white" style={{ height: '700px'}}>
<div style={{ position: "absolute" }}>
diff --git a/tests/width.test.js b/tests/width.test.js
index 6149219..8976062 100644
--- a/tests/width.test.js
+++ b/tests/width.test.js
@@ -8,11 +8,11 @@ test.beforeEach('initialize calcWidths', (t) => {
test('initialize unitWidth', t => {
const calcWidth = t.context.calcWidth
- t.is(calcWidth(), '120em')
- t.is(calcWidth(0), '0em')
- t.is(calcWidth(1), '120em')
- t.is(calcWidth(2), '240em')
- t.is(calcWidth(3), '360em')
+ t.is(calcWidth(), '20px')
+ t.is(calcWidth(0), '0px')
+ t.is(calcWidth(1), '20px')
+ t.is(calcWidth(2), '40px')
+ t.is(calcWidth(3), '60px')
})
test('initialize unitWidth with parameters', t => {
@@ -25,9 +25,9 @@ test('initialize unitWidth with parameters', t => {
test('test mapping', t => {
const calcWidth = t.context.calcWidth
- t.is(mapToWidth(calcWidth, { small: true }), '120em')
- t.is(mapToWidth(calcWidth, { medium: true }), '240em')
- t.is(mapToWidth(calcWidth, { big: true }), '360em')
+ t.is(mapToWidth(calcWidth, { small: true }), '20px')
+ t.is(mapToWidth(calcWidth, { medium: true }), '40px')
+ t.is(mapToWidth(calcWidth, { big: true }), '60px')
t.is(
mapToWidth(calcWidth, { width: '30px' }),
'30px'
--
GitLab