diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..6f371862 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +dist +docs +example diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..ee307322 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,17 @@ +{ + // babel parser to support ES features + "parser": "babel-eslint", + // based on https://github.com/feross/standard + "extends": [ "standard", "standard-react" ], + "env": { + "mocha": true + }, + "rules": { + // overrides of the standard style + "space-before-function-paren": [ 2, { "anonymous": "always", "named": "never" } ], + "wrap-iife": [ 2, "outside" ], + // overrides of the standard-react style + "react/jsx-sort-props": 2, + "react/jsx-sort-prop-types": 2 + } +} diff --git a/karma.config.js b/karma.config.js index 5f9378f8..ab6b2195 100644 --- a/karma.config.js +++ b/karma.config.js @@ -1,9 +1,7 @@ -'use strict'; - -var webpackConfig = require('./webpack-base.config.js'); +var webpackConfig = require('./webpack-base.config.js') // entry is determined by karma config 'files' array webpackConfig.devtool = 'inline-source-map' -webpackConfig.entry = {}; +webpackConfig.entry = {} module.exports = function (config) { config.set({ @@ -43,5 +41,5 @@ module.exports = function (config) { modules: false } } - }); -}; + }) +} diff --git a/package.json b/package.json index 27daaef7..92e0551d 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "build:watch": "npm run build -- --watch", "build:example": "npm run build && cd example && webpack --config ./webpack.config.js", "build:example:watch": "npm run build:example -- --watch", + "lint": "eslint .", "test": "NODE_ENV=test karma start karma.config.js", "test:watch": "npm test -- --no-single-run" }, @@ -21,9 +22,15 @@ "devDependencies": { "autoprefixer-core": "^5.2.0", "babel-core": "^5.5.6", + "babel-eslint": "^4.1.1", "babel-loader": "^5.1.4", "babel-runtime": "^5.5.6", "css-loader": "^0.15.1", + "eslint": "^1.3.1", + "eslint-config-standard": "^4.1.0", + "eslint-config-standard-react": "^1.0.4", + "eslint-plugin-react": "^3.3.1", + "eslint-plugin-standard": "^1.3.0", "extract-text-webpack-plugin": "^0.8.1", "karma": "^0.13.9", "karma-chrome-launcher": "^0.2.0", diff --git a/src/index.js b/src/index.js index 91f2e08b..052794a0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,16 @@ -import React from 'react'; +import React from 'react' // components -import Image from './modules/Image'; -import Text from './modules/Text'; -import TextInput from './modules/TextInput'; -import View from './modules/View'; +import Image from './modules/Image' +import Text from './modules/Text' +import TextInput from './modules/TextInput' +import View from './modules/View' -export default React; +export default React export { Image, Text, TextInput, View -}; +} diff --git a/src/modules/Image/ImageStylePropTypes.js b/src/modules/Image/ImageStylePropTypes.js index a2d51238..55bb645a 100644 --- a/src/modules/Image/ImageStylePropTypes.js +++ b/src/modules/Image/ImageStylePropTypes.js @@ -1,5 +1,5 @@ -import { StylePropTypes } from '../react-native-web-style'; -import { PropTypes } from 'react'; +import { StylePropTypes } from '../react-native-web-style' +import { PropTypes } from 'react' export default { ...StylePropTypes.BorderThemePropTypes, @@ -8,10 +8,10 @@ export default { boxShadow: PropTypes.string, opacity: PropTypes.number, transform: PropTypes.string -}; +} export const ImageDefaultStyles = { backgroundColor: 'lightGray', borderWidth: 0, maxWidth: '100%' -}; +} diff --git a/src/modules/Image/index.js b/src/modules/Image/index.js index 43ef6dcf..a1dd832c 100644 --- a/src/modules/Image/index.js +++ b/src/modules/Image/index.js @@ -1,7 +1,7 @@ -import { pickProps } from '../filterObjectProps'; -import { WebStyleComponent } from '../react-native-web-style'; -import ImageStylePropTypes, { ImageDefaultStyles } from './ImageStylePropTypes'; -import React, { PropTypes } from 'react'; +import { pickProps } from '../filterObjectProps' +import { WebStyleComponent } from '../react-native-web-style' +import ImageStylePropTypes, { ImageDefaultStyles } from './ImageStylePropTypes' +import React, { PropTypes } from 'react' class Image extends React.Component { static propTypes = { @@ -20,9 +20,9 @@ class Image extends React.Component { } render() { - const { className, src, style, ...other } = this.props; - const filteredStyle = pickProps(style, Object.keys(ImageStylePropTypes)); - const mergedStyle = { ...ImageDefaultStyles, ...filteredStyle }; + const { alt, className, src, style, ...other } = this.props + const filteredStyle = pickProps(style, Object.keys(ImageStylePropTypes)) + const mergedStyle = { ...ImageDefaultStyles, ...filteredStyle } return ( - ); + ) } } -export default Image; +export default Image diff --git a/src/modules/Text/TextStylePropTypes.js b/src/modules/Text/TextStylePropTypes.js index bc3407c9..c414398e 100644 --- a/src/modules/Text/TextStylePropTypes.js +++ b/src/modules/Text/TextStylePropTypes.js @@ -1,10 +1,10 @@ -import { StylePropTypes } from '../react-native-web-style'; -import { ViewStylePropTypes } from '../View/ViewStylePropTypes'; +import { StylePropTypes } from '../react-native-web-style' +import { ViewStylePropTypes } from '../View/ViewStylePropTypes' export default { ...ViewStylePropTypes, ...StylePropTypes.TypographicPropTypes -}; +} export const TextDefaultStyle = { display: 'inline' diff --git a/src/modules/Text/index.js b/src/modules/Text/index.js index 06a897e1..b648c9cf 100644 --- a/src/modules/Text/index.js +++ b/src/modules/Text/index.js @@ -1,7 +1,7 @@ -import { pickProps } from '../filterObjectProps'; -import { WebStyleComponent } from '../react-native-web-style'; -import React, { PropTypes } from 'react'; -import TextStylePropTypes, { TextDefaultStyle } from './TextStylePropTypes'; +import { pickProps } from '../filterObjectProps' +import { WebStyleComponent } from '../react-native-web-style' +import React, { PropTypes } from 'react' +import TextStylePropTypes, { TextDefaultStyle } from './TextStylePropTypes' class Text extends React.Component { static propTypes = { @@ -20,9 +20,9 @@ class Text extends React.Component { } render() { - const { className, style, ...other } = this.props; - const filteredStyle = pickProps(style, Object.keys(TextStylePropTypes)); - const mergedStyle = { ...TextDefaultStyle, ...filteredStyle }; + const { className, style, ...other } = this.props + const filteredStyle = pickProps(style, Object.keys(TextStylePropTypes)) + const mergedStyle = { ...TextDefaultStyle, ...filteredStyle } return ( - ); + ) } } -export default Text; +export default Text diff --git a/src/modules/Text/index.spec.js b/src/modules/Text/index.spec.js index aab1c9f7..54e59ca8 100644 --- a/src/modules/Text/index.spec.js +++ b/src/modules/Text/index.spec.js @@ -1,67 +1,67 @@ -import assert from 'assert'; -import React from 'react/addons'; +import assert from 'assert' +import React from 'react/addons' -import { TextDefaultStyle } from './TextStylePropTypes'; -import Text from '.'; +import { TextDefaultStyle } from './TextStylePropTypes' +import Text from '.' -const ReactTestUtils = React.addons.TestUtils; +const ReactTestUtils = React.addons.TestUtils function shallowRender(component, context = {}) { - const shallowRenderer = React.addons.TestUtils.createRenderer(); - shallowRenderer.render(component, context); - return shallowRenderer.getRenderOutput(); + const shallowRenderer = React.addons.TestUtils.createRenderer() + shallowRenderer.render(component, context) + return shallowRenderer.getRenderOutput() } suite('Text', () => { test('defaults', () => { - const result = ReactTestUtils.renderIntoDocument(); - const root = React.findDOMNode(result); + const result = ReactTestUtils.renderIntoDocument() + const root = React.findDOMNode(result) - assert.equal((root.tagName).toLowerCase(), 'span'); - }); + assert.equal((root.tagName).toLowerCase(), 'span') + }) test('prop "children"', () => { - const children = 'children'; - const result = shallowRender({children}); + const children = 'children' + const result = shallowRender({children}) - assert.equal(result.props.children, children); - }); + assert.equal(result.props.children, children) + }) test('prop "className"', () => { - const className = 'className'; - const result = shallowRender(); + const className = 'className' + const result = shallowRender() assert.ok( (result.props.className).indexOf(className) > -1, '"className" was not transferred' - ); - }); + ) + }) test('prop "component"', () => { - const type = 'a'; - const result = ReactTestUtils.renderIntoDocument(); - const root = React.findDOMNode(result); + const type = 'a' + const result = ReactTestUtils.renderIntoDocument() + const root = React.findDOMNode(result) assert.equal( (root.tagName).toLowerCase(), type, '"component" did not produce the correct DOM node type' - ); - }); + ) + }) test('prop "style"', () => { - const initial = shallowRender(); + const initial = shallowRender() assert.deepEqual( initial.props.style, TextDefaultStyle, 'default "style" is incorrect' - ); + ) - const unsupported = shallowRender(); + const unsupported = shallowRender() assert.deepEqual( unsupported.props.style.unsupported, null, 'unsupported "style" properties must not be transferred' - ); - }); -}); + ) + }) +}) diff --git a/src/modules/TextInput/TextInputStylePropTypes.js b/src/modules/TextInput/TextInputStylePropTypes.js index a1e3d878..bae73b36 100644 --- a/src/modules/TextInput/TextInputStylePropTypes.js +++ b/src/modules/TextInput/TextInputStylePropTypes.js @@ -1,14 +1,13 @@ -import { PropTypes } from 'react'; -import { StylePropTypes } from '../react-native-web-style'; -import ViewStylePropTypes from '../View/ViewStylePropTypes'; +import { StylePropTypes } from '../react-native-web-style' +import ViewStylePropTypes from '../View/ViewStylePropTypes' export default { ...ViewStylePropTypes, ...StylePropTypes.TypographicPropTypes -}; +} export const TextInputDefaultStyles = { background: 'transparent', color: 'inherit', font: 'inherit' -}; +} diff --git a/src/modules/TextInput/index.js b/src/modules/TextInput/index.js index e923be71..ed16f881 100644 --- a/src/modules/TextInput/index.js +++ b/src/modules/TextInput/index.js @@ -1,7 +1,7 @@ -import { pickProps } from '../filterObjectProps'; -import { WebStyleComponent } from '../react-native-web-style'; -import React, { PropTypes } from 'react'; -import TextInputStylePropTypes, { TextInputDefaultStyles } from './TextInputStylePropTypes'; +import { pickProps } from '../filterObjectProps' +import { WebStyleComponent } from '../react-native-web-style' +import React, { PropTypes } from 'react' +import TextInputStylePropTypes, { TextInputDefaultStyles } from './TextInputStylePropTypes' class TextInput extends React.Component { static propTypes = { @@ -10,7 +10,7 @@ class TextInput extends React.Component { multiline: PropTypes.bool, placeholder: PropTypes.string, style: PropTypes.shape(TextInputStylePropTypes) - }; + } static defaultProps = { editable: true, @@ -18,9 +18,9 @@ class TextInput extends React.Component { } render() { - const { className, editable, multiline, placeholder, style, ...other } = this.props; - const filteredStyle = pickProps(style, Object.keys(TextInputStylePropTypes)); - const mergedStyle = { ...TextInputDefaultStyles, ...filteredStyle }; + const { className, editable, multiline, placeholder, style, ...other } = this.props + const filteredStyle = pickProps(style, Object.keys(TextInputStylePropTypes)) + const mergedStyle = { ...TextInputDefaultStyles, ...filteredStyle } return ( - ); + ) } } -export default TextInput; +export default TextInput diff --git a/src/modules/View/ViewStylePropTypes.js b/src/modules/View/ViewStylePropTypes.js index 6ce2a37b..f8f5c2a4 100644 --- a/src/modules/View/ViewStylePropTypes.js +++ b/src/modules/View/ViewStylePropTypes.js @@ -1,5 +1,5 @@ -import { PropTypes } from 'react'; -import { StylePropTypes } from '../react-native-web-style'; +import { PropTypes } from 'react' +import { StylePropTypes } from '../react-native-web-style' export default { ...StylePropTypes.BackgroundPropTypes, @@ -8,7 +8,7 @@ export default { boxShadow: PropTypes.string, opacity: PropTypes.number, transform: PropTypes.string -}; +} // https://github.com/facebook/css-layout#default-values export const ViewDefaultStyle = { @@ -24,4 +24,4 @@ export const ViewDefaultStyle = { margin: 0, padding: 0, position: 'relative' -}; +} diff --git a/src/modules/View/index.js b/src/modules/View/index.js index 6b935499..0499390a 100644 --- a/src/modules/View/index.js +++ b/src/modules/View/index.js @@ -1,7 +1,7 @@ -import { pickProps } from '../filterObjectProps'; -import { WebStyleComponent } from '../react-native-web-style'; -import React, { PropTypes } from 'react'; -import ViewStylePropTypes, { ViewDefaultStyle } from './ViewStylePropTypes'; +import { pickProps } from '../filterObjectProps' +import { WebStyleComponent } from '../react-native-web-style' +import React, { PropTypes } from 'react' +import ViewStylePropTypes, { ViewDefaultStyle } from './ViewStylePropTypes' class View extends React.Component { static propTypes = { @@ -26,14 +26,14 @@ class View extends React.Component { } render() { - const { className, pointerEvents, style, ...other } = this.props; - const filteredStyle = pickProps(style, Object.keys(ViewStylePropTypes)); - const pointerEventsStyle = pointerEvents && { pointerEvents }; + const { className, pointerEvents, style, ...other } = this.props + const filteredStyle = pickProps(style, Object.keys(ViewStylePropTypes)) + const pointerEventsStyle = pointerEvents && { pointerEvents } const mergedStyle = { ...ViewDefaultStyle, ...filteredStyle, ...pointerEventsStyle - }; + } return ( - ); + ) } } -export default View; +export default View diff --git a/src/modules/View/index.spec.js b/src/modules/View/index.spec.js index d58f4aa5..f9957fd3 100644 --- a/src/modules/View/index.spec.js +++ b/src/modules/View/index.spec.js @@ -1,76 +1,76 @@ -import assert from 'assert'; -import React from 'react/addons'; +import assert from 'assert' +import React from 'react/addons' -import { ViewDefaultStyle } from './ViewStylePropTypes'; -import View from '.'; +import { ViewDefaultStyle } from './ViewStylePropTypes' +import View from '.' -const ReactTestUtils = React.addons.TestUtils; +const ReactTestUtils = React.addons.TestUtils function shallowRender(component, context = {}) { - const shallowRenderer = React.addons.TestUtils.createRenderer(); - shallowRenderer.render(component, context); - return shallowRenderer.getRenderOutput(); + const shallowRenderer = React.addons.TestUtils.createRenderer() + shallowRenderer.render(component, context) + return shallowRenderer.getRenderOutput() } suite('View', () => { test('defaults', () => { - const result = ReactTestUtils.renderIntoDocument(); - const root = React.findDOMNode(result); + const result = ReactTestUtils.renderIntoDocument() + const root = React.findDOMNode(result) - assert.equal((root.tagName).toLowerCase(), 'div'); - }); + assert.equal((root.tagName).toLowerCase(), 'div') + }) test('prop "children"', () => { - const children = 'children'; - const result = shallowRender({children}); + const children = 'children' + const result = shallowRender({children}) - assert.equal(result.props.children, children); - }); + assert.equal(result.props.children, children) + }) test('prop "className"', () => { - const className = 'className'; - const result = shallowRender(); + const className = 'className' + const result = shallowRender() assert.ok( (result.props.className).indexOf(className) > -1, '"className" was not transferred' - ); - }); + ) + }) test('prop "component"', () => { - const type = 'a'; - const result = ReactTestUtils.renderIntoDocument(); - const root = React.findDOMNode(result); + const type = 'a' + const result = ReactTestUtils.renderIntoDocument() + const root = React.findDOMNode(result) assert.equal( (root.tagName).toLowerCase(), type, '"component" did not produce the correct DOM node type' - ); - }); + ) + }) test('prop "pointerEvents"', () => { - const result = shallowRender(); + const result = shallowRender() assert.equal( result.props.style.pointerEvents, 'box-only' - ); - }); + ) + }) test('prop "style"', () => { - const initial = shallowRender(); + const initial = shallowRender() assert.deepEqual( initial.props.style, ViewDefaultStyle, 'default "style" is incorrect' - ); + ) - const unsupported = shallowRender(); + const unsupported = shallowRender() assert.deepEqual( unsupported.props.style.unsupported, null, 'unsupported "style" properties must not be transferred' - ); - }); -}); + ) + }) +}) diff --git a/src/modules/filterObjectProps/index.js b/src/modules/filterObjectProps/index.js index f7433faa..a168c3d1 100644 --- a/src/modules/filterObjectProps/index.js +++ b/src/modules/filterObjectProps/index.js @@ -1,29 +1,29 @@ -function filterProps(obj, props, excluded=false) { +function filterProps(obj, props, excluded = false) { if (!Array.isArray(props)) { - throw new TypeError('props is not an Array'); + throw new TypeError('props is not an Array') } - let filtered = {}; - for (let prop in obj) { + const filtered = {} + for (const prop in obj) { if (Object.prototype.hasOwnProperty.call(obj, prop)) { - let isMatch = props.indexOf(prop) > -1; + const isMatch = props.indexOf(prop) > -1 if (excluded && isMatch) { - continue; + continue } else if (!excluded && !isMatch) { - continue; + continue } - filtered[prop] = obj[prop]; + filtered[prop] = obj[prop] } } - return filtered; + return filtered } export function pickProps(obj, props) { - return filterProps(obj, props); + return filterProps(obj, props) } export function omitProps(obj, props) { - return filterProps(obj, props, true); + return filterProps(obj, props, true) } diff --git a/src/modules/filterObjectProps/index.spec.js b/src/modules/filterObjectProps/index.spec.js index eb6ef068..b6948c8d 100644 --- a/src/modules/filterObjectProps/index.spec.js +++ b/src/modules/filterObjectProps/index.spec.js @@ -1,41 +1,40 @@ -import { omitProps, pickProps } from '.'; -import assert from 'assert'; -import React from 'react/addons'; +import { omitProps, pickProps } from '.' +import assert from 'assert' suite('pickProps', () => { test('interface', () => { assert.throws( - () => { pickProps({}, true); }, + () => { pickProps({}, true) }, TypeError, 'pickProps should throw if the second argument is not an array' - ); - }); + ) + }) test('return value', () => { - const obj = { a: 1, b: 2, c: { cc: { ccc: 3 } } }; - const props = [ 'a', 'b' ]; - const expected = { a: 1, b: 2 }; - const actual = pickProps(obj, props); + const obj = { a: 1, b: 2, c: { cc: { ccc: 3 } } } + const props = [ 'a', 'b' ] + const expected = { a: 1, b: 2 } + const actual = pickProps(obj, props) - assert.deepEqual(actual, expected); - }); -}); + assert.deepEqual(actual, expected) + }) +}) suite('omitProps', () => { test('interface', () => { assert.throws( - () => { omitProps({}, true); }, + () => { omitProps({}, true) }, TypeError, 'omitProps should throw if the second argument is not an array' - ); - }); + ) + }) test('return value', () => { - const obj = { a: 1, b: 2, c: { cc: { ccc: 3 } } }; - const props = [ 'a', 'b' ]; - const expected = { c: { cc: { ccc: 3 } } }; - const actual = omitProps(obj, props); + const obj = { a: 1, b: 2, c: { cc: { ccc: 3 } } } + const props = [ 'a', 'b' ] + const expected = { c: { cc: { ccc: 3 } } } + const actual = omitProps(obj, props) - assert.deepEqual(actual, expected); - }); -}); + assert.deepEqual(actual, expected) + }) +}) diff --git a/src/modules/react-native-web-style/index.js b/src/modules/react-native-web-style/index.js index 9191ab54..a2d33abc 100644 --- a/src/modules/react-native-web-style/index.js +++ b/src/modules/react-native-web-style/index.js @@ -1,6 +1,6 @@ -import React, { PropTypes } from 'react'; -import restyle from './modules/restyle'; -import StylePropTypes from './modules/StylePropTypes'; +import React, { PropTypes } from 'react' +import restyle from './modules/restyle' +import StylePropTypes from './modules/StylePropTypes' class WebStyleComponent extends React.Component { static propTypes = { @@ -18,15 +18,15 @@ class WebStyleComponent extends React.Component { } render() { - const { component: Component, ...other } = this.props; + const { component: Component, ...other } = this.props return ( - ); + ) } } -export { StylePropTypes, restyle, WebStyleComponent }; +export { StylePropTypes, restyle, WebStyleComponent } diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Background.js b/src/modules/react-native-web-style/modules/StylePropTypes/Background.js index 247396c2..3464c0a3 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Background.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/Background.js @@ -1,4 +1,4 @@ -import { PropTypes } from 'react'; +import { PropTypes } from 'react' export default { backgroundColor: PropTypes.string, @@ -6,4 +6,4 @@ export default { backgroundPosition: PropTypes.string, backgroundRepeat: PropTypes.string, backgroundSize: PropTypes.string -}; +} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js b/src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js index 216c5a53..0883c55d 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/BorderTheme.js @@ -1,9 +1,9 @@ -import { PropTypes } from 'react'; +import { PropTypes } from 'react' const numberOrString = PropTypes.oneOfType([ PropTypes.number, - PropTypes.string, -]); + PropTypes.string +]) export default { // border-color @@ -20,4 +20,4 @@ export default { borderTopRightRadius: numberOrString, borderBottomLeftRadius: numberOrString, borderBottomRightRadius: numberOrString -}; +} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js b/src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js index ae77a339..453d13f3 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/BoxModel.js @@ -1,9 +1,9 @@ -import {PropTypes} from 'react'; +import {PropTypes} from 'react' const numberOrString = PropTypes.oneOfType([ PropTypes.number, - PropTypes.string, -]); + PropTypes.string +]) export default { boxSizing: PropTypes.oneOf([ @@ -39,4 +39,4 @@ export default { paddingBottom: numberOrString, paddingLeft: numberOrString, paddingRight: numberOrString -}; +} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js b/src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js index 33ab2a06..07df5bce 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/Flexbox.js @@ -1,4 +1,4 @@ -import { PropTypes } from 'react'; +import { PropTypes } from 'react' export default { alignContent: PropTypes.oneOf([ @@ -46,4 +46,4 @@ export default { 'space-between' ]), order: PropTypes.number -}; +} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Layout.js b/src/modules/react-native-web-style/modules/StylePropTypes/Layout.js index b2aebf7e..398cc833 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Layout.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/Layout.js @@ -1,9 +1,9 @@ -import BoxModel from './BoxModel'; -import Flexbox from './Flexbox'; -import Position from './Position'; +import BoxModel from './BoxModel' +import Flexbox from './Flexbox' +import Position from './Position' export default { ...BoxModel, ...Flexbox, ...Position -}; +} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Position.js b/src/modules/react-native-web-style/modules/StylePropTypes/Position.js index e6223853..24759b79 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Position.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/Position.js @@ -1,19 +1,19 @@ -import { PropTypes } from 'react'; +import { PropTypes } from 'react' const numberOrString = PropTypes.oneOfType([ PropTypes.number, - PropTypes.string, -]); + PropTypes.string +]) export default { position: PropTypes.oneOf([ 'absolute', 'fixed', - 'relative' /*default*/ + 'relative' /* default */ ]), bottom: numberOrString, left: numberOrString, right: numberOrString, top: numberOrString, zIndex: PropTypes.number -}; +} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js b/src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js index ed550eec..8b571237 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/Typographic.js @@ -1,19 +1,19 @@ -import { PropTypes } from 'react'; +import { PropTypes } from 'react' export default { color: PropTypes.string, direction: PropTypes.oneOf([ - 'auto' /*default*/, 'ltr', 'rtl' + 'auto', 'ltr', 'rtl' ]), font: PropTypes.string, fontFamily: PropTypes.string, fontSize: PropTypes.string, fontStyle: PropTypes.oneOf([ - 'inherit' /*default*/, 'normal', 'italic' + 'inherit', 'normal', 'italic' ]), fontWeight: PropTypes.oneOf([ - 'inherit' /*default*/, 'bold', 'normal', - '100', '200', '300', '400', '500', '600', '700', '800', '900' + 'inherit', 'bold', 'normal', + '100', '200', '300', '400', '500', '600', '700', '800', '900' ]), letterSpacing: PropTypes.string, lineHeight: PropTypes.oneOfType([ @@ -21,15 +21,15 @@ export default { PropTypes.string ]), textAlign: PropTypes.oneOf([ - 'auto' /*default*/, 'center', 'justify', 'left', 'right' + 'auto', 'center', 'justify', 'left', 'right' ]), textDecoration: PropTypes.oneOf([ - 'none' /*default*/, 'line-through', 'underline', 'underline line-through' + 'none', 'line-through', 'underline', 'underline line-through' ]), textTransform: PropTypes.oneOf([ - 'none' /*default*/, 'capitalize', 'lowercase', 'uppercase' + 'none', 'capitalize', 'lowercase', 'uppercase' ]), wordWrap: PropTypes.oneOf([ 'break-word', 'normal' ]) -}; +} diff --git a/src/modules/react-native-web-style/modules/StylePropTypes/index.js b/src/modules/react-native-web-style/modules/StylePropTypes/index.js index accdfa81..bd16db8e 100644 --- a/src/modules/react-native-web-style/modules/StylePropTypes/index.js +++ b/src/modules/react-native-web-style/modules/StylePropTypes/index.js @@ -1,8 +1,8 @@ -import BackgroundPropTypes from './Background'; -import BorderThemePropTypes from './BorderTheme'; -import FlexboxPropTypes from './Flexbox'; -import LayoutPropTypes from './Layout'; -import TypographicPropTypes from './Typographic'; +import BackgroundPropTypes from './Background' +import BorderThemePropTypes from './BorderTheme' +import FlexboxPropTypes from './Flexbox' +import LayoutPropTypes from './Layout' +import TypographicPropTypes from './Typographic' export default { BackgroundPropTypes, @@ -10,4 +10,4 @@ export default { FlexboxPropTypes, LayoutPropTypes, TypographicPropTypes -}; +} diff --git a/src/modules/react-native-web-style/modules/autoprefix.js b/src/modules/react-native-web-style/modules/autoprefix.js index 930d9a7a..6216a7a3 100644 --- a/src/modules/react-native-web-style/modules/autoprefix.js +++ b/src/modules/react-native-web-style/modules/autoprefix.js @@ -4,7 +4,7 @@ export default function prefixStyles(style) { WebkitFlexBasis: style.flexBasis, msFlexBasis: style.flexBasis, ...style - }; + } } if (style.hasOwnProperty('flexGrow')) { @@ -13,7 +13,7 @@ export default function prefixStyles(style) { WebkitFlexGrow: style.flexGrow, msFlexPositive: style.flexGrow, ...style - }; + } } if (style.hasOwnProperty('flexShrink')) { @@ -21,7 +21,7 @@ export default function prefixStyles(style) { WebkitFlexShrink: style.flexShrink, msFlexNegative: style.flexShrink, ...style - }; + } } // NOTE: adding `;` to the string value prevents React from automatically @@ -30,9 +30,9 @@ export default function prefixStyles(style) { style = { WebkitBoxOrdinalGroup: `${parseInt(style.order, 10) + 1};`, WebkitOrder: `${style.order}`, - msFlexOrder: `${style.order};`, + msFlexOrder: `${style.order}`, ...style - }; + } } if (style.hasOwnProperty('transform')) { @@ -40,8 +40,8 @@ export default function prefixStyles(style) { WebkitTransform: style.transform, msTransform: style.transform, ...style - }; + } } - return style; + return style } diff --git a/src/modules/react-native-web-style/modules/restyle.js b/src/modules/react-native-web-style/modules/restyle.js index 7bcc2600..5c2e6d8a 100644 --- a/src/modules/react-native-web-style/modules/restyle.js +++ b/src/modules/react-native-web-style/modules/restyle.js @@ -1,5 +1,5 @@ -import autoprefix from './autoprefix'; -import styles from './styles.css'; +import autoprefix from './autoprefix' +import styles from './styles.css' /** * Get the HTML class that corresponds to a style declaration @@ -8,9 +8,9 @@ import styles from './styles.css'; * @return {string} class name */ function getSinglePurposeClassName(prop, style) { - const className = `${prop}-${style[prop]}`; + const className = `${prop}-${style[prop]}` if (style.hasOwnProperty(prop) && styles[className]) { - return styles[className]; + return styles[className] } } @@ -20,21 +20,21 @@ function getSinglePurposeClassName(prop, style) { * @return {Object} */ export default function stylingStrategy(props) { - let className; - let style = {}; + let className + let style = {} - const classList = [ props.className ]; - for (let prop in props.style) { - let styleClass = getSinglePurposeClassName(prop, props.style); + const classList = [ props.className ] + for (const prop in props.style) { + const styleClass = getSinglePurposeClassName(prop, props.style) if (styleClass) { - classList.push(styleClass); + classList.push(styleClass) } else { - style[prop] = props.style[prop]; + style[prop] = props.style[prop] } } - className = classList.join(' '); - style = autoprefix(style); + className = classList.join(' ') + style = autoprefix(style) - return { className: className, style }; + return { className: className, style } } diff --git a/src/specs.bundle.js b/src/specs.bundle.js index 57399cce..cbd88299 100644 --- a/src/specs.bundle.js +++ b/src/specs.bundle.js @@ -4,6 +4,6 @@ * * See: https://github.com/webpack/docs/wiki/context */ -const specContext = require.context('.', true, /.+\.spec\.jsx?$/); -specContext.keys().forEach(specContext); -module.exports = specContext; +const specContext = require.context('.', true, /.+\.spec\.jsx?$/) +specContext.keys().forEach(specContext) +module.exports = specContext diff --git a/webpack-base.config.js b/webpack-base.config.js index f855e06d..9fff4fe8 100644 --- a/webpack-base.config.js +++ b/webpack-base.config.js @@ -1,4 +1,4 @@ -var autoprefixer = require('autoprefixer-core'); +var autoprefixer = require('autoprefixer-core') module.exports = { module: { @@ -20,5 +20,4 @@ module.exports = { ] }, postcss: [ autoprefixer ] -}; - +} diff --git a/webpack.config.js b/webpack.config.js index 91460c8c..62e02339 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,7 @@ -var assign = require('object-assign'); -var base = require('./webpack-base.config.js'); -var webpack = require('webpack'); -var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; +var assign = require('object-assign') +var base = require('./webpack-base.config.js') +var webpack = require('webpack') +var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin module.exports = assign({}, base, { entry: { @@ -26,4 +26,4 @@ module.exports = assign({}, base, { } }) ] -}); +})