Merge pull request #83 from zhujun24/alert

Alert

components/alert/demo/basic.md

+# 基本
+
+- order: 0
+
+最简单的用法，适用于简短的警告提示。
+
+---
+
+````jsx
+var Alert = require('antd/lib/alert');
+
+React.render(
+  <div>
+    <Alert
+      description="警告提示的文案"
+      type="success"
+    />
+  </div>,
+document.getElementById('components-alert-demo-basic'));
+````

components/alert/demo/close-type.md

+# 自定义关闭
+
+- order: 3
+
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。
+
+---
+
+````jsx
+var Alert = require('antd/lib/alert');
+var link = <a href="javascript:;">不再提醒</a>
+
+React.render(
+  <div>
+    <Alert
+      description="警告提示的文案"
+      type="info"
+      closeText={link}
+    />
+  </div>,
+document.getElementById('components-alert-demo-close-type'));
+````

components/alert/demo/message.md

+# 含有标题
+
+- order: 2
+
+警告提示的标题文案，当含有标题时，关闭样式只能为默认值。
+
+---
+
+````jsx
+var Alert = require('antd/lib/alert');
+
+React.render(
+  <div>
+    <Alert 
+      message="警告提示的标题"
+      description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
+      type="success"
+    />
+    <Alert 
+      message="警告提示的标题"
+      description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
+      type="info"
+    />
+    <Alert 
+      message="警告提示的标题"
+      description="警告提示的文案警告提示的文案警告提示的文案"
+      type="warn"
+    />
+    <Alert 
+      message="警告提示的标题"
+      description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
+      type="error"
+    />
+  </div>,
+document.getElementById('components-alert-demo-message'));
+````

components/alert/demo/onClose.md

+# 回调函数
+
+- order: 4
+
+警告提示被关闭时触发的回调函数。
+
+---
+
+````jsx
+var Alert = require('antd/lib/alert');
+
+var onClose = function(){
+  console.log('我要被关闭啦！');
+}
+
+React.render(
+  <div>
+    <Alert
+      description="警告提示的文案"
+      type="warn"
+      onClose={onClose}
+    />
+    <Alert
+      message="警告提示的标题"
+      description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
+      type="error"
+      onClose={onClose}
+    />
+  </div>,
+document.getElementById('components-alert-demo-onclose'));
+````

components/alert/demo/style.md

+# 四种样式
+
+- order: 1
+
+共有四种样式`success`、`info`、`warn`、`error`。
+
+---
+
+````jsx
+var Alert = require('antd/lib/alert');
+
+React.render(
+  <div>
+    <Alert
+      description="警告提示的文案"
+      type="success"
+    />
+    <Alert
+      description="警告提示的文案警告提示的文案"
+      type="info"
+    />
+    <Alert
+      description="警告提示的文案"
+      type="warn"
+    />
+    <Alert
+      description="警告提示的文案警告提示的文案"
+      type="error"
+    />
+  </div>,
+document.getElementById('components-alert-demo-style'));
+````

components/alert/index.jsx

+import React from 'react';
+
+export default React.createClass({
+  getDefaultProps() {
+    return {prefixCls: 'ant-alert'};
+  },
+  getInitialState () {
+    return {display: 'block'};
+  },
+  handleClose () {
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
+    this.setState({
+      display: 'none'
+    });
+  },
+  render () {
+    var iconClass = this.props.message ? 'ant-alert-with-message-icon anticon-' : 'ant-alert-icon anticon-';
+    switch (this.props.type) {
+      case 'success':
+        iconClass += 'check-circle';
+        break;
+      case 'info':
+        iconClass += 'question-circle';
+        break;
+      case 'error':
+      case 'warn':
+        iconClass += 'info-circle';
+        break;
+      default:
+        iconClass += 'default';
+    }
+    if (this.props.message) {
+      return (
+        <div style={{display: this.state.display}} className={'ant-alert-with-message ant-alert-with-message-' + this.props.type}>
+          <i className={'anticon ' + iconClass}></i>
+          <p className={'ant-alert-with-message-message'}>{this.props.message}</p>
+          <span className={'ant-alert-with-message-description'}>{this.props.description}</span>
+          <a onClick={this.handleClose} className={'ant-alert-with-message-close-icon'}>
+            <span className='ant-alert-with-message-close-icon-x'></span>
+          </a>
+        </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.description}</span>
+            <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
+          </div>
+        );
+      } else {
+        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.description}</span>
+            <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
+              <span className='ant-alert-close-icon-x'></span>
+            </a>
+          </div>
+        );
+      }
+    }
+  }
+});

components/alert/index.md

 # Alert
 
-- category: CSS
-- chinese: 通知栏
+- category: Components
+- chinese: 警告提示
 
 ---
