content: import React from 'react';
  import PropTypes from 'prop-types';
  import injectSheet from 'react-jss';
  import classNames from 'classnames';
  
  const styles = {
    button: {
      '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
      // eslint-disable-next-line
          '-webkit-tap-highlight-color': 'transparent',
      '&:focus': {
        outline: 'none',
      },
    },
  
    wrapper: {
      transition: 'opacity 500ms cubic-bezier(0.03, 0.72, 0.36, 0.99)',
      position: 'fixed',
      top: 0,
      left: 0,
      zIndex: 998,
      width: '100%',
      height: '100%',
      opacity: 0,
    },
  
    block_layer: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
    },
  
    bottom_sheet: {
      transition: 'transform 500ms cubic-bezier(0.03, 0.72, 0.36, 0.99)',
      transform: 'translate3d(0, 100%, 0)',
      position: 'absolute',
      bottom: 0,
      zIndex: 999,
      width: '100%',
      backgroundColor: '#fff',
    },
    bottom_sheet_item: {
      display: 'block',
      width: '100%',
      backgroundColor: '#fff',
      textAlign: 'center',
      padding: props => `${props.itemPadding} 0`,
      border: 'none',
      borderTop: '0.02rem solid #ededed',
      fontSize: props => props.fontSize,
      color: 'rgba(0,0,0,.87)',
    },
    bottom_sheet_item_cancel: {
      color: '#d0021b',
    },
  
    wrapper_hide: {
      display: 'none',
    },
    wrapper_enter: {
      opacity: 1,
    },
    bottom_sheet_enter: {
      transform: 'translate3d(0, 0, 0)',
    },
  };
  
  class BottomSheet extends React.Component {
      static propTypes = {
        showBlockLayer: PropTypes.bool,
        visible: PropTypes.bool,
        className: PropTypes.string,
        onClose: PropTypes.func.isRequired,
        appendCancelBtn: PropTypes.bool,
        customLayout: PropTypes.string,
        fontSize: PropTypes.string,
        itemPadding: PropTypes.string,
      };
  
      static defaultProps = {
        showBlockLayer: true,
        visible: true,
        className: '',
        appendCancelBtn: true,
        fontSize: '.32rem',
        itemPadding: '.40rem',
      };
  
      constructor(props) {
        super(props);
  
        this.state = {
          isShow: false,
          animationState: 'leave',
        };
      }
  
      componentDidMount() {
        if (this.props.visible) {
          this.enter();
        }
      }
  
      shouldComponentUpdate(nextProps, nextState) {
        if (Object.is(this.state, nextState) && Object.is(this.props, nextProps)) {
          return false;
        }
        return true;
      }
  
      componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
          this.enter();
        } else if (this.props.visible && !nextProps.visible) {
          this.leave();
        }
      }
  
      enter() {
        this.setState({
          isShow: true,
        });
        setTimeout(() => {
          document.getElementsByTagName('html')[0].style.overflow = 'hidden';
          this.setState({
            animationState: 'enter',
          });
        }, 50);
      }
  
      leave() {
        this.setState({
          animationState: 'leave',
        });
        setTimeout(this.onClose.bind(this), 500);
      }
  
      onClose() {
        if (this.state.animationState === 'leave') {
          document.getElementsByTagName('html')[0].style.overflow = 'auto';
          this.setState({
            isShow: false,
          });
        }
  
        this.props.onCloseFinishAnimation && this.props.onCloseFinishAnimation();
      }
  
      componentWillUnmount() {
        document.getElementsByTagName('html')[0].style.overflow = 'auto';
      }
  
      render() {
        const { classes } = this.props;
        const layer = this.props.showBlockLayer ? <div className={classes.block_layer} onClick={this.props.onClose} /> : null;
  
        return (
          <div className={classNames(classes.wrapper, {
                                  [classes.wrapper_enter]: this.state.animationState === 'enter',
                                  [classes.wrapper_hide]: !this.state.isShow,
                              }, this.props.className)}
          >
            {layer}
            {this.props.customLayout}
            <div className={classNames(classes.bottom_sheet, { [classes.bottom_sheet_enter]: this.state.animationState === 'enter' })}>
              {this.props.children}
              {this.props.list && this.props.list.map((item, idx) => (<button key={idx} className={classes.bottom_sheet_item} onClick={item.handler}>{item.title}</button>))}
              {this.props.appendCancelBtn && (() => (<button className={classNames(classes.bottom_sheet_item, classes.bottom_sheet_item_cancel)} onClick={this.props.onClose}>取消</button>))()}
            </div>
          </div>
        );
      }
  }
  
  export default injectSheet(styles)(BottomSheet);
  