-
Notifications
You must be signed in to change notification settings - Fork 379
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 #1157 from pnp/dev
v3.7.0
- Loading branch information
Showing
43 changed files
with
40,321 additions
and
5,170 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
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.
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,54 @@ | ||
| # Monaco Editor control | ||
|
|
||
| This control is a implementatiopn of Monaco Editor. | ||
|
|
||
| Here is an example of the control: | ||
|
|
||
|  | ||
|
|
||
| `MonacoEditor` dark theme: | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ## 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: | ||
|
|
||
| ```TypeScript | ||
| import { MonacoEditor } from "@pnp/spfx-controls-react/lib/MonacoEditor"; | ||
| ``` | ||
|
|
||
| - Use the `MonacoEditor` control in your code as follows: | ||
|
|
||
| ```TypeScript | ||
| <MonacoEditor value={defaultValue} | ||
| showMiniMap={true} | ||
| onValueChange={onValueChange} | ||
| language={"javascript"}/> | ||
| ``` | ||
|
|
||
| - The `onValueChange` change event returns the upadated code and array with messages of errors on validation and can be implemented as follows: | ||
| **this validation is done only to JSON language | ||
|
|
||
| ```TypeScript | ||
| const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []); | ||
| ``` | ||
|
|
||
| ## Implementation | ||
|
|
||
| The `MonacoEditor` control can be configured with the following properties: | ||
|
|
||
| | Property | Type | Required | Description | | ||
| | ---- | ---- | ---- | ---- | | ||
| | value | string | yes | default content for editor | | ||
| | theme | string | no | theme used by editor , two themes are supported 'vs' and 'vs-dark', default 'vs' | | ||
| | readOnly | boolean | no | indecate if editor is in read only mode | | ||
| | showLineNumbers | boolean | no | editor show linenumber or not, default : yes| | ||
| | onValueChange |(newValue:string, validationErrors:string[]) => void | no | function to get code changes, return an array with validation error in case of language is 'JSON' | | ||
| | language |string | yes | editor code language, please see https://microsoft.github.io/monaco-editor/index.html for supported languages| | ||
| | jsonDiagnosticsOptions |monaco.languages.json.DiagnosticsOptions | no | define options to JSON validation, please see https://microsoft.github.io/monaco-editor/index.html for more details | | ||
| | jscriptDiagnosticsOptions | monaco.languages.typescript.DiagnosticsOptions | no | define options to javascript or typescript validation, please see https://microsoft.github.io/monaco-editor/index.html for more details | | ||
|
|
||
|
|
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,80 @@ | ||
| # Variant Theme Provider | ||
|
|
||
| This control is a super set of the Theme Provider control, which not only allows you to pass the FluentUI Theme to the child controls, but also allows you to apply "variants" or generate a theme starting from the three basic colors, primary color, text color and color background. | ||
|
|
||
| The idea comes from the possibility of "highlighting" a Web Part in the page or section where it is contained. | ||
|
|
||
| By default, the SharePoint Modern Pages allow to change the set of colors which are then applied to all controls, but this can only be done at the site level (changing the site theme) or at the page section level (applying variations from the site theme). | ||
|
|
||
| With this control we have the possibility to apply the variants to the single Web Part or to a portion of it. | ||
|
|
||
| Here is an example of the control in action inside a Web Part: | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
| - In your component file, import the `VariantThemeProvider` control as follows: | ||
|
|
||
| ```TypeScript | ||
| import { VariantThemeProvider, VariantType, IThemeColors } from "@pnp/spfx-controls-react/lib/VariantThemeProvider"; | ||
| ``` | ||
|
|
||
| - Example on use the `VariantThemeProvider` control with the 'Neutral' variant on custom theme generated from the 'themeColors' property: | ||
|
|
||
| ```TSX | ||
| const customThemeColors: IThemeColors = { | ||
| primaryColor: "#0078d4", | ||
| textColor: "#323130", | ||
| backgroundColor: "#ffffff" | ||
| } | ||
| <VariantThemeProvider | ||
| themeColors={customThemeColors} | ||
| variantType={VariantType.Neutral}> | ||
| {/* Child controls */} | ||
| </VariantThemeProvider> | ||
| ``` | ||
|
|
||
| - Example on use the `VariantThemeProvider` control with the 'Strong' variant on theme passed with the from the 'theme' property: | ||
|
|
||
| ```TSX | ||
| <VariantThemeProvider | ||
| theme={theme} | ||
| variantType={VariantType.Strong}> | ||
| {/* Child controls */} | ||
| </VariantThemeProvider> | ||
| ``` | ||
|
|
||
| ## Implementation | ||
|
|
||
| The `VariantThemeProvider` control can be configured with the following properties (inherits all the properties present in the FluentUI ThemeProvider control): | ||
|
|
||
| | Property | Type | Required | Description | | ||
| | ---- | ---- | ---- | ---- | | ||
| | as | React.ElementType | no | A component that should be used as the root element of the ThemeProvider component. | | ||
| | ref | React.Ref<HTMLElement> | no | Optional ref to the root element. | | ||
| | theme | PartialTheme \| Theme | no | Defines the theme provided by the user. | | ||
| | renderer | StyleRenderer | no | Optional interface for registering dynamic styles. Defaults to using `merge-styles`. Use this to opt into a particular rendering implementation, such as `emotion`, `styled-components`, or `jss`. Note: performance will differ between all renders. Please measure your scenarios before using an alternative implementation. | | ||
| | applyTo | element \| body \| none | no | Defines where body-related theme is applied to. Setting to 'element' will apply body styles to the root element of this control. Setting to 'body' will apply body styles to document body. Setting to 'none' will not apply body styles to either element or body. | | ||
| | variantType | VariantType | no | Variant type to apply to the theme. | | ||
| | themeColors | IThemeColors | no | Object used to generate a new theme from colors. | | ||
|
|
||
| Interface `IThemeColors` | ||
|
|
||
| | Property | Type | Required | Description | | ||
| | ---- | ---- | ---- | ---- | | ||
| | primaryColor | string | yes | Primary Color of the theme. | | ||
| | textColor | string | yes | Text Color of the theme. | | ||
| | backgroundColor | string | yes | Background Color of the theme. | | ||
|
|
||
| Enum `VariantType` | ||
|
|
||
| | Type | Description | | ||
| | ---- | ---- | | ||
| | None | Apply the theme without variations. | | ||
| | Neutral | Apply the 'Neutral' variation to the theme. | | ||
| | Soft | Apply the 'Soft' variation to the theme. | | ||
| | Strong | Apply the 'Strong' variation to the theme. | | ||
|
|
||
|  |
Oops, something went wrong.