Update example and add an iframe hack

zesik · Feb 9, 2019 · 02d85e2 · 02d85e2
1 parent d6d1cea
commit 02d85e2
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 14 deletions.
diff --git a/example/javascripts/components/App.jsx b/example/javascripts/components/App.jsx
@@ -19,6 +19,7 @@ function App(props) {
             <li><NavLink to="/nested">Nested Layout</NavLink></li>
             <li><NavLink to="/sidebar">Sidebar</NavLink></li>
             <li><NavLink to="/events">Events</NavLink></li>
+            <li><NavLink to="/iframe">iframe</NavLink></li>
           </ul>
         </nav>
         <div className="child-content">

diff --git a/example/javascripts/components/LayoutWithIFrame.jsx b/example/javascripts/components/LayoutWithIFrame.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import SplitterLayout from '../../../index';
+import Lorem from './Lorem';
+
+export default class LayoutWithIFrame extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onDragStart = this.onDragStart.bind(this);
+    this.onDragEnd = this.onDragEnd.bind(this);
+    this.state = {
+      dragging: false
+    };
+  }
+
+  onDragStart() {
+    this.setState({ dragging: true });
+  }
+
+  onDragEnd() {
+    this.setState({ dragging: false });
+  }
+
+  render() {
+    return (
+      <SplitterLayout onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
+        <div className="my-pane">
+          <h2>1st Pane</h2>
+          <p>
+            This is the 1st pane, and this is the primary pane by default.
+            The 2nd pane on the right contains an <code>iframe</code> from <code>https://example.com</code>.
+            A simple hack is used so that dragging is not interfered.
+          </p>
+          <Lorem title="1st Pane" />
+        </div>
+        <div className="my-iframe">
+          {this.state.dragging && <div className="my-iframe-overlay" />}
+          <iframe src="https://example.com" />
+        </div>
+      </SplitterLayout>
+    );
+  }
+}
diff --git a/example/javascripts/components/TogglableSidebarLayout.jsx b/example/javascripts/components/TogglableSidebarLayout.jsx
@@ -12,7 +12,7 @@ export default class TogglableSidebarLayout extends React.Component {
   }
 
   toggleSidebar() {
-    this.setState({ sidebarVisible: !this.state.sidebarVisible });
+    this.setState(state => ({ sidebarVisible: state.sidebarVisible }));
   }
 
   render() {
@@ -21,7 +21,7 @@ export default class TogglableSidebarLayout extends React.Component {
         <div className="my-pane">
           <h2>1st Pane</h2>
           <p>This is the 1st pane, and this is the primary pane by default.</p>
-          <button onClick={this.toggleSidebar}>
+          <button type="button" onClick={this.toggleSidebar}>
             {this.state.sidebarVisible && 'Hide Sidebar'}
             {!this.state.sidebarVisible && 'Show Sidebar'}
           </button>
@@ -34,17 +34,19 @@ export default class TogglableSidebarLayout extends React.Component {
           <Lorem title="1st Pane" />
         </div>
         {this.state.sidebarVisible &&
-          <div className="my-pane">
-            <h2>2nd Pane</h2>
-            <p>This is the 2nd pane, considered as a sidebar.</p>
-            <pre>
-              &lt;SplitterLayout primaryIndex={'{0}'}&gt;{'\n'}
-              &nbsp;&nbsp;&lt;div&gt;1st&lt;/div&gt;{'\n'}
-              &nbsp;&nbsp;<strong>&lt;div&gt;2nd&lt;/div&gt;</strong>{'\n'}
-              &lt;/SplitterLayout&gt;
-            </pre>
-            <Lorem title="2nd Pane" />
-          </div>
+          (
+            <div className="my-pane">
+              <h2>2nd Pane</h2>
+              <p>This is the 2nd pane, considered as a sidebar.</p>
+              <pre>
+                &lt;SplitterLayout primaryIndex={'{0}'}&gt;{'\n'}
+                &nbsp;&nbsp;&lt;div&gt;1st&lt;/div&gt;{'\n'}
+                &nbsp;&nbsp;<strong>&lt;div&gt;2nd&lt;/div&gt;</strong>{'\n'}
+                &lt;/SplitterLayout&gt;
+              </pre>
+              <Lorem title="2nd Pane" />
+            </div>
+          )
         }
       </SplitterLayout>
     );

diff --git a/example/javascripts/index.jsx b/example/javascripts/index.jsx
@@ -10,6 +10,8 @@ import PercentageLayout from './components/PercentageLayout';
 import NestedLayout from './components/NestedLayout';
 import TogglableSidebarLayout from './components/TogglableSidebarLayout';
 import HorizontalLayoutWithEvents from './components/HorizontalLayoutWithEvents';
+import LayoutWithIFrame from './components/LayoutWithIFrame';
+import '../../lib/index.css';
 import '../stylesheets/index.css';
 
 function NoMatch() {
@@ -33,6 +35,7 @@ render(
         <Route path="/nested" component={NestedLayout} />
         <Route path="/sidebar" component={TogglableSidebarLayout} />
         <Route path="/events" component={HorizontalLayoutWithEvents} />
+        <Route path="/iframe" component={LayoutWithIFrame} />
         <Route path="*" component={NoMatch} />
       </Switch>
     </App>

diff --git a/example/stylesheets/index.css b/example/stylesheets/index.css
@@ -85,6 +85,24 @@ pre {
   margin: 20px;
 }
 
+.my-iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.my-iframe .my-iframe-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+}
+
+.my-iframe iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
 .not-found {
   margin: 20px;
 }

diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -13,7 +13,17 @@ module.exports = {
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        use: 'babel-loader'
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/env',
+                '@babel/react'
+              ]
+            }
+          }
+        ]
       }, {
         test: /\.css$/,
         use: [