Skip to content
This repository was archived by the owner on Mar 15, 2025. It is now read-only.

Commit 47807e7

Browse files
rundmtrundmt
committed
Merge pull request #2 from rundmt/refactor-for-testing
refactored code to modules for testing, bumped version
2 parents 820d15f + 94491f4 commit 47807e7

File tree

9 files changed

+209
-136
lines changed

9 files changed

+209
-136
lines changed

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
tests/

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@ The main difference is you can specify the grid size. By default `<Row>` is a si
5353
* Basic Grid
5454
* Styles
5555
* Hiding Items
56+
* Basic Unit Testing
5657

5758
# To Do
58-
* Testing.
59-
* Horizontal Display(Not sure if needed/wanted)
59+
* Jest Testing. (Possibly New Examples Repo)
60+
* More Examples
61+
* More Documentation

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-flexbox-grid",
3-
"version": "0.0.11",
3+
"version": "0.1.0",
44
"description": "Grid system for react native based on flexbox grid's api",
55
"main": "src/index.js",
66
"scripts": {

‎src/components/Column.js‎

Lines changed: 4 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -2,115 +2,23 @@
22

33
import React from 'react-native';
44
import {screenSize} from '../lib/ScreenSize';
5+
import {isHidden, getComponentWidth, getComponentOffset} from '../lib/helpers';
56

67
var {
78
Component,
89
PropTypes,
9-
StyleSheet,
10-
Text,
1110
View,
1211
} = React;
1312

1413
export default class Column extends Component {
15-
constructor(props){
16-
super(props);
17-
this.screenSize = screenSize;
18-
this.state = {
19-
width: this.getComponentWidth(),
20-
marginLeft: this.getComponentOffset(),
21-
hidden: this.isHidden(),
22-
};
23-
}
24-
25-
getComponentWidth(){
26-
switch(this.screenSize) {
27-
case 'small':
28-
if(this.props.sm){
29-
return this.props.parentWidth * this.props.sm/this.props.rowSize;
30-
} else {
31-
return this.props.parentWidth;
32-
}
33-
break;
34-
case 'medium':
35-
if(this.props.md){
36-
return this.props.parentWidth * this.props.md/this.props.rowSize;
37-
} else if(this.props.sm){
38-
return this.props.parentWidth * this.props.sm/this.props.rowSize;
39-
} else {
40-
return this.props.parentWidth;
41-
}
42-
break;
43-
case 'large':
44-
if(this.props.lg){
45-
return this.props.parentWidth * this.props.lg/this.props.rowSize;
46-
} else if(this.props.md){
47-
return this.props.parentWidth * this.props.md/this.props.rowSize;
48-
} else if(this.props.sm){
49-
return this.props.parentWidth * this.props.sm/this.props.rowSize;
50-
} else {
51-
return this.props.parentWidth;
52-
}
53-
break;
54-
default:
55-
return this.props.parentWidth;
56-
}
57-
}
58-
59-
getComponentOffset(){
60-
switch(this.screenSize) {
61-
case 'small':
62-
if(this.props.smOffset){
63-
return this.props.parentWidth * this.props.smOffset/this.props.rowSize;
64-
} else {
65-
return 0;
66-
}
67-
break;
68-
case 'medium':
69-
if(this.props.mdOffset){
70-
return this.props.parentWidth * this.props.mdOffset/this.props.rowSize;
71-
} else if(this.props.smOffset){
72-
return this.props.parentWidth * this.props.smOffset/this.props.rowSize;
73-
} else {
74-
return 0;
75-
}
76-
break;
77-
case 'large':
78-
if(this.props.lgOffset){
79-
return this.props.parentWidth * this.props.lgOffset/this.props.rowSize;
80-
} else if(this.props.mdOffset){
81-
return this.props.parentWidth * this.props.mdOffset/this.props.rowSize;
82-
} else if(this.props.smOffset){
83-
return this.props.parentWidth * this.props.smOffset/this.props.rowSize;
84-
} else {
85-
return 0;
86-
}
87-
break;
88-
default:
89-
return 0;
90-
}
91-
}
92-
93-
isHidden(){
94-
switch(this.screenSize) {
95-
case 'small':
96-
return this.props.smHidden;
97-
case 'medium':
98-
return this.props.mdHidden;
99-
case 'large':
100-
return this.props.lgHidden;
101-
default:
102-
return false;
103-
}
104-
}
105-
106-
render() {
107-
if(this.state.hidden){
14+
render(){
15+
if(isHidden(screenSize, this.props)){
10816
return null;
10917
} else {
11018
return (
11119
<View
11220
{...this.props}
113-
style={[this.props.style, {width: this.state.width, flexDirection: 'column', marginLeft: this.state.marginLeft}]}>
21+
style={[this.props.style, {width: getComponentWidth(screenSize, this.props), flexDirection: 'column', marginLeft: getComponentOffset(screenSize, this.props)}]}>
11422
{this.props.children}
11523
</View>
11624
);

‎src/components/Row.js‎

Lines changed: 23 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,51 @@
22

33
import React from 'react-native';
44
import {screenSize} from '../lib/ScreenSize';
5+
import {isHidden} from '../lib/helpers';
56

67
var {
78
Component,
8-
Dimensions,
9-
StyleSheet,
109
PropTypes,
1110
View,
1211
} = React;
1312

14-
const SCREEN_WIDTH = Dimensions.get('window').width;
15-
1613
export default class Row extends Component {
1714
constructor(props){
1815
super(props);
19-
this.screenSize = screenSize;
2016
this.state = {
21-
width: SCREEN_WIDTH,
22-
updated: false,
23-
hidden: this.isHidden(),
17+
width: 0
2418
};
2519
}
2620

27-
isHidden(){
28-
switch(this.screenSize) {
29-
case 'small':
30-
return this.props.smHidden;
31-
case 'medium':
32-
return this.props.mdHidden;
33-
case 'large':
34-
return this.props.lgHidden;
35-
default:
36-
return false;
37-
}
21+
_getWidth(res){
22+
this.setState({width: res.nativeEvent.layout.width});
3823
}
3924

40-
getWidth(res){
41-
this.setState({width: res.nativeEvent.layout.width, updated: true });
25+
_cloneElements(){
26+
// Check if state is updated before cloning. Causes layout to rerender less.
27+
if(this.state.width > 0){
28+
//if size doesn't exist or is 0 default to 12
29+
const rowSize = this.props.size > 0 ? this.props.size : 12;
30+
31+
return React.Children.map(this.props.children, (element) => {
32+
return React.cloneElement(element, {parentWidth: this.state.width, rowSize: rowSize});
33+
});
34+
}
4235
}
4336

4437
render() {
45-
//if size doesn't exist or is 0 default to 12
46-
let rowSize = this.props.size > 0 ? this.props.size : 12;
47-
if(this.state.hidden){
38+
if(isHidden(screenSize, this.props)){
4839
return null;
4940
} else {
5041
return (
51-
<View {...this.props} onLayout={this.getWidth.bind(this)} style={[styles.container, this.props.style, {flexWrap: this.props.wrap ? 'wrap' : 'nowrap'}, {alignItems: this.props.alignItems, justifyContent: this.props.justifyContent}]}>
52-
{React.Children.map(this.props.children, (element, idx) => {
53-
// Check if state is updated before cloning. Causes Layout to be slower, but stable.
54-
if(this.state.updated){
55-
return React.cloneElement(element, {parentWidth: this.state.width, rowSize: rowSize});
56-
}
57-
})}
42+
<View {...this.props}
43+
onLayout={this._getWidth.bind(this)}
44+
style={[this.props.style,
45+
{ flexDirection: 'row',
46+
flexWrap: this.props.wrap ? 'wrap' : 'nowrap',
47+
alignItems: this.props.alignItems,
48+
justifyContent: this.props.justifyContent}]}>
49+
{this._cloneElements()}
5850
</View>
5951
);
6052
}
@@ -67,9 +59,3 @@ Row.propTypes = {
6759
mdHidden: PropTypes.bool,
6860
lgHidden: PropTypes.bool,
6961
};
70-
71-
var styles = StyleSheet.create({
72-
container: {
73-
flexDirection: 'row',
74-
},
75-
});

‎src/lib/helpers.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
module.exports.isHidden = function(screenSize, props){
2+
switch(screenSize) {
3+
case 'small':
4+
return props.smHidden ? true : false;
5+
case 'medium':
6+
return props.mdHidden ? true : false;
7+
case 'large':
8+
return props.lgHidden ? true : false;
9+
default:
10+
return false;
11+
}
12+
};
13+
14+
module.exports.getComponentWidth = function(screenSize, props){
15+
switch(screenSize) {
16+
case 'small':
17+
if(props.sm){
18+
return props.parentWidth * props.sm/props.rowSize;
19+
} else {
20+
return props.parentWidth;
21+
}
22+
break;
23+
case 'medium':
24+
if(props.md){
25+
return props.parentWidth * props.md/props.rowSize;
26+
} else if(props.sm){
27+
return props.parentWidth * props.sm/props.rowSize;
28+
} else {
29+
return props.parentWidth;
30+
}
31+
break;
32+
case 'large':
33+
if(props.lg){
34+
return props.parentWidth * props.lg/props.rowSize;
35+
} else if(props.md){
36+
return props.parentWidth * props.md/props.rowSize;
37+
} else if(props.sm){
38+
return props.parentWidth * props.sm/props.rowSize;
39+
} else {
40+
return props.parentWidth;
41+
}
42+
break;
43+
default:
44+
return props.parentWidth;
45+
}
46+
};
47+
48+
module.exports.getComponentOffset = function(screenSize, props){
49+
switch(screenSize) {
50+
case 'small':
51+
if(props.smOffset){
52+
return props.parentWidth * props.smOffset/props.rowSize;
53+
} else {
54+
return 0;
55+
}
56+
break;
57+
case 'medium':
58+
if(props.mdOffset){
59+
return props.parentWidth * props.mdOffset/props.rowSize;
60+
} else if(props.smOffset){
61+
return props.parentWidth * props.smOffset/props.rowSize;
62+
} else {
63+
return 0;
64+
}
65+
break;
66+
case 'large':
67+
if(props.lgOffset){
68+
return props.parentWidth * props.lgOffset/props.rowSize;
69+
} else if(props.mdOffset){
70+
return props.parentWidth * props.mdOffset/props.rowSize;
71+
} else if(props.smOffset){
72+
return props.parentWidth * props.smOffset/props.rowSize;
73+
} else {
74+
return 0;
75+
}
76+
break;
77+
default:
78+
return 0;
79+
}
80+
};

‎tests/getComponentOffset-specs.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var getComponentOffset = require('../src/lib/helpers').getComponentOffset;
2+
var assert = require('assert');
3+
4+
describe('Get Component Width ', function() {
5+
it('it should get component width for small screen', function () {
6+
assert.equal(320, getComponentOffset('small', {parentWidth: 320, rowSize: 12, smOffset: 12, mdOffset: 6, lgOffset: 4}));
7+
assert.equal(160, getComponentOffset('small', {parentWidth: 320, rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 4}));
8+
assert.equal(80, getComponentOffset('small', {parentWidth: 320, rowSize: 12, smOffset: 3, mdOffset: 4, lgOffset: 4}));
9+
assert.equal(0, getComponentOffset('small', {parentWidth: 768, rowSize: 12}));
10+
});
11+
12+
it('it should get component width for medium screen', function () {
13+
assert.equal(768, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 12, lgOffset: 4}));
14+
assert.equal(384, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 4}));
15+
assert.equal(192, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 3, mdOffset: 3, lgOffset: 4}));
16+
assert.equal(768, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 12, lgOffset: 12}));
17+
assert.equal(384, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 6, lgOffset: 12}));
18+
assert.equal(192, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 3, lgOffset: 12}));
19+
assert.equal(0, getComponentOffset('medium', {parentWidth: 768, rowSize: 12}));
20+
});
21+
22+
it('it should get component width for large screen', function () {
23+
assert.equal(1024, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 12, mdOffset: 12}));
24+
assert.equal(1024, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 12}));
25+
assert.equal(512, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 6}));
26+
assert.equal(512, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 6, mdOffset: 6}));
27+
assert.equal(0, getComponentOffset('large', {parentWidth: 1024, rowSize: 12}));
28+
});
29+
});

