Improve aside performance on show

react-toolbox · Sep 19, 2015 · c4779ca · c4779ca
1 parent aa4cbd7
commit c4779ca
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 37 deletions.
diff --git a/components/aside/index.jsx b/components/aside/index.jsx
@@ -1,8 +1,10 @@
 /* global React */
 
+import { addons } from 'react/addons';
 import css from './style';
 
 export default React.createClass({
+  mixins: [addons.PureRenderMixin],
 
   displayName: 'Aside',
 
@@ -24,8 +26,8 @@ export default React.createClass({
     return { active: this.props.active };
   },
 
-  onClick (event) {
-    if (event.target === this.getDOMNode()) {
+  handleOverlayClick () {
+    if (this.props.hideable) {
       this.setState({active: false});
     }
   },
@@ -37,7 +39,8 @@ export default React.createClass({
     if (this.state.active) className += ' active';
 
     return (
-      <div className={className} onClick={this.onClick}>
+      <div className={className}>
+        <div className={css.overlay} onClick={this.handleOverlayClick}></div>
         <aside className={css.container}>
           { this.props.children }
         </aside>

diff --git a/components/aside/style.styl b/components/aside/style.styl
@@ -2,47 +2,56 @@
 
 WIDTH = (4 * UNIT)
 
-:local(.container)
-  position                        : absolute
+:local(.root)
+  height                          : 100vh
+  pointer-events                  : none
+  position                        : fixed
   top                             : 0
+  left                            : 0
+  right                           : 0
+  width                           : 100vw
+  z-index                         : 2
+
+:local(.overlay)
+  background-color                : black
   height                          : 100%
-  width                           : WIDTH
-  background-color                : WHITE
-  transition-property             : transform
-  transition-duration             : ANIMATION_DURATION
+  opacity                         : 0
+  transition-duration             : .5 * ANIMATION_DURATION
+  transition-property             : opacity
   transition-timing-function      : ANIMATION_EASE
+  width                           : 100%
 
-:local(.root)
-  z-index                         : 2
-  position                        : fixed
+:local(.container)
+  background-color                : WHITE
+  box-shadow                      : ZDEPTH_SHADOW_1
+  display                         : block
+  height                          : 100%
+  overflow-y                      : scroll
+  position                        : absolute
   top                             : 0
-  width                           : 100vw
-  height                          : 100vh
-  pointer-events                  : none
-  transition-property             : background-color
-  transition-duration             : ANIMATION_DURATION
+  transform-style                 : preserve-3d
+  transition-duration             : .5 * ANIMATION_DURATION
+  transition-property             : transform
   transition-timing-function      : ANIMATION_EASE
+  width                           : WIDTH
+  will-change                     : transform
 
-  // -- Overrides
-  &:not(.hideable)
-    z-index                       : 2
-    width                         : WIDTH
-  &.hideable
-    z-index                       : 3
-    &.active
-      background-color            : rgba(0,0,0,0.5)
+:local(.root)
   &.left
-    left                          : 0
-    &:not(.active) > :local(.container)
+    > :local(.container)
       left                        : 0
-      transform                   : translateX(-100%)
+    &:not(.active) > :local(.container)
+      transform                   : translateX(- WIDTH)
+
   &.right
-    right                         : 0
+    > :local(.container)
+      right                         : 0
     &:not(.active) > :local(.container)
-      right                       : 0
-      transform                   : translateX(100%)
+      transform                   : translateX(WIDTH)
+
   &.active
     pointer-events                : all
     > :local(.container)
-      box-shadow                  : ZDEPTH_SHADOW_1
-      transform                   : translateX(0%)
+      transform                   : translateX(0)
+    > :local(.overlay)
+      opacity                     : .5
diff --git a/spec/components/aside.cjsx b/spec/components/aside.cjsx
@@ -16,13 +16,22 @@ module.exports = React.createClass
   # -- Render
   render: ->
     <section>
+
       <h2>Aside</h2>
-      <Aside ref="left" hideable=true />
+      <Aside ref="left" hideable=true>
+        <div style={padding: '20px'}>
+          <h2>Officia deserunt mollit.</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+      </Aside>
+
       <Aside ref="right" type="right">
-        <Button caption="Close" onClick={@onClick.bind null, "right", "hide"} />
+        <Button label="Close" onClick={@onClick.bind null, "right", "hide"} />
       </Aside>
+
       <nav>
-        <Button caption="Show aside left" onClick={@onClick.bind null, "left", "show"} />
-        <Button caption="Show aside right" onClick={@onClick.bind null, "right", "show"} />
+        <Button className="accent" label="Show aside left" type="raised" onClick={@onClick.bind null, "left", "show"} />
+        <Button className="primary" label="Show aside left" type="raised" label="Show aside right" onClick={@onClick.bind null, "right", "show"} />
       </nav>
     </section>