From 76873c52407590f869261a5166aa5f3225a8d781 Mon Sep 17 00:00:00 2001 From: reneshen0328 Date: Mon, 11 May 2026 13:09:22 -0700 Subject: [PATCH] feat(shared-link-modal): Deprecate shared-link-modal --- i18n/en-US.properties | 84 ---- .../shared-link-modal/AccessDescription.js | 99 ----- src/features/shared-link-modal/AccessLabel.js | 35 -- src/features/shared-link-modal/AccessMenu.js | 135 ------- .../shared-link-modal/EmailSharedLink.js | 220 ----------- .../shared-link-modal/EmailSharedLink.scss | 43 --- .../shared-link-modal/PermissionMenu.js | 61 --- .../RemoveLinkConfirmModal.js | 45 --- src/features/shared-link-modal/SharedLink.js | 136 ------- src/features/shared-link-modal/SharedLink.md | 64 --- .../shared-link-modal/SharedLink.scss | 60 --- .../shared-link-modal/SharedLinkAccess.js | 84 ---- .../shared-link-modal/SharedLinkModal.js | 194 ---------- .../shared-link-modal/SharedLinkModal.md | 130 ------- .../__tests__/AccessDescription.test.js | 249 ------------ .../__tests__/AccessLabel.test.js | 62 --- .../__tests__/AccessMenu.test.js | 112 ------ .../__tests__/EmailSharedLink.test.js | 365 ------------------ .../__tests__/PermissionMenu.test.js | 58 --- .../__tests__/RemoveLinkConfirmModal.test.js | 52 --- .../__tests__/SharedLink.test.js | 94 ----- .../__tests__/SharedLinkAccess.test.js | 41 -- .../__tests__/SharedLinkModal.test.js | 99 ----- .../__snapshots__/AccessLabel.test.js.snap | 41 -- .../__snapshots__/AccessMenu.test.js.snap | 85 ---- .../__snapshots__/SharedLink.test.js.snap | 81 ---- .../SharedLinkAccess.test.js.snap | 43 --- .../SharedLinkModal.test.js.snap | 21 - src/features/shared-link-modal/constants.js | 8 - src/features/shared-link-modal/index.js | 2 - src/features/shared-link-modal/messages.js | 232 ----------- src/features/shared-link-modal/propTypes.js | 14 - .../stories/SharedLink.stories.js | 72 ---- .../stories/SharedLink.stories.md | 1 - .../stories/SharedLinkModal.stories.js | 111 ------ .../stories/SharedLinkModal.stories.md | 1 - .../SharedLinkSettingsModal.js | 15 +- 37 files changed, 5 insertions(+), 3244 deletions(-) delete mode 100644 src/features/shared-link-modal/AccessDescription.js delete mode 100644 src/features/shared-link-modal/AccessLabel.js delete mode 100644 src/features/shared-link-modal/AccessMenu.js delete mode 100644 src/features/shared-link-modal/EmailSharedLink.js delete mode 100644 src/features/shared-link-modal/EmailSharedLink.scss delete mode 100644 src/features/shared-link-modal/PermissionMenu.js delete mode 100644 src/features/shared-link-modal/RemoveLinkConfirmModal.js delete mode 100644 src/features/shared-link-modal/SharedLink.js delete mode 100644 src/features/shared-link-modal/SharedLink.md delete mode 100644 src/features/shared-link-modal/SharedLink.scss delete mode 100644 src/features/shared-link-modal/SharedLinkAccess.js delete mode 100644 src/features/shared-link-modal/SharedLinkModal.js delete mode 100644 src/features/shared-link-modal/SharedLinkModal.md delete mode 100644 src/features/shared-link-modal/__tests__/AccessDescription.test.js delete mode 100644 src/features/shared-link-modal/__tests__/AccessLabel.test.js delete mode 100644 src/features/shared-link-modal/__tests__/AccessMenu.test.js delete mode 100644 src/features/shared-link-modal/__tests__/EmailSharedLink.test.js delete mode 100644 src/features/shared-link-modal/__tests__/PermissionMenu.test.js delete mode 100644 src/features/shared-link-modal/__tests__/RemoveLinkConfirmModal.test.js delete mode 100644 src/features/shared-link-modal/__tests__/SharedLink.test.js delete mode 100644 src/features/shared-link-modal/__tests__/SharedLinkAccess.test.js delete mode 100644 src/features/shared-link-modal/__tests__/SharedLinkModal.test.js delete mode 100644 src/features/shared-link-modal/__tests__/__snapshots__/AccessLabel.test.js.snap delete mode 100644 src/features/shared-link-modal/__tests__/__snapshots__/AccessMenu.test.js.snap delete mode 100644 src/features/shared-link-modal/__tests__/__snapshots__/SharedLink.test.js.snap delete mode 100644 src/features/shared-link-modal/__tests__/__snapshots__/SharedLinkAccess.test.js.snap delete mode 100644 src/features/shared-link-modal/__tests__/__snapshots__/SharedLinkModal.test.js.snap delete mode 100644 src/features/shared-link-modal/constants.js delete mode 100644 src/features/shared-link-modal/index.js delete mode 100644 src/features/shared-link-modal/messages.js delete mode 100644 src/features/shared-link-modal/propTypes.js delete mode 100644 src/features/shared-link-modal/stories/SharedLink.stories.js delete mode 100644 src/features/shared-link-modal/stories/SharedLink.stories.md delete mode 100644 src/features/shared-link-modal/stories/SharedLinkModal.stories.js delete mode 100644 src/features/shared-link-modal/stories/SharedLinkModal.stories.md diff --git a/i18n/en-US.properties b/i18n/en-US.properties index d4cffb1b42..bfbf4abd49 100644 --- a/i18n/en-US.properties +++ b/i18n/en-US.properties @@ -1698,12 +1698,6 @@ boxui.selectField.clearAll = Clear All boxui.selectField.noResults = No Results # Placeholder text shown in the search input boxui.selectField.searchPlaceholder = Search -# Title for "Access Type" menu, in all capital letters -boxui.share.accessType = ACCESS TYPE -# Label for a shared link permission level -boxui.share.canEdit = Can edit -# Label for a shared link permission level -boxui.share.canView = Can view # Text for Co-owner permission level in permissions table boxui.share.coownerLevelText = Co-owner # Text for permissions table Delete column @@ -1714,10 +1708,6 @@ boxui.share.downloadTableHeaderText = Download boxui.share.editTableHeaderText = Edit # Text for Editor permission level in permissions table boxui.share.editorLevelText = Editor -# Field label for shared link recipient list (title-case) -boxui.share.emailSharedLink = Email Shared Link -# Error message when user tries to send shared link as email without entering any recipients -boxui.share.enterAtLeastOneEmail = Enter at least one valid email # Text for permissions table Get Link column boxui.share.getLinkTableHeaderText = Get Link # Label for a Group contact type @@ -1736,70 +1726,10 @@ boxui.share.inviteFileEditorsLabel = Invite people to become editors of this fil boxui.share.inviteePermissionsFieldLabel = Invitee Permissions # Tooltip text a user can use to learn more about collaborator permission options boxui.share.inviteePermissionsLearnMore = Learn More -# Label for "Message" text box to email the shared link (title-case) -boxui.share.message = Message # Placeholder text for message section boxui.share.messageSelectorPlaceholder = Add a message # Text for permissions table Owner column boxui.share.ownerTableHeaderText = Owner -# Description of a company shared link for a file with view and download permissions -boxui.share.peopleInCompanyCanDownloadFile = Anyone in your company with the link can view and download this file. -# Description of a company shared link for a folder with view and download permissions -boxui.share.peopleInCompanyCanDownloadFolder = Anyone in your company with the link can view this folder and download its contents. -# Description of a company shared link for a file with edit permissions (implies view and download permissions as well) -boxui.share.peopleInCompanyCanEditFile = Anyone in your company with the link can edit and download this file. -# Description of a company shared link for a file with view permissions -boxui.share.peopleInCompanyCanViewFile = Anyone in your company with the link can view this file. -# Description of a company shared link for a folder with view permissions -boxui.share.peopleInCompanyCanViewFolder = Anyone in your company with the link can view this folder. -# This string describes the access level of a file or folder, or who can see the item. {enterpriseName} is the company name -boxui.share.peopleInEnterprise = People in {enterpriseName} -# Description of a collaborator-only shared link for a file with no permissions -boxui.share.peopleInItemCanAccessFile = Any collaborator on the file with the link can access this file. -# Description of a collaborator-only shared link for a folder with no permissions -boxui.share.peopleInItemCanAccessFolder = Any collaborator on the folder with the link can access this folder. -# Description of a collaborator-only shared link for a file with download permissions -boxui.share.peopleInItemCanDownloadFile = Any collaborator on this file with the link can download this file. -# Description of a collaborator-only shared link for a folder with download permissions -boxui.share.peopleInItemCanDownloadFolder = Any collaborator on this folder with the link can download this folder. -# Description of a collaborator-only shared link for a file with edit permissions (implies view and download permissions as well) -boxui.share.peopleInItemCanEditFile = Any collaborator on this file with the link can edit this file and download its contents. -# Description of a collaborator-only shared link for a file with view and download permissions -boxui.share.peopleInItemCanPreviewAndDownloadFile = Any collaborator on this file with the link can view this file and download its contents. -# Description of a collaborator-only shared link for a folder with view and download permissions -boxui.share.peopleInItemCanPreviewAndDownloadFolder = Any collaborator on this folder with the link can view this folder and download its contents. -# Description of a collaborator-only shared link for a file with view permissions -boxui.share.peopleInItemCanPreviewFile = Any collaborator on this file with the link can view this file. -# Description of a collaborator-only shared link for a folder with view permissions -boxui.share.peopleInItemCanPreviewFolder = Any collaborator on this folder with the link can view this folder. -# Description of a specific company shared link for a file with view and download permissions. {company} is the company name -boxui.share.peopleInSpecifiedCompanyCanDownloadFile = Anyone in {company} with the link can view and download this file. -# Description of a specific company shared link for a folder with view and download permissions. {company} is the company name -boxui.share.peopleInSpecifiedCompanyCanDownloadFolder = Anyone in {company} with the link can view this folder and download its contents. -# Description of a specific company shared link for a file with edit permissions (implies view and download permissions as well). {company} is the company name -boxui.share.peopleInSpecifiedCompanyCanEditFile = Anyone in {company} with the link can edit and download this file. -# Description of an specific company shared link for a file with view permissions. {company} is the company name -boxui.share.peopleInSpecifiedCompanyCanViewFile = Anyone in {company} with the link can view this file. -# Description of an specific company shared link for a folder with view permissions. {company} is the company name -boxui.share.peopleInSpecifiedCompanyCanViewFolder = Anyone in {company} with the link can view this folder. -# Label for "People in this file" option -boxui.share.peopleInThisFile = People in this file -# Label for "People in this folder" option -boxui.share.peopleInThisFolder = People in this folder -# Label for "People in your company" option -boxui.share.peopleInYourCompany = People in your company -# Description of an open shared link for a file with view and download permissions -boxui.share.peopleWithLinkCanDownloadFile = Anyone with the link can view and download this file. -# Description of an open shared link for a folder with view and download permissions -boxui.share.peopleWithLinkCanDownloadFolder = Anyone with the link can view this folder and download its contents. -# Description of an open shared link for a file with edit permissions (implies view and download permissions as well) -boxui.share.peopleWithLinkCanEditFile = Anyone with the link can edit and download this file. -# Description of an open shared link for a file with view permissions -boxui.share.peopleWithLinkCanViewFile = Anyone with the link can view this file. -# Description of an open shared link for a folder with view permissions -boxui.share.peopleWithLinkCanViewFolder = Anyone with the link can view this folder. -# Label for "People with the link" option -boxui.share.peopleWithTheLink = People with the link # Text for permissions table Permission Levels column boxui.share.permissionLevelsTableHeaderText = Permission Levels # Label for optional personal message to include when inviting collaborators to an item @@ -1818,20 +1748,6 @@ boxui.share.referAFriendBadgeText = REFER boxui.share.referAFriendRewardCenterLinkText = Click Here # Text encouraging users to refer a friend to sign up for Box boxui.share.referAFriendText = Want a free month of Box? Refer your friend! -# Label for option to remove shared link -boxui.share.removeLink = Remove Link -# Description for confirmation modal to remove a shared link -boxui.share.removeLinkConfirmationDescription = This will permanently remove the shared link. If this item is embedded on other sites it will also become inaccessible. Any custom properties, settings and expirations will be removed as well. Do you want to continue? -# Label for confirmation modal to remove a shared link (title-case) -boxui.share.removeLinkConfirmationTitle = Remove Shared Link -# Accessible label for button that loads share settings popup -boxui.share.settingsButtonLabel = Open shared link settings popup -# Tooltip describing when this shared link will expire. {expiration, date, long} is the formatted date -boxui.share.sharedLinkExpirationTooltip = This link will expire on {expiration, date, long} -# Label for field to copy shared link URL (title-case) -boxui.share.sharedLinkLabel = Shared Link -# Title for shared link modal (title-case) -boxui.share.sharedLinkModalTitle = Shared Link for {itemName} # Text to show when the access level of people in company and user can view only boxui.share.sharedLinkSettings.accessLevel.inCompanyView = This content is available to anyone within your company with the link, and can be viewed. # Text to show when the access level of people in company and user can view and download diff --git a/src/features/shared-link-modal/AccessDescription.js b/src/features/shared-link-modal/AccessDescription.js deleted file mode 100644 index 5de1119bb5..0000000000 --- a/src/features/shared-link-modal/AccessDescription.js +++ /dev/null @@ -1,99 +0,0 @@ -/* @flow */ -import * as React from 'react'; -import { FormattedMessage } from 'react-intl'; - -import { PEOPLE_WITH_LINK, PEOPLE_IN_COMPANY, PEOPLE_IN_ITEM } from './constants'; -import { accessLevelPropType } from './propTypes'; -import messages from './messages'; - -type Props = { - accessLevel?: accessLevelPropType, - enterpriseName?: string, - isDownloadAllowed?: boolean, - isEditAllowed?: boolean, - isPreviewAllowed?: boolean, - itemType: string, -}; - -const AccessDescription = (props: Props) => { - const { accessLevel, enterpriseName, isDownloadAllowed, isEditAllowed, isPreviewAllowed, itemType } = props; - - let description; - - switch (accessLevel) { - case PEOPLE_WITH_LINK: - if (itemType !== 'folder' && isEditAllowed) { - description = messages.peopleWithLinkCanEditFile; - } else if (isDownloadAllowed) { - description = - itemType === 'folder' - ? messages.peopleWithLinkCanDownloadFolder - : messages.peopleWithLinkCanDownloadFile; - } else { - description = - itemType === 'folder' ? messages.peopleWithLinkCanViewFolder : messages.peopleWithLinkCanViewFile; - } - break; - - case PEOPLE_IN_COMPANY: - if (itemType === 'folder') { - if (isDownloadAllowed) { - description = enterpriseName - ? messages.peopleInSpecifiedCompanyCanDownloadFolder - : messages.peopleInCompanyCanDownloadFolder; - } else { - description = enterpriseName - ? messages.peopleInSpecifiedCompanyCanViewFolder - : messages.peopleInCompanyCanViewFolder; - } - } else if (isEditAllowed) { - description = enterpriseName - ? messages.peopleInSpecifiedCompanyCanEditFile - : messages.peopleInCompanyCanEditFile; - } else if (isDownloadAllowed) { - description = enterpriseName - ? messages.peopleInSpecifiedCompanyCanDownloadFile - : messages.peopleInCompanyCanDownloadFile; - } else { - description = enterpriseName - ? messages.peopleInSpecifiedCompanyCanViewFile - : messages.peopleInCompanyCanViewFile; - } - break; - - case PEOPLE_IN_ITEM: - if (itemType !== 'folder' && isEditAllowed) { - description = messages.peopleInItemCanEditFile; - } else if (isPreviewAllowed && isDownloadAllowed) { - description = - itemType === 'folder' - ? messages.peopleInItemCanPreviewAndDownloadFolder - : messages.peopleInItemCanPreviewAndDownloadFile; - } else if (isPreviewAllowed) { - description = - itemType === 'folder' ? messages.peopleInItemCanPreviewFolder : messages.peopleInItemCanPreviewFile; - } else if (isDownloadAllowed) { - description = - itemType === 'folder' - ? messages.peopleInItemCanDownloadFolder - : messages.peopleInItemCanDownloadFile; - } else { - description = - itemType === 'folder' ? messages.peopleInItemCanAccessFolder : messages.peopleInItemCanAccessFile; - } - break; - - default: - return null; - } - - return ( -

