How to use terra-hookshot - 9 common examples

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

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cerner / terra-framework / packages / terra-hookshot / src / terra-dev-site / doc / example / CoordsHookshotExample.jsx View on Github external
);

    return (
      /* eslint-disable jsx-a11y/no-static-element-interactions */
      <div>
        <div>
          <label>Attachment Behavior</label>
        </div>
        <select value="{this.state.hookshotAttachmentBehavior}" name="hookshotAttachmentBehavior" id="{getId('hookshotAttachmentBehavior')}">
          {generateOptions(Hookshot.attachmentBehaviors)}
        </select>
        <br>
        <br>
        
        <div>
          <label>Content Attachment</label>
        </div>
        </div>
github cerner / terra-core / packages / terra-popup / src / Popup.jsx View on Github external
'top center',
  'top right',
  'middle left',
  'middle center',
  'middle right',
  'bottom left',
  'bottom center',
  'bottom right',
];

const propTypes = {
  /**
   * If the primary attachment in not available, how should the content be positioned. Options
   * include 'auto', 'flip', or 'none'.
   */
  attachmentBehavior: PropTypes.oneOf(Hookshot.attachmentBehaviors),
  /**
   * The children to be displayed as content within the popup.
   */
  children: PropTypes.node.isRequired,
  /**
   * Callback function indicating a close condition was met, should be combined with isOpen for state management.
   */
  onRequestClose: PropTypes.func.isRequired,
  /**
   * Target element for the popup to anchor to.
   */
  targetRef: PropTypes.func.isRequired,
  /**
   * Bounding container for the popup, will use window if no value provided.
   */
  boundingRef: PropTypes.func,
github cerner / terra-framework / packages / terra-hookshot / src / terra-dev-site / doc / example / HookshotExample.jsx View on Github external
constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleAttachementBehaviorChange = this.handleAttachementBehaviorChange.bind(this);
    this.handleContentAttachmentChange = this.handleContentAttachmentChange.bind(this);
    this.handleTargetAttachmentChange = this.handleTargetAttachmentChange.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      isOpen: false,
      hookshotContentAttachment: ATTACHMENT_POSITIONS[1],
      hookshotTargetAttachment: ATTACHMENT_POSITIONS[7],
      hookshotAttachmentBehavior: Hookshot.attachmentBehaviors[0],
      hookshotAttachmentMargin: 0,
    };
  }
github cerner / terra-framework / packages / terra-hookshot / src / terra-dev-site / doc / example / BoundedHookshotExample.jsx View on Github external
);

    return (
      <div>
        <div>
          <label>Attachment Behavior</label>
        </div>
        <select value="{this.state.hookshotAttachmentBehavior}" name="hookshotAttachmentBehavior" id="{getId('hookshotAttachmentBehavior')}">
          {generateOptions(Hookshot.attachmentBehaviors)}
        </select>
        <br>
        <br>
        
        <div>
          <label>Content Attachment</label>
        </div>
        </div>
github cerner / terra-framework / packages / terra-hookshot / src / terra-dev-site / doc / example / BoundedHookshotExample.jsx View on Github external
constructor(props) {
    super(props);
    this.handleButtonClick = this.handleButtonClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleAttachementBehaviorChange = this.handleAttachementBehaviorChange.bind(this);
    this.handleContentAttachmentChange = this.handleContentAttachmentChange.bind(this);
    this.handleTargetAttachmentChange = this.handleTargetAttachmentChange.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.setParentNode = this.setParentNode.bind(this);
    this.getParentNode = this.getParentNode.bind(this);
    this.state = {
      isOpen: false,
      hookshotContentAttachment: ATTACHMENT_POSITIONS[1],
      hookshotTargetAttachment: ATTACHMENT_POSITIONS[7],
      hookshotAttachmentBehavior: Hookshot.attachmentBehaviors[0],
      hookshotAttachmentMargin: 0,
    };
  }
github cerner / terra-framework / packages / terra-hookshot / src / terra-dev-site / doc / example / CoordsHookshotExample.jsx View on Github external
constructor(props) {
    super(props);
    this.handleRegionClick = this.handleRegionClick.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.setParentNode = this.setParentNode.bind(this);
    this.getParentNode = this.getParentNode.bind(this);
    this.handleAttachementBehaviorChange = this.handleAttachementBehaviorChange.bind(this);
    this.handleContentAttachmentChange = this.handleContentAttachmentChange.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {
      isOpen: false,
      coordinates: undefined,
      hookshotContentAttachment: ATTACHMENT_POSITIONS[1],
      hookshotAttachmentBehavior: Hookshot.attachmentBehaviors[0],
      hookshotAttachmentMargin: 0,
    };
  }
github cerner / terra-framework / packages / terra-hookshot / src / terra-dev-site / doc / example / HookshotExample.jsx View on Github external
);

    return (
      <div>
        <div>
          <label>Attachment Behavior</label>
        </div>
        <select value="{this.state.hookshotAttachmentBehavior}" name="hookshotAttachmentBehavior" id="{getId('hookshotAttachmentBehavior')}">
          {generateOptions(Hookshot.attachmentBehaviors)}
        </select>
        <br>
        <br>
        
        <div>
          <label>Content Attachment</label>
        </div>
        </div>
github cerner / terra-framework / packages / terra-popup / src / Popup.jsx View on Github external
validateContentNode(node) {
    if (node) {
      const contentRect = Hookshot.Utils.getBounds(node);
      if (this.contentHeight !== contentRect.height || this.contentWidth !== contentRect.width) {
        this.contentHeight = contentRect.height;
        this.contentWidth = contentRect.width;
        this.forceUpdate();
      }
      this.isContentSized = true;
    }
  }
github cerner / terra-core / packages / terra-popup / src / Popup.jsx View on Github external
validateContentNode(node) {
    if (node) {
      const contentRect = Hookshot.Utils.getBounds(node);
      if (this.contentHeight !== contentRect.height || this.contentWidth !== contentRect.width) {
        this.contentHeight = contentRect.height;
        this.contentWidth = contentRect.width;
        this.forceUpdate();
      }
      this.isContentSized = true;
    }
  }

terra-hookshot

The Terra Hookshot component positions portaled content according to target and content attachments, ensuring they stay visually connected.

Apache-2.0
Latest version published 25 days ago

Package Health Score

85 / 100
Full package analysis