Switch to airbnb style guide

2026-04-28 20:25:45 +08:00 · 2016-10-13 07:58:30 +02:00
parent d84bd5fed0
commit ea58034e57
8 changed files with 63 additions and 198 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,151 +1,10 @@
 {
+  "extends": "airbnb",
  "parser": "babel-eslint",
-  "env": {
-    "browser": true,
-    "node": true,
-    "jasmine": true
-  },
  "rules": {
-/**
- * Strict mode
- */
-    // babel inserts "use strict"; for us
-    // http://eslint.org/docs/rules/strict
-    "strict": [2, "never"],
-
-/**
- * ES6
- */
-    "no-var": 2,                     // http://eslint.org/docs/rules/no-var
-
-/**
- * Variables
- */
-    "no-shadow": 2,                  // http://eslint.org/docs/rules/no-shadow
-    "no-shadow-restricted-names": 2, // http://eslint.org/docs/rules/no-shadow-restricted-names
-    "no-unused-vars": [0, {          // http://eslint.org/docs/rules/no-unused-vars
-      "vars": "local",
-      "args": "after-used"
-    }],
-    "no-use-before-define": 2,       // http://eslint.org/docs/rules/no-use-before-define
-
-/**
- * Possible errors
- */
-    "comma-dangle": [2, "always-multiline"],    // http://eslint.org/docs/rules/comma-dangle
-    "no-cond-assign": [2, "always"],  // http://eslint.org/docs/rules/no-cond-assign
-    "no-console": 1,                 // http://eslint.org/docs/rules/no-console
-    "no-debugger": 1,                // http://eslint.org/docs/rules/no-debugger
-    "no-alert": 1,                   // http://eslint.org/docs/rules/no-alert
-    "no-constant-condition": 1,      // http://eslint.org/docs/rules/no-constant-condition
-    "no-dupe-keys": 2,               // http://eslint.org/docs/rules/no-dupe-keys
-    "no-duplicate-case": 2,          // http://eslint.org/docs/rules/no-duplicate-case
-    "no-empty": 2,                   // http://eslint.org/docs/rules/no-empty
-    "no-ex-assign": 2,               // http://eslint.org/docs/rules/no-ex-assign
-    "no-extra-boolean-cast": 0,      // http://eslint.org/docs/rules/no-extra-boolean-cast
-    "no-extra-semi": 2,              // http://eslint.org/docs/rules/no-extra-semi
-    "no-func-assign": 2,             // http://eslint.org/docs/rules/no-func-assign
-    "no-inner-declarations": 2,      // http://eslint.org/docs/rules/no-inner-declarations
-    "no-invalid-regexp": 2,          // http://eslint.org/docs/rules/no-invalid-regexp
-    "no-irregular-whitespace": 2,    // http://eslint.org/docs/rules/no-irregular-whitespace
-    "no-obj-calls": 2,               // http://eslint.org/docs/rules/no-obj-calls
-    "no-reserved-keys": 0,           // http://eslint.org/docs/rules/no-reserved-keys
-    "no-sparse-arrays": 2,           // http://eslint.org/docs/rules/no-sparse-arrays
-    "no-unreachable": 2,             // http://eslint.org/docs/rules/no-unreachable
-    "use-isnan": 2,                  // http://eslint.org/docs/rules/use-isnan
-    "block-scoped-var": 2,           // http://eslint.org/docs/rules/block-scoped-var
-
-/**
- * Best practices
- */
-    "consistent-return": 2,          // http://eslint.org/docs/rules/consistent-return
-    "curly": [2, "multi-line"],      // http://eslint.org/docs/rules/curly
-    "default-case": 2,               // http://eslint.org/docs/rules/default-case
-    "dot-notation": [2, {            // http://eslint.org/docs/rules/dot-notation
-      "allowKeywords": true
-    }],
-    "eqeqeq": 2,                     // http://eslint.org/docs/rules/eqeqeq
-    "guard-for-in": 2,               // http://eslint.org/docs/rules/guard-for-in
-    "no-caller": 2,                  // http://eslint.org/docs/rules/no-caller
-    "no-else-return": 2,             // http://eslint.org/docs/rules/no-else-return
-    "no-eq-null": 2,                 // http://eslint.org/docs/rules/no-eq-null
-    "no-eval": 2,                    // http://eslint.org/docs/rules/no-eval
-    "no-extend-native": 2,           // http://eslint.org/docs/rules/no-extend-native
-    "no-extra-bind": 2,              // http://eslint.org/docs/rules/no-extra-bind
-    "no-fallthrough": 2,             // http://eslint.org/docs/rules/no-fallthrough
-    "no-floating-decimal": 2,        // http://eslint.org/docs/rules/no-floating-decimal
-    "no-implied-eval": 2,            // http://eslint.org/docs/rules/no-implied-eval
-    "no-lone-blocks": 2,             // http://eslint.org/docs/rules/no-lone-blocks
-    "no-loop-func": 2,               // http://eslint.org/docs/rules/no-loop-func
-    "no-multi-str": 2,               // http://eslint.org/docs/rules/no-multi-str
-    "no-native-reassign": 2,         // http://eslint.org/docs/rules/no-native-reassign
-    "no-new": 2,                     // http://eslint.org/docs/rules/no-new
-    "no-new-func": 2,                // http://eslint.org/docs/rules/no-new-func
-    "no-new-wrappers": 2,            // http://eslint.org/docs/rules/no-new-wrappers
-    "no-octal": 2,                   // http://eslint.org/docs/rules/no-octal
-    "no-octal-escape": 2,            // http://eslint.org/docs/rules/no-octal-escape
-    "no-param-reassign": 2,          // http://eslint.org/docs/rules/no-param-reassign
-    "no-proto": 2,                   // http://eslint.org/docs/rules/no-proto
-    "no-redeclare": 2,               // http://eslint.org/docs/rules/no-redeclare
-    "no-return-assign": 2,           // http://eslint.org/docs/rules/no-return-assign
-    "no-script-url": 2,              // http://eslint.org/docs/rules/no-script-url
-    "no-self-compare": 2,            // http://eslint.org/docs/rules/no-self-compare
-    "no-sequences": 2,               // http://eslint.org/docs/rules/no-sequences
-    "no-throw-literal": 2,           // http://eslint.org/docs/rules/no-throw-literal
-    "no-with": 2,                    // http://eslint.org/docs/rules/no-with
-    "radix": 2,                      // http://eslint.org/docs/rules/radix
-    "vars-on-top": 2,                // http://eslint.org/docs/rules/vars-on-top
-    "wrap-iife": [2, "any"],         // http://eslint.org/docs/rules/wrap-iife
-    "yoda": 2,                       // http://eslint.org/docs/rules/yoda
-
-/**
- * Style
- */
-    "indent": ["error", 2, { "SwitchCase": 1 }], // http://eslint.org/docs/rules/indent
-    "brace-style": [2,               // http://eslint.org/docs/rules/brace-style
-      "1tbs", {
-      "allowSingleLine": true
-    }],
-    "quotes": [
-      2, "single", "avoid-escape"    // http://eslint.org/docs/rules/quotes
-    ],
-    "camelcase": [2, {               // http://eslint.org/docs/rules/camelcase
-      "properties": "never"
-    }],
-    "comma-spacing": [2, {           // http://eslint.org/docs/rules/comma-spacing
-      "before": false,
-      "after": true
-    }],
-    "comma-style": [2, "last"],      // http://eslint.org/docs/rules/comma-style
-    "eol-last": 2,                   // http://eslint.org/docs/rules/eol-last
-    "func-names": 1,                 // http://eslint.org/docs/rules/func-names
-    "key-spacing": [2, {             // http://eslint.org/docs/rules/key-spacing
-        "beforeColon": false,
-        "afterColon": true
-    }],
-    "keyword-spacing": ["error", { "before": true }],       // http://eslint.org/docs/rules/keyword-spacing
-    "new-cap": [2, {                 // http://eslint.org/docs/rules/new-cap
-      "newIsCap": true
-    }],
-    "no-multiple-empty-lines": [2, { // http://eslint.org/docs/rules/no-multiple-empty-lines
-      "max": 2
-    }],
-    "no-nested-ternary": 2,          // http://eslint.org/docs/rules/no-nested-ternary
-    "no-new-object": 2,              // http://eslint.org/docs/rules/no-new-object
-    "no-spaced-func": 2,             // http://eslint.org/docs/rules/no-spaced-func
-    "no-trailing-spaces": 2,         // http://eslint.org/docs/rules/no-trailing-spaces
-    "no-extra-parens": 0,               // http://eslint.org/docs/rules/no-wrap-func
-    "no-underscore-dangle": 0,       // http://eslint.org/docs/rules/no-underscore-dangle
-    "one-var": [2, "never"],         // http://eslint.org/docs/rules/one-var
-    "padded-blocks": 0,   // http://eslint.org/docs/rules/padded-blocks
-    "semi": [2, "always"],           // http://eslint.org/docs/rules/semi
-    "semi-spacing": [2, {            // http://eslint.org/docs/rules/semi-spacing
-      "before": false,
-      "after": true
-    }],
-    "space-before-blocks": 2,        // http://eslint.org/docs/rules/space-before-blocks
-    "space-before-function-paren": [2, "never"], // http://eslint.org/docs/rules/space-before-function-paren
-    "space-infix-ops": 2,            // http://eslint.org/docs/rules/space-infix-ops
-    "spaced-comment": 2         // http://eslint.org/docs/rules/spaced-line-comment
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/no-extraneous-dependencies": [0],
+    "import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }],
+    "import/extensions": [2, { "js": "never", "json": "always" }]
  }
 }
