| 1 | {"version":3,"file":"BaseExtendedPicker.js","sourceRoot":"../src/","sources":["components/ExtendedPicker/BaseExtendedPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { KeyCodes, css, initializeComponentRef } from '../../Utilities';\nimport { Autofill } from '../../Autofill';\nimport { IInputProps } from '../../Pickers';\nimport * as stylesImport from './BaseExtendedPicker.scss';\nimport { IBaseExtendedPickerProps, IBaseExtendedPicker } from './BaseExtendedPicker.types';\nimport { IBaseFloatingPickerProps, BaseFloatingPicker } from '../../FloatingPicker';\nimport { BaseSelectedItemsList, IBaseSelectedItemsListProps } from '../../SelectedItemsList';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Selection, SelectionMode, SelectionZone } from '../../Selection';\nconst styles: any = stylesImport;\n\nexport interface IBaseExtendedPickerState<T> {\n queryString: string | null;\n selectedItems: T[] | null;\n suggestionItems: T[] | null;\n}\n\nexport class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>>\n extends React.Component<P, IBaseExtendedPickerState<T>>\n implements IBaseExtendedPicker<T> {\n public floatingPicker = React.createRef<BaseFloatingPicker<T, IBaseFloatingPickerProps<T>>>();\n public selectedItemsList = React.createRef<BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>>();\n\n protected root = React.createRef<HTMLDivElement>();\n protected input = React.createRef<Autofill>();\n protected selection: Selection;\n protected floatingPickerProps: IBaseFloatingPickerProps<T>;\n protected selectedItemsListProps: IBaseSelectedItemsListProps<T>;\n\n constructor(basePickerProps: P) {\n super(basePickerProps);\n\n initializeComponentRef(this);\n this.selection = new Selection({ onSelectionChanged: () => this.onSelectionChange() });\n\n this.state = {\n queryString: '',\n // TODO: determine whether this can be removed\n // eslint-disable-next-line react/no-unused-state\n suggestionItems: this.props.suggestionItems ? (this.props.suggestionItems as T[]) : null,\n selectedItems: this.props.defaultSelectedItems\n ? (this.props.defaultSelectedItems as T[])\n : this.props.selectedItems\n ? (this.props.selectedItems as T[])\n : null,\n };\n\n this.floatingPickerProps = this.props.floatingPickerProps;\n this.selectedItemsListProps = this.props.selectedItemsListProps;\n }\n\n public get items(): any {\n return this.state.selectedItems ?? this.selectedItemsList.current?.items ?? null;\n }\n\n public componentDidMount(): void {\n this.forceUpdate();\n }\n\n public UNSAFE_componentWillReceiveProps(newProps: P): void {\n if (newProps.floatingPickerProps) {\n this.floatingPickerProps = newProps.floatingPickerProps;\n }\n\n if (newProps.selectedItemsListProps) {\n this.selectedItemsListProps = newProps.selectedItemsListProps;\n }\n\n if (newProps.selectedItems) {\n this.setState({ selectedItems: newProps.selectedItems });\n }\n }\n\n public focus(): void {\n if (this.input.current) {\n this.input.current.focus();\n }\n }\n\n public clearInput(): void {\n if (this.input.current) {\n this.input.current.clear();\n }\n }\n\n public get inputElement(): HTMLInputElement | null {\n return this.input.current && this.input.current.inputElement;\n }\n\n public get highlightedItems(): T[] {\n return this.selectedItemsList.current ? this.selectedItemsList.current.highlightedItems() : [];\n }\n\n public render(): JSX.Element {\n const { className, inputProps, disabled, focusZoneProps } = this.props;\n const activeDescendant =\n this.floatingPicker.current && this.floatingPicker.current.currentSelectedSuggestionIndex !== -1\n ? 'sug-' + this.floatingPicker.current.currentSelectedSuggestionIndex\n : undefined;\n const isExpanded = this.floatingPicker.current ? this.floatingPicker.current.isSuggestionsShown : false;\n\n return (\n <div\n ref={this.root}\n className={css('ms-BasePicker ms-BaseExtendedPicker', className ? className : '')}\n onKeyDown={this.onBackspace}\n onCopy={this.onCopy}\n >\n <FocusZone direction={FocusZoneDirection.bidirectional} {...focusZoneProps}>\n <SelectionZone selection={this.selection} selectionMode={SelectionMode.multiple}>\n <div className={css('ms-BasePicker-text', styles.pickerText)} role={'list'}>\n {this.props.headerComponent}\n {this.renderSelectedItemsList()}\n {this.canAddItems() && (\n <Autofill\n {...(inputProps as IInputProps)}\n className={css('ms-BasePicker-input', styles.pickerInput)}\n ref={this.input}\n onFocus={this.onInputFocus}\n onClick={this.onInputClick}\n onInputValueChange={this.onInputChange}\n aria-activedescendant={activeDescendant}\n aria-owns={isExpanded ? 'suggestion-list' : undefined}\n aria-expanded={isExpanded}\n aria-haspopup=\"true\"\n role=\"combobox\"\n disabled={disabled}\n onPaste={this.onPaste}\n />\n )}\n </div>\n </SelectionZone>\n </FocusZone>\n {this.renderFloatingPicker()}\n </div>\n );\n }\n\n protected onSelectionChange = (): void => {\n this.forceUpdate();\n };\n\n protected canAddItems(): boolean {\n const { itemLimit } = this.props;\n return itemLimit === undefined || this.items.length < itemLimit;\n }\n\n protected renderFloatingPicker(): JSX.Element {\n const FloatingPicker: React.ComponentType<IBaseFloatingPickerProps<T>> = this.props.onRenderFloatingPicker;\n return (\n <FloatingPicker\n componentRef={this.floatingPicker}\n onChange={this._onSuggestionSelected}\n onSuggestionsHidden={this._onSuggestionsShownOrHidden}\n onSuggestionsShown={this._onSuggestionsShownOrHidden}\n inputElement={this.input.current ? this.input.current.inputElement : undefined}\n selectedItems={this.items}\n suggestionItems={this.props.suggestionItems ? this.props.suggestionItems : undefined}\n {...this.floatingPickerProps}\n />\n );\n }\n\n protected renderSelectedItemsList(): JSX.Element {\n const SelectedItems: React.ComponentType<IBaseSelectedItemsListProps<T>> = this.props.onRenderSelectedItems;\n return (\n <SelectedItems\n componentRef={this.selectedItemsList}\n selection={this.selection}\n selectedItems={this.props.selectedItems ? this.props.selectedItems : undefined}\n onItemsDeleted={this.props.selectedItems ? this.props.onItemsRemoved : undefined}\n {...this.selectedItemsListProps}\n />\n );\n }\n\n protected onInputChange = (value: string, composing?: boolean): void => {\n // We don't want to update the picker's suggestions when the input is still being composed\n if (!composing) {\n this.setState({ queryString: value });\n if (this.floatingPicker.current) {\n this.floatingPicker.current.onQueryStringChanged(value);\n }\n }\n };\n\n protected onInputFocus = (ev: React.FocusEvent<HTMLInputElement | Autofill>): void => {\n if (this.selectedItemsList.current) {\n this.selectedItemsList.current.unselectAll();\n }\n\n if (this.props.inputProps && this.props.inputProps.onFocus) {\n this.props.inputProps.onFocus(ev as React.FocusEvent<HTMLInputElement>);\n }\n };\n\n protected onInputClick = (ev: React.MouseEvent<HTMLInputElement | Autofill>): void => {\n if (this.selectedItemsList.current) {\n this.selectedItemsList.current.unselectAll();\n }\n\n if (this.floatingPicker.current && this.inputElement) {\n // Update the value if the input value is empty or is different than the current inputText from the floatingPicker\n const shoudUpdateValue =\n this.inputElement.value === '' || this.inputElement.value !== this.floatingPicker.current.inputText;\n this.floatingPicker.current.showPicker(shoudUpdateValue);\n }\n };\n\n // This is protected because we may expect the backspace key to work differently in a different kind of picker.\n // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow\n protected onBackspace = (ev: React.KeyboardEvent<HTMLElement>): void => {\n if (ev.which !== KeyCodes.backspace) {\n return;\n }\n\n if (this.selectedItemsList.current && this.items.length) {\n if (\n this.input.current &&\n !this.input.current.isValueSelected &&\n this.input.current.inputElement === document.activeElement &&\n (this.input.current as Autofill).cursorLocation === 0\n ) {\n if (this.floatingPicker.current) {\n this.floatingPicker.current.hidePicker();\n }\n ev.preventDefault();\n this.selectedItemsList.current.removeItemAt(this.items.length - 1);\n this._onSelectedItemsChanged();\n } else if (this.selectedItemsList.current.hasSelectedItems()) {\n if (this.floatingPicker.current) {\n this.floatingPicker.current.hidePicker();\n }\n ev.preventDefault();\n this.selectedItemsList.current.removeSelectedItems();\n this._onSelectedItemsChanged();\n }\n }\n };\n\n protected onCopy = (ev: React.ClipboardEvent<HTMLElement>): void => {\n if (this.selectedItemsList.current) {\n // Pass it down into the selected items list\n this.selectedItemsList.current.onCopy(ev);\n }\n };\n\n protected onPaste = (ev: React.ClipboardEvent<Autofill | HTMLInputElement>): void => {\n if (this.props.onPaste) {\n const inputText = ev.clipboardData.getData('Text');\n ev.preventDefault();\n this.props.onPaste(inputText);\n }\n };\n\n protected _onSuggestionSelected = (item: T): void => {\n const currentRenderedQueryString = this.props.currentRenderedQueryString;\n const queryString = this.state.queryString;\n if (currentRenderedQueryString === undefined || currentRenderedQueryString === queryString) {\n const processedItem: T | PromiseLike<T> | null = this.props.onItemSelected\n ? (this.props.onItemSelected as any)(item)\n : item;\n\n if (processedItem === null) {\n return;\n }\n\n const processedItemObject: T = processedItem as T;\n const processedItemPromiseLike: PromiseLike<T> = processedItem as PromiseLike<T>;\n\n let newItem: T;\n if (processedItemPromiseLike && processedItemPromiseLike.then) {\n processedItemPromiseLike.then((resolvedProcessedItem: T) => {\n newItem = resolvedProcessedItem;\n this._addProcessedItem(newItem);\n });\n } else {\n newItem = processedItemObject;\n this._addProcessedItem(newItem);\n }\n }\n };\n\n protected _onSelectedItemsChanged = (): void => {\n this.focus();\n };\n\n /**\n * The floating picker is the source of truth for if the menu has been opened or not.\n *\n * Because this isn't tracked inside the state of this component, we need to\n * force an update here to keep the rendered output that depends on the picker being open\n * in sync with the state\n *\n * Called when the suggestions is shown or closed\n */\n private _onSuggestionsShownOrHidden = () => {\n this.forceUpdate();\n };\n\n private _addProcessedItem(newItem: T) {\n // If this is a controlled component, call the on item selected callback\n // Otherwise add it to the selectedItemsList\n if (this.props.onItemAdded) {\n this.props.onItemAdded(newItem);\n }\n\n if (this.selectedItemsList.current) {\n this.selectedItemsList.current.addItems([newItem]);\n }\n\n if (this.input.current) {\n this.input.current.clear();\n }\n\n if (this.floatingPicker.current) {\n this.floatingPicker.current.hidePicker();\n }\n\n this.focus();\n }\n}\n"]} |