jimu-mobile/src/components/actionsheet/actionsheet.js

积木组件库助力移动端开发

/**
 * Created by yanshenshen on 17/04/10.
 */

import React from 'react'
import classNames from 'classnames'

import Button from '../button'
import FadeInUp from '../fadeinup'


class ActionSheet extends React.Component {

  static propTypes = {
    menus: React.PropTypes.array,
    actions: React.PropTypes.array,
  }

  static defaultProps = {
    menus : [],
    actions : []
  }

  constructor(props) {
    super(props)
    this.state = {
      show : this.props.show
    }
  }

  fadeHide(){
    this.setState({
      show : false
    })
  }

  fadeShow(){
    this.setState({
      show : true
    })
  }

  renderMenuItem() {
    return this.props.menus.map((re, idx) => {
      const {label, className, ...others} = re
      const cls = classNames({
        'actionsheet-btn': true,
        [className]: className
      })

      return (
        <Button {...others} key={idx} className={cls}>{label}</Button>
      )
    })
  }

  renderActions() {
    return this.props.actions.map((action, idx) => {
      const {label, className, ...others} = action
      const cls = classNames({
        'actionsheet-btn': true,
        [className]: className
      })

      return (
        <Button {...others} key={idx} className={cls}>{label}</Button>
      )
    })
  }


  componentWillReceiveProps(nextprops){
    if (nextprops.show) {
      this.fadeShow()
    }else{
      this.fadeHide()
    }
  }

  render() {
    let self = this,
      {back,className}= this.props,
      {show} = this.state,
      cls = classNames({
        'jimu-actionsheet-layout': true,
        [className] : className
      })

    return (
      <div  className={cls}>
        <FadeInUp show={show} ref="fadeTip" changeFun={back} closeShow={false} contentPadding={false}>
          <div className="actionsheet-content">
            <div className="actionsheet-menu">
              {this.renderMenuItem()}
            </div>
            <div className="actionsheet-action">
              {this.renderActions()}
            </div>  
          </div>
        </FadeInUp>
      </div>
    )
  }
}

export default ActionSheet