‎tests/getComponentWidth-specs.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var getComponentWidth = require('../src/lib/helpers').getComponentWidth;
2+
var assert = require('assert');
3+
4+
describe('Get Component Width ', function() {
5+
it('it should get component width for small screen', function () {
6+
assert.equal(320, getComponentWidth('small', {parentWidth: 320, rowSize: 12, sm: 12, md: 6, lg: 4}));
7+
assert.equal(160, getComponentWidth('small', {parentWidth: 320, rowSize: 12, sm: 6, md: 6, lg: 4}));
8+
assert.equal(80, getComponentWidth('small', {parentWidth: 320, rowSize: 12, sm: 3, md: 4, lg: 4}));
9+
});
10+
11+
it('it should get component width for medium screen', function () {
12+
assert.equal(768, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 12, lg: 4}));
13+
assert.equal(384, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 6, md: 6, lg: 4}));
14+
assert.equal(192, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 3, md: 3, lg: 4}));
15+
assert.equal(768, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 12, lg: 12}));
16+
assert.equal(384, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 6, lg: 12}));
17+
assert.equal(192, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 3, lg: 12}));
18+
});
19+
20+
it('it should get component width for large screen', function () {
21+
assert.equal(1024, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 12, md: 12}));
22+
assert.equal(1024, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 12}));
23+
assert.equal(512, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 6, md: 6, lg: 6}));
24+
assert.equal(512, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 6, md: 6}));
25+
assert.equal(256, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 3}));
26+
});
27+
});

0 commit comments

Comments
 (0)