react-native-table-component - npm Package Compare versions

Comparing version 1.1.8 to 1.2.0

components/cell.js

 import React, { Component } from 'react';
 import { View, ViewPropTypes, Text, StyleSheet } from 'react-native';
 
-class Cell extends Component {
+export class Cell extends Component {
   static propTypes = {
     style: ViewPropTypes.style,
     textStyle: Text.propTypes.style,
-    borderStyle: ViewPropTypes.style,
-  }
+    borderStyle: ViewPropTypes.style
+  };
 
   render() {
-    const {data, width, height, flex, style, textStyle, ...props} = this.props;
-    const textDom = React.isValidElement(data) ? data : (
-        <Text style={[textStyle, styles.text]} {...props}>{data}</Text>
-      );
-    let borderWidth,borderColor;
-    if (this.props.borderStyle && this.props.borderStyle.borderWidth !== undefined) {
-      borderWidth = this.props.borderStyle.borderWidth;
-    } else {
-      borderWidth = 1;
-    }
-    if (this.props.borderStyle && this.props.borderStyle.borderColor) {
-      borderColor = this.props.borderStyle.borderColor;
-    } else {
-      borderColor = '#000';
-    }
+    const { data, width, height, flex, style, textStyle, borderStyle, ...props } = this.props;
+    const textDom = React.isValidElement(data) ? (
+      data
+    ) : (
+      <Text style={[textStyle, styles.text]} {...props}>
+        {data}
+      </Text>
+    );
+    const borderTopWidth = (borderStyle && borderStyle.borderWidth) || 1;
+    const borderRightWidth = borderTopWidth;
+    const borderColor = (borderStyle && borderStyle.borderColor) || '#000';
 
     return (
-      <View style={[
-        {
-          borderTopWidth: borderWidth,
-          borderRightWidth: borderWidth,
-          borderColor: borderColor,
-        },
-        styles.cell,
-        width && {width: width},
-        height && {height: height},
-        flex && {flex: flex},
-        !width && !flex && !height && !style && {flex: 1},
-        style
-      ]}>
+      <View
+        style={[
+          {
+            borderTopWidth,
+            borderRightWidth,
+            borderColor
+          },
+          styles.cell,
+          width && { width },
+          height && { height },
+          flex && { flex },
+          !width && !flex && !height && !style && { flex: 1 },
+          style
+        ]}
+      >
         {textDom}
       </View>
-    )
+    );
   }
@@ -49,10 +47,4 @@ }
 const styles = StyleSheet.create({
-  cell: {
-    justifyContent: 'center',
-  },
-  text: {
-    backgroundColor: 'transparent',
-  },
-})
-
-export default Cell;
+  cell: { justifyContent: 'center' },
+  text: { backgroundColor: 'transparent' }
+});

components/cols.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View, ViewPropTypes, Text, StyleSheet } from 'react-native';
-import Cell from './cell';
+import { Cell } from './cell';
+import { sum } from '../utils';
 
-class Col extends Component {
+export class Col extends Component {
   static propTypes = {
     width: PropTypes.number,
     style: ViewPropTypes.style,
-    textStyle: Text.propTypes.style,
-  }
+    textStyle: Text.propTypes.style
+  };
 
   render() {
-    const {data, style, width, heightArr, flex, textStyle, borderStyle, ...props} = this.props;
+    const { data, style, width, heightArr, flex, textStyle, ...props } = this.props;
 
-    return (
-      data ?
-      <View style={[
-        width ? {width: width} : {flex: 1},
-        flex && {flex: flex},
-        style
-      ]}>
-        {
-          data.map((item, i) => {
-            const height = heightArr && heightArr[i];
-            return <Cell key={i} data={item} width={width} height={height} textStyle={textStyle} borderStyle={borderStyle} {...props}/>
-          })
-        }
+    return data ? (
+      <View style={[width ? { width: width } : { flex: 1 }, flex && { flex: flex }, style]}>
+        {data.map((item, i) => {
+          const height = heightArr && heightArr[i];
+          return <Cell key={i} data={item} width={width} height={height} textStyle={textStyle} {...props} />;
+        })}
       </View>
-      : null
-    )
+    ) : null;
   }
 }
 
