Skip to content

Commit 17dd5b2

Browse files
idibidiartidibidiart
committed
New Major Release; See Readme and Changelog
1 parent 03da465 commit 17dd5b2

File tree

10 files changed

+507
-574
lines changed

10 files changed

+507
-574
lines changed

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
77

88
## [Released]
99

10+
## [0.34.0] - 2017-11-22
11+
12+
### Changed (non-breaking)
13+
14+
- exposed .shown and .hidden as instance variables on Row and Col components
15+
16+
### Changed (breaking)
17+
18+
- replaced layoutEvent prop and having to build stateful components (and the ambiguity around where in the component tree to place layoutEvent) with a Grid component that sits at the very top of the UI component tree, above ScrollView, ListView and FlatList et al as an optional component for when managing state is necessary (e.g. adaptive layouts)
19+
20+
## [Released]
21+
1022
## [0.33.0] - 2017-06-27
1123

1224
### Changed (non-breaking)

‎README.md‎

Lines changed: 57 additions & 95 deletions
Large diffs are not rendered by default.

‎UniversalPinterestLayout.md‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
## Universal, Responsive Pinterest Layout
2+
3+
```jsx
4+
import React, { Component} from 'react'
5+
6+
import {
7+
View,
8+
Text,
9+
Image,
10+
StyleSheet,
11+
ScrollView,
12+
ImageBackground
13+
} from 'react-native'
14+
15+
import { Row, Column as Col, ScreenInfo, Grid} from './grid'
16+
17+
// column width (relative to screen siez)
18+
const sizes = {sm: 100, md: 50, lg: 25, xl: 20}
19+
20+
const layout = (state) => {
21+
22+
const numCols = Math.floor(100/sizes[ScreenInfo(true).mediaSize])
23+
const numRows = Math.ceil(data.length / numCols)
24+
const colWidth = state.layout.grid ? state.layout.grid.width / numCols : 0
25+
26+
let layoutMatrix = [], layoutCols = []
27+
28+
for (let col = 0; col < numCols; col++) {
29+
layoutMatrix.push([])
30+
for (let row = 0, i = col; row < numRows; row++, i += numCols) {
31+
if (data[i])
32+
layoutMatrix[col].push(
33+
<Item
34+
key={i}
35+
id={i}
36+
url={data[i].url}
37+
height={data[i].pixelHeight}
38+
width={data[i].pixelWidth}
39+
margin={15}
40+
colWidth={colWidth}
41+
state={state}
42+
/>
43+
)
44+
}
45+
layoutCols.push(
46+
<Col
47+
key={col}
48+
smSize={state.layout.grid ? sizes.sm : 0 }
49+
mdSize={state.layout.grid ? sizes.md : 0 }
50+
lgSize={state.layout.grid ? sizes.lg : 0 }
51+
xlSize={state.layout.grid ? sizes.xl : 0 }
52+
>
53+
{layoutMatrix[col]}
54+
</Col>
55+
)
56+
}
57+
58+
return layoutCols
59+
}
60+
61+
const Item = (props) => {
62+
63+
if (!props.colWidth) return null
64+
65+
return (
66+
<Row key={props.id}
67+
style={{
68+
backgroundColor: 'white',
69+
margin: props.margin, borderRadius: 15, borderWidth: 1, borderColor: 'black'
70+
}}
71+
>
72+
<Col fullWidth>
73+
<ImageBackground
74+
source={{uri: props.url}}
75+
style={{
76+
width: props.colWidth,
77+
height: props.height + ((props.colWidth - props.width) * props.height/props.width),
78+
alignItems: 'center',
79+
justifyContent: 'center'
80+
}}
81+
82+
>
83+
<Text style={{fontSize: 48, marginTop: 5}}>
84+
{props.id}
85+
</Text>
86+
</ImageBackground>
87+
</Col>
88+
</Row>
89+
)}
90+
91+
export const Home = () => (
92+
<Grid>{({state, setState}) => (
93+
<Row fullHeight style={{backgroundColor: 'lightgray'}}>
94+
<ScrollView removeClippedSubviews={true} >
95+
<Row >
96+
{layout(state)}
97+
</Row>
98+
</ScrollView>
99+
</Row>
100+
)}
101+
</Grid>)
102+
103+
const data = [
104+
{
105+
url: 'https://i.pinimg.com/236x/d8/3a/9b/d83a9b6faf2e58ff895342242bd62214.jpg',
106+
pixelHeight: 354,
107+
pixelWidth: 236
108+
},
109+
{
110+
url: 'https://i.pinimg.com/236x/61/35/93/613593ea3d5537c7f85f7365f0d72f45.jpg',
111+
pixelHeight: 157,
112+
pixelWidth: 236
113+
},
114+
{
115+
url: 'https://i.pinimg.com/236x/52/7c/66/527c66879c1bbbeaf53938e467ee8927.jpg',
116+
pixelHeight: 289,
117+
pixelWidth: 236
118+
},
119+
{
120+
url: 'https://i.pinimg.com/236x/16/8e/1e/168e1e2ba9e74baf37e1c64df576b79c.jpg',
121+
pixelHeight: 326,
122+
pixelWidth: 236
123+
},
124+
{
125+
url: 'https://i.pinimg.com/236x/22/0f/01/220f016c154044a51abca097f7ecc4ea.jpg',
126+
pixelHeight: 354,
127+
pixelWidth: 236
128+
},
129+
{
130+
url: 'https://i.pinimg.com/236x/14/3a/8c/143a8c283ecaecbf90058ac0f914a1ed.jpg',
131+
pixelHeight: 176,
132+
pixelWidth: 236
133+
},
134+
{
135+
url: 'https://i.pinimg.com/236x/3d/65/6f/3d656f63189290a84d906b92d0d1565d.jpg',
136+
pixelHeight: 571,
137+
pixelWidth: 236
138+
},
139+
{
140+
url: 'https://i.pinimg.com/236x/7a/2c/f2/7a2cf28357e37a95dfac3d273ef9cb0a.jpg',
141+
pixelHeight: 265,
142+
pixelWidth: 190
143+
},
144+
{
145+
url: 'https://i.pinimg.com/236x/57/f2/c5/57f2c55991b7173ffa9056c413cae260.jpg',
146+
pixelHeight: 744,
147+
pixelWidth: 236
148+
},
149+
{
150+
url: 'https://i.pinimg.com/236x/e0/d3/85/e0d385c22794dc2140639ffc73257047.jpg',
151+
pixelHeight: 354,
152+
pixelWidth: 236
153+
},
154+
{
155+
url: 'https://i.pinimg.com/236x/b2/bf/d8/b2bfd8cb9ecb96982de45d96ef5f5801.jpg',
156+
pixelHeight: 249,
157+
pixelWidth: 236
158+
},
159+
{
160+
url: 'https://i.pinimg.com/236x/c3/73/2a/c3732abb95e790432a0208097c4e662e.jpg',
161+
pixelHeight: 314,
162+
pixelWidth: 236
163+
},
164+
{
165+
url: 'https://i.pinimg.com/236x/24/1b/5e/241b5eb929d7353e7a85c37cffad4027.jpg',
166+
pixelHeight: 188,
167+
pixelWidth: 236
168+
},
169+
{
170+
url: 'https://i.pinimg.com/236x/8b/73/b9/8b73b932a9d73ae7e17f3ccc8fc4029c.jpg',
171+
pixelHeight: 156,
172+
pixelWidth: 236
173+
},
174+
{
175+
url: 'https://i.pinimg.com/236x/88/a8/4d/88a84d09003aae699bde89d888428642.jpg',
176+
pixelHeight: 361,
177+
pixelWidth: 236
178+
},
179+
{
180+
url: 'https://i.pinimg.com/236x/3c/ca/4f/3cca4f233f253b4ca72010f5200cb372.jpg',
181+
pixelHeight: 249,
182+
pixelWidth: 202
183+
},
184+
{
185+
url: 'https://i.pinimg.com/236x/35/50/b5/3550b5659e25022e8af69fb8f6417e13.jpg',
186+
pixelHeight: 1137,
187+
pixelWidth: 236
188+
},
189+
{
190+
url: 'https://i.pinimg.com/236x/ba/2d/f9/ba2df9aa774329560f3ee48fc947a299.jpg',
191+
pixelHeight: 785,
192+
pixelWidth: 236
193+
},
194+
{
195+
url: 'https://i.pinimg.com/236x/f0/45/4d/f0454d0a5047ba3c73a50cc8c9d80bba.jpg',
196+
pixelHeight: 353,
197+
pixelWidth: 236
198+
},
199+
{
200+
url: 'https://i.pinimg.com/236x/d8/64/ca/d864cad4ec4d9cfb1a08202a887bb175.jpg',
201+
pixelHeight: 353,
202+
pixelWidth: 236
203+
},
204+
{
205+
url: 'https://i.pinimg.com/236x/2d/f4/91/2df491590161974dc461767bd405de8e.jpg',
206+
pixelHeight: 405,
207+
pixelWidth: 236
208+
},
209+
{
210+
url: 'https://i.pinimg.com/236x/c6/6d/02/c66d0236627dbb979f8b1c1b5cc3e8fb.jpg',
211+
pixelHeight: 354,
212+
pixelWidth: 236
213+
},
214+
{
215+
url: 'https://i.pinimg.com/236x/bd/3c/35/bd3c35762f8174decf01096f980c10e0.jpg',
216+
pixelHeight: 236,
217+
pixelWidth: 236
218+
},
219+
{
220+
url: 'https://i.pinimg.com/236x/90/0a/49/900a49c038c9759f79ddccbf6a82c499.jpg',
221+
pixelHeight: 480,
222+
pixelWidth: 230
223+
},
224+
{
225+
url: 'https://i.pinimg.com/236x/13/24/2f/13242f1e28dfe2e590859107d31758a1.jpg',
226+
pixelHeight: 300,
227+
pixelWidth: 225
228+
},
229+
{
230+
url: 'https://i.pinimg.com/236x/cc/da/2a/ccda2a351bb00a0267bb98e6bc8067eb.jpg',
231+
pixelHeight: 577,
232+
pixelWidth: 236
233+
},
234+
{
235+
url: 'https://i.pinimg.com/236x/a7/1e/97/a71e9712083d908d31d55ada64598125.jpg',
236+
pixelHeight: 394,
237+
pixelWidth: 236
238+
},
239+
{
240+
url: 'https://i.pinimg.com/236x/2d/cf/1e/2dcf1eca1f7329f45b4ecc572841b0f7.jpg',
241+
pixelHeight: 187,
242+
pixelWidth: 236
243+
},
244+
{
245+
url: 'https://i.pinimg.com/236x/d5/32/b3/d532b398c2c824bace748d5c876e0d1f.jpg',
246+
pixelHeight: 975,
247+
pixelWidth: 236
248+
},
249+
{
250+
url: 'https://i.pinimg.com/236x/4f/a3/44/4fa3442fd9a7e2da25ddaddb968b6d0a.jpg',
251+
pixelHeight: 328,
252+
pixelWidth: 236
253+
}
254+
]
255+
```

0 commit comments

Comments
 (0)