--- a/lib/create-icon-set-from-fontello.js
+++ b/lib/create-icon-set-from-fontello.js
@@ -1,8 +1,8 @@
 import createIconSet from './create-icon-set';

 export default function createIconSetFromFontello(config, fontFamilyArg, fontFile) {
-  let glyphMap = {};
-  config.glyphs.forEach(glyph => {
+  const glyphMap = {};
+  config.glyphs.forEach((glyph) => {
    glyphMap[glyph.css] = glyph.code;
  });

@@ -11,6 +11,6 @@ export default function createIconSetFromFontello(config, fontFamilyArg, fontFil
  return createIconSet(
    glyphMap,
    fontFamily,
-    fontFile || fontFamily + '.ttf'
+    fontFile || `${fontFamily}.ttf`
  );
 }
--- a/lib/create-icon-set-from-icomoon.js
+++ b/lib/create-icon-set-from-icomoon.js
@@ -1,8 +1,8 @@
 import createIconSet from './create-icon-set';

 export default function createIconSetFromIcoMoon(config, fontFamilyArg, fontFile) {
-  let glyphMap = {};
-  config.icons.forEach(icon => {
+  const glyphMap = {};
+  config.icons.forEach((icon) => {
    glyphMap[icon.properties.name] = icon.properties.code;
  });

@@ -11,6 +11,6 @@ export default function createIconSetFromIcoMoon(config, fontFamilyArg, fontFile
  return createIconSet(
    glyphMap,
    fontFamily,
-    fontFile || fontFamily + '.ttf'
+    fontFile || `${fontFamily}.ttf`
  );
 }
--- a/lib/create-icon-set.js
+++ b/lib/create-icon-set.js
@@ -8,19 +8,18 @@ import {
  Platform,
  PixelRatio,
  processColor,
-  requireNativeComponent,
  Text,
 } from './react-native';

-const NativeIconAPI = NativeModules && (NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule);
-
-const DEFAULT_ICON_SIZE = 12;
-const DEFAULT_ICON_COLOR = 'black';
-
 import createIconButtonComponent from './icon-button';
 import createTabBarItemIOSComponent from './tab-bar-item-ios';
 import createToolbarAndroidComponent from './toolbar-android';

+const NativeIconAPI = (NativeModules.RNVectorIconsManager || NativeModules.RNVectorIconsModule);
+
+const DEFAULT_ICON_SIZE = 12;
+const DEFAULT_ICON_COLOR = 'black';
+
 export default function createIconSet(glyphMap, fontFamily, fontFile) {
  let fontReference = fontFamily;
  // Android doesn't care about actual fontFamily name, it will only look in fonts folder.
@@ -32,6 +31,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {

  class Icon extends Component {
    static propTypes = {
+      ...Text.propTypes,
      name: IconNamePropType.isRequired,
      size: PropTypes.number,
      color: PropTypes.string,
@@ -43,11 +43,16 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
    };

    setNativeProps(nativeProps) {
-      if (this._root) {
-        this._root.setNativeProps(nativeProps);
+      if (this.root) {
+        this.root.setNativeProps(nativeProps);
      }
    }

+    root = null;
+    handleRef = (ref) => {
+      this.root = ref;
+    };
+
    render() {
      const { name, size, color, style, ...props } = this.props;

@@ -64,9 +69,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
      };

      props.style = [styleDefaults, style];
-      props.ref = (component) => {
-        this._root = component;
-      };
+      props.ref = this.handleRef;

      styleDefaults.fontFamily = fontReference;

@@ -74,7 +77,7 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
    }
  }

-  let imageSourceCache = {};
+  const imageSourceCache = {};

  function getImageSource(name, size = DEFAULT_ICON_SIZE, color = DEFAULT_ICON_COLOR) {
    if (!NativeIconAPI) {
@@ -90,14 +93,17 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
    }

    const proessedColor = processColor(color);
-    const cacheKey = glyph + ':' + size + ':' + proessedColor;
+    const cacheKey = `${glyph}:${size}:${proessedColor}`;
    const scale = PixelRatio.get();

    return new Promise((resolve, reject) => {
      const cached = imageSourceCache[cacheKey];
      if (typeof cached !== 'undefined') {
-        if (!cached || cached instanceof Error ) { reject(cached); }
-        resolve({ uri: cached, scale });
+        if (!cached || cached instanceof Error) {
+          reject(cached);
+        } else {
+          resolve({ uri: cached, scale });
+        }
      } else {
        NativeIconAPI.getImageForFont(fontReference, glyph, size, proessedColor, (err, image) => {
          const error = (typeof err === 'string' ? new Error(err) : err);
@@ -113,7 +119,8 @@ export default function createIconSet(glyphMap, fontFamily, fontFile) {
  }

  Icon.Button = createIconButtonComponent(Icon);
-  Icon.TabBarItem = Icon.TabBarItemIOS = createTabBarItemIOSComponent(IconNamePropType, getImageSource);
+  Icon.TabBarItem = createTabBarItemIOSComponent(IconNamePropType, getImageSource);
+  Icon.TabBarItemIOS = Icon.TabBarItem;
  Icon.ToolbarAndroid = createToolbarAndroidComponent(IconNamePropType, getImageSource);
  Icon.getImageSource = getImageSource;

--- a/lib/icon-button.js
+++ b/lib/icon-button.js
@@ -1,4 +1,3 @@
-import isEqual from 'lodash/isEqual';
 import isString from 'lodash/isString';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
@@ -39,6 +38,7 @@ const IOS7_BLUE = '#007AFF';
 export default function createIconButtonComponent(Icon) {
  return class IconButton extends Component {
    static propTypes = {
+      ...View.propTypes,
      backgroundColor: PropTypes.string,
      borderRadius: PropTypes.number,
      color: PropTypes.string,
@@ -53,32 +53,23 @@ export default function createIconButtonComponent(Icon) {
    };

    render() {
-      let {
-        style,
-        iconStyle,
-        children,
-        ...props,
-      } = this.props;
+      const { style, iconStyle, children, ...restProps } = this.props;

-      let iconProps = pick(props, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');
-      const touchableProps = pick(props, Object.keys(TouchableHighlight.propTypes));
-      props = omit(
-        props,
+      const iconProps = pick(restProps, Object.keys(Text.propTypes), 'style', 'name', 'size', 'color');
+      const touchableProps = pick(restProps, Object.keys(TouchableHighlight.propTypes));
+      const props = omit(
+        restProps,
        Object.keys(iconProps),
        Object.keys(touchableProps),
        'iconStyle',
        'borderRadius',
        'backgroundColor'
      );
-      iconProps.style = (this.props.iconStyle ? [styles.icon, this.props.iconStyle] : styles.icon);
+      iconProps.style = (iconStyle ? [styles.icon, iconStyle] : styles.icon);

      const colorStyle = pick(this.props, 'color');
      const blockStyle = pick(this.props, 'backgroundColor', 'borderRadius');

-      if (isString(children)) {
-        children = (<Text style={[styles.text, colorStyle]}>{children}</Text>);
-      }
-
      return (
        <TouchableHighlight style={[styles.touchable, blockStyle]} {...touchableProps}>
          <View
@@ -86,7 +77,10 @@ export default function createIconButtonComponent(Icon) {
            {...props}
          >
            <Icon {...iconProps} />
-            {children}
+            {isString(children)
+              ? (<Text style={[styles.text, colorStyle]}>{children}</Text>)
+              : children
+            }
          </View>
        </TouchableHighlight>
      );
--- a/lib/tab-bar-item-ios.js
+++ b/lib/tab-bar-item-ios.js
@@ -26,12 +26,14 @@ export default function createTabBarItemIOSComponent(IconNamePropType, getImageS

    updateIconSources(props) {
      if (props.iconName) {
-        getImageSource(props.iconName, props.iconSize, props.iconColor).then(icon => this.setState({ icon }));
+        getImageSource(props.iconName, props.iconSize, props.iconColor)
+          .then(icon => this.setState({ icon }));
      }
      if (props.selectedIconName || props.selectedIconColor) {
        const selectedIconName = props.selectedIconName || props.iconName;
        const selectedIconColor = props.selectedIconColor || props.iconColor;
-        getImageSource(selectedIconName, props.iconSize, selectedIconColor).then(selectedIcon => this.setState({ selectedIcon }));
+        getImageSource(selectedIconName, props.iconSize, selectedIconColor)
+          .then(selectedIcon => this.setState({ selectedIcon }));
      }
    }

--- a/lib/toolbar-android.js
+++ b/lib/toolbar-android.js
@@ -35,18 +35,18 @@ export default function createToolbarAndroidComponent(IconNamePropType, getImage
      const size = props.iconSize;
      const color = props.iconColor || props.titleColor;
      if (props.navIconName) {
-        getImageSource(props.navIconName, size, color).then(navIcon => this.setState({ navIcon }));
+        getImageSource(props.navIconName, size, color)
+          .then(navIcon => this.setState({ navIcon }));
      }
      if (props.overflowIconName) {
-        getImageSource(props.overflowIconName, size, color).then(overflowIcon => this.setState({ overflowIcon }));
+        getImageSource(props.overflowIconName, size, color)
+          .then(overflowIcon => this.setState({ overflowIcon }));
      }

-      Promise.all((props.actions || []).map(action => {
+      Promise.all((props.actions || []).map((action) => {
        if (action.iconName) {
-          return getImageSource(action.iconName, action.iconSize || size, action.iconColor || color).then(icon => ({
-            ...action,
-            icon,
-          }));
+          return getImageSource(action.iconName, action.iconSize || size, action.iconColor || color)
+            .then(icon => ({ ...action, icon }));
        }
        return Promise.resolve(action);
      })).then(actions => this.setState({ actions }));
@@ -59,7 +59,7 @@ export default function createToolbarAndroidComponent(IconNamePropType, getImage
    componentWillReceiveProps(nextProps) {
      const keys = Object.keys(IconToolbarAndroid.propTypes);
      if (!isEqual(pick(nextProps, keys), pick(this.props, keys))) {
-        let stateToEvict = {};
+        const stateToEvict = {};
        if (!nextProps.navIconName) {
          stateToEvict.navIcon = undefined;
        }
--- a/package.json
+++ b/package.json
@@ -59,10 +59,13 @@
  },
  "devDependencies": {
    "babel": "^6.5.2",
-    "babel-eslint": "^6.0.4",
+    "babel-eslint": "^7.0.0",
+    "eslint": "^3.7.1",
+    "eslint-config-airbnb": "^12.0.0",
+    "eslint-plugin-import": "^1.16.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.4.1",
    "evil-icons": "^1.8.0",
-    "eslint": "^2.9.0",
-    "eslint-plugin-react": "^5.0.1",
    "font-awesome": "^4.6.3",
    "ionicons": "^3.0.0",
    "material-design-icons": "^2.2.0",