-class Cols extends Component {
+export class Cols extends Component {
   static propTypes = {
     style: ViewPropTypes.style,
-    textStyle: Text.propTypes.style,
-  }
+    textStyle: Text.propTypes.style
+  };
 
   render() {
-    const {data, style, widthArr, heightArr, flexArr, textStyle, borderStyle, ...props} = this.props;
-    let widthNum = 0;
-    if (widthArr) {
-      for(let i=0; i<widthArr.length; i++) {
-          widthNum += widthArr[i];
-      }
-    }
+    const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props;
+    let width = widthArr ? sum(widthArr) : 0;
 
-    return (
-      data ?
-      <View style={[
-          styles.cols,
-          widthNum && {width: widthNum},
-      ]}>
-        {
-          data.map((item, i) => {
-            const flex = flexArr && flexArr[i];
-            const width = widthArr && widthArr[i];
-            return <Col key={i} data={item} width={width} heightArr={heightArr} flex={flex} style={style} textStyle={textStyle} borderStyle={borderStyle} {...props}/>
-          })
-        }
+    return data ? (
+      <View style={[styles.cols, width && { width }]}>
+        {data.map((item, i) => {
+          const flex = flexArr && flexArr[i];
+          const wth = widthArr && widthArr[i];
+          return (
+            <Col
+              key={i}
+              data={item}
+              width={wth}
+              heightArr={heightArr}
+              flex={flex}
+              style={style}
+              textStyle={textStyle}
+              {...props}
+            />
+          );
+        })}
       </View>
-      : null
-    )
+    ) : null;
   }
@@ -70,7 +62,3 @@ }
 const styles = StyleSheet.create({
-  cols: {
-    flexDirection: 'row',
-  }
-})
-
-export { Col, Cols };
+  cols: { flexDirection: 'row' }
+});

components/rows.js

 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { View, ViewPropTypes, Text, StyleSheet } from 'react-native';
-import Cell from './cell';
+import { Cell } from './cell';
+import { sum } from '../utils';
 
-class Row extends Component {
+export class Row extends Component {
   static propTypes = {
     style: ViewPropTypes.style,
-    textStyle: Text.propTypes.style,
-  }
+    textStyle: Text.propTypes.style
+  };
 
   render() {
-    const {data, style, widthArr, height, flexArr, textStyle, borderStyle, ...props} = this.props;
-    let widthNum = 0;
-    if (widthArr) {
-      for(let i=0; i<widthArr.length; i++) {
-          widthNum += widthArr[i];
-      }
-    }
+    const { data, style, widthArr, height, flexArr, textStyle, ...props } = this.props;
+    let width = widthArr ? sum(widthArr) : 0;
 
-
-    return (
-      data ?
-      <View style={[
-        height && {height: height},
-        widthNum && {width: widthNum},
-        styles.row,
-        style
-      ]}>
-        {
-          data.map((item, i) => {
-            const flex = flexArr && flexArr[i];
-            const width = widthArr && widthArr[i];
-            return <Cell key={i} data={item} width={width} height={height} flex={flex} textStyle={textStyle} borderStyle={borderStyle} {...props}/>
-          })
-        }
+    return data ? (
+      <View style={[height && { height }, width && { width }, styles.row, style]}>
+        {data.map((item, i) => {
+          const flex = flexArr && flexArr[i];
+          const wth = widthArr && widthArr[i];
+          return <Cell key={i} data={item} width={wth} height={height} flex={flex} textStyle={textStyle} {...props} />;
+        })}
       </View>
-      : null
-    )
+    ) : null;
   }
 }
 
