Show/Hide Sidebar workspace item using React Show (codesandbox#382)

BilalBudhani · CompuIves · commit edf75c9c62ad · 2017-12-10T21:12:54.000+01:00
* Adds animation in collapse/uncollapse sidebar workspace item using React Show library * Add @BilalBudhani as a contributor * Fixes content not animating when uncollapsed when keepState is false
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -227,6 +227,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "BilalBudhani",
+      "name": "Bilal Budhani",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1650995?v=4",
+      "profile": "https://bilalbudhani.com",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 An online code editor tailored for web applications.
 
@@ -40,5 +40,5 @@ Thanks goes to these wonderful people
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub><b>Johann Hubert Sonntagbauer</b></sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub><b>Joachim Seminck</b></sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub><b>Subramanya Chakravarthy</b></sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub><b>Robert (Robby) O'Connor</b></sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub><b>Bogdan Luca</b></sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub><b>Divjot Singh</b></sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub><b>Jason Nall</b></sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>Lionel</b></sub>](https://elrumordelaluz.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub><b>Philipp Brumm</b></sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub><b>Valentin Hervieu</b></sub>](http://valentin-hervieu.fr)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AValentinH "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1499218?v=4" width="100px;"/><br /><sub><b>Anenth</b></sub>](http://anenth.js.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/410792?v=4" width="100px;"/><br /><sub><b>Dony Sukardi</b></sub>](http://dsds.io)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Adonysukardi "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=donysukardi "Code") | [<img src="https://avatars3.githubusercontent.com/u/89046?v=4" width="100px;"/><br /><sub><b>Geoffrey Dhuyvetters</b></sub>](https://github.com/duivvv)<br />[🎨](#design-duivvv "Design") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=duivvv "Code") | [<img src="https://avatars3.githubusercontent.com/u/3381746?v=4" width="100px;"/><br /><sub><b>Eswar Yaganti</b></sub>](http://nyaganti.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nagamalli9999 "Code") [🚇](#infra-nagamalli9999 "Infrastructure (Hosting, Build-Tools, etc)") |
-| [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | [<img src="https://avatars0.githubusercontent.com/u/1650995?v=4" width="100px;"/><br /><sub><b>Bilal Budhani</b></sub>](https://bilalbudhani.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=BilalBudhani "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -172,7 +172,8 @@
     "tern": "^0.21.0",
     "vue": "^2.5.2",
     "vue-template-compiler": "^2.5.2",
-    "vue-template-es2015-compiler": "^1.6.0"
+    "vue-template-es2015-compiler": "^1.6.0",
+    "react-show": "^1.1.2"
   },
   "jest": {
     "roots": [
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem.js
@@ -2,13 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 
 import ExpandIcon from 'react-icons/lib/md/keyboard-arrow-down';
+import ReactShow from 'react-show';
 
 const ChildContainer = styled.div`
   position: relative;
   margin: 0;
   padding: 0;
-  overflow: ${props => (props.open ? 'inherit' : 'hidden')};
-  height: ${props => (props.open ? '100%' : 0)};
+  height: 100%;
 
   ${({ disabled }) =>
     disabled &&
@@ -116,9 +116,9 @@ export default class WorkspaceItem extends React.Component {
 
           {open && <Actions>{actions}</Actions>}
         </ItemHeader>
-        <ChildContainer disabled={disabled} open={open}>
-          {(keepState || open) && children}
-        </ChildContainer>
+        <ReactShow show={open} duration={250} unmountOnHide={!keepState}>
+          <ChildContainer disabled={disabled}>{children}</ChildContainer>
+        </ReactShow>
       </div>
     );
   }

Original file line number	Diff line number	Diff line change
`@@ -227,6 +227,15 @@`
`227`	`227`	`"contributions": [`
`228`	`228`	`"code"`
`229`	`229`	`]`
	`230`	`+ },`
	`231`	`+ {`
	`232`	`+ "login": "BilalBudhani",`
	`233`	`+ "name": "Bilal Budhani",`
	`234`	`+ "avatar_url": "https://avatars0.githubusercontent.com/u/1650995?v=4",`
	`235`	`+ "profile": "https://bilalbudhani.com",`
	`236`	`+ "contributions": [`
	`237`	`+ "code"`
	`238`	`+ ]`
`230`	`239`	`}`
`231`	`240`	`]`
`232`	`241`	`}`