diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index a273f56..0000000 --- a/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -node_modules -lib* -build - -example \ No newline at end of file diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 0c7d041..0000000 --- a/.eslintrc +++ /dev/null @@ -1,24 +0,0 @@ -{ - "parser": "babel-eslint", - "env": { - "browser": true, - "node": true - }, - "plugins": ["react", "react-native"], - "extends": ["eslint:recommended", "plugin:react/recommended"], - "globals": { - "describe": false, - "it": false, - "expect": false, - "beforeEach": false, - "before": false, - "afterEach": false, - "after": false, - "jest": false, - "global": false - }, - "rules": { - "quotes": ["error", "single", { "allowTemplateLiterals": true }], - "semi": ["error", "always"] - } -} \ No newline at end of file diff --git a/.npmignore b/.npmignore index 96236f8..8ec6214 100644 --- a/.npmignore +++ b/.npmignore @@ -1 +1,12 @@ -example \ No newline at end of file +src/ +node_modules/ +.vscode/ +tsconfig.json +tslint.json +.babelrc +.cnpmrc +.gitignore +.npmignore +.npmrc +.yarnrc +publish.sh \ No newline at end of file diff --git a/components/cell.js b/components/cell.js deleted file mode 100644 index aa6a3ee..0000000 --- a/components/cell.js +++ /dev/null @@ -1,49 +0,0 @@ -import React, { Component } from 'react'; -import { View, ViewPropTypes, Text, StyleSheet } from 'react-native'; - -export class Cell extends Component { - static propTypes = { - style: ViewPropTypes.style, - textStyle: Text.propTypes.style, - borderStyle: ViewPropTypes.style - }; - - render() { - const { data, width, height, flex, style, textStyle, borderStyle, ...props } = this.props; - const textDom = React.isValidElement(data) ? ( - data - ) : ( - - {data} - - ); - const borderTopWidth = (borderStyle && borderStyle.borderWidth) || 0; - const borderRightWidth = borderTopWidth; - const borderColor = (borderStyle && borderStyle.borderColor) || '#000'; - - return ( - - {textDom} - - ); - } -} - -const styles = StyleSheet.create({ - cell: { justifyContent: 'center' }, - text: { backgroundColor: 'transparent' } -}); \ No newline at end of file diff --git a/components/cols.js b/components/cols.js deleted file mode 100644 index c039ebe..0000000 --- a/components/cols.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { View, ViewPropTypes, Text, StyleSheet } from 'react-native'; -import { Cell } from './cell'; -import { sum } from '../utils'; - -export class Col extends Component { - static propTypes = { - width: PropTypes.number, - style: ViewPropTypes.style, - textStyle: Text.propTypes.style - }; - - render() { - const { data, style, width, heightArr, flex, textStyle, ...props } = this.props; - - return data ? ( - - {data.map((item, i) => { - const height = heightArr && heightArr[i]; - return ; - })} - - ) : null; - } -} - -export class Cols extends Component { - static propTypes = { - style: ViewPropTypes.style, - textStyle: Text.propTypes.style - }; - - render() { - const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props; - let width = widthArr ? sum(widthArr) : 0; - - return data ? ( - - {data.map((item, i) => { - const flex = flexArr && flexArr[i]; - const wth = widthArr && widthArr[i]; - return ( - - ); - })} - - ) : null; - } -} - -const styles = StyleSheet.create({ - cols: { flexDirection: 'row' } -}); diff --git a/components/rows.js b/components/rows.js deleted file mode 100644 index a125f04..0000000 --- a/components/rows.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { Component } from 'react'; -import { View, ViewPropTypes, Text, StyleSheet } from 'react-native'; -import { Cell } from './cell'; -import { sum } from '../utils'; - -export class Row extends Component { - static propTypes = { - style: ViewPropTypes.style, - textStyle: Text.propTypes.style - }; - - render() { - const { data, style, widthArr, height, flexArr, textStyle, ...props } = this.props; - let width = widthArr ? sum(widthArr) : 0; - - return data ? ( - - {data.map((item, i) => { - const flex = flexArr && flexArr[i]; - const wth = widthArr && widthArr[i]; - return ; - })} - - ) : null; - } -} - -export class Rows extends Component { - static propTypes = { - style: ViewPropTypes.style, - textStyle: Text.propTypes.style - }; - - render() { - const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props; - const flex = flexArr ? sum(flexArr) : 0; - const width = widthArr ? sum(widthArr) : 0; - - return data ? ( - - {data.map((item, i) => { - const height = heightArr && heightArr[i]; - return ( - - ); - })} - - ) : null; - } -} - -const styles = StyleSheet.create({ - row: { - flexDirection: 'row', - overflow: 'hidden' - } -}); \ No newline at end of file diff --git a/components/table.js b/components/table.js deleted file mode 100644 index aa5dea2..0000000 --- a/components/table.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { Component } from 'react'; -import { View, ViewPropTypes } from 'react-native'; - -export class Table extends Component { - static propTypes = { - style: ViewPropTypes.style, - borderStyle: ViewPropTypes.style - }; - - _renderChildren(props) { - return React.Children.map(props.children, child => - React.cloneElement( - child, - props.borderStyle && child.type.displayName !== 'ScrollView' ? { borderStyle: props.borderStyle } : {} - ) - ); - } - - render() { - const { borderStyle } = this.props; - const borderLeftWidth = (borderStyle && borderStyle.borderWidth) || 0; - const borderBottomWidth = borderLeftWidth; - const borderColor = (borderStyle && borderStyle.borderColor) || '#000'; - - return ( - - {this._renderChildren(this.props)} - - ); - } -} - -export class TableWrapper extends Component { - static propTypes = { - style: ViewPropTypes.style - }; - - _renderChildren(props) { - return React.Children.map(props.children, child => - React.cloneElement(child, props.borderStyle ? { borderStyle: props.borderStyle } : {}) - ); - } - - render() { - const { style } = this.props; - return {this._renderChildren(this.props)}; - } -} diff --git a/package.json b/package.json index 5ea97fe..9621bb8 100644 --- a/package.json +++ b/package.json @@ -1,36 +1,47 @@ { - "name": "react-native-table-component", - "version": "1.2.1", - "description": "Build table for react native.", - "main": "index.js", - "scripts": { - "lint": "eslint .", - "prettify": "prettier --write components/**/*.js utils/**/*.js" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/Gil2015/react-native-table-component.git" - }, - "keywords": [ - "react-native", - "table", - "react-native-cell", - "react-native-table", - "react-native-table-component" - ], - "author": "gil2015", - "license": "MIT", - "bugs": { - "url": "https://github.com/Gil2015/react-native-table-component/issues" - }, - "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" - } -} + "name": "react-native-table-component", + "version": "1.2.1", + "description": "Build table for react native.", + "main": "dist/index.js", + "scripts": { + "test": "tsc -w", + "lint": "tslint -p tsconfig.json", + "prettify": "prettier --write components/**/*.js utils/**/*.js", + "compile": "tsc", + "build": "npm run lint && npm run compile" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Gil2015/react-native-table-component.git" + }, + "keywords": [ + "react-native", + "table", + "react-native-cell", + "react-native-table", + "react-native-table-component" + ], + "author": "gil2015", + "maintainers": [ + { + "name": "mashizhen", + "email": "dohard@163.com" + } + ], + "license": "MIT", + "bugs": { + "url": "https://github.com/Gil2015/react-native-table-component/issues" + }, + "homepage": "https://github.com/Gil2015/react-native-table-component#readme", + "devDependencies": { + "prettier": "^1.15.3", + "@types/react": "latest", + "@types/react-native": "latest", + "del": "latest", + "prompts": "latest", + "react": "latest", + "react-native": "latest", + "tslint": "latest", + "typescript": "next" + } +} \ No newline at end of file diff --git a/publish.sh b/publish.sh new file mode 100644 index 0000000..c8625a4 --- /dev/null +++ b/publish.sh @@ -0,0 +1,3 @@ +#! /bin/bash +npm run build +npm publish --tag latest --access public diff --git a/src/components/cell.tsx b/src/components/cell.tsx new file mode 100644 index 0000000..755dc3c --- /dev/null +++ b/src/components/cell.tsx @@ -0,0 +1,55 @@ +import React, { Component } from 'react'; +import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'; + +interface ICellOptions { + data: string | JSX.Element; + width?: number; + height?: number; + flex?: number; + style?: ViewStyle; + textStyle?: TextStyle; + borderStyle?: ViewStyle; +} + +export class Cell extends Component { + + public render() { + const { data, width, height, flex, style, textStyle, borderStyle, ...props } = this.props; + const textDom = React.isValidElement(data) ? ( + data + ) : ( + + {data} + + ); + const borderTopWidth = (borderStyle && borderStyle.borderWidth) || 0; + const borderRightWidth = borderTopWidth; + const borderColor = (borderStyle && borderStyle.borderColor) || '#000'; + + return ( + + {textDom} + + ); + } + +} + +const styles = StyleSheet.create({ + cell: { justifyContent: 'center' }, + text: { backgroundColor: 'transparent' } +}); diff --git a/src/components/cols.tsx b/src/components/cols.tsx new file mode 100644 index 0000000..a3589d5 --- /dev/null +++ b/src/components/cols.tsx @@ -0,0 +1,74 @@ +import React, { Component } from 'react'; +import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native'; +import { Cell } from './cell'; +import { sum } from '../utils'; + +interface IColOptions { + data: string[] | JSX.Element[]; + style?: ViewStyle; + width?: number; + heightArr?: number[]; + flex?: number; + textStyle?: TextStyle; +} + +export class Col extends Component { + + public render() { + const { data, style, width, heightArr, flex, textStyle, ...props } = this.props; + + return data ? ( + + {[...data].map((item, i) => { + const height = heightArr && heightArr[i]; + return ; + })} + + ) : null; + } + +} + + +interface IColsOptions { + data: string[][] | JSX.Element[][]; + style?: ViewStyle; + widthArr?: number[]; + heightArr?: number[]; + flexArr?: number[]; + textStyle?: TextStyle; +} + +// tslint:disable-next-line: max-classes-per-file +export class Cols extends Component { + + public render() { + const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props; + const width = widthArr ? sum(widthArr) : 0; + + return data ? ( + + {[...data].map((item, i) => { + const flex = flexArr && flexArr[i]; + const wth = widthArr && widthArr[i]; + return ( + + ); + })} + + ) : null; + } +} + +const styles = StyleSheet.create({ + cols: { flexDirection: 'row' } +}); diff --git a/src/components/rows.tsx b/src/components/rows.tsx new file mode 100644 index 0000000..1fffa4b --- /dev/null +++ b/src/components/rows.tsx @@ -0,0 +1,87 @@ +import React, { Component } from 'react'; +import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native'; +import { Cell } from './cell'; +import { sum } from '../utils'; + +interface IRowOptions { + data: string[] | JSX.Element[]; + style?: ViewStyle; + widthArr?: number[]; + height?: number; + flexArr?: number[]; + textStyle?: TextStyle; +} + +export class Row extends Component { + + public render() { + const { data, style, widthArr, height, flexArr, textStyle, ...props } = this.props; + const width = widthArr ? sum(widthArr) : 0; + + return data ? ( + + {[...data].map((item, i) => { + const flex = flexArr && flexArr[i]; + const wth = widthArr && widthArr[i]; + return ; + })} + + ) : null; + } + +} + + +interface IRowsOptions { + data: string[][] | JSX.Element[][]; + style?: ViewStyle; + widthArr?: number[]; + heightArr?: number[]; + flexArr?: number[]; + textStyle?: TextStyle; +} + +// tslint:disable-next-line: max-classes-per-file +export class Rows extends Component { + + public render() { + const { data, style, widthArr, heightArr, flexArr, textStyle, ...props } = this.props; + const flex = flexArr ? sum(flexArr) : 0; + const width = widthArr ? sum(widthArr) : 0; + + return data ? ( + + {[...data].map((item, i) => { + const height = heightArr && heightArr[i]; + return ( + + ); + })} + + ) : null; + } + +} + +const styles = StyleSheet.create({ + row: { + flexDirection: 'row', + overflow: 'hidden' + } +}); \ No newline at end of file diff --git a/src/components/table.tsx b/src/components/table.tsx new file mode 100644 index 0000000..36e7123 --- /dev/null +++ b/src/components/table.tsx @@ -0,0 +1,64 @@ +import React, { Component, ReactNode, ReactElement } from 'react'; +import { View, ViewStyle } from 'react-native'; + +interface ITableOptions { + style?: ViewStyle; + borderStyle?: ViewStyle; +} + +export class Table extends Component { + + private _renderChildren(props: Readonly & Readonly<{ children?: ReactNode }>) { + return React.Children.map(props.children, child => + React.cloneElement( + (child as unknown as ReactElement), + props.borderStyle && (child as unknown as { type: { displayName: string } }).type.displayName !== 'ScrollView' ? { borderStyle: props.borderStyle } : {} + ) + ); + } + + public render() { + const { borderStyle } = this.props; + const borderLeftWidth = (borderStyle && borderStyle.borderWidth) || 0; + const borderBottomWidth = borderLeftWidth; + const borderColor = (borderStyle && borderStyle.borderColor) || '#000'; + + return ( + + {this._renderChildren(this.props)} + + ); + } + +} + + +interface ITableWrapperOptions { + style?: ViewStyle; + borderStyle?: ViewStyle; +} + +// tslint:disable-next-line: max-classes-per-file +export class TableWrapper extends Component { + + private _renderChildren(props: Readonly & Readonly<{ children?: ReactNode }>) { + return React.Children.map(props.children, child => + React.cloneElement((child as unknown as ReactElement), props.borderStyle ? { borderStyle: props.borderStyle } : {}) + ); + } + + public render() { + const { style } = this.props; + return {this._renderChildren(this.props)}; + } + +} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..0187de7 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,4 @@ +export { Row, Rows } from './components/rows'; +export { Col, Cols } from './components/cols'; +export { Table, TableWrapper } from './components/table'; +export { Cell } from './components/cell'; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..36b5954 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,3 @@ +export function sum(arr: number[]) { + return arr.reduce((acc, n) => acc + n, 0); +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..03dfff3 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,72 @@ +{ + "include": [ + "./src/**/*.ts", + "./src/**/*.tsx" + ], + "exclude": [ + "./dist/" + ], + "compileOnSave": false, + "compilerOptions": { + "module": "CommonJS", + "target": "esnext", + "jsx": "react", + "noImplicitAny": true, + "sourceMap": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "strictNullChecks": true, + "noImplicitThis": true, + "rootDir": "./src/", + "rootDirs": [], + "outDir": "./dist/", + "allowJs": false, + "allowUnreachableCode": false, + "allowUnusedLabels": false, + "alwaysStrict": true, + "baseUrl": "", + "charset": "utf8", + "declaration": true, + "inlineSourceMap": false, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "diagnostics": false, + "emitBOM": false, + "forceConsistentCasingInFileNames": false, + "importHelpers": false, + "inlineSources": false, + "isolatedModules": false, + "lib": [ + "esnext" + ], + "listFiles": false, + "listEmittedFiles": false, + "locale": "zh_CN", + "newLine": "lf", + "noEmit": false, + "moduleResolution": "node", + "noEmitHelpers": false, + "noEmitOnError": false, + "noImplicitReturns": true, + "noImplicitUseStrict": false, + "maxNodeModuleJsDepth": 0, + "noLib": false, + "noFallthroughCasesInSwitch": true, + "noResolve": false, + "noUnusedLocals": true, + "noUnusedParameters": true, + "paths": {}, + "preserveConstEnums": false, + "pretty": true, + "removeComments": false, + "skipDefaultLibCheck": true, + "skipLibCheck": true, + "stripInternal": false, + "suppressExcessPropertyErrors": false, + "suppressImplicitAnyIndexErrors": true, + "traceResolution": false, + "typeRoots": [], + "types": [], + "watch": false + } +} \ No newline at end of file diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..65af5aa --- /dev/null +++ b/tslint.json @@ -0,0 +1,69 @@ +{ + "extends": "tslint:recommended", + "rulesDirectory": [ + "./" + ], + "rules": { + "no-any": true, + "forin": false, + "prefer-for-of": false, + "no-unused-expression": true, + "unified-signatures": false, + "whitespace": [ + true, + "check-branch", + "check-operator" + ], + "indent": [ + true, + "tabs", + 2 + ], + "quotemark": [ + true, + "single", + "avoid-escape", + "avoid-template" + ], + "max-line-length": false, + "trailing-comma": [ + true, + { + "multiline": "never", + "singleline": "never" + } + ], + "variable-name": [ + true, + "ban-keywords", + "check-format", + "allow-leading-underscore", + "allow-snake-case" + ], + "interface-name": false, + "object-literal-key-quotes": [ + true, + "as-needed" + ], + "no-bitwise": false, + "no-empty": false, + "align": [ + true, + "elements", + "members", + "statements" + ], + "new-parens": true, + "no-arg": true, + "no-conditional-assignment": true, + "no-consecutive-blank-lines": false, + "no-console": false + }, + "jsRules": { + "max-line-length": { + "options": [ + 120 + ] + } + } +} \ No newline at end of file diff --git a/utils/index.js b/utils/index.js deleted file mode 100644 index 39426c6..0000000 --- a/utils/index.js +++ /dev/null @@ -1 +0,0 @@ -export const sum = arr => arr.reduce((acc, n) => acc + n, 0);