Merge branch 'dev' of github.com:koppthe/taro-ui into dev

* 'dev' of github.com:koppthe/taro-ui:
  feat(navigation): 增加timeline、drawer

src/app.js

@@ -26,6 +26,8 @@ class App extends Component {
       'pages/view/tag/index',
       'pages/view/avatar/index',
       'pages/view/article/index',
+      'pages/navigation/timeline/index',
+      'pages/navigation/drawer/index',
       'pages/navigation/tabs/index'
       // 'pages/layout/flex/index'
       // 'pages/layout/grid/index',

src/components/drawer/index.js

@@ -0,0 +1,76 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import AtIcon from '../icon/index'
+
+import './index.scss'
+
+export default class AtDrawer extends Taro.Component {
+  constructor () {
+    super(...arguments)
+    this.state = {
+
+    }
+    this.onItemClick = this.onItemClick.bind(this)
+  }
+
+  onItemClick (index) {
+    console.log('=====', index)
+  }
+
+  render () {
+    const {
+      show,
+      mask,
+      width,
+      right,
+      items,
+    } = this.props
+    let rootClassName = ['at-drawer']
+    const showAnimClass = show ? 'anim-show' : 'anim-hide'
+    const rootStyle = {
+      display: show ? 'block' : 'none',
+    }
+    const maskStyle = {
+      display: mask ? 'block' : 'none',
+    }
+    const listStyle = {
+      width,
+    }
+    if (right) {
+      listStyle.right = '0px'
+      listStyle.left = 'auto'
+    }
+    rootClassName.push(showAnimClass)
+    rootClassName = rootClassName.filter(str => str !== '')
+
+    return (
+      <View className={rootClassName} style={rootStyle}>
+        <View className='at-drawer__mask' style={maskStyle}></View>
+
+        <View className='at-drawer__content' style={listStyle}>
+          <View className='at-drawer__list'>
+            {
+              items.map((name, index) => <View className='at-drawer__list-item' key={index} onClick={this.onItemClick}>{name}<AtIcon value='activity'></AtIcon></View>)
+            }
+          </View>
+        </View>
+      </View>
+    )
+  }
+}
+
+AtDrawer.defaultProps = {
+  show: false,
+  mask: true,
+  width: '230px',
+  right: false,
+  items: [],
+}
+
+AtDrawer.propTypes = {
+  show: PropTypes.bool,
+  mask: PropTypes.bool,
+  width: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.string),
+}

src/components/drawer/index.scss

