Skip to content

Commit b5cab9c

Browse files
joaojmendesjoaojmendes
authored
New Control ProgressStepsIndicator (pnp#1322)
* New COntrol ProgressStepsIndicator * Update New COntrol * fixes ProgressStepsIndicator * code refrator ProgressStepsIndicator * update coderefractor ProgressStepsIndicator * code refractor
1 parent 61b22b9 commit b5cab9c

File tree

14 files changed

+338
-32
lines changed

14 files changed

+338
-32
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
- `DynamicForm`: Add taxonomy tree to test harness [#1269](https://github.com/pnp/sp-dev-fx-controls-react/pull/1269)
88
- `ModernTaxonomyPicker`: ability to disallow selecting children [#1279](https://github.com/pnp/sp-dev-fx-controls-react/pull/1279)
99
- `PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273)
10-
- `DynamicForm`: Allow to hide fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307)
1110
- `DynamicForm`: Support for hidden fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307/)
11+
- `Placeholder`: Documentation example to only display in edit mode [#1280](https://github.com/pnp/sp-dev-fx-controls-react/issues/1280)
12+
- `DynamicForm`: Update documentation regarding onBeforeSubmit [#1319](https://github.com/pnp/sp-dev-fx-controls-react/issues/1319)
1213

1314
### Fixes
1415

@@ -18,10 +19,11 @@
1819
- `RichText`: Fix broken arrow icons [#1302](https://github.com/pnp/sp-dev-fx-controls-react/pull/1302)
1920
- `TaxonomyPicker`: Does not show term set labels in Version 3.10.0 [#1299](https://github.com/pnp/sp-dev-fx-controls-react/issues/1299)
2021
- `TaxonomyPicker`: Dynamic form select term not working [#1303](https://github.com/pnp/sp-dev-fx-controls-react/issues/1303)
22+
- `DynamicForm`: Check if hiddenfields property is undefined [#1314](https://github.com/pnp/sp-dev-fx-controls-react/pull/1314)
2123

2224
### Contributors
2325

24-
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).
26+
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).
2527

2628
## 3.10.0
2729

‎docs/documentation/docs/about/release-notes.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
- `DynamicForm`: Add taxonomy tree to test harness [#1269](https://github.com/pnp/sp-dev-fx-controls-react/pull/1269)
88
- `ModernTaxonomyPicker`: ability to disallow selecting children [#1279](https://github.com/pnp/sp-dev-fx-controls-react/pull/1279)
99
- `PeoplePicker`: Use webAbsoluteUrl if provided through props to ensure user [#1273](https://github.com/pnp/sp-dev-fx-controls-react/issues/1273)
10-
- `DynamicForm`: Allow to hide fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307)
1110
- `DynamicForm`: Support for hidden fields [#1307](https://github.com/pnp/sp-dev-fx-controls-react/pull/1307/)
11+
- `Placeholder`: Documentation example to only display in edit mode [#1280](https://github.com/pnp/sp-dev-fx-controls-react/issues/1280)
12+
- `DynamicForm`: Update documentation regarding onBeforeSubmit [#1319](https://github.com/pnp/sp-dev-fx-controls-react/issues/1319)
1213

1314
### Fixes
1415

@@ -18,10 +19,11 @@
1819
- `RichText`: Fix broken arrow icons [#1302](https://github.com/pnp/sp-dev-fx-controls-react/pull/1302)
1920
- `TaxonomyPicker`: Does not show term set labels in Version 3.10.0 [#1299](https://github.com/pnp/sp-dev-fx-controls-react/issues/1299)
2021
- `TaxonomyPicker`: Dynamic form select term not working [#1303](https://github.com/pnp/sp-dev-fx-controls-react/issues/1303)
22+
- `DynamicForm`: Check if hiddenfields property is undefined [#1314](https://github.com/pnp/sp-dev-fx-controls-react/pull/1314)
2123

2224
### Contributors
2325

24-
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).
26+
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).
2527

2628
## 3.10.0
2729

‎docs/documentation/docs/controls/ProgressStepsIndicator.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Progress Steps Indicator
2+
3+
This control shows a progress of steps.
4+
5+
Here is an example of the control in action:
6+
7+
![ProgressStepsIndicator](../assets/ProgressStepsIndicator.png)
8+
9+
10+
11+
## How to use this control in your solutions
12+
13+
- 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.
14+
- In your component file, import the `ProgressStepsIndicator` control as follows:
15+
16+
```TypeScript
17+
import { ProgressStepsIndicator } from '"@pnp/spfx-controls-react/lib/ProgressStepsIndicator';
18+
19+
const progressSteps: IStep[] = [
20+
{ id: 0, title: "Step 1", description: "Step 1 Description" },
21+
{ id: 1, title: "Step 2", description: "Step 2 Description" },
22+
{ id: 3, title: "Step 3", description: "Step 3 Description" },
23+
{ id: 4, title: "Step 4", description: "Step 4 Description" },
24+
{ id: 5, title: "Step 5", description: "Step 5 Description" },
25+
{ id: 6, title: "Step 6", description: "Step 6 Description" },
26+
];
27+
```
28+
29+
- Use the `ProgressStepsIndicator` control in your code as follows:
30+
31+
```TypeScript
32+
{
33+
<ProgressStepsIndicator steps={progressSteps} currentStep={0} themeVariant={props.themeVariant} />
34+
}
35+
```
36+
37+
38+
## Implementation
39+
40+
The `ProgressStepsIndicator` control can be configured with the following properties:
41+
42+
| Property | Type | Required | Description | Default |
43+
| ---- | ---- | ---- | ---- | ---- |
44+
| steps | ISteps[] | yes | Perogress Steps | |
45+
| currentStep | number | yes | index of current step | default is 0|
46+
| themeVariant | IReadonlyTheme | undefined | no | Theme | |
47+
48+
The `IStep Interface` definition:
49+
50+
```TypeScript
51+
Interface IStep {
52+
id?:number;
53+
title:string;
54+
description:string;
55+
}
56+
```
57+
58+
59+
60+
61+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ProgressStepsIndicator)

‎package-lock.json

Lines changed: 24 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/ProgressStepsIndicator.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './controls/ProgressStepsIndicator';

‎src/controls/ProgressStepsIndicator/IProgressStepsIndicatorProps.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { IReadonlyTheme } from '@microsoft/sp-component-base';
2+
3+
import { IStep } from './IStep';
4+
5+
export interface IProgressStepsIndicatorProps {
6+
steps:IStep[];
7+
currentStep?:number;
8+
themeVariant?: IReadonlyTheme | undefined;
9+
}

‎src/controls/ProgressStepsIndicator/IStep.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface IStep {
2+
id?:number;
3+
title:string;
4+
description:string;
5+
}

‎src/controls/ProgressStepsIndicator/ProgressStepsIndicator.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import * as React from 'react';
2+
3+
import * as strings from 'ControlStrings';
4+
import {
5+
Customizer,
6+
} from 'office-ui-fabric-react/lib/Utilities';
7+
8+
import {
9+
Stack,
10+
} from 'office-ui-fabric-react/lib/Stack';
11+
import {
12+
Icon,
13+
} from 'office-ui-fabric-react/lib/Icon';
14+
15+
import {
16+
Label,
17+
} from 'office-ui-fabric-react/lib/Label';
18+
import {
19+
MessageBarType,
20+
MessageBar,
21+
} from 'office-ui-fabric-react/lib/MessageBar';
22+
23+
import { IProgressStepsIndicatorProps } from './IProgressStepsIndicatorProps';
24+
import {
25+
getProgressStepsIndicatorStyles,
26+
} from './ProgressStepsIndicatorStyles';
27+
28+
export const ProgressStepsIndicator: React.FunctionComponent<IProgressStepsIndicatorProps> = (
29+
props: IProgressStepsIndicatorProps
30+
) => {
31+
const [renderSteps, setRenderSteps] = React.useState<JSX.Element[]>([]);
32+
const [renderStepsTitle, setRenderStepsTitle] = React.useState<JSX.Element[]>([]);
33+
const { steps, currentStep, themeVariant } = props;
34+
const {
35+
labelStepTitleCurrentStyle,
36+
labelStepTitleStyle,
37+
labelStepStyles,
38+
stackStepsStyles,
39+
componentClasses,
40+
} = getProgressStepsIndicatorStyles(themeVariant, currentStep, steps.length);
41+
42+
React.useEffect(() => {
43+
(() => {
44+
const _renderSteps: JSX.Element[] = [];
45+
const _renderStepTitle: JSX.Element[] = [];
46+
47+
const _currentStep: number = currentStep ? currentStep : 0;
48+
if (steps && steps.length) {
49+
steps.map((step, i) => {
50+
if (_currentStep > i) {
51+
_renderSteps.push(
52+
<Stack key={`${i}`} horizontal>
53+
<div className={componentClasses.bulletCompleted}>
54+
<Icon iconName={"CheckMark"} />
55+
</div>
56+
</Stack>
57+
);
58+
59+
_renderStepTitle.push(
60+
<Label key={`${i}`} styles={labelStepTitleStyle}>
61+
{step.title}
62+
</Label>
63+
);
64+
}
65+
66+
if (_currentStep === i) {
67+
_renderSteps.push(
68+
<Stack key={`${i}`} horizontal>
69+
<div key={`${i}`} className={componentClasses.bulletCurrent}>
70+
<Label styles={labelStepStyles}>{i + 1}</Label>
71+
</div>
72+
</Stack>
73+
);
74+
_renderStepTitle.push(
75+
<Label key={`${i}`} styles={labelStepTitleCurrentStyle}>
76+
{step.title}
77+
</Label>
78+
);
79+
}
80+
if (_currentStep < i) {
81+
_renderSteps.push(
82+
<div key={`${i}`} className={componentClasses.bullet}>
83+
<Label styles={labelStepStyles}>{i + 1}</Label>
84+
</div>
85+
);
86+
_renderStepTitle.push(
87+
<Label key={`${i}`} styles={labelStepTitleStyle}>
88+
{step.title}
89+
</Label>
90+
);
91+
}
92+
});
93+
}
94+
setRenderSteps(_renderSteps);
95+
setRenderStepsTitle(_renderStepTitle);
96+
})();
97+
}, [steps, currentStep]);
98+
99+
if (steps && steps.length === 0) {
100+
return <MessageBar messageBarType={MessageBarType.info}>{strings.ProgressStepsIndicatorNoSteps}</MessageBar>;
101+
}
102+
103+
return (
104+
<Customizer settings={{ theme: props.themeVariant }}>
105+
<Stack styles={stackStepsStyles}>
106+
<div className={componentClasses.line} />
107+
<Stack horizontal horizontalAlign="space-between">
108+
{renderSteps}
109+
</Stack>
110+
</Stack>
111+
<Stack horizontal horizontalAlign="space-between" styles={{ root: { marginTop: "7px !important" } }}>
112+
{renderStepsTitle}
113+
</Stack>
114+
</Customizer>
115+
);
116+
};

0 commit comments

Comments
 (0)