assignment-modal v0.0.1-alpha.0

Assignment Modal

A modal used for assigning users, teams, and plans.

Installation

yarn add @pluralsight/assignment-modal

or

npm install @pluralsight/assignment-modal

Usage

import AssignmentModal from '@pluralsight/assignment-modal'

...

<AssignmentModal 
  title="Add members"
  directory={directoryItems}
  searchResults={searchResultItems}
  onLoad={handleOnLoad}
  onSearch={handleOnSearch}
  onSubmit={handleOnSubmit}
  submitButtonLabel="Add members"
  onCancel={handleOnCancel}
  analytics={{
    analyticsFacade: analyticsFacadeInstance,
    boundedContext: 'channels',
    source: 'channels/details'
    
  }}
/>

Props

Required

• title
• directory - data for shown teams and users. Array of objects with:
  • id
  • type - user, team, or plan
  • name
  • gravatarHash - for users only
  • role - the role of the item if it’s already assigned
  • children - (optional) array of this same shape
  • isLoadingChildren - (optional) shows spinner
• searchResults - same shape as directory. Used to show search results instead of the browse state.
• onLoad - function to call when items need to be loaded. Should update data passed to directory prop. Params:
  • parentId - the ID of the item to load children for (null if loading top level)
  • page - the page to load (0 for initial load)
• onSearch - function to call when a search is performed. Should update the directory prop. Params:
  • searchText
  • page - the page to load (zero-based)
• onSubmit - function to call when submitting. Params:
  • selectedItems - array of objects with:
    • id
    • type - user, team, or plan
    • name
  • selectedRole - value of selected role
  • shouldSendNotification
  • notificationText
• submitButtonLabel - text to show in submit button. In confirm modal will be prepended with “Yes, “
• onCancel - function called on X button click or Cancel Confirmation modal submit
• analytics - object with:
  • analyticsFacade - Your app’s analytics facade instance
  • boundedContext - the name of the BC where the component is being used
  • source - the area of your BC the widget is being used

Optional

• roles - list of roles to show in dropdown. Array of:
  • name
  • description
  • value
• shareLink - URL to copy to clipboard
• shareText - text to show next to the copy link button
• showNotificationSettings - if true show the notification step
• notificationTextPlaceholder
• renderConfirmationTitle - function that will be called to render the confirmation modal title. Should return a string. Params:
  • selectedItems - same shape as in onSubmit
• renderConfirmationMessage - function that will be called to render the confirmation modal text. Should return a string. If null is returned, no confirmation will show. Params:
  • selectedItems - same shape as in onSubmit
• renderCancelConfirmationMessage - function that will be called to render the cancel confirmation modal text. Should return a string. If null is returned, no confirmation will show. Params:
  • selectedItems - same shape as in onSubmit