Add screen reponsive className

9 years ago · 55b6eef96d
2 changed files with 153 additions and 123 deletions
--- a/package.json
+++ b/package.json
@ -58,6 +58,7 @@
    "jest": "^21.0.1",
    "lint-staged": "^4.3.0",
    "mockjs": "^1.0.1-beta3",
+    "react-container-query": "^0.9.1",
    "react-test-renderer": "^16.0.0",
    "redbox-react": "^1.3.2",
    "roadhog": "^1.2.1",
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@ -6,6 +6,8 @@ import { connect } from 'dva';
 import { Link, routerRedux, Route, Redirect, Switch } from 'dva/router';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
+import { ContainerQuery } from 'react-container-query';
+import classNames from 'classnames';
 import styles from './BasicLayout.less';
 import HeaderSearch from '../components/HeaderSearch';
 import NoticeIcon from '../components/NoticeIcon';
@ -16,6 +18,27 @@ import { getRouteData } from '../utils/utils';
 const { Header, Sider, Content } = Layout;
 const { SubMenu } = Menu;

+const query = {
+  'screen-xs': {
+    maxWidth: 575,
+  },
+  'screen-sm': {
+    minWidth: 576,
+    maxWidth: 767,
+  },
+  'screen-md': {
+    minWidth: 768,
+    maxWidth: 991,
+  },
+  'screen-lg': {
+    minWidth: 992,
+    maxWidth: 1199,
+  },
+  'screen-xl': {
+    minWidth: 1200,
+  },
+};
+
 class BasicLayout extends React.PureComponent {
  static childContextTypes = {
    location: PropTypes.object,
@ -211,134 +234,140 @@ class BasicLayout extends React.PureComponent {
      openKeys: this.state.openKeys,
    };

-    return (
-      <DocumentTitle title={this.getPageTitle()}>
-        <Layout>
-          <Sider
-            trigger={null}
-            collapsible
-            collapsed={collapsed}
-            collapsedWidth={80}
-            breakpoint="md"
-            onCollapse={this.onCollapse}
-            width={256}
-            className={styles.sider}
+    const layout = (
+      <Layout>
+        <Sider
+          trigger={null}
+          collapsible
+          collapsed={collapsed}
+          collapsedWidth={80}
+          breakpoint="md"
+          onCollapse={this.onCollapse}
+          width={256}
+          className={styles.sider}
+        >
+          <div className={styles.logo}>
+            <Link to="/">
+              <img src="https://gw.alipayobjects.com/zos/rmsportal/iwWyPinUoseUxIAeElSx.svg" alt="logo" />
+              <h1>Ant Design Pro</h1>
+            </Link>
+          </div>
+          <Menu
+            theme="dark"
+            mode="inline"
+            {...menuProps}
+            onOpenChange={this.handleOpenChange}
+            selectedKeys={this.getCurrentMenuSelectedKeys()}
+            style={{ margin: '16px 0', width: '100%' }}
          >
-            <div className={styles.logo}>
-              <Link to="/">
-                <img src="https://gw.alipayobjects.com/zos/rmsportal/iwWyPinUoseUxIAeElSx.svg" alt="logo" />
-                <h1>Ant Design Pro</h1>
-              </Link>
-            </div>
-            <Menu
-              theme="dark"
-              mode="inline"
-              {...menuProps}
-              onOpenChange={this.handleOpenChange}
-              selectedKeys={this.getCurrentMenuSelectedKeys()}
-              style={{ margin: '16px 0', width: '100%' }}
-            >
-              {this.getNavMenuItems(this.menus)}
-            </Menu>
-          </Sider>
-          <Layout>
-            <Header className={styles.header}>
-              <Icon
-                className={styles.trigger}
-                type={collapsed ? 'menu-unfold' : 'menu-fold'}
-                onClick={this.toggle}
+            {this.getNavMenuItems(this.menus)}
+          </Menu>
+        </Sider>
+        <Layout>
+          <Header className={styles.header}>
+            <Icon
+              className={styles.trigger}
+              type={collapsed ? 'menu-unfold' : 'menu-fold'}
+              onClick={this.toggle}
+            />
+            <div className={styles.right}>
+              <HeaderSearch
+                className={`${styles.action} ${styles.search}`}
+                placeholder="站内搜索"
+                dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
+                onSearch={(value) => {
+                  console.log('input', value); // eslint-disable-line
+                }}
+                onPressEnter={(value) => {
+                  console.log('enter', value); // eslint-disable-line
+                }}
              />
-              <div className={styles.right}>
-                <HeaderSearch
-                  className={`${styles.action} ${styles.search}`}
-                  placeholder="站内搜索"
-                  dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
-                  onSearch={(value) => {
-                    console.log('input', value); // eslint-disable-line
-                  }}
-                  onPressEnter={(value) => {
-                    console.log('enter', value); // eslint-disable-line
-                  }}
+              <NoticeIcon
+                className={styles.action}
+                count={currentUser.notifyCount}
+                onItemClick={(item, tabProps) => {
+                  console.log(item, tabProps); // eslint-disable-line
+                }}
+                onClear={this.handleNoticeClear}
+                onPopupVisibleChange={this.handleNoticeVisibleChange}
+                loading={fetchingNotices}
+                popupAlign={{ offset: [20, -16] }}
+              >
+                <NoticeIcon.Tab
+                  list={noticeData['通知']}
+                  title="通知"
+                  emptyText="你已查看所有通知"
+                  emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
+                />
+                <NoticeIcon.Tab
+                  list={noticeData['消息']}
+                  title="消息"
+                  emptyText="您已读完所有消息"
+                  emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
                />
-                <NoticeIcon
-                  className={styles.action}
-                  count={currentUser.notifyCount}
-                  onItemClick={(item, tabProps) => {
-                    console.log(item, tabProps); // eslint-disable-line
-                  }}
-                  onClear={this.handleNoticeClear}
-                  onPopupVisibleChange={this.handleNoticeVisibleChange}
-                  loading={fetchingNotices}
-                  popupAlign={{ offset: [20, -16] }}
-                >
-                  <NoticeIcon.Tab
-                    list={noticeData['通知']}
-                    title="通知"
-                    emptyText="你已查看所有通知"
-                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
-                  />
-                  <NoticeIcon.Tab
-                    list={noticeData['消息']}
-                    title="消息"
-                    emptyText="您已读完所有消息"
-                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
-                  />
-                  <NoticeIcon.Tab
-                    list={noticeData['待办']}
-                    title="待办"
-                    emptyText="你已完成所有待办"
-                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
-                  />
-                </NoticeIcon>
-                {currentUser.name ? (
-                  <Dropdown overlay={menu}>
-                    <span className={`${styles.action} ${styles.account}`}>
-                      <Avatar size="small" className={styles.avatar} src={currentUser.avatar} />
-                      {currentUser.name}
-                    </span>
-                  </Dropdown>
-                ) : <Spin size="small" style={{ marginLeft: 8 }} />}
-              </div>
-            </Header>
-            <Content style={{ margin: '24px 24px 0', height: '100%' }}>
-              <Switch>
-                {
-                  getRouteData('BasicLayout').map(item =>
-                    (
-                      <Route
-                        exact={item.exact}
-                        key={item.path}
-                        path={item.path}
-                        component={item.component}
-                      />
-                    )
+                <NoticeIcon.Tab
+                  list={noticeData['待办']}
+                  title="待办"
+                  emptyText="你已完成所有待办"
+                  emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
+                />
+              </NoticeIcon>
+              {currentUser.name ? (
+                <Dropdown overlay={menu}>
+                  <span className={`${styles.action} ${styles.account}`}>
+                    <Avatar size="small" className={styles.avatar} src={currentUser.avatar} />
+                    {currentUser.name}
+                  </span>
+                </Dropdown>
+              ) : <Spin size="small" style={{ marginLeft: 8 }} />}
+            </div>
+          </Header>
+          <Content style={{ margin: '24px 24px 0', height: '100%' }}>
+            <Switch>
+              {
+                getRouteData('BasicLayout').map(item =>
+                  (
+                    <Route
+                      exact={item.exact}
+                      key={item.path}
+                      path={item.path}
+                      component={item.component}
+                    />
                  )
-                }
-                <Redirect to="/dashboard/analysis" />
-              </Switch>
-              <GlobalFooter
-                links={[{
-                  title: '使用文档',
-                  href: 'http://pro.ant.design',
-                  blankTarget: true,
-                }, {
-                  title: 'GitHub',
-                  href: 'https://github.com/ant-design/ant-design-pro',
-                  blankTarget: true,
-                }, {
-                  title: 'Ant Design',
-                  href: 'http://ant.design',
-                  blankTarget: true,
-                }]}
-                copyright={
-                  <div>
-                    Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品
-                  </div>
-                }
-              />
-            </Content>
-          </Layout>
+                )
+              }
+              <Redirect to="/dashboard/analysis" />
+            </Switch>
+            <GlobalFooter
+              links={[{
+                title: '使用文档',
+                href: 'http://pro.ant.design',
+                blankTarget: true,
+              }, {
+                title: 'GitHub',
+                href: 'https://github.com/ant-design/ant-design-pro',
+                blankTarget: true,
+              }, {
+                title: 'Ant Design',
+                href: 'http://ant.design',
+                blankTarget: true,
+              }]}
+              copyright={
+                <div>
+                  Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品
+                </div>
+              }
+            />
+          </Content>
        </Layout>
+      </Layout>
+    );
+
+    return (
+      <DocumentTitle title={this.getPageTitle()}>
+        <ContainerQuery query={query}>
+          {params => <div className={classNames(params)}>{layout}</div>}
+        </ContainerQuery>
      </DocumentTitle>
    );
  }