taro-material/h5/components/float-layout/index.js

Mini Program components that implement Google's Material Design.

import Nerv from "nervjs";
/* eslint-disable taro/function-naming */
import Taro from "@tarojs/taro-h5";
import { View, Text, ScrollView } from '@tarojs/components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import _isFunction from 'lodash/isFunction';

import AtComponent from "../../common/component";
import { handleTouchScroll } from "../../common/utils";

export default class AtFloatLayout extends AtComponent {
  constructor(props) {
    super(...arguments);

    const { isOpened } = props;
    this.state = {
      _isOpened: isOpened
    };
  }

  componentWillReceiveProps(nextProps) {
    const { isOpened } = nextProps;

    if (this.props.isOpened !== isOpened) {
      handleTouchScroll(isOpened);
    }

    if (isOpened !== this.state._isOpened) {
      this.setState({
        _isOpened: isOpened
      });
    }
  }

  handleClose = () => {
    if (_isFunction(this.props.onClose)) {
      this.props.onClose();
    }
  };

  close = () => {
    this.setState({
      _isOpened: false
    }, this.handleClose);
  };

  handleTouchMove = e => {
    e.stopPropagation();
  };

  render() {
    const { _isOpened } = this.state;
    const {
      title,

      scrollY,
      scrollX,
      scrollTop,
      scrollLeft,
      upperThreshold,
      lowerThreshold,
      scrollWithAnimation
    } = this.props;

    const rootClass = classNames('at-float-layout', {
      'at-float-layout--active': _isOpened
    }, this.props.className);

    return <View className={rootClass} onTouchMove={this.handleTouchMove}>
        <View onClick={this.close} className="at-float-layout__overlay" />
        <View className="at-float-layout__container layout">
          {title ? <View className="layout-header">
              <Text className="layout-header__title">{title}</Text>
              <View className="layout-header__btn-close" onClick={this.close} />
            </View> : null}
          <View className="layout-body">
            <ScrollView scrollY={scrollY} scrollX={scrollX} scrollTop={scrollTop} scrollLeft={scrollLeft} upperThreshold={upperThreshold} lowerThreshold={lowerThreshold} scrollWithAnimation={scrollWithAnimation} onScroll={this.props.onScroll} onScrollToLower={this.props.onScrollToLower} onScrollToUpper={this.props.onScrollToUpper} className="layout-body__content">
              {this.props.children}
            </ScrollView>
          </View>
        </View>
      </View>;
  }
}

AtFloatLayout.defaultProps = {
  title: '',
  isOpened: false,

  scrollY: true,
  scrollX: false,
  scrollWithAnimation: false,

  onClose: () => {},
  onScroll: () => {},
  onScrollToLower: () => {},
  onScrollToUpper: () => {}
};

AtFloatLayout.propType = {
  title: PropTypes.string,
  isOpened: PropTypes.bool,
  scrollY: PropTypes.bool,
  scrollX: PropTypes.bool,
  scrollTop: PropTypes.number,
  scrollLeft: PropTypes.number,
  upperThreshold: PropTypes.number,
  lowerThreshold: PropTypes.number,
  scrollWithAnimation: PropTypes.bool,
  onClose: PropTypes.func,
  onScroll: PropTypes.func,
  onScrollToLower: PropTypes.func,
  onScrollToUpper: PropTypes.func
};