feat(message): 新增消息组件

src/app.js

@@ -30,6 +30,7 @@ class App extends Component {
       'pages/action/action-sheet/index',
       'pages/action/swipe-action/index',
       'pages/action/activity-indicator/index',
+      'pages/action/message/index',
       'pages/navigation/drawer/index',
       'pages/navigation/pagination/index',
       'pages/navigation/tabs/index',

src/components/message/__snapshots__/index.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AtMessage Snap render AtMessage -- props className 1`] = `"<div class=\\"at-message at-message--hidden at-message--info test\\"></div>"`;
+
+exports[`AtMessage Snap render AtMessage -- props customStyle 1`] = `"<div style=\\"color:red;\\" class=\\"at-message at-message--hidden at-message--info\\"></div>"`;
+
+exports[`AtMessage Snap render initial AtMessage 1`] = `"<div class=\\"at-message at-message--hidden at-message--info\\"></div>"`;

src/components/message/index.js

@@ -0,0 +1,80 @@
+import Taro from '@tarojs/taro'
+import PropTypes from 'prop-types'
+import { View } from '@tarojs/components'
+import classNames from 'classnames'
+
+import AtComponent from '../../common/component'
+import './index.scss'
+
+export default class AtMessage extends AtComponent {
+  static defaultProps = {
+    customStyle: '',
+    className: ''
+  }
+
+  static propTypes = {
+    customStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string
+    ]),
+    className: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.string
+    ]),
+  }
+
+  constructor () {
+    super(...arguments)
+    this.state = {
+      isOpened: false,
+      message: '',
+      type: 'info',
+      duration: 3000,
+    }
+    this._timer = null
+  }
+
+  componentDidMount () {
+    Taro.eventCenter.on('atMessage', (options = {}) => {
+      options.isOpened = true
+      this.setState(options)
+      clearTimeout(this._timer)
+      this._timer = setTimeout(() => {
+        this.setState({
+          isOpened: false
+        })
+      }, this.state.duration)
+    })
+  }
+
+  componentWillUnmount () {
+    Taro.eventCenter.off('atMessage')
+  }
+
+  render () {
+    const {
+      className,
+      customStyle,
+    } = this.props
+
+    const {
+      message,
+      isOpened,
+      type,
+    } = this.state
+
+    return (
+      <View
+        className={
+          classNames({
+            'at-message': true,
+            'at-message--show': isOpened,
+            'at-message--hidden': !isOpened
+          }, `at-message--${type}`, className)}
+        style={customStyle}
+      >
+        {message}
+      </View>
+    )
+  }
+}

src/components/message/index.scss

@@ -0,0 +1,41 @@
+@import "../../style/theme/default.scss";
+@import "../../style/mixins/index.scss";
+
+.at-message {
+  position: fixed;
+  top: 0;
+  z-index: $zindex-toast;
+  width: 100%;
+  font-size: $font-size-base;
+  padding: $spacing-v-sm $spacing-h-sm;
+  line-height: $line-height-zh;
+  text-align: center;
+  background-color: $color-info;
+  color: $color-white;
+  animation: ease both;
+  opacity: 0;
+  transform: translate3d(0, -100%, 0);
+  transition: all 300ms $ease-in-sine;
+
+  &--success {
+    background-color: $color-success;
+  }
+
+  &--error {
+    background-color: $color-error;
+  }
+
+  &--warning {
+    background-color: $color-warning;
+  }
+
+  &--show {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  &--hidden {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+}

src/components/message/index.test.js

@@ -0,0 +1,21 @@
+import Nerv from 'nervjs'
+import { renderToString } from 'nerv-server'
+
+import AtMessage from '../../../.temp/components/message/index'
+
+describe('AtMessage Snap', () => {
+  it('render initial AtMessage', () => {
+    const component = renderToString(<AtMessage />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtMessage -- props className', () => {
+    const component = renderToString(<AtMessage className='test' />)
+    expect(component).toMatchSnapshot()
+  })
+
+  it('render AtMessage -- props customStyle', () => {
+    const component = renderToString(<AtMessage customStyle='color:red;' />)
+    expect(component).toMatchSnapshot()
+  })
+})

src/index.js

@@ -51,6 +51,7 @@ export { default as AtDivider } from './components/divider'
 export { default as AtCountDown } from './components/count-down'
 export { default as AtSteps } from './components/steps'
 export { default as AtCurtain } from './components/curtain'
+export { default as AtMessage } from './components/message'
 
 /* 私有的组件  */
 export { default as AtLoading } from './components/loading'

src/pages/action/message/index.js

@@ -0,0 +1,65 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import DocsHeader from '../../components/doc-header'
+import AtMessage from '../../../components/message/index'
+import AtButton from '../../../components/button/index'
+
+import './index.scss'
+
+export default class ToastPage extends Component {
+  config = {
+    navigationBarTitleText: 'Taro UI'
+  }
+
+  handleClick (type) {
+    Taro.eventCenter.trigger(
+      'atMessage',
+      {
+        'message': '消息通知',
+        'type': type,
+      }
+    )
+  }
+
+  render () {
+    return (
+      <View className='page toast-page'>
+        {/* S Header */}
+        <DocsHeader title='Message 全局消息' />
+        {/* E Header */}
+
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>基本案例</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <AtButton onClick={this.handleClick.bind(this)}>
+                  普通消息
+                </AtButton>
+              </View>
+              <View className='example-item'>
+                <AtButton onClick={this.handleClick.bind(this, 'success')}>
+                  成功消息
+                </AtButton>
+              </View>
+              <View className='example-item'>
+                <AtButton onClick={this.handleClick.bind(this, 'error')}>
+                  错误消息
+                </AtButton>
+              </View>
+              <View className='example-item'>
+                <AtButton onClick={this.handleClick.bind(this, 'warning')}>
+                  警告消息
+                </AtButton>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
+        <AtMessage />
+      </View>
+    )
+  }
+}

src/pages/action/message/index.scss

@@ -0,0 +1,5 @@
+.toast-page .example__body {
+  &-button {
+    display: inline-block;
+  }
+}

src/pages/panel/index.js

@@ -138,6 +138,10 @@ export default class PanelBasic extends Component {
           {
             id: 'Swipe-Action',
             name: '滑动操作'
+          },
+          {
+            id: 'Message',
+            name: '消息通知'
           }
         ],
         form: [