taro-material/h5/Drawer/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro, { Component } from "@tarojs/taro-h5";
import { View } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { getClassName } from "../utils/styles";

import RMList from "../List/index";
import RMListItem from "../ListItem/index";

// import theme from '../styles/theme'

import './Drawer.scss';

export default class RMDrawer extends Component {
  constructor() {
    super(...arguments);
    this.state = { animShow: false };
    if (this.props.show) this.animShow();
  }

  onItemClick(item, e) {
    if (this.props.onItemClick) {
      const result = this.props.onItemClick(item);
      if (result === false) {
        return;
      }
    }
    this.animHide(e, item);
  }

  onHide() {
    this.setState({ show: false });
    this.props.onClose && this.props.onClose();
  }

  animHide() {
    this.setState({
      animShow: false
    });
    setTimeout(() => {
      this.onHide(...arguments);
    }, 300);
  }

  animShow() {
    this.setState({ show: true });
    setTimeout(() => {
      this.setState({
        animShow: true
      });
    }, 200);
  }

  onMaskClick() {
    this.animHide(...arguments);
  }

  preventMaskMove() {
    console.log('stop user scroll it!');
  }

  componentWillReceiveProps(props) {
    const { show } = props;
    if (show !== this.props.show) {
      if (show) this.animShow();else this.animHide(...arguments);
    }
  }

  render() {
    const {
      mask,
      width,
      right,
      items,
      itemsAlign,
      color,
      dark,
      ListProps,
      ListItemProps
    } = this.props;
    const { animShow, show } = this.state;
    let rootClassName = ['at-drawer'];

    const maskStyle = {
      display: mask ? 'block' : 'none',
      opacity: animShow ? 1 : 0
    };
    const listStyle = {
      width: `${width}px`,
      transition: animShow ? 'all 225ms cubic-bezier(0, 0, 0.2, 1)' : 'all 195ms cubic-bezier(0.4, 0, 0.6, 1)'
    };
    if (right) rootClassName.push('at-drawer--right');else rootClassName.push('at-drawer--left');

    if (animShow) rootClassName.push('at-drawer--show');
    rootClassName = rootClassName.filter(str => str !== '');

    return show && <View className={getClassName(rootClassName, this.props.className)} catchtouchmove={this.preventMaskMove}>
          <View className="at-drawer__mask" style={maskStyle} onClick={this.onMaskClick.bind(this)} />

          <View className={classNames({
        'at-drawer__content': true,
        [color]: true,
        dark
      })} style={listStyle}>
            <View className={classNames({ 'at-drawer__content__list': true, [itemsAlign]: true })}>
              {items.map((group, key) => <View key={group.id || group.name} className="at-drawer__wrapper">
                  <View className="at-drawer__list--title">{group.name}</View>
                  <RMList hasBorder={ListProps.hasBorder} customStyle={{
              ...ListProps.customStyle,
              ...{ backgroundColor: 'transparent' }
            }}>
                    {group.children.map((item, index) => <RMListItem key={item.id || item.title || item.name} data-index={item.id || item.title || item.name} onClick={this.onItemClick.bind(this, item)} arrow={item.arrow} disabled={item.disabled} note={item.note} title={item.title || item.name} thumb={item.thumb} iconThumb={item.iconThumb} iconThumbFill={item.iconThumbFill} iconThumbColor={item.iconThumbColor} isSwitch={item.isSwitch} switchIsCheck={item.switchIsCheck} extraText={item.extraText} extraTextColor={item.extraTextColor} extraThumb={item.extraThumb} extraIconThumb={item.extraIconThumb} extraIconThumbFill={item.extraIconThumbFill} extraIconThumbColor={item.extraIconThumbColor} hasBorder={ListItemProps.hasBorder} customStyle={ListItemProps.customStyle} customExtraStyle={ListItemProps.customExtraStyle} />)}
                  </RMList>
                </View>)}
              {this.props.children}
            </View>
          </View>
        </View>;
  }
}

RMDrawer.defaultProps = {
  show: false,
  mask: true,
  width: 368,
  right: false,
  items: [],
  itemsAlign: 'top',
  onItemClick: () => {},
  onClose: () => {},
  color: 'default',
  dark: false,
  ListProps: { hasBorder: false },
  ListItemProps: { hasBorder: true }
};

RMDrawer.propTypes = {
  show: PropTypes.bool,
  mask: PropTypes.bool,
  width: PropTypes.number,
  items: PropTypes.array,
  itemsAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
  onItemClick: PropTypes.func,
  onClose: PropTypes.func,
  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'error', 'success', 'warning', 'progress']),
  dark: PropTypes.bool,
  ListProps: PropTypes.object,
  ListItemProps: PropTypes.object
};