Update example for events

zesik · Oct 5, 2017 · cf21291 · cf21291
1 parent f5107e7
commit cf21291
Show file tree

Hide file tree

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

diff --git a/example/javascripts/components/HorizontalLayoutWithEvents.jsx b/example/javascripts/components/HorizontalLayoutWithEvents.jsx
@@ -0,0 +1,86 @@
+/* eslint no-void: [0] */
+import React from 'react';
+import SplitterLayout from '../../../index';
+
+export default class HorizontalLayoutWithEvents extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onDragStart = this.onDragStart.bind(this);
+    this.onDragEnd = this.onDragEnd.bind(this);
+    this.onSecondaryPaneSizeChange = this.onSecondaryPaneSizeChange.bind(this);
+    this.state = {
+      secondaryPaneSize: -1,
+      dragging: false
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.dragging !== this.state.dragging && this.draggingEl1 && this.draggingEl2) {
+      this.draggingEl1.classList.add('highlight');
+      this.draggingEl2.classList.add('highlight');
+      void this.draggingEl1.offsetWidth;
+      void this.draggingEl2.offsetWidth;
+      this.draggingEl1.classList.remove('highlight');
+      this.draggingEl2.classList.remove('highlight');
+    }
+    if (prevState.secondaryPaneSize !== this.state.secondaryPaneSize && this.sizeEl1 && this.sizeEl2) {
+      this.sizeEl1.classList.add('highlight');
+      this.sizeEl2.classList.add('highlight');
+      void this.sizeEl1.offsetWidth;
+      void this.sizeEl2.offsetWidth;
+      this.sizeEl1.classList.remove('highlight');
+      this.sizeEl2.classList.remove('highlight');
+    }
+  }
+
+  onDragStart() {
+    this.setState({ dragging: true });
+  }
+
+  onDragEnd() {
+    this.setState({ dragging: false });
+  }
+
+  onSecondaryPaneSizeChange(secondaryPaneSize) {
+    this.setState({ secondaryPaneSize });
+  }
+
+  render() {
+    return (
+      <SplitterLayout
+        onDragStart={this.onDragStart}
+        onDragEnd={this.onDragEnd}
+        onSecondaryPaneSizeChange={this.onSecondaryPaneSizeChange}
+      >
+        <div className="my-pane">
+          <h2>1st Pane</h2>
+          <p>This is the 1st pane, and this is the primary pane by default.</p>
+          <p>Dragging:
+            <span className="volatile" ref={(e) => { this.draggingEl1 = e; }}>
+              {this.state.dragging ? 'Yes' : 'No'}
+            </span>
+          </p>
+          <p>Size of the 2nd pane:
+            <span className="volatile" ref={(e) => { this.sizeEl1 = e; }}>
+              {this.state.secondaryPaneSize}
+            </span>
+          </p>
+        </div>
+        <div className="my-pane">
+          <h2>2nd Pane</h2>
+          <p>This is the 2nd pane, and this is the secondary pane by default.</p>
+          <p>Dragging:
+            <span className="volatile" ref={(e) => { this.draggingEl2 = e; }}>
+              {this.state.dragging ? 'Yes' : 'No'}
+            </span>
+          </p>
+          <p>Size of this pane:
+            <span className="volatile" ref={(e) => { this.sizeEl2 = e; }}>
+              {this.state.secondaryPaneSize}
+            </span>
+          </p>
+        </div>
+      </SplitterLayout>
+    );
+  }
+}
diff --git a/example/javascripts/components/NavLink.jsx b/example/javascripts/components/NavLink.jsx
@@ -1,9 +1,9 @@
 /* eslint import/no-extraneous-dependencies: [0] */
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 
 export default function(props) {
   return (
-    <Link {...props} activeClassName="active" />
+    <NavLink {...props} activeClassName="active" />
   );
 }
diff --git a/example/javascripts/index.jsx b/example/javascripts/index.jsx
@@ -9,6 +9,7 @@ import LayoutWithMinimalSize from './components/LayoutWithMinimalSize';
 import PercentageLayout from './components/PercentageLayout';
 import NestedLayout from './components/NestedLayout';
 import TogglableSidebarLayout from './components/TogglableSidebarLayout';
+import HorizontalLayoutWithEvents from './components/HorizontalLayoutWithEvents';
 import '../stylesheets/index.css';
 
 function NoMatch() {
@@ -31,6 +32,7 @@ render(
         <Route path="/percentage" component={PercentageLayout} />
         <Route path="/nested" component={NestedLayout} />
         <Route path="/sidebar" component={TogglableSidebarLayout} />
+        <Route path="/events" component={HorizontalLayoutWithEvents} />
         <Route path="*" component={NoMatch} />
       </Switch>
     </App>

diff --git a/example/stylesheets/index.css b/example/stylesheets/index.css
@@ -88,3 +88,18 @@ pre {
 .not-found {
   margin: 20px;
 }
+
+.volatile {
+  transition: background-color 1s, border-color 1s;
+  transition-delay: 500ms;
+  padding: 2px 4px;
+  margin: 0 2px;
+  border: 1px solid white;
+  border-radius: 4px;
+}
+
+.volatile.highlight {
+  transition: none;
+  background: #fff176;
+  border-color: #ff8f00;
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -24,7 +24,8 @@ module.exports = {
     ]
   },
   plugins: [
-    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') })
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+    new webpack.optimize.UglifyJsPlugin()
   ],
   output: {
     filename: 'bundle.js'