为模块主界面所有子组件提供主界面宽度和高度信息。

package-lock.json

@@ -17560,9 +17560,9 @@
       }
     },
     "react-sizeme": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.4.2.tgz",
-      "integrity": "sha512-MIMsxausKDlDR6cc/ofWzyddFz78UfMtkLGnbiTmWl/ohHLv9Eme52auABG6uNBjM4eJYQUzs+o8OFWtYjlO+g==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.4.1.tgz",
+      "integrity": "sha512-5dIyJfvJH5f7ZomwZYJkPL9KHzTqW/DkexZAUuz3st0BmB0/dBy6zjiVqwUE3CosmH9yQv8BcUW0Un2OZ7rUsw==",
       "requires": {
         "element-resize-detector": "^1.1.12",
         "invariant": "^2.2.2",

package.json

@@ -28,6 +28,7 @@
     "github-markdown-css": "^2.10.0",
     "highlight.js": "^9.12.0",
     "history": "^4.7.2",
+    "hoist-non-react-statics": "^2.5.0",
     "is-promise": "^2.1.0",
     "lodash": "^4.17.10",
     "lowdb": "^1.0.0",
@@ -39,7 +40,7 @@
     "react-json-view": "^1.16.1",
     "react-markdown": "^3.3.0",
     "react-router-4-compat": "^1.0.4",
-    "react-sizeme": "^2.4.2",
+    "react-sizeme": "2.4.1",
     "resolve-pathname": "^2.2.0",
     "uuid": "^3.2.1",
     "word-wrap": "^1.2.3",

src/components/hoc/size.js

+import React from 'react';
+import sm from 'react-sizeme';
+import hoistStatics from 'hoist-non-react-statics';
+
+const SizeMeContext = React.createContext('sizeMe');
+export const { Provider, Consumer } = SizeMeContext;
+
+export const provideSize = options => (Component) => {
+  const WrappedComponent = ({ size, forwardedRef, children, ...rest }) => {
+    return (
+      <Provider value={size}>
+        <Component ref={forwardedRef} {...rest}>
+          {children || null}
+        </Component>
+      </Provider>
+    );
+  };
+  const SizeMeComponent = sm(options)(WrappedComponent);
+  const C = React.forwardRef((props, ref) => (
+    <SizeMeComponent forwardedRef={ref} {...props} />
+  ));
+  C.displayName = `provideSize(${Component.displayName || Component.name}}`;
+  return hoistStatics(C, Component);
+};
+
+export const provideWidth = provideSize({});
+export const provideHeight = provideSize({ monitorHeight: true });
+
+export const withSize = (Component) => {
+  const C = React.forwardRef((props, ref) => (
+    <Consumer>
+      { size => <Component {...props} size={size} ref={ref} />}
+    </Consumer>
+  ));
+  C.displayName = `withSize(${Component.displayName || Component.name})`;
+  return hoistStatics(C, Component);
+};

src/routes/main/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'dva';
 import { withRouter4Compat as withRouter } from 'react-router-4-compat';
 import { Layout } from 'antd';
+import { provideHeight } from '../../components/hoc/size';
 import SiderLogo from '../../components/layout/sider/SiderLogo';
 import SiderMenu from '../../components/layout/sider/SiderMenu';
 import HeaderPane from './header';
@@ -10,6 +11,7 @@ import { thisPush } from '../../services/route';
 import styles from './index.less';
 
 const { Sider, Header, Content, Footer } = Layout;
+const ContentWithHeight = provideHeight(Content);
 
 class Main extends React.Component {
 
@@ -61,9 +63,9 @@ class Main extends React.Component {
           <Header>
             <HeaderPane {...headerProps} />
           </Header>
-          <Content>
+          <ContentWithHeight>
             { children || null }
-          </Content>
+          </ContentWithHeight>
           <Footer>
             <span className={styles.company}>®上海铂蓝信息科技有限公司</span>
           </Footer>