@@ -0,0 +1,39 @@
+
+.at-drawer {
+  position: relative;
+  z-index: 900;
+
+  &__mask {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &__content {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 460px;
+    background-color: #fff;
+    z-index: 1;
+    text-align: left;
+  }
+
+  &__list {
+    margin: 0 0 0 18px;
+    max-height: 100%;
+    overflow-y: scroll;
+
+    &-item {
+      height: 90px;
+      line-height: 90px;
+      font-size: 34px;
+      color: #000;
+      border-bottom: 1px solid #ddd;
+    }
+  }
+}

src/components/timeline/index.js

@@ -0,0 +1,40 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PropTypes from 'prop-types'
+
+import './index.scss'
+
+export default class AtTimeline extends Taro.Component {
+  constructor () {
+    super(...arguments)
+    this.state = {
+
+    }
+  }
+
+  onClick () {
+  }
+
+  render () {
+    const {
+      pending,
+    } = this.props
+    let rootClassName = ['at-timeline']
+    const pendingClass = pending ? 'at-timeline--pending' : ''
+    rootClassName.push(pendingClass)
+    rootClassName = rootClassName.filter(str => str !== '')
+    return (
+      <View className={rootClassName}>
+        {this.props.children}
+      </View>
+    )
+  }
+}
+
+AtTimeline.defaultProps = {
+  pending: false,
+}
+
+AtTimeline.propTypes = {
+  pending: PropTypes.bool,
+}

src/components/timeline/index.scss

@@ -0,0 +1,118 @@
+
+.at-timelineitem {
+  position: relative;
+  padding: 0 0 12px;
+
+  &__content {
+    font-size: 28px;
+    color: #333;
+    text-align: left;
+    margin-left: 36px;
+    height: 50px;
+  }
+
+  &__dot,
+  &__icon {
+    font-size: 0;
+    position: absolute;
+    left: 0;
+    top: 8px;
+    width: 36px;
+    height: 30px;
+    box-sizing: border-box;
+    background-color: #fff;
+    z-index: 1;
+    text-align: left;
+  }
+
+  &__dot {
+    &::after {
+      content: '';
+      width: 20px;
+      height: 18px;
+      display: inline-block;
+      box-sizing: border-box;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      border-color: #78A4FA;
+      margin-top: 5px;
+    }
+
+    &.at-timelineitem__icon {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  &__icon {
+    left: -5px;
+    // top: 7px;
+    color: #78A4FA;
+    // padding-top: 2px;
+  }
+
+  &--green {
+    .at-timelineitem__icon {
+      color: #00D06D;
+    }
+
+    .at-timelineitem__dot {
+      &::after {
+        border-color: #00D06D;
+      }
+    }
+  }
+
+  &--red {
+    .at-timelineitem__icon {
+      color: #FF4849;
+    }
+
+    .at-timelineitem__dot {
+      &::after {
+        border-color: #FF4849;
+      }
+    }
+  }
+
+  &--yellow {
+    .at-timelineitem__icon {
+      color: #FFCA3E;
+    }
+
+    .at-timelineitem__dot {
+      &::after {
+        border-color: #FFCA3E;
+      }
+    }
+  }
+
+  &__tail {
+    position: absolute;
+    top: 20px;
+    bottom: -10px;
+    left: 8px;
+    border-left: 2px solid #ececec;
+  }
+}
+
+.at-timeline {
+  .at-timelineitem:last-child {
+    .at-timelineitem__tail {
+      display: none;
+    }
+  }
+
+  &--pending {
+    .at-timelineitem:nth-last-child(2) {
+      .at-timelineitem__content {
+        height: 80px;
+      }
+
+      .at-timelineitem__tail {
+        border-left-style: dotted;
+      }
+    }
+  }
+}

src/components/timeline/item.js

@@ -0,0 +1,53 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import AtIcon from '../icon/index'
+
+import './index.scss'
+
+export default class AtTimelineItem extends Taro.Component {
+  constructor () {
+    super(...arguments)
+    this.state = {
+
+    }
+  }
+
+  onClick () {
+  }
+
+  render () {
+    const {
+      color,
+      icon,
+    } = this.props
+    let rootClassName = ['at-timelineitem']
+    const colorClass = color ? `at-timelineitem--${color}` : ''
+    rootClassName.push(colorClass)
+    rootClassName = rootClassName.filter(str => str !== '')
+    const dotClass = ['at-timelineitem__dot']
+    if (icon) dotClass.push('at-timelineitem__icon')
+
+    return (
+      <View className={rootClassName}>
+        <View className='at-timelineitem__tail'></View>
+        <View className={dotClass}>
+          {icon && <AtIcon value={icon} size='16'></AtIcon>}
+        </View>
+        <View className='at-timelineitem__content'>
+          {this.props.children}
+        </View>
+      </View>
+    )
+  }
+}
+
+AtTimelineItem.defaultProps = {
+  color: 'blue',
+  icon: '',
+}
+
+AtTimelineItem.propTypes = {
+  color: PropTypes.string,
+  icon: PropTypes.string,
+}

src/pages/index/index.js

@@ -167,6 +167,10 @@ export default class Index extends Taro.Component {
             {
               title: '抽屉',
               name: 'Drawer'
+            },
+            {
+              title: '时间轴',
+              name: 'Timeline'
             }
           ]
         }

src/pages/navigation/drawer/index.js

@@ -0,0 +1,42 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import AtDrawer from '../../../components/drawer/index'
+import AtButton from '../../../components/button/index'
+
+import './index.scss'
+
+export default class DrawerPage extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Drawer Page'
+  }
+  constructor () {
+    super(...arguments)
+    this.state = {
+      drawerShow: true,
+    }
+  }
+
+  onClick () {
+    this.setState({
+      drawerShow: !this.state.drawerShow,
+    })
+  }
+
+  onClose () {
+    this.setState({
+      drawerShow: false,
+    })
+  }
+
+  render () {
+    return (
+      <View className='page'>
+
+        <View className='example'>
+          <AtButton onClick={this.onClick.bind(this)}>显示drawer</AtButton>
+          <AtDrawer show={this.state.drawerShow} onClose={this.onClose.bind(this)} items={['菜单1', '菜单2']}></AtDrawer>
+        </View>
+      </View>
+    )
+  }
+}