+
+警告提示。
+
+## 何时使用
+
+- 当系统需要向用户显示警告的信息时。
+
+## API
+
+| 参数        | 说明                                                      | 类型        | 默认值 |
+|----------- |---------------------------------------------------------  | ---------- |-------|
+| type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
+| closeText  | 可选参数，自定义关闭                                      | String     | 无  |
+| message    | 可选参数，标题                                           | String     | 无    |
+| description | 必选参数，内容                                           | String     | 无    |
+| onClose     | 可选参数，关闭时触发的回调函数                             | Function    | 无    |

index.js

@@ -24,7 +24,8 @@ var antd = {
   Slider: require('./components/slider'),
   EnterAnimation: require('./components/enter-animation'),
   Radio: require('./components/radio'),
-  RadioGroup: require('./components/radio/group')
+  RadioGroup: require('./components/radio/group'),
+  Alert: require('./components/alert')
 };
 
 module.exports = antd;

style/components/alert.less

+@import "../mixins/index";
+
+@alertPrefixClass: ~"@{css-prefix}alert";
+@alertTitlePrefixClass: ~"@{css-prefix}alert-with-message";
+
+.@{alertPrefixClass} {
+  position: relative;
+  padding: 8px 8px 8px 16px;
+  border-radius: @border-radius-base;
+  color: @legend-color;
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 10px;
+
+  &-icon {
+    margin-right: 8px;
+    font-size: @input-font-size-lg;
+  }
+
+  &-description {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &-success {
+    border: 1px solid tint(@success-color, 50%);
+    background-color: tint(@success-color, 90%);
+    .anticon {
+      color: @success-color;
+    }
+  }
+
+  &-info {
+    border: 1px solid tint(@primary-color, 50%);
+    background-color: tint(@primary-color, 90%);
+    .anticon {
+      color: @primary-color;
+    }
+  }
+
+  &-warn {
+    border: 1px solid tint(@warning-color, 50%);
+    background-color: tint(@warning-color, 90%);
+    .anticon {
+      color: @warning-color;
+    }
+  }
+
+  &-error {
+    border: 1px solid tint(@error-color, 50%);
+    background-color: tint(@error-color, 90%);
+    .anticon {
+      color: @error-color;
+    }
+  }
+
+  &-close-icon {
+    .iconfont-size-under-12px(10px);
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    margin-top: -6px;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    transition: opacity .3s ease;
+    width: 12px;
+    height: 12px;
+    overflow: hidden;
+
+    &-x {
+      position: absolute;
+      top: -3px;
+      &:before {
+        font-weight: 700;
+        text-shadow: 0 1px 0 #fff;
+        color: #000;
+        content: "\e61e";
+        font-family: "anticon";
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+      filter: alpha(opacity=100);
+    }
+  }
+
+  &-close-text {
+    float: right;
+  }
+}
+
+.@{alertTitlePrefixClass} {
+  padding: 16px 16px 16px 69px;
+  position: relative;
+  border-radius: @border-radius-base;
+  margin-bottom: 10px;
+
+  &-icon {
+    position: absolute;
+    top: 50%;
+    left: 24px;
+    margin-top: -22px;
+    font-size: 29px;
+  }
+
+  &-close-icon {
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    cursor: pointer;
+    .iconfont-size-under-12px(10px);
+  }
+
+  &-description {
+    font-size: @input-font-size-lg;
+    color: @text-color;
+  }
+
+  &-description {
+    font-size: 12px;
+    color: @legend-color;
+  }
+
+  &-success {
+    border: 1px solid tint(@success-color, 50%);
+    background-color: tint(@success-color, 90%);
+    .anticon {
+      color: @success-color;
+    }
+  }
+
+  &-info {
+    border: 1px solid tint(@primary-color, 50%);
+    background-color: tint(@primary-color, 90%);
+    .anticon {
+      color: @primary-color;
+    }
+  }
+
+  &-warn {
+    border: 1px solid tint(@warning-color, 50%);
+    background-color: tint(@warning-color, 90%);
+    .anticon {
+      color: @warning-color;
+    }
+  }
+
+  &-error {
+    border: 1px solid tint(@error-color, 50%);
+    background-color: tint(@error-color, 90%);
+    .anticon {
+      color: @error-color;
+    }
+  }
+
+  &-close-icon {
+    .iconfont-size-under-12px(10px);
+    float: right;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    transition: opacity .3s ease;
+    width: 12px;
+    height: 12px;
+    overflow: hidden;
+    position: absolute;
+    right: 16px;
+    top: 12px;
+
+    &-x {
+      position: absolute;
+      top: -4px;
+      &:before {
+        font-weight: 700;
+        text-shadow: 0 1px 0 #fff;
+        color: #000;
+        content: "\e61e";
+        font-family: "anticon";
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+      filter: alpha(opacity=100);
+    }
+  }
+
+  &-close-text {
+    float: right;
+  }
+}
\ No newline at end of file

style/components/index.less

@@ -24,3 +24,4 @@
 @import "divider";
 @import "slider";
 @import "radio";
+@import "alert";