Merge pull request #342 from dabapps/upgrade-transition-group

Upgrade transition group

examples/app.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PureComponent } from 'react';
+import { PureComponent, ReactElement } from 'react';
 import {
   AppRoot,
   Button,
@@ -11,22 +11,27 @@ import {
   DabIpsum,
   Footer,
   FormGroup,
+  Highlight,
   InputGroup,
   InputGroupAddon,
+  ModalRenderer,
   NavBar,
   Row,
   Section,
   SideBar,
   SpacedGroup,
   SpeechBubble,
 } from '../src/ts';
+import ExampleModal from './modal';
 import NavItems from './nav-items';
 
 const X_CHAR = String.fromCharCode(215);
 const MENU_CHAR = String.fromCharCode(9776);
 
 interface AppState {
   sidebarOpen: boolean;
+  highlightActive: boolean;
+  modals: ReadonlyArray<ReactElement<{}>>;
 }
 
 class App extends PureComponent<{}, AppState> {
@@ -35,6 +40,8 @@ class App extends PureComponent<{}, AppState> {
 
     this.state = {
       sidebarOpen: false,
+      highlightActive: false,
+      modals: [],
     };
   }
 
@@ -284,6 +291,31 @@ class App extends PureComponent<{}, AppState> {
               </Row>
             </Section>
           </ContentBox>
+
+          <ContentBox>
+            <Button
+              className="margin-vertical-large primary"
+              onClick={this.onClickOpenModal}
+            >
+              Open example modal
+            </Button>
+
+            <ModalRenderer modals={this.state.modals} />
+          </ContentBox>
+
+          <Highlight open={this.state.highlightActive}>
+            <ContentBox>
+              <Button
+                className="margin-vertical-large primary"
+                onClick={this.onClickToggleHighlight}
+              >
+                {this.state.highlightActive ? 'Un-highlight' : 'Highlight'}
+                {' this box'}
+              </Button>
+
+              <ModalRenderer modals={this.state.modals} />
+            </ContentBox>
+          </Highlight>
         </Container>
 
         <Footer fixed>
@@ -306,6 +338,38 @@ class App extends PureComponent<{}, AppState> {
       sidebarOpen: false,
     });
   };
+
+  private onClickToggleHighlight = () => {
+    this.setState(state => ({
+      ...state,
+      highlightActive: !state.highlightActive,
+    }));
+  };
+
+  private onClickOpenModal = () => {
+    this.setState(state => ({
+      ...state,
+      modals: [
+        ...state.modals,
+        <ExampleModal
+          key={state.modals.length}
+          onClickClose={this.onClickCloseModal}
+        />,
+      ],
+    }));
+  };
+
+  private onClickCloseModal = () => {
+    this.setState(state => {
+      const modalsCopy = [...state.modals];
+      modalsCopy.pop();
+
+      return {
+        ...state,
+        modals: modalsCopy,
+      };
+    });
+  };
 }
 
 export default App;

examples/modal.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { PureComponent } from 'react';
+
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseIcon,
+  ModalFooter,
+  ModalHeader,
+  SpacedGroup,
+} from '../src/ts';
+
+interface ExampleModalProps {
+  onClickClose: () => void;
+}
+
+export default class ExampleModal extends PureComponent<ExampleModalProps> {
+  public render() {
+    return (
+      <Modal onClickOutside={this.props.onClickClose}>
+        <ModalHeader>
+          <ModalCloseIcon />
+          <h1>Hello</h1>
+        </ModalHeader>
+        <ModalBody>
+          <p>I am a modal!</p>
+        </ModalBody>
+        <ModalFooter>
+          <SpacedGroup block className="margin-vertical-large">
+            <Button onClick={this.props.onClickClose}>Cancel</Button>
+            <Button onClick={this.props.onClickClose} className="primary">
+              Done
+            </Button>
+          </SpacedGroup>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -10,7 +10,7 @@
     "dist": "./scripts/dist",
     "prettier": "prettier --write '**/*.{ts,tsx,js,jsx,json,md}'",
     "prettier-check": "prettier --check '**/*.{ts,tsx,js,jsx,json,md}'",
-    "lint-js": "eslint ./*.js docs/**/*.js && tslint --project tsconfig.json '@(src|tests|types|docs)/**/*.@(ts|tsx)'",
+    "lint-js": "eslint ./*.js docs/**/*.js && tslint --project tsconfig.json '@(src|tests|types|docs|examples)/**/*.@(ts|tsx)'",
     "lint-less": "lesshint 'src/less/' 'docs/less/'",
     "lint": "npm run lint-js && npm run lint-less",
     "test-dist-react-16": "npm i @types/[email protected] @types/[email protected] --no-save && tsc --project 'tsconfig.json' --noEmit && npm run dist",
@@ -52,14 +52,14 @@
     "@types/random-seed": "^0.3.2",
     "@types/react": ">= 15",
     "@types/react-dom": ">= 15",
-    "@types/react-transition-group": "^1.1.4",
+    "@types/react-transition-group": "^2.9.2",
     "classnames": "^2.2.5",
     "cookie": "^0.3.1",
     "normalize.css": "^8.0.1",
     "random-seed": "^0.3.0",
     "react": ">= 15",
     "react-dom": ">= 15",
-    "react-transition-group": "^1.2.1"
+    "react-transition-group": "^2.9.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.1.5",
@@ -107,7 +107,7 @@
     "normalize.css": "8",
     "react": ">= 15",
     "react-dom": ">= 15",
-    "react-transition-group": "1"
+    "react-transition-group": "2"
   },
   "jest": {
     "testURL": "http://localhost/",

src/less/highlight.less

@@ -7,27 +7,40 @@
   }
 }
 
-.highlight-transition-enter.highlight-transition-enter-active,
-.highlight-transition-appear.highlight-transition-appear-active {
+.highlight-transition-enter-active,
+.highlight-transition-appear-active {
   &.highlight-overlay {
     opacity: 0.99;
     transition: opacity 0.3s ease-in;
   }
 }
 
-.highlight-transition-leave {
+.highlight-transition-enter-done,
+.highlight-transition-appear-done {
+  &.highlight-overlay {
+    opacity: 1;
+  }
+}
+
+.highlight-transition-exit {
   &.highlight-overlay {
     opacity: 0.99;
   }
 }
 
-.highlight-transition-leave.highlight-transition-leave-active {
+.highlight-transition-exit-active {
   &.highlight-overlay {
     opacity: 0.01;
     transition: opacity 0.2s ease-in;
   }
 }
 
+.highlight-transition-exit-done {
+  &.highlight-overlay {
+    opacity: 0;
+  }
+}
+
 /* @end Transition */
 
 .highlight {