adopting ES6 new features, and eslint

.codeclimate.yml

@@ -0,0 +1,23 @@
+# Engine analysis on Code Climate Platform For an overview of the Code Climate Platform.
+# @see http://docs.codeclimate.com/article/300-the-codeclimate-platform
+
+# For a list of all available engines, see here:
+# http://docs.codeclimate.com/article/296-engines-available-engines
+
+engines:
+  eslint:
+    enabled: true
+
+# Engines can analyze files and report issues on them, but you can separately
+# decide which files will receive ratings based on those issues. This is
+# specified by path patterns under the ratings key.
+
+ratings:
+  paths:
+  - Source/**
+
+# You can globally exclude files from being analyzed by any engine using the
+# exclude_paths key.
+
+exclude_paths:
+- Example/**

.eslintrc

@@ -0,0 +1,21 @@
+// @see https://github.com/airbnb/javascript/blob/master/linters/.eslintrc
+{
+  "parser": "babel-eslint",          // https://github.com/babel/babel-eslint
+  "plugins": [
+    "react"                          // https://github.com/yannickcr/eslint-plugin-react
+  ],
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "jsx": true
+  },
+  "rules": {
+    "comma-dangle": [1, "always-multiline"],
+    "quotes": [1, "single", "avoid-escape"]
+  },
+  "globals": {
+  }
+}

Example/App/textfields.js

@@ -48,7 +48,7 @@ var TextFields = React.createClass({
         <View style={styles.row}>
           <View style={styles.col}>
             <Textfield/>
-            <Text style={styles.legendLabel}>Textfiled</Text>
+            <Text style={styles.legendLabel}>Textfield</Text>
           </View>
           <View style={styles.col}>
             <TextfieldWithRipple/>

Example/package.json

@@ -6,6 +6,6 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "react-native": "0.x"
+    "react-native": ">=0.6.0 <1.0.0"
   }
 }

README.md

@@ -1,11 +1,12 @@
 # [Material Design](http://www.google.com/design/spec/material-design/introduction.html) components for [React Native](https://facebook.github.io/react-native)
 
+[![npm](https://img.shields.io/npm/v/react-native-material-kit.svg)](https://www.npmjs.com/package/react-native-material-kit)
 [![react-native](https://img.shields.io/badge/react--native-v0.7.1-05A5D1.svg)](https://facebook.github.io/react-native "tested react-native version")
 [![DUB](https://img.shields.io/dub/l/vibe-d.svg)](https://raw.githubusercontent.com/xinthink/react-native-material-kit/master/LICENSE.md "MIT")
 
 This is a port of [MaterialKit](https://github.com/nghialv/MaterialKit) (written in Swift) to Objective-C, so that it can be used in [React Native](https://facebook.github.io/react-native) projects, as a static library.
 
-Thanks to the great work of [@nghialv](https://github.com/nghialv)!
+Thanks to the great work of [@nghialv](https://github.com/nghialv)! :thumbsup:
 
 
 ## Getting Started
@@ -85,14 +86,14 @@ the jsx equivalent:
 </MKButton>
 ```
 
-Please refer to [the complete example](https://github.com/xinthink/react-native-material-kit/blob/master/Example/App/buttons.js) for details.
+:point_right: [the complete example](https://github.com/xinthink/react-native-material-kit/blob/master/Example/App/buttons.js)
 
 
 ### Text Fields
 
 Built-in textfields, which comply with [Material Design Lite](http://www.getmdl.io/components/#textfields-section).
 
-![textfields-mdl](https://cloud.githubusercontent.com/assets/390805/8770805/a00a853e-2eea-11e5-9801-4fc96ddb6e62.gif)
+![textfields-mdl](https://cloud.githubusercontent.com/assets/390805/8794770/26b24724-2fb9-11e5-9af4-abead1cd456b.gif)
 
 
 ```jsx
@@ -134,8 +135,8 @@ the jsx equivalent:
   style={styles.textfield}/>
 ```
 
-Please refer to [the complete example](https://github.com/xinthink/react-native-material-kit/blob/master/Example/App/textfields.js) for details.
+:point_right: [the complete example](https://github.com/xinthink/react-native-material-kit/blob/master/Example/App/textfields.js)
 
 
 ---
-It's the very begining of the project, lots of work to be done, contributions are welcome!
+It's the very begining of the project, lots of work to be done, contributions are welcome! :beer:

Source/Lib/MKButton.js

@@ -1,18 +1,17 @@
 /**
  * Created by ywu on 15/6/3.
  */
