-
-
-
-
-
-
-
-
-
-
-
- )
+ return
-
- Badge 标记
-出现在按钮、图标旁的数字或状态标记。
-
-
- 基础用法
-展示新消息数量。
-
-
-
-
-
-
-
-
-
-
-
- 最大值
-可自定义最大值。
-
-
-
-
-
-
-
-
-
-
- 自定义内容
-可以显示数字以外的文本内容。
-
-
-
-
-
-
-
-
-
-
- 小红点
-以红点的形式标注需要关注的内容。
-
-
- 数据查询
-
-
-
-
-
-
@@ -59,32 +85,42 @@ class App extends React.Component {
)
}
-
- onSelect(page) {
- this.setState({ page })
- }
}
ReactDOM.render(Element-React
-
-
-
-
-
-
-
-
- )
+ return
-
- Progress 进度条
-用于展示操作进度，告知用户当前状态和预期。
-线形进度条 — 百分比外显
-
-
-
-
-
-
-
-
- 线形进度条 — 百分比外显
-百分比不占用额外控件，适用于文件上传等场景。
-
-
-
-
-
-
-
-
- 环形进度条
-
-
-
-
-
-
-
-
-
-
+ {
+ this.props.showIcon &&
+ }
-
- {this.props.title}
-
-
-
+ {
+ this.props.title && {this.props.title}
+ }
+ {
+ this.props.description &&
{this.props.closeText}
diff --git a/src/button/Button.jsx b/src/button/Button.jsx
index 56df7ba7d..81af60897 100644
--- a/src/button/Button.jsx
+++ b/src/button/Button.jsx
@@ -11,12 +11,8 @@ export default class Button extends Component {
render() {
return (
)
diff --git a/src/card/Card.jsx b/src/card/Card.jsx
index 40a56b525..f9464f27b 100644
--- a/src/card/Card.jsx
+++ b/src/card/Card.jsx
@@ -5,12 +5,13 @@ export default class Card extends Component {
render() {
return (
{this.props.description}
-{this.props.description}
+ }
-
-
-
+ {
+ this.props.header && (
+
- { this.props.header }
-
-
+ { this.props.header }
+
+ )
+ }
{ this.props.children }
diff --git a/src/index.js b/src/index.js
index 51f0ba92f..9bce1bb6a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,8 +5,9 @@ export { default as Layout } from './layout';
export { default as Loading } from './loading';
export { default as Message } from './message';
export { default as MessageBox } from './message-box';
+export { default as Notification } from './notification';
export { default as Radio } from './radio';
export { default as Dialog } from './dialog';
-export { default as Progress } from './progress';
-export { default as Badge } from './badge';
-export { default as Tree } from './tree';
\ No newline at end of file
+export { default as Progress } from './progress';
+export { default as Badge } from './badge';
+export { default as Tree } from './tree';
diff --git a/src/message-box/MessageBox.jsx b/src/message-box/MessageBox.jsx
index d5e2cb759..8cd98c0c6 100644
--- a/src/message-box/MessageBox.jsx
+++ b/src/message-box/MessageBox.jsx
@@ -65,27 +65,29 @@ export default class MessageBox extends Component {
-
-
-
-
-
-
-
-
- {this.props.title}
-
-
-
-
+ const progressInfo = showText && !textInside && (
+
-
-
diff --git a/src/message-box/index.js b/src/message-box/index.js
index f7dbfe248..24035569b 100644
--- a/src/message-box/index.js
+++ b/src/message-box/index.js
@@ -48,7 +48,7 @@ function next(props) {
document.body.style.setProperty('overflow', 'hidden');
}
- const component = React.createElement(MessageBox, Object.assign(props, {
+ const component = React.createElement(MessageBox, Object.assign({}, props, {
promise: { resolve, reject },
onClose: () => {
ReactDOM.unmountComponentAtNode(div);
diff --git a/src/message/Message.jsx b/src/message/Message.jsx
index 29952391c..314b7ec06 100644
--- a/src/message/Message.jsx
+++ b/src/message/Message.jsx
@@ -19,12 +19,12 @@ export default function Message(props = {}, type) {
}
const component = React.createElement(Toast, Object.assign(props, {
- onClose: (...args) => {
+ onClose: () => {
ReactDOM.unmountComponentAtNode(div);
document.body.removeChild(div);
if (props.onClose instanceof Function) {
- props.onClose.apply(this, args);
+ props.onClose();
}
}
}));
diff --git a/src/message/Toast.jsx b/src/message/Toast.jsx
index 495c1a0ce..f400fc3c1 100644
--- a/src/message/Toast.jsx
+++ b/src/message/Toast.jsx
@@ -25,6 +25,10 @@ export default class Toast extends Component {
this.startTimer();
}
+ componentWillUnmount() {
+ this.stopTimer();
+ }
+
onClose() {
this.stopTimer();
@@ -50,9 +54,7 @@ export default class Toast extends Component {
-
-
+ { this.props.showClose && }
diff --git a/src/notification/Notification.jsx b/src/notification/Notification.jsx
new file mode 100644
index 000000000..5af700a81
--- /dev/null
+++ b/src/notification/Notification.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Component, PropTypes, View } from '../../libs';
+
+const typeMap = {
+ success: 'circle-check',
+ info: 'information',
+ warning: 'warning',
+ error: 'circle-cross'
+};
+
+export default class Notification extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ visible: false
+ };
+ }
+
+ componentDidMount() {
+ this.setState({
+ visible: true
+ })
+
+ this.startTimer();
+ }
+
+ componentWillUnmount() {
+ this.stopTimer();
+ }
+
+ onClose() {
+ this.stopTimer();
+
+ this.setState({
+ visible: false
+ });
+
+ if (this.props.onClose) {
+ this.props.onClose();
+ }
+ }
+
+ startTimer() {
+ if (this.props.duration) {
+ this.timeout = setTimeout(() => {
+ this.onClose();
+ }, this.props.duration)
+ }
+ }
+
+ stopTimer() {
+ clearTimeout(this.timeout);
+ }
+
+ typeClass() {
+ return this.props.type && typeMap[this.props.type] ? `el-icon-${ typeMap[this.props.type] }` : '';
+ }
+
+ render() {
+ return (
+
+
+ )
+ }
+}
+
+Notification.propTypes = {
+ type: PropTypes.oneOf(['success', 'warning', 'info', 'error']),
+ title: PropTypes.string,
+ message: PropTypes.string,
+ duration: PropTypes.number,
+ top: PropTypes.number,
+/* eslint-disable */
+ onClose: PropTypes.func
+/* eslint-enable */
+}
+
+Notification.defaultProps = {
+ duration: 4500,
+ top: 16
+}
diff --git a/src/notification/NotificationCenter.jsx b/src/notification/NotificationCenter.jsx
new file mode 100644
index 000000000..5b96b3f8b
--- /dev/null
+++ b/src/notification/NotificationCenter.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Notification from './Notification';
+
+export default function NotificationCenter(props = {}, type) {
+ const div = document.createElement('div'), className = 'el-notification';
+
+ document.body.appendChild(div);
+
+ if (typeof props === 'string') {
+ props = {
+ message: props
+ };
+ }
+
+ if (type) {
+ props.type = type;
+ }
+
+ const instances = document.getElementsByClassName(className);
+
+ props.top = 0;
+
+ for (let i = 0, len = instances.length; i < len; i++) {
+ props.top += instances[i].offsetHeight + 16;
+ }
+
+ props.top += 16;
+
+ const component = React.createElement(Notification, Object.assign({}, props, {
+ onClose: () => {
+ ReactDOM.unmountComponentAtNode(div);
+ document.body.removeChild(div);
+
+ setTimeout(() => {
+ const instances = document.querySelectorAll('.el-notification');
+
+ for (let i = 0, len = instances.length; i < len; i++) {
+ const element = instances[i];
+
+ if (element.offsetTop > props.offsetHeight) {
+ element.style.top = `${element.offsetTop - props.offsetHeight - 16}px`;
+ }
+ }
+ })
+
+ if (props.onClose instanceof Function) {
+ props.onClose();
+ }
+ }
+ }));
+
+ ReactDOM.render(component, div, () => {
+ setTimeout(() => {
+ props.offsetHeight = div.getElementsByClassName(className)[0].offsetHeight;
+ });
+ });
+}
+
+/* eslint-disable */
+['success', 'warning', 'info', 'error'].forEach(type => {
+ NotificationCenter[type] = (options = {}) => {
+ return NotificationCenter(options, type);
+ };
+});
+/* eslint-enable */
diff --git a/src/notification/index.js b/src/notification/index.js
new file mode 100644
index 000000000..07cb1f033
--- /dev/null
+++ b/src/notification/index.js
@@ -0,0 +1,3 @@
+import NotificationCenter from './NotificationCenter';
+
+export default NotificationCenter;
diff --git a/src/progress/Progress.jsx b/src/progress/Progress.jsx
index 3a99c4c64..0c04b23f6 100644
--- a/src/progress/Progress.jsx
+++ b/src/progress/Progress.jsx
@@ -60,9 +60,9 @@ export default class Progress extends Component {
@@ -77,19 +77,18 @@ export default class Progress extends Component {
)
}
- const progressInfo = (
- {this.props.message}
+ { + this.props.title && ( +
+
- {this.props.title}
+ { this.props.showClose && }
-
+
+
+ )
+ }
{this.state.editorErrorMessage}
+ )
+ }
+ {
+ this.props.message && (
+
+
+
-
+
+
-
- {this.props.message}
+
+ {this.state.editorErrorMessage}
+ {this.props.message}
-
+ {
+ this.props.type &&
+ }
+
+
+ {this.props.title}
+
+ {this.props.message}
+ +
-
-
+ {
+ showText && textInside &&
{`${percentage}%`}
- {`${percentage}%`}
+ }
- {
- status ?
- : `${percentage}%`
- }
-
-
+ {
+ status ?
+ : `${percentage}%`
+ }
+
);
+
return (