chore: update motion.md && colors.md

docs/spec/colors.md

@@ -15,9 +15,9 @@
 Ant Design 的色板由 9 种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。
 
 `````__react
-let Palette = React.createClass({
+const Palette = React.createClass({
   render() {
-    let color = this.props.color;
+    const color = this.props.color;
     return <div className="color-palette">
       <div className="main-color">
         {color.colors.map(function(color) {
@@ -31,9 +31,9 @@ let Palette = React.createClass({
     </div>;
   }
 });
-let ExtendPalettes = React.createClass({
+const ExtendPalettes = React.createClass({
   render() {
-    let colors = [
+    const colors = [
       {
         'title': 'Primary Color',
         'description': '尽管同一种颜色传达的含义会因人而异，受到文化和地域的影响。但颜色还是可以提取出一些共通的特性，例如暖色系的红、橙、黄通常用于象征活力，激情，积极；而冷色系的绿、蓝、紫通常给人感觉是安全、稳定、专业。',
@@ -132,7 +132,7 @@ let ExtendPalettes = React.createClass({
     </div>;
   }
 });
-ReactDOM.render(<ExtendPalettes />, mountNode);
+ReactDOM.render(<ExtendPalettes key="palettes" />, mountNode);
 `````
 
 ## 色彩和交互
@@ -156,11 +156,13 @@ ReactDOM.render(<ExtendPalettes />, mountNode);
 > 正数为变淡 `tint` ，负数为加深 `shade`。
 
 `````__react
-let Button = antd.Button;
-let InputNumber = antd.InputNumber;
-let Slider = antd.Slider;
-let Tooltip = antd.Tooltip;
-let TintShadeTool = React.createClass({
+const Values = require('values.js');
+const CopyToClipboard = require('react-copy-to-clipboard');
+const Button = antd.Button;
+const InputNumber = antd.InputNumber;
+const Slider = antd.Slider;
+const Tooltip = antd.Tooltip;
+const TintShadeTool = React.createClass({
   getInitialState() {
     return {
       result: '#2db7f5',
@@ -190,9 +192,9 @@ let TintShadeTool = React.createClass({
       });
       return;
     }
-    let tintOrShade = this.state.value > 0 ? 'tint' : 'shade';
-    let c = new Values(this.state.color);
-    let resultColor = c[tintOrShade](Math.abs(this.state.value));
+    const tintOrShade = this.state.value > 0 ? 'tint' : 'shade';
+    const c = new Values(this.state.color);
+    const resultColor = c[tintOrShade](Math.abs(this.state.value));
     this.setState({
       result: '#' + resultColor.hex,
       darkBackground: resultColor.getBrightness() < 50
@@ -206,7 +208,7 @@ let TintShadeTool = React.createClass({
     });
   },
   render() {
-    var marks = {
+    const marks = {
       '-100': '加黑',
       '0': '原色',
       '100': '加白'
@@ -230,7 +232,7 @@ let TintShadeTool = React.createClass({
   }
 });
 
-ReactDOM.render(<TintShadeTool />, mountNode);
+ReactDOM.render(<TintShadeTool key="tintShadeTool" />, mountNode);
 `````
 
 Ant Design 专用色彩换算工具，用于解析类似 `#2db7f5 tint 80%` 的色彩标注。

docs/spec/motion.md

@@ -9,13 +9,13 @@
 Ant Design 提供了一些预设的组件动画样式。
 
 `````__react
-var cssAnimation = require('css-animation');
-var Select = antd.Select;
-var Option = Select.Option;
-var OptGroup = Select.OptGroup;
+const cssAnimation = require('css-animation');
+const Select = antd.Select;
+const Option = Select.Option;
+const OptGroup = Select.OptGroup;
 
 
-var motions = [];
+let motions = [];
 motions = motions.concat([[{
   name: '淡入',
   value: 'fade',
@@ -166,10 +166,10 @@ motions = motions.concat([[{
   direction: 'enter',
   type: '其他'
 }]]);
-var leave='-leave';
-var Test = React.createClass({
+const leave='-leave';
+const Test = React.createClass({
   handleChange(e) {
-    var value = e;
+    const value = e;
     if(value){
       this.demoNode.style.visibility='';
       cssAnimation(this.demoNode, value, () => {
@@ -185,11 +185,11 @@ var Test = React.createClass({
   },
 
   render() {
-    var options = [<Option value="">请选择预设动画</Option>].concat(motions.map(function (m) {
-      var opts = m.map(function (m2) {
-        return <Option value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</Option>
+    const options = [<Option value="" key="placeholder">请选择预设动画</Option>].concat(motions.map(function (m, groupIndex) {
+      const opts = m.map(function (m2, optIndex) {
+        return <Option key={optIndex} value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</Option>
       });
-      return <OptGroup label={m[0].type}>{opts}</OptGroup>;
+      return <OptGroup key={groupIndex} label={m[0].type}>{opts}</OptGroup>;
     }));
     return <div>
       <div className="motion-container">
@@ -198,12 +198,11 @@ var Test = React.createClass({
       <div className="motion-select-wrapper">
         <Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
       </div>
-
     </div>;
   }
 });
 
-ReactDOM.render(<Test/>, mountNode);
+ReactDOM.render(<Test key="motion" />, mountNode);
 `````
 
 ## 组件动画

scripts/build-common.js

@@ -27,7 +27,7 @@ const parse = function parse(fileName) {
   const description = R.map(
     (node) => {
       if (node.type === 'code' && node.props.lang === '__react') {
-        return devil(node.children, ['React', 'antd', 'CopyToClipboard']);
+        return devil(node.children, ['React', 'antd']);
       }
       return node;
     },

site/component/utils.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import hljs from 'highlight.js';
-import CopyToClipboard from 'react-copy-to-clipboard';
 import antd, { Menu } from '../../';
 
 function isHeading(type) {
@@ -15,7 +14,7 @@ export function objectToComponent(object, index) {
   }
 
   if (typeof object === 'function') {
-    return object(React, antd, CopyToClipboard);
+    return object(React, antd);
   }
 
   if (typeof object === 'string') {