Unbreak HKModal (#38)

* Make HKModal a controlled component again

Also update stories to properly consume the button events.

* Correction to first line of state flow

* Update storyshots snaps

* Get that lint off ya shoulder

* Adjust transition easing of flyout animation

* Address feedback

* Update storyshots

* Document HKModal in README

* Add an HKModal example with a type-to-confirm field

* Use HKButton for "Show the Modal"

* Break HKModal stories into initially open vs closed

Author: idan

README.md

@@ -36,7 +36,60 @@ If you want to use `HKFlagIcon`, you will need to tell Webpack to copy the flag
 See [react-hk-components.herokuapp.com](https://react-hk-components.herokuapp.com)
 for a complete list of components that are available.
 
+#### HKModal
+
+The HKModal component displays modal dialogs of two kinds: normal, which appear in the middle of the browser viewport, and flyout, which slides in from the right. It takes the following props:
+
+* **`isFlyout`**: `boolean?`. Defaults to false.
+* **`show`**: `boolean`. Set it to `true` in order to trigger display of the modal, or `false` to trigger hiding.
+* **`type`**: `string?`. Set to `destructive` if you want the title of the modal to be rendered in red.
+* **`onDismiss`**: `(value?: string) => any`. A handler that is invoked with the close value when the modal is dismissed. Closing the modal by clicking outside the modal or by clicking on the X at the top-right of the modal will result in the handler being invoked with a value of `cancel`.
+* **`header`**: JSX element. What is rendered in the header of the modal.
+* **`buttons`**: `IButtonDefinition[]?`: an optional array of button definitions. These will be rendered left-to-right as buttons in the footer of the modal.
+
+The contents of the modal are the children passed in the body of the react element, e.g. `<HKModal> stuff to render in body of modal </HKModal>`
+
+Buttons are defined as follows:
+
+* **`text`**: `string`. The text on the button
+* **`type`**: `Button.Type`. Primary, secondary, danger, etc.
+* **`disabled`**: `boolean`. Set to `true` if you want the button disabled.
+* **`value`**: `string`. The value associated with the button. This is what will be remitted to the `onDismiss` handler when the user closes the modal by clicking on this button.
+
+So here's a working example:
+
+```tsx
+public class MyModalWrapper extends React.Component {
+  handleDismiss = (value?: string): any => {
+    switch(value) {
+      case 'ok':
+        // handle the OK case
+        break
+      case cancel:
+      default:
+        // handle the cancel case, which is also the default
+    }
+  }
+  public render() {
+    return (<HKModal
+      isFlyout={false}
+      show={true}
+      onDismiss={this.handleDismiss}
+      header={<div>My Modal</div>}
+      buttons={[
+        {text: 'cancel', value: 'cancel', type: 'tertiary'},
+        {text: 'OK', value: 'ok', type: 'primary'},
+      ]}
+    >
+      <div>Look at my shiny modal content!</div>
+      <p>Such shiny. Much wow.</p>
+    </HKModal>)    
+  }
+}
 
+
+
+```
 ## Development
 
 ### Installation

src/HKModal.tsx

@@ -3,57 +3,99 @@ import * as classnames from 'classnames'
 import * as React from 'react'
 import { Transition } from 'react-transition-group'
 import SRMModal from 'simple-react-modal'
+import {
+  default as HKButton,
+  Type as ButtonType,
+} from './HKButton'
 
 export enum Type {
   Actionable = 'actionable',
   Destructive = 'destructive',
   Presentation = 'presentation',
 }
 
+interface IButtonDefinition {
+  classNames?: string,
+  disabled: boolean,
+  text: string,
+  type: ButtonType,
+  value: string,
+}
+
 interface IModalProps {
   children: React.ReactNode,
   header: React.ReactNode,
-  footer: React.ReactNode,
+  buttons?: IButtonDefinition[],
   isFlyout?: boolean,
-  onDismiss: (...args: any[]) => any,
+  onDismiss: (value?: string) => any,
   show: boolean,
   type?: Type,
 }
 
 interface IModalState {
-  isClosing: boolean
+  isShowing: boolean,
+  isClosing: boolean,
 }
 
+/*
+Dramatis personae of the event flow in this component
+* Show: props.show. Used by the controlling component to indicate a desire to show/hide.
+* iS: state.isShowing. Initially false.
+* iC: state.isClosing. Initially false.
+* in: What should be passed as a prop to <Transition in={ aBoolean } ... />
+
+   Show  iS  iC  in
+1. F     F   F   -   never displayed
+2. T     F   F   -   controlling component wants us to display! gDSFP will derive the state on the following line.
+3. T     T   F   T   Shows the modal. In becomes true so transition in happens.
+4. *** props.onDismiss() is called, resulting in the controlling component setting show to F ***
+5. F     T   F   T   controlling component wants us to hide! gDSFP will derive the following state
+6. F     T   T   F   Transition to closed. In becomes false, triggers transition state "exiting"
+7. *** Transition out continues until handleExited() fires, setting isShowing to false
+8. F     F   T   F   Modal is hidden. Transition state is 'exited'
+9. T     F   T   F   Controlling component wants us to display! gDSFP will take us to step 3.
+*/
 export default class HKModal extends React.Component<IModalProps, IModalState> {
   public static defaultProps: Partial<IModalProps> = {
     isFlyout: false,
   }
 
   public static getDerivedStateFromProps (props, state) {
-    if (!props.show && state.isClosing) {
-      return { isClosing: false }
+    if (props.show) {
+      // reset state, we're showing the thing and not closing at all
+      return { isShowing: true, isClosing: false }
     } else {
-      return state
+      // We're somewhere in the process of closing the modal
+      // So set isClosing to true.
+      // isShowing will be set to false by handleExited(),
+      // which is the handler fired at the end of the transition out.
+      return { isClosing: true }
     }
   }
 
   public state = {
     isClosing: false,
+    isShowing: false,
+  }
+
+  public handleClose = (e: React.MouseEvent<HTMLElement>) => {
+    this.props.onDismiss('cancel')
   }
 
-  public handleClose = () => {
-    this.setState({
-      isClosing: true,
-    })
+  public handleButtonClick = (e: React.MouseEvent<HTMLInputElement>) => {
+    this.props.onDismiss(e.currentTarget.value)
   }
 
-  public handleExited = (node) => {
-    node.addEventListener('transitionend', this.props.onDismiss, false)
+  public handleExited = (node: Element) => {
+    node.addEventListener('transitionend', () => {
+      this.setState({ isShowing: false })
+    }, false)
   }
 
   public render () {
     const duration = 250
-    const { show, children, onDismiss, header, footer, isFlyout, type } = this.props
+    const { children, onDismiss, header, buttons, isFlyout, type } = this.props
+    const { isShowing, isClosing } = this.state
 
     const fadeTransition = {
       transition: `background ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`,
@@ -68,7 +110,7 @@ export default class HKModal extends React.Component<IModalProps, IModalState> {
 
     const innerTransition = isFlyout ? {
       transform: 'translateX(100%)',
-      transition: `transform ${duration}ms ease-in-out`,
+      transition: `transform ${duration}ms cubic-bezier(0,1,0.5,1)`,
     } : {}
 
     const innerStyles = isFlyout ? {
@@ -106,10 +148,13 @@ export default class HKModal extends React.Component<IModalProps, IModalState> {
       'flex-auto': isFlyout,
     }
 
-    const transitionIn = this.state.isClosing ? false : show
+    const footer = (buttons || []).map((b) => (
+      <HKButton key={b.value} value={b.value} type={b.type} disabled={b.disabled} onClick={this.handleButtonClick} className={classnames('ml1', b.classNames)}>{b.text}</HKButton>
+    ))
 
+    // in={!isClosing} is derived from the state table at the top of this component
     return (
-      <Transition in={transitionIn} timeout={0} onExited={this.handleExited}>
+      <Transition in={!isClosing} timeout={0} onExited={this.handleExited}>
         {(state) => (
           <SRMModal
             containerStyle={{
@@ -129,7 +174,7 @@ export default class HKModal extends React.Component<IModalProps, IModalState> {
             }}
             className={classnames('flex flex-column', modalParentClass)}
             closeOnOuterClick={true}
-            show={show}
+            show={isShowing}
             onClose={this.handleClose}
           >
             <div className='bg-near-white dark-gray bb b--light-silver f4 flex items-center justify-center br--top br2'>
@@ -139,7 +184,7 @@ export default class HKModal extends React.Component<IModalProps, IModalState> {
 
             <div className={classnames(modalChildrenClass)}>{children}</div>
 
-            {footer && <div className='bt b--light-silver w-100 pa3 tr'>{footer}</div>}
+            {buttons && <div className='bt b--light-silver w-100 pa3 tr'>{footer}</div>}
           </SRMModal>
         )}
       </Transition>

stories/HKModal.stories.tsx

@@ -1,19 +1,25 @@
 import * as React from 'react'
 
+import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 
-import { default as HKButton } from '../src/HKButton'
+import {
+  default as HKButton,
+  Type as ButtonType,
+} from '../src/HKButton'
 import { default as HKModal, Type } from '../src/HKModal'
 
 interface IModalWrapperProps {
   initialShowModal?: boolean,
-  isFlyout?: boolean
+  isFlyout?: boolean,
+  hasConfirm?: boolean,
   type?: Type,
 }
 
 interface IModalWrapperState {
+  confirmValue?: string,
   showModal: boolean,
-  isFlyout?: boolean
+  isFlyout?: boolean,
 }
 
 class ModalWrapper extends React.Component<
@@ -23,47 +29,83 @@ class ModalWrapper extends React.Component<
   constructor (props) {
     super(props)
     this.state = {
+      confirmValue: '',
       isFlyout: props.isFlyout,
       showModal: props.initialShowModal,
     }
   }
 
   public render () {
+    let confirmInput
+    let okDisabled = false
+    if (this.props.hasConfirm) {
+      confirmInput = (
+        <div>
+          <p>Type 'confirm' to enable the OK button</p>
+          <input
+            id='verifyForceRotateCredential'
+            className='hk-input w-100'
+            autoCorrect='off'
+            spellCheck={false}
+            autoFocus={true}
+            onChange={this.handleConfirmChange}
+            value={this.state.confirmValue}
+          />
+        </div>
+      )
+      okDisabled = this.state.confirmValue !== 'confirm'
+    }
     return (
       <div>
-        <button onClick={this.showModal}>show it</button>
+        <HKButton type={ButtonType.Primary} onClick={this.showModal}>Show the Modal</HKButton>
         <HKModal
           isFlyout={this.state.isFlyout}
           type={this.props.type && this.props.type}
           show={this.state.showModal}
           onDismiss={this.handleModalDismiss}
           header={<div>header text</div>}
-          footer={<HKButton>Submit</HKButton>}
+          buttons={[
+            {
+              disabled: false,
+              text: 'Cancel',
+              type: ButtonType.Tertiary,
+              value: 'cancel',
+            },
+            {
+              disabled: okDisabled,
+              text: 'OK',
+              type: this.props.type === Type.Destructive ? ButtonType.Danger : ButtonType.Primary,
+              value: 'ok',
+            },
+          ]}
         >
-          <div className='pa6'>with some important details here below</div>
+          <div className='pa6'>
+            <p>with some important details here below</p>
+            {confirmInput}
+          </div>
         </HKModal>
       </div>
     )
   }
 
-  private handleModalDismiss = () => {
-    this.setState({ showModal: false })
+  private handleModalDismiss = (value?: string) => {
+    this.setState({ showModal: false, confirmValue: '' })
+    action('Modal Dismiss')(value)
+  }
+
+  private handleConfirmChange = (e) => {
+    this.setState({ confirmValue: e.target.value })
   }
 
   private showModal = () => {
     this.setState({ showModal: true })
   }
 }
 
-storiesOf('HKModal', module)
-  .add('default', () => <ModalWrapper />)
-  .add('default initially open', () => <ModalWrapper initialShowModal={true} />)
-  .add('flyout', () => (
-    <ModalWrapper isFlyout={true} initialShowModal={false} />
-  ))
-  .add('flyout initially open', () => (
-    <ModalWrapper isFlyout={true} initialShowModal={true} />
-   ))
-  .add('destructive', () => (
-    <ModalWrapper type={Type.Destructive} />
-  ))
+[true, false].forEach((open) => {
+  storiesOf(`HKModal/${open ? 'initially open' : 'initially closed'}`, module)
+  .add('default', () => <ModalWrapper initialShowModal={open}/>)
+  .add('flyout', () => <ModalWrapper isFlyout={true} initialShowModal={open}/>)
+  .add('destructive', () => <ModalWrapper type={Type.Destructive} initialShowModal={open}/>)
+  .add('with confirmation', () => <ModalWrapper type={Type.Destructive} hasConfirm={true} initialShowModal={open}/>)
+})