-class Rows extends Component {
+export class Rows extends Component {
   static propTypes = {
     style: ViewPropTypes.style,
-    textStyle: Text.propTypes.style,
-  }
+    textStyle: Text.propTypes.style
+  };
 
   render() {
-    const {data, style, widthArr, heightArr, flexArr, textStyle, borderStyle, ...props} = this.props;
-    let flexNum = 0, widthNum = 0;
-    if (flexArr) {
-      for(let i=0; i<flexArr.length; i++) {
-          flexNum += flexArr[i];
-      }
-    }
-    if (widthArr) {
-      for(let i=0; i<widthArr.length; i++) {
-          widthNum += widthArr[i];
-      }
-    }
+    const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props;
+    const flex = flexArr ? sum(flexArr) : 0;
+    const width = widthArr ? sum(widthArr) : 0;
 
-    return (
-      data ?
-      <View style={[
-        flexNum && {flex: flexNum},
-        widthNum && {width: widthNum},
-      ]}>
-        {
-          data.map((item, i) => {
-            const height = heightArr && heightArr[i];
-            return <Row key={i} data={item} widthArr={widthArr} height={height} flexArr={flexArr} style={style} textStyle={textStyle} borderStyle={borderStyle} {...props}/>
-          })
-        }
+    return data ? (
+      <View style={[flex && { flex }, width && { width }]}>
+        {data.map((item, i) => {
+          const height = heightArr && heightArr[i];
+          return (
+            <Row
+              key={i}
+              data={item}
+              widthArr={widthArr}
+              height={height}
+              flexArr={flexArr}
+              style={style}
+              textStyle={textStyle}
+              {...props}
+            />
+          );
+        })}
       </View>
-      : null
-    )
+    ) : null;
   }
@@ -85,5 +65,3 @@ }
     overflow: 'hidden'
-  },
-})
-
-export { Row, Rows };
+  }
+});

components/table.js

 import React, { Component } from 'react';
-import { View, ViewPropTypes, Text } from 'react-native';
+import { View, ViewPropTypes } from 'react-native';
 
-class Table extends Component {
+export class Table extends Component {
   static propTypes = {
     style: ViewPropTypes.style,
-    borderStyle: ViewPropTypes.style,
-  }
+    borderStyle: ViewPropTypes.style
+  };
 
   _renderChildren(props) {
-    return React.Children.map(props.children, child => {
-      if(props.borderStyle && child.type.displayName !== "ScrollView") {
-        return React.cloneElement(child, {
-          borderStyle: props.borderStyle
-        })
-      } else {
-        return React.cloneElement(child)
-      }
-    })
+    return React.Children.map(props.children, child =>
+      React.cloneElement(
+        child,
+        props.borderStyle && child.type.displayName !== 'ScrollView' ? { borderStyle: props.borderStyle } : {}
+      )
+    );
   }
 
   render() {
-    let borderWidth, borderColor;
-    if (this.props.borderStyle && this.props.borderStyle.borderWidth !== undefined) {
-      borderWidth = this.props.borderStyle.borderWidth;
-    } else {
-      borderWidth = 1;
-    }
-    if (this.props.borderStyle && this.props.borderStyle.borderColor) {
-      borderColor = this.props.borderStyle.borderColor;
-    } else {
-      borderColor = '#000';
-    }
+    const { borderStyle } = this.props;
+    const borderLeftWidth = (borderStyle && borderStyle.borderWidth) || 1;
+    const borderBottomWidth = borderLeftWidth;
+    const borderColor = (borderStyle && borderStyle.borderColor) || '#000';
 
     return (
-      <View style={[
-        this.props.style,
-        {
-          borderLeftWidth: borderWidth,
-          borderBottomWidth: borderWidth,
-          borderColor: borderColor
-        }
-      ]}>
+      <View
+        style={[
+          this.props.style,
+          {
+            borderLeftWidth,
+            borderBottomWidth,
+            borderColor
+          }
+        ]}
+      >
         {this._renderChildren(this.props)}
       </View>
-    )
+    );
   }
 }
 
