Merge pull request #128 from ant-design/update-react

update react and lint
ant-design · Oct 18, 2017 · 1f14616 · 1f14616
2 parents cd20bd3 + d5b1bcf
commit 1f14616
Show file tree

Hide file tree

Showing 75 changed files with 1,116 additions and 854 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -3,7 +3,6 @@
   "parser": "babel-eslint",
   "rules": {
     "import/no-unresolved": 0,
-    "jsx-a11y/img-has-alt": 0,
     "no-mixed-operators": 0,
     "react/prefer-stateless-function": 0,
     "jsx-a11y/no-static-element-interactions": 0,
@@ -17,7 +16,18 @@
     "no-useless-escape": 0,
     "import/no-webpack-loader-syntax": 0,
     "comma-dangle": ["error", "always-multiline"],
-    "react/no-unescaped-entities": 0
+    "react/no-unescaped-entities": 0,
+    "jsx-a11y/alt-text": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "react/no-array-index-key": 0,
+    "prefer-destructuring": 0,
+    "react/jsx-closing-tag-location": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "react/require-default-props": 0,
+    "jsx-a11y/iframe-has-title": 0,
+    "jsx-a11y/media-has-caption": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
+    "no-restricted-globals": 0
     // "no-unused-expressions": 0
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@ dist
 psd
 old
 _site
+.vscode
diff --git a/components/banner-anim/index.md b/components/banner-anim/index.md
@@ -69,17 +69,17 @@ ReactDOM.render(<BannerAnim>
 
 ### BannerAnim
 
-> ref 来控制跳转: `<BannerAnim ref="banner"/>`
+> ref 来控制跳转: `<BannerAnim ref={(c) => { this.banner = ReactDOM.findDOMNode(c); }}/>`
 
-> 上一个: this.refs.banner.prev();
+> 上一个: this.banner.prev();
 
-> 下一个: this.refs.banner.next();
+> 下一个: this.banner.next();
 
-> 跳转:  this.refs.banner.slickGoTo(number); number 从 0 开始;
+> 跳转:  this.banner.slickGoTo(number); number 从 0 开始;
 
 |参数        |类型             |默认     |详细             |
 |----------|-----------------|--------------|-----------------------|
-|   type   |  string / array | All animType | 提供: `across`, `vertical`, `acrossOverlay`, `verticalOverlay`, `gridBar`, `grid`; `grid` 和 `gridBar` 单个块状动画时间是 `duration`; 可自行添加动画效果，如 `const animType = BannerAnim.animType; animType.xxx=function(elem, type, direction, animData, elemOffset){return react.Component}` elem: react.Component 当前进出场的元素, type: `enter` 或 `leave`, direction: `next` 或 `prev`, animData: 回调之类的，带上就行了, elemOffset: 当前元素是宽高  |
+|   type   |  string / array | All animType | 提供: `across`, `vertical`, `acrossOverlay`, `verticalOverlay`, `gridBar`, `grid`; <br/>`grid` 和 `gridBar` 单个块状动画时间是 `duration`; <br/>自定义动画效果，[详细参考](http://react-component.github.io/banner-anim/examples/customAnimType.html) |
 | duration |      number     |      450     | 动画过场时间  |
 | delay    |      number     |       0      |   过场的延时  |
 | ease     |      string     | `easeInOutQuad` | 缓动            |
@@ -102,7 +102,7 @@ ReactDOM.render(<BannerAnim>
 |参数        |类型             |默认     |详细             |
 |----------|-----------------|--------------|-----------------------|
 | key      |     string      |      -       |  必须                 |
-| hideProps | object / boolean |  false   | 子级出场时切换的参数，同 [scrollAnim](/api/scroll-anim) 里的 hideProps， false 为出场不做出场效果。 | 
+| leaveChildHide | boolean |  false   | 子级出场时是否需要切换的动画，替换原来的 `hideProps`。 | 
 | sync      |   boolean      |   false       | 子级动画进入与滑动动画是否同步。默认 false 为滑动完成后再做子级动画 |  
 | prefixCls |     string      |   -           |  自定义样式 |
 | followParallax | object   |  null        | 跟随鼠标上下或左右晃动效果 |
@@ -112,9 +112,9 @@ ReactDOM.render(<BannerAnim>
 |参数        |类型             |默认     |详细             |
 |----------|-----------------|--------------|-----------------------|
 | delay    |   number        |  null        | 必须，在单个区块进入后延迟开启鼠标效果，比如子级是 tween-one 时，需要等 tween-one 的动画结束后再执行鼠标效果，不然两者会冲突 |
-| data     | array           |  null        | 数组里的内容: { id: string, value: number, type: array or string, bgPosition: string }; id: 子级的 id; value: 晃动时的值，如果值为 20, 那左右晃动的值为：最左边 -20, 最右边 20; type: style 里的样式 或 `x` `y`; bgPosition: 初始背景图片的坐标，只在 type 为 backgroundPosition 时生效，默认为 50%, 详细查看 鼠标跟随例子 |
+| data     | array           |  null        | 数组里的内容: { id: string, value: number, type: array or string, bgPosition: string }; id: 子级的 id; value: 晃动时的值，如果值为 20, 那左右晃动的值为：最左边 -20, 最右边 20; type: style 里的样式 或 `x` `y`; bgPosition: 初始背景图片的坐标，只在 type 为 backgroundPosition 时生效，默认为 50%, 详细查看 [鼠标跟随例子](http://react-component.github.io/banner-anim/examples/followMouse.html) |
 | ease | string        | `easeInOutQuad`         |  鼠标移动时, 元素缓动效果。[参数名称参考](http://easings.net/zh-cn)  |
-| minMove | number     | null        | 区域为 0 - 1, easeInOutQuad(startMousePosition, minMove, 1, currentMousePosition); 在有缓动时，鼠标移动时，最小移动的值，如果为 0，鼠标移动时不会移动，移动结束后触发动画， 最大值为 1。 |
+| minMove | number     | 0.08        | 区域为 0 - 0.1, `easeInOutQuad(startMousePosition, minMove, 1, currentMousePosition)`; 在有缓动时，鼠标移动时，最小移动的值，如果为 0，鼠标移动时不会移动，移动结束后触发动画。 |
 
 ### Element.BgElement
 

diff --git a/components/scroll-anim/index.md b/components/scroll-anim/index.md
@@ -125,6 +125,7 @@ scrollScreen.unMount();
 | animation | object / array | null | 组件动画数据 |
 | location | string | null | 定位到父级元素，以父级元素的位置为准，元素的 id 值， 必需是唯一的 |
 | always | boolean | true | 同上，重复播放 |
+| targetId | string | null | 参考 `Element` 的 `targetId` |
 | component | string | div | 同上 |
 
 #### animation 为 object 时
@@ -150,6 +151,7 @@ scrollScreen.unMount();
 | showHeightActive | sting / number / array | `50%` | 滚动到距顶部还有`50%`的时, `link` 标签被选中同时附于 `active` 值; <br/> 在出场时是还有 `50%` 时 `link` 标签移除 `active` 值; 如果为Array时，第一个为进场，第二个为出场 |
 | toShowHeight | boolean | false | 点击时是否滚动到 `showHeightActive` 的值上 |
 | offsetTop    | number  | 0     | 到达元素距顶部位置 |
+| targetId | string | null | 参考 `Element` 的 `targetId` |
 | onFocus | function | - | 选中时的回调, 返回参数 { target, to } |
 | onBlur | function | - |失去焦点时回调, 返回参数 { target, to } |
 | onAsynchronousAddEvent | func | -  | 异步添加 `scroll` 事件接口, callback(func); [详细参考](http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html)

diff --git a/components/tween-one/demo/bezier.md b/components/tween-one/demo/bezier.md
@@ -5,7 +5,7 @@ mouseEnter: true
 vertical: true
 ---
 
-贝赛尔曲线动画。功能重复，即将去除，请使用 PathPlugin;
+贝赛尔曲线动画。 gsap 的 BezierPlugin 曲线动画;
 
 
 ```jsx

diff --git a/exhibition/demo/detail-switch.md b/exhibition/demo/detail-switch.md
@@ -120,8 +120,8 @@ class DetailSwitchDemo extends React.Component {
   };
 
   render() {
-    const imgChildren = dataArray.map((item, i) =>
-      <Element key={i} style={{ background: item.color }} hideProps>
+    const imgChildren = dataArray.map((item, i) => (
+      <Element key={i} style={{ background: item.color }} leaveChildHide>
         <QueueAnim
           animConfig={this.state.imgAnim}
           duration={this.getDuration}
@@ -136,7 +136,7 @@ class DetailSwitchDemo extends React.Component {
             <img src={item.pic} width="100%" />
           </div>
         </QueueAnim>
-      </Element>);
+      </Element>));
     const textChildren = dataArray.map((item, i) => {
       const { title, content, background } = item;
       return (<Element key={i}>

diff --git a/exhibition/demo/list-anim.md b/exhibition/demo/list-anim.md
@@ -40,17 +40,17 @@ class ListDemo extends React.Component {
         },
         {
           img: 'https://zos.alipayobjects.com/rmsportal/EMQSSlFQtGYEnWx.png',
-          text: 'Senior Animator',
+          text: 'Senior Product Designer',
           key: 1,
         },
         {
           img: 'https://zos.alipayobjects.com/rmsportal/OCuGZXfRioLyhKF.png',
-          text: 'Visual Designer',
+          text: 'Senior Product Designer',
           key: 2,
         },
         {
           img: 'https://zos.alipayobjects.com/rmsportal/agzYYwzggpOjqge.png',
-          text: 'Computer Engineer',
+          text: 'Senior Product Designer',
           key: 3,
         },
       ],
@@ -116,6 +116,7 @@ class ListDemo extends React.Component {
     } else {
       animation[this.index] = { x: 0, ease: 'easeOutBack' };
     }
+
     delete this.mouseXY;
     delete this.position[this.index];
     this.index = null;
@@ -146,7 +147,7 @@ class ListDemo extends React.Component {
         onTouchMove={this.onTouchMove}
       >
         <div className={`${this.props.className}-delete`}>
-          <a onClick={e => this.onDelete(e)}>删除</a>
+          <a onClick={(e) => { this.onDelete(e); }}>删除</a>
         </div>
         <TweenOne
           className={`${this.props.className}-content`}

diff --git a/exhibition/demo/list-sort.md b/exhibition/demo/list-sort.md
@@ -53,7 +53,9 @@ class ListSortDemo extends React.Component {
 
   render() {
     const childrenToRender = dataArray.map((item, i) => {
-      const { icon, color, title, text } = item;
+      const {
+        icon, color, title, text,
+      } = item;
       return (
         <div key={i} className={`${this.props.className}-list`}>
           <div className={`${this.props.className}-icon`}>
@@ -66,16 +68,18 @@ class ListSortDemo extends React.Component {
         </div>
       );
     });
-    return (<div className={`${this.props.className}-wrapper`}>
-      <div className={this.props.className}>
-        <ListSort
-          dragClassName="list-drag-selected"
-          appearAnim={{ animConfig: { marginTop: [5, 30], opacity: [1, 0] } }}
-        >
-          {childrenToRender}
-        </ListSort>
+    return (
+      <div className={`${this.props.className}-wrapper`}>
+        <div className={this.props.className}>
+          <ListSort
+            dragClassName="list-drag-selected"
+            appearAnim={{ animConfig: { marginTop: [5, 30], opacity: [1, 0] } }}
+          >
+            {childrenToRender}
+          </ListSort>
+        </div>
       </div>
-    </div>);
+    );
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,3 +21,4 @@ dist @@
     psd
     old
     _site
+    .vscode