fix for code review

components/spin/demo/full-page-load.md

@@ -17,9 +17,9 @@ var pageStyle = {
   textAlign: 'center'
 }
 
-React.render(
+ReactDOM.render(
   <div style={ pageStyle }>
-		<Spin size="lg" />
+    <Spin size="large" type="primary" />
   </div>, container);
 
 ````

components/spin/demo/page-element.md

@@ -20,16 +20,13 @@ var divStyle = {
     margin: '20px 0'
 }
 
-React.render(
+ReactDOM.render(
   <div>
     <div style={ divStyle }>
-			<Spin size="md" />
+      <Spin />
     </div>
     <div style={ divStyle }>
-			<Spin size="md" type="primary" />
-		</div>
-		<div style={ divStyle }>
-			<Spin size="md" type="inverted" />
+      <Spin type="primary" />
     </div>
   </div>, container);
 

components/spin/index.jsx

@@ -4,32 +4,37 @@ import { classSet } from 'rc-util';
 let AntSpin = React.createClass({
   getDefaultProps() {
     return {
-      size: 'sm',
+      size: 'default',
       type: 'default'
     };
   },
 
   propTypes: {
     className: React.PropTypes.string,
-    size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
-    type: React.PropTypes.oneOf(['default', 'primary', 'inverted'])
+    size: React.PropTypes.oneOf(['small', 'default', 'large']),
+    type: React.PropTypes.oneOf(['default', 'primary'])
   },
 
   render() {
-    const props = this.props;
+    const prefix = 'ant-spin';
+    const {type, size, className, ...others} = this.props;
+    const sizeCls = ({
+      'large': 'lg',
+      'small': 'sm'
+    })[size] || '';
 
-    let className = classSet({
-      spin: 1,
-      [`spin-${props.type}`]: 1,
-      [`spin-${props.size}`]: 1,
-      [props.className]: !!props.className
+    let componentClassName = classSet({
+      'ant-spin': true,
+      [`${prefix}-${type}`]: type,
+      [`${prefix}-${sizeCls}`]: sizeCls,
+      [className]: !!className
     });
 
     return (
-      <div {...this.props} className={ className }>
-        <span className="spin-dot spin-dot-first" />
-        <span className="spin-dot spin-dot-second" />
-        <span className="spin-dot spin-dot-third" />
+      <div {...this.props} className={ componentClassName }>
+        <span className="ant-spin-dot ant-spin-dot-first" />
+        <span className="ant-spin-dot ant-spin-dot-second" />
+        <span className="ant-spin-dot ant-spin-dot-third" />
       </div>
     );
   }

components/spin/index.md

@@ -15,6 +15,6 @@
 ## API
 
 | 参数       | 类型            | 默认值       |说明           |
-|------------|----------------|-------------|--------------|
-| size        | enum			| sm				| spin组件中点的大小，可选值为sm md lg
-| type        | enum			| default           | spin组件中点的而色值，可选值为default primary inverted
+|-----------|----------------|-------------|--------------|
+| size        | enum      | default       | spin组件中点的大小，可选值为large default small
+| type        | enum      | default       | spin组件中点的而色值，可选值为default primary

components/table/index.jsx

@@ -600,7 +600,7 @@ let AntTable = React.createClass({
       let spinClass = `${paginationPatchClass} ant-table-spin-holder`;
 
       spinEl = <div className={spinClass}>
-          <Spin size="md" type="primary"/>
+          <Spin type="primary"/>
         </div>;
 
       spinWrapperClass = ' ant-table-loading';

style/components/spin.less

@@ -1,70 +1,64 @@
 @import "../mixins/index";
 
+@spin-prefix-cls: ant-spin;
+
 // root of component
 // ------------------------------
 
-.spin {
+.@{spin-prefix-cls} {
   display: inline-block;
   font-size: @spin-dot-size;
   height: @spin-dot-size;
   position: relative;
   text-align: center;
   vertical-align: middle;
-}
 
-// dots
-// ------------------------------
+  // dots
+  // ------------------------------
   
-.spin-dot {
-	.animation(pulse 1s infinite ease-in-out);
+  &-dot {
+    .animation(antSpinPulse 1s infinite ease-in-out);
     .square(1em);
     border-radius: 50%;
     display: inline-block;
     vertical-align: top;
-}
-&.spin-dot-second {
+  }
+  &-dot-second {
     .animation-delay(200ms);
     margin-left: 1em;
-}
-&.spin-dot-third {
+  }
+  &-dot-third {
     .animation-delay(400ms);
     margin-left: 1em;
-}
+  }
 
-// Types
-// ------------------------------
+  // Types
+  // ------------------------------
 
-// default
-.spin-default > .spin-dot { background-color: @spin-dot-default; }
+  // default
+  &-default > &-dot { background-color: @spin-dot-default; }
 
-// primary
-.spin-primary > .spin-dot { background-color: @spin-dot-primary; }
+  // primary
+  &-primary > &-dot { background-color: @primary-color; }
 
-// inverted
-.spin-inverted > .spin-dot { background-color: @spin-dot-inverted; }
+  // Sizes
+  // ------------------------------
 
-
-// Sizes
-// ------------------------------
-
-// small
-.spin-sm {
+  // small
+  &-sm {
     font-size: @spin-dot-size-sm;
     height: @spin-dot-size-sm;
-}
+  }
 
-// large
-.spin-lg {
+  // large
+  &-lg {
     font-size: @spin-dot-size-lg;
     height: @spin-dot-size-lg;
+  }
 }
 
 // pulse
-@-webkit-keyframes pulse {
-	0%, 80%, 100% { opacity: 0; }
-	40% { opacity: 1; }
-}
-@keyframes pulse {
+@keyframes antSpinPulse {
   0%, 80%, 100% { opacity: 0; }
   40% { opacity: 1; }
 }

style/themes/default/custom.less

@@ -142,10 +142,7 @@
 // Spin
 // --------------------------------
 @spin-dot-default            : #999;
-@spin-dot-inverted           : #fff;
-@spin-dot-primary            : #2db7f5;
 
 @spin-dot-size               : 8px;
 @spin-dot-size-sm            : @spin-dot-size / 2;
 @spin-dot-size-lg            : @spin-dot-size * 2;
-