From 0fc71b390c3baabf5b20ae689d3475255b9c4959 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Fri, 23 Sep 2022 14:29:03 +0100 Subject: [PATCH 1/8] New COntrol ProgressStepsIndicator --- .../docs/controls/ProgressStepsIndicator.md | 61 ++++++++++ package-lock.json | 48 ++++---- src/ProgressStepsIndicator.ts | 1 + .../IProgressStepsIndicatorProps.ts | 9 ++ src/controls/ProgressStepsIndicator/IStep.ts | 5 + .../ProgressStepsIndicator.tsx | 106 ++++++++++++++++++ .../ProgressStepsIndicatorStyles.ts | 96 ++++++++++++++++ src/controls/ProgressStepsIndicator/index.ts | 3 + src/loc/en-us.ts | 3 +- src/loc/mystrings.d.ts | 1 + src/loc/pt-pt.ts | 4 +- tsconfig.json | 2 +- 12 files changed, 312 insertions(+), 27 deletions(-) create mode 100644 docs/documentation/docs/controls/ProgressStepsIndicator.md create mode 100644 src/ProgressStepsIndicator.ts create mode 100755 src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts create mode 100755 src/controls/ProgressStepsIndicator/IStep.ts create mode 100755 src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx create mode 100755 src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts create mode 100755 src/controls/ProgressStepsIndicator/index.ts diff --git a/docs/documentation/docs/controls/ProgressStepsIndicator.md b/docs/documentation/docs/controls/ProgressStepsIndicator.md new file mode 100644 index 000000000..a2aad31fb --- /dev/null +++ b/docs/documentation/docs/controls/ProgressStepsIndicator.md @@ -0,0 +1,61 @@ +# Progress Steps Indicator + +This control shows a progress of steps. + +Here is an example of the control in action: + +![ProgressStepsIndicator](../assets/ProgressStepsIndicator.png) + + + +## 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 `Accordion` control as follows: + +```TypeScript +import { ProgressStepsIndicator } from '"@pnp/spfx-controls-react/lib/ProgressStepsIndicator'; + +const progressSteps: IStep[] = [ + { id: 0, title: "Step 1", description: "Step 1 Description" }, + { id: 1, title: "Step 2", description: "Step 2 Description" }, + { id: 3, title: "Step 3", description: "Step 3 Description" }, + { id: 4, title: "Step 4", description: "Step 4 Description" }, + { id: 5, title: "Step 5", description: "Step 5 Description" }, + { id: 6, title: "Step 6", description: "Step 6 Description" }, +]; +``` + +- Use the `ProgressStepsIndicator` control in your code as follows: + +```TypeScript +{ + +} +``` + + +## Implementation + +The `ProgressStepsIndicator` control can be configured with the following properties: + +| Property | Type | Required | Description | Default | +| ---- | ---- | ---- | ---- | ---- | +| steps | ISteps[] | yes | Perogress Steps | | +| currentStep | number | yes | index of current step | default is 0| +| themeVariant | IReadonlyTheme | undefined | no | Theme | | + + The `IStep Interface` definition: + +```TypeScript +Interface IStep { + id?:number; + title:string; + description:string; +} +``` + + + + +![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ProgressStepsIndicator) diff --git a/package-lock.json b/package-lock.json index fea742762..8f9dd63e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2517,15 +2517,6 @@ } } }, - "@microsoft/microsoft-graph-clientV3": { - "version": "npm:@microsoft/microsoft-graph-client@3.0.2", - "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz", - "integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==", - "requires": { - "@babel/runtime": "^7.12.5", - "tslib": "^2.2.0" - } - }, "@microsoft/microsoft-graph-types": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-2.24.0.tgz", @@ -3226,6 +3217,30 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" } } + }, + "@microsoft/microsoft-graph-clientV3": { + "version": "npm:@microsoft/microsoft-graph-client@3.0.2", + "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz", + "integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==", + "requires": { + "@babel/runtime": "^7.12.5", + "tslib": "^2.2.0" + } + }, + "msalLegacy": { + "version": "npm:msal@1.4.12", + "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", + "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", + "requires": { + "tslib": "^1.9.3" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } } } }, @@ -17623,21 +17638,6 @@ } } }, - "msalLegacy": { - "version": "npm:msal@1.4.12", - "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz", - "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==", - "requires": { - "tslib": "^1.9.3" - }, - "dependencies": { - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - } - } - }, "mu2": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/mu2/-/mu2-0.5.21.tgz", diff --git a/src/ProgressStepsIndicator.ts b/src/ProgressStepsIndicator.ts new file mode 100644 index 000000000..670cb973b --- /dev/null +++ b/src/ProgressStepsIndicator.ts @@ -0,0 +1 @@ +export * from './controls/ProgressStepsIndicator'; diff --git a/src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts b/src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts new file mode 100755 index 000000000..e7b16e923 --- /dev/null +++ b/src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts @@ -0,0 +1,9 @@ +import { IReadonlyTheme } from '@microsoft/sp-component-base'; + +import { IStep } from './IStep'; + +export interface IProgressStepsIndicatorProps { + steps?:IStep[]; + currentStep?:number; + themeVariant?: IReadonlyTheme | undefined; +} diff --git a/src/controls/ProgressStepsIndicator/IStep.ts b/src/controls/ProgressStepsIndicator/IStep.ts new file mode 100755 index 000000000..5a624121b --- /dev/null +++ b/src/controls/ProgressStepsIndicator/IStep.ts @@ -0,0 +1,5 @@ +export interface IStep { + id?:number; + title:string; + description:string; +} diff --git a/src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx b/src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx new file mode 100755 index 000000000..b65d38e1f --- /dev/null +++ b/src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx @@ -0,0 +1,106 @@ +import * as React from 'react'; + +import * as strings from 'ControlStrings'; +import { + Customizer, + Icon, + Label, + MessageBar, + MessageBarType, + Stack, +} from 'office-ui-fabric-react'; + +import { IProgressStepsIndicatorProps } from './IProgressStepsIndicatorProps'; +import { + getProgressStepsIndicatorStyles, +} from './ProgressStepsIndicatorStyles'; + +export const ProgressStepsIndicator: React.FunctionComponent = ( + props: IProgressStepsIndicatorProps +) => { + const [renderSteps, setRenderSteps] = React.useState([]); + const [renderStepsTitle, setRenderStepsTitle] = React.useState([]); + const { steps, currentStep, themeVariant } = props; + const { + labelStepTitleCurrentStyle, + labelStepTitleStyle, + labelStepStyles, + stackStepsStyles, + componentClasses, + } = getProgressStepsIndicatorStyles(themeVariant, currentStep, steps.length); + + React.useEffect(() => { + (() => { + const _renderSteps: JSX.Element[] = []; + const _renderStepTitle: JSX.Element[] = []; + + const _currentStep: number = currentStep ? currentStep : 0; + if (steps && steps.length) { + steps.map((step, i) => { + if (_currentStep > i) { + _renderSteps.push( + +
+ +
+ + ); + + _renderStepTitle.push( + + ); + } + + if (_currentStep === i) { + _renderSteps.push( + +
+ +
+ + ); + _renderStepTitle.push( + + ); + } + if (_currentStep < i) { + _renderSteps.push( +
+ +
+ ); + _renderStepTitle.push( + + ); + } + }); + } + setRenderSteps(_renderSteps); + setRenderStepsTitle(_renderStepTitle); + })(); + }, [steps, currentStep]); + + if (steps && steps.length === 0) { + return {strings.ProgressStepsIndicatorNoSteps}; + } + + return ( + + +
+ + {renderSteps} + + + + {renderStepsTitle} + + + ); +}; diff --git a/src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts b/src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts new file mode 100755 index 000000000..37dbdd138 --- /dev/null +++ b/src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts @@ -0,0 +1,96 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { + ILabelStyles, + IStackStyles, + IStyle, + mergeStyleSets, +} from 'office-ui-fabric-react'; + +import { IReadonlyTheme } from '@microsoft/sp-component-base'; + +export const getProgressStepsIndicatorStyles = (themeVariant: IReadonlyTheme, currentStep?:number, totalSteps?:number ) => { + + const labelStepTitleCurrentStyle: ILabelStyles = { + root: { + fontWeight: 700, + width: 150, + textAlign: "center", + }, + }; + + const labelStepTitleStyle: ILabelStyles = { + root: { + width: 150, + textAlign: "center", + }, + }; + + const labelStepStyles: ILabelStyles = { + root: { + fontWeight: 400, + }, + }; + + const stackStepsStyles: IStackStyles = { + root: { marginLeft: 50, marginRight: 50 }, + }; + + const componentClasses = mergeStyleSets({ + bulletCurrent: { + borderStyle: "solid", + borderWidth: 2, + borderColor: themeVariant?.palette?.themePrimary, + width: 34, + height: 34, + borderRadius: "50%", + display: "flex", + justifyContent: "center", + horizontalAlign: "center", + zIndex: 111, + backgroundColor: themeVariant?.palette?.neutralLighter, + fontSize: 16, + alignItems: "center", + }, + bulletCompleted: { + cursor: "default", + width: 34, + height: 34, + borderRadius: "50%", + display: "flex", + justifyContent: "center", + horizontalAlign: "center", + zIndex: 111, + backgroundColor: themeVariant?.palette?.themePrimary, + color: themeVariant?.palette?.themeLighter, + fontSize: 16, + alignItems: "center", + }, + bullet: { + borderColor: themeVariant?.palette?.neutralTertiaryAlt, + borderStyle: "solid", + borderWidth: 2, + width: 34, + height: 34, + borderRadius: "50%", + display: "flex", + justifyContent: "center", + alignItems: "center", + horizontalAlign: "center", + verticalAlign: "center", + backgroundColor: themeVariant?.palette?.neutralLight, + fontSize: 16, + zIndex: 111, + }, + line: { + height: 2, + backgroundColor: themeVariant?.palette?.neutralQuaternaryAlt, + width: "100%", + position: "relative", + top: 17, + zIndex: 0, + } as IStyle, + + }); + + return {labelStepTitleCurrentStyle,stackStepsStyles,labelStepStyles, labelStepTitleStyle,componentClasses}; +}; diff --git a/src/controls/ProgressStepsIndicator/index.ts b/src/controls/ProgressStepsIndicator/index.ts new file mode 100755 index 000000000..ed1aaecbe --- /dev/null +++ b/src/controls/ProgressStepsIndicator/index.ts @@ -0,0 +1,3 @@ +export * from './ProgressStepsIndicator'; +export { IProgressStepsIndicatorProps } from './IProgressStepsIndicatorProps'; +export { IStep } from './IStep'; diff --git a/src/loc/en-us.ts b/src/loc/en-us.ts index 98cb66466..e27d2d501 100644 --- a/src/loc/en-us.ts +++ b/src/loc/en-us.ts @@ -404,6 +404,7 @@ define([], () => { ModernAudioPause: "Pause", ModernAudioIncVol: "Increase Volume", ModernAudioDecVol: "Decrease Volume", - ModernAudioMute: "Mute" + ModernAudioMute: "Mute", + ProgressStepsIndicatorNoSteps: "No steps", }; }); diff --git a/src/loc/mystrings.d.ts b/src/loc/mystrings.d.ts index 9f7ecf2bf..ec3c804f0 100644 --- a/src/loc/mystrings.d.ts +++ b/src/loc/mystrings.d.ts @@ -1,4 +1,5 @@ declare interface IControlStrings { + ProgressStepsIndicatorNoSteps:string; ListItemCommentsLabel: string; ListItemCommentsNoCommentsLabel: string; ListItemCommentDIalogDeleteSubText: string; diff --git a/src/loc/pt-pt.ts b/src/loc/pt-pt.ts index 7998168db..7c06dbd0a 100644 --- a/src/loc/pt-pt.ts +++ b/src/loc/pt-pt.ts @@ -378,6 +378,8 @@ define([], () => { "ModernTaxonomyPickerRemoveButtonText": "Remover", "ModernTaxonomyPickerPanelCloseButtonText": "Fechar", "ModernTaxonomyPickerNoResultsFound": "Nenhum resultado encontrado", - "ModernTaxonomyPickerSuggestionInLabel": "Em" + "ModernTaxonomyPickerSuggestionInLabel": "Em", + "ProgressStepsIndicatorNoSteps": "Nenhuma etapa definida", + }; }); diff --git a/tsconfig.json b/tsconfig.json index d2448d864..68624e1f0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -33,5 +33,5 @@ "include": [ "src/**/*.ts", "src/**/*.tsx" - ],"exclude": ["**/node_modules", "**/dist", "**/lib"], +, "src/ProgressIndicatorts" ],"exclude": ["**/node_modules", "**/dist", "**/lib"], } From 890a3dfd5bdca5e5d7280162b2174e97666dfd73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Fri, 23 Sep 2022 14:29:31 +0100 Subject: [PATCH 2/8] Update New COntrol --- CHANGELOG.md | 6 ++++-- docs/documentation/docs/about/release-notes.md | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89589d1e7..3c030e78b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,9 @@ - `DynamicForm`: Add taxonomy tree to test harness [#1269](https://github.com/pnp/sp-dev-fx-controls-react/pull/1269) - `ModernTaxonomyPicker`: ability to disallow selecting children [#1279](https://github.com/pnp/sp-dev-fx-controls-react/pull/1279) - `PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273) -- `DynamicForm`: Allow to hide fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307) - `DynamicForm`: Support for hidden fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307/) +- `Placeholder`: Documentation example to only display in edit mode [#1280](https://github.com/pnp/sp-dev-fx-controls-react/issues/1280) +- `DynamicForm`: Update documentation regarding onBeforeSubmit [#1319](https://github.com/pnp/sp-dev-fx-controls-react/issues/1319) ### Fixes @@ -18,10 +19,11 @@ - `RichText`: Fix broken arrow icons [#1302](https://github.com/pnp/sp-dev-fx-controls-react/pull/1302) - `TaxonomyPicker`: Does not show term set labels in Version 3.10.0 [#1299](https://github.com/pnp/sp-dev-fx-controls-react/issues/1299) - `TaxonomyPicker`: Dynamic form select term not working [#1303](https://github.com/pnp/sp-dev-fx-controls-react/issues/1303) +- `DynamicForm`: Check if hiddenfields property is undefined [#1314](https://github.com/pnp/sp-dev-fx-controls-react/pull/1314) ### Contributors -Special thanks to our contributors (in alphabetical order): [Chad Eiserloh](https://github.com/c-eiser13), [Hilton Giesenow](https://github.com/HiltonGiesenow), [Jake Stanger](https://github.com/JakeStanger), [Josef Benda](https://github.com/SmarterJB), [Mark Bice](https://github.com/mbice), [Paolo Pialorsi](https://github.com/PaoloPia), [Victor Romanov](https://github.com/VRomanovTau). +Special thanks to our contributors (in alphabetical order): [Chad Eiserloh](https://github.com/c-eiser13), [Hilton Giesenow](https://github.com/HiltonGiesenow), [Jake Stanger](https://github.com/JakeStanger), [Jasey Waegebaert](https://github.com/Jwaegebaert), [Josef Benda](https://github.com/SmarterJB), [Mark Bice](https://github.com/mbice), [Paolo Pialorsi](https://github.com/PaoloPia), [Victor Romanov](https://github.com/VRomanovTau). ## 3.10.0 diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index 89589d1e7..3c030e78b 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -7,8 +7,9 @@ - `DynamicForm`: Add taxonomy tree to test harness [#1269](https://github.com/pnp/sp-dev-fx-controls-react/pull/1269) - `ModernTaxonomyPicker`: ability to disallow selecting children [#1279](https://github.com/pnp/sp-dev-fx-controls-react/pull/1279) - `PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273) -- `DynamicForm`: Allow to hide fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307) - `DynamicForm`: Support for hidden fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307/) +- `Placeholder`: Documentation example to only display in edit mode [#1280](https://github.com/pnp/sp-dev-fx-controls-react/issues/1280) +- `DynamicForm`: Update documentation regarding onBeforeSubmit [#1319](https://github.com/pnp/sp-dev-fx-controls-react/issues/1319) ### Fixes @@ -18,10 +19,11 @@ - `RichText`: Fix broken arrow icons [#1302](https://github.com/pnp/sp-dev-fx-controls-react/pull/1302) - `TaxonomyPicker`: Does not show term set labels in Version 3.10.0 [#1299](https://github.com/pnp/sp-dev-fx-controls-react/issues/1299) - `TaxonomyPicker`: Dynamic form select term not working [#1303](https://github.com/pnp/sp-dev-fx-controls-react/issues/1303) +- `DynamicForm`: Check if hiddenfields property is undefined [#1314](https://github.com/pnp/sp-dev-fx-controls-react/pull/1314) ### Contributors -Special thanks to our contributors (in alphabetical order): [Chad Eiserloh](https://github.com/c-eiser13), [Hilton Giesenow](https://github.com/HiltonGiesenow), [Jake Stanger](https://github.com/JakeStanger), [Josef Benda](https://github.com/SmarterJB), [Mark Bice](https://github.com/mbice), [Paolo Pialorsi](https://github.com/PaoloPia), [Victor Romanov](https://github.com/VRomanovTau). +Special thanks to our contributors (in alphabetical order): [Chad Eiserloh](https://github.com/c-eiser13), [Hilton Giesenow](https://github.com/HiltonGiesenow), [Jake Stanger](https://github.com/JakeStanger), [Jasey Waegebaert](https://github.com/Jwaegebaert), [Josef Benda](https://github.com/SmarterJB), [Mark Bice](https://github.com/mbice), [Paolo Pialorsi](https://github.com/PaoloPia), [Victor Romanov](https://github.com/VRomanovTau). ## 3.10.0 From 25e374be80a3169d4bcdbbacab093b087e071e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Sun, 25 Sep 2022 17:52:12 +0100 Subject: [PATCH 3/8] fixes ProgressStepsIndicator --- tsconfig.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 68624e1f0..1199bff4b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,6 +32,5 @@ }, "include": [ "src/**/*.ts", - "src/**/*.tsx" -, "src/ProgressIndicatorts" ],"exclude": ["**/node_modules", "**/dist", "**/lib"], + "src/**/*.tsx"] } From 87597f4807b3ea5e3ce603a7b0f335ca1aed9328 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Sun, 25 Sep 2022 17:52:41 +0100 Subject: [PATCH 4/8] code refrator ProgressStepsIndicator --- .../IProgressStepsIndicatorProps.ts | 2 +- .../ProgressStepsIndicator.tsx | 16 +++++++++++++--- .../ProgressStepsIndicatorStyles.ts | 14 +++++++++++--- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts b/src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts index e7b16e923..cc06c2b1b 100755 --- a/src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts +++ b/src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts @@ -3,7 +3,7 @@ import { IReadonlyTheme } from '@microsoft/sp-component-base'; import { IStep } from './IStep'; export interface IProgressStepsIndicatorProps { - steps?:IStep[]; + steps:IStep[]; currentStep?:number; themeVariant?: IReadonlyTheme | undefined; } diff --git a/src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx b/src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx index b65d38e1f..17e7270f6 100755 --- a/src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx +++ b/src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx @@ -3,12 +3,22 @@ import * as React from 'react'; import * as strings from 'ControlStrings'; import { Customizer, +} from 'office-ui-fabric-react/lib/Utilities'; + +import { + Stack, +} from 'office-ui-fabric-react/lib/Stack'; +import { Icon, +} from 'office-ui-fabric-react/lib/Icon'; + +import { Label, - MessageBar, +} from 'office-ui-fabric-react/lib/Label'; +import { MessageBarType, - Stack, -} from 'office-ui-fabric-react'; + MessageBar, +} from 'office-ui-fabric-react/lib/MessageBar'; import { IProgressStepsIndicatorProps } from './IProgressStepsIndicatorProps'; import { diff --git a/src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts b/src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts index 37dbdd138..cbc81c14e 100755 --- a/src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts +++ b/src/controls/ProgressStepsIndicator/ProgressStepsIndicatorStyles.ts @@ -1,10 +1,18 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ import { ILabelStyles, + +} from 'office-ui-fabric-react/lib/Label'; +import { IStackStyles, - IStyle, - mergeStyleSets, -} from 'office-ui-fabric-react'; + +} from 'office-ui-fabric-react/lib/Stack'; + +import { + IStyle, mergeStyleSets, + +} from 'office-ui-fabric-react/lib/Styling'; import { IReadonlyTheme } from '@microsoft/sp-component-base'; From a56a3fc436091877e22a7ab9a7757597ddbcf467 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Mon, 26 Sep 2022 10:20:16 +0100 Subject: [PATCH 5/8] update coderefractor ProgressStepsIndicator --- docs/documentation/docs/controls/ProgressStepsIndicator.md | 2 +- tsconfig.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/documentation/docs/controls/ProgressStepsIndicator.md b/docs/documentation/docs/controls/ProgressStepsIndicator.md index a2aad31fb..856c5c582 100644 --- a/docs/documentation/docs/controls/ProgressStepsIndicator.md +++ b/docs/documentation/docs/controls/ProgressStepsIndicator.md @@ -11,7 +11,7 @@ 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. -- In your component file, import the `Accordion` control as follows: +- In your component file, import the `ProgressStepsIndicator` control as follows: ```TypeScript import { ProgressStepsIndicator } from '"@pnp/spfx-controls-react/lib/ProgressStepsIndicator'; diff --git a/tsconfig.json b/tsconfig.json index 68624e1f0..00806eccd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -33,5 +33,5 @@ "include": [ "src/**/*.ts", "src/**/*.tsx" -, "src/ProgressIndicatorts" ],"exclude": ["**/node_modules", "**/dist", "**/lib"], + ] } From eaaa729aa48973e5e41002139ecd3a78fd5ba2a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Mon, 26 Sep 2022 10:23:36 +0100 Subject: [PATCH 6/8] code refractor --- tsconfig.json | 5 ----- 1 file changed, 5 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 9017a3ca4..1199bff4b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,10 +32,5 @@ }, "include": [ "src/**/*.ts", -<<<<<<< HEAD - "src/**/*.tsx" - ] -======= "src/**/*.tsx"] ->>>>>>> 87597f4807b3ea5e3ce603a7b0f335ca1aed9328 } From 7864c52a7ef6dc2bf298dfef9c97e720fc462bed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Sat, 10 Dec 2022 14:40:36 +0000 Subject: [PATCH 7/8] changes on SitePicker add Styles property --- src/controls/sitePicker/ISitePicker.ts | 3 +++ src/controls/sitePicker/SitePicker.tsx | 35 ++++++++++++++++++++------ 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/controls/sitePicker/ISitePicker.ts b/src/controls/sitePicker/ISitePicker.ts index 26b2e271c..d2abfab28 100644 --- a/src/controls/sitePicker/ISitePicker.ts +++ b/src/controls/sitePicker/ISitePicker.ts @@ -1,3 +1,5 @@ +import { IDropdownStyles } from 'office-ui-fabric-react'; + import { BaseComponentContext } from '@microsoft/sp-component-base'; export interface ISite { @@ -112,4 +114,5 @@ export interface ISitePickerProps { * Applicable if mode is set to site or web. */ additionalQuery?: string; + styles?:IDropdownStyles; } diff --git a/src/controls/sitePicker/SitePicker.tsx b/src/controls/sitePicker/SitePicker.tsx index 9f50d5df2..2766eef97 100644 --- a/src/controls/sitePicker/SitePicker.tsx +++ b/src/controls/sitePicker/SitePicker.tsx @@ -1,17 +1,34 @@ -import { Async } from '@uifabric/utilities/lib/Async'; +import * as React from 'react'; + import findIndex from 'lodash/findIndex'; import orderBy from 'lodash/orderBy'; -import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; +import { + Dropdown, + IDropdownOption, +} from 'office-ui-fabric-react/lib/Dropdown'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; -import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner'; +import { + Spinner, + SpinnerSize, +} from 'office-ui-fabric-react/lib/Spinner'; import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling'; -import { ISelectableOption, SelectableOptionMenuItemType } from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types'; -import * as React from 'react'; +import { + ISelectableOption, + SelectableOptionMenuItemType, +} from 'office-ui-fabric-react/lib/utilities/selectableOption/SelectableOption.types'; + +import { Async } from '@uifabric/utilities/lib/Async'; import * as telemetry from '../../common/telemetry'; import { toRelativeUrl } from '../../common/utilities/GeneralHelper'; -import { getAllSites, getHubSites } from '../../services/SPSitesService'; -import { ISite, ISitePickerProps } from './ISitePicker'; +import { + getAllSites, + getHubSites, +} from '../../services/SPSitesService'; +import { + ISite, + ISitePickerProps, +} from './ISitePicker'; const styles = mergeStyleSets({ loadingSpinnerContainer: { @@ -73,7 +90,8 @@ export const SitePicker: React.FunctionComponent = (props: Rea className, selectedSites, trimDuplicates, - additionalQuery + additionalQuery, + styles } = props; const [isLoading, setIsLoading] = React.useState(); @@ -283,6 +301,7 @@ export const SitePicker: React.FunctionComponent = (props: Rea onChange={onSelectionChange} notifyOnReselect={true} className={className} + styles={styles} /> ); From f920d113619d4a7c3e63a62c126752777912175c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Tue, 13 Dec 2022 22:37:47 +0000 Subject: [PATCH 8/8] commit changes SitePicker --- package.json | 2 +- src/controls/sitePicker/ISitePicker.ts | 4 ++++ src/controls/sitePicker/SitePicker.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a033d99de..239bf2c8c 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "@types/react-dom": "17.0.17", "@types/react-addons-shallow-compare": "0.14.17", "@types/react-addons-test-utils": "0.14.15", - "@types/react-addons-update": "0.14.14", + "@types/react-addons-update": "0.14.21", "@types/react-mentions": "^4.1.3", "@types/sinon": "2.3.4", "@types/webpack-env": "~1.15.2", diff --git a/src/controls/sitePicker/ISitePicker.ts b/src/controls/sitePicker/ISitePicker.ts index ce105e858..ad1d45c45 100644 --- a/src/controls/sitePicker/ISitePicker.ts +++ b/src/controls/sitePicker/ISitePicker.ts @@ -1,3 +1,5 @@ +import { IDropdownStyles } from 'office-ui-fabric-react'; + import { BaseComponentContext } from '@microsoft/sp-component-base'; import { ISite } from '../../services/SPSitesService'; @@ -96,4 +98,6 @@ export interface ISitePickerProps { * If mode is set to associatedsites and no hubsiteId is provided, the current site's hub ID will be used. */ hubsiteId?: string; + styles?: IDropdownStyles ; } +export { ISite }; diff --git a/src/controls/sitePicker/SitePicker.tsx b/src/controls/sitePicker/SitePicker.tsx index cbfcde2ad..c2b06c7b5 100644 --- a/src/controls/sitePicker/SitePicker.tsx +++ b/src/controls/sitePicker/SitePicker.tsx @@ -309,7 +309,7 @@ export const SitePicker: React.FunctionComponent = (props: Rea onChange={onSelectionChange} notifyOnReselect={true} className={className} - styles={styles} + styles={props.styles} /> );