Merge branch '0.8.0' of github.com:ant-design/ant-design into 0.8.0

README.md

@@ -2,7 +2,7 @@
 
 [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-一套企业级的 UI 设计语言和基于 React 的实现。
+一套企业级的 UI 设计语言和 React 实现。
 
 <p align="center">
   <a href="http://ant.design">

components/breadcrumb/demo/router.md

@@ -44,9 +44,9 @@ var Home = React.createClass({
 
 React.render((
   <Router history={history}>
-    <Route name="首页" path="/" component={Home} ignoreScrollBehavior>
-      <Route name="应用列表" path="apps" component={Apps}>
-        <Route name="应用:id" path=":id" />
+    <Route name="home" breadcrumbName="首页" path="/" component={Home} ignoreScrollBehavior>
+      <Route name="apps" breadcrumbName="应用列表" path="apps" component={Apps}>
+        <Route name="app" breadcrumbName="应用:id" path=":id" />
       </Route>
     </Route>
   </Router>

components/breadcrumb/index.jsx

@@ -25,7 +25,7 @@ let Breadcrumb = React.createClass({
       routes = this.context.router.state.branch;
       params = this.context.router.state.params;
       crumbs = routes.map(function(route, i) {
-        var name = route.name.replace(/\:(.*)/g, function(replacement, key) {
+        var name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
           return params[key] || replacement;
         });
         var link;

components/radio/demo/radiobutton.md

@@ -0,0 +1,26 @@
+# 按钮样式
+
+- order: 3
+
+按钮样式的单选组合。
+
+---
+
+````jsx
+var RadioButton = antd.Radio.Button;
+var RadioGroup = antd.Radio.Group;
+
+function onChange(e) {
+  console.log('radio checked:' + e.target.value);
+}
+
+React.render((
+  <RadioGroup onChange={onChange} defaultValue="a">
+    <RadioButton value="a">杭州</RadioButton>
+    <RadioButton value="b">上海</RadioButton>
+    <RadioButton value="c">北京</RadioButton>
+    <RadioButton value="d">成都</RadioButton>
+  </RadioGroup>
+), document.getElementById('components-radio-demo-radiobutton'));
+````
+

components/radio/demo/radiogroup.md

@@ -1,14 +1,14 @@
-# RadioGroup组合
+# RadioGroup 组合
 
 - order: 1
 
-RadioGroup 组合。
+一组互斥的 Radio 配合使用。
 
 ---
 
 ````jsx
 var Radio = antd.Radio;
-var RadioGroup = antd.RadioGroup;
+var RadioGroup = antd.Radio.Group;
 
 var App = React.createClass({
   getInitialState: function () {

components/radio/group.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Radio from './index';
+import Radio from './radio';
 
 function getCheckedValue(children) {
   var checkedValue = null;

components/radio/index.jsx

@@ -1,18 +1,5 @@
-import Radio from 'rc-radio';
-import React from 'react';
+import AntRadio from './radio';
+import Group from './group';
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-radio'
-    };
-  },
-  render() {
-    return (
-      <label>
-        <Radio {...this.props} children={null} />
-        {this.props.children}
-      </label>
-    );
-  }
-});
+AntRadio.Group = Group;
+export default AntRadio;

components/radio/radio.jsx

@@ -0,0 +1,39 @@
+import Radio from 'rc-radio';
+import React from 'react';
+
+let AntRadio = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-radio'
+    };
+  },
+  render() {
+    let classString = this.props.className;
+    if (classString) {
+      classString += this.props.checked ? (' ' + classString + '-checked') : '';
+    }
+    return (
+      <label className={classString}>
+        <Radio {...this.props} children={null} />
+        {this.props.children}
+      </label>
+    );
+  }
+});
+
+let Button = React.createClass({
+  getDefaultProps() {
+    return {
+      className: 'ant-radio-button'
+    };
+  },
+  render() {
+    return (
+      <AntRadio {...this.props} />
+    );
+  }
+});
+
+AntRadio.Button = Button;
+
+export default AntRadio;

components/tag/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import Animate from 'rc-animate';
 const prefixCls = 'ant-tag';
-import { transitionEndEvent, addEventListenerOnce } from '../util/index';
 
 class AntTag extends React.Component {
   constructor(props) {
@@ -20,15 +20,16 @@ class AntTag extends React.Component {
     this.setState({
       closing: true
     });
-    addEventListenerOnce(dom, transitionEndEvent, () => {
-      this.setState({
-        closed: true,
-        closing: false
-      });
-    });
     this.props.onClose.call(this, e);
   }
 
+  animationEnd() {
+    this.setState({
+      closed: true,
+      closing: false
+    });
+  }
+
   render() {
     let close = this.props.closable ?
       <i className="anticon anticon-cross" onClick={this.close.bind(this)}></i> : '';
@@ -37,11 +38,16 @@ class AntTag extends React.Component {
     let className = this.props.prefixCls + ' ' + colorClass;
     className = this.state.closing ? className + ' ' + this.props.prefixCls + '-close' : className;
 
-    return (this.state.closed && !this.state.closing) ? null
-      : <div className={className}>
+    return this.state.closed ? null
+      : <Animate component=""
+                 showProp='data-show'
+                 transitionName="zoom-tag"
+                 onEnd={this.animationEnd.bind(this)}>
+        <div data-show={!this.state.closing} className={className}>
           <a className={this.props.prefixCls + '-text'} {...this.props} />
           {close}
-        </div>;
+        </div>
+      </Animate>;
   }
 }
 

components/upload/getFileItem.js

@@ -0,0 +1,11 @@
+export default function getFileItem(file, fileList) {
+  let matchWay = (!file.uid) ? 'byName' : 'byUid';
+  let target = fileList.filter((item) => {
+    if (matchWay === 'byName') {
+      return item.filename === file.filename;
+    } else {
+      return item.uid === file.uid;
+    }
+  })[0];
+  return target;
+};

components/upload/index.jsx

@@ -3,19 +3,20 @@ import Upload from 'rc-upload';
 import assign from 'object-assign';
 import Message from '../message';
 import UploadList from './uploadList';
+import getFileItem from './getFileItem';
 const prefixCls = 'ant-upload';
 
-let AntUpload = React.createClass({
+const AntUpload = React.createClass({
   getInitialState() {
     return {
       downloadList: []
     };
   },
   handleStart(file) {
-    var i = this.state.downloadList.length;
-    var nextDownloadList = this.state.downloadList;
+    let i = this.state.downloadList.length;
+    let nextDownloadList = this.state.downloadList;
     nextDownloadList.push({
-      id: i,
+      index: i,
       uid: file.uid || '',
       filename: file.name,
       status: 'downloading'
@@ -25,19 +26,9 @@ let AntUpload = React.createClass({
     });
   },
   handleSuccess(ret, file) {
-    let matchWay = (!file.uid) ? 'byName' : 'byUid';
     Message.success(file.name + '上传完成');
-    for (let i = 0; i < this.state.downloadList.length; i++) {
-      if (matchWay === 'byName') {
-        if (this.state.downloadList[i].filename === file.name) {
-          this.state.downloadList[i].status = 'done';
-        }
-      } else {
-        if (this.state.downloadList[i].uid === file.uid) {
-          this.state.downloadList[i].status = 'done';
-        }
-      }
-    }
+    let targetItem = getFileItem(file, this.state.downloadList);
+    targetItem.status = 'done';
     this.setState({
       downloadList: this.state.downloadList
     });
@@ -63,8 +54,8 @@ let AntUpload = React.createClass({
     };
   },
   render() {
-    var type = this.props.type || 'select';
-    var props = assign({}, this.props);
+    let type = this.props.type || 'select';
+    let props = assign({}, this.props);
 
     props.onStart = (file) => {
       this.handleStart(file);

components/upload/uploadList.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import getFileItem from './getFileItem';
 const prefixCls = 'ant-upload';
+import Animate from 'rc-animate';
 
 export default React.createClass({
   getDefaultProps() {
@@ -20,28 +22,21 @@ export default React.createClass({
     }
   },
   handleClose(file) {
-    var matchWay = file.uid === '' ? 'byName' : 'byUid';
     let items = this.state.items;
-    let removeItem = items.filter((item) => {
-      if (matchWay === 'byName') {
-        return item.filename === file.filename;
-      } else {
-        return item.uid === file.uid;
-      }
-    })[0];
+    let removeItem = getFileItem(file, items);
     if (removeItem) {
-      items.splice(removeItem, 1);
+      items.splice(items.indexOf(removeItem), 1);
     }
     this.setState({
       items: items
     });
   },
   render() {
-    var items = this.state.items;
-    var downloadItem = (file) => {
-      var statusIcon = file.status === 'done' ? <i className={'anticon anticon-check ' + prefixCls + '-success-icon'}></i> : <i className="anticon anticon-loading"></i>;
+    let items = this.state.items;
+    let downloadItem = (file) => {
+      let statusIcon = file.status === 'done' ? <i className={'anticon anticon-check ' + prefixCls + '-success-icon'}></i> : <i className="anticon anticon-loading"></i>;
       return (
-        <div className={prefixCls + '-list-item'} key={file.id}>
+        <div className={prefixCls + '-list-item'} key={file.index}>
           {statusIcon}
           <b className={prefixCls + '-item-name'}>{file.filename}</b>
           <i className="anticon anticon-cross" ref="theCloseBtn"
@@ -49,6 +44,10 @@ export default React.createClass({
         </div>
       );
     };
-    return <div className={prefixCls + '-list'}>{items.map(downloadItem)}</div>;
+    return (<div className={prefixCls + '-list'}>
+      <Animate transitionName={prefixCls + '-margin-top'}>
+        {items.map(downloadItem)}
+      </Animate>
+    </div>);
   }
 });

docs/introduce.md

@@ -5,7 +5,7 @@
 
 ---
 
-一套企业级的 UI 设计语言和基于 React 的实现。
+一套企业级的 UI 设计语言和 React 实现。
 
 设计文档和组件实现均在紧密整理和开发中，部分页面可能不完善，预计 8 月份释出正式版本。
 

index.js

@@ -36,7 +36,6 @@ const antd = {
   Slider: require('./components/slider'),
   EnterAnimation: require('./components/enter-animation'),
   Radio: require('./components/radio'),
-  RadioGroup: require('./components/radio/group'),
   Notification: require('./components/notification'),
   Alert: require('./components/alert'),
   Validation: require('./components/validation'),

package.json

@@ -3,7 +3,7 @@
   "version": "0.8.0-beta5",
   "stableVersion": "0.7.3",
   "title": "Ant Design",
-  "description": "一个设计语言&前端框架",
+  "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",
   "keywords": [
     "ant",

style/components/radio.less

@@ -1,6 +1,6 @@
 @radio-group-prefix-cls: ant-radio-group;
-@radio-wrap-prefix-cls: ant-radio;
-@radio-inner-prefix-cls: ~"@{radio-wrap-prefix-cls}-inner";
+@radio-prefix-cls: ant-radio;
+@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
 @radio-duration: .3s;
 
 .@{radio-group-prefix-cls} {
@@ -10,7 +10,7 @@
 }
 
 // 一般状态
-.@{radio-wrap-prefix-cls} {
+.@{radio-prefix-cls} {
   white-space: nowrap;
   outline: none;
   display: inline-block;
@@ -67,7 +67,7 @@
 }
 
 // 选中状态
-.@{radio-wrap-prefix-cls}-checked {
+.@{radio-prefix-cls}-checked {
 
   .@{radio-inner-prefix-cls} {
     border-color: #d9d9d9;
@@ -79,7 +79,7 @@
   }
 }
 
-.@{radio-wrap-prefix-cls}-disabled {
+.@{radio-prefix-cls}-disabled {
   &:hover {
     .@{radio-inner-prefix-cls} {
       border-color: #d9d9d9;
@@ -98,6 +98,88 @@
   }
 }
 
-.@{radio-wrap-prefix-cls} + span {
+.@{radio-prefix-cls} + span {
   margin-left: 8px;
 }
+
+.@{radio-prefix-cls} {
+  label&-button {
+    background: #fff;
+    padding: 0 16px;
+    margin: 0;
+    height: 28px;
+    line-height: 26px;
+    color: #666;
+    display: inline-block;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: 1px solid #d9d9d9;
+    border-left: 0;
+
+    > span {
+      margin-left: 0;
+    }
+
+    &:before {
+      transition: all 0.3s ease;
+      position: absolute;
+      width: 1px;
+      height: 100%;
+      left: -1px;
+      background: #d9d9d9;
+      content: '';
+      visibility: hidden;
+    }
+
+    &:first-child {
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+      border-left: 1px solid #d9d9d9;
+      &:before {
+        display: none;
+      }
+    }
+
+    &:last-child {
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+
+    &:hover {
+      border-color: #aaa;
+      position: relative;
+      &:before {
+        background: #aaa;
+        visibility: visible;
+      }
+    }
+
+    .@{radio-prefix-cls}-inner,
+    input {
+      display: none;
+    }
+
+    &-checked {
+      background: @primary-color;
+      border-color: @primary-color;
+      color: #fff;
+      margin-left: -1px;
+
+      &:before {
+        display: none;
+      }
+
+      &:first-child {
+        border-color: @primary-color;
+      }
+
+      &:hover {
+        background: tint(@primary-color, 20%);
+        border-color: tint(@primary-color, 20%);
+      }
+
+      &:active {
+        background: shade(@primary-color, 5%);
+        border-color: shade(@primary-color, 5%);
+      }
+    }
+  }
+}

style/components/select.less

@@ -58,10 +58,8 @@
       display: none;
     }
 
-    .ie-rotate(1);
     &:before {
-      content: '\e611';
-      .rotate(90deg);
+      content: '\e600';
       transition: transform 0.2s ease;
     }
   }
@@ -333,6 +331,14 @@
         white-space: nowrap;
         cursor: pointer;
 
+        &:first-child {
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+        }
+        &:last-child {
+          border-bottom-left-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
         &:hover, &-active {
           background-color: tint(@primary-color, 90%) !important;
         }
@@ -390,9 +396,10 @@
 
   &-open {
     .@{select-prefix-cls}-arrow {
-      .ie-rotate(3);
+      .ie-rotate(2);
+      -ms-transform: rotate(180deg);
       &:before {
-        .rotate(270deg);
+        .rotate(180deg);
       }
     }
     .@{select-prefix-cls}-selection {

style/components/tag.less

@@ -73,10 +73,12 @@
   }
 
   &-close {
-    transform: scale(0);
+
     width: 0 !important;
-    opacity: 0 !important;
     padding: 0;
     margin-right: 0;
   }
 }
+.zoom-tag-leave{
+  animation: zoomOut .3s @ease-in-out-circ;
+}

style/components/upload.less

@@ -71,6 +71,7 @@
 .@{upload-prefix-cls}-list {
   margin-left: 4px;
   margin-top: 8px;
+  overflow: hidden;
   .@{upload-prefix-cls}-list-item {
     margin-bottom: 4px;
     height: 22px;
@@ -98,4 +99,26 @@
     color: @success-color;
     font-weight: bold;
   }
+
+  .@{upload-prefix-cls}-margin-top-enter {
+    animation: marginTopIn .3s @ease-in-out-circ;
+  }
+
+  .@{upload-prefix-cls}-margin-top-leave {
+    animation: marginTopOut .3s @ease-in-out-circ;
+  }
+
+  @keyframes marginTopIn {
+    from {
+      margin-top: -25px;
+      opacity: 0;
+    }
+  }
+
+  @keyframes marginTopOut {
+    to {
+      margin-top: -25px;
+      opacity: 0;
+    }
+  }
 }