taro-material/h5/components/curtain/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import PropTypes from 'prop-types';
import { View } from '@tarojs/components';
import classNames from 'classnames';
import AtComponent from "../../common/component";

export default class AtCurtain extends AtComponent {
  onClose(e) {
    e.stopPropagation();
    this.props.onClose(...arguments);
  }

  _stopPropagation(e) {
    e.stopPropagation();
  }

  render() {
    const {
      className,
      customStyle,
      isOpened,
      closeBtnPosition
    } = this.props;

    const curtainClass = classNames({
      'at-curtain': true,
      'at-curtain--closed': !isOpened
    }, className);
    const btnCloseClass = classNames({
      'at-curtain__btn-close': true,
      [`at-curtain__btn-close--${closeBtnPosition}`]: closeBtnPosition
    });

    return <View className={curtainClass} style={customStyle} onClick={this._stopPropagation}>
        <View className="at-curtain__container">
          <View className="at-curtain__body">
            {this.props.children}
            <View className={btnCloseClass} onClick={this.onClose.bind(this)}></View>
          </View>
        </View>
      </View>;
  }
}

AtCurtain.defaultProps = {
  customStyle: '',
  className: '',
  isOpened: false,
  closeBtnPosition: 'bottom',
  onClose: () => {}
};

AtCurtain.propTypes = {
  customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  isOpened: PropTypes.bool,
  closeBtnPosition: PropTypes.string,
  onClose: PropTypes.func
};