xcandy/dist/h5/xcComponents/Drawer/index.js

A UI framework for taro.js

import { Component } from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { View } from '@tarojs/components';
import classnames from 'classnames';
import XcMask from '../Mask';
import './index.scss';
const placements = {
  top: 'top',
  right: 'right',
  bottom: 'bottom',
  left: 'left'
};
class XcDrawer extends Component {
  constructor() {
    super(...arguments);
  }
  render() {
    const { placement, show, mask } = this.props;
    const placementClassName = `xc-drawer__content--${placements[placement] || placements.bottom}`;
    const contentClassNames = classnames('xc-drawer__content', placementClassName, {
      'xc-drawer__content--no-mask': !mask,
      [`${placementClassName}--show`]: show
    });
    return <View className="xc-drawer">
        {mask ? <XcMask show={show} onClickMask={this.handleClickMask}>
            <View className={contentClassNames}>{this.props.children}</View>
          </XcMask> : <View className={contentClassNames}>{this.props.children}</View>}
      </View>;
  }
  handleClickMask = () => {
    const { onClickMask } = this.props;
    onClickMask && onClickMask();
  };
}
XcDrawer.defaultProps = {
  show: false,
  mask: true,
  placement: 'bottom'
};
export default XcDrawer;