Merge remote-tracking branch 'upstream/0.8.0'

2024-11-25 03:29:59 +08:00 · 2015-08-20 15:47:09 +08:00 · 2015-08-20 15:47:09 +08:00 · 337cee6845
commit 337cee6845
parent c15a840bcf e03d2488e5
9 changed files with 114 additions and 51 deletions
--- a/README.md
+++ b/README.md
@ -2,9 +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)

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

 <p align="center">
  <a href="http://ant.design">
@ -14,7 +12,7 @@

 ## 特性

- 企业级金融产品的交互语言和视觉体系。
+- 提炼自企业级后台产品的交互语言和视觉风格。
 - 丰富实用的 React UI 组件。
 - 基于 React 的组件化开发模式。
 - 背靠 npm 生态圈。
@ -35,7 +33,7 @@ React.render(<Datepicker />, mountNode);
 - [首页](http://ant.design/)
 - [文档](http://ant.design/docs/introduce)
 - [组件](http://ant.design/components/)
- [构建调试工具](https://github.com/ant-design/antd-bin)
+- [构建调试 antd-bin](https://github.com/ant-design/antd-bin)
 - [开发计划](https://github.com/ant-design/ant-design/issues/9)
 - [修改记录](CHANGELOG.md)
 - [React 模块](http://react-component.github.io/)
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@ -1,4 +1,5 @@
 import React from 'react';
+import Animate from 'rc-animate';

 export default React.createClass({
  getDefaultProps() {
@ -8,18 +9,31 @@ export default React.createClass({
  },
  getInitialState() {
    return {
-      display: 'block'
+      closing: true,
+      closed: false
    };
  },
  handleClose(e) {
+    let dom = React.findDOMNode(this);
+    dom.style.height = dom.offsetHeight + 'px';
+    // Magic code
+    // 重复一次后才能正确设置 height
+    dom.style.height = dom.offsetHeight + 'px';
+
+    this.setState({
+      closing: false
+    });
    if (this.props.onClose) {
      this.props.onClose.call(this, e);
    }
+  },
+  animationEnd() {
    this.setState({
-      display: 'none'
+      closed: true,
+      closing: true
    });
  },
-  render () {
+  render() {
    var iconClass = this.props.description ?
      'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-';
    switch (this.props.type) {
@ -38,41 +52,43 @@ export default React.createClass({
      default:
        iconClass += 'default';
    }
+    let html, closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
    if (this.props.description) {
      let close = this.props.closable ?
-        <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}><span
-          className='ant-alert-with-description-close-icon-x'></span></a> : '';
-      return (
-        <div style={{display: this.state.display}}
-             className={'ant-alert-with-description ant-alert-with-description-' + this.props.type}>
-          <i className={'anticon ' + iconClass}></i>
-          <p className={'ant-alert-with-description-message'}>{this.props.message}</p>
-          <span className={'ant-alert-with-description-description'}>{this.props.description}</span>
+        <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}>
+          <span className='ant-alert-with-description-close-icon-x'></span>
+        </a> : '';
+      html = <div data-show={this.state.closing} className={'ant-alert-with-description ant-alert-with-description-' + this.props.type + closeName}>
+        <i className={'anticon ' + iconClass}></i>
+        <p className={'ant-alert-with-description-message'}>{this.props.message}</p>
+        <span className={'ant-alert-with-description-description'}>{this.props.description}</span>
          {close}
-        </div>
-      );
+      </div>;
    } else {
      if (this.props.closeText) {
-        return (
-          <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
-            <i className={'anticon ' + iconClass}></i>
-            <span className={'ant-alert-description'}>{this.props.message}</span>
-            <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
-          </div>
-        );
+        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
+          <i className={'anticon ' + iconClass}></i>
+          <span className={'ant-alert-description'}>{this.props.message}</span>
+          <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
+        </div>;
      } else {
        let close = this.props.closable ?
          <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
            <span className='ant-alert-close-icon-x'></span>
          </a> : '';
-        return (
-          <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
-            <i className={'anticon ' + iconClass}></i>
-            <span className={'ant-alert-description'}>{this.props.message}</span>
-            {close}
-          </div>
-        );
+        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
+          <i className={'anticon ' + iconClass}></i>
+          <span className={'ant-alert-description'}>{this.props.message}</span>
+          {close}
+        </div>;
      }
    }
+    return this.state.closed ? null : <Animate
+      component=""
+      showProp='data-show'
+      transitionName="slide-up"
+      onEnd={this.animationEnd}>
+      {html}
+    </Animate>;
  }
 });
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.jsx
@ -1,4 +1,4 @@
-import Carousel from 'react-slick';
+import Carousel from 'react-slick2';
 import React from 'react';
 import assign from 'object-assign';

--- a/components/tag/index.jsx
+++ b/components/tag/index.jsx
@ -1,22 +1,30 @@
 import React from 'react';
 const prefixCls = 'ant-tag';
+import { transitionEndEvent, addEventListenerOnce } from '../util/index';

 class AntTag extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
+      closing: false,
      closed: false
    };
  }
+
  close(e) {
    let dom = React.findDOMNode(this);
    dom.style.width = dom.offsetWidth + 'px';
-    // Magic code
-    // 重复是去除浏览器渲染bug；
+    // It's Magic Code, don't know why
    dom.style.width = dom.offsetWidth + 'px';
    this.setState({
-      closed: true
+      closing: true
+    });
+    addEventListenerOnce(dom, transitionEndEvent, () => {
+      this.setState({
+        closed: true,
+        closing: false
+      });
    });
    this.props.onClose.call(this, e);
  }
@ -24,22 +32,23 @@ class AntTag extends React.Component {
  render() {
    let close = this.props.closable ?
      <i className="anticon anticon-cross" onClick={this.close.bind(this)}></i> : '';
-    let colorClass = this.props.prefixCls + '-' + this.props.color;
+    let colorClass = this.props.color ? this.props.prefixCls + '-' + this.props.color : '';

    let className = this.props.prefixCls + ' ' + colorClass;
-    className = this.state.closed ? className + ' ' + this.props.prefixCls + '-close' : className;
+    className = this.state.closing ? className + ' ' + this.props.prefixCls + '-close' : className;

-    return <div className={className}>
-      <a className={this.props.prefixCls + '-text'} {...this.props} />
-      {close}
-    </div>;
+    return (this.state.closed && !this.state.closing) ? null
+      : <div className={className}>
+          <a className={this.props.prefixCls + '-text'} {...this.props} />
+          {close}
+        </div>;
  }
 }

 AntTag.defaultProps = {
  prefixCls: prefixCls,
  closable: false,
-  onClose: function () {}
+  onClose: function() {}
 };

 export default AntTag;
--- a/docs/introduce.md
+++ b/docs/introduce.md
@ -5,7 +5,7 @@

 ---

-一套企业级的前端设计语言和基于 React 的实现。
+一套企业级的 UI 设计语言和基于 React 的实现。

 设计文档和组件实现均在紧密整理和开发中，部分页面可能不完善，预计 8 月份释出正式版本。

@ -13,7 +13,7 @@

 ## 特性

- 企业级金融产品的交互语言和视觉体系。
+- 提炼自企业级后台产品的交互语言和视觉风格。
 - 丰富实用的 React UI 组件。
 - 基于 React 的组件化开发模式。
 - 背靠 npm 生态圈。
@ -33,7 +33,7 @@ React.render(<Datepicker />, mountNode);
 - [首页](http://ant.design/)
 - [文档](http://ant.design/docs/introduce)
 - [组件](http://ant.design/components/)
- [构建调试工具](https://github.com/ant-design/antd-bin)
+- [构建调试 antd-bin](https://github.com/ant-design/antd-bin)
 - [开发计划](https://github.com/ant-design/ant-design/issues/9)
 - [React 模块](http://react-component.github.io/)
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
--- a/nico.js
+++ b/nico.js
@ -91,7 +91,7 @@ exports.middlewares = [
        aggregateTimeout: 300,
        poll: true
      },
-      quiet: true
+      noInfo: true
    });
    try {
      return handler(req, res, next);
--- a/package.json
+++ b/package.json
@ -60,8 +60,9 @@
    "rc-tree": "~0.14.3",
    "rc-upload": "~1.3.1",
    "rc-util": "~2.0.3",
-    "react-slick": "~0.6.4",
-    "reqwest": "~2.0.1"
+    "react-slick2": "~0.6.6",
+    "reqwest": "~2.0.1",
+    "rc-animate": "~1.1.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "~2.0.0",
--- a/style/components/alert.less
+++ b/style/components/alert.less
@ -152,4 +152,15 @@
      }
    }
  }
+
+  &-close {
+    height: 0 !important;
+    opacity: 0 !important;
+    margin: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: all .3s @ease-in-out;
+    transform-origin: 50% 0;
+    animation-timing-function: @ease-in-out !important;
+  }
 }
--- a/style/components/form.less
+++ b/style/components/form.less
@ -262,6 +262,17 @@ form {
    line-height: @input-height-lg;
    text-align: center;
    font-size: 14px;
+    .animation(zoomIn .3s @ease-out-back);
+  }
+}
+.has-error{
+  &.has-feedback:after{
+    animation-name: zoomIn2 !important;
+  }
+}
+.has-warning{
+  &.has-feedback:after{
+    animation-name: zoomIn3 !important;
  }
 }

@ -310,7 +321,7 @@ form {
    content: '\e628';
    color: @error-color;
  }
-  
+
  // ant-select
  .@{selectPrefixCls} {
    &-selection {
@ -332,7 +343,24 @@ form {
 .is-validating {
  &.has-feedback:after {
    display: inline-block;
-    .animation(loadingCircle 1s infinite linear);
+    .animation(loadingCircle 1s infinite linear );
    content:"\e610";
  }
 }
+
+@keyframes zoomIn2 {
+  0%{
+    transform: scale(0);
+  }
+  100%{
+    transform: scale(1);
+  }
+}
+@keyframes zoomIn3 {
+  0%{
+    transform: scale(0);
+  }
+  100%{
+    transform: scale(1);
+  }
+}