"DashboardMonitor/src/components/ActiveChart/index.tsx" did not exist on "cfbf108b7b2cb35e16e5312ab2e4f3199044cf76"
autoHeight.tsx 1.92 KB
Newer Older
陈帅's avatar
陈帅 committed
1 2 3 4 5 6 7 8
import React from 'react';

export type IReactComponent<P = any> =
  | React.StatelessComponent<P>
  | React.ComponentClass<P>
  | React.ClassicComponentClass<P>;

function computeHeight(node: HTMLDivElement) {
陈帅's avatar
陈帅 committed
9 10
  const { style } = node;
  style.height = '100%';
陈帅's avatar
陈帅 committed
11
  const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
陈帅's avatar
陈帅 committed
12
  const padding =
陈帅's avatar
陈帅 committed
13 14
    parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
    parseInt(`${getComputedStyle(node).paddingBottom}`, 10);
陈帅's avatar
陈帅 committed
15 16 17 18 19 20 21 22
  return totalHeight - padding;
}

function getAutoHeight(n: HTMLDivElement) {
  if (!n) {
    return 0;
  }

陈帅's avatar
陈帅 committed
23
  const node = n;
陈帅's avatar
陈帅 committed
24 25 26 27 28 29 30 31 32 33

  let height = computeHeight(node);
  const parentNode = node.parentNode as HTMLDivElement;
  if (parentNode) {
    height = computeHeight(parentNode);
  }

  return height;
}

陈帅's avatar
陈帅 committed
34
interface AutoHeightProps {
陈帅's avatar
陈帅 committed
35 36 37 38
  height?: number;
}

function autoHeight() {
陈帅's avatar
陈帅 committed
39
  return <P extends AutoHeightProps>(
陈帅's avatar
陈帅 committed
40
    WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
陈帅's avatar
陈帅 committed
41 42
  ): React.ComponentClass<P> => {
    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
陈帅's avatar
陈帅 committed
43 44 45
      state = {
        computedHeight: 0,
      };
陈帅's avatar
陈帅 committed
46

陈帅's avatar
陈帅 committed
47
      root: HTMLDivElement | null = null;
陈帅's avatar
陈帅 committed
48

陈帅's avatar
陈帅 committed
49 50
      componentDidMount() {
        const { height } = this.props;
陈帅's avatar
陈帅 committed
51
        if (!height && this.root) {
陈帅's avatar
陈帅 committed
52
          let h = getAutoHeight(this.root);
陈帅's avatar
陈帅 committed
53 54
          this.setState({ computedHeight: h });
          if (h < 1) {
陈帅's avatar
陈帅 committed
55
            h = getAutoHeight(this.root);
陈帅's avatar
陈帅 committed
56 57 58 59
            this.setState({ computedHeight: h });
          }
        }
      }
陈帅's avatar
陈帅 committed
60

陈帅's avatar
陈帅 committed
61 62 63
      handleRoot = (node: HTMLDivElement) => {
        this.root = node;
      };
陈帅's avatar
陈帅 committed
64

陈帅's avatar
陈帅 committed
65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
      render() {
        const { height } = this.props;
        const { computedHeight } = this.state;
        const h = height || computedHeight;
        return (
          <div ref={this.handleRoot}>
            {h > 0 && <WrappedComponent {...this.props} height={h} />}
          </div>
        );
      }
    }
    return AutoHeightComponent;
  };
}
export default autoHeight;