Merge pull request #162 from jayZOU/master

add notification component

packages/omi-element-ui/src/elements/notification/_index.css

@@ -0,0 +1,7 @@
+.group {
+	margin: 50px;
+}
+
+.group el-button{
+	margin-left: 20px;
+}

packages/omi-element-ui/src/elements/notification/index.js

@@ -0,0 +1,180 @@
+import { tag, WeElement } from 'omi'
+import style from './_index.css'
+
+import notify from '../../omi-element-ui/el-notification'
+import '../../omi-element-ui/el-button'
+
+@tag('my-app')
+class MyApp extends WeElement {
+  css() {
+    return style
+  }
+
+  open = () => {
+    notify({
+      title: '提示',
+      message: '这是一条自动关闭的消息'
+    })
+  }
+
+  open1 = () => {
+    notify({
+      title: '提示',
+      message: '这是一条不会自动关闭的消息',
+      duration: 0
+    })
+  }
+
+  open2 = () => {
+    notify({
+      title: '成功',
+      message: '这是一条成功的消息',
+      type: 'success'
+    })
+  }
+
+  open3 = () => {
+    notify({
+      title: '警告',
+      message: '这是一条警告的消息',
+      type: 'warning'
+    })
+  }
+
+  open4 = () => {
+    notify({
+      title: '消息',
+      message: '这是一条普通的消息',
+      type: 'info'
+    })
+  }
+
+  open5 = () => {
+    notify({
+      title: '错误',
+      message: '这是一条错误的消息',
+      type: 'error'
+    })
+  }
+
+  open6 = () => {
+    notify({
+      title: '消息',
+      message: '这是一条右上角的消息'
+    })
+  }
+
+  open7 = () => {
+    notify({
+      title: '消息',
+      message: '这是一条右下角的消息',
+      position: 'bottom-right'
+    })
+  }
+
+  open8 = () => {
+    notify({
+      title: '消息',
+      message: '这是一条左下角的消息',
+      position: 'bottom-left'
+    })
+  }
+
+  open9 = () => {
+    notify({
+      title: '消息',
+      message: '这是一条左上角的消息',
+      position: 'top-left'
+    })
+  }
+
+  open10 = () => {
+    notify({
+      title: '偏移消息',
+      message: '这是一条带偏移的消息',
+      offset: 100
+    })
+  }
+
+  open11 = () => {
+    notify({
+      title: 'HTML片段',
+      message: (
+        <strong>
+          这是 <i>HTML</i> 片段
+        </strong>
+      )
+    })
+  }
+
+  open12 = () => {
+    notify({
+      title: '隐藏关闭按钮',
+      message: '这是一条隐藏关闭按钮的消息',
+      showClose: false
+    })
+  }
+
+  render(props, data) {
+    return (
+      <div>
+        <div class="group">
+          <el-button onClick={this.open} plain>
+            可自动关闭
+          </el-button>
+          <el-button onClick={this.open1} plain>
+            不会自动关闭
+          </el-button>
+        </div>
+
+        <div class="group">
+          <el-button onClick={this.open2} plain>
+            成功
+          </el-button>
+          <el-button onClick={this.open3} plain>
+            警告
+          </el-button>
+          <el-button onClick={this.open4} plain>
+            消息
+          </el-button>
+          <el-button onClick={this.open5} plain>
+            错误
+          </el-button>
+        </div>
+
+        <div class="group">
+          <el-button onClick={this.open6} plain>
+            右上角
+          </el-button>
+          <el-button onClick={this.open7} plain>
+            右下角
+          </el-button>
+          <el-button onClick={this.open8} plain>
+            左下角
+          </el-button>
+          <el-button onClick={this.open9} plain>
+            左上角
+          </el-button>
+        </div>
+
+        <div class="group">
+          <el-button onClick={this.open10} plain>
+            偏移的消息
+          </el-button>
+        </div>
+
+        <div class="group">
+          <el-button onClick={this.open11} plain>
+            使用HTML片段
+          </el-button>
+        </div>
+
+        <div class="group">
+          <el-button onClick={this.open12} plain>
+            隐藏关闭按钮
+          </el-button>
+        </div>
+      </div>
+    )
+  }
+}

packages/omi-element-ui/src/notification.js

@@ -0,0 +1,5 @@
+import { render } from 'omi'
+import './assets/index.css'
+import './elements/notification'
+
+render(<my-app />, '#root')

packages/omi-element-ui/src/omi-element-ui/el-notification/index.js

@@ -0,0 +1,72 @@
+import { render, define, getHost } from 'omi'
+import '../style/global/index.css'
+import notification from '../style/_notification.scss'
+import icon from '../../omi-element-ui/style/global/_icon.scss'
+
+const offsetHeight = 94
+
+define('el-notification', props => {
+  let notifiDom = document.querySelectorAll(
+    `el-notification[type="${props.ops.position}"]`
+  )
+  let closeBtn = null
+  let position = props.ops.position.split('-')
+
+  const close = evt => {
+    document.body.removeChild(getHost(evt.currentTarget || evt.parentNode))
+
+    notifiDom = document.querySelectorAll(
+      `el-notification[type="${props.ops.position}"]`
+    )
+
+    for (let i = 0; i < notifiDom.length; i++) {
+      notifiDom[i].host[1].style[position[0]] = `${offsetHeight * i +
+        props.ops.offset}px`
+    }
+  }
+
+  if (props.ops.duration !== 0) {
+    setTimeout(() => {
+      close(closeBtn)
+    }, 4500)
+  }
+  return [
+    <style>{notification + icon}</style>,
+    <div
+      class={`el-notification ${position[1]}`}
+      style={`${position[0]}: ${offsetHeight * (notifiDom.length - 1) +
+        props.ops.offset}px; z-index: 2129;`}
+    >
+      {props.ops.type && (
+        <i class={`el-notification__icon el-icon-${props.ops.type}`} />
+      )}
+      <div
+        class={`el-notification__group ${props.ops.type ? 'is-with-icon' : ''}`}
+      >
+        <h2 class="el-notification__title">{props.ops.title}</h2>
+        <div class="el-notification__content">
+          <p>{props.ops.message}</p>
+        </div>
+        {props.ops.showClose ? (
+          <div
+            ref={e => (closeBtn = e)}
+            class="el-notification__closeBtn el-icon-close"
+            onClick={evt => close(evt)}
+          />
+        ) : (
+          <div ref={e => (closeBtn = e)} />
+        )}
+      </div>
+    </div>
+  ]
+})
+
+const Notification = function(opts) {
+  opts.position = opts.position || 'top-right'
+  opts.offset = opts.offset || 16
+  opts.showClose = opts.showClose === false ? false : true
+
+  render(<el-notification type={opts.position} ops={opts} />, document.body)
+}
+
+export default Notification

packages/omi-element-ui/src/omi-element-ui/style/index.scss

@@ -1,6 +1,6 @@
 @import "./base.scss";
 @import "./pagination.scss";
-@import "./dialog.scss";
+@import "dialog";
 @import "./autocomplete.scss";
 @import "./dropdown.scss";
 @import "./dropdown-menu.scss";
@@ -38,7 +38,7 @@
 @import "./tag.scss";
 @import "./tree.scss";
 @import "./alert.scss";
-@import "./notification.scss";
+@import "notification";
 @import "./slider.scss";
 @import "./loading.scss";
 @import "./row.scss";