[WIP] add tslint type check test

CHANGELOG.en-US.md

@@ -14,6 +14,26 @@ timeline: true
 
 ---
 
+
+
+### 2.0.0
+
+`2017-xx-xx`
+
+## New Feature
+
+
+## Break Change
+
+- `pagination` 组件 `current` 属性改成从 `1` 开始索引 （[#1009](https://github.com/ant-design/ant-design-mobile/issues/1009)）
+-  `Slider` 去除默认的 margin & padding. ([5c9744a](https://github.com/ant-design/ant-design-mobile/commit/5c9744aa8025a8fdfe4ec8f5bca5e108245f7bcd))
+- `ImagePicker` ref 由 string 改成 function. ([#1487](https://github.com/ant-design/ant-design-mobile/pull/1487)
+- In order to custom style conveniently， the `style` property of `TextareaItem`、`SearchBar` and `InputItem` is passed
+  to `input`(for web) or `TextInput`(for react native) element;
+- Progress: `wrapStyle` has been replaced by `style` and  `style` has been replaced by `barStyle` property.
+- The `style` property now can custom style, eg: tintColor for switch
+- `Flex` remove redundancy api of Flex, just keep `align: enum{start, center, end}`。[#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
+
 ## 1.4.2
 
 `2017-07-12`
@@ -26,7 +46,6 @@ timeline: true
 - **Improve && Enhancement**
   - 升级 Slider 依赖的 rc-slider 版本。
   - 部分组件文档国际化完善，增加部分组件测试用例。
-
 
 ## 1.4.1
 
@@ -48,6 +67,7 @@ timeline: true
   - 去除 object-assign 依赖，改为使用 es6 展开操作符 ([67e0ee6](https://github.com/ant-design/ant-design-mobile/commit/67e0ee6a985d1e143f3dbbf63988d01a05d67b59))
   - 网站信息结构优化，并增加拷贝代码按钮 ([#1481](https://github.com/ant-design/ant-design-mobile/issues/1481))
 
+
 ## 1.4.0
 
 `2017-06-24`
@@ -241,6 +261,7 @@ timeline: true
 
 ## 1.0.7
 
+
 `2017-03-24`
 
 - **Feature**

CHANGELOG.zh-CN.md

@@ -14,6 +14,25 @@ timeline: true
 
 ---
 
+
+
+### 2.0.0
+
+`2017-xx-xx`
+
+## New Feature
+
+
+## Break Change
+
+- `pagination` 组件 `current` 属性改成从 `1` 开始索引 （[#1009](https://github.com/ant-design/ant-design-mobile/issues/1009)）
+-  `Slider` 去除默认的 margin & padding. ([5c9744a](https://github.com/ant-design/ant-design-mobile/commit/5c9744aa8025a8fdfe4ec8f5bca5e108245f7bcd))
+- `ImagePicker` ref 由 string 改成 function. ([#1487](https://github.com/ant-design/ant-design-mobile/pull/1487)
+- TextareaItem、SearchBar、InputItem 将 `style` 属性传至 input(web) / TextInput(rn) 元素，方便自定义样式;
+- Progress: `wrapStyle` 改为 `style`, 原来的 `style` 将改成 `barStyle`;
+- Switch 对 `style` 属性直接针对 switch 样式自身，方便定义样式；
+- `Flex` 清理冗余API, 只保留 `align: enum{start, center, end}`。 [#1532](https://github.com/ant-design/ant-design-mobile/issues/1532)
+
 ## 1.4.2
 
 `2017-07-12`
@@ -26,7 +45,6 @@ timeline: true
 - **Improve && Enhancement**
   - 升级 Slider 依赖的 rc-slider 版本。
   - 部分组件文档国际化完善，增加部分组件测试用例。
-
 
 ## 1.4.1
 
@@ -262,6 +280,7 @@ timeline: true
 
 ## 1.0.6
 
+
 `2017-03-17`
 
 - **Feature**

components/button/__tests__/__snapshots__/demo.test.web.js.snap

@@ -86,7 +86,7 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = `
         inline / small
       </p>
       <div
-        class="am-flexbox am-flexbox-align-middle"
+        class="am-flexbox am-flexbox-align-center"
         style="margin-bottom:0.16rem;"
       >
         <a

components/checkbox/__tests__/__snapshots__/demo.test.web.js.snap

@@ -168,7 +168,7 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"

components/flex/Flex.web.tsx

@@ -32,9 +32,9 @@ export default class Flex extends React.Component<FlexProps, any> {
       [`${prefixCls}-justify-between`]: justify === 'between',
       [`${prefixCls}-justify-around`]: justify === 'around',
 
-      [`${prefixCls}-align-top`]: align === 'top' || align === 'start',
-      [`${prefixCls}-align-middle`]: align === 'middle' || align === 'center',
-      [`${prefixCls}-align-bottom`]: align === 'bottom' || align === 'end',
+      [`${prefixCls}-align-start`]: align === 'start',
+      [`${prefixCls}-align-center`]: align === 'center',
+      [`${prefixCls}-align-end`]: align === 'end',
       [`${prefixCls}-align-baseline`]: align === 'baseline',
       [`${prefixCls}-align-stretch`]: align === 'stretch',
 

components/flex/__tests__/__snapshots__/demo.test.web.js.snap

@@ -10,7 +10,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     基本
   </div>
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"
@@ -35,7 +35,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-lg"
   />
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"
@@ -69,7 +69,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-lg"
   />
   <div
-    class="am-flexbox am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-align-center"
   >
     <div
       class="am-flexbox-item"
@@ -117,7 +117,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     wrap 换行
   </div>
   <div
-    class="am-flexbox am-flexbox-wrap am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-wrap am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -171,7 +171,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     轴对齐方式
   </div>
   <div
-    class="am-flexbox am-flexbox-justify-center am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-justify-center am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -196,7 +196,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-justify-end am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-justify-end am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -221,7 +221,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-justify-between am-flexbox-align-middle"
+    class="am-flexbox am-flexbox-justify-between am-flexbox-align-center"
   >
     <div
       class="inline"
@@ -246,7 +246,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-align-top"
+    class="am-flexbox am-flexbox-align-start"
   >
     <div
       class="inline"
@@ -271,7 +271,7 @@ exports[`renders ./components/flex/demo/basic.md correctly 1`] = `
     class="am-whitespace am-whitespace-md"
   />
   <div
-    class="am-flexbox am-flexbox-align-bottom"
+    class="am-flexbox am-flexbox-align-end"
   >
     <div
       class="inline"

components/flex/style/index.less

@@ -57,15 +57,15 @@
     justify-content: space-around;
   }
 
-  &&-align-top {
+  &&-align-start {
     align-items: flex-start;
   }
 
-  &&-align-bottom {
+  &&-align-end {
     align-items: flex-end;
   }
 
-  &&-align-middle {
+  &&-align-center {
     align-items: center;
   }
 

components/image-picker/__tests__/__snapshots__/demo.test.web.js.snap

@@ -13,7 +13,7 @@ exports[`renders ./components/image-picker/demo/basic.md correctly 1`] = `
         class="am-wingblank am-wingblank-md"
       >
         <div
-          class="am-flexbox am-flexbox-align-middle"
+          class="am-flexbox am-flexbox-align-center"
         >
           <div
             class="am-flexbox-item"
@@ -90,7 +90,7 @@ exports[`renders ./components/image-picker/demo/custom.md correctly 1`] = `
         class="am-wingblank am-wingblank-md"
       >
         <div
-          class="am-flexbox am-flexbox-align-middle"
+          class="am-flexbox am-flexbox-align-center"
         >
           <div
             class="am-flexbox-item"

components/image-picker/index.web.tsx

@@ -20,6 +20,8 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
     selectable: true,
   };
 
+  fileSelectorInput: any;
+
   // http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
   getOrientation = (file, callback) => {
     const reader = new FileReader();
@@ -103,8 +105,8 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
   }
 
   onFileChange = () => {
-    const fileSelectorEl = (this.refs as any).fileSelectorInput;
-    if (fileSelectorEl.files && fileSelectorEl.files.length) {
+    const fileSelectorEl = this.fileSelectorInput;
+    if (fileSelectorEl && fileSelectorEl.files && fileSelectorEl.files.length) {
       const file = fileSelectorEl.files[0];
       const reader = new FileReader();
       reader.onload = (e) => {
@@ -179,7 +181,7 @@ export default class ImagePicker extends React.Component<ImagePickerPropTypes, a
             aria-label="Choose and add image"
           >
             <input
-              ref="fileSelectorInput"
+              ref={(input) => { this.fileSelectorInput = input; }}
               type="file"
               accept="image/jpg,image/jpeg,image/png,image/gif"
               onChange={() => { this.onFileChange(); }}

components/input-item/CustomInput.web.tsx

@@ -106,7 +106,7 @@ class NumberInput extends React.Component<any, any> {
   }
 
   render() {
-    const { placeholder, value, keyboardPrefixCls, disabled, editable, confirmLabel } = this.props;
+    const { placeholder, value, keyboardPrefixCls, disabled, editable, confirmLabel, style } = this.props;
     const { focused } = this.state;
     const preventKeyboard = disabled || !editable;
     const fakeInputCls = classNames({
@@ -119,6 +119,7 @@ class NumberInput extends React.Component<any, any> {
       <div
         className={fakeInputCls}
         ref="input-container"
+        style={style}
         onClick={preventKeyboard ? () => {} : this.onFakeInputClick}
       >
         {value}

components/input-item/index.web.tsx

@@ -234,7 +234,7 @@ class InputItem extends React.Component<InputItemProps, any> {
     }
 
     return (
-      <div className={wrapCls} style={style}>
+      <div className={wrapCls}>
         {children ? (<div className={labelCls}>{children}</div>) : null}
         <div className={controlCls}>
           {type === 'money' ? (
@@ -251,6 +251,7 @@ class InputItem extends React.Component<InputItemProps, any> {
               {...(this.props.focused !== undefined ? { focused: this.props.focused } : {})}
               {...(this.props.autoFocus !== undefined ? { autoFocus: this.props.autoFocus } : {})}
               prefixCls={prefixCls}
+              style={style}
               confirmLabel={confirmLabel}
             />
           ) : (
@@ -259,6 +260,7 @@ class InputItem extends React.Component<InputItemProps, any> {
               {...otherProps}
               {...valueProps}
               {...classNameProps}
+              style={style}
               type={inputType}
               maxLength={maxLength}
               name={name}

components/list/ListItem.tsx

@@ -1,11 +1,11 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
 import { Image, View, TouchableHighlight, Text } from 'react-native';
-import { ListItemProps, BriefProps } from './PropsType';
+import { ListItemNativeProps, BriefNativeProps } from './PropsType';
 import listItemStyles from './style/index';
 import listStyles from './style/index';
 
-export class Brief extends React.Component<BriefProps, any> {
+export class Brief extends React.Component<BriefNativeProps, any> {
   render() {
     const { children, style, styles = listStyles, wrap } = this.props;
 
@@ -24,8 +24,8 @@ export class Brief extends React.Component<BriefProps, any> {
   }
 }
 
-export default class Item extends React.Component<ListItemProps, any> {
-  static defaultProps: Partial<ListItemProps> = {
+export default class Item extends React.Component<ListItemNativeProps, any> {
+  static defaultProps: Partial<ListItemNativeProps> = {
     multipleLine: false,
     wrap: false,
     styles: listItemStyles,

components/list/ListItem.web.tsx

@@ -2,24 +2,24 @@
 import React from 'react';
 import classNames from 'classnames';
 import Touchable from 'rc-touchable';
-import { ListItemProps, BriefProps } from './PropsType';
+import { ListItemWebProps, BriefWebProps } from './PropsType';
 import omit from 'omit.js';
 
-export class Brief extends React.Component<BriefProps, any> {
+export class Brief extends React.Component<BriefWebProps, any> {
   render() {
     return (
       <div className="am-list-brief" style={this.props.style}>{this.props.children}</div>
     );
   }
 }
 
-class ListItem extends React.Component<ListItemProps, any> {
-  static defaultProps: Partial<ListItemProps> = {
+class ListItem extends React.Component<ListItemWebProps, any> {
+  static defaultProps: Partial<ListItemWebProps> = {
     prefixCls: 'am-list',
     align: 'middle',
     error: false,
     multipleLine: false,
-    wrap: false,
+    // wrap: false,
     platform: 'cross',
   };