How to use the terra-disclosure-manager.withDisclosureManager function in terra-disclosure-manager

To help you get started, we’ve selected a few terra-disclosure-manager examples, based on popular ways it is used in public projects.

github cerner / terra-framework / packages / terra-dialog-modal / src / terra-dev-site / doc / example / DialogModalWithFocus.jsx View on Github external
requestFocus={this.props.disclosureManager.requestFocus}
          releaseFocus={this.props.disclosureManager.releaseFocus}
        >
          <p>{paraOne}</p>
        </DialogModal>
        <Button text="Trigger Dialog Modal" onClick={this.handleOpenModal} />
        <br />
        <br />
        <Button text="Close Modal Manager" onClick={this.props.disclosureManager.closeDisclosure} />
      </div>
    );
  }
}

DialogModalWithFocus.propTypes = propTypes;
export default withDisclosureManager(DialogModalWithFocus);
github cerner / terra-framework / packages / terra-notification-dialog / src / terra-dev-site / doc / common / NotificationDialogWithFocus.jsx View on Github external
<Popup
          isArrowDisplayed
          isOpen={this.state.open}
          onRequestClose={this.handlePopupRequestClose}
          targetRef={() => document.getElementById('popup-in-modal')}
        >
          <Placeholder title="Popup Content" />
        </Popup>
        <Button id="popup-in-modal" text="Popup In Modal" onClick={this.handlePopupButtonClick} />
      </div>
    );
  }
}

NotificationDialogWithFocus.propTypes = propTypes;
export default withDisclosureManager(NotificationDialogWithFocus);
github cerner / terra-framework / packages / terra-application-layout / src / terra-dev-site / doc / common / ApplicationContent.jsx View on Github external
import React from 'react';
import PropTypes from 'prop-types';
import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';
import { Route } from 'react-router-dom';
import Button from 'terra-button';
import classNames from 'classnames/bind';

import ContentContainer from 'terra-content-container';
import styles from './ApplicationContent.module.scss';

const cx = classNames.bind(styles);

const DisclosureComponent = withDisclosureManager(({ disclosureManager }) => (
  <ContentContainer
    fill
  >
    <p>Hello World</p>
    <Button text="Close Modal" onClick={disclosureManager.closeDisclosure} />
  </ContentContainer>
));

const dummyContent = (
  <div>
    <h2>Lorem ipsum dolor sit amet</h2>
    <hr />
    <p>Nullam ornare sapien at sapien aliquam commodo. Pellentesque auctor, metus consectetur elementum venenatis, lectus libero tristique leo, ac blandit nunc metus vitae sem. Nam finibus orci quis aliquet elementum. Duis in pretium dolor, ac commodo nibh.</p>
    <p>Proin pellentesque lectus vitae risus imperdiet tempus. Sed ac justo luctus, iaculis quam in, cursus augue. In quis erat tincidunt, pellentesque velit in, pharetra ipsum. Praesent et tincidunt arcu. Ut imperdiet risus id leo eleifend vehicula. Maecenas non tempor arcu, nec posuere lectus. Pellentesque varius magna nunc, sit amet vehicula nisi fermentum et. Ut nibh sem, feugiat blandit lacus ut, mattis maximus libero. Ut tincidunt nibh in imperdiet finibus. Phasellus eu hendrerit justo. Aliquam ac dolor sit amet metus ornare tristique at viverra sem. Vivamus non erat enim. Praesent tempor lorem felis, in aliquam lacus aliquet in. Phasellus quam felis, porttitor eget dictum at, hendrerit in sem. Duis volutpat orci sed mauris pharetra, at mollis diam placerat. Phasellus sed leo dolor. Praesent leo risus, finibus elementum aliquam at, bibendum non eros. Nunc feugiat semper nisi nec sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sed feugiat lectus. Proin tellus justo, rhoncus vel arcu eget, molestie placerat lacus. Aliquam diam urna, finibus nec nisi ultricies, egestas vulputate tellus. Suspendisse varius metus eget orci sollicitudin lacinia. Morbi ornare arcu leo, non auctor mauris finibus ac. Etiam placerat orci at dui iaculis, ornare sagittis augue euismod. Etiam in justo vel ex gravida placerat eget quis libero. Etiam sit amet nisl neque. Sed id fringilla elit. Vestibulum vitae varius enim, sed luctus magna.</p>
    <p>Cras et ante blandit, tincidunt lacus non, tincidunt quam. Duis id eros gravida, eleifend leo non, mattis mi. Phasellus rutrum sapien at vehicula facilisis. Curabitur elementum, lacus vitae auctor interdum, sem turpis maximus urna, a vulputate sapien felis faucibus turpis. Pellentesque nec tempor libero. Nunc est augue, luctus non lorem quis, ultricies elementum tortor. Nam blandit lacus varius orci rutrum dignissim. Donec a vehicula odio. Nam lobortis metus vel nisi tincidunt, eget viverra quam tempor. Nam sed dictum metus. Ut laoreet ex eget dapibus condimentum. Sed quis bibendum ligula. Integer nec mollis urna, gravida pharetra massa. Sed nec tortor posuere, volutpat magna at, rhoncus orci.</p>
    <h2>Orci varius natoque penatibus et.</h2>
github cerner / terra-framework / packages / terra-slide-panel-manager / src / terra-dev-site / doc / example / DisclosureComponent.jsx View on Github external
this.setState({
                text: event.target.value,
              });
            }}
          />
          {this.state.text && this.state.text.length ? <p>Component has unsaved changes!</p> : null}
        </div>
      </ContentContainer>
    );
  }
}

