Slide Panel Manager

[emilyrohrbough]

Issue Description

Create SlidePanelManager component.

Issue Type

• New Feature
• Enhancement
• Bug
• Other

Expected Behavior

The SlidePanelManager will be a Redux-backed container component that dynamically presents components within the panel content, when the panel content is shown. This component is expected to have similar API to the modal manager. The SlidePanelManager expected to maintain the panel content displayed via the use of the slide-group component.

Redux Actions will Include:

• OPEN: Open Slide Panel
• CLOSE: Close Slide Panel
• PUSH: Disclose next component
• POP: Dismiss component and return to previous component
• MAXIMIZE: Make slide panel fullscreen
• MINIMIZE: Return slide panel to the panelSize specified

[emilyrohrbough]

Tech Design for SlidePanelManager

React Props:

Prop	Type	Default	Description
app	AppDelegate.propType	undefined	The AppDelegate instance provided by the containing component. If present, its properties will propagate to the children components.
children	node	null	The content to be displayed as the main content of the SlidePanel
slidePanelComponentData	Array of Objects-> [{key: string, name: string, props}]	[]	The Array of component data (key, name, and props) that will be used to instantiate the panel content of the Slide Panel.
panelBehavior	string	'overlay'	SlidePanelProp- The style of panel presentation. Options are 'overlay' or 'squish'.
panelPosition	string	'end'	SlidePanelProp-The position at which the panel will be displayed. This property honors the current direction setting. Options are 'start' or 'end'.
panelSize	string	'small'	SlidePanelProp-The size at which the panel will be displayed. Options are 'small' or 'large'.
isOpen	bool	false	SlidePanelProp- Whether or not, when open, the panel should be displayed with the full width of the SlidePanel.
isFullscreen	bool	false	SlidePanelProp-Whether or not the panel should be displayed.
fill	bool	false	SlidePanelProp-Whether or not the SlidePanel should be sized relative to its parent container.
openPanel	func	undefined	A function that dispatches a PANEL_OPEN action.
closePanel	func	undefined	A function that dispatches a PANEL_CLOSE action.
pushPanel	func	undefined	A function that dispatches a PANEL_PUSH action.
popPanel	func	undefined	A function that dispatches a PANEL_POP action.
maximizePanel	func	undefined	A function that dispatches a PANEL_MAXIMIZE action.
minimizePanel	func	undefined	A function that dispatches a PANEL_MINIMIZE action.

Example:

//Demo Application

import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import SlidePanelManager, { reducers as slidePanelManagerReducers } from 'terra-slide-panel-manager';
import SlidePanelController from './SlidePanelController';

const store = createStore(combineReducers(slidePanelManagerReducers));

const SlidePanelManagerDemo = () => (
  <Provider store={store}>
    <SlidePanelManager>
      <SlidePanelController />
    </SlidePanelManager>
  </Provider>
);

export default SlidePanelManagerDemo;

//SlidePanelController.jsx

import React from 'react';
import PropTypes from 'prop-types';
import PanelContent, { disclosureName } from './PanelContent';

let nestedComponentIndex = 0;

DemoContainer.propTypes = {
  app: AppDelegate.propType,
};

class SlidePanelController extends React.Component {
  constructor(props) {
    super(props);

    this.disclose = this.disclose.bind(this);
    this.closeDisclosure = this.closeDisclosure.bind(this);
    this.goBack = this.goBack.bind(this);
    this.maximize = this.maximize.bind(this);
    this.minimize = this.minimize.bind(this);
  }

  disclose(size) {
    return () => {
      this.props.app.disclose({
        preferredType: 'panel',
        size,
        content: {
          key: `SlidePanelContainer-${nestedComponentIndex += 1}`,
          name: disclosureName,
          props: {
            someText: `DemoContainer-${nestedComponentIndex}`,
          },
        },
      });
    };
  }

  dismiss() {
    this.props.app.dismiss();
  }

  closeDisclosure() {
    this.props.app.closeDisclosure();
  }

  goBack() {
    this.props.app.goBack();
  }

  maximize() {
    this.props.app.maximize();
  }

  minimize() {
    this.props.app.minimize();
  }

  render() {
    const { app } = this.props;

    return (
      <div className="nested-component" style={{ height: '100%', padding: '10px' }}>
        <MainContent>
          <button className="disclose" onClick={this.disclose()}>Open Panel</button>
        </ MainContent>
      </div>
    );
  }
}

export default SlidePanelController;

// PanelContent.jsx

import AppDelegate from 'terra-app-delegate';

const PanelContent = ({ app, someText }) => (
  <div>
    {someText}
    <button onClick={app.closeDisclosure}>Close Modal</button>
    <button className="go-back" onClick={this.goBack}>Go Back</button>
    <button className="dismiss" onClick={this.dismiss}>Next</button>
    <button className="close-disclosure" onClick={this.closeDisclosure}>Close</button>
    <button className="maximize" onClick={this.maximize}>Maximize</button>
    <button className="minimize" onClick={this.minimize}>Minimize</button>
  </div>
)

export default PanelContent;

const disclosureName = 'PanelContentExample';
AppDelegate.registerComponentForDisclosure(disclosureName, PanelContent);
export { disclosureName };

[mjhenkes]

I vote we move this component to terra-framework.

[emilyrohrbough]

Moving this issue terra-framework. See cerner/terra-framework#4.