examples

components/Picker/StackPicker.jsx

@@ -160,7 +160,7 @@ class PickerStack extends Component {
           {
             list.map((item, index) => (
               <div
-                key={index}
+                key={+index}
                 className={
                   classnames({
                     [`${prefixCls}-stack-item`]: true,

examples/components/App.jsx

@@ -1,13 +1,9 @@
-import React, { Component } from 'react';
+import { Component, Children } from 'react';
 // import Eruda from 'eruda';
 // import Events from '../utils/events';
 
-// page styles
-import '../styles/core/index';
-import '../styles/components/App';
-
-// components styles
-import '../../styles/index';
+import '../styles/core/index';  // page styles
+import '../../styles/index';  // components styles
 
 class App extends Component {
 
@@ -17,19 +13,7 @@ class App extends Component {
   }
 
   render() {
-    return (
-      <div>
-        <div className="app-container">
-          {this.props.children}
-        </div>
-        <footer>
-          <div className="copyright">
-            <div className="copyright-cn">众安·体验设计中心</div>
-            <div className="copyright-en">Zhongan UX Densign</div>
-          </div>
-        </footer>
-      </div>
-    );
+    return this.props.children ? Children.only(this.props.children) : null;
   }
 }
 

examples/components/Container.jsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import '../styles/components/Container';
+
+class Container extends Component {
+
+  render() {
+    const { className, children } = this.props;
+
+    const cls = classnames({
+      'app-container': true,
+      [className]: !!className,
+    });
+
+    return (
+      <div className={cls} style={{ minHeight: window.screen.height }}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default Container;

examples/components/Footer.jsx

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import '../styles/components/Footer.scss';
+
+class Footer extends Component {
+
+  render() {
+    const { title } = this.props;
+
+    return (
+      <footer>
+        <div className="copyright">
+          <div className="copyright-cn">众安·体验设计中心</div>
+          <div className="copyright-en">Zhongan UX Densign</div>
+        </div>
+      </footer>
+    );
+  }
+}
+
+export default Footer;

examples/components/Header.jsx

@@ -7,9 +7,7 @@ class Header extends Component {
     const { title } = this.props;
 
     return (
-      <header className="Header">
-        {title}
-      </header>
+      <header className="Header">{title}</header>
     );
   }
 }

examples/index.js

@@ -186,16 +186,6 @@ const rootRoute = {
         });
       },
     },
-
-    // 其他
-    // {
-    //   path: 'lottery',
-    //   getComponent(location, cb) {
-    //     require.ensure([], (require) => {
-    //       cb(null, require('./pages/LotteryPage'));
-    //     });
-    //   },
-    // },
     {
       path: '*',
       getComponent(location, cb) {

examples/pages/ActionSheetPage.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
+import Container from '../components/Container';
 import Header from '../components/Header';
+import Footer from '../components/Footer';
 import { Panel, Cell, ActionSheet, Button } from '../../components';
 
 class Page extends Component {
@@ -20,7 +22,7 @@ class Page extends Component {
 
   render() {
     return (
-      <div className="actionsheet-page">
+      <Container className="actionsheet-page">
         <Header title="动作面板 ActionSheet" />
         <main>
           <Panel>
@@ -77,7 +79,8 @@ class Page extends Component {
             ]}
             />
         </main>
-      </div>
+        <Footer />
+      </Container>
     );
   }
 }

examples/pages/BadgePage.jsx

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
+import Container from '../components/Container';
 import Header from '../components/Header';
+import Footer from '../components/Footer';
 import { Panel, Cell, Badge } from '../../components';
 import '../styles/pages/BadgePage';
 
 class Page extends Component {
 
   render() {
     return (
-      <div className="badge-page">
+      <Container className="badge-page">
         <Header title="徽标 Badge" />
         <main>
           <Panel>
@@ -43,7 +45,8 @@ class Page extends Component {
           </Panel>
 
         </main>
-      </div>
+        <Footer />
+      </Container>
     );
   }
 }

examples/pages/ButtonPage.jsx

@@ -1,13 +1,15 @@
 import React, { Component } from 'react';
+import Container from '../components/Container';
 import Header from '../components/Header';
+import Footer from '../components/Footer';
 import { Panel, Icon, Button } from '../../components';
 import '../styles/pages/ButtonPage';
 
 class Page extends Component {
 
   render() {
     return (
-      <div className="button-page">
+      <Container className="button-page">
         <Header title="按钮 Button" />
         <main>
           <Panel>
@@ -86,7 +88,8 @@ class Page extends Component {
             </Panel.Body>
           </Panel>
         </main>
-      </div>
+        <Footer />
+      </Container>
     );
   }
 }

examples/pages/CellPage.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
+import Container from '../components/Container';
 import Header from '../components/Header';
+import Footer from '../components/Footer';
 import { Panel, Icon, Cell } from '../../components';
 
 const img = require('../images/icons/state.png');
@@ -8,7 +10,7 @@ class Page extends Component {
 
   render() {
     return (
-      <div className="cell-page">
+      <Container className="cell-page">
         <Header title="列表项 Cell" />
         <main>
           <Panel>
@@ -82,7 +84,8 @@ class Page extends Component {
             </Panel.Body>
           </Panel>
         </main>
-      </div>
+        <Footer />
+      </Container>
     );
   }
 }

examples/pages/CheckboxPage.jsx

@@ -1,5 +1,7 @@
 import React, { PureComponent } from 'react';
+import Container from '../components/Container';
 import Header from '../components/Header';
+import Footer from '../components/Footer';
 import { Panel, Cell, Checkbox } from '../../components';
 
 class Page extends PureComponent {
@@ -13,7 +15,7 @@ class Page extends PureComponent {
 
   render() {
     return (
-      <div className="checkbox-page">
+      <Container className="checkbox-page">
         <Header title="复选框 Checkbox" />
         <main>
           <Panel>
@@ -139,7 +141,8 @@ class Page extends PureComponent {
             </Panel.Body>
           </Panel>
         </main>
-      </div>
+        <Footer />
+      </Container>
     );
   }
 }

examples/pages/IconPage.jsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
+import Container from '../components/Container';
 import Header from '../components/Header';
+import Footer from '../components/Footer';
 import { Panel, Icon } from '../../components';
 import '../styles/pages/IconPage';
 
@@ -20,7 +22,7 @@ class Page extends Component {
 
   render() {
     return (
-      <div className="icon-page">
+      <Container className="icon-page">
         <Header title="图标 Icon" />
         <main>
           <Panel>
@@ -32,7 +34,7 @@ class Page extends Component {
                 {
                   ICONS.sort().map((icon, i) => {
                     return (
-                      <div className="grid-column" key={i}>
+                      <div className="grid-column" key={+i}>
                         <Icon theme="primary" type={icon} />
                         <span className="icon-name">{icon}</span>
                       </div>
@@ -43,7 +45,8 @@ class Page extends Component {
             </Panel.Body>
           </Panel>
         </main>
-      </div>
+        <Footer />
+      </Container>
     );
   }
 }

examples/pages/Index.jsx

@@ -1,13 +1,15 @@
 import React, { PureComponent } from 'react';
 import { hashHistory } from 'react-router';
+import Container from '../components/Container';
+import Footer from '../components/Footer';
 import { Panel, Cell } from '../../components';
 import '../styles/pages/IndexPage';
 
 class Page extends PureComponent {
 
   render() {
     return (
-      <div className="index-page">
+      <Container className="index-page">
         <header>
           <section className="brand">
             <div className="brand-title">Zarm UI</div>
@@ -57,18 +59,9 @@ class Page extends PureComponent {
               <Cell hasArrow title="标签页 Tab" onClick={() => hashHistory.push('/tab')} />
             </Panel.Body>
           </Panel>
-          {
-            // <Panel>
-            //   <Panel.Header>
-            //     <Panel.Title>基础组件</Panel.Title>
-            //   </Panel.Header>
-            //   <Panel.Body>
-            //     <Cell hasArrow title="大转盘 Lottery" onClick={() => hashHistory.push('/lottery')} />
-            //   </Panel.Body>
-            // </Panel>
-          }
         </main>
-      </div>
+        <Footer />
+      </Container>
     );
   }
 }