DisclosureComponent.propTypes = propTypes;
DisclosureComponent.defaultProps = defaultProps;

const WrappedDisclosureComponent = withDisclosureManager(DisclosureComponent);

export default withDisclosureManager(WrappedDisclosureComponent);
github cerner / terra-framework / packages / terra-aggregator / src / terra-dev-site / doc / common / DisclosureComponent.jsx View on Github external
this.setState({
                text: event.target.value,
              });
            }}
          />
          {this.state.text && this.state.text.length ? <p>Component has unsaved changes!</p> : null}
        </div>
      </ContentContainer>
    );
  }
}

DisclosureComponent.propTypes = propTypes;
DisclosureComponent.defaultProps = defaultProps;

const WrappedDisclosureComponent = withDisclosureManager(DisclosureComponent);

export default WrappedDisclosureComponent;
github cerner / terra-framework / packages / terra-aggregator / src / terra-dev-site / doc / example / DisclosureBypassExample.jsx View on Github external
import React from 'react';
import ModalManager from 'terra-modal-manager';
import SlidePanelManager from 'terra-slide-panel-manager';

import Aggregator from 'terra-aggregator';
import AggregatorItem from 'terra-aggregator/lib/terra-dev-site/doc/common/AggregatorItem';
import { withDisclosureManager } from 'terra-disclosure-manager';

const Wrapper = withDisclosureManager(({ items, disclosureManager }) => (
  <Aggregator
    items={items}
    disclose={disclosureManager.disclose}
  />
));

const ModalManagerBypass = withDisclosureManager(({ disclosureManager }) => {
  const items = Object.freeze([{
    key: 'SECTION_0',
    component: <AggregatorItem name="Section 0" disclosureType="panel" key="SECTION_0" customDisclose={disclosureManager.disclose} discloseOnSelect />,
  }, {
    key: 'SECTION_1',
    component: <AggregatorItem name="Section 1" disclosureType="panel" key="SECTION_1" customDisclose={disclosureManager.disclose} discloseOnSelect />,
  }]);

  return (
github cerner / terra-framework / packages / terra-aggregator / src / terra-dev-site / doc / example / AggregatorInModalExample.jsx View on Github external
import React from 'react';
import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';
import ModalManager from 'terra-modal-manager';

import ModalAggregator from 'terra-aggregator/lib/terra-dev-site/doc/common/ModalAggregator';

const ModalButton = withDisclosureManager(({ disclosureManager }) => (
  <button
    type="button"
    onClick={() => {
      disclosureManager.disclose({
        preferredType: 'modal',
        size: 'large',
        content: {
          key: 'MODAL_EXAMPLE',
          component: <ModalAggregator identifier="MODAL_EXAMPLE" />,
        },
      });
    }}
  >
    Launch Modal
  </button>
));
github cerner / terra-framework / packages / terra-aggregator / src / terra-dev-site / doc / common / AggregatorItem.jsx View on Github external
import PropTypes from 'prop-types';
import Button from 'terra-button';
import ContentContainer from 'terra-content-container';
import Arrange from 'terra-arrange';
import ActionHeader from 'terra-action-header';
import { withDisclosureManager, disclosureManagerShape } from 'terra-disclosure-manager';
import classNames from 'classnames/bind';
import List from './placeholder-list/PlaceholderList';
import Item from './placeholder-list/PlaceholderListItem';
import styles from './AggregatorItem.module.scss';

import DisclosureComponent from './DisclosureComponent';

const cx = classNames.bind(styles);

const ReadonlyModal = withDisclosureManager(({ disclosureManager }) => (
  <ContentContainer
    header={(
      <ActionHeader
        title="Info Modal"
        onClose={disclosureManager.closeDisclosure}
        onBack={disclosureManager.goBack}
      />
    )}
  >
    <div className={cx('readonly-modal-content')}>
      <p>This modal was not presented through the Aggregator. The Aggregator state was maintained.</p>
    </div>
  </ContentContainer>
));

ReadonlyModal.propTypes = {
github cerner / terra-framework / packages / terra-popup / src / terra-dev-site / doc / example / PopupModalContent.jsx View on Github external
<Placeholder title="Popup Content" />
        </Popup>
        <Button id="popup-in-modal" text="Popup In Modal" onClick={handlePopupButtonClick} />
        <br />
        <br />
        <Button className="close-disclosure" text="Close Disclosure" onClick={disclosureManager.closeDisclosure} />
      </div>
    </React.Fragment>
  );
}

ModalContainer.propTypes = {
  disclosureManager: disclosureManagerShape,
};

export default withDisclosureManager(ModalContainer);
github cerner / terra-framework / packages / terra-slide-panel-manager / src / terra-dev-site / doc / example / DisclosureComponent.jsx View on Github external
});
            }}
          />
          {this.state.text && this.state.text.length ? <p>Component has unsaved changes!</p> : null}
        </div>
      </ContentContainer>
    );
  }
}

DisclosureComponent.propTypes = propTypes;
DisclosureComponent.defaultProps = defaultProps;

const WrappedDisclosureComponent = withDisclosureManager(DisclosureComponent);

export default withDisclosureManager(WrappedDisclosureComponent);