-class TableWrapper extends Component {
+export class TableWrapper extends Component {
   static propTypes = {
-    style: ViewPropTypes.style,
-  }
+    style: ViewPropTypes.style
+  };
 
   _renderChildren(props) {
-    return React.Children.map(props.children, child => {
-      if(props.borderStyle) {
-        return React.cloneElement(child, {
-          borderStyle: props.borderStyle
-        })
-      } else {
-        return React.cloneElement(child)
-      }
-    })
+    return React.Children.map(props.children, child =>
+      React.cloneElement(child, props.borderStyle ? { borderStyle: props.borderStyle } : {})
+    );
   }
@@ -69,10 +55,4 @@
     const { style } = this.props;
-    return (
-      <View style={style}>
-        {this._renderChildren(this.props)}
-      </View>
-    );
+    return <View style={style}>{this._renderChildren(this.props)}</View>;
   }
 }
-
-export {Table, TableWrapper};

index.js

@@ -1,6 +0,4 @@
-import { Row, Rows } from './components/rows';
-import { Col, Cols } from './components/cols';
-import { Table, TableWrapper } from './components/table';
-import Cell from './components/cell';
-
-export { Table, TableWrapper, Row, Rows, Col, Cols, Cell };
+export { Row, Rows } from './components/rows';
+export { Col, Cols } from './components/cols';
+export { Table, TableWrapper } from './components/table';
+export { Cell } from './components/cell';

package.json

 {
   "name": "react-native-table-component",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Build table for react native.",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint .",
+    "prettify": "prettier --write components/**/*.js utils/**/*.js"
   },
@@ -21,7 +22,16 @@ "repository": {
   "author": "gil2015",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/Gil2015/react-native-table-component/issues"
   },
-  "homepage": "https://github.com/Gil2015/react-native-table-component#readme"
+  "homepage": "https://github.com/Gil2015/react-native-table-component#readme",
+  "devDependencies": {
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.10.0",
+    "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-react-native": "^3.5.0",
+    "prettier": "^1.15.3",
+    "react": "^16.7.0",
+    "react-native": "^0.57.8"
+  }
 }

readme_zh.md

@@ -1,4 +0,13 @@
-# React Native Table Component
-[![npm version](https://badge.fury.io/js/react-native-table-component.svg)](https://badge.fury.io/js/react-native-table-component) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) 
+<p align="center">
+  <img src="https://github.com/Gil2015/tools_file/blob/master/img/react-native-table-component/react-native-table-component-logo.png?raw=true" width="170" />
+</p>
 
+<h1 align="center">React Native Table Component</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-table-component"><img src="https://badge.fury.io/js/react-native-table-component.svg" /></a>
+  <a href="https://www.npmjs.com/package/react-native-table-component"><img src="https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg" /></a>
+  <a href="https://www.npmjs.com/package/react-native-table-component"><img src="https://img.shields.io/npm/dm/react-native-table-component.svg?colorB=orange" /></a>
+</p>
+
 为react-native设计的表格组件.
@@ -5,0 +14,0 @@

readme.md

@@ -1,4 +0,13 @@
-# React Native Table Component
-[![npm version](https://badge.fury.io/js/react-native-table-component.svg)](https://badge.fury.io/js/react-native-table-component) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) 
+<p align="center">
+  <img src="https://github.com/Gil2015/tools_file/blob/master/img/react-native-table-component/react-native-table-component-logo.png?raw=true" width="170" />
+</p>
 
+<h1 align="center">React Native Table Component</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-table-component"><img src="https://badge.fury.io/js/react-native-table-component.svg" /></a>
+  <a href="https://www.npmjs.com/package/react-native-table-component"><img src="https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg" /></a>
+  <a href="https://www.npmjs.com/package/react-native-table-component"><img src="https://img.shields.io/npm/dm/react-native-table-component.svg?colorB=orange" /></a>
+</p>
+
 This is a table component for react native.
@@ -5,0 +14,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

180606

increased by474.37%

Number of package files

14

increased by75%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

388

increased by2.37%

Worsened metrics

Dev dependency count

7

increased byInfinity%

Lines of code

225

decreased by-17.28%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes