diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 1b799c4f4..bffc033cd 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -1,5 +1,21 @@ { "versions": [ + { + "version": "1.7.0", + "changes": { + "new": [], + "enhancements": [ + "`PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98)", + "`PeoplePicker`: support for searching on contains [#93](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/93)", + "`PeoplePicker`: find user based on email address [#95](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/95)", + "Bundle size: statically reference Office UI Fabric components in the FieldRenderer controls [#107](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/107)" + ], + "fixes": [ + "`FieldNameRenderer` onClick does not suppress default link behavior [#103](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/103)" + ] + }, + "contributions": ["Octavie van Haaften", "Asish Padhy", "Mikael Svenson", "Alex Terentiev"] + }, { "version": "1.6.0", "changes": { diff --git a/CHANGELOG.md b/CHANGELOG.md index bdad79967..5325e7172 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # Releases +## 1.7.0 + +**Enhancements** + +- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98) +- `PeoplePicker`: support for searching on contains [#93](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/93) +- `PeoplePicker`: find user based on email address [#95](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/95) +- Bundle size: statically reference Office UI Fabric components in the FieldRenderer controls [#107](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/107) + +**Fixes** + +- `FieldNameRenderer` onClick does not suppress default link behavior [#103](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/103) + ## 1.6.0 **Enhancements** diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index bdad79967..5325e7172 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -1,5 +1,18 @@ # Releases +## 1.7.0 + +**Enhancements** + +- `PeoplePicker`: added functionality to initialize the control with person(s) or group(s) [#98](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/98) +- `PeoplePicker`: support for searching on contains [#93](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/93) +- `PeoplePicker`: find user based on email address [#95](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/95) +- Bundle size: statically reference Office UI Fabric components in the FieldRenderer controls [#107](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/107) + +**Fixes** + +- `FieldNameRenderer` onClick does not suppress default link behavior [#103](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/103) + ## 1.6.0 **Enhancements** diff --git a/docs/documentation/docs/controls/PeoplePicker.md b/docs/documentation/docs/controls/PeoplePicker.md index 7d80d6109..769bf86fd 100644 --- a/docs/documentation/docs/controls/PeoplePicker.md +++ b/docs/documentation/docs/controls/PeoplePicker.md @@ -63,9 +63,10 @@ The People picker control can be configured with the following properties: | showtooltip | boolean | no | Defines if need a tooltip or not | | tooltip | string | no | Specify the tooltip message to display | | tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown | -| selectedItems | function | no | get the selected users in the control| -| peoplePickerWPclassName | string | no | applies custom styling to the people picker element| -| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only| +| selectedItems | function | no | get the selected users in the control | +| peoplePickerWPclassName | string | no | applies custom styling to the people picker element | +| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only | +| defaultSelectedUsers | string[] | no | Default selected user emails | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker) diff --git a/package-lock.json b/package-lock.json index a38065620..45cf43d05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -562,7 +562,7 @@ "es6-promise": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.1.1.tgz", - "integrity": "sha512-OaU1hHjgJf+b0NzsxCg7NdIYERD6Hy/PEmFLTjw+b65scuisG3Kt4QoTvJ66BBkPZ581gr0kpoVzKnxniM8nng==", + "integrity": "sha1-iBHpCRXZoNujYnTwskLb2nj5ySo=", "dev": true }, "finalhandler": { @@ -1008,7 +1008,7 @@ "es6-promise": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.1.1.tgz", - "integrity": "sha512-OaU1hHjgJf+b0NzsxCg7NdIYERD6Hy/PEmFLTjw+b65scuisG3Kt4QoTvJ66BBkPZ581gr0kpoVzKnxniM8nng==", + "integrity": "sha1-iBHpCRXZoNujYnTwskLb2nj5ySo=", "dev": true } } @@ -4895,7 +4895,7 @@ "es6-promise": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz", - "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==", + "integrity": "sha1-3EIhwrFlGHYL2MOaUtjzVvwA7Sk=", "dev": true }, "es6-set": { @@ -9463,7 +9463,7 @@ "karma-remap-coverage": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/karma-remap-coverage/-/karma-remap-coverage-0.1.5.tgz", - "integrity": "sha512-FM5h8eHcHbMMR+2INBUxD+4+wUbkCnobfn5uWprkLyj6Xcm2MRFQOuAJn9h2H13nNso6rk+QoNpHd5xCevlPOw==", + "integrity": "sha1-0uO7LdAK3NJWYDpwKwjDcTcPvBI=", "dev": true, "requires": { "remap-istanbul": "0.10.1" @@ -13168,7 +13168,7 @@ "remap-istanbul": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/remap-istanbul/-/remap-istanbul-0.10.1.tgz", - "integrity": "sha512-gsNQXs5kJLhErICSyYhzVZ++C8LBW8dgwr874Y2QvzAUS75zBlD/juZgXs39nbYJ09fZDlX2AVLVJAY2jbFJoQ==", + "integrity": "sha1-OqWN1QIdSZ8zbTulvzu7kcG4jjc=", "dev": true, "requires": { "amdefine": "1.0.1", @@ -13202,7 +13202,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true }, "through2": { @@ -15588,7 +15588,7 @@ "useragent": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.3.0.tgz", - "integrity": "sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==", + "integrity": "sha1-IX+UOtVAyyEoZYqyP8lg9qiMmXI=", "dev": true, "requires": { "lru-cache": "4.1.1", @@ -15598,7 +15598,7 @@ "lru-cache": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", - "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==", + "integrity": "sha1-Yi4y6CSItJJ5EUpPns9F581rulU=", "dev": true, "requires": { "pseudomap": "1.0.2", diff --git a/package.json b/package.json index a3b569b91..f6581c481 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@pnp/spfx-controls-react", "description": "Reusable React controls for SharePoint Framework solutions", - "version": "1.6.0", + "version": "1.7.0", "engines": { "node": ">=0.10.0" }, diff --git a/src/common/telemetry/version.ts b/src/common/telemetry/version.ts index 30e900d72..345e31684 100644 --- a/src/common/telemetry/version.ts +++ b/src/common/telemetry/version.ts @@ -1 +1 @@ -export const version: string = "1.6.0"; \ No newline at end of file +export const version: string = "1.7.0"; \ No newline at end of file diff --git a/src/controls/fields/fieldAttachmentsRenderer/FieldAttachmentsRenderer.tsx b/src/controls/fields/fieldAttachmentsRenderer/FieldAttachmentsRenderer.tsx index c6062d70b..7205578f1 100644 --- a/src/controls/fields/fieldAttachmentsRenderer/FieldAttachmentsRenderer.tsx +++ b/src/controls/fields/fieldAttachmentsRenderer/FieldAttachmentsRenderer.tsx @@ -1,6 +1,7 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css, Icon } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; import * as telemetry from '../../../common/telemetry'; diff --git a/src/controls/fields/fieldBaseTextRenderer/FieldBaseTextRenderer.tsx b/src/controls/fields/fieldBaseTextRenderer/FieldBaseTextRenderer.tsx index 305a6557c..b32f99bed 100644 --- a/src/controls/fields/fieldBaseTextRenderer/FieldBaseTextRenderer.tsx +++ b/src/controls/fields/fieldBaseTextRenderer/FieldBaseTextRenderer.tsx @@ -1,6 +1,6 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import styles from './FieldBaseTextRenderer.module.scss'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; diff --git a/src/controls/fields/fieldCommon/IFieldRendererProps.ts b/src/controls/fields/fieldCommon/IFieldRendererProps.ts index 9a6e74101..c4f378225 100644 --- a/src/controls/fields/fieldCommon/IFieldRendererProps.ts +++ b/src/controls/fields/fieldCommon/IFieldRendererProps.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ICssInput } from 'office-ui-fabric-react'; +import { ICssInput } from 'office-ui-fabric-react/lib/Utilities'; /** * base properties for field renderes diff --git a/src/controls/fields/fieldDateRenderer/FieldDateRenderer.tsx b/src/controls/fields/fieldDateRenderer/FieldDateRenderer.tsx index 0fdd4a0f0..44e4f97ae 100644 --- a/src/controls/fields/fieldDateRenderer/FieldDateRenderer.tsx +++ b/src/controls/fields/fieldDateRenderer/FieldDateRenderer.tsx @@ -1,6 +1,6 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; import { FieldBaseTextRenderer } from '../fieldBaseTextRenderer/FieldBaseTextRenderer'; import * as telemetry from '../../../common/telemetry'; diff --git a/src/controls/fields/fieldFileTypeRenderer/FieldFileTypeRenderer.tsx b/src/controls/fields/fieldFileTypeRenderer/FieldFileTypeRenderer.tsx index 5ce07cb73..368e876b7 100644 --- a/src/controls/fields/fieldFileTypeRenderer/FieldFileTypeRenderer.tsx +++ b/src/controls/fields/fieldFileTypeRenderer/FieldFileTypeRenderer.tsx @@ -1,6 +1,7 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css, ISerializableObject, Icon } from 'office-ui-fabric-react'; +import { css, ISerializableObject } from 'office-ui-fabric-react/lib/Utilities'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; import { FileTypeIcon, IconType } from '../../fileTypeIcon'; import * as telemetry from '../../../common/telemetry'; diff --git a/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx b/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx index 167c4afb0..8dc62edf1 100644 --- a/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx +++ b/src/controls/fields/fieldLookupRenderer/FieldLookupRenderer.tsx @@ -1,6 +1,9 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css, Dialog, DialogType, Link, Spinner, SpinnerSize } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; +import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog'; +import { Link } from 'office-ui-fabric-react/lib/Link'; +import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner'; import { ISPFieldLookupValue } from "../../../common/SPEntities"; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; @@ -106,8 +109,8 @@ export class FieldLookupRenderer extends React.Component - - } + + } ); } diff --git a/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx b/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx index 851a6d9e8..dca80c4dc 100644 --- a/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx +++ b/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx @@ -1,15 +1,14 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css } from 'office-ui-fabric-react'; - -import { Link, Icon } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; +import { Link } from 'office-ui-fabric-react/lib/Link'; import { FieldBaseTextRenderer } from '../fieldBaseTextRenderer/FieldBaseTextRenderer'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; import * as telemetry from '../../../common/telemetry'; import styles from './FieldNameRenderer.module.scss'; -import { GeneralHelper } from "../../../common/utilities/GeneralHelper"; export interface IFieldNameRendererProps extends IFieldRendererProps { /** @@ -72,7 +71,7 @@ export class FieldNameRenderer extends React.Component : null; + let signal: JSX.Element = this.props.isNew ? : null; let value: JSX.Element; if (isLink) { @@ -99,15 +98,15 @@ export class FieldNameRenderer extends React.Component {signal} - - {value} - + {value} ; } - private _onClick(): void { + private _onClick(e): void { if (this.props.onClick) { + e.stopPropagation(); + e.preventDefault(); const args: IFieldNameClickEventArgs = this.props as IFieldNameClickEventArgs; this.props.onClick(args); return; diff --git a/src/controls/fields/fieldTaxonomyRenderer/FieldTaxonomyRenderer.tsx b/src/controls/fields/fieldTaxonomyRenderer/FieldTaxonomyRenderer.tsx index e1f149c37..1fa74a03b 100644 --- a/src/controls/fields/fieldTaxonomyRenderer/FieldTaxonomyRenderer.tsx +++ b/src/controls/fields/fieldTaxonomyRenderer/FieldTaxonomyRenderer.tsx @@ -1,6 +1,6 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import { ITerm } from '../../../common/SPEntities'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; diff --git a/src/controls/fields/fieldTextRenderer/FieldTextRenderer.tsx b/src/controls/fields/fieldTextRenderer/FieldTextRenderer.tsx index 395eeeefc..366998b05 100644 --- a/src/controls/fields/fieldTextRenderer/FieldTextRenderer.tsx +++ b/src/controls/fields/fieldTextRenderer/FieldTextRenderer.tsx @@ -1,6 +1,6 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import styles from './FieldTextRenderer.module.scss'; diff --git a/src/controls/fields/fieldTitleRenderer/FieldTitleRenderer.tsx b/src/controls/fields/fieldTitleRenderer/FieldTitleRenderer.tsx index cad25746d..d6da9c961 100644 --- a/src/controls/fields/fieldTitleRenderer/FieldTitleRenderer.tsx +++ b/src/controls/fields/fieldTitleRenderer/FieldTitleRenderer.tsx @@ -1,6 +1,7 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { Link, css } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; +import { Link } from 'office-ui-fabric-react/lib/Link'; import { FieldBaseTextRenderer } from '../fieldBaseTextRenderer/FieldBaseTextRenderer'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; diff --git a/src/controls/fields/fieldUrlRenderer/FieldUrlRenderer.tsx b/src/controls/fields/fieldUrlRenderer/FieldUrlRenderer.tsx index 6c4a5cf48..80db5c278 100644 --- a/src/controls/fields/fieldUrlRenderer/FieldUrlRenderer.tsx +++ b/src/controls/fields/fieldUrlRenderer/FieldUrlRenderer.tsx @@ -1,6 +1,7 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { Link, css } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; +import { Link } from 'office-ui-fabric-react/lib/Link'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; import * as telemetry from '../../../common/telemetry'; diff --git a/src/controls/fields/fieldUserRenderer/FieldUserHoverCard.tsx b/src/controls/fields/fieldUserRenderer/FieldUserHoverCard.tsx index 3b80ec072..91c62fd14 100644 --- a/src/controls/fields/fieldUserRenderer/FieldUserHoverCard.tsx +++ b/src/controls/fields/fieldUserRenderer/FieldUserHoverCard.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { HoverCard, IExpandingCardProps } from 'office-ui-fabric-react'; +import { HoverCard, IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard'; import styles from './FieldUserRenderer.module.scss'; diff --git a/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx b/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx index 13042ccc1..044019bdc 100644 --- a/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx +++ b/src/controls/fields/fieldUserRenderer/FieldUserRenderer.tsx @@ -1,8 +1,14 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; -import { css } from 'office-ui-fabric-react'; +import { css } from 'office-ui-fabric-react/lib/Utilities'; import * as _ from '@microsoft/sp-lodash-subset'; -import { HoverCard, IExpandingCardProps, DirectionalHint, Persona, IconButton, Button, ButtonType, PersonaSize, Spinner, SpinnerSize, Link, Icon } from 'office-ui-fabric-react'; +import { IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard'; +import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint'; +import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona'; +import { IconButton, Button, ButtonType } from 'office-ui-fabric-react/lib/Button'; +import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner'; +import { Link } from 'office-ui-fabric-react/lib/Link'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { IPrincipal, IUserProfileProperties, IODataKeyValuePair } from '../../../common/SPEntities'; import { IFieldRendererProps } from '../fieldCommon/IFieldRendererProps'; diff --git a/src/controls/iFrameDialog/IFrameDialog.tsx b/src/controls/iFrameDialog/IFrameDialog.tsx index a15f0265e..37f60d84c 100644 --- a/src/controls/iFrameDialog/IFrameDialog.tsx +++ b/src/controls/iFrameDialog/IFrameDialog.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Dialog, IDialogProps } from 'office-ui-fabric-react'; +import { Dialog, IDialogProps } from 'office-ui-fabric-react/lib/Dialog'; import { IFrameDialogContent } from './IFrameDialogContent'; import * as telemetry from '../../common/telemetry'; diff --git a/src/controls/peoplepicker/IPeoplePicker.ts b/src/controls/peoplepicker/IPeoplePicker.ts index 86fe13794..bc4a485bc 100644 --- a/src/controls/peoplepicker/IPeoplePicker.ts +++ b/src/controls/peoplepicker/IPeoplePicker.ts @@ -62,21 +62,17 @@ export interface IPeoplePickerProps { * Class Name for the Error Section */ errorMessageclassName?: string; + /** + * Default Selected User Emails + */ + defaultSelectedUsers? : string[]; } export interface IPeoplePickerState { selectedPersons?: IPersonaProps[]; mostRecentlyUsedPersons: IPersonaProps[]; currentSelectedPersons: IPersonaProps[]; - allPersons: [{ - id: string, - imageUrl: string, - imageInitials: string, - primaryText: string, //Name - secondaryText: string, //Role - tertiaryText: string, //status - optionalText: string //stgring - }]; + allPersons: IPeoplePickerUserItem[]; delayResults?: boolean; currentPicker?: number | string; peoplePersonaMenu?: IPersonaProps[]; @@ -86,3 +82,13 @@ export interface IPeoplePickerState { peopleValidatorText? : string; showmessageerror: boolean; } + +export interface IPeoplePickerUserItem { + id: string; + imageUrl: string; + imageInitials: string; + primaryText: string; // name + secondaryText: string; // role + tertiaryText: string; // status + optionalText: string; // anything +} diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx index 5ba2aaaed..1b2eac900 100644 --- a/src/controls/peoplepicker/PeoplePickerComponent.tsx +++ b/src/controls/peoplepicker/PeoplePickerComponent.tsx @@ -1,6 +1,6 @@ import * as strings from 'ControlStrings'; import * as React from 'react'; -import { IPeoplePickerProps, IPeoplePickerState } from './IPeoplePicker'; +import { IPeoplePickerProps, IPeoplePickerState, IPeoplePickerUserItem } from './IPeoplePicker'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip'; import { IBasePickerSuggestionsProps } from 'office-ui-fabric-react/lib/Pickers'; @@ -11,11 +11,10 @@ import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBa import { SPHttpClient } from '@microsoft/sp-http'; import styles from './PeoplePickerComponent.module.scss'; import * as telemetry from '../../common/telemetry'; -import { - assign -} from 'office-ui-fabric-react/lib/Utilities'; +import { assign } from 'office-ui-fabric-react/lib/Utilities'; import { IUsers } from './IUsers'; import { Label } from 'office-ui-fabric-react/lib/Label'; +import { Environment, EnvironmentType } from "@microsoft/sp-core-library"; const suggestionProps: IBasePickerSuggestionsProps = { suggestionsHeaderText: 'Suggested People', @@ -41,15 +40,7 @@ export class PeoplePicker extends React.Component { + let _fakeUsers: Array = new Array(); + + _fakeUsers.push({ + id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c1", + imageUrl: "", + imageInitials: "RF", + primaryText: "Roger Federer", + secondaryText: "roger@tennis.onmicrosoft.com", + tertiaryText: "", + optionalText:"" + }); + _fakeUsers.push({ + id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c2", + imageUrl: "", + imageInitials: "RN", + primaryText: "Rafael Nadal", + secondaryText: "rafael@tennis.onmicrosoft.com", + tertiaryText: "", + optionalText:"" + }); + _fakeUsers.push({ + id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c3", + imageUrl: "", + imageInitials: "ND", + primaryText: "Novak Djokovic", + secondaryText: "novak@tennis.onmicrosoft.com", + tertiaryText: "", + optionalText:"" + }); + _fakeUsers.push({ + id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c4", + imageUrl: "", + imageInitials: "JP", + primaryText: "Juan Martin del Potro", + secondaryText: "juanmartin@tennis.onmicrosoft.com", + tertiaryText: "", + optionalText:"" + }); + + let personaList: IPersonaWithMenu[] = []; + for (const persona of _fakeUsers) { + let personaWithMenu: IPersonaWithMenu = {}; + assign(personaWithMenu, persona); + personaList.push(personaWithMenu); + } + + // update the current state + this.setState({ + allPersons: _fakeUsers, + peoplePersonaMenu: personaList, + mostRecentlyUsedPersons: personaList.slice(0, 5), + showmessageerror: this.props.isRequired && this.state.selectedPersons.length === 0 + }); + + } + /** * Retrieve the users */ @@ -95,38 +152,31 @@ export class PeoplePicker extends React.Component 0) { - let userValuesArray: any = [{ - id: 0, - imageUrl: "", - imageInitials: "", - primaryText: "", //Name - secondaryText: "", //Email - tertiaryText: "", //status - optionalText: "" //anything - }]; + + let userValuesArray: Array = new Array(); // Loop over all the retrieved items for (let i = 0; i < items.value.length; i++) { - if (i === 0) { - userValuesArray = [{ - id: items.value[i].Id, - imageUrl: this.generateUserPhotoLink(items.value[i].Email), - imageInitials: "", - primaryText: items.value[i].Title, //Name - secondaryText: items.value[i].Email, //Email - tertiaryText: "", //status - optionalText: "" //anything - }]; - } else { - userValuesArray.push({ - id: items.value[i].Id, - imageUrl: this.generateUserPhotoLink(items.value[i].Email), - imageInitials: "", - primaryText: items.value[i].Title, //Name - secondaryText: items.value[i].Email, //Email - tertiaryText: "", //status - optionalText: "" //anything - }); + userValuesArray.push({ + id: items.value[i].Id.toString(), + imageUrl: this.generateUserPhotoLink(items.value[i].Email), + imageInitials: "", + primaryText: items.value[i].Title, // name + secondaryText: items.value[i].Email, // email + tertiaryText: "", // status + optionalText: "" // anything + }); + } + + // Set Default selected persons + let defaultUsers : any = []; + let defaultPeopleList: IPersonaWithMenu[] = []; + if (this.props.defaultSelectedUsers) { + defaultUsers = this.getDefaultUsers(userValuesArray, this.props.defaultSelectedUsers); + for (const persona of defaultUsers) { + let selectedPeople: IPersonaWithMenu = {}; + assign(selectedPeople, persona); + defaultPeopleList.push(selectedPeople); } } @@ -140,13 +190,14 @@ export class PeoplePicker extends React.Component { if (filterText) { let filteredPersonas: IPersonaProps[] = this._filterPersons(filterText); - filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas); filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas; return filteredPersonas; @@ -212,14 +261,19 @@ export class PeoplePicker extends React.Component { - return this.state.peoplePersonaMenu.filter(item => this._doesTextStartWith(item.primaryText as string, filterText)); + private _filterPersons(filterText: string): IPersonaProps[] { + return this.state.peoplePersonaMenu.filter(item => + this._doesTextStartWith(item.primaryText as string, filterText) + || this._doesTextContains(item.primaryText as string, filterText) + || this._doesTextStartWith(item.secondaryText as string, filterText) + || this._doesTextContains(item.secondaryText as string, filterText)); } + /** * Removes duplicates * @@ -236,10 +290,20 @@ export class PeoplePicker extends React.Component { + private _doesTextStartWith(text: string, filterText: string): boolean { return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0; } + /** + * Checks if text contains + * + * @param text + * @param filterText + */ + private _doesTextContains(text: string, filterText: string): boolean { + return text.toLowerCase().indexOf(filterText.toLowerCase()) > 0; + } + /** * Checks if list contains the person * @@ -253,6 +317,44 @@ export class PeoplePicker extends React.Component item.primaryText === persona.primaryText).length > 0; } + /** + * Gets the default users based on the provided email address. + * Adds emails that are not found with a random generated User Id + * + * @param userValuesArray + * @param selectedUsers + */ + private getDefaultUsers(userValuesArray : any[], selectedUsers : string[]) : any { + let defaultuserValuesArray: any[] = []; + for (let i = 0; i < selectedUsers.length; i++) { + const obj = { valToCompare: selectedUsers[i] }; + const length = defaultuserValuesArray.length; + defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj); + if (length === defaultuserValuesArray.length) { + const defaultUnknownUser = [{ + id: 1000 + i, //just a random number + imageUrl: "", + imageInitials: "", + primaryText: selectedUsers[i] , //Name + secondaryText: selectedUsers[i], //Role + tertiaryText: "", //status + optionalText: "" //stgring + }]; + defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser; + } + } + return defaultuserValuesArray; + } + + /** + * Filters Users based on email + */ + private filterUsers = function (value: any, index: number, ar: any[]) { + if (value.secondaryText.toLowerCase().indexOf(this.valToCompare.toLowerCase()) !== -1) { + return value; + } + }; + /** * Default React component render method */ @@ -272,6 +374,7 @@ export class PeoplePicker extends React.Component diff --git a/src/controls/taxonomyPicker/TermParent.tsx b/src/controls/taxonomyPicker/TermParent.tsx index 4a6f8a18a..8e4e3fa3e 100644 --- a/src/controls/taxonomyPicker/TermParent.tsx +++ b/src/controls/taxonomyPicker/TermParent.tsx @@ -6,7 +6,7 @@ import { EXPANDED_IMG, COLLAPSED_IMG, TERMSET_IMG, TERM_IMG } from './TaxonomyPi import Term from './Term'; import styles from './TaxonomyPicker.module.scss'; -import { Checkbox } from 'office-ui-fabric-react'; +import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import * as strings from 'ControlStrings'; /** diff --git a/src/controls/taxonomyPicker/TermPicker.tsx b/src/controls/taxonomyPicker/TermPicker.tsx index 2b223e071..732d543a5 100644 --- a/src/controls/taxonomyPicker/TermPicker.tsx +++ b/src/controls/taxonomyPicker/TermPicker.tsx @@ -6,7 +6,7 @@ import styles from './TaxonomyPicker.module.scss'; import { ITaxonomyPickerProps } from './ITaxonomyPicker'; import { IWebPartContext } from '@microsoft/sp-webpart-base'; import * as strings from 'ControlStrings'; -import { Icon } from 'office-ui-fabric-react'; +import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { ApplicationCustomizerContext } from '@microsoft/sp-application-base'; import { ITermSet } from '../../services/ISPTermStorePickerService'; diff --git a/src/extensions/ootbFields/OotbFieldsFieldCustomizer.ts b/src/extensions/ootbFields/OotbFieldsFieldCustomizer.ts index b0e7987e3..1b2f0e43b 100644 --- a/src/extensions/ootbFields/OotbFieldsFieldCustomizer.ts +++ b/src/extensions/ootbFields/OotbFieldsFieldCustomizer.ts @@ -72,3 +72,5 @@ export default class OotbFieldsFieldCustomizer super.onDisposeCell(event); } } + +// test querystring ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&fieldCustomizers={"FieldName":{"id":"57ebd944-98ed-43f9-b722-e959d6dac6ad","properties":{}}} diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index 3681161f8..502704ca8 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -308,14 +308,14 @@ export default class ControlsTest extends React.Component + showtooltip={true} /> ); }