feat(Modal): add persistent option to modal (#48)

Author: gregberge

config/rollup.js

@@ -79,5 +79,9 @@ export const getRollupConfig = ({ pkg, pwd, buildName }) => {
     ],
   })
 
+  if (process.env.WATCH_MODE) {
+    return [esConfig]
+  }
+
   return [esConfig, cjsConfig, umdConfig, minConfig]
 }

docs/components/Modal.js

@@ -1,7 +1,27 @@
+import React from 'react'
 import { ModalDialog } from '@smooth-ui/core-sc'
 
 export const ModalDialogExample = ModalDialog.extend`
   left: auto;
   margin-right: auto;
   margin-left: auto;
 `
+
+export class Counter extends React.Component {
+  state = { count: 0 }
+
+  componentDidMount() {
+    this.interval = setInterval(
+      () => this.setState(({ count }) => ({ count: count + 1 })),
+      1000,
+    )
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    return this.state.count
+  }
+}

docs/components/Modal.mdx

@@ -16,7 +16,7 @@ import {
   Button,
   Toggler,
 } from '@smooth-ui/core-sc'
-import { ModalDialogExample } from './Modal'
+import { ModalDialogExample, Counter } from './Modal'
 
 # Modal
 
@@ -157,6 +157,54 @@ When modals become too long for the user’s viewport or device, they scroll ind
   </Toggler>
 </Playground>
 
+## Persistent
+
+Set `persistent` to `true` to keep the modal mounted even if closed.
+
+<Playground>
+  <BlockList>
+    <Toggler>
+      {({ toggled, onToggle }) => (
+        <div>
+          <Button variant="primary" onClick={() => onToggle(true)}>
+            Open non-persistent
+          </Button>
+          <Modal persistent={false} opened={toggled} onClose={() => onToggle(false)}>
+            <ModalDialog>
+              <ModalContent>
+                <ModalBody>
+                  Counter is resetted each time you open it <br />
+                  <Counter />
+                </ModalBody>
+              </ModalContent>
+            </ModalDialog>
+          </Modal>
+        </div>
+      )}
+    </Toggler>
+    <Toggler>
+      {({ toggled, onToggle }) => (
+        <div>
+          <Button variant="primary" onClick={() => onToggle(true)}>
+            Open persistent modal (default)
+          </Button>
+          <Modal opened={toggled} onClose={() => onToggle(false)}>
+            <ModalDialog>
+              <ModalContent>
+                <ModalBody>
+                  Counter continue in background <br />
+                  <Counter />
+                </ModalBody>
+              </ModalContent>
+            </ModalDialog>
+          </Modal>
+        </div>
+      )}
+    </Toggler>
+  </BlockList>
+</Playground>
+
+
 ## API
 
 ### Modal
@@ -166,6 +214,7 @@ When modals become too long for the user’s viewport or device, they scroll ind
     children: PropDesc.node,
     onClose: PropDesc.func,
     opened: PropDesc.bool,
+    persistent: PropDesc.bool.defaultTo(true).desc('Set "persistent" to `true` to keep modal mounted when closed'),
     ...getSystemPropDesc(Modal),
   })}
 />

docs/utils/PropDesc.js

@@ -8,7 +8,8 @@ const createType = typeDesc => {
     },
     defaultTo: {
       get() {
-        return value => createType({ ...typeDesc, defaultValue: { value } })
+        return value =>
+          createType({ ...typeDesc, defaultValue: { value: String(value) } })
       },
     },
     desc: {

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "lerna run build",
     "build:docs": "yarn build && docz build && cp _redirects .docz/dist",
+    "build:watch": "WATCH_MODE=true lerna run --parallel build -- --watch",
     "ci": "yarn lint && yarn test && yarn build && bundlesize",
     "dev": "docz dev",
     "lint": "eslint .",

packages/shared/core/Modal.js

@@ -54,6 +54,7 @@ class ModalComponent extends React.Component {
       opened,
       onClose,
       children,
+      persistent,
       ...props
     } = this.props
     if (!this.container) return null
@@ -62,25 +63,35 @@ class ModalComponent extends React.Component {
         timeout={theme ? theme.modalTransitionDuration : 300}
         in={this.props.opened}
       >
-        {transitionState => (
-          <div
-            role="dialog"
-            tabIndex="-1"
-            className={classNames(
-              'sui-modal',
-              {
-                'sui-modal-opened': opened || transitionState === 'exiting',
-                [`sui-modal-transition-${transitionState}`]: transitionState,
-              },
-              className,
-            )}
-            ref={baseRef}
-            {...props}
-          >
-            <div className="sui-modal-backdrop" onClick={onClose} />
-            {children}
-          </div>
-        )}
+        {transitionState => {
+          const visible =
+            opened ||
+            transitionState === 'entered' ||
+            transitionState === 'exiting' ||
+            transitionState === 'entering'
+          const mounted = persistent || visible
+          return (
+            <div
+              role="dialog"
+              tabIndex="-1"
+              className={classNames(
+                'sui-modal',
+                {
+                  'sui-modal-opened': visible,
+                  [`sui-modal-transition-${transitionState}`]: transitionState,
+                },
+                className,
+              )}
+              ref={baseRef}
+              {...props}
+            >
+              {mounted && (
+                <div className="sui-modal-backdrop" onClick={onClose} />
+              )}
+              {mounted && children}
+            </div>
+          )
+        }}
       </Transition>,
       this.container,
     )
@@ -141,8 +152,12 @@ const Modal = createComponent(() => ({
   propTypes: {
     children: PropTypes.node,
     opened: PropTypes.bool,
+    persistent: PropTypes.bool,
     onClose: PropTypes.func,
   },
+  defaultProps: {
+    persistent: true,
+  },
 }))
 
 export default Modal