-'use strict';
 
-var React = require('react-native');
-var {
+const React = require('react-native');
+const {
   requireNativeComponent,
   TouchableWithoutFeedback,
 } = React;
 
-var MKPropTypes = require('./MKPropTypes');
-var MKColor = require('./MKColor');
-var getTheme = require('./theme').getTheme;
-var utils = require('./utils');
+const MKPropTypes = require('./MKPropTypes');
+const MKColor = require('./MKColor');
+const getTheme = require('./theme').getTheme;
+const utils = require('./utils');
 
 
 /**
@@ -41,13 +40,13 @@ MKButton.propTypes = {
   disabled: React.PropTypes.bool,
 };
 
-var NativeButton = requireNativeComponent('MKButton', MKButton);
+const NativeButton = requireNativeComponent('MKButton', MKButton);
 
 
 // --------------------------
 // builders
 //
-var {
+const {
   TextViewBuilder,
 } = require('./builder');
 
@@ -71,29 +70,29 @@ class MKButtonBuilder extends TextViewBuilder {
     if (this.style && !utils.isNumber(this.style)
         && (this.style.width > 0 || this.style.height > 0)) {
       // cannot get style by id since 0.7, use style object or explicit corner radius
-      var size = Math.min(this.style.width || 0, this.style.height || 0);
+      const size = Math.min(this.style.width || 0, this.style.height || 0);
       this.style.width = this.style.height = size;
       this.withCornerRadius(size / 2);
     }
 
     if (this.cornerRadius <= 0) {
-      console.warn('to build FABs correctly, width/height is required in style (object style, NOT stylesheet), or specify a cornerRadius');
+      console.warn('to build FABs correctly, width/height is required in style or specify a cornerRadius');
     }
   }
 
   build() {
-    var theBuilder = this;
-    var props = this.toProps();
+    const theBuilder = this;
+    const props = this.toProps();
     //console.log(props);
 
     return React.createClass({
       render: function () {
         // use a text or a custom content
-        var ChildTag = theBuilder.text ? (
+        const ChildTag = theBuilder.text ? (
           <React.Text pointerEvents="none" style={theBuilder.textStyle || {}}>
             {theBuilder.text}
           </React.Text>
-        ): this.props.children;
+        ) : this.props.children;
 
         return (
           <MKButton {...props}>
@@ -108,23 +107,23 @@ class MKButtonBuilder extends TextViewBuilder {
 /**
  * Built-in button builders
  */
-var coloredRaisedButton = () => {
+function coloredRaisedButton() {
   return new MKButtonBuilder()
     .withShadowRadius(2)
-    .withShadowOffset({width:0, height:2})
+    .withShadowOffset({width: 0, height: 2})
     .withShadowOpacity(.7)
     .withShadowColor('black')
     .withTextStyle({
       color: 'white',
       fontWeight: 'bold',
     });
-};
+}
 
-var accentColoredRaisedButton = () => {
+function accentColoredRaisedButton() {
   return coloredRaisedButton().withAccent(true);
-};
+}
 
-var plainRaisedButton = () => {
+function plainRaisedButton() {
   // FIXME doesn't support translucent bg, has shadow problems
   return coloredRaisedButton()
     //.withBackgroundColor(getTheme().bgPlain)
@@ -135,45 +134,45 @@ var plainRaisedButton = () => {
       color: 'black',
       fontWeight: 'bold',
     });
-};
+}
 
-var flatButton = () => {
+function flatButton() {
   return new MKButtonBuilder()
     .withBackgroundColor(MKColor.Transparent)
     .withBackgroundLayerColor(getTheme().bgPlain)
     .withTextStyle({
       color: 'black',
       fontWeight: 'bold',
     });
-};
+}
 
