From ebada8fd6d5e5cce3b0698555add4947c831b88a Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Tue, 16 May 2017 21:18:24 +0530 Subject: [PATCH] chore: setup prettier --- .eslintrc | 388 ++++++------------ docs/index.js | 15 +- example/.eslintrc | 11 + example/main.js | 25 +- example/rn-cli.config.js | 12 +- example/src/ButtonExample.js | 26 +- example/src/CardExample.js | 11 +- example/src/CheckboxExample.js | 18 +- example/src/DividerExample.js | 20 +- example/src/ExampleList.js | 25 +- example/src/GridViewExample.js | 15 +- example/src/PaperExample.js | 25 +- example/src/RadioButtonExample.js | 18 +- example/src/RippleExample.js | 1 - example/src/RootNavigator.js | 25 +- example/src/SearchExample.js | 5 +- example/src/TextExample.js | 6 +- package.json | 4 + src/components/Button.js | 120 +++--- src/components/Card/Card.js | 42 +- src/components/Card/CardActions.js | 15 +- src/components/Card/CardContent.js | 21 +- src/components/Card/CardCover.js | 22 +- src/components/Card/index.js | 2 +- src/components/Checkbox.js | 49 +-- src/components/Divider.js | 20 +- src/components/Drawer/Drawer.js | 64 +-- src/components/Drawer/DrawerItem.js | 59 ++- src/components/Drawer/DrawerSection.js | 21 +- src/components/Drawer/index.js | 2 +- src/components/GridView.js | 66 +-- src/components/Icon.js | 1 - src/components/Paper.js | 24 +- src/components/Portal/Portal.js | 20 +- src/components/Portal/PortalHost.js | 35 +- src/components/Portal/ThemedPortal.js | 14 +- src/components/RadioButton.js | 71 ++-- src/components/SearchBar.js | 63 +-- .../TouchableRipple.android.js | 51 ++- .../TouchableRipple/TouchableRipple.js | 42 +- src/components/TouchableRipple/index.js | 2 +- src/components/Typography/Caption.js | 12 +- src/components/Typography/Headline.js | 12 +- src/components/Typography/Paragraph.js | 12 +- src/components/Typography/StyledText.js | 19 +- src/components/Typography/Subheading.js | 12 +- src/components/Typography/Text.js | 21 +- src/components/Typography/Title.js | 12 +- src/core/Provider.js | 12 +- src/core/ThemeProvider.js | 20 +- src/core/withTheme.js | 18 +- src/styles/DefaultTheme.js | 7 +- src/styles/fonts.js | 4 +- src/styles/shadow.js | 22 +- src/types/Theme.js | 28 +- 55 files changed, 701 insertions(+), 986 deletions(-) create mode 100644 example/.eslintrc diff --git a/.eslintrc b/.eslintrc index 7d310f1..6e0b079 100644 --- a/.eslintrc +++ b/.eslintrc @@ -14,292 +14,134 @@ } }, + "extends": [ + "prettier", + "prettier/flowtype", + "prettier/react" + ], + "plugins": [ "babel", + "flowtype", "import", "react", "react-native", + "prettier", ], - "globals": { - "ReactClass": false, - "ReactPropsCheckType": false, - "ReactPropsChainableTypeChecker": false, - "ReactPropTypes": false, - "SyntheticEvent": false, - }, - "rules": { - "comma-dangle": [1,"always-multiline"], - "max-depth": 0, - "max-len": 0, - "max-params": 0, - "max-statements-per-line": 0, - "max-statements": 0, - "no-cond-assign": 2, - "no-console": 1, - "no-constant-condition": 2, - "no-control-regex": 2, - "no-debugger": 2, - "no-dupe-args": 2, - "no-dupe-keys": 2, - "no-duplicate-case": 2, - "no-duplicate-imports": 2, - "no-empty-character-class": 2, - "no-empty-pattern": 2, - "no-empty": 2, - "no-ex-assign": 2, - "no-extra-boolean-cast": 2, - "no-extra-label": 2, - "no-extra-parens": 0, - "no-extra-semi": 2, - "no-func-assign": 2, - "no-inner-declarations": 2, - "no-invalid-regexp": 2, - "no-irregular-whitespace": 2, - "no-negated-in-lhs": 2, - "no-obj-calls": 2, - "no-regex-spaces": 2, - "no-restricted-globals": 0, - "no-sparse-arrays": 2, - "no-unexpected-multiline": 2, - "no-unreachable": 2, - "template-curly-spacing": 1, - "use-isnan": 2, - "valid-jsdoc": 0, - "valid-typeof": 2, + "constructor-super": "error", + "no-case-declarations": "error", + "no-class-assign": "error", + "no-cond-assign": "error", + "no-const-assign": "error", + "no-constant-condition": "error", + "no-control-regex": "error", + "no-delete-var": "error", + "no-dupe-args": "error", + "no-dupe-class-members": "error", + "no-dupe-keys": "error", + "no-duplicate-case": "error", + "no-empty": "error", + "no-empty-character-class": "error", + "no-empty-pattern": "error", + "no-ex-assign": "error", + "no-extra-boolean-cast": "error", + "no-extra-semi": "error", + "no-fallthrough": "error", + "no-func-assign": "error", + "no-global-assign": "error", + "no-inner-declarations": "error", + "no-invalid-regexp": "error", + "no-new-symbol": "error", + "no-obj-calls": "error", + "no-octal": "error", + "no-redeclare": "error", + "no-regex-spaces": "error", + "no-self-assign": "error", + "no-sparse-arrays": "error", + "no-this-before-super": "error", + "no-undef": "error", + "no-unexpected-multiline": "error", + "no-unreachable": "error", + "no-unsafe-finally": "error", + "no-unsafe-negation": "error", + "no-unused-labels": "error", + "no-unused-vars": "error", + "require-yield": "error", + "use-isnan": "error", + "valid-typeof": "error", - "accessor-pairs": 0, - "block-scoped-var": 2, - "complexity": 0, - "consistent-return": 2, - "curly": [2, "multi-line"], - "default-case": 0, - "dot-location": [1, "property"], - "dot-notation": 2, - "eqeqeq": 2, - "guard-for-in": 0, - "no-alert": 2, - "no-caller": 2, - "no-case-declarations": 1, - "no-div-regex": 0, - "no-else-return": 0, - "no-eq-null": 2, - "no-eval": 2, - "no-extend-native": 2, - "no-extra-bind": 2, - "no-fallthrough": 1, - "no-floating-decimal": 2, - "no-implicit-coercion": 0, - "no-implicit-globals": 0, - "no-implied-eval": 2, - "no-iterator": 2, - "no-labels": 2, - "no-lone-blocks": 2, - "no-loop-func": 2, - "no-multi-spaces": 1, - "no-multi-str": 2, - "no-native-reassign": 2, - "no-negated-condition": 0, - "no-new-func": 2, - "no-new-wrappers": 2, - "no-new": 2, - "no-octal-escape": 2, - "no-octal": 2, - "no-param-reassign": 1, - "no-process-env": 0, - "no-proto": 2, - "no-redeclare": 2, - "no-return-assign": 2, - "no-script-url": 2, - "no-self-assign": 2, - "no-self-compare": 2, - "no-sequences": 2, - "no-unmodified-loop-condition": 2, - "no-unused-expressions": 2, - "no-unused-labels": 2, - "no-useless-call": 2, - "no-useless-concat": 2, - "no-useless-constructor": 2, - "no-useless-escape": 2, - "no-void": 2, - "no-warning-comments": 0, - "no-with": 2, - "radix": 1, - "vars-on-top": 1, - "wrap-iife": 1, - "yoda": [1, "never"], + "babel/new-cap": "off", + "babel/object-curly-spacing": "off", + "babel/arrow-parens": "off", - "strict": 0, + "flowtype/boolean-style": ["error", "boolean"], + "flowtype/define-flow-type": "error", + "flowtype/no-dupe-keys": "error", + "flowtype/no-primitive-constructor-types": "error", + "flowtype/no-weak-types": "off", + "flowtype/require-parameter-type": "off", + "flowtype/require-return-type": "off", + "flowtype/require-valid-file-annotation": "error", + "flowtype/require-variable-type": "off", + "flowtype/sort-keys": "off", + "flowtype/type-id-match": "off", + "flowtype/use-flow-type": "error", + "flowtype/valid-syntax": "error", - "init-declarations": 0, - "no-catch-shadow": 2, - "no-delete-var": 2, - "no-label-var": 2, - "no-shadow-restricted-names": 2, - "no-shadow": 2, - "no-undef-init": 2, - "no-undef": 2, - "no-undefined": 0, - "no-unused-vars": 2, - "no-use-before-define": 0, - "no-whitespace-before-property": 1, + "import/no-unresolved": "error", + "import/named": "error", + "import/default": "off", + "import/namespace": "off", + "import/export": "error", + "import/no-named-as-default": "off", + "import/no-named-as-default-member": "off", + "import/no-deprecated": "off", + "import/no-extraneous-dependencies": "off", + "import/no-commonjs": "error", + "import/no-amd": "error", + "import/no-nodejs-modules": "off", + "import/imports-first": "error", + "import/no-duplicates": "error", + "import/no-namespace": "off", + "import/extensions": ["error", { "js": "never", "json": "always" }], + "import/order": "off", - "handle-callback-err": 1, - "no-mixed-requires": 1, - "no-new-require": 0, - "no-path-concat": 0, - "no-process-exit": 0, - "no-restricted-imports": 0, - "no-restricted-modules": 0, - "no-restricted-syntax": 0, - "no-sync": 0, + "react/display-name": "off", + "react/forbid-prop-types": "off", + "react/no-danger": "error", + "react/no-deprecated": "error", + "react/no-did-mount-set-state": "error", + "react/no-did-update-set-state": "error", + "react/no-direct-mutation-state": "error", + "react/no-is-mounted": "error", + "react/no-multi-comp": "off", + "react/no-set-state": "off", + "react/no-string-refs": "error", + "react/no-unknown-property": "error", + "react/prefer-es6-class": "error", + "react/prop-types": "error", + "react/react-in-jsx-scope": "error", + "react/require-render-return": "error", + "react/self-closing-comp": "error", + "react/sort-comp": "error", + "react/sort-prop-types": "off", + "react/jsx-boolean-value": ["error", "never"], + "react/jsx-handler-names": "off", + "react/jsx-key": "error", + "react/jsx-no-bind": "off", + "react/jsx-no-duplicate-props": "error", + "react/jsx-no-literals": "off", + "react/jsx-no-undef": "error", + "react/jsx-pascal-case": "error", + "react/jsx-sort-props": "off", + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", - "array-bracket-spacing": 0, - "array-callback-return": 2, - "arrow-body-style": 0, - "block-spacing": [1, "always"], - "brace-style": [1, "1tbs", { "allowSingleLine": true }], - "camelcase": 0, - "comma-spacing": [1, { "before": false, "after": true }], - "comma-style": [1, "last"], - "computed-property-spacing": [1, "never"], - "consistent-this": [1, "self"], - "eol-last": 1, - "func-names": 0, - "func-style": 0, - "id-length": 0, - "id-match": 0, - "indent": [1, 2], - "jsx-quotes": [1, "prefer-single"], - "key-spacing": [1, { "beforeColon": false, "afterColon": true }], - "keyword-spacing": 1, - "linebreak-style": 1, - "lines-around-comment": 0, - "max-nested-callbacks": [1, 3], - "new-cap": 0, - "new-parens": 2, - "newline-after-var": 0, - "newline-before-return": 0, - "no-array-constructor": 1, - "no-confusing-arrow": 0, - "no-continue": 0, - "no-inline-comments": 0, - "no-lonely-if": 0, - "no-mixed-spaces-and-tabs": [1, "smart-tabs"], - "no-multiple-empty-lines": 1, - "no-nested-ternary": 1, - "no-new-object": 1, - "no-new-symbol": 2, - "no-spaced-func": 1, - "no-ternary": 0, - "no-trailing-spaces": 1, - "no-underscore-dangle": 0, - "no-unneeded-ternary": 1, - "object-curly-spacing": 0, - "one-var-declaration-per-line": 0, - "one-var": 0, - "operator-assignment": 1, - "operator-linebreak": [2, "after"], - "padded-blocks": 0, - "quote-props": [1, "as-needed"], - "quotes": [1, "single", "avoid-escape"], - "semi-spacing": [2, { "before": false, "after": true }], - "semi": 2, - "sort-imports": 0, - "sort-vars": 0, - "space-before-blocks": 1, - "space-in-parens": [1, "never"], - "space-infix-ops": [1, { "int32Hint": false} ], - "space-unary-ops": [1, { "words": true, "nonwords": false }], - "spaced-comment": [1, "always"], - "wrap-regex": 0, + "react-native/no-unused-styles": "error", + "react-native/split-platform-components": "off", - "arrow-parens": 0, - "arrow-spacing": [2, { "before": true, "after": true }], - "constructor-super": 2, - "generator-star-spacing": 0, - "no-class-assign": 2, - "no-const-assign": 2, - "no-dupe-class-members": 2, - "no-this-before-super": 2, - "no-var": 1, - "object-shorthand": 0, - "prefer-arrow-callback": 1, - "prefer-const": 1, - "prefer-reflect": 0, - "prefer-rest-params": 1, - "prefer-spread": 1, - "prefer-template": 0, - "require-jsdoc": 0, - "require-yield": 0, - - "babel/generator-star-spacing": [2, "before"], - "babel/new-cap": 0, - "babel/array-bracket-spacing": [1, "always"], - "babel/object-curly-spacing": [1, "always"], - "babel/object-shorthand": 1, - "babel/arrow-parens": 0, - "babel/no-await-in-loop": 2, - "babel/flow-object-type": [1, "semicolon"], - - "import/no-unresolved": 2, - "import/named": 2, - "import/default": 0, - "import/namespace": 0, - "import/export": 2, - "import/no-named-as-default": 0, - "import/no-named-as-default-member": 0, - "import/no-deprecated": 0, - "import/no-extraneous-dependencies": 0, - "import/no-commonjs": 1, - "import/no-amd": 1, - "import/no-nodejs-modules": 0, - "import/imports-first": 2, - "import/no-duplicates": 2, - "import/no-namespace": 0, - "import/extensions": [2, { "js": "never", "json": "always" }], - "import/order": 0, - - "react/display-name": 0, - "react/forbid-prop-types": 0, - "react/no-danger": 1, - "react/no-deprecated": 1, - "react/no-did-mount-set-state": 2, - "react/no-did-update-set-state": 2, - "react/no-direct-mutation-state": 2, - "react/no-is-mounted": 2, - "react/no-multi-comp": 0, - "react/no-set-state": 0, - "react/no-string-refs": 2, - "react/no-unknown-property": 1, - "react/prefer-es6-class": 1, - "react/prop-types": 1, - "react/react-in-jsx-scope": 1, - "react/require-render-return": 2, - "react/self-closing-comp": 1, - "react/sort-comp": 1, - "react/sort-prop-types": 0, - "react/jsx-boolean-value": [1, "never"], - "react/jsx-closing-bracket-location": 1, - "react/jsx-curly-spacing": [1, "never"], - "react/jsx-equals-spacing": 1, - "react/jsx-first-prop-new-line": [1, "multiline"], - "react/jsx-handler-names": 0, - "react/jsx-indent-props": [1, 2], - "react/jsx-key": 2, - "react/jsx-max-props-per-line": [1, { "maximum": 2 }], - "react/jsx-no-bind": 1, - "react/jsx-no-duplicate-props": 2, - "react/jsx-no-literals": 0, - "react/jsx-no-undef": 2, - "react/jsx-pascal-case": 2, - "react/jsx-sort-props": 0, - "react/jsx-uses-react": 1, - "react/jsx-uses-vars": 1, - "react/jsx-wrap-multilines": 1, - - "react-native/no-unused-styles": 1, - "react-native/split-platform-components": 1, + "prettier/prettier": ["error", {"trailingComma": "all", "singleQuote": true}], } } diff --git a/docs/index.js b/docs/index.js index 5a5794b..01f82d2 100644 --- a/docs/index.js +++ b/docs/index.js @@ -12,7 +12,8 @@ if (!fs.existsSync(dist)) { } function getFiles() { - const components = fs.readFileSync(path.join(__dirname, '../src/index.js')) + const components = fs + .readFileSync(path.join(__dirname, '../src/index.js')) .toString() .split('\n') .map(line => line.split(' ').pop().replace(/('|;)/g, '')) @@ -20,7 +21,10 @@ function getFiles() { .map(line => { const file = require.resolve(path.join(__dirname, '../src', line)); if (file.endsWith('/index.js')) { - const matches = fs.readFileSync(file).toString().match(/export \{ default as default \} from .+/); + const matches = fs + .readFileSync(file) + .toString() + .match(/export \{ default as default \} from .+/); if (matches && matches.length) { const name = matches[0].split(' ').pop().replace(/('|;)/g, ''); return require.resolve(path.join(__dirname, '../src', line, name)); @@ -29,8 +33,10 @@ function getFiles() { return file; }) .sort(); - const pages = fs.readdirSync(path.join(__dirname, 'pages')).map(page => path.join(__dirname, 'pages', page)); - return [ pages, components ]; + const pages = fs + .readdirSync(path.join(__dirname, 'pages')) + .map(page => path.join(__dirname, 'pages', page)); + return [pages, components]; } if (task !== 'build') { @@ -44,4 +50,3 @@ if (task !== 'build') { output: path.join(__dirname, 'dist'), }); } - diff --git a/example/.eslintrc b/example/.eslintrc new file mode 100644 index 0000000..5c13060 --- /dev/null +++ b/example/.eslintrc @@ -0,0 +1,11 @@ +{ + "extends": '../.eslintrc', + + "settings": { + "import/core-modules": [ "react-native-paper" ] + }, + + "rules": { + "react/prop-types": "off", + } +} diff --git a/example/main.js b/example/main.js index ff36c19..bdbfa78 100644 --- a/example/main.js +++ b/example/main.js @@ -2,18 +2,10 @@ import Expo from 'expo'; import React, { Component } from 'react'; -import { - View, - StyleSheet, - Platform, -} from 'react-native'; -import { - Drawer, - Provider as PaperProvider, -} from 'react-native-paper'; +import { View, StyleSheet, Platform } from 'react-native'; +import { Drawer, Provider as PaperProvider } from 'react-native-paper'; import RootNavigator from './src/RootNavigator'; - const DrawerItems = [ { label: 'Inbox', icon: 'inbox', key: 0 }, { label: 'Starred', icon: 'star', key: 1 }, @@ -26,25 +18,26 @@ class App extends Component { state = { open: false, drawerItemIndex: 0, - } + }; - _handleOpenDrawer = () => this.setState({ open: true }) + _handleOpenDrawer = () => this.setState({ open: true }); - _handleCloseDrawer = () => this.setState({ open: false }) + _handleCloseDrawer = () => this.setState({ open: false }); - _setDrawerItem = index => this.setState({ drawerItemIndex: index }) + _setDrawerItem = index => this.setState({ drawerItemIndex: index }); _renderDrawerItems = () => { return ( - + {DrawerItems.map((props, index) => ( this._setDrawerItem(index)} - />))} + /> + ))} ); diff --git a/example/rn-cli.config.js b/example/rn-cli.config.js index 87f0967..7d34953 100644 --- a/example/rn-cli.config.js +++ b/example/rn-cli.config.js @@ -9,15 +9,21 @@ module.exports = { return [__dirname, path.resolve(__dirname, '..')]; }, getProvidesModuleNodeModules() { - return ['react-native', 'react', 'prop-types', 'react-native-drawer', 'color']; + return [ + 'react-native', + 'react', + 'prop-types', + 'react-native-drawer', + 'color', + ]; }, getBlacklistRE() { return blacklist([ new RegExp( - `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$` // eslint-disable-line prettier/prettier + `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`, // eslint-disable-line prettier/prettier ), new RegExp( - `^${escape(path.resolve(__dirname, '..', 'docs', 'node_modules'))}\\/.*$` // eslint-disable-line prettier/prettier + `^${escape(path.resolve(__dirname, '..', 'docs', 'node_modules'))}\\/.*$`, // eslint-disable-line prettier/prettier ), ]); }, diff --git a/example/src/ButtonExample.js b/example/src/ButtonExample.js index 9ec36d0..8919471 100644 --- a/example/src/ButtonExample.js +++ b/example/src/ButtonExample.js @@ -1,17 +1,10 @@ /* @flow */ import React, { Component } from 'react'; -import { - View, - StyleSheet, -} from 'react-native'; -import { - Colors, - Button, -} from 'react-native-paper'; +import { View, StyleSheet } from 'react-native'; +import { Colors, Button } from 'react-native-paper'; export default class ButtonExample extends Component { - static title = 'Button'; state = { @@ -32,24 +25,21 @@ export default class ButtonExample extends Component { - + - - + diff --git a/example/src/CardExample.js b/example/src/CardExample.js index 0ef6f81..20c8c44 100644 --- a/example/src/CardExample.js +++ b/example/src/CardExample.js @@ -1,10 +1,7 @@ /* @flow */ import React, { Component } from 'react'; -import { - ScrollView, - StyleSheet, -} from 'react-native'; +import { ScrollView, StyleSheet } from 'react-native'; import { Title, Caption, @@ -15,12 +12,14 @@ import { } from 'react-native-paper'; export default class CardExample extends Component { - static title = 'Card'; render() { return ( - + diff --git a/example/src/CheckboxExample.js b/example/src/CheckboxExample.js index b2e68b9..6244e28 100644 --- a/example/src/CheckboxExample.js +++ b/example/src/CheckboxExample.js @@ -1,18 +1,10 @@ /* @flow */ import React, { Component } from 'react'; -import { - View, - StyleSheet, -} from 'react-native'; -import { - Paragraph, - Checkbox, - Colors, -} from 'react-native-paper'; +import { View, StyleSheet } from 'react-native'; +import { Paragraph, Checkbox, Colors } from 'react-native-paper'; export default class CheckboxExample extends Component { - static title = 'Checkbox'; state = { @@ -27,7 +19,8 @@ export default class CheckboxExample extends Component { Normal this.setState(state => ({ checkedNormal: !state.checkedNormal }))} + onPress={() => + this.setState(state => ({ checkedNormal: !state.checkedNormal }))} /> @@ -35,7 +28,8 @@ export default class CheckboxExample extends Component { this.setState(state => ({ checkedCustom: !state.checkedCustom }))} + onPress={() => + this.setState(state => ({ checkedCustom: !state.checkedCustom }))} /> diff --git a/example/src/DividerExample.js b/example/src/DividerExample.js index 33d4379..f57f582 100644 --- a/example/src/DividerExample.js +++ b/example/src/DividerExample.js @@ -1,18 +1,18 @@ /* @flow */ import React from 'react'; -import { - ListView, - StyleSheet, -} from 'react-native'; -import { - Divider, - Subheading, - Colors, -} from 'react-native-paper'; +import { ListView, StyleSheet } from 'react-native'; +import { Divider, Subheading, Colors } from 'react-native-paper'; const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); -const dataSource = ds.cloneWithRows([ 'Apple', 'Banana', 'Coconut', 'Lemon', 'Mango', 'Peach' ]); +const dataSource = ds.cloneWithRows([ + 'Apple', + 'Banana', + 'Coconut', + 'Lemon', + 'Mango', + 'Peach', +]); const DividerExample = () => { return ( diff --git a/example/src/ExampleList.js b/example/src/ExampleList.js index 5081303..239ff1e 100644 --- a/example/src/ExampleList.js +++ b/example/src/ExampleList.js @@ -1,19 +1,8 @@ /* @flow */ -import React, { - Component, - PropTypes, - } from 'react'; -import { - ListView, - Text, - StyleSheet, -} from 'react-native'; -import { - Colors, - TouchableRipple, - Divider, -} from 'react-native-paper'; +import React, { Component, PropTypes } from 'react'; +import { ListView, Text, StyleSheet } from 'react-native'; +import { Colors, TouchableRipple, Divider } from 'react-native-paper'; import ButtonExample from './ButtonExample'; import CardExample from './CardExample'; import CheckboxExample from './CheckboxExample'; @@ -42,7 +31,6 @@ const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); const dataSource = ds.cloneWithRows(Object.keys(examples)); export default class ExampleList extends Component { - static navigationOptions = { title: 'Examples', }; @@ -52,12 +40,15 @@ export default class ExampleList extends Component { }; _renderRow = id => ( - this.props.navigation.navigate(id)}> + this.props.navigation.navigate(id)} + > {examples[id].title} ); - _renderSeparator = (sectionId, rowId) => ; + _renderSeparator = (sectionId, rowId) => ; render() { return ( diff --git a/example/src/GridViewExample.js b/example/src/GridViewExample.js index e29bc37..f8eb96b 100644 --- a/example/src/GridViewExample.js +++ b/example/src/GridViewExample.js @@ -1,21 +1,12 @@ /* @flow */ import React, { Component } from 'react'; -import { - View, - StyleSheet, -} from 'react-native'; -import { - Colors, - Card, - Text, - GridView, -} from 'react-native-paper'; +import { View, StyleSheet } from 'react-native'; +import { Colors, Card, Text, GridView } from 'react-native-paper'; const CARD_SIZE = 160; export default class GridViewExample extends Component { - static title = 'GridView'; state = { @@ -47,7 +38,7 @@ export default class GridViewExample extends Component { }); }; - _renderRow = (index) => { + _renderRow = index => { return ( diff --git a/example/src/PaperExample.js b/example/src/PaperExample.js index 0e0c2ef..4a17b80 100644 --- a/example/src/PaperExample.js +++ b/example/src/PaperExample.js @@ -1,30 +1,21 @@ /* @flow */ import React, { Component } from 'react'; -import { - ScrollView, - StyleSheet, -} from 'react-native'; -import { - Text, - Colors, - Paper, -} from 'react-native-paper'; +import { ScrollView, StyleSheet } from 'react-native'; +import { Text, Colors, Paper } from 'react-native-paper'; export default class RipplesExample extends Component { - static title = 'Paper'; render() { return ( - - {[ 1, 2, 4, 6, 12 ].map(i => { + + {[1, 2, 4, 6, 12].map(i => { return ( - + {i} ); diff --git a/example/src/RadioButtonExample.js b/example/src/RadioButtonExample.js index 65f3312..a70147b 100644 --- a/example/src/RadioButtonExample.js +++ b/example/src/RadioButtonExample.js @@ -1,18 +1,10 @@ /* @flow */ import React, { Component } from 'react'; -import { - View, - StyleSheet, -} from 'react-native'; -import { - Paragraph, - RadioButton, - Colors, -} from 'react-native-paper'; +import { View, StyleSheet } from 'react-native'; +import { Paragraph, RadioButton, Colors } from 'react-native-paper'; export default class RadioButtonExample extends Component { - static title = 'Radio button'; state = { @@ -27,7 +19,8 @@ export default class RadioButtonExample extends Component { Normal this.setState(state => ({ checkedNormal: !state.checkedNormal }))} + onPress={() => + this.setState(state => ({ checkedNormal: !state.checkedNormal }))} /> @@ -35,7 +28,8 @@ export default class RadioButtonExample extends Component { this.setState(state => ({ checkedCustom: !state.checkedCustom }))} + onPress={() => + this.setState(state => ({ checkedCustom: !state.checkedCustom }))} /> diff --git a/example/src/RippleExample.js b/example/src/RippleExample.js index 67ffb3b..c5bc7a9 100644 --- a/example/src/RippleExample.js +++ b/example/src/RippleExample.js @@ -3,7 +3,6 @@ import { Component } from 'react'; export default class RippleExample extends Component { - static title = 'Ripples'; render() { diff --git a/example/src/RootNavigator.js b/example/src/RootNavigator.js index 1504ccf..7eed192 100644 --- a/example/src/RootNavigator.js +++ b/example/src/RootNavigator.js @@ -23,16 +23,19 @@ const routes = Object.keys(examples) }; }, {}); -export default StackNavigator({ - home: { screen: ExampleList }, - ...routes, -}, { - navigationOptions: { - headerTintColor: Colors.white, - headerStyle: { - backgroundColor: Colors.indigo500, - paddingTop: Constants.statusBarHeight, - height: (Platform.OS === 'ios' ? 44 : 56) + Constants.statusBarHeight, +export default StackNavigator( + { + home: { screen: ExampleList }, + ...routes, + }, + { + navigationOptions: { + headerTintColor: Colors.white, + headerStyle: { + backgroundColor: Colors.indigo500, + paddingTop: Constants.statusBarHeight, + height: (Platform.OS === 'ios' ? 44 : 56) + Constants.statusBarHeight, + }, }, }, -}); +); diff --git a/example/src/SearchExample.js b/example/src/SearchExample.js index a290841..7d4d5ac 100644 --- a/example/src/SearchExample.js +++ b/example/src/SearchExample.js @@ -4,19 +4,18 @@ import React, { Component } from 'react'; import { SearchBar } from 'react-native-paper'; export default class SearchExample extends Component { - static title = 'Search'; state = { query: '', }; - _onChangeSearch = (query) => this.setState({ query }); + _onChangeSearch = query => this.setState({ query }); render() { return ( diff --git a/example/src/TextExample.js b/example/src/TextExample.js index 88dbd44..c0e4705 100644 --- a/example/src/TextExample.js +++ b/example/src/TextExample.js @@ -1,10 +1,7 @@ /* @flow */ import React, { Component } from 'react'; -import { - View, - StyleSheet, -} from 'react-native'; +import { View, StyleSheet } from 'react-native'; import { Caption, Headline, @@ -14,7 +11,6 @@ import { } from 'react-native-paper'; export default class TextExample extends Component { - static title = 'Typography'; render() { diff --git a/package.json b/package.json index 40c0c3e..a49755d 100644 --- a/package.json +++ b/package.json @@ -24,11 +24,15 @@ "devDependencies": { "babel-eslint": "^7.2.3", "eslint": "^3.19.0", + "eslint-config-prettier": "^1.7.0", "eslint-plugin-babel": "^4.1.1", + "eslint-plugin-flowtype": "^2.32.1", "eslint-plugin-import": "^2.2.0", + "eslint-plugin-prettier": "^2.0.1", "eslint-plugin-react": "^7.0.0", "eslint-plugin-react-native": "^2.3.2", "flow-bin": "~0.40.0", + "prettier": "^1.3.1", "react": "16.0.0-alpha.6", "react-native": "~0.43.2", "react-native-vector-icons": "~4.1.1" diff --git a/src/components/Button.js b/src/components/Button.js index 41ce80d..03bf0e1 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,16 +1,8 @@ /* @flow */ import color from 'color'; -import React, { - PureComponent, - PropTypes, -} from 'react'; -import { - ActivityIndicator, - Animated, - View, - StyleSheet, -} from 'react-native'; +import React, { PureComponent, PropTypes } from 'react'; +import { ActivityIndicator, Animated, View, StyleSheet } from 'react-native'; import Icon from './Icon'; import Paper from './Paper'; import Text from './Typography/Text'; @@ -22,23 +14,23 @@ import type { Theme } from '../types/Theme'; const AnimatedPaper = Animated.createAnimatedComponent(Paper); type Props = { - disabled?: boolean; - compact?: boolean; - raised?: boolean; - primary?: boolean; - dark?: boolean; - loading?: boolean; - icon?: string; - color?: string; - children?: string | Array; - onPress?: Function; - style?: any; - theme: Theme; -} + disabled?: boolean, + compact?: boolean, + raised?: boolean, + primary?: boolean, + dark?: boolean, + loading?: boolean, + icon?: string, + color?: string, + children?: string | Array, + onPress?: Function, + style?: any, + theme: Theme, +}; type State = { - elevation: Animated.Value; -} + elevation: Animated.Value, +}; /** * Buttons communicate the action that will occur when the user touches them @@ -89,7 +81,10 @@ class Button extends PureComponent { /** * Button text */ - children: PropTypes.oneOfType([ PropTypes.string, PropTypes.arrayOf(PropTypes.string) ]).isRequired, + children: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.arrayOf(PropTypes.string), + ]).isRequired, /** * Function to execute on press */ @@ -166,7 +161,9 @@ class Button extends PureComponent { if (typeof dark === 'boolean') { isDark = dark; } else { - isDark = backgroundColor === 'transparent' ? false : !color(backgroundColor).light(); + isDark = backgroundColor === 'transparent' + ? false + : !color(backgroundColor).light(); } if (disabled) { @@ -194,23 +191,30 @@ class Button extends PureComponent { const content = ( - {icon && loading !== true ? - : null - } - {loading ? - : null - } - - {children ? (Array.isArray(children) ? children.join('') : children).toUpperCase() : ''} + {icon && loading !== true + ? + : null} + {loading + ? + : null} + + {children + ? (Array.isArray(children) + ? children.join('') + : children).toUpperCase() + : ''} ); @@ -218,21 +222,21 @@ class Button extends PureComponent { return ( - {disabled ? content : - - {content} - - } + {disabled + ? content + : + {content} + } ); } diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js index 5413c7f..cd9204d 100644 --- a/src/components/Card/Card.js +++ b/src/components/Card/Card.js @@ -1,10 +1,6 @@ /* @flow */ -import React, { - Component, - Children, - PropTypes, -} from 'react'; +import React, { Component, Children, PropTypes } from 'react'; import { Animated, View, @@ -22,20 +18,20 @@ import type { Theme } from '../../types/Theme'; const AnimatedPaper = Animated.createAnimatedComponent(Paper); type DefaultProps = { - elevation: number; -} + elevation: number, +}; type Props = { - elevation?: number; - children?: string; - onPress?: Function; - style?: any; - theme: Theme; -} + elevation?: number, + children?: string, + onPress?: Function, + style?: any, + theme: Theme, +}; type State = { - elevation: Animated.Value; -} + elevation: Animated.Value, +}; class Card extends Component { static Cover = CardCover; @@ -78,19 +74,17 @@ class Card extends Component { }; render() { - const { - children, - onPress, - style, - theme, - } = this.props; + const { children, onPress, style, theme } = this.props; const { roundness } = theme; const total = Children.count(children); const siblings = Children.map(children, child => child.type.displayName); return ( - + { index, total, siblings, - }) + }), )} @@ -123,7 +117,7 @@ const styles = StyleSheet.create({ }, innerContainer: { flexGrow: 1, - } + }, }); export default withTheme(Card); diff --git a/src/components/Card/CardActions.js b/src/components/Card/CardActions.js index 7aa11e0..9a04adc 100644 --- a/src/components/Card/CardActions.js +++ b/src/components/Card/CardActions.js @@ -1,23 +1,20 @@ /* @flow */ import React, { PropTypes, Children } from 'react'; -import { - StyleSheet, - View, -} from 'react-native'; +import { StyleSheet, View } from 'react-native'; type Props = { - children?: any; - style?: any; -} + children?: any, + style?: any, +}; const CardActions = (props: Props) => { return ( - + {Children.map(props.children, child => React.cloneElement(child, { compact: child.props.compact !== false, - }) + }), )} ); diff --git a/src/components/Card/CardContent.js b/src/components/Card/CardContent.js index 96f44b1..0aefbca 100644 --- a/src/components/Card/CardContent.js +++ b/src/components/Card/CardContent.js @@ -1,17 +1,14 @@ /* @flow */ import React, { PropTypes } from 'react'; -import { - StyleSheet, - View, -} from 'react-native'; +import { StyleSheet, View } from 'react-native'; type Props = { - index?: number; - total?: number; - siblings?: Array; - style?: any; -} + index?: number, + total?: number, + siblings?: Array, + style?: any, +}; const CardContent = (props: Props) => { const { index, total, siblings, style } = props; @@ -24,7 +21,7 @@ const CardContent = (props: Props) => { next = siblings[index + 1]; } - if (prev === cover && next === cover || total === 1) { + if ((prev === cover && next === cover) || total === 1) { contentStyle = styles.only; } else { if (index === 0) { @@ -33,7 +30,7 @@ const CardContent = (props: Props) => { } else { contentStyle = styles.first; } - } else if (typeof total === 'number' && index === (total - 1)) { + } else if (typeof total === 'number' && index === total - 1) { if (prev === cover) { contentStyle = styles.only; } else { @@ -48,7 +45,7 @@ const CardContent = (props: Props) => { } } - return ; + return ; }; CardContent.propTypes = { diff --git a/src/components/Card/CardCover.js b/src/components/Card/CardCover.js index 1c8a709..6b4e8e8 100644 --- a/src/components/Card/CardCover.js +++ b/src/components/Card/CardCover.js @@ -1,21 +1,17 @@ /* @flow */ import React, { PropTypes } from 'react'; -import { - StyleSheet, - View, - Image, -} from 'react-native'; +import { StyleSheet, View, Image } from 'react-native'; import withTheme from '../../core/withTheme'; import { grey200 } from '../../styles/colors'; import type { Theme } from '../../types/Theme'; type Props = { - index?: number; - total?: number; - style?: any; - theme: Theme; -} + index?: number, + total?: number, + style?: any, + theme: Theme, +}; const CardCover = (props: Props) => { const { index, total, style, theme } = props; @@ -35,7 +31,7 @@ const CardCover = (props: Props) => { }; } } else { - if (typeof total === 'number' && index === (total - 1)) { + if (typeof total === 'number' && index === total - 1) { coverStyle = { borderBottomLeftRadius: roundness, }; @@ -43,8 +39,8 @@ const CardCover = (props: Props) => { } return ( - - + + ); }; diff --git a/src/components/Card/index.js b/src/components/Card/index.js index dd88c52..416b197 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -1,3 +1,3 @@ /* @flow */ -export { default as default } from './Card'; +export { default } from './Card'; diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index afcd4e6..9e7853a 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -1,15 +1,7 @@ /* @flow */ -import React, { - Component, - PropTypes, -} from 'react'; -import { - Animated, - Platform, - View, - StyleSheet, -} from 'react-native'; +import React, { Component, PropTypes } from 'react'; +import { Animated, Platform, View, StyleSheet } from 'react-native'; import color from 'color'; import Icon from './Icon'; import TouchableRipple from './TouchableRipple'; @@ -19,22 +11,22 @@ import type { Theme } from '../types/Theme'; const AnimatedIcon = Animated.createAnimatedComponent(Icon); type Props = { - checked: boolean; - disabled?: boolean; - onPress?: Function; - color?: string; - theme: Theme; -} + checked: boolean, + disabled?: boolean, + onPress?: Function, + color?: string, + theme: Theme, +}; type State = { - scaleAnim: Animated.Value; - checkAnim: Animated.Value; -} + scaleAnim: Animated.Value, + checkAnim: Animated.Value, +}; /** * Checkboxes allow the selection of multiple options from a set */ -class Checkbox extends Component { +class Checkbox extends Component { static propTypes = { /** * Whether checkbox is checked @@ -88,12 +80,7 @@ class Checkbox extends Component { } render() { - const { - checked, - disabled, - onPress, - theme, - } = this.props; + const { checked, disabled, onPress, theme } = this.props; const checkedColor = this.props.color || theme.colors.accent; const uncheckedColor = 'rgba(0, 0, 0, .54)'; @@ -109,8 +96,8 @@ class Checkbox extends Component { } const borderWidth = this.state.scaleAnim.interpolate({ - inputRange: [ 0.8, 1 ], - outputRange: [ 7, 0 ], + inputRange: [0.8, 1], + outputRange: [7, 0], }); return ( @@ -121,14 +108,14 @@ class Checkbox extends Component { onPress={disabled ? undefined : onPress} style={styles.container} > - + - + { const { inset, style } = props; return ( - + ); }; diff --git a/src/components/Drawer/Drawer.js b/src/components/Drawer/Drawer.js index d56014d..6f01e24 100644 --- a/src/components/Drawer/Drawer.js +++ b/src/components/Drawer/Drawer.js @@ -1,34 +1,31 @@ /* @flow */ import RNDrawer from 'react-native-drawer'; -import React, { - Component, - PropTypes, -} from 'react'; +import React, { Component, PropTypes } from 'react'; import { View, StyleSheet } from 'react-native'; import DrawerItem from './DrawerItem'; import DrawerSection from './DrawerSection'; import { white } from '../../styles/colors'; type Props = { - children?: any; - content?: any; - locked?: boolean; - onClose?: Function; - onOpen?: Function; - open?: boolean; - swipeRatio?: number; - style?: any; - side?: string; - width?: number; -} + children?: any, + content?: any, + locked?: boolean, + onClose?: Function, + onOpen?: Function, + open?: boolean, + swipeRatio?: number, + style?: any, + side?: string, + width?: number, +}; type DefaultProps = { - locked: boolean; - open: boolean; - swipeRatio: number; - side: string; -} + locked: boolean, + open: boolean, + swipeRatio: number, + side: string, +}; class Drawer extends Component { static Item = DrawerItem; @@ -50,15 +47,15 @@ class Drawer extends Component { swipeRatio: PropTypes.number, width: PropTypes.number, style: View.propTypes.style, - side: PropTypes.oneOf([ 'left', 'right' ]), - } + side: PropTypes.oneOf(['left', 'right']), + }; static defaultProps = { side: 'left', locked: false, open: false, swipeRatio: 0.05, - } + }; _root: any; @@ -70,7 +67,7 @@ class Drawer extends Component { opacity: ratio / 2, backgroundColor: 'black', }, - }) + }); _handleClose = () => { if (this.props.onClose) { @@ -83,7 +80,7 @@ class Drawer extends Component { this._root.open(); } }); - } + }; _handleOpen = () => { if (this.props.onOpen) { @@ -96,11 +93,12 @@ class Drawer extends Component { this._root.close(); } }); - } + }; - _calculateOpenDrawerOffset = viewport => this.props.width ? - (viewport.width - this.props.width) : - (viewport.width - ((viewport.width * 80) / 100)) + _calculateOpenDrawerOffset = viewport => + this.props.width + ? viewport.width - this.props.width + : viewport.width - viewport.width * 80 / 100; render(): ?React.Element { const { @@ -121,8 +119,8 @@ class Drawer extends Component { captureGestures negotiatePan acceptPan={!locked} - type='overlay' - tweenEasing='easeInQuad' + type="overlay" + tweenEasing="easeInQuad" content={content} open={open} openDrawerOffset={this._calculateOpenDrawerOffset} @@ -131,7 +129,9 @@ class Drawer extends Component { onOpen={this._handleOpen} tweenHandler={this._tweenHandler} side={side} - styles={{ drawer: StyleSheet.flatten({ backgroundColor: white }, style) }} + styles={{ + drawer: StyleSheet.flatten({ backgroundColor: white }, style), + }} > {children} diff --git a/src/components/Drawer/DrawerItem.js b/src/components/Drawer/DrawerItem.js index a8f0971..84e30fa 100644 --- a/src/components/Drawer/DrawerItem.js +++ b/src/components/Drawer/DrawerItem.js @@ -1,9 +1,7 @@ /* @flow */ import color from 'color'; -import React, { - PropTypes, -} from 'react'; +import React, { PropTypes } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import Icon from '.././Icon'; import TouchableRipple from '../TouchableRipple'; @@ -12,29 +10,50 @@ import withTheme from '../../core/withTheme'; import type { Theme } from '../../types/Theme'; type Props = { - icon?: string; - label: string; - active?: boolean; - onPress?: Function; - theme: Theme; -} + icon?: string, + label: string, + active?: boolean, + onPress?: Function, + theme: Theme, +}; -const DrawerItem = ({ icon, label, active, onPress, theme, ...props }: Props) => { +const DrawerItem = ({ + icon, + label, + active, + onPress, + theme, + ...props +}: Props) => { const { colors } = theme; - const labelColor = active ? colors.primary : color(colors.text).alpha(0.87).rgbaString(); - const iconColor = active ? colors.primary : color(colors.text).alpha(0.54).rgbaString(); + const labelColor = active + ? colors.primary + : color(colors.text).alpha(0.87).rgbaString(); + const iconColor = active + ? colors.primary + : color(colors.text).alpha(0.54).rgbaString(); const fontFamily = theme.fonts.medium; const labelMargin = icon ? 32 : 0; return ( - - { icon && - } - {label} + + {icon && } + + {label} + ); diff --git a/src/components/Drawer/DrawerSection.js b/src/components/Drawer/DrawerSection.js index 4d84f7f..99199c8 100644 --- a/src/components/Drawer/DrawerSection.js +++ b/src/components/Drawer/DrawerSection.js @@ -8,10 +8,10 @@ import withTheme from '../../core/withTheme'; import type { Theme } from '../../types/Theme'; type Props = { - children: any; - label?: string; - theme: Theme; -} + children: any, + label?: string, + theme: Theme, +}; const DrawerSection = ({ children, label, theme, ...props }: Props) => { const { colors, fonts } = theme; @@ -20,10 +20,15 @@ const DrawerSection = ({ children, label, theme, ...props }: Props) => { return ( - { label && - - {label} - } + {label && + + + {label} + + } {children} diff --git a/src/components/Drawer/index.js b/src/components/Drawer/index.js index 84d04bd..64f2bc5 100644 --- a/src/components/Drawer/index.js +++ b/src/components/Drawer/index.js @@ -1,3 +1,3 @@ /* @flow */ -export { default as default } from './Drawer'; +export { default } from './Drawer'; diff --git a/src/components/GridView.js b/src/components/GridView.js index d1fea98..908c322 100644 --- a/src/components/GridView.js +++ b/src/components/GridView.js @@ -1,43 +1,36 @@ /* @flow */ -import React, { - PureComponent, - PropTypes, -} from 'react'; -import { - Dimensions, - ListView, - StyleSheet, - View, -} from 'react-native'; +import React, { PureComponent, PropTypes } from 'react'; +import { Dimensions, ListView, StyleSheet, View } from 'react-native'; import { grey200 } from '../styles/colors'; type Layout = { - width: number; -} + width: number, +}; type Props = { - dataSource: ListView.DataSource; - spacing: number; - getNumberOfColumns: (width: number) => number; - renderSectionHeader?: (...args: any) => any; - renderRow: (...args: any) => any; - initialLayout: Layout; - onLayout?: Function; - contentContainerStyle?: any; -} + dataSource: ListView.DataSource, + spacing: number, + getNumberOfColumns: (width: number) => number, + renderSectionHeader?: (...args: any) => any, + renderRow: (...args: any) => any, + initialLayout: Layout, + onLayout?: Function, + contentContainerStyle?: any, +}; type DefaultProps = { - initialLayout: Layout; - getNumberOfColumns: (width: number) => number; - spacing: number; -} + initialLayout: Layout, + getNumberOfColumns: (width: number) => number, + spacing: number, +}; type State = { - layout: Layout; -} + layout: Layout, +}; -export default class GridView extends PureComponent { +export default class GridView + extends PureComponent { static propTypes = { dataSource: PropTypes.instanceOf(ListView.DataSource).isRequired, spacing: PropTypes.number.isRequired, @@ -73,13 +66,15 @@ export default class GridView extends PureComponent _root: Object; _renderSectionHeader = (...args) => { - const header = this.props.renderSectionHeader ? this.props.renderSectionHeader(...args) : null; + const header = this.props.renderSectionHeader + ? this.props.renderSectionHeader(...args) + : null; if (!header) { return header; } const { width } = this.state.layout; return React.cloneElement(header, { - style: [ header.props.style, { width } ], + style: [header.props.style, { width }], }); }; @@ -87,7 +82,8 @@ export default class GridView extends PureComponent const containerWidth = this.state.layout.width; const { getNumberOfColumns, spacing } = this.props; const style = { - width: ((containerWidth - spacing) / getNumberOfColumns(containerWidth)) - spacing, + width: (containerWidth - spacing) / getNumberOfColumns(containerWidth) - + spacing, margin: spacing / 2, }; const row = this.props.renderRow(...args); @@ -95,7 +91,7 @@ export default class GridView extends PureComponent return row; } return React.cloneElement(row, { - style: [ row.props.style, style ], + style: [row.props.style, style], }); }; @@ -125,7 +121,11 @@ export default class GridView extends PureComponent onLayout={this._handleLayout} renderSectionHeader={this._renderSectionHeader} renderRow={this._renderRow} - contentContainerStyle={[ styles.grid, { padding: this.props.spacing / 2 }, this.props.contentContainerStyle ]} + contentContainerStyle={[ + styles.grid, + { padding: this.props.spacing / 2 }, + this.props.contentContainerStyle, + ]} ref={this._setRef} /> ); diff --git a/src/components/Icon.js b/src/components/Icon.js index e00e8e5..5d58be1 100644 --- a/src/components/Icon.js +++ b/src/components/Icon.js @@ -1,4 +1,3 @@ /* @flow */ export { MaterialIcons as default } from 'react-native-vector-icons'; - diff --git a/src/components/Paper.js b/src/components/Paper.js index c470611..e82d820 100644 --- a/src/components/Paper.js +++ b/src/components/Paper.js @@ -1,21 +1,15 @@ /* @flow */ -import React, { - PureComponent, - PropTypes, -} from 'react'; -import { - StyleSheet, - View, -} from 'react-native'; +import React, { PureComponent, PropTypes } from 'react'; +import { StyleSheet, View } from 'react-native'; import * as Colors from '../styles/colors'; import shadow from '../styles/shadow'; type Props = { - elevation: number; - children?: any; - style?: any; -} + elevation: number, + children?: any, + style?: any, +}; /** * Paper is a basic container that can give depth to the page @@ -34,7 +28,10 @@ export default class Paper extends PureComponent { const { children, elevation } = this.props; return ( - + {children} ); @@ -46,4 +43,3 @@ const styles = StyleSheet.create({ backgroundColor: Colors.white, }, }); - diff --git a/src/components/Portal/Portal.js b/src/components/Portal/Portal.js index af202a9..daba92a 100644 --- a/src/components/Portal/Portal.js +++ b/src/components/Portal/Portal.js @@ -1,15 +1,12 @@ /* @flow */ -import { - PureComponent, - PropTypes, -} from 'react'; +import { PureComponent, PropTypes } from 'react'; import { manager } from './PortalHost'; export type PortalProps = { - children: any; - position: number; -} + children: any, + position: number, +}; type Props = PortalProps; @@ -30,10 +27,13 @@ export default class Portal extends PureComponent { }; componentDidMount() { - if (typeof this.context[manager] !== 'object' || this.context[manager] === null) { + if ( + typeof this.context[manager] !== 'object' || + this.context[manager] === null + ) { throw new Error( - 'Couldn\'t find portal manager in the context or props. ' + - 'You need to wrap your root component in \'\'' + "Couldn't find portal manager in the context or props. " + + "You need to wrap your root component in ''", ); } this._key = this.context[manager].mount(this.props); diff --git a/src/components/Portal/PortalHost.js b/src/components/Portal/PortalHost.js index a12bf4f..c2da17e 100644 --- a/src/components/Portal/PortalHost.js +++ b/src/components/Portal/PortalHost.js @@ -1,26 +1,20 @@ /* @flow */ -import React, { - PureComponent, - PropTypes, -} from 'react'; -import { - View, - StyleSheet, -} from 'react-native'; +import React, { PureComponent, PropTypes } from 'react'; +import { View, StyleSheet } from 'react-native'; import type { PortalProps } from './Portal'; type Props = { - children?: any; - style?: any; -} + children?: any, + style?: any, +}; type State = { portals: Array<{ - key: number; - props: PortalProps; - }>; -} + key: number, + props: PortalProps, + }>, +}; export const manager = 'react-native-paper$portal-manager'; @@ -83,7 +77,7 @@ export default class Portals extends PureComponent { render() { const { portals } = this.state; return ( - + {this.props.children} {portals .reduce((acc, curr) => { @@ -92,7 +86,7 @@ export default class Portals extends PureComponent { if (group) { group = { position, - items: group.items.concat([ children ]), + items: group.items.concat([children]), }; return acc.map(g => { if (group && g.position === position) { @@ -101,16 +95,15 @@ export default class Portals extends PureComponent { return g; }); } else { - group = { position, items: [ children ] }; - return [ ...acc, group ]; + group = { position, items: [children] }; + return [...acc, group]; } }, []) .map(({ position, items }) => ( {items} - )) - } + ))} ); } diff --git a/src/components/Portal/ThemedPortal.js b/src/components/Portal/ThemedPortal.js index 152f2f2..50d95d9 100644 --- a/src/components/Portal/ThemedPortal.js +++ b/src/components/Portal/ThemedPortal.js @@ -1,24 +1,20 @@ /* @flow */ -import React, { - Component, - Children, - PropTypes, -} from 'react'; +import React, { Component, Children, PropTypes } from 'react'; import Portal from './Portal'; import ThemeProvider from '../../core/ThemeProvider'; import withTheme from '../../core/withTheme'; import type { Theme } from '../../types/Theme'; type Props = { - children?: any; - theme: Theme; -} + children?: any, + theme: Theme, +}; /** * Themed portal is a special portal which preserves the theme in the context. */ -class ThemedPortal extends Component { +class ThemedPortal extends Component { static propTypes = { children: PropTypes.element.isRequired, theme: PropTypes.object.isRequired, diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js index 9fd0d9a..687d648 100644 --- a/src/components/RadioButton.js +++ b/src/components/RadioButton.js @@ -1,39 +1,31 @@ /* @flow */ -import React, { - PropTypes, - Component, -} from 'react'; -import { - Animated, - View, - Platform, - StyleSheet, -} from 'react-native'; +import React, { PropTypes, Component } from 'react'; +import { Animated, View, Platform, StyleSheet } from 'react-native'; import color from 'color'; import TouchableRipple from './TouchableRipple'; import withTheme from '../core/withTheme'; import type { Theme } from '../types/Theme'; type Props = { - checked: boolean; - disabled?: boolean; - onPress?: Function; - color?: string; - theme: Theme; -} + checked: boolean, + disabled?: boolean, + onPress?: Function, + color?: string, + theme: Theme, +}; type State = { - borderAnim: Animated.Value; - radioAnim: Animated.Value; -} + borderAnim: Animated.Value, + radioAnim: Animated.Value, +}; const BORDER_WIDTH = 2; /** * Radio buttons allow the selection of a single option from a set */ -class RadioButton extends Component { +class RadioButton extends Component { static propTypes = { /** * Whether radio is checked @@ -80,12 +72,7 @@ class RadioButton extends Component { } render() { - const { - disabled, - onPress, - checked, - theme, - } = this.props; + const { disabled, onPress, checked, theme } = this.props; const checkedColor = this.props.color || theme.colors.accent; const uncheckedColor = 'rgba(0, 0, 0, .54)'; @@ -108,19 +95,25 @@ class RadioButton extends Component { onPress={disabled ? undefined : onPress} style={styles.container} > - - {this.props.checked ? - - - : null} + + {this.props.checked + ? + + + : null} ); diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index c56cd06..a15b151 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -1,13 +1,7 @@ /* @flow */ -import React, { - Component, - PropTypes, -} from 'react'; -import { - StyleSheet, - TextInput, -} from 'react-native'; +import React, { Component, PropTypes } from 'react'; +import { StyleSheet, TextInput } from 'react-native'; import color from 'color'; import withTheme from '../core/withTheme'; @@ -17,17 +11,16 @@ import Paper from './Paper'; import type { Theme } from '../types/Theme'; type Props = { - placeholder?: string; - value: string; - onChangeText: (query: string) => void; - theme: Theme; -} + placeholder?: string, + value: string, + onChangeText: (query: string) => void, + theme: Theme, +}; /** * SearchBar is a simple input box where users can type search queries */ class SearchBar extends Component { - static propTypes = { /** * Hint text shown when the input is empty @@ -49,20 +42,13 @@ class SearchBar extends Component { }; render() { - const { - placeholder, - value, - theme, - } = this.props; + const { placeholder, value, theme } = this.props; return ( - + { placeholder={placeholder || ''} value={value} placeholderTextColor={theme.colors.placeholder} - underlineColorAndroid='transparent' + underlineColorAndroid="transparent" onChangeText={this.props.onChangeText} - returnKeyType='search' + returnKeyType="search" /> - {value ? - - - : - null - } + {value + ? + + + : null} ); } diff --git a/src/components/TouchableRipple/TouchableRipple.android.js b/src/components/TouchableRipple/TouchableRipple.android.js index 3014efd..d075e36 100644 --- a/src/components/TouchableRipple/TouchableRipple.android.js +++ b/src/components/TouchableRipple/TouchableRipple.android.js @@ -1,33 +1,26 @@ /* @flow */ -import React, { - PureComponent, - PropTypes, -} from 'react'; -import { - TouchableNativeFeedback, - View, - Platform, -} from 'react-native'; +import React, { PureComponent, PropTypes } from 'react'; +import { TouchableNativeFeedback, View, Platform } from 'react-native'; type Props = { - borderless: boolean; - delayPressIn?: number; - onPress?: ?Function; - onPressIn?: ?Function; - onPressOut?: ?Function; - rippleColor: string; - children?: any; - style?: any; -} + borderless: boolean, + delayPressIn?: number, + onPress?: ?Function, + onPressIn?: ?Function, + onPressOut?: ?Function, + rippleColor: string, + children?: any, + style?: any, +}; type DefaultProps = { - borderless: boolean; - rippleColor: string; -} - -export default class TouchableRipple extends PureComponent { + borderless: boolean, + rippleColor: string, +}; +export default class TouchableRipple + extends PureComponent { static propTypes = { children: PropTypes.element.isRequired, borderless: PropTypes.bool, @@ -42,7 +35,7 @@ export default class TouchableRipple extends PureComponent= 21 ? - TouchableNativeFeedback.Ripple(rippleColor, borderless) : - TouchableNativeFeedback.SelectableBackground()} + background={ + Platform.Version >= 21 + ? TouchableNativeFeedback.Ripple(rippleColor, borderless) + : TouchableNativeFeedback.SelectableBackground() + } > {children} diff --git a/src/components/TouchableRipple/TouchableRipple.js b/src/components/TouchableRipple/TouchableRipple.js index 5c551e0..dd23f1a 100644 --- a/src/components/TouchableRipple/TouchableRipple.js +++ b/src/components/TouchableRipple/TouchableRipple.js @@ -1,33 +1,27 @@ /* @flow */ -import React, { - PureComponent, - PropTypes, -} from 'react'; -import { - TouchableHighlight, - View, -} from 'react-native'; +import React, { PureComponent, PropTypes } from 'react'; +import { TouchableHighlight, View } from 'react-native'; import color from 'color'; type Props = { - borderless: boolean; - delayPressIn?: number; - onPress?: ?Function; - onPressIn?: ?Function; - onPressOut?: ?Function; - rippleColor: string; - children?: any; - style?: any; -} + borderless: boolean, + delayPressIn?: number, + onPress?: ?Function, + onPressIn?: ?Function, + onPressOut?: ?Function, + rippleColor: string, + children?: any, + style?: any, +}; type DefaultProps = { - borderless: boolean; - rippleColor: string; -} - -export default class TouchableRipple extends PureComponent { + borderless: boolean, + rippleColor: string, +}; +export default class TouchableRipple + extends PureComponent { static propTypes = { borderless: PropTypes.bool, delayPressIn: PropTypes.number, @@ -42,7 +36,7 @@ export default class TouchableRipple extends PureComponent ( ); diff --git a/src/components/Typography/Headline.js b/src/components/Typography/Headline.js index 04c9842..42b0543 100644 --- a/src/components/Typography/Headline.js +++ b/src/components/Typography/Headline.js @@ -1,21 +1,19 @@ /* @flow */ import React from 'react'; -import { - StyleSheet, -} from 'react-native'; +import { StyleSheet } from 'react-native'; import StyledText from './StyledText'; type Props = { - style?: any; -} + style?: any, +}; const Headline = (props: Props) => ( ); diff --git a/src/components/Typography/Paragraph.js b/src/components/Typography/Paragraph.js index 32866c4..31f3a01 100644 --- a/src/components/Typography/Paragraph.js +++ b/src/components/Typography/Paragraph.js @@ -1,21 +1,19 @@ /* @flow */ import React from 'react'; -import { - StyleSheet, -} from 'react-native'; +import { StyleSheet } from 'react-native'; import StyledText from './StyledText'; type Props = { - style?: any; -} + style?: any, +}; const Paragraph = (props: Props) => ( ); diff --git a/src/components/Typography/StyledText.js b/src/components/Typography/StyledText.js index 298d6b6..20744eb 100644 --- a/src/components/Typography/StyledText.js +++ b/src/components/Typography/StyledText.js @@ -1,20 +1,17 @@ /* @flow */ import color from 'color'; -import React, { - PureComponent, - PropTypes, -} from 'react'; +import React, { PureComponent, PropTypes } from 'react'; import Text from './Text'; import withTheme from '../../core/withTheme'; import type { Theme } from '../../types/Theme'; type Props = { - alpha: number; - family: 'regular' | 'medium' | 'light' | 'thin'; - style?: any; - theme: Theme; -} + alpha: number, + family: 'regular' | 'medium' | 'light' | 'thin', + style?: any, + theme: Theme, +}; class StyledText extends PureComponent { static propTypes = { @@ -22,7 +19,7 @@ class StyledText extends PureComponent { family: PropTypes.string.isRequired, theme: PropTypes.object.isRequired, style: Text.propTypes.style, - } + }; render() { const { theme, alpha, family, style, ...rest } = this.props; @@ -32,7 +29,7 @@ class StyledText extends PureComponent { return ( ); } diff --git a/src/components/Typography/Subheading.js b/src/components/Typography/Subheading.js index e6e4a57..4a20c8f 100644 --- a/src/components/Typography/Subheading.js +++ b/src/components/Typography/Subheading.js @@ -1,21 +1,19 @@ /* @flow */ import React from 'react'; -import { - StyleSheet, -} from 'react-native'; +import { StyleSheet } from 'react-native'; import StyledText from './StyledText'; type Props = { - style?: any; -} + style?: any, +}; const Subheading = (props: Props) => ( ); diff --git a/src/components/Typography/Text.js b/src/components/Typography/Text.js index e14a861..1652b54 100644 --- a/src/components/Typography/Text.js +++ b/src/components/Typography/Text.js @@ -1,17 +1,14 @@ /* @flow */ -import React, { - PureComponent, - PropTypes, -} from 'react'; +import React, { PureComponent, PropTypes } from 'react'; import { Text as NativeText } from 'react-native'; import withTheme from '../../core/withTheme'; import type { Theme } from '../../types/Theme'; type Props = { - style?: any; - theme: Theme; -} + style?: any, + theme: Theme, +}; /** * Text component which follows settings from the theme @@ -31,16 +28,16 @@ class Text extends PureComponent { } render() { - const { - style, - theme, - } = this.props; + const { style, theme } = this.props; return ( (this._root = c)} - style={[ { fontFamily: theme.fonts.regular, color: theme.colors.text }, style ]} + style={[ + { fontFamily: theme.fonts.regular, color: theme.colors.text }, + style, + ]} /> ); } diff --git a/src/components/Typography/Title.js b/src/components/Typography/Title.js index 858419a..6996848 100644 --- a/src/components/Typography/Title.js +++ b/src/components/Typography/Title.js @@ -1,21 +1,19 @@ /* @flow */ import React from 'react'; -import { - StyleSheet, -} from 'react-native'; +import { StyleSheet } from 'react-native'; import StyledText from './StyledText'; type Props = { - style?: any; -} + style?: any, +}; const Title = (props: Props) => ( ); diff --git a/src/core/Provider.js b/src/core/Provider.js index ce363dc..81d4132 100644 --- a/src/core/Provider.js +++ b/src/core/Provider.js @@ -1,18 +1,14 @@ /* @flow */ -import React, { - PureComponent, - PropTypes, - Children, -} from 'react'; +import React, { PureComponent, PropTypes, Children } from 'react'; import ThemeProvider from './ThemeProvider'; import PortalHost from '../components/Portal/PortalHost'; import type { Theme } from '../types/Theme'; type Props = { - children?: any; - theme?: Theme -} + children?: any, + theme?: Theme, +}; export default class Provider extends PureComponent { static propTypes = { diff --git a/src/core/ThemeProvider.js b/src/core/ThemeProvider.js index 7a6c406..73a40ed 100644 --- a/src/core/ThemeProvider.js +++ b/src/core/ThemeProvider.js @@ -1,25 +1,22 @@ /* @flow */ -import { - PureComponent, - PropTypes, - Children, -} from 'react'; +import { PureComponent, PropTypes, Children } from 'react'; import DefaultTheme from '../styles/DefaultTheme'; import type { Theme } from '../types/Theme'; type DefaultProps = { - theme: Theme -} + theme: Theme, +}; type Props = { - children?: any; - theme?: Theme -} + children?: any, + theme?: Theme, +}; export const theme = 'react-native-paper$theme'; -export default class ThemeProvider extends PureComponent { +export default class ThemeProvider + extends PureComponent { static propTypes = { children: PropTypes.element.isRequired, theme: PropTypes.object, @@ -43,4 +40,3 @@ export default class ThemeProvider extends PureComponent(Comp: ReactClass): ReactClass { class ThemedComponent extends PureComponent { @@ -35,14 +32,17 @@ export default function withTheme(Comp: ReactClass): ReactClass { componentDidMount() { if (typeof this.state.theme !== 'object' || this.state.theme === null) { throw new Error( - 'Couldn\'t find theme in the context or props. ' + - 'You need to wrap your component in \'\' or pass a \'theme\' prop' + "Couldn't find theme in the context or props. " + + "You need to wrap your component in '' or pass a 'theme' prop", ); } } componentWillReceiveProps(nextProps, nextContext: any) { - if (nextProps.theme !== this.props.theme || nextContext[theme] !== this.context[theme]) { + if ( + nextProps.theme !== this.props.theme || + nextContext[theme] !== this.context[theme] + ) { this.setState({ theme: this._merge(nextContext[theme], nextProps.theme), }); diff --git a/src/styles/DefaultTheme.js b/src/styles/DefaultTheme.js index d977cf7..80c5201 100644 --- a/src/styles/DefaultTheme.js +++ b/src/styles/DefaultTheme.js @@ -1,12 +1,7 @@ /* @flow */ import color from 'color'; -import { - indigo500, - indigo700, - pinkA200, - black, -} from './colors'; +import { indigo500, indigo700, pinkA200, black } from './colors'; import fonts from './fonts'; export default { diff --git a/src/styles/fonts.js b/src/styles/fonts.js index ee25b64..d8eb2de 100644 --- a/src/styles/fonts.js +++ b/src/styles/fonts.js @@ -1,6 +1,4 @@ -import { - Platform, -} from 'react-native'; +import { Platform } from 'react-native'; const isIOS = Platform.OS === 'ios'; diff --git a/src/styles/shadow.js b/src/styles/shadow.js index 0ea2350..6e2d030 100644 --- a/src/styles/shadow.js +++ b/src/styles/shadow.js @@ -5,17 +5,17 @@ import * as Colors from './colors'; export default function shadow(elevation: number) { let height, radius; switch (elevation) { - case 1: - height = 0.5; - radius = 0.75; - break; - case 2: - height = 0.75; - radius = 1.5; - break; - default: - height = elevation - 1; - radius = elevation; + case 1: + height = 0.5; + radius = 0.75; + break; + case 2: + height = 0.75; + radius = 1.5; + break; + default: + height = elevation - 1; + radius = elevation; } return { shadowColor: Colors.black, diff --git a/src/types/Theme.js b/src/types/Theme.js index edbcd5e..cd0cd71 100644 --- a/src/types/Theme.js +++ b/src/types/Theme.js @@ -1,20 +1,20 @@ /* @flow */ export type Theme = { - roundness: number; + roundness: number, colors: { - primary: string; - primaryDark: string; - accent: string; - text: string; - secondaryText: string; - disabled: string; - placeholder: string; - }; + primary: string, + primaryDark: string, + accent: string, + text: string, + secondaryText: string, + disabled: string, + placeholder: string, + }, fonts: { - regular: string; - medium: string; - light: string; - thin: string; - } + regular: string, + medium: string, + light: string, + thin: string, + }, };