react-native-grid-list - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

.eslintrc.js

@@ -46,2 +46,3 @@ module.exports = {
     'react/no-array-index-key': 0,
+    'react/require-default-props': 0,
     'react/forbid-prop-types': [0, { forbid: ['any', 'array'] }],
@@ -48,0 +49,0 @@ 'react/jsx-no-bind': 1,

package.json

 {
   "name": "react-native-grid-list",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "index.js",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

README.md

 # :foggy: Grid list component
 
-<p align="left">
-  <a href="https://npmjs.org/package/react-native-grid-list"><img alt="npm version" src="http://img.shields.io/npm/v/react-native-grid-list.svg"></a>
-  <a href="https://npmjs.org/package/react-native-grid-list"><img alt="npm version" src="http://img.shields.io/npm/dm/react-native-grid-list.svg"></a>
-  <img alt="npm version" src="https://travis-ci.org/gusgard/react-native-grid-list.svg?branch=master">
-</p>
+![platforms](https://img.shields.io/badge/platforms-Android%20|%20iOS-brightgreen.svg)
+[![npm](https://img.shields.io/npm/v/react-native-grid-list.svg)](https://www.npmjs.com/package/react-native-grid-list)
+[![npm](https://img.shields.io/npm/dm/react-native-grid-list.svg)](https://www.npmjs.com/package/react-native-grid-list)
+[![travis](https://travis-ci.org/gusgard/react-native-grid-list.svg?branch=master)](https://travis-ci.org/gusgard/react-native-grid-list)
+![license](https://img.shields.io/npm/l/react-native-grid-list.svg)
 
@@ -83,16 +83,17 @@ ![Demo](./demo.gif)
 
-| Prop                            |  Default   |      Type       | Description                                |
-| :------------------------------ | :--------: | :-------------: | :----------------------------------------- |
-| numColumns                      |     3      |    `number`     | Number of elements in a row                |
-| data                            | _required_ |     `array`     | Data used when render items                |
-| renderItem                      | _required_ |     `func`      | Function that render each item of the grid |
-| itemStyle                       |     {}     | `ViewPropTypes` | Style for the wrapper of item              |
+| Prop                            |              Default               |      Type       | Description                                |
+| :------------------------------ | :--------------------------------: | :-------------: | :----------------------------------------- |
+| children                        |                 -                  |     `node`      | Children elements                          |
+| data                            | _not required if children is used_ |     `array`     | Data to use in renderItem                  |
+| renderItem                      | _not required if children is used_ |     `func`      | Function that render each item of the grid |
+| numColumns                      |                 3                  |    `number`     | Number of elements in a row                |
+| itemStyle                       |                 {}                 | `ViewPropTypes` | Style for the wrapper of item              |
 | **Separator**                   |
-| showSeparator                   |   false    |     `bool`      | Show a separator between items             |
-| separatorBorderWidth            |     0      |    `number`     | Set separator width                        |
-| separatorBorderColor            |  'white'   |    `string`     | Set separator color                        |
+| showSeparator                   |               false                |     `bool`      | Show a separator between items             |
+| separatorBorderWidth            |                 0                  |    `number`     | Set separator width                        |
+| separatorBorderColor            |              'white'               |    `string`     | Set separator color                        |
 | **Animation**                   |
-| showAnimation                   |   false    |     `bool`      | Show an animation when load item           |
-| animationInitialBackgroundColor |  'white'   |    `string`     | Set initial backgroundColor for animation  |
-| animationDuration               |    500     |    `number`     | Duration of the animation                  |
+| showAnimation                   |               false                |     `bool`      | Show an animation when load item           |
+| animationInitialBackgroundColor |              'white'               |    `string`     | Set initial backgroundColor for animation  |
+| animationDuration               |                500                 |    `number`     | Duration of the animation                  |
 
@@ -99,0 +100,0 @@ ## Author

src/components/GridList/index.js

@@ -12,6 +12,4 @@ import React, { PureComponent } from 'react';
     animationInitialBackgroundColor: PropTypes.string,
-    data: PropTypes.array.isRequired,
     itemStyle: ViewPropTypes.style,
     numColumns: PropTypes.number.isRequired,
-    renderItem: PropTypes.func.isRequired,
     separatorBorderColor: PropTypes.string,
@@ -21,2 +19,17 @@ separatorBorderWidth: PropTypes.number,
     showSeparator: PropTypes.bool,
+
+    data: PropTypes.array,
+    renderItem: PropTypes.func,
+
+    // Only is allowed children or data not both
+    children(props, propName) {
+      const { data } = props;
+      if (!props[propName] && data && data.length === 0) {
+        return new Error('Invalid props, `data` or `children` is required');
+      }
+      if (data && data.length !== 0 && !props.renderItem) {
+        return new Error('Invalid props, `renderItem` is required');
+      }
+      return undefined;
+    },
   };
@@ -58,13 +71,26 @@
 
+    this.setup(this.props);
     this.animate();
   }
-  componentWillUpdate() {
+  componentWillUpdate(nextProps) {
+    this.setup(nextProps);
     this.animate();
   }
+
+  setup = ({ children, data, renderItem }) => {
+    if (children) {
+      this._data = children;
+      this._renderItem = this.renderChildren;
+    } else if (data) {
+      this._data = data;
+      this._renderItem = renderItem;
+    }
+  };
+
   animate() {
     if (this.props.showAnimation) {
-      const { data, numColumns, animationDuration } = this.props;
+      const { numColumns, animationDuration } = this.props;
       this.animatedValue = [];
 
-      this.animations = data.map((_, index) => {
+      this.animations = this._data.map((_, index) => {
         this.animatedValue[index] = new Animated.Value(0);
@@ -83,4 +109,4 @@ return Animated.stagger(0, [
 
-  _renderItem = ({ item, index }) => {
-    const { showAnimation, showSeparator, renderItem, itemStyle } = this.props;
+  renderItem = ({ item, index }) => {
+    const { showAnimation, showSeparator, itemStyle } = this.props;
 
@@ -107,6 +133,10 @@ const viewStyles = [];
           >
-            {renderItem({ item, index, animation: this.animations[index] })}
+            {this._renderItem({
+              item,
+              index,
+              animation: this.animations[index],
+            })}
           </Animated.View>
         ) : (
-          renderItem({ item, index })
+          this._renderItem({ item, index })
         )}
@@ -117,2 +147,9 @@ </View>
 
+  renderChildren = ({ item, animation }) => {
+    if (animation) {
+      animation.start();
+    }
+    return item;
+  };
+
   render() {
@@ -129,3 +166,4 @@ const { showSeparator, ...props } = this.props;
         {...props}
-        renderItem={this._renderItem}
+        data={this._data}
+        renderItem={this.renderItem}
       />
@@ -132,0 +170,0 @@ );

src/components/GridList/styles.js

@@ -23,2 +23,4 @@ import { width } from '../../themes';
     backgroundColor: separatorBorderColor,
+    width: '100%',
+    height: '100%',
   },
@@ -25,0 +27,0 @@ separator: {

src/components/GridList/test.js

@@ -72,2 +72,12 @@ import { shallow } from 'enzyme';
   });
+
+  it('renders children', () => {
+    const wrapper = shallow(
+      <GridList>
+        <Image source={items[0].thumbnail} />
+        <Image source={items[1].thumbnail} />
+      </GridList>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

330

increased by15.79%

Number of lines in readme file

102

increased by0.99%

Worsened metrics

Total package byte prevSize

1056688

decreased by-64.17%

No dependency changes