+
+ {showEmojiPicker && (
+ {renderEmoji}
+
+ {fluentEmojiGroups.map((group:IGroup, index) => {
+ const { groupName, emoji } = group;
+ return (
+
+
+ );
+};
diff --git a/src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx b/src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx
new file mode 100644
index 000000000..76c7fd1f3
--- /dev/null
+++ b/src/controls/HoverReactionsBar/components/reactionPicker/ReactionPicker.tsx
@@ -0,0 +1,201 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-unused-expressions */
+import * as React from 'react';
+
+import strings from 'ControlStrings';
+
+import {
+ Card,
+ Input,
+ tokens,
+} from '@fluentui/react-components';
+import { Icon } from '@iconify/react';
+
+import emojiList from '../../data/fluentEmojis.json';
+import { useFluentEmojis } from '../../hooks/useFluentEmojis';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside';
+import { IEmojiInfo } from '../../models/IFluentEmoji';
+import { ReactionGroups } from './ReactionGroups';
+import { RenderEmoji } from './RenderEmoji';
+import { useReactionPickerStyles } from './useReactionPickerStyle';
+
+const PICKER_WIDTH = 350;
+const PICKER_HEIGHT = 420;
+
+export interface IReactionProps {
+ onSelect: (emoji: string | undefined, emojiInfo?: IEmojiInfo) => void;
+ isOpen: boolean;
+ onDismiss: () => void;
+ returnType?: "emoji" | "image";
+ target?: HTMLDivElement;
+}
+
+const DEFAULT_GROUP = "Smileys & Emotion";
+
+export const ReactionPicker: React.FunctionComponent
+ {
+ setSearchValue(data?.value || "");
+ !ev.currentTarget?.value ? loadEmoji(selectedGroup) : searchEmoji(ev.currentTarget.value);
+ }}
+ type="search"
+ className={styles.searchBox}
+ contentBefore={) => {
+ ev.key === "Enter" ? searchEmoji(ev.currentTarget.value) : null;
+ }}
+ />
+ {
+ setSelectedGroup(groupName);
+ loadEmoji(groupName);
+ }}
+ />
+ )}
+
+ {renderEmoji}
+ {isSearchingRef.current ? null : (
+
@@ -276,11 +279,15 @@ export class DynamicField extends React.Component { this.onChange(newText); }}
disabled={disabled}
onBlur={this.onBlur}
- errorMessage={customNumberErrorMessage} />
+ errorMessage={customNumberErrorMessage}
+ min={minimumValue}
+ max={maximumValue} />
{descriptionEl}
;
+ }
+ case 'Currency': {
+ const customNumberErrorMessage = this.getNumberErrorText();
- case 'Currency':
return
@@ -600,6 +609,8 @@ export class DynamicField extends React.Component 0) {
- if (minValue !== undefined && maxValue !== undefined && (changedValue < minValue || changedValue > maxValue)) {
- return strings.DynamicFormNumberValueMustBeBetween.replace('{0}', minValue.toString()).replace('{1}', maxValue.toString());
+ const numericValue = Number(changedValue);
+ if (isNaN(numericValue)) return strings.ProvidedValueIsInvalid;
+ if (minValue !== undefined && maxValue !== undefined && (numericValue < minValue || numericValue > maxValue)) {
+ return strings.DynamicFormNumberValueMustBeBetween.replace('{0}', minValueCur ?? minValue.toString()).replace('{1}', maxValueCur ?? maxValue.toString());
}
else {
- if (minValue !== undefined && changedValue < minValue) {
- return strings.DynamicFormNumberValueMustBeGreaterThan.replace('{0}', minValue.toString());
+ if (minValue !== undefined && numericValue < minValue) {
+ return strings.DynamicFormNumberValueMustBeGreaterThan.replace('{0}', minValueCur ?? minValue.toString());
}
- else if (maxValue !== undefined && changedValue > maxValue) {
- return strings.DynamicFormNumberValueMustBeLowerThan.replace('{0}', maxValue.toString());
+ else if (maxValue !== undefined && numericValue > maxValue) {
+ return strings.DynamicFormNumberValueMustBeLowerThan.replace('{0}', maxValueCur ?? maxValue.toString());
}
}
}
@@ -646,14 +666,16 @@ export class DynamicField extends React.Component {
selectedItemArr.push(element);
});
}
- else
- selectedItemArr = !changedValue ? [] : changedValue;
+ else {
+ selectedItemArr = !changedValue ? [] : isArray(changedValue) ? changedValue : [ changedValue ];
+ }
if (item.selected) {
selectedItemArr.push(item.key);
diff --git a/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts b/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts
index f1d2b0f09..6aa5d62cc 100644
--- a/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts
+++ b/src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts
@@ -1,5 +1,5 @@
import { BaseComponentContext } from '@microsoft/sp-component-base';
-import { IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
+import { IDropdownOption } from "@fluentui/react/lib/Dropdown";
import { IFilePickerResult } from '../../filePicker';
export type DateFormat = 'DateTime' | 'DateOnly';
@@ -11,6 +11,7 @@ export interface IDynamicFieldProps {
listId: string;
listItemId?: number;
columnInternalName: string;
+ cultureName?: string;
label?: string;
placeholder?: string;
onChanged?: (columnInternalName: string, newValue: any, additionalData?: FieldChangeAdditionalData) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
diff --git a/src/controls/enhancedThemeProvider/EnhancedThemeProvider.tsx b/src/controls/enhancedThemeProvider/EnhancedThemeProvider.tsx
index af9d0c492..549216b94 100644
--- a/src/controls/enhancedThemeProvider/EnhancedThemeProvider.tsx
+++ b/src/controls/enhancedThemeProvider/EnhancedThemeProvider.tsx
@@ -1,7 +1,7 @@
import { ThemeProvider } from '@fluentui/react-theme-provider';
import { getVariant, VariantThemeType } from "@fluentui/scheme-utilities";
-import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
-import { createTheme, getTheme, IPalette, ITheme } from "office-ui-fabric-react/lib/Styling";
+import { initializeIcons } from '@fluentui/react/lib/Icons';
+import { createTheme, getTheme, IPalette, ITheme } from "@fluentui/react/lib/Styling";
import * as React from "react";
import { useCallback, useEffect, useState } from 'react';
import { fluentUITeamsDarkTheme } from '../../common/fluentUIThemes/FluentUITeamsDarkTheme';
diff --git a/src/controls/errorMessage/ErrorMessage.tsx b/src/controls/errorMessage/ErrorMessage.tsx
index aa41d8dbe..09d2fcaa4 100644
--- a/src/controls/errorMessage/ErrorMessage.tsx
+++ b/src/controls/errorMessage/ErrorMessage.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import styles from './ErrorMessage.module.scss';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
export interface IFieldErrorMessageProps {
errorMessage: string;
diff --git a/src/controls/fieldCollectionData/FieldCollectionData.module.scss b/src/controls/fieldCollectionData/FieldCollectionData.module.scss
index 709b99060..84eb5d0c5 100644
--- a/src/controls/fieldCollectionData/FieldCollectionData.module.scss
+++ b/src/controls/fieldCollectionData/FieldCollectionData.module.scss
@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import '~@fluentui/react/dist/sass/References.scss';
.collectionData {
background-color: $ms-color-neutralLight;
@@ -177,3 +177,7 @@
border-bottom: 1px solid $ms-color-neutralTertiary;
}
}
+
+.peoplePicker {
+ background-color: #fff;
+}
diff --git a/src/controls/fieldCollectionData/FieldCollectionData.tsx b/src/controls/fieldCollectionData/FieldCollectionData.tsx
index 67892564e..6201d5f1d 100644
--- a/src/controls/fieldCollectionData/FieldCollectionData.tsx
+++ b/src/controls/fieldCollectionData/FieldCollectionData.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
import * as telemetry from '../../common/telemetry';
-import { DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
-import { Panel, PanelType } from 'office-ui-fabric-react/lib/components/Panel';
-import { Label } from 'office-ui-fabric-react/lib/components/Label';
+import { DefaultButton } from '@fluentui/react/lib/components/Button';
+import { Panel, PanelType } from '@fluentui/react/lib/components/Panel';
+import { Label } from '@fluentui/react/lib/components/Label';
import { CollectionDataViewer } from './collectionDataViewer';
import { IFieldCollectionDataProps, IFieldCollectionDataState } from "./IFieldCollectionData";
import * as strings from 'ControlStrings';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
export class FieldCollectionData extends React.Component {
constructor(props: IFieldCollectionDataProps) {
@@ -48,13 +48,23 @@ export class FieldCollectionData extends React.Component{ /* no-op; */}}
- className={`FieldCollectionData__panel ${this.props.panelClassName || ""}`}
- { ...this.props.panelProps ?? {}} >
+ onDismiss={this.closePanel}
+ type={PanelType.large}
+ headerText={this.props.panelHeader}
+ onOuterClick={()=>{ /* no-op; */}}
+ className={`FieldCollectionData__panel ${this.props.panelClassName || ""}`}
+ { ...this.props.panelProps ?? {}} >
{
this.props.panelDescription && (
- );
+
+ return _element;
}
}
diff --git a/src/controls/fieldCollectionData/ICustomCollectionField.ts b/src/controls/fieldCollectionData/ICustomCollectionField.ts
index 9bf8308f2..ea99622f2 100644
--- a/src/controls/fieldCollectionData/ICustomCollectionField.ts
+++ b/src/controls/fieldCollectionData/ICustomCollectionField.ts
@@ -1,6 +1,7 @@
-import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { IDropdownOption } from '@fluentui/react/lib/Dropdown';
import { IRenderFunction } from '@uifabric/utilities/lib/IRenderFunction';
-import { ISelectableOption } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types';
+import { ISelectableOption } from '@fluentui/react/lib/utilities/selectableOption/SelectableOption.types';
+import { IComboBoxOption } from '@fluentui/react/lib/ComboBox';
export interface ICustomCollectionField {
/**
@@ -24,9 +25,17 @@ export interface ICustomCollectionField {
*/
required?: boolean;
/**
- * Dropdown options. Only nescessary when dropdown type is used.
+ * Dropdown / combobox options. Only nescessary when dropdown or combobox type is used.
*/
- options?: IDropdownOption[];
+ options?: IDropdownOption[] | IComboBoxOption[];
+ /**
+ * Whether multiple options can be selcted. Only when combobox or peoplepicker is used. Defaults to false (combobox) and true (peoplepicker)
+ */
+ multiSelect?: boolean
+ /**
+ * Whether own options can be added. Only when combobox is used. Defaults to false
+ */
+ allowFreeform?: boolean
/**
* Dropdown custom options render method.
*/
@@ -35,6 +44,18 @@ export interface ICustomCollectionField {
* Input placeholder text.
*/
placeholder?: string;
+ /**
+ * Minimum users to be selected. Only when people picker is used.
+ */
+ minimumUsers?: number;
+ /**
+ * The message to be displayed when minimum users is not met. Only when people picker is used. If omitted, the default value is displayed
+ */
+ minimumUsersMessage?: string;
+ /**
+ * Maximum users to be selected. Only when people picker is used.
+ */
+ maximumUsers?: number;
/**
* Default value for the field
*/
@@ -50,7 +71,7 @@ export interface ICustomCollectionField {
* - If valid, it returns empty string.
* - If invalid, the field will show a red border
*/
- onGetErrorMessage?: (value: any, index: number, currentItem: any) => string | Promise; // eslint-disable-line @typescript-eslint/no-explicit-any
+ onGetErrorMessage?: (value: any, index: number, currentItem: any) => string | Promise; // eslint-disable-line @typescript-eslint/no-explicit-any
/**
* Custom field rendering support
@@ -72,7 +93,10 @@ export enum CustomCollectionFieldType {
number,
boolean,
dropdown,
+ combobox,
+ peoplepicker,
fabricIcon,
url,
+ date,
custom
}
diff --git a/src/controls/fieldCollectionData/IFieldCollectionData.ts b/src/controls/fieldCollectionData/IFieldCollectionData.ts
index 0298a6b59..e21f7e43a 100644
--- a/src/controls/fieldCollectionData/IFieldCollectionData.ts
+++ b/src/controls/fieldCollectionData/IFieldCollectionData.ts
@@ -1,5 +1,6 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base";
import { ICustomCollectionField } from "./ICustomCollectionField";
-import { IPanelProps } from "office-ui-fabric-react";
+import { IPanelProps } from "@fluentui/react";
export interface IFieldCollectionDataProps {
/**
@@ -80,6 +81,19 @@ export interface IFieldCollectionDataProps {
executeFiltering?: (searchFilter: string, item: any) => boolean; // eslint-disable-line @typescript-eslint/no-explicit-any
onChanged: (value: any[]) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
+ /**
+ * Used for CustomCollectionFieldType peoplepicker
+ */
+ context?: BaseComponentContext;
+ /**
+ * Show the collectionDataViewer inside the panel, defaults to true
+ */
+ usePanel?: boolean;
+ /**
+ * The message when no data is added
+ */
+ noDataMessage?: string;
+
}
export interface IFieldCollectionDataState {
diff --git a/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx b/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx
index 9ac0f2ba2..d29fdaf51 100644
--- a/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx
+++ b/src/controls/fieldCollectionData/collectionDataItem/CollectionDataItem.tsx
@@ -2,19 +2,22 @@ import * as React from 'react';
import styles from '../FieldCollectionData.module.scss';
import { ICollectionDataItemProps } from './ICollectionDataItemProps';
import { ICollectionDataItemState } from './ICollectionDataItemState';
-import { TextField } from 'office-ui-fabric-react/lib/components/TextField';
-import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
-import { Link } from 'office-ui-fabric-react/lib/components/Link';
-import { Checkbox } from 'office-ui-fabric-react/lib/components/Checkbox';
+import { TextField } from '@fluentui/react/lib/components/TextField';
+import { Icon } from '@fluentui/react/lib/components/Icon';
+import { Link } from '@fluentui/react/lib/components/Link';
+import { Checkbox } from '@fluentui/react/lib/components/Checkbox';
import * as strings from 'ControlStrings';
import { CustomCollectionFieldType, ICustomCollectionField } from '../ICustomCollectionField';
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
-import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/components/Callout';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/components/Dropdown';
+import { ComboBox, IComboBoxOption } from '@fluentui/react/lib/components/ComboBox';
+import { PeoplePicker, PrincipalType } from "../../peoplepicker";
+import { Callout, DirectionalHint } from '@fluentui/react/lib/components/Callout';
import { CollectionIconField } from '../collectionIconField';
import { clone, findIndex, sortBy } from '@microsoft/sp-lodash-subset';
-import { CollectionNumberField } from '../collectionNumberField';
import { Guid } from '@microsoft/sp-core-library';
import { FieldValidator } from '../FieldValidator';
+import { DatePicker } from '@fluentui/react/lib/DatePicker';
+import { IPersonaProps } from '@fluentui/react/lib/Persona';
export class CollectionDataItem extends React.Component {
private emptyItem: any = null; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -54,6 +57,7 @@ export class CollectionDataItem extends React.Component { // eslint-disable-line @typescript-eslint/no-explicit-any
+
this.setState((prevState: ICollectionDataItemState): ICollectionDataItemState => {
const { crntItem } = prevState;
// Update the changed field
@@ -66,6 +70,84 @@ export class CollectionDataItem extends React.Component {
+ let _selectedOption: IComboBoxOption = null;
+ if (typeof option === "undefined" && typeof value !== "undefined" && value.length === 0) {
+ _selectedOption = null;
+ } else if (typeof option === "undefined" && value.length > 0) {
+ _selectedOption = {
+ key: value,
+ text: value
+ };
+ } else {
+ _selectedOption = option;
+ }
+
+ this.setState((prevState: ICollectionDataItemState): ICollectionDataItemState => {
+ const { crntItem } = prevState;
+
+ // Update the changed field
+ crntItem[fieldId] = _selectedOption;
+
+ this.doAllFieldChecks();
+
+ // Store this in the current state
+
+ return {crntItem};
+ });
+
+ }
+
+ private onValueChangedComboBoxMulti = (fieldId: string, option: IComboBoxOption, value: string): void => { // eslint-disable-line @typescript-eslint/no-explicit-any
+
+ let _selectedOption: IComboBoxOption = null;
+ let _selected: IComboBoxOption[] = [];
+
+ this.setState((prevState: ICollectionDataItemState): ICollectionDataItemState => {
+ const { crntItem } = prevState;
+ _selected = crntItem[fieldId];
+
+ if (typeof option === "undefined") {
+ // freeform
+ _selectedOption = {
+ key: value,
+ text: value,
+ selected: true
+ };
+ } else {
+ // selected option
+ _selectedOption = {
+ key: option.key,
+ text: option.text,
+ selected: option.selected
+ };
+ }
+
+ if (_selected === null ) {
+ _selected = [];
+ }
+
+ if (_selectedOption.selected === true) {
+ //add to selection
+ _selected.push(_selectedOption);
+ } else {
+ //remove from selection
+ _selected = _selected.filter(x => x.key !== _selectedOption.key);
+ }
+
+ // Update the changed field
+ if (_selected.length === 0) {
+ _selected = null;
+ }
+
+ crntItem[fieldId] = _selected;
+
+ this.doAllFieldChecks();
+
+ return { crntItem};
+ });
+ }
+
/**
* Perform all required field checks at once
*/
@@ -94,13 +176,15 @@ export class CollectionDataItem extends React.Component f.required);
+ const requiredFields: ICustomCollectionField[] = this.props.fields.filter(f => f.required);
+
// Check all the required field values
for (const field of requiredFields) {
if (typeof item[field.id] === "undefined" || item[field.id] === null || item[field.id] === "") {
return false;
}
}
+
return true;
}
@@ -156,6 +240,7 @@ export class CollectionDataItem extends React.Component => { // eslint-disable-line @typescript-eslint/no-explicit-any
+ let isValid: boolean = true;
+ let validation: string = "";
+
+ // Check if custom validation is configured
+ if (field.onGetErrorMessage) {
+ // Using the custom validation
+ validation = await field.onGetErrorMessage(value, this.props.index, item);
+ isValid = validation === "";
+ } else if (typeof field.minimumUsers === "number" && value.length < field.minimumUsers) {
+ validation = typeof field.minimumUsersMessage === "string" ? field.minimumUsersMessage : strings.CollectionDataMinimumUsersDefaultMessage.replace("{0}", field.minimumUsers.toString());
+ }
+
+ // Store the field validation
+ this.validation[field.id] = isValid;
+ // Add message for the error callout
+ this.errorCalloutHandler(field.id, validation);
+ this.doAllFieldChecks();
+ // Return empty the error message if needed
+
+ return "";
+ }
+
+ private comboboxValidation = (field: ICustomCollectionField, selected: string[] | string): void => {
+ let isValid = true;
+ const validation = "";
+
+ if (field.required && (selected === null || selected.length === 0) ) {
+ isValid = false;
+ }
+
+ // Store the field validation
+ this.validation[field.id] = isValid;
+ this.errorCalloutHandler(field.id, validation);
+ }
+
/**
* Error callout message handler
*
@@ -345,6 +466,10 @@ export class CollectionDataItem extends React.Component this.onValueChanged(field.id, value)}
+ deferredValidationTime={field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200}
+ onGetErrorMessage={async (value: string) => await this.fieldValidation(field, value)}
+ inputClassName="PropertyFieldCollectionData__panel__number-field" />;
case CustomCollectionFieldType.fabricIcon:
return (
= 0 ? field.deferredValidationTime : 200}
onGetErrorMessage={async (value: string) => this.urlFieldValidation(field, value, item)}
inputClassName="PropertyFieldCollectionData__panel__url-field" />;
+ case CustomCollectionFieldType.date:
+ return { this.onValueChanged(field.id, date) }}
+ formatDate={(date) => { return date ? date?.toLocaleDateString() : ""; }}
+ />;
case CustomCollectionFieldType.custom:
if (field.onCustomRender) {
return field.onCustomRender(field, item[field.id], this.onValueChanged, item, item.uniqueId, this.onCustomFieldValidation);
}
return null;
+ case CustomCollectionFieldType.combobox:
+ _comboBoxOptions = field.options;
+
+ if (field.multiSelect) {
+ // multivalue
+
+ if (item[field.id] !== null) {
+ for (let i: number = 0; i < item[field.id].length; i++) {
+ _selectedComboBoxKeys.push(item[field.id][i].key);
+
+ // if selected option is not in list (anymore), add it to choices
+ if (typeof _comboBoxOptions.find(value => value.key === item[field.id][i].key) === "undefined" ) {
+ _comboBoxOptions.push(item[field.id][i]);
+ }
+ }
+ }
+
+ } else {
+ // single value
+ if (item[field.id] !== null) {
+ _selectedComboBoxKey = item[field.id].key;
+
+ if (typeof _comboBoxOptions.find(value => value.key === item[field.id].key) === "undefined" ) {
+ _comboBoxOptions.push(item[field.id]);
+ }
+
+ }
+
+ }
+
+ return this.comboboxValidation(field, field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey)}
+ onBlur={() => this.comboboxValidation(field, field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey)}
+ multiSelect={field.multiSelect}
+ allowFreeform={field.allowFreeform}
+ placeholder={field.placeholder}
+ options={_comboBoxOptions}
+ selectedKey= { field.multiSelect ? _selectedComboBoxKeys : _selectedComboBoxKey}
+ required={field.required}
+ disabled={disableFieldOnEdit}
+ onChange={async (event, option, index, value) =>{
+ if (field.multiSelect) {
+ this.onValueChangedComboBoxMulti(field.id, option, value);
+ } else {
+ this.onValueChangedComboBoxSingle(field.id, option, value);
+ }
+ } }
+
+ />;
+ case CustomCollectionFieldType.peoplepicker:
+ _selectedUsers = item[field.id] !== null ? item[field.id]: [] ;
+
+ return {
+ const _selected: string[] = items.length === 0 ? null : items.map(({secondaryText}) => secondaryText);
+ this.onValueChanged(field.id, _selected)
+ }
+ }
+ onGetErrorMessage={async (items: IPersonaProps[]) => await this.peoplepickerValidation(field, items, item)}
+
+ defaultSelectedUsers={_selectedUsers}
+ />;
case CustomCollectionFieldType.string:
default:
return this.onValueChanged(field.id, value)}
deferredValidationTime={field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200}
- onGetErrorMessage={async (value: string) => await this.fieldValidation(field, value)}
+ onGetErrorMessage={async (value: string) => await this.fieldValidation(field, value) }
inputClassName="PropertyFieldCollectionData__panel__string-field" />;
}
}
@@ -425,6 +636,7 @@ export class CollectionDataItem extends React.Component
- this.props.fOnSorting(this.props.index, opt.key as number)} />
+ this.props.fOnSorting(this.props.index, opt.key as number)} />
)
}
diff --git a/src/controls/fieldCollectionData/collectionDataItem/ICollectionDataItemProps.ts b/src/controls/fieldCollectionData/collectionDataItem/ICollectionDataItemProps.ts
index 0b1952664..4997ee89d 100644
--- a/src/controls/fieldCollectionData/collectionDataItem/ICollectionDataItemProps.ts
+++ b/src/controls/fieldCollectionData/collectionDataItem/ICollectionDataItemProps.ts
@@ -1,3 +1,4 @@
+import { BaseComponentContext } from "@microsoft/sp-component-base"
import { ICustomCollectionField } from "../ICustomCollectionField";
export interface ICollectionDataItemProps {
@@ -7,6 +8,7 @@ export interface ICollectionDataItemProps {
sortingEnabled?: boolean;
totalItems?: number;
disableItemDeletion?: boolean;
+ context?: BaseComponentContext;
/* eslint-disable @typescript-eslint/no-explicit-any */
fAddItem?: (item: any) => void;
diff --git a/src/controls/fieldCollectionData/collectionDataViewer/CollectionDataViewer.tsx b/src/controls/fieldCollectionData/collectionDataViewer/CollectionDataViewer.tsx
index c944ba8f2..0ef19e40e 100644
--- a/src/controls/fieldCollectionData/collectionDataViewer/CollectionDataViewer.tsx
+++ b/src/controls/fieldCollectionData/collectionDataViewer/CollectionDataViewer.tsx
@@ -3,12 +3,12 @@ import styles from '../FieldCollectionData.module.scss';
import { ICollectionDataViewerProps } from './ICollectionDataViewerProps';
import { ICollectionDataViewerState } from './ICollectionDataViewerState';
import { CollectionDataItem } from '../collectionDataItem';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
-import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/components/Button';
+import { Icon } from '@fluentui/react/lib/components/Icon';
import * as strings from 'ControlStrings';
import { cloneDeep, sortBy, isEmpty, findIndex } from '@microsoft/sp-lodash-subset';
import { Pagination } from '../../pagination';
-import { SearchBox } from 'office-ui-fabric-react/lib/components/SearchBox';
+import { SearchBox } from '@fluentui/react/lib/components/SearchBox';
import { Guid } from '@microsoft/sp-core-library';
export class CollectionDataViewer extends React.Component {
@@ -63,6 +63,11 @@ export class CollectionDataViewer extends React.Component {
+ // if panel is not used save directly
+ if (typeof this.props.usePanel === "boolean" && this.props.usePanel === false) {
+ this.props.fOnSave(this.state.crntItems);
+ }
});
}
@@ -78,6 +83,11 @@ export class CollectionDataViewer extends React.Component {
+ // if panel is not used save directly
+ if (typeof this.props.usePanel === "boolean" && this.props.usePanel === false) {
+ this.props.fOnSave(this.state.crntItems);
+ }
});
}
@@ -99,6 +109,11 @@ export class CollectionDataViewer extends React.Component {
+ // if panel is not used save directly
+ if (typeof this.props.usePanel === "boolean" && this.props.usePanel === false) {
+ this.props.fOnSave(this.state.crntItems);
+ }
});
}
@@ -273,6 +288,7 @@ export class CollectionDataViewer extends React.Component { // eslint-disable-line @typescript-eslint/no-explicit-any
return {strings.CollectionDataEmptyValue}
+
);
}
diff --git a/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx b/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx
index ed5ed1a15..b8db38ad9 100644
--- a/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx
+++ b/src/controls/fieldCollectionData/collectionIconField/CollectionIconField.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
import styles from '../FieldCollectionData.module.scss';
import { ICollectionIconFieldProps } from '.';
-import { TextField } from 'office-ui-fabric-react/lib/components/TextField';
-import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
+import { TextField } from '@fluentui/react/lib/components/TextField';
+import { Icon } from '@fluentui/react/lib/components/Icon';
export class CollectionIconField extends React.Component{this.props.panelDescription}
@@ -77,6 +87,7 @@ export class FieldCollectionData extends React.Component{typeof this.props.noDataMessage === "string" ? this.props.noDataMessage : strings.CollectionDataEmptyValue}
) } -
- {this.state.inCreationItem &&
+ {
+ // Only display the save and cancel buttons when Panel is used
+ (typeof this.props.usePanel !== "boolean" || this.props.usePanel !== false) && (
+
+ {this.state.inCreationItem &&
+ )
+ }
- await this.valueChange(this.props.field, ev.target.value)}
- disabled={this.props.disableEdit} />
-
- );
- }
-}
diff --git a/src/controls/fieldCollectionData/collectionNumberField/ICollectionNumberFieldProps.ts b/src/controls/fieldCollectionData/collectionNumberField/ICollectionNumberFieldProps.ts
deleted file mode 100644
index ea00f4c3e..000000000
--- a/src/controls/fieldCollectionData/collectionNumberField/ICollectionNumberFieldProps.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ICustomCollectionField } from "../ICustomCollectionField";
-
-export interface ICollectionNumberFieldProps {
- field: ICustomCollectionField;
- item: any; // eslint-disable-line @typescript-eslint/no-explicit-any
- disableEdit: boolean;
-
- fOnValueChange: (fieldId: string, value: any) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
- fValidation: (field: ICustomCollectionField, value: any) => Promise
- {props.onRenderActionButton && props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, props.anchorTermInfo, updateTaxonomyTreeView)}
+ {props.onRenderActionButton &&
+ props.onRenderActionButton(
+ props.termStoreInfo,
+ props.termSetInfo,
+ props.anchorTermInfo,
+ updateTaxonomyTreeView
+ )}
- {props.onRenderActionButton && props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, groupHeaderProps.group.data.term, updateTaxonomyTreeView)}
+ {props.onRenderActionButton &&
+ props.onRenderActionButton(
+ props.termStoreInfo,
+ props.termSetInfo,
+ groupHeaderProps.group.data.term,
+ updateTaxonomyTreeView
+ )}
- {props.onRenderActionButton && props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, groupHeaderProps.group.data.term, updateTaxonomyTreeView)}
+ {props.onRenderActionButton &&
+ props.onRenderActionButton(
+ props.termStoreInfo,
+ props.termSetInfo,
+ groupHeaderProps.group.data.term,
+ updateTaxonomyTreeView
+ )}
);
- }
- else {
- const choiceGroupOptionStyles: IStyleFunctionOrObject
- {props.onRenderActionButton && props.onRenderActionButton(props.termStoreInfo, props.termSetInfo, groupHeaderProps.group.data.term, updateTaxonomyTreeView)}
+ {props.onRenderActionButton &&
+ props.onRenderActionButton(
+ props.termStoreInfo,
+ props.termSetInfo,
+ groupHeaderProps.group.data.term,
+ updateTaxonomyTreeView
+ )}
- {
- setGroupsLoading((prevGroupsLoading) => [...prevGroupsLoading, footerProps.group.key]);
- props.onLoadMoreData(Guid.parse(props.termSetInfo.id), footerProps.group.key === props.termSetInfo.id ? Guid.empty : Guid.parse(footerProps.group.key), footerProps.group.data.skiptoken, props.hideDeprecatedTerms)
- .then((loadedTerms) => {
- const grps: IGroup[] = loadedTerms.value.map(term => {
- let termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.languageTag && termLabel.isDefault === true));
- if (termNames.length === 0) {
- termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.termStoreInfo.defaultLanguageTag && termLabel.isDefault === true));
- }
- const g: IGroup = {
- name: termNames[0]?.name,
- key: term.id,
- startIndex: -1,
- count: 50,
- level: footerProps.group.level + 1,
- isCollapsed: true,
- data: { skiptoken: '', term: term },
- hasMoreData: term.childrenCount > 0,
- };
- if (g.hasMoreData) {
- g.children = [];
- }
- return g;
- });
- props.setTerms((prevTerms) => {
- const nonExistingTerms = loadedTerms.value.filter((newTerm) => prevTerms.every((prevTerm) => prevTerm.id !== newTerm.id));
- return [...prevTerms, ...nonExistingTerms];
+ {
+ setGroupsLoading((prevGroupsLoading) => [
+ ...prevGroupsLoading,
+ footerProps.group.key,
+ ]);
+ props
+ .onLoadMoreData(
+ Guid.parse(props.termSetInfo.id),
+ footerProps.group.key === props.termSetInfo.id
+ ? Guid.empty
+ : Guid.parse(footerProps.group.key),
+ footerProps.group.data.skiptoken,
+ props.hideDeprecatedTerms
+ )
+ .then((loadedTerms) => {
+ const grps: IGroup[] = loadedTerms.value.map((term) => {
+ let termNames = term.labels.filter(
+ (termLabel) =>
+ termLabel.languageTag === props.languageTag &&
+ termLabel.isDefault === true
+ );
+ if (termNames.length === 0) {
+ termNames = term.labels.filter(
+ (termLabel) =>
+ termLabel.languageTag ===
+ props.termStoreInfo.defaultLanguageTag &&
+ termLabel.isDefault === true
+ );
+ }
+ const g: IGroup = {
+ name: termNames[0]?.name,
+ key: term.id,
+ startIndex: -1,
+ count: 50,
+ level: footerProps.group.level + 1,
+ isCollapsed: true,
+ data: { skiptoken: "", term: term },
+ hasMoreData: term.childrenCount > 0,
+ };
+ if (g.hasMoreData) {
+ g.children = [];
+ }
+ return g;
+ });
+ props.setTerms((prevTerms) => {
+ const nonExistingTerms = loadedTerms.value.filter(
+ (newTerm) =>
+ prevTerms.every(
+ (prevTerm) => prevTerm.id !== newTerm.id
+ )
+ );
+ return [...prevTerms, ...nonExistingTerms];
+ });
+ const nonExistingChildren = grps.filter((grp) =>
+ footerProps.group.children?.every(
+ (child) => child.key !== grp.key
+ )
+ );
+ footerProps.group.children = [
+ ...footerProps.group.children,
+ ...nonExistingChildren,
+ ];
+ footerProps.group.data.skiptoken = loadedTerms.skiptoken;
+ footerProps.group.hasMoreData = loadedTerms.skiptoken !== "";
+ setGroupsLoading((prevGroupsLoading) =>
+ prevGroupsLoading.filter(
+ (value) => value !== footerProps.group.key
+ )
+ );
+ })
+ .catch(() => {
+ // no-op;
});
- const nonExistingChildren = grps.filter((grp) => footerProps.group.children?.every((child) => child.key !== grp.key));
- footerProps.group.children = [...footerProps.group.children, ...nonExistingChildren];
- footerProps.group.data.skiptoken = loadedTerms.skiptoken;
- footerProps.group.hasMoreData = loadedTerms.skiptoken !== '';
- setGroupsLoading((prevGroupsLoading) => prevGroupsLoading.filter((value) => value !== footerProps.group.key));
- })
- .catch(() => {
- // no-op;
- });
- }}
- styles={linkStyles}>
+ }}
+ styles={linkStyles}
+ >
{strings.ModernTaxonomyPickerLoadMoreText}
@@ -575,7 +877,9 @@ export function TaxonomyTree(props: ITaxonomyTreeProps): React.ReactElement
+
+ );
+ }
+
+}
diff --git a/src/controls/viewPicker/index.ts b/src/controls/viewPicker/index.ts
new file mode 100644
index 000000000..374101160
--- /dev/null
+++ b/src/controls/viewPicker/index.ts
@@ -0,0 +1,2 @@
+export * from './IViewPicker';
+export * from './ViewPicker';
\ No newline at end of file
diff --git a/src/extensions/testApp/TestApp.tsx b/src/extensions/testApp/TestApp.tsx
index c90aa3cc4..5eecbf9f9 100644
--- a/src/extensions/testApp/TestApp.tsx
+++ b/src/extensions/testApp/TestApp.tsx
@@ -1,5 +1,5 @@
import { ApplicationCustomizerContext } from '@microsoft/sp-application-base';
-import { DefaultButton } from 'office-ui-fabric-react';
+import { DefaultButton } from '@fluentui/react';
import * as React from 'react';
// import styles from './TestApp.module.scss';
diff --git a/src/index.ts b/src/index.ts
index d6c75c425..178df5b7d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,6 +16,7 @@ export * from './FolderExplorer';
export * from './FolderPicker';
export * from './IconPicker';
export * from './Pagination';
+export * from './HoverReactionsBar';
export * from './IFrameDialog';
export * from './IFramePanel';
diff --git a/src/loc/bg-bg.ts b/src/loc/bg-bg.ts
index 657246024..813cc925e 100644
--- a/src/loc/bg-bg.ts
+++ b/src/loc/bg-bg.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Колекцията полета е празна!",
"InvalidUrlError": "Предоставеният URL адрес не е валиден",
"CollectionDataSearch": "Търсене",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "зареждане на вашите екипи",
"MyTeamsMessageError": "Нещо се обърка, докато зареждате екипите си, моля, опитайте по-късно или опреснете браузъра",
"MyTeamsNoTeamsMessage": "Нямаш отбори",
diff --git a/src/loc/ca-es.ts b/src/loc/ca-es.ts
index 556f0370f..210195ee7 100644
--- a/src/loc/ca-es.ts
+++ b/src/loc/ca-es.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "La col·lecció camps és buida!",
"InvalidUrlError": "L'adreça URL proporcionada no és vàlida",
"CollectionDataSearch": "Buscar",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "Carregant els teus equips",
"MyTeamsMessageError": "Alguna cosa ha fallat en carregar els vostres equips, proveu-ho més tard o actualitzeu el navegador",
"MyTeamsNoTeamsMessage": "No hi ha equips",
diff --git a/src/loc/da-dk.ts b/src/loc/da-dk.ts
index 85077d2e1..e3d4df04c 100644
--- a/src/loc/da-dk.ts
+++ b/src/loc/da-dk.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Fields kollektionen er tom!",
"InvalidUrlError": "Den angivne URL-adresse er ugyldig",
"CollectionDataSearch": "Søge",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "indlæse dine teams",
"MyTeamsMessageError": "Noget gik galt, mens du indlæser dine teams, kan du prøve senere eller opdatere browser",
"MyTeamsNoTeamsMessage": "Du har ingen hold.",
diff --git a/src/loc/de-de.ts b/src/loc/de-de.ts
index e4cadb1ed..8d9687e6d 100644
--- a/src/loc/de-de.ts
+++ b/src/loc/de-de.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Die Fields-Sammlung ist leer!",
"InvalidUrlError": "Die angegebene URL ist ungültig",
"CollectionDataSearch": "Suchen",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "Laden Ihrer Teams",
"MyTeamsMessageError": "Beim Laden Ihrer Teams ist etwas schief gelaufen, bitte versuchen Sie es später oder aktualisieren Sie den Browser",
"MyTeamsNoTeamsMessage": "Sie haben keine Teams",
diff --git a/src/loc/el-gr.ts b/src/loc/el-gr.ts
index 5768b6d9a..56ba1243c 100644
--- a/src/loc/el-gr.ts
+++ b/src/loc/el-gr.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Η συλλογή πεδίων είναι άδεια!",
"InvalidUrlError": "Η παρεχόμενη διεύθυνση URL δεν είναι έγκυρη",
"CollectionDataSearch": "Αναζήτηση",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "φόρτωση των ομάδων σας",
"MyTeamsMessageError": "Κάτι πήγε στραβά κατά τη φόρτωση των ομάδων σας, δοκιμάστε αργότερα ή ανανεώστε το πρόγραμμα περιήγησης",
"MyTeamsNoTeamsMessage": "Δεν έχεις ομάδες.",
diff --git a/src/loc/en-us.ts b/src/loc/en-us.ts
index daeea6c12..b0b3a1e27 100644
--- a/src/loc/en-us.ts
+++ b/src/loc/en-us.ts
@@ -359,6 +359,7 @@ define([], () => {
CollectionDataItemMissingFields: "Fields collection is empty!",
InvalidUrlError: "The provided URL is not valid",
CollectionDataSearch: "Search",
+ CollectionDataMinimumUsersDefaultMessage: "Minimum number of users to be selected is {0}",
MyTeamsLoadingMessage: "loading your teams",
MyTeamsMessageError: "Something went wrong while loading your teams, please try later or refresh browser",
@@ -422,5 +423,7 @@ TermSetNavigationNoTerms: "No terms defined",
UpLoadFilesSelectAllLabel: "Select all",
UploadFilesUploadButtonLabel: "Upload",
+ HoverReactionBarSearchEmojiPlaceholder: "Search emoji",
+
};
});
diff --git a/src/loc/es-es.ts b/src/loc/es-es.ts
index 202970148..0502143fe 100644
--- a/src/loc/es-es.ts
+++ b/src/loc/es-es.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "¡La colección Fields está vacía!",
"InvalidUrlError": "La dirección URL proporcionada no es válida",
"CollectionDataSearch": "Buscar",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "cargando tus equipos",
"MyTeamsMessageError": "Algo salió mal mientras cargaba sus equipos, por favor, inténtelo más tarde o actualice el navegador",
"MyTeamsNoTeamsMessage": "No tienes ningún equipo",
diff --git a/src/loc/et-ee.ts b/src/loc/et-ee.ts
index 050d7fa9e..dae38980c 100644
--- a/src/loc/et-ee.ts
+++ b/src/loc/et-ee.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Väljade kollektsioon on tühi!",
"InvalidUrlError": "Esitatud URL ei sobi",
"CollectionDataSearch": "Otsing",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "meeskondade laadimine",
"MyTeamsMessageError": "Midagi läks meeskondade laadimisel valesti, proovige hiljem või värskendage brauserit",
"MyTeamsNoTeamsMessage": "Sul pole meeskondi.",
diff --git a/src/loc/fi-fi.ts b/src/loc/fi-fi.ts
index daa8b4838..9a378c06d 100644
--- a/src/loc/fi-fi.ts
+++ b/src/loc/fi-fi.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Kenttien kokoelma on tyhjä!",
"InvalidUrlError": "Annettu URL-osoite ei kelpaa",
"CollectionDataSearch": "Etsiä",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "Tiimien lataaminen",
"MyTeamsMessageError": "Jokin meni vikaan ladattaessa tiimejäsi, kokeile myöhemmin tai päivitä selain",
"MyTeamsNoTeamsMessage": "Sinulla ei ole yhtään tiimiä.",
diff --git a/src/loc/fr-ca.ts b/src/loc/fr-ca.ts
index ce6cd7273..9b8c20943 100644
--- a/src/loc/fr-ca.ts
+++ b/src/loc/fr-ca.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "La collection fields est vide!",
"InvalidUrlError": "L’URL fournie n’est pas valide",
"CollectionDataSearch": "Recherche",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "chargement de vos équipes",
"MyTeamsMessageError": "Quelque chose s’est mal passé lors du chargement de vos équipes, veuillez essayer plus tard ou actualiser le navigateur",
"MyTeamsNoTeamsMessage": "Vous n’avez pas d’équipes",
diff --git a/src/loc/fr-fr.ts b/src/loc/fr-fr.ts
index 96b761670..3ea6c1b1a 100644
--- a/src/loc/fr-fr.ts
+++ b/src/loc/fr-fr.ts
@@ -62,7 +62,7 @@ define([], () => {
"ListItemAttachmentserrorLoadAttachments": "Erreur lors du chargement de la pièce jointe, cause : {0}",
"ListItemAttachmentsconfirmDelete": "Voulez-vous vraiment envoyer la pièce jointe {0} à la Corbeille du site ?",
"ListItemAttachmentsdialogTitle": "Pièce jointe",
- "ListItemAttachmentsdialogOKbuttonLabel": "D’ACCORD",
+ "ListItemAttachmentsdialogOKbuttonLabel": "Ok",
"ListItemAttachmentsdialogCancelButtonLabel": "Annuler",
"ListItemAttachmentsdialogOKbuttonLabelOnDelete": "Supprimer",
"ListItemAttachmentsuploadAttachmentDialogTitle": "Ajouter une pièce jointe",
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "La collection Fields est vide !",
"InvalidUrlError": "L’URL fournie n’est pas valide",
"CollectionDataSearch": "Rechercher",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "chargement de vos équipes",
"MyTeamsMessageError": "Quelque chose s’est mal passé lors du chargement de vos équipes, veuillez essayer plus tard ou actualiser le navigateur",
"MyTeamsNoTeamsMessage": "Vous n’avez pas d’équipes",
diff --git a/src/loc/it-it.ts b/src/loc/it-it.ts
index 17e8e53a5..bc04ab732 100644
--- a/src/loc/it-it.ts
+++ b/src/loc/it-it.ts
@@ -342,6 +342,7 @@ define([], () => {
"CollectionDataItemMissingFields": "La raccolta dei campi è vuota!",
"InvalidUrlError": "L'URL fornito non è valido",
"CollectionDataSearch": "Ricerca",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "caricamento dei team",
"MyTeamsMessageError": "Qualcosa è andato storto durante il caricamento dei team, provare più tardi o aggiornare il browser",
"MyTeamsNoTeamsMessage": "Non hai team",
diff --git a/src/loc/ja-jp.ts b/src/loc/ja-jp.ts
index c3f91d841..fccce14db 100644
--- a/src/loc/ja-jp.ts
+++ b/src/loc/ja-jp.ts
@@ -2,8 +2,8 @@ declare var define: any;
define([], () => {
return {
- TermSertNaviagtionErrorMessage: "TermSet not found",
- TermSetNavigationNoTerms: "No terms defined",
+ TermSertNaviagtionErrorMessage: "用語セットが見つかりませんでした",
+ TermSetNavigationNoTerms: "用語がありません",
"Save": "セーブ",
"Cancel": "キャンセル",
"SiteBreadcrumbLabel": "ウェブサイトの階層リンク",
@@ -97,7 +97,7 @@ define([], () => {
"ListTitle": "リスト",
"LinkTitle": "ハイパーリンク",
"ImageTitle": "画像",
- "MoreTitle": "もっとその",
+ "MoreTitle": "詳細",
"FormattingPaneTitle": "テキストの書式設定",
"CloseButton": "閉じる",
"InsertLinkTitle": "リンクの挿入",
@@ -307,10 +307,10 @@ define([], () => {
"KB",
"MB",
"GB",
- "結核",
+ "TB",
"PB",
- "犬",
- "例えば",
+ "EB",
+ "ZB",
"YB"
],
"SorryWebSearch": "この関数は、Bing API キーを必要とするため、このサンプルでは実装されていません。",
@@ -343,23 +343,24 @@ define([], () => {
"CollectionDataItemFieldRequiredLabel": "フィールドは必須です。",
"CollectionDataItemMissingFields": "フィールドコレクションが空です!",
"InvalidUrlError": "指定された URL は無効です",
- "CollectionDataSearch": "捜索",
+ "CollectionDataSearch": "検索",
+ "CollectionDataMinimumUsersDefaultMessage": "最低{0}ユーザー選択する必要があります",
"MyTeamsLoadingMessage": "チームの読み込み",
"MyTeamsMessageError": "あなたのチームをロード中に何かが間違っていた、後で試すか、ブラウザをリフレッシュしてください",
"MyTeamsNoTeamsMessage": "あなたはチームを持っていません",
"MyTeamsTeamChannelPublicMessage": "パブリック チャネル",
- "MyTeamsTeamChannelTypeMessage": "プライベートチャンネル",
+ "MyTeamsTeamChannelTypeMessage": "プライベートチャネル",
"TeamChannelPickerFontIconFavoriteText": "お気に入り",
- "TeamChannelPickerFontIconPrivateChannelTitle": "プライベートチャンネル",
+ "TeamChannelPickerFontIconPrivateChannelTitle": "プライベートチャネル",
"TeamChannelPickerSugestionHeaderText": "推奨されるチーム チャネル",
- "TeamPickerButtonRemoveTitle": "取り去る",
+ "TeamPickerButtonRemoveTitle": "削除",
"TeamPickernoResultsFoundText": "チームが見つかりません",
"TeamPickerSugestionsHeaderText": "推奨されるチーム",
- "TeamsChannelPickerButtonRemoveTitle": "取り去る",
+ "TeamsChannelPickerButtonRemoveTitle": "削除",
"TeamsChannelPickerNoresultsFoundText": "チャネルが見つかりません",
"ViewMore": "もっと見る",
- "DynamicFormLoading": "積載。。。",
- "DynamicFormPleaseWait": "お待ちください。。。",
+ "DynamicFormLoading": "読み込み中...",
+ "DynamicFormPleaseWait": "お待ちください...",
"DynamicFormRequiredErrorMessage": "この空白のままにすることはできません。",
"DynamicFormTermPanelTitle": "用語の選択",
"DynamicFormEnterURLPlaceholder": "URL を入力する",
@@ -388,18 +389,18 @@ define([], () => {
"ModernTaxonomyPickerNoResultsFound": "結果が見つかりませんでした",
"ModernTaxonomyPickerSuggestionInLabel": "インチ",
- "ModernAudioPlay": "Play",
- "ModernAudioPause": "Pause",
- "ModernAudioIncVol": "Increase Volume",
- "ModernAudioDecVol": "Decrease Volume",
- "ModernAudioMute": "Mute",
+ "ModernAudioPlay": "再生",
+ "ModernAudioPause": "一時停止",
+ "ModernAudioIncVol": "音量を上げる",
+ "ModernAudioDecVol": "音量を下げる",
+ "ModernAudioMute": "消音",
- "ProgressStepsIndicatorNoSteps": "No steps",
+ "ProgressStepsIndicatorNoSteps": "ステップなし",
- "UploadFilesButtonLabel": "Add",
- "UpLoadFilesDeleteButtonLabel": "Delete",
- "UpLoadFilesDragDropLabel": "Drag and Drop files or select Add File button",
- "UpLoadFilesSelectAllLabel": "Select all",
- "UploadFilesUploadButtonLabel": "Upload",
+ "UploadFilesButtonLabel": "追加",
+ "UpLoadFilesDeleteButtonLabel": "削除",
+ "UpLoadFilesDragDropLabel": "ファイルをドラッグアンドドロップするか追加ボタンをクリックしてください",
+ "UpLoadFilesSelectAllLabel": "すべて選択",
+ "UploadFilesUploadButtonLabel": "アップロード",
};
});
diff --git a/src/loc/lt-lt.ts b/src/loc/lt-lt.ts
index 30dd26c20..5a996cf33 100644
--- a/src/loc/lt-lt.ts
+++ b/src/loc/lt-lt.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Laukų rinkinys tuščias!",
"InvalidUrlError": "Pateiktas URL neleistinas",
"CollectionDataSearch": "Ieškoti",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "komandų įkėlimas",
"MyTeamsMessageError": "Įkeliant komandas kažkas negerai, bandykite vėliau arba atnaujinkite naršyklę",
"MyTeamsNoTeamsMessage": "Jūs neturite jokių komandų",
diff --git a/src/loc/lv-lv.ts b/src/loc/lv-lv.ts
index 99f814d7a..ad9eca083 100644
--- a/src/loc/lv-lv.ts
+++ b/src/loc/lv-lv.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Lauku kolekcija ir tukša!",
"InvalidUrlError": "Sniegtais URL nav derīgs",
"CollectionDataSearch": "Meklēt",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "darba grupu ielāde",
"MyTeamsMessageError": "Ielādējot darba grupas, radās kļūda, lūdzu, mēģiniet vēlāk vai atsvaidziniet pārlūkprogrammu",
"MyTeamsNoTeamsMessage": "Jums nav nevienas komandas",
diff --git a/src/loc/mystrings.d.ts b/src/loc/mystrings.d.ts
index c390bd064..f9e9d524b 100644
--- a/src/loc/mystrings.d.ts
+++ b/src/loc/mystrings.d.ts
@@ -356,6 +356,7 @@ declare interface IControlStrings {
CollectionDataItemMissingFields: string;
InvalidUrlError: string;
CollectionDataSearch: string;
+ CollectionDataMinimumUsersDefaultMessage: string
ViewMore: string;
@@ -398,6 +399,8 @@ declare interface IControlStrings {
//TermSetNavigationb Control
TermSetNavigationNoTerms: string;
TermSertNaviagtionErrorMessage: string;
+
+ HoverReactionBarSearchEmojiPlaceholder: string;
}
declare interface IDateTimeStrings {
diff --git a/src/loc/nb-no.ts b/src/loc/nb-no.ts
index 87fcb47a3..f59db8baa 100644
--- a/src/loc/nb-no.ts
+++ b/src/loc/nb-no.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Feltsamlingen er tom.",
"InvalidUrlError": "Den angitte URL-adressen er ikke gyldig",
"CollectionDataSearch": "Søk",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "laste inn teamene dine",
"MyTeamsMessageError": "Noe gikk galt mens du lastet inn teamene dine, prøv senere eller oppdater nettleseren",
"MyTeamsNoTeamsMessage": "Du har ingen team",
diff --git a/src/loc/nl-nl.ts b/src/loc/nl-nl.ts
index d45a67361..6863f8d8e 100644
--- a/src/loc/nl-nl.ts
+++ b/src/loc/nl-nl.ts
@@ -294,7 +294,7 @@ define([], () => {
"SharingField": "Delen",
"SharingPrivate": "Privé",
"SharingShared": "Gedeelde",
- "SiteLinkLabel": "Ligging",
+ "SiteLinkLabel": "Site",
"SizeOptionAll": "Alle",
"SizeOptionExtraLarge": "Extra grote",
"SizeOptionLarge": "Grote",
@@ -342,6 +342,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Veldenverzameling is leeg!",
"InvalidUrlError": "De opgegeven URL is ongeldig",
"CollectionDataSearch": "Zoeken",
+ "CollectionDataMinimumUsersDefaultMessage": "Selecter minimaal {0} personen",
"MyTeamsLoadingMessage": "laden van uw teams",
"MyTeamsMessageError": "Er is iets misgegaan tijdens het laden van uw teams, probeer het later of vernieuw de browser",
"MyTeamsNoTeamsMessage": "Je hebt geen teams.",
diff --git a/src/loc/pl-pl.ts b/src/loc/pl-pl.ts
index 1b9e49f79..c668f568c 100644
--- a/src/loc/pl-pl.ts
+++ b/src/loc/pl-pl.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Kolekcja Fields jest pusta!",
"InvalidUrlError": "Podany adres URL jest nieprawidłowy",
"CollectionDataSearch": "Szukać",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "ładowanie zespołów",
"MyTeamsMessageError": "Coś poszło nie tak podczas ładowania zespołów, spróbuj później lub odśwież przeglądarkę",
"MyTeamsNoTeamsMessage": "Nie masz żadnych zespołów",
diff --git a/src/loc/pt-br.ts b/src/loc/pt-br.ts
index d92259aa1..d28b24555 100644
--- a/src/loc/pt-br.ts
+++ b/src/loc/pt-br.ts
@@ -342,6 +342,7 @@ define([], () => {
CollectionDataItemMissingFields: "A coleção de campos está vazia!",
InvalidUrlError: "O URL fornecido não é válido",
CollectionDataSearch: "Procurar",
+ CollectionDataMinimumUsersDefaultMessage: "Minimum number of users to be selected is {0}",
MyTeamsLoadingMessage: "carregando as suas equipas",
MyTeamsMessageError: "Algo correu mal ao carregar as suas equipas, por favor, tente mais tarde ou atualize o navegador",
MyTeamsNoTeamsMessage: "De momento não tem nenhuma equipa",
diff --git a/src/loc/pt-pt.ts b/src/loc/pt-pt.ts
index f924ce8f7..e48fa53a7 100644
--- a/src/loc/pt-pt.ts
+++ b/src/loc/pt-pt.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "A coleção de campos está vazia!",
"InvalidUrlError": "O URL fornecido não é válido",
"CollectionDataSearch": "Pesquisar",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "carregando as suas equipas",
"MyTeamsMessageError": "Algo correu mal ao carregar as suas equipas, por favor, tente mais tarde ou atualize o navegador",
"MyTeamsNoTeamsMessage": "De momento não tem nenhuma equipa",
diff --git a/src/loc/ro-ro.ts b/src/loc/ro-ro.ts
index 9ff7cbb43..d3be25630 100644
--- a/src/loc/ro-ro.ts
+++ b/src/loc/ro-ro.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Colecția de câmpuri este goală!",
"InvalidUrlError": "ADRESA URL furnizată nu este validă",
"CollectionDataSearch": "Căutare",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "încărcarea echipelor",
"MyTeamsMessageError": "Ceva nu a mers bine în timp ce vă încărcați echipele, încercați mai târziu sau reîmprospătați browserul",
"MyTeamsNoTeamsMessage": "Nu ai echipe",
diff --git a/src/loc/ru-ru.ts b/src/loc/ru-ru.ts
index 3bf9a69c7..290ec45fd 100644
--- a/src/loc/ru-ru.ts
+++ b/src/loc/ru-ru.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Коллекция полей пуста!",
"InvalidUrlError": "Недопустимый указанный URL-адрес",
"CollectionDataSearch": "Искать",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "загрузка команд",
"MyTeamsMessageError": "Что-то пошло не так при загрузке ваших команд, пожалуйста, попробуйте позже или обновите браузер",
"MyTeamsNoTeamsMessage": "У вас нет команд",
diff --git a/src/loc/sk-sk.ts b/src/loc/sk-sk.ts
index 7d63fad4c..77c7f203c 100644
--- a/src/loc/sk-sk.ts
+++ b/src/loc/sk-sk.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Zbierka polí je prázdna!",
"InvalidUrlError": "Zadaná adresa URL nie je platná",
"CollectionDataSearch": "Hľadať",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "načítanie tímov",
"MyTeamsMessageError": "Pri načítavaní tímov sa niečo pokazilo, skúste to neskôr alebo obnovte prehliadač",
"MyTeamsNoTeamsMessage": "Nemáte žiadne tímy.",
diff --git a/src/loc/sr-latn-rs.ts b/src/loc/sr-latn-rs.ts
index 5c08bc58c..569508203 100644
--- a/src/loc/sr-latn-rs.ts
+++ b/src/loc/sr-latn-rs.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Kolekcija polja je prazna!",
"InvalidUrlError": "Navedena URL adresa nije važeća",
"CollectionDataSearch": "Pretrage",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "učitavanje vaših timova",
"MyTeamsMessageError": "Ako je nešto pošlo naopako prilikom učitavanja vaših timova, pokušajte kasnije ili osvežite pregledač",
"MyTeamsNoTeamsMessage": "Nemaš timove",
diff --git a/src/loc/sv-se.ts b/src/loc/sv-se.ts
index 9b86d84d6..6d3880e5a 100644
--- a/src/loc/sv-se.ts
+++ b/src/loc/sv-se.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Fältsamlingen är tom!",
"InvalidUrlError": "Den angivna webbadressen är inte giltig",
"CollectionDataSearch": "Sök",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "Läser in dina team",
"MyTeamsMessageError": "Något gick fel när dina teams lästes in, försök senare eller uppdatera webbläsaren",
"MyTeamsNoTeamsMessage": "Du har inga team.",
diff --git a/src/loc/tr-tr.ts b/src/loc/tr-tr.ts
index bf40a39ba..d19bb08c5 100644
--- a/src/loc/tr-tr.ts
+++ b/src/loc/tr-tr.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Alanlar koleksiyonu boş!",
"InvalidUrlError": "Sağlanan URL geçerli değil",
"CollectionDataSearch": "Aramak",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "ekiplerinizi yükleme",
"MyTeamsMessageError": "Ekiplerinizi yüklerken bir şeyler ters gitti, lütfen daha sonra deneyin veya tarayıcıyı yenileyin",
"MyTeamsNoTeamsMessage": "Hiç takımın yok.",
diff --git a/src/loc/vi-vn.ts b/src/loc/vi-vn.ts
index 2e0688ca7..6c9ca5905 100644
--- a/src/loc/vi-vn.ts
+++ b/src/loc/vi-vn.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "Bộ sưu tập trường trống!",
"InvalidUrlError": "URL được cung cấp không hợp lệ",
"CollectionDataSearch": "Tìm kiếm",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "tải nhóm của bạn",
"MyTeamsMessageError": "Có gì đó không ổn trong khi tải nhóm của bạn, vui lòng thử sau hoặc làm mới trình duyệt",
"MyTeamsNoTeamsMessage": "Bạn không có bất kỳ đội nào",
diff --git a/src/loc/zh-cn.ts b/src/loc/zh-cn.ts
index 5d8a3c4ad..f20ddcfaa 100644
--- a/src/loc/zh-cn.ts
+++ b/src/loc/zh-cn.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "字段集合是空的！",
"InvalidUrlError": "提供的 URL 无效",
"CollectionDataSearch": "搜索",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "加载您的团队",
"MyTeamsMessageError": "加载团队时出了问题，请稍后尝试或刷新浏览器",
"MyTeamsNoTeamsMessage": "你没有任何团队",
diff --git a/src/loc/zh-tw.ts b/src/loc/zh-tw.ts
index 9d10f883c..ddf418773 100644
--- a/src/loc/zh-tw.ts
+++ b/src/loc/zh-tw.ts
@@ -344,6 +344,7 @@ define([], () => {
"CollectionDataItemMissingFields": "欄位集合是空的！",
"InvalidUrlError": "提供的 URL 無效",
"CollectionDataSearch": "搜索",
+ "CollectionDataMinimumUsersDefaultMessage": "Minimum number of users to be selected is {0}",
"MyTeamsLoadingMessage": "載入您的團隊",
"MyTeamsMessageError": "載入團隊時出了問題，請稍後嘗試或刷新瀏覽器",
"MyTeamsNoTeamsMessage": "你沒有任何團隊",
diff --git a/src/services/FilesSearchService.ts b/src/services/FilesSearchService.ts
index 93e00daa2..9b13ed445 100644
--- a/src/services/FilesSearchService.ts
+++ b/src/services/FilesSearchService.ts
@@ -1,7 +1,7 @@
import { BaseComponentContext } from '@microsoft/sp-component-base';
import { SPHttpClient, HttpClientResponse } from "@microsoft/sp-http";
import { ISearchResult, BingQuerySearchParams, IRecentFile } from "./FilesSearchService.types";
-import { find } from "office-ui-fabric-react/lib/Utilities";
+import { find } from "@fluentui/react/lib/Utilities";
import { GeneralHelper } from "../common/utilities/GeneralHelper";
import type { IBingSearchResult } from '../controls/filePicker/WebSearchTab/IBingSearchResult';
import { getSiteWebInfo } from './SPSitesService';
diff --git a/src/services/ISPService.ts b/src/services/ISPService.ts
index 8a86e11d7..3feacc1f5 100644
--- a/src/services/ISPService.ts
+++ b/src/services/ISPService.ts
@@ -1,4 +1,5 @@
-import { ISPContentType, ISPField, ISPLists } from "../common/SPEntities";
+import { ISPContentType, ISPField, ISPLists, ISPViews } from "../common/SPEntities";
+import {orderBy } from '../controls/viewPicker/IViewPicker';
export enum LibsOrderBy {
Id = 1,
@@ -63,4 +64,10 @@ export interface ISPService {
* @param options Options used to order and filter during the API query.
*/
getContentTypes(options?: IContentTypesOptions): Promise
{/* Change the list Id and list item id before you start to test this control */}
- { console.log('Cancelled'); }} onSubmitted={async (listItem) => { let itemdata = await listItem.get(); console.log(itemdata["ID"]); }}>
+ { console.log('Cancelled'); }}
+ onSubmitted={async (_listItemData, listItem) => { const itemdata = await listItem.get(); console.log(itemdata["ID"]); }}>
+
{/* Change the list Id and list item id before you start to test this control */}
{/* This DynamicForm display a dialog message when validation fails */}
- { console.log('Cancelled'); }} onSubmitted={async (listItem) => { let itemdata = await listItem.get(); console.log(itemdata["ID"]); }} validationErrorDialogProps={{ showDialogOnValidationError: true }}>
+ { console.log('Cancelled'); }}
+ onSubmitted={async (_listItemData, listItem) => { const itemdata = await listItem.get(); console.log(itemdata["ID"]); }}
+ validationErrorDialogProps={{ showDialogOnValidationError: true }}>
+
@@ -1478,7 +1508,8 @@ export default class ControlsTest extends React.Component {
@@ -1678,6 +1709,31 @@ export default class ControlsTest extends React.Component
+
+
+
+
+ List Item Comments Tester
+
+
+
+
View picker tester:
+
+ Field picker tester:
{ console.log(value); }}
+ manageBtnLabel={"Manage"}
+ onChanged={(value) => { console.log(value); }}
panelHeader={"Manage values"}
enableSorting={true}
panelProps={{ type: PanelType.custom, customWidth: "98vw" }}
@@ -2015,8 +2072,26 @@ export default class ControlsTest extends React.Component
@@ -2610,7 +2685,20 @@ export default class ControlsTest extends React.Component {
let result = [];
for (let i = 1; i < 16; i++) {
- result.push({ "Field1": `String${i}`, "Field2": i, "Field3": "https://pnp.github.io/", "Field4": true });
+
+ const sampleDate = new Date();
+ sampleDate.setDate(sampleDate.getDate() + i);
+
+ result.push({
+ "Field1": `String${i}`,
+ "Field2": i,
+ "Field3": "https://pnp.github.io/",
+ "Field4": true,
+ "Field5": null,
+ "Field6": {key: "choice 1", text: "choice 1"},
+ "Field7": [{key: "choice 1", text: "choice 1"}, {key: "choice 2", text: "choice 2"}],
+ "Field8": sampleDate
+ });
}
return result;
}
@@ -2690,7 +2778,8 @@ export default class ControlsTest extends React.Component {
const theme = useTheme();
@@ -11,21 +27,62 @@ export const ControlsTestEnhancedThemeProviderFunctionComponent = () => {
{ alert("onConfigure"); }} />
- Fluent Link
+ {
+ alert("onConfigure");
+ }}
+ />
+
+ Fluent Link
+
Action Button
PrimaryButton
DefaultButton
- CompoundButton
-
+ CompoundButton
+
+
- {theme =>
+ {(theme) => (
-
- }
+ )}
);
}
diff --git a/src/webparts/controlsTest/components/IControlsTestState.ts b/src/webparts/controlsTest/components/IControlsTestState.ts
index ed636cf9f..ece07cad9 100644
--- a/src/webparts/controlsTest/components/IControlsTestState.ts
+++ b/src/webparts/controlsTest/components/IControlsTestState.ts
@@ -1,7 +1,7 @@
import { ImageSize } from "../../../FileTypeIcon";
import { IProgressAction } from "../../../Progress";
import { IFilePickerResult } from "../../../FilePicker";
-import { ITag } from "office-ui-fabric-react";
+import { ITag } from "@fluentui/react";
import { ITermInfo, ITermSetInfo, ITermStoreInfo } from "@pnp/sp/taxonomy";
export interface IControlsTestState {
@@ -60,6 +60,7 @@ export interface IControlsTestState {
isSecurityTrimmedControlDivVisible: boolean;
isSitePickerDivVisible: boolean;
isListPickerDivVisible: boolean;
+ isListItemCommentsDivVisible: boolean;
isFieldPickerDivVisible: boolean;
isIconPickerDivVisible: boolean;
isComboBoxListItemPickerDivVisible: boolean;
@@ -89,4 +90,5 @@ export interface IControlsTestState {
isUploadFilesDivVisible: boolean;
toggleAll: boolean;
showAllFilters: boolean;
+ isViewPickerDivVisible: boolean;
}
diff --git a/src/webparts/controlsTest/components/TestControl.tsx b/src/webparts/controlsTest/components/TestControl.tsx
index 375c8f60e..76de970df 100644
--- a/src/webparts/controlsTest/components/TestControl.tsx
+++ b/src/webparts/controlsTest/components/TestControl.tsx
@@ -1,10 +1,49 @@
import * as React from 'react';
-import { Stack } from '@fluentui/react';
-import { TermStore } from '@microsoft/microsoft-graph-types';
+import {
+ Button,
+ FluentProvider,
+ makeStyles,
+ shorthands,
+ Theme,
+ Title3,
+} from '@fluentui/react-components';
+import { createV9Theme } from '@fluentui/react-migration-v8-v9';
+import { Icon } from '@iconify/react';
import { WebPartContext } from '@microsoft/sp-webpart-base';
-import { TermSetNavigation } from '../../../TermSetNavigation';
+import { HoverReactionsBar } from '../../../controls/HoverReactionsBar';
+import {
+ RenderEmoji,
+} from '../../../controls/HoverReactionsBar/components/reactionPicker/RenderEmoji';
+import {
+ IEmojiInfo,
+} from '../../../controls/HoverReactionsBar/models/IFluentEmoji';
+
+const useStyles = makeStyles({
+ root: {
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ justifyContent: "center",
+ ...shorthands.gap("10px"),
+ marginLeft: "50%",
+ marginRight: "50%",
+ height: "fit-content",
+ width: "fit-content",
+ },
+ image: {
+ width: "20px",
+ height: "20px",
+ },
+ title: {
+ marginBottom: "30px",
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "center",
+ alignItems: "center",
+ },
+});
export interface ITestControlProps {
context: WebPartContext;
@@ -15,44 +54,52 @@ export const TestControl: React.FunctionComponent = (
props: React.PropsWithChildren
) => {
const { themeVariant, context } = props;
+ const [isOpenHoverReactionBar, setIsOpenHoverReactionBar] = React.useState(false);
+ const [selectedEmoji, setSelectedEmoji] = React.useState();
+ const divRefAddReaction = React.useRef(null);
+ const styles = useStyles();
- const onSelect = React.useCallback((selected: TermStore.Term) => {
- console.log(selected);
- }, []);
+ const setTheme = React.useCallback((): Partial => {
+ return createV9Theme(themeVariant);
+ }, [themeVariant]);
- const onSelectedTermAction = React.useCallback((selected: TermStore.Term, option:string) => {
- console.log(selected, option);
+ const onSelectEmoji = React.useCallback(async (emoji: string, emojiInfo: IEmojiInfo) => {
+ setSelectedEmoji(emojiInfo);
+ setIsOpenHoverReactionBar(false);
}, []);
-
return (
<>
-
-
+
+ {
+ setIsOpenHoverReactionBar(false);
+ }}
+ target={divRefAddReaction.current as HTMLDivElement}
+ />
+
+
);
};
diff --git a/tsconfig.json b/tsconfig.json
index 911317433..0823a94af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
{
- "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
+ "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
Title H1
Title H2
Title H3
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis malesuada elit, in accumsan erat vehicula nec. Donec molestie eu quam vel pulvinar. Proin eu est a felis hendrerit sodales. Quisque non consequat sapien. Donec at neque libero. In vel ante nec ex sagittis consectetur. Ut euismod nunc sed ullamcorper tincidunt. Morbi justo dolor, rutrum vehicula urna quis, tempor pulvinar ligula. Sed quis gravida mi. In fermentum augue rhoncus odio lacinia pharetra. Aliquam elementum mollis nibh, rutrum iaculis tortor.
-+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis + malesuada elit, in accumsan erat vehicula nec. Donec molestie eu quam + vel pulvinar. Proin eu est a felis hendrerit sodales. Quisque non + consequat sapien. Donec at neque libero. In vel ante nec ex sagittis + consectetur. Ut euismod nunc sed ullamcorper tincidunt. Morbi justo + dolor, rutrum vehicula urna quis, tempor pulvinar ligula. Sed quis + gravida mi. In fermentum augue rhoncus odio lacinia pharetra. Aliquam + elementum mollis nibh, rutrum iaculis tortor. +
+
+ Test Control - HoverReactionsBar
+
+
+
+
+