add mode options in Demo

Author: infeng

demo/index.less

@@ -5,6 +5,7 @@
 
 body {
   font-size: 16px;
+  overflow: hidden;
 }
 
 ul, li {
@@ -59,8 +60,14 @@ ul, li {
 
 .img-list {
   display: flex;
-  width: 100%;
+  width: 640px;
+  height: 500px;
+  margin: 0 auto;
   justify-content: center;
+
+  &.hide {
+    display: none;
+  }
 }
 
 @imgItemWidth: 150px;
@@ -69,7 +76,7 @@ ul, li {
 .img-item {
   width: @imgItemWidth;
   height: @imgItemWidth;
-  padding: 2px;
+  padding: 1px;
 }
 
 .img-item > img {
@@ -90,4 +97,20 @@ ul, li {
 }
 .signature {
   color: white;
+}
+.container {
+  position: relative;
+}
+.inline-container {
+  display: none;
+  width: 600px;
+  height: 400px;
+  margin: 0 auto;
+
+  &.show {
+    display: block;
+  }
+}
+.options-list {
+  margin-top: 12px;
 }

demo/index.tsx

@@ -7,17 +7,42 @@ const img3 = require('./images/tibet-6.jpg');
 const img4 = require('./images/image4.jpg');
 const forkImg = require('./images/fork_me_ribbon.svg');
 import './index.less';
+import classNames from 'classnames';
+import { Row, Col, Button } from 'antd';
+const ButtonGroup = Button.Group;
+
+interface State {
+  visible: boolean;
+  activeIndex: number;
+  mode: 'modal' | 'inline';
+}
+
+class App extends React.Component<any, Partial<State>> {
+  container: HTMLDivElement;
 
-class App extends React.Component<any, any> {
   constructor() {
     super();
 
     this.state = {
       visible: false,
       activeIndex: 0,
+      mode: 'modal',
     };
   }
 
+  handleChangeModal = (e) => {
+    this.setState({
+      mode: 'modal',
+    });
+  }
+
+  handleChangeInline = (e) => {
+    this.setState({
+      mode: 'inline',
+      visible: true,
+    });
+  }
+
   render() {
     let images = [{
       src: img,
@@ -33,12 +58,22 @@ class App extends React.Component<any, any> {
       alt: '',
     }];
 
+    let inline = this.state.mode === 'inline';
+
+    let inlineContainerClass = classNames('inline-container', {
+      show: this.state.visible && inline,
+    });
+
+    let imgListClass = classNames('img-list', {
+      hide: this.state.visible && inline,
+    });
+
     return (
       <div>
         <nav className="navbar navbar-fixed-top">
           <div className="container-fluid">
             <div className="navbar-brand">
-              <a>react-viewer</a>
+              <p>react-viewer</p>
             </div>
           </div>
         </nav>
@@ -47,26 +82,51 @@ class App extends React.Component<any, any> {
         </a>
         <div className="container">
           <h1 className="title">Demo</h1>
-          <div className="img-list">
-            {images.map((item, index) => {
-              return (
-                <div key={index.toString()} className="img-item">
-                  <img src={item.src} onClick={() => {
-                    this.setState({
-                      visible: true,
-                      activeIndex: index,
-                    });
-                  }}/>
-                </div>
-              );
-            })}
-          </div>
+          <Row>
+            <Col span={6}>
+              <h2>Options</h2>
+              <div className="options-list">
+                <ButtonGroup>
+                  <Button
+                    type={inline ? null : 'primary'}
+                    onClick={this.handleChangeModal}
+                  >
+                      Modal mode
+                  </Button>
+                  <Button
+                    type={inline ? 'primary' : null}
+                    onClick={this.handleChangeInline}
+                  >
+                      Inline mode
+                  </Button>
+                </ButtonGroup>
+              </div>
+            </Col>
+            <Col span={12}>
+              <div className={imgListClass}>
+                {images.map((item, index) => {
+                  return (
+                    <div key={index.toString()} className="img-item">
+                      <img src={item.src} onClick={() => {
+                        this.setState({
+                          visible: true,
+                          activeIndex: index,
+                        });
+                      }}/>
+                    </div>
+                  );
+                })}
+              </div>
+              <div className={inlineContainerClass} ref={ref => {this.container = ref;}}></div>
+            </Col>
+          </Row>
           <Viewer
           visible={this.state.visible}
           onClose={() => { this.setState({ visible: false }); } }
           images={images}
           activeIndex={this.state.activeIndex}
           attribute={false}
+          container={inline ? this.container : null}
           />
         </div>
         <div className="footer">

package.json

@@ -56,7 +56,11 @@
     "typescript": "^2.1.4",
     "webpack": "^1.13.2"
   },
-  "dependencies": {},
+  "dependencies": {
+    "antd": "^2.8.3",
+    "babel-plugin-import": "^1.1.1",
+    "classnames": "^2.2.5"
+  },
   "pre-commit": [
     "lint"
   ]

webpack.config.doc.js

@@ -13,6 +13,10 @@ var conf = {
 }
 
 module.exports = function (webpackConfig) {
+  webpackConfig.babel.plugins.push(['import', {
+    libraryName: 'antd',
+    style: true,
+  }]);  
   webpackConfig.entry = {
     index: './demo/index.tsx',
   };

webpack.config.js

@@ -13,6 +13,10 @@ var conf = {
 }
 
 module.exports = function (webpackConfig) {
+  webpackConfig.babel.plugins.push(['import', {
+    libraryName: 'antd',
+    style: true,
+  }]);  
   webpackConfig.entry = {
     index: './demo/index.tsx',
   };