-
Notifications
You must be signed in to change notification settings - Fork 380
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #278 from SharePoint/dev
Merge for 1.13.0
- Loading branch information
Showing
80 changed files
with
8,225 additions
and
2,653 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| # DateTimePicker control | ||
|
|
||
| This control allows you to select dates from a calendar and optionally the time of day using dropdown controls. You can configure the control to use 12 or 24-hour clock. | ||
|
|
||
| Here are some examples of the control: | ||
|
|
||
| **DateTime Picker 12-hour clock** | ||
|  | ||
|
|
||
| **DateTime Picker 24-hour clock** | ||
|  | ||
|
|
||
| **DateTime Picker Date Only** | ||
|  | ||
|
|
||
| ## How to use this control in your solutions | ||
|
|
||
| - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency. | ||
| - Import the control into your component. The DateConvention and TimeConvention controls if the time of day controls are shown and the time format used (12 hours/24 hours). | ||
|
|
||
| ```TypeScript | ||
| import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/dateTimePicker'; | ||
| ``` | ||
| - Use the `DateTimePicker` control in your code as follows, either as an uncontrolled or a controlled component: | ||
|
|
||
| ```TypeScript | ||
| // Uncontrolled | ||
| <DateTimePicker label="DateTime Picker - 12h" | ||
| dateConvention={DateConvention.DateTime} | ||
| timeConvention={TimeConvention.Hours12} /> | ||
|
|
||
| // Controlled | ||
| <DateTimePicker label="DateTime Picker - 24h" | ||
| dateConvention={DateConvention.DateTime} | ||
| timeConvention={TimeConvention.Hours24} | ||
| value={this.state.date} | ||
| onChange={this.handleChange} /> | ||
| ``` | ||
|
|
||
| ## Implementation | ||
|
|
||
| The `DateTimePicker` control can be configured with the following properties: | ||
|
|
||
|
|
||
| | Property | Type | Required | Description | | ||
| | ---- | ---- | ---- | ---- | | ||
| | label | string | no | Property field label displayed on top. | | ||
| | disabled | boolean | no | Specifies if the control is disabled or not. | | ||
| | formatDate | function | no | Defines a formatDate function that can override the output value in Date picker. | | ||
| | dateConvention | DateConvention | no | Defines the date convention to use. The default is date and time.| | ||
| | timeConvention | TimeConvention | no | Defines the time convention to use. The default value is the 24-hour clock convention. | | ||
| | firstDayOfWeek | DayOfWeek | no | Specify the first day of the week for your locale. | | ||
| | key | string | no | A unique key that indicates the identity of this control | | ||
| | onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. | | ||
| | showGoToToday | boolean | no | Controls whether the "Go to today" link should be shown or not | | ||
| | isMonthPickerVisible | boolean | no | Controls whether the month picker is shown beside the day picker or hidden. | | ||
| | showMonthPickerAsOverlay | boolean | no | Show month picker on top of date picker when visible. | | ||
| | showWeekNumbers | boolean | no | Controls whether the calendar should show the week number (weeks 1 to 53) before each week row | | ||
| | strings | IDatePickerStrings | no | Localized strings to use in the DateTimePicker | | ||
| | value | Date | no | Default value of the DatePicker, if any | | ||
| | onChange | function | no | Callback issued when date or time is changed | | ||
| | showSeconds | boolean | no | Specifies, if seconds dropdown should be shown, defaults to false. | | ||
|
|
||
| Enum `DateConvention` | ||
|
|
||
| | Name | Description | | ||
| | ---- | ---- | | ||
| | DateTime | Shows the date and time picker | | ||
| | Date | Shows only the date picker | | ||
|
|
||
| Enum `TimeConvention` | ||
|
|
||
| | Name | Description | | ||
| | ---- | ---- | | ||
| | Hours12 | Specify the hours in 12-hours (AM / PM) time convention. | | ||
| | Hours24 | Specify the hours in 24-hours time convention. | | ||
|
|
||
| Interface `IDateTimePickerStrings` extends [IDatePickerStrings](https://developer.microsoft.com/en-us/fabric#/components/datepicker) | ||
|
|
||
| | Property | Type | Required | Description | | ||
| | ---- | ---- | ---- | ---- | | ||
| | dateLabel | string | no | Label for the date selector. | | ||
| | timeLabel | string | no | Label for the time of day selector. | | ||
| | timeSeparator | string | no | Separator between time of day components (hours, minutes, seconds). | | ||
| | amDesignator | string | no | Used as AM designator when 12-hour clock is used. | | ||
| | pmDesignator | string | no | Used as PM designator when 12-hour clock is used. | | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| # Progress control | ||
|
|
||
| This control shows progress of multiple SEQUENTIALLY executed actions. | ||
|
|
||
| Here is an example of the control in action: | ||
|
|
||
|  | ||
|
|
||
| ## How to use this control in your solutions | ||
|
|
||
| - Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency. | ||
| - Import the following modules to your component: | ||
|
|
||
| ```TypeScript | ||
| import { Progress } from "@pnp/spfx-controls-react/lib/Progress"; | ||
| ``` | ||
|
|
||
| - Use the `Progress` control in your code as follows: | ||
|
|
||
| ```TypeScript | ||
| <Progress title={'Progress Test'} | ||
| showOverallProgress={true} | ||
| showIndeterminateOverallProgress={false} | ||
| hideNotStartedActions={false} | ||
| actions={this.state.progressActions} | ||
| currentActionIndex={this.state.currentProgressActionIndex} | ||
| longRunningText={'This operation takes longer than expected'} | ||
| longRunningTextDisplayDelay={7000} | ||
| height={'350px'} /> | ||
| ``` | ||
|
|
||
| **Note**: the control itself is not responsible for actions' execution. It only renders the actions, overall progress and actions' execution states. | ||
| When using the control, you should implement actions execution. | ||
| As example, you can have a base class that implements `IProgressAction` interface and has an `execute` method: | ||
|
|
||
| ```TypeScript | ||
| class BaseAction implements IProgressAction { | ||
| public get title(): string { ... } | ||
| public get subActionsTitles(): string[] { ... } | ||
| public get hasError(): boolean { ... } | ||
| public get errorMessage(): string { ... } | ||
| public async execute(): Promise<void> { ... } | ||
| } | ||
| ``` | ||
|
|
||
| Then, you have multiple actions derived from the base one: | ||
|
|
||
| ```TypeScript | ||
| class FirstAction extends BaseAction { | ||
| public async execute(): Promise<void> { | ||
| // implementation for FirstAction | ||
| } | ||
| } | ||
|
|
||
| class SecondAction extends BaseAction { | ||
| public async execute(): Promise<void> { | ||
| // implementation for SecondAction | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Now, in a component, where `Progress` is used you can have code as below: | ||
|
|
||
| ```TypeScript | ||
| export interface IYourComponentState { | ||
| actions: IProgressAction[]; | ||
| currentActionIndex?: number; | ||
| // other state properties | ||
| } | ||
|
|
||
| // ... | ||
|
|
||
| export class YourComponent extends React.Component<IYourComponentProps, IYourComponentState> { | ||
| // all other code, including render with Progress reference listed above | ||
|
|
||
| private _initActions() { | ||
| this.setState({ | ||
| actions: [ | ||
| new FirstAction(), | ||
| new SecondAction() | ||
| ] | ||
| }); | ||
| } | ||
|
|
||
| private async _execute() { | ||
| for (let i = 0; i <= this.state.actions.length; i++) { | ||
| this.setState(currentActionIndex: i); | ||
|
|
||
| if (i < this.state.actions.length) { | ||
| await this.state.actions[i].execute(); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Implementation | ||
|
|
||
| The `Progress` component can be configured with the following properties: | ||
|
|
||
| | Property | Type | Required | Description | | ||
| | ---- | ---- | ---- | ---- | | ||
| | title | string | no | Title, or header, of the progress. | | ||
| | showOverallProgress | boolean | true | Specifies if overall progress indicator should be shown. | | ||
| | showIndeterminateOverallProgress | boolean | no | Specifies if indeterminate overall progress animation will be shown. | | ||
| | hideNotStartedActions | boolean | yes | Specifies if not started actions should not be rendered. | | ||
| | actions | IProgressAction[] | yes | Progress actions | | ||
| | currentActionIndex | number | no | Index of currently executing action | | ||
| | heigth | string | no | Height of the component | | ||
| | longRunningText | string | no | Text to be displayed for long running operations | | ||
| | longRunningTextDisplayDelay | number | no | Delay until longRunningText is displayed im milliseconds. If not set or 0 longRunningText is displayed right away. | | ||
| | className | string | no | Class name to be applied to the component | | ||
| | headerClassName | string | no | Header class name. Header contains title, progress indicator, and delay text | | ||
| | actionsContainerClassName | string | no | Actions container class name | | ||
| | actionClassName | string | no | Single action class name | | ||
| | successIconName | string | no | Success icon name. Default is CheckMark | | ||
| | errorIconName | string | no | Error icon name. Default is Error | | ||
| | inProgressIconName | string | no | InProgress icon name. Default is '', spinner is displayed. | | ||
|
|
||
|  |
Oops, something went wrong.