- -

- ); -}; - -AccessDescription.displayName = 'AccessDescription'; - -export default AccessDescription; diff --git a/src/features/shared-link-modal/AccessLabel.js b/src/features/shared-link-modal/AccessLabel.js deleted file mode 100644 index 1322a5debd..0000000000 --- a/src/features/shared-link-modal/AccessLabel.js +++ /dev/null @@ -1,35 +0,0 @@ -// @flow -import * as React from 'react'; -import { FormattedMessage } from 'react-intl'; - -import { PEOPLE_WITH_LINK, PEOPLE_IN_COMPANY, PEOPLE_IN_ITEM } from './constants'; -import messages from './messages'; - -type Props = { - accessLevel: string, - enterpriseName?: string, - itemType: string, -}; - -const AccessLabel = ({ accessLevel, enterpriseName, itemType }: Props) => { - switch (accessLevel) { - case PEOPLE_WITH_LINK: - return ; - case PEOPLE_IN_COMPANY: - return enterpriseName ? ( - - ) : ( - - ); - case PEOPLE_IN_ITEM: - return itemType === 'folder' ? ( - - ) : ( - - ); - default: - return null; - } -}; - -export default AccessLabel; diff --git a/src/features/shared-link-modal/AccessMenu.js b/src/features/shared-link-modal/AccessMenu.js deleted file mode 100644 index c4465b4219..0000000000 --- a/src/features/shared-link-modal/AccessMenu.js +++ /dev/null @@ -1,135 +0,0 @@ -/* @flow */ -import React, { Component } from 'react'; -import classNames from 'classnames'; -import { FormattedMessage } from 'react-intl'; - -import PlainButton from '../../components/plain-button'; -import DropdownMenu, { MenuToggle } from '../../components/dropdown-menu'; -import { Menu, MenuSeparator, MenuSectionHeader, SelectMenuItem } from '../../components/menu'; - -import messages from './messages'; -import { PEOPLE_WITH_LINK, PEOPLE_IN_COMPANY, PEOPLE_IN_ITEM } from './constants'; -import { accessLevelPropType, allowedAccessLevelsPropType } from './propTypes'; -import AccessLabel from './AccessLabel'; -import RemoveLinkConfirmModal from './RemoveLinkConfirmModal'; - -const accessLevels = [PEOPLE_WITH_LINK, PEOPLE_IN_COMPANY, PEOPLE_IN_ITEM]; - -type Props = { - accessDropdownMenuProps?: Object, - accessLevel: accessLevelPropType, - accessMenuButtonProps?: Object, - allowedAccessLevels: allowedAccessLevelsPropType, - canRemoveLink?: boolean, - changeAccessLevel: Function, - enterpriseName?: string, - itemType: string, - removeLink: Function, - removeLinkButtonProps?: Object, - submitting?: boolean, -}; - -type State = { - isConfirmModalOpen: boolean, -}; - -class AccessMenu extends Component { - static defaultProps = { - accessDropdownMenuProps: {}, - accessMenuButtonProps: {}, - removeLinkButtonProps: {}, - }; - - state = { - isConfirmModalOpen: false, - }; - - openConfirmModal = () => { - this.setState({ isConfirmModalOpen: true }); - }; - - closeConfirmModal = () => { - this.setState({ isConfirmModalOpen: false }); - }; - - renderMenu() { - const { - accessLevel, - allowedAccessLevels, - canRemoveLink, - changeAccessLevel, - enterpriseName, - itemType, - removeLinkButtonProps, - } = this.props; - - return ( - - - - - {accessLevels.map(level => - allowedAccessLevels[level] ? ( - changeAccessLevel(level)} - > - - - ) : null, - )} - {canRemoveLink && } - {canRemoveLink && ( - - - - )} - - ); - } - - render() { - const { - accessDropdownMenuProps, - accessLevel, - accessMenuButtonProps, - enterpriseName, - itemType, - removeLink, - submitting, - } = this.props; - const { isConfirmModalOpen } = this.state; - - return ( - - - - - - - - {this.renderMenu()} - - - - ); - } -} - -export default AccessMenu; diff --git a/src/features/shared-link-modal/EmailSharedLink.js b/src/features/shared-link-modal/EmailSharedLink.js deleted file mode 100644 index 11a06b954d..0000000000 --- a/src/features/shared-link-modal/EmailSharedLink.js +++ /dev/null @@ -1,220 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { FormattedMessage, injectIntl } from 'react-intl'; - -import PillSelectorDropdown from '../../components/pill-selector-dropdown'; -import ContactDatalistItem from '../../components/contact-datalist-item'; -import TextArea from '../../components/text-area'; -import PrimaryButton from '../../components/primary-button'; -import { ModalActions } from '../../components/modal'; -import Button from '../../components/button'; -import parseEmails from '../../utils/parseEmails'; -import commonMessages from '../../common/messages'; - -import messages from './messages'; - -import './EmailSharedLink.scss'; - -class EmailSharedLink extends Component { - static propTypes = { - contacts: PropTypes.arrayOf( - PropTypes.shape({ - email: PropTypes.string, - id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isrequired, - name: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, - }), - ).isRequired, - defaultEmailMessage: PropTypes.string, - emailMessageProps: PropTypes.object, - intl: PropTypes.any, - getContacts: PropTypes.func.isRequired, - isExpanded: PropTypes.bool, - onExpand: PropTypes.func.isRequired, - onRequestClose: PropTypes.func.isRequired, - sendEmail: PropTypes.func.isRequired, - submitting: PropTypes.bool, - }; - - static defaultProps = { - emailMessageProps: {}, - }; - - constructor(props) { - super(props); - - const { defaultEmailMessage } = props; - - this.state = { - pillSelectorError: '', - pillSelectorInputValue: '', - emailMessage: defaultEmailMessage || '', - selectedOptions: [], - }; - } - - getSelectorOptions = () => { - const { contacts } = this.props; - const { pillSelectorInputValue, selectedOptions } = this.state; - - if (pillSelectorInputValue !== '') { - return contacts - .filter( - // filter contacts who have already been selected - ({ email, id }) => !selectedOptions.find(({ value }) => value === email || value === id), - ) - .map(({ email, id, name, type }) => ({ - // map to standardized DatalistItem format - // TODO: refactor this so inline conversions aren't required at every usage - email, - id, - text: name, - type, - value: email || id, // if email doesn't exist, contact is a group, use id - })); - } - - // return empty selector options if input value is empty - return []; - }; - - handlePillSelectorInput = value => { - const { getContacts } = this.props; - - const trimmedValue = value.trim(); - - getContacts(trimmedValue); - - // As user is typing, reset error - this.setState({ - pillSelectorError: '', - pillSelectorInputValue: trimmedValue, - }); - }; - - handlePillSelect = pills => { - this.setState({ - selectedOptions: [...this.state.selectedOptions, ...pills], - }); - }; - - handlePillRemove = (option, index) => { - const selectedOptions = this.state.selectedOptions.slice(); - selectedOptions.splice(index, 1); - this.setState({ selectedOptions }); - }; - - validateForError = text => { - const { - intl: { formatMessage }, - } = this.props; - let pillSelectorError = ''; - - if (text && !this.validator(text)) { - pillSelectorError = formatMessage(commonMessages.invalidEmailError); - } - - this.setState({ pillSelectorError }); - }; - - validator = text => { - // email input validation - const pattern = /^[^\s<>@,]+@[^\s<>@,/\\]+\.[^\s<>@,]+$/i; - return pattern.test(text); - }; - - sendEmail = event => { - event.preventDefault(); - - const { - intl: { formatMessage }, - sendEmail, - } = this.props; - const { selectedOptions, emailMessage, pillSelectorError } = this.state; - - if (pillSelectorError !== '') { - return; - } - - if (selectedOptions.length === 0) { - // Block submission if no pills are selected - this.setState({ - pillSelectorError: formatMessage(messages.enterAtLeastOneEmailError), - }); - return; - } - - sendEmail({ - emails: selectedOptions.map(({ value }) => value), - emailMessage, - }); - }; - - handleMessageChange = event => { - this.setState({ emailMessage: event.target.value }); - }; - - render() { - const { pillSelectorError, selectedOptions, emailMessage } = this.state; - const { - emailMessageProps, - intl: { formatMessage }, - isExpanded, - onExpand, - onRequestClose, - submitting, - } = this.props; - - const selectorOptions = this.getSelectorOptions(); - - return ( -
- } - inputProps={{ onFocus: onExpand, ...emailMessageProps }} - onInput={this.handlePillSelectorInput} - onRemove={this.handlePillRemove} - onSelect={this.handlePillSelect} - parseItems={parseEmails} - placeholder={formatMessage(commonMessages.pillSelectorPlaceholder)} - selectedOptions={selectedOptions} - selectorOptions={selectorOptions} - validateForError={this.validateForError} - validator={this.validator} - > - {selectorOptions.map(({ email, text, value }) => ( - - ))} - -