- {this.props.label && (
+ {!this.props.hidden && this.props.label && (
)}
- {this.props.buttonIcon || this.props.buttonIconProps ? (
+ {!this.props.hidden && (this.props.buttonIcon || this.props.buttonIconProps) ? (
) : (
+ !this.props.hidden &&
)}
@@ -208,6 +199,15 @@ export class FilePicker extends React.Component<
onChange={this._handleOnChange}
/>
)}
+ {this.state.selectedTab === "keyMultipleUpload" && (
+
+ )}
{this.state.selectedTab === "keySite" && (
{
+ private _handleSave = (filePickerResult: IFilePickerResult[]) => {
this.props.onSave(filePickerResult);
this.setState({
panelOpen: false,
});
}
- private _handleOnChange = (filePickerResult: IFilePickerResult) => {
+ private _handleOnChange = (filePickerResult: IFilePickerResult[]) => {
if (this.props.onChange) {
this.props.onChange(filePickerResult);
}
@@ -389,6 +389,14 @@ export class FilePicker extends React.Component<
icon: "System",
});
}
+ if (!this.props.hideLocalMultipleUploadTab) {
+ links.push({
+ name: strings.UploadLinkLabel + " " + strings.OneDriveRootFolderName,
+ url: addUrl ? "#Multipleupload" : undefined,
+ key: "keyMultipleUpload",
+ icon: "BulkUpload",
+ });
+ }
if (!this.props.hideLinkUploadTab) {
links.push({
name: strings.FromLinkLinkLabel,
@@ -430,5 +438,9 @@ export class FilePicker extends React.Component<
if (!props.hideLinkUploadTab) {
return "keyLink";
}
+ if (!props.hideLocalMultipleUploadTab) {
+ return "keyMultipleUpload";
+ }
+
}
}
diff --git a/src/controls/filePicker/FilePicker.types.ts b/src/controls/filePicker/FilePicker.types.ts
index 5e4066ff0..6dad4a3fd 100644
--- a/src/controls/filePicker/FilePicker.types.ts
+++ b/src/controls/filePicker/FilePicker.types.ts
@@ -10,7 +10,7 @@ export interface FilePickerBreadcrumbItem extends IBreadcrumbItem {
export interface IFilePickerTab {
context: BaseComponentContext;
accepts: string[];
- onSave: (value: IFilePickerResult) => void;
+ onSave: (value: IFilePickerResult[]) => void;
onClose: () => void;
}
diff --git a/src/controls/filePicker/IFilePickerProps.ts b/src/controls/filePicker/IFilePickerProps.ts
index 7ad94d53c..d5002eac8 100644
--- a/src/controls/filePicker/IFilePickerProps.ts
+++ b/src/controls/filePicker/IFilePickerProps.ts
@@ -18,21 +18,21 @@ export interface IFilePickerProps {
* Specifies the icon to be used to display Icon Button.
*/
buttonIcon?: string;
- /**
- * Specifies props for icon to be used to display Icon Button.
- */
+ /**
+ * Specifies props for icon to be used to display Icon Button.
+ */
buttonIconProps?: IIconProps;
/**
* Handler when the file has been selected
*/
- onSave:(filePickerResult: IFilePickerResult)=>void;
+ onSave: (filePickerResult: IFilePickerResult[]) => void;
/**
* Handler when file has been changed.
*/
- onChange?: (filePickerResult: IFilePickerResult) => void;
+ onChange?: (filePickerResult: IFilePickerResult[]) => void;
/**
* Current context.
@@ -69,6 +69,11 @@ export interface IFilePickerProps {
*/
disabled?: boolean;
+ /**
+ * Specifies if the picker button is hidden (if hidden, panel visibility can still be controlled with isPanelOpen)
+ */
+ hidden?: boolean;
+
/**
* Number of itmes to obtain when executing REST queries. Default 100.
*/
@@ -109,6 +114,11 @@ export interface IFilePickerProps {
*/
hideLocalUploadTab?: boolean;
+ /**
+ * Specifies if LocalMultipleUploadTab should be hidden.
+ */
+ hideLocalMultipleUploadTab?: boolean;
+
/**
* Specifies if LinkUploadTab should be hidden.
*/
@@ -137,6 +147,11 @@ export interface IFilePickerProps {
*/
renderCustomUploadTabContent?: (filePickerResult: IFilePickerResult) => JSX.Element | null;
+ /**
+ * Optional additional renderer for Multiple Upload tab
+ */
+ renderCustomMultipleUploadTabContent?: (filePickerResult: IFilePickerResult[]) => JSX.Element | null;
+
/**
* Specifies if Site Pages library to be visible on Sites tab
*/
diff --git a/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx b/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
index f7ec74486..44c0088ba 100644
--- a/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
+++ b/src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
@@ -109,7 +109,7 @@ export default class LinkFilePickerTab extends React.Component {
- this.props.onSave(this.state.filePickerResult);
+ this.props.onSave([this.state.filePickerResult]);
}
/**
diff --git a/src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabProps.ts b/src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabProps.ts
new file mode 100644
index 000000000..e9c7433e7
--- /dev/null
+++ b/src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabProps.ts
@@ -0,0 +1,6 @@
+import { IFilePickerResult, IFilePickerTab } from "../FilePicker.types";
+
+export interface IMultipleUploadFilePickerTabProps extends IFilePickerTab {
+ onChange: (value: IFilePickerResult[]) => void;
+ renderCustomMultipleUploadTabContent: (filePickerResult: IFilePickerResult[]) => JSX.Element | null;
+}
diff --git a/src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabState.ts b/src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabState.ts
new file mode 100644
index 000000000..629e611ec
--- /dev/null
+++ b/src/controls/filePicker/MultipleUploadFilePickerTab/IMultipleUploadFilePickerTabState.ts
@@ -0,0 +1,6 @@
+import { IFilePickerResult } from "../FilePicker.types";
+
+export interface IMultipleUploadFilePickerTabState {
+ filePickerResult: IFilePickerResult[];
+ filePreview?: string;
+}
diff --git a/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.module.scss b/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.module.scss
new file mode 100644
index 000000000..06f0cd6fe
--- /dev/null
+++ b/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.module.scss
@@ -0,0 +1,39 @@
+@import "../FilePicker.module.scss";
+
+.localTabSinglePreview {
+ margin-bottom: 20px;
+ display: inline-block;
+ text-align: center;
+}
+
+.localTabSinglePreviewImage {
+ display: block;
+ max-width: 100%;
+ max-height: 220px;
+ image-orientation: from-image;
+}
+
+.localTabFilename {
+ color: $ms-color-neutralPrimary;
+}
+
+.localTabLabel {
+ color: $ms-color-themePrimary;
+ cursor: pointer;
+}
+
+.localTabInput {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+}
+
+.localTabDragDropFile {
+ // width: 100%;
+ border: 1px black dashed;
+ text-align: center;
+ padding: 75px;
+}
diff --git a/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.tsx b/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.tsx
new file mode 100644
index 000000000..543088bd8
--- /dev/null
+++ b/src/controls/filePicker/MultipleUploadFilePickerTab/MultipleUploadFilePickerTab.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+
+import { IMultipleUploadFilePickerTabProps } from './IMultipleUploadFilePickerTabProps';
+import { IMultipleUploadFilePickerTabState } from './IMultipleUploadFilePickerTabState';
+import { IFilePickerResult } from '../FilePicker.types';
+import { GeneralHelper } from '../../../common/utilities/GeneralHelper';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
+import { css } from 'office-ui-fabric-react/lib/Utilities';
+import { DragDropFiles } from '../../dragDropFiles/DragDropFiles';
+
+import * as strings from 'ControlStrings';
+import styles from './MultipleUploadFilePickerTab.module.scss';
+
+
+
+export default class MultipleUploadFilePickerTab extends React.Component {
+ constructor(props: IMultipleUploadFilePickerTabProps) {
+ super(props);
+ this.state = {
+ filePickerResult: undefined
+ };
+ }
+
+ private displayFileNames = (filesResult: IFilePickerResult[]) => {
+ const result = [];
+ for (var i = 0; i < filesResult.length; i++) {
+ result.push({filesResult[i].fileName}
);
+ }
+ return result;
+ }
+
+ public render(): React.ReactElement {
+ const { filePickerResult } = this.state;
+ const acceptedFilesExtensions = this.props.accepts ? this.props.accepts.join(",") : null;
+
+ return (
+
+
+
{strings.UploadLinkLabel + " " + strings.OneDriveRootFolderName}
+
+
+
+
+ ) => this._handleFileUploadExplorer(event)}
+ />
+
+
+
+
+
+ {(filePickerResult) ? this.displayFileNames(filePickerResult) : ""}
+
+
+ {this.props.renderCustomMultipleUploadTabContent && this.props.renderCustomMultipleUploadTabContent(this.state.filePickerResult)}
+
+
+
+
this._handleSave()} className={styles.actionButton}>{strings.ListItemAttachmentslPlaceHolderButtonLabel + " " + strings.OneDriveRootFolderName}
+
this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}
+
+
+
@@ -61,7 +61,7 @@ export class StockImages extends React.Component
{
};
}
- this.props.onSave(filePickerResult);
+ this.props.onSave([filePickerResult]);
}
/**
diff --git a/src/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabProps.ts b/src/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabProps.ts
index c572f449a..e7aea6304 100644
--- a/src/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabProps.ts
+++ b/src/controls/filePicker/UploadFilePickerTab/IUploadFilePickerTabProps.ts
@@ -1,6 +1,6 @@
import { IFilePickerResult, IFilePickerTab } from "../FilePicker.types";
export interface IUploadFilePickerTabProps extends IFilePickerTab {
- onChange: (value: IFilePickerResult) => void;
+ onChange: (value: IFilePickerResult[]) => void;
renderCustomUploadTabContent: (filePickerResult: IFilePickerResult) => JSX.Element | null;
}
diff --git a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx
index 093ee6ec1..4588c5861 100644
--- a/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx
+++ b/src/controls/filePicker/UploadFilePickerTab/UploadFilePickerTab.tsx
@@ -104,14 +104,14 @@ export default class UploadFilePickerTab extends React.Component {
- this.props.onSave(this.state.filePickerResult);
+ this.props.onSave([this.state.filePickerResult]);
}
/**
diff --git a/src/controls/filePicker/WebSearchTab/WebSearchTab.tsx b/src/controls/filePicker/WebSearchTab/WebSearchTab.tsx
index 69135a7d5..7d7cd5b16 100644
--- a/src/controls/filePicker/WebSearchTab/WebSearchTab.tsx
+++ b/src/controls/filePicker/WebSearchTab/WebSearchTab.tsx
@@ -448,7 +448,7 @@ export default class WebSearchTab extends React.Component {
- this.props.onSave(this.state.filePickerResult);
+ this.props.onSave([this.state.filePickerResult]);
}
/**
diff --git a/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx b/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx
index c000a72ed..ee8a76e21 100644
--- a/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx
+++ b/src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx
@@ -185,7 +185,7 @@ export class FileBrowser extends React.Component { this._loadNextDataRequest(); return null; }}
/>) :
( any[];
}
export interface IListViewState {
@@ -87,8 +92,6 @@ export interface IListViewState {
groups?: IGroup[];
- dragStatus?: boolean;
-
}
export interface IGrouping {
diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
index 5e606f956..025e3f5fd 100644
--- a/src/controls/listView/ListView.tsx
+++ b/src/controls/listView/ListView.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import styles from './ListView.DragDrop.module.scss';
+
import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
import { IRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
@@ -12,7 +12,7 @@ import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
import * as strings from 'ControlStrings';
import { IGroupsItems } from './IListView';
import * as telemetry from '../../common/telemetry';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { DragDropFiles } from "../dragDropFiles";
import filter from 'lodash/filter';
import omit from 'lodash/omit';
@@ -58,8 +58,6 @@ export class ListView extends React.Component {
private originalItems: any[];
private originalGroups: IGroup[];
private originalColumns: IColumn[];
- private dragCounter = 0;
- private dropRef = React.createRef();
constructor(props: IListViewProps) {
super(props);
@@ -74,8 +72,7 @@ export class ListView extends React.Component {
// Initialize state
this.state = {
- filterValue: this.props.defaultFilter,
- dragStatus: false
+ filterValue: this.props.defaultFilter
};
if (this.props.selection) {
@@ -94,17 +91,6 @@ export class ListView extends React.Component {
this._processProperties(this.props);
}
- public componentWillUnmount(): void {
- const { dragDropFiles } = this.props;
- if (dragDropFiles) {
- let divDropArea = this.dropRef.current;
- divDropArea.removeEventListener('dragenter', this.handleonDragEnter);
- divDropArea.removeEventListener('dragleave', this.handleonDragLeave);
- divDropArea.removeEventListener('dragover', this.handleonDragOver);
- divDropArea.removeEventListener('drop', this.handleonDrop);
- }
- }
-
/**
* Lifecycle hook when component did update after state or property changes
* @param prevProps
@@ -287,15 +273,6 @@ export class ListView extends React.Component {
// Update the current component state with the new values
this.setState(tempState);
}
-
- // Add EventListeners for drag zone area
- if (dragDropFiles) {
- let divDropArea = this.dropRef.current;
- divDropArea.addEventListener('dragenter', this.handleonDragEnter);
- divDropArea.addEventListener('dragleave', this.handleonDragLeave);
- divDropArea.addEventListener('dragover', this.handleonDragOver);
- divDropArea.addEventListener('drop', this.handleonDrop);
- }
}
/**
@@ -483,6 +460,9 @@ export class ListView extends React.Component {
* @param descending
*/
private _sortItems(items: any[], columnName: string, descending = false): any[] {
+ if (this.props.sortItems) {
+ return this.props.sortItems(items, columnName, descending);
+ }
// Sort the items
const ascItems = sortBy(items, [columnName]);
const sortedItems = descending ? ascItems.reverse() : ascItems;
@@ -572,52 +552,6 @@ export class ListView extends React.Component {
return modifiedProps;
}
- /**
- * Stop listeners from onDragOver event.
- * @param e
- */
- private handleonDragOver = (e) => {
- e.preventDefault();
- e.stopPropagation();
- }
- /**
- * Stop listeners from onDragEnter event, enable drag and drop view.
- * @param e
- */
- private handleonDragEnter = (e) => {
- e.preventDefault();
- e.stopPropagation();
- this.dragCounter++;
- if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
- this.setState({ dragStatus: true });
- }
- }
- /**
- * Stop listeners from ondragenter event, disable drag and drop view.
- * @param e
- */
- private handleonDragLeave = (e) => {
- e.preventDefault();
- e.stopPropagation();
- this.dragCounter--;
- if (this.dragCounter === 0) {
- this.setState({ dragStatus: false });
- }
- }
- /**
- * Stop listeners from onDrop event and load files to property onDrop.
- * @param e
- */
- private handleonDrop = (e) => {
- e.preventDefault();
- e.stopPropagation();
- this.setState({ dragStatus: false });
- if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
- this.props.onDrop(e.dataTransfer.files);
- e.dataTransfer.clearData();
- this.dragCounter = 0;
- }
- }
/**
* Custom render of header
* @param props
@@ -647,7 +581,7 @@ export class ListView extends React.Component {
let groupProps: IGroupRenderProps = {};
let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact } = this.props;
- let { filterValue, items, dragStatus, columns, groups } = this.state;
+ let { filterValue, items, columns, groups } = this.state;
// Check if selection mode is single selection,
// if that is the case, disable the selection on grouping headers
@@ -662,16 +596,15 @@ export class ListView extends React.Component {
return (
-
- {(dragStatus && dragDropFiles) &&
-
-
-
-
{strings.UploadFileHeader}
-
-
- }
+
{
+ this.props.onDrop(files);
+ } : []
+ } >
{
showFilter &&
@@ -697,7 +630,7 @@ export class ListView extends React.Component {
}
}}
/>}
-
+
{!this.props.hideFirstPageJump &&
}
+
);
}
diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx
index da2999197..05d75c6ff 100644
--- a/src/controls/peoplepicker/PeoplePickerComponent.tsx
+++ b/src/controls/peoplepicker/PeoplePickerComponent.tsx
@@ -189,6 +189,10 @@ export class PeoplePicker extends React.Component {
const quill = this.getEditor();
if (quill) {
const range = quill.getSelection();
- const formats = quill.getFormat(range);
+ if (range) {
+ const formats = quill.getFormat(range);
- if (!isEqual(formats, this.state.formats)) {
- console.log(`current format: ${formats.list}`);
- newState.formats = formats;
+ if (!isEqual(formats, this.state.formats)) {
+ console.log(`current format: ${formats.list}`);
+ newState.formats = formats;
+ }
}
}
diff --git a/src/controls/sitePicker/ISitePicker.ts b/src/controls/sitePicker/ISitePicker.ts
new file mode 100644
index 000000000..94d7f496f
--- /dev/null
+++ b/src/controls/sitePicker/ISitePicker.ts
@@ -0,0 +1,99 @@
+import { BaseComponentContext } from '@microsoft/sp-component-base';
+
+export interface ISite {
+ /**
+ * ID of the site
+ */
+ id?: string;
+ /**
+ * Title
+ */
+ title?: string;
+ /**
+ * Base URL
+ */
+ url?: string;
+
+ /**
+ * ID of the web
+ */
+ webId?: string;
+
+ /**
+ * ID of the hub site
+ */
+ hubSiteId?: string;
+}
+
+export interface ISitePickerProps {
+ /**
+ * Site picker label
+ */
+ label?: string;
+ /**
+ * Specify if the control needs to be disabled
+ */
+ disabled?: boolean;
+ /**
+ * Web Part context
+ */
+ context: BaseComponentContext;
+ /**
+ * Intial data to load in the 'Selected sites' area (optional)
+ */
+ initialSites?: ISite[];
+ /**
+ * Define if you want to allow multi site selection. True by default.
+ */
+ multiSelect?: boolean;
+ /**
+ * Defines what entities are available for selection: site collections, sites, hub sites.
+ */
+ mode?: 'site' | 'web' | 'hub';
+
+ /**
+ * Specifies if the options should be limited by the current site collections. Taken into consideration if selectionMode is set to 'web'
+ */
+ limitToCurrentSiteCollection?: boolean;
+
+ /**
+ * Specifies if search box is displayed for the component. Default: true
+ */
+ allowSearch?: boolean;
+
+ /**
+ * Specifices if the list is sorted by title or url. Default: title
+ */
+ orderBy?: 'title' | 'url';
+
+ /**
+ * Specifies if the list is sorted in descending order. Default: false
+ */
+ isDesc?: boolean;
+
+ /**
+ * Selection change handler
+ */
+ onChange: (selectedSites: ISite[]) => void;
+
+ /**
+ * Input placeholder text. Displayed until option is selected.
+ */
+ placeholder?: string;
+
+ /**
+ * Search input placeholder text. Displayed until search text is entered.
+ */
+ searchPlaceholder?: string;
+
+ /**
+ * The list will be filtered after users stop typing for `deferredSearchTime` milliseconds.
+ * Default value is 200.
+ */
+ deferredSearchTime?: number;
+
+ /**
+ * If provided, additional class name to provide on the dropdown element.
+ */
+ className?: string;
+}
diff --git a/src/controls/sitePicker/SitePicker.tsx b/src/controls/sitePicker/SitePicker.tsx
new file mode 100644
index 000000000..588ffc505
--- /dev/null
+++ b/src/controls/sitePicker/SitePicker.tsx
@@ -0,0 +1,271 @@
+import * as React from 'react';
+import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { ISite, ISitePickerProps } from './ISitePicker';
+import { getAllSites, getHubSites } from '../../services/SPSitesService';
+import { IDropdownOption, Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { ISelectableOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+import orderBy from 'lodash/orderBy';
+import findIndex from 'lodash/findIndex';
+import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
+import { toRelativeUrl } from '../../common/utilities/GeneralHelper';
+import { Async } from '@uifabric/utilities/lib/Async';
+import * as telemetry from '../../common/telemetry';
+
+const styles = mergeStyleSets({
+ loadingSpinnerContainer: {
+ width: '100%',
+ textAlign: 'center',
+ marginTop: '8px'
+ },
+ searchBox: {
+ margin: '4px 0'
+ },
+ siteOption: {
+ display: 'flex',
+ whiteSpace: 'nowrap',
+ alignItems: 'center'
+ },
+ siteOptionCheckbox: {
+ display: 'inline-block',
+ marginRight: '4px'
+ },
+ siteOptionContent: {
+ display: 'flex',
+ flexDirection: 'column',
+ minWidth: '0',
+ padding: '4px 0'
+ },
+ siteOptionTitle: {
+ lineHeight: '18px',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis'
+ },
+ siteOptionUrl: {
+ fontSize: '12px',
+ lineHeight: '14px',
+ fontWeight: '300',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis'
+ }
+});
+
+const async = new Async();
+
+export const SitePicker: React.FunctionComponent = (props: React.PropsWithChildren) => {
+
+ const {
+ label,
+ disabled,
+ context,
+ initialSites,
+ multiSelect,
+ mode,
+ limitToCurrentSiteCollection,
+ allowSearch,
+ orderBy: propOrderBy,
+ isDesc,
+ onChange,
+ placeholder,
+ searchPlaceholder,
+ deferredSearchTime,
+ className
+ } = props;
+
+ const [isLoading, setIsLoading] = React.useState();
+ const [selectedSites, setSelectedSites] = React.useState();
+ const [allSites, setAllSites] = React.useState();
+ const [filteredSites, setFilteredSites] = React.useState();
+ const [searchQuery, setSearchQuery] = React.useState();
+
+ const onSearchChange = React.useCallback((e, newSearchQuery: string) => {
+ if (!allSites) {
+ return;
+ }
+
+ const loweredNewSearchQuery = newSearchQuery.toLowerCase();
+ const newFilteredSites = allSites.filter(s => s.title && s.title.toLowerCase().indexOf(loweredNewSearchQuery) !== -1);
+
+ setSearchQuery(newSearchQuery);
+ setFilteredSites(newFilteredSites);
+ }, [allSites]);
+
+ const onSelectionChange = React.useCallback((e, item: IDropdownOption, index: number) => {
+ let newSelectedSites: ISite[] = [];
+
+ if (multiSelect !== false) {
+ newSelectedSites = selectedSites ? [...selectedSites] : [];
+ const existingIndex = findIndex(newSelectedSites, s => s.url === item.key);
+
+ if (existingIndex >= 0) {
+ newSelectedSites.splice(existingIndex, 1);
+ }
+ else {
+ newSelectedSites.push({
+ ...item.data!
+ });
+ }
+ }
+ else {
+ newSelectedSites = [{
+ ...item.data!
+ }];
+ }
+
+ if (onChange) {
+ onChange(newSelectedSites);
+ }
+
+ setSelectedSites(newSelectedSites);
+
+ }, [selectedSites, multiSelect, onChange]);
+
+ const getOptions = React.useCallback((): IDropdownOption[] => {
+
+ if (!allSites) {
+ return [{
+ key: 'spinner',
+ text: '',
+ itemType: SelectableOptionMenuItemType.Header
+ }];
+ }
+
+ const result: IDropdownOption[] = [];
+
+ if (allowSearch !== false) {
+ result.push({
+ key: 'search',
+ text: '',
+ itemType: SelectableOptionMenuItemType.Header
+ });
+ }
+
+ const selectedSitesIds: string[] = selectedSites ? selectedSites.map(s => s.url!) : [];
+
+ if (filteredSites) {
+ filteredSites.forEach(s => {
+ result.push({
+ key: s.url,
+ text: s.title,
+ data: s,
+ selected: selectedSitesIds.indexOf(s.url) !== -1
+ });
+ });
+ }
+
+ return result;
+ }, [allowSearch, selectedSites, filteredSites, allSites]);
+
+ const onRenderOption = (option?: ISelectableOption, defaultRender?: (props?: ISelectableOption) => JSX.Element | null): JSX.Element | null => {
+ if (!props) {
+ return null;
+ }
+
+ if (option.itemType === SelectableOptionMenuItemType.Header) {
+ if (option.key === 'search') {
+ return ;
+ }
+ else if (option.key === 'spinner') {
+ //
+ // This happens when the dropdown is opened for the first time.
+ // That's when we want to load the sites
+ //
+ setIsLoading(true);
+
+ return
+
+
;
+ }
+ }
+ // {multiSelect !== false && }
+ return
+
+ {option.text}
+ {toRelativeUrl(option.data!.url)}
+
+
+ Drag and Drop Files
+
+ Drag files or folder with files here...}
+ buttonLabel='Configure'
+ hideButton={this.props.displayMode === DisplayMode.Read}
+ onConfigure={this._onConfigure} />
+
+
+
+
Site picker tester:
+ { console.log(sites); }}
+ placeholder={'Select sites'}
+ searchPlaceholder={'Filter sites'} />
+
+
List picker tester:
{ console.log(filePickerResult.fileName); }}
+ onChange={(filePickerResult: IFilePickerResult[]) => { console.log(filePickerResult); }}
context={this.props.context}
hideRecentTab={false}
includePageLibraries={true}
@@ -1495,10 +1604,10 @@ export default class ControlsTest extends React.Component
- FileName: {this.state.filePickerResult.fileName}
+ FileName: {this.state.filePickerResult[0].fileName}
- File size: {this.state.filePickerResult.fileSize}
+ File size: {this.state.filePickerResult[0].fileSize}