zent/portal/src/withNonScrollable.js

一套前端设计语言和基于React的实现

import React, { Component, PropTypes } from 'react';
import { getNodeFromSelector } from './util';

/**
  Provides an HOC component for ensuring container is non-scrollable during component
  lifecycle.
**/
export default function withNonScrollable(Portal) {
  return class NonScrollableWrapper extends Component {
    static propTypes = {
      selector: PropTypes.string
    };

    static defaultProps = {
      selector: 'body'
    };

    restoreStyle() {
      const node = getNodeFromSelector(this.props.selector);
      node.style.overflow = this.originalOverflow;
    }

    saveStyle() {
      const node = getNodeFromSelector(this.props.selector);
      const { style } = node;
      this.originalOverflow = style.overflow;
      style.overflow = 'hidden';
    }

    componentDidMount() {
      if (this.props.visible) {
        this.saveStyle();
      }
    }

    componentWillUnmount() {
      if (this.props.visible) {
        this.restoreStyle();
      }
    }

    componentWillReceiveProps(nextProps) {
      if (this.props.visible !== nextProps.visible) {
        if (nextProps.visible === false) {
          this.restoreStyle();
        } else {
          this.saveStyle();
        }
      }
    }

    render() {
      return <Portal {...this.props} />;
    }
  };
}