-var coloredFlatButton = () => {
+function coloredFlatButton() {
   return flatButton()
     .withTextStyle({
       color: getTheme().primaryColor,
       fontWeight: 'bold',
     });
-};
+}
 
-var accentColoredFlatButton = () => {
+function accentColoredFlatButton() {
   return flatButton()
     .withTextStyle({
       color: getTheme().accentColor,
       fontWeight: 'bold',
     });
-};
+}
 
-var coloredFab = () => {
+function coloredFab() {
   return coloredRaisedButton()
     .withFab(true)
     .withRippleLocation('center');
-};
+}
 
-var accentColoredFab = () => {
+function accentColoredFab() {
   return coloredFab().withAccent(true);
-};
+}
 
-var plainFab = () => {
+function plainFab() {
   // FIXME doesn't support translucent bg, has shadow problems
   return coloredFab()
     .withBackgroundColor(MKColor.Silver);

Source/Lib/MKPropTypes.js

@@ -1,20 +1,20 @@
 /**
  * Created by ywu on 15/7/16.
  */
-var { PropTypes } = require('react-native');
+const { PropTypes } = require('react-native');
 
-var dimen = PropTypes.objectOf({
+const dimen = PropTypes.objectOf({
   width: PropTypes.number,
   height: PropTypes.number,
 });
 
-var aniTimingFunc = PropTypes.oneOf([
+const aniTimingFunc = PropTypes.oneOf([
   'linear',
   'easeIn',
   'easeOut',
 ]);
 
-var mkLayerPropTypes = {
+const mkLayerPropTypes = {
   // FIXME naming conflicts with built-in properties, such as shadowOffset
   // lead to runtime warning: Failed propType: typeChecker is not a function Check the render method of xxx
   shadowColor: PropTypes.string,
@@ -44,4 +44,4 @@ var mkLayerPropTypes = {
 
 exports.dimen = dimen;
 exports.aniTimingFunc = aniTimingFunc;
-exports.mkLayerPropTypes = mkLayerPropTypes;
+exports.mkLayerPropTypes = mkLayerPropTypes;

Source/Lib/MKTextField.js

@@ -2,14 +2,15 @@
  * Created by ywu on 15/7/16.
  */
 
-var React = require('react-native');
-var {
+const React = require('react-native');
+const {
   requireNativeComponent,
   PropTypes,
 } = React;
-var MKPropTypes = require('./MKPropTypes');
-var MKColor = require('./MKColor');
-var theme = require('./theme');
+
+const MKPropTypes = require('./MKPropTypes');
+const MKColor = require('./MKColor');
+
 
 class MKTextField extends React.Component {
   render() {
@@ -31,15 +32,16 @@ MKTextField.propTypes = {
   highlightColor: PropTypes.string,
   tintColor: PropTypes.string,
   textColor: PropTypes.string,
+  // TODO configurable fonts
 };
 
-var NativeTextField = requireNativeComponent('MKTextField', MKTextField);
+const NativeTextField = requireNativeComponent('MKTextField', MKTextField);
 
 
 // --------------------------
 // builders
 //
-var {
+const {
   Builder,
 } = require('./builder');
 
@@ -120,8 +122,7 @@ class MKTextFieldBuilder extends Builder {
   }
 
   build() {
-    var theBuilder = this;
-    var props = this.toProps();
+    const props = this.toProps();
     // console.log(props);
 
     return React.createClass({
@@ -137,21 +138,21 @@ class MKTextFieldBuilder extends Builder {
 /**
  * Built-in text field builders
  */
-var textfield = () => {
+function textfield() {
   return new MKTextFieldBuilder().withCornerRadius(1);
-};
+}
 
-var textfieldWithFloatingLabel = () => {
+function textfieldWithFloatingLabel() {
   return textfield().withFloatingLabelEnabled(true);
-};
+}
 
-var textfieldWithRipple = () => {
+function textfieldWithRipple() {
   return textfield().withRippleEnabled(true);
-};
+}
 
-var textfieldWithRippleAndFloatingLabel = () => {
+function textfieldWithRippleAndFloatingLabel() {
   return textfieldWithRipple().withFloatingLabelEnabled(true);
-};
+}
 
 
 module.exports = MKTextField;