@fluentui/react-progress 0.0.0-nightly-20221007-1237.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +101 -0
- package/CHANGELOG.md +46 -0
- package/LICENSE +15 -0
- package/README.md +5 -0
- package/Spec.md +105 -0
- package/dist/index.d.ts +76 -0
- package/lib/Progress.js +2 -0
- package/lib/Progress.js.map +1 -0
- package/lib/components/Progress/Progress.js +15 -0
- package/lib/components/Progress/Progress.js.map +1 -0
- package/lib/components/Progress/Progress.types.js +2 -0
- package/lib/components/Progress/Progress.types.js.map +1 -0
- package/lib/components/Progress/index.js +6 -0
- package/lib/components/Progress/index.js.map +1 -0
- package/lib/components/Progress/renderProgress.js +16 -0
- package/lib/components/Progress/renderProgress.js.map +1 -0
- package/lib/components/Progress/useProgress.js +45 -0
- package/lib/components/Progress/useProgress.js.map +1 -0
- package/lib/components/Progress/useProgressStyles.js +124 -0
- package/lib/components/Progress/useProgressStyles.js.map +1 -0
- package/lib/index.js +2 -0
- package/lib/index.js.map +1 -0
- package/lib-commonjs/Progress.js +10 -0
- package/lib-commonjs/Progress.js.map +1 -0
- package/lib-commonjs/components/Progress/Progress.js +26 -0
- package/lib-commonjs/components/Progress/Progress.js.map +1 -0
- package/lib-commonjs/components/Progress/Progress.types.js +6 -0
- package/lib-commonjs/components/Progress/Progress.types.js.map +1 -0
- package/lib-commonjs/components/Progress/index.js +18 -0
- package/lib-commonjs/components/Progress/index.js.map +1 -0
- package/lib-commonjs/components/Progress/renderProgress.js +27 -0
- package/lib-commonjs/components/Progress/renderProgress.js.map +1 -0
- package/lib-commonjs/components/Progress/useProgress.js +55 -0
- package/lib-commonjs/components/Progress/useProgress.js.map +1 -0
- package/lib-commonjs/components/Progress/useProgressStyles.js +136 -0
- package/lib-commonjs/components/Progress/useProgressStyles.js.map +1 -0
- package/lib-commonjs/index.js +40 -0
- package/lib-commonjs/index.js.map +1 -0
- package/package.json +48 -0
package/CHANGELOG.json
ADDED
@@ -0,0 +1,101 @@
|
|
1
|
+
{
|
2
|
+
"name": "@fluentui/react-progress",
|
3
|
+
"entries": [
|
4
|
+
{
|
5
|
+
"date": "Fri, 07 Oct 2022 12:44:23 GMT",
|
6
|
+
"tag": "@fluentui/react-progress_v0.0.0-nightly-20221007-1237.1",
|
7
|
+
"version": "0.0.0-nightly-20221007-1237.1",
|
8
|
+
"comments": {
|
9
|
+
"prerelease": [
|
10
|
+
{
|
11
|
+
"author": "fluentui-internal@service.microsoft.com",
|
12
|
+
"package": "@fluentui/react-progress",
|
13
|
+
"commit": "not available",
|
14
|
+
"comment": "Release nightly v9"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "beachball",
|
18
|
+
"package": "@fluentui/react-progress",
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1237.1",
|
20
|
+
"commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-progress",
|
25
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1",
|
26
|
+
"commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-progress",
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1",
|
32
|
+
"commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-progress",
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1",
|
38
|
+
"commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
|
39
|
+
}
|
40
|
+
]
|
41
|
+
}
|
42
|
+
},
|
43
|
+
{
|
44
|
+
"date": "Tue, 20 Sep 2022 20:55:45 GMT",
|
45
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.0",
|
46
|
+
"version": "9.0.0-alpha.0",
|
47
|
+
"comments": {
|
48
|
+
"patch": [
|
49
|
+
{
|
50
|
+
"author": "beachball",
|
51
|
+
"package": "@fluentui/react-progress",
|
52
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
|
53
|
+
"commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
|
54
|
+
}
|
55
|
+
]
|
56
|
+
}
|
57
|
+
},
|
58
|
+
{
|
59
|
+
"date": "Thu, 15 Sep 2022 09:50:08 GMT",
|
60
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.0",
|
61
|
+
"version": "9.0.0-alpha.0",
|
62
|
+
"comments": {
|
63
|
+
"patch": [
|
64
|
+
{
|
65
|
+
"author": "beachball",
|
66
|
+
"package": "@fluentui/react-progress",
|
67
|
+
"comment": "Bump @fluentui/react-theme to v9.1.0",
|
68
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
69
|
+
},
|
70
|
+
{
|
71
|
+
"author": "beachball",
|
72
|
+
"package": "@fluentui/react-progress",
|
73
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.0",
|
74
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
75
|
+
},
|
76
|
+
{
|
77
|
+
"author": "beachball",
|
78
|
+
"package": "@fluentui/react-progress",
|
79
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
|
80
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
81
|
+
}
|
82
|
+
]
|
83
|
+
}
|
84
|
+
},
|
85
|
+
{
|
86
|
+
"date": "Wed, 03 Aug 2022 16:04:10 GMT",
|
87
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.0",
|
88
|
+
"version": "9.0.0-alpha.0",
|
89
|
+
"comments": {
|
90
|
+
"patch": [
|
91
|
+
{
|
92
|
+
"author": "beachball",
|
93
|
+
"package": "@fluentui/react-progress",
|
94
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
95
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
96
|
+
}
|
97
|
+
]
|
98
|
+
}
|
99
|
+
}
|
100
|
+
]
|
101
|
+
}
|
package/CHANGELOG.md
ADDED
@@ -0,0 +1,46 @@
|
|
1
|
+
# Change Log - @fluentui/react-progress
|
2
|
+
|
3
|
+
This log was last generated on Fri, 07 Oct 2022 12:44:23 GMT and should not be manually modified.
|
4
|
+
|
5
|
+
<!-- Start content -->
|
6
|
+
|
7
|
+
## [0.0.0-nightly-20221007-1237.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20221007-1237.1)
|
8
|
+
|
9
|
+
Fri, 07 Oct 2022 12:44:23 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v0.0.0-nightly-20221007-1237.1)
|
11
|
+
|
12
|
+
### Changes
|
13
|
+
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
|
16
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
|
19
|
+
|
20
|
+
## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.0)
|
21
|
+
|
22
|
+
Tue, 20 Sep 2022 20:55:45 GMT
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v9.0.0-alpha.0)
|
24
|
+
|
25
|
+
### Patches
|
26
|
+
|
27
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
|
28
|
+
|
29
|
+
## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.0)
|
30
|
+
|
31
|
+
Thu, 15 Sep 2022 09:50:08 GMT
|
32
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v9.0.0-alpha.0)
|
33
|
+
|
34
|
+
### Patches
|
35
|
+
|
36
|
+
- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
37
|
+
- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
38
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
39
|
+
|
40
|
+
## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.0)
|
41
|
+
|
42
|
+
Wed, 03 Aug 2022 16:04:10 GMT
|
43
|
+
|
44
|
+
### Patches
|
45
|
+
|
46
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
package/LICENSE
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
@fluentui/react-progress
|
2
|
+
|
3
|
+
Copyright (c) Microsoft Corporation
|
4
|
+
|
5
|
+
All rights reserved.
|
6
|
+
|
7
|
+
MIT License
|
8
|
+
|
9
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
14
|
+
|
15
|
+
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
|
package/README.md
ADDED
@@ -0,0 +1,5 @@
|
|
1
|
+
# @fluentui/react-progress
|
2
|
+
|
3
|
+
**React Progress components for [Fluent UI React](https://react.fluentui.dev/)**
|
4
|
+
|
5
|
+
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
|
package/Spec.md
ADDED
@@ -0,0 +1,105 @@
|
|
1
|
+
# @fluentui/react-progress Spec
|
2
|
+
|
3
|
+
## Background
|
4
|
+
|
5
|
+
The `Progress` component is used to display the current progress of an operation flow.
|
6
|
+
|
7
|
+
## Prior Art
|
8
|
+
|
9
|
+
### Open UI
|
10
|
+
|
11
|
+
| Library | Component Name | Spec Link | Notes |
|
12
|
+
| ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
|
13
|
+
| Ant Design | Progress | [Progress](https://ant.design/components/progress/) | Specifies the type, a combined progress component |
|
14
|
+
| Atlassian Design | Progress bar | [ProgressBar](https://atlassian.design/components/progress-bar/success-progress-bar/examples) | Defaults to determinate state, which turns green when value reaches 1. Has an indeterminate state |
|
15
|
+
| Bootstrap | Progress | [Progress](https://getbootstrap.com/docs/4.3/components/progress/) | Allows for multiple different animation styles on the same Progress bar |
|
16
|
+
| Carbon Design | Progress Indicator | [ProgressIndicator](https://react.carbondesignsystem.com/?path=/story/components-progressindicator--default) | Determinate Progress that has steps, similar to a Slider |
|
17
|
+
| Fast | Progress | [Progress](https://explore.fast.design/components/fast-progress) | Combined Progress and Spinner component, has a determinate and indeterminate state |
|
18
|
+
| Lightning Design System | Progress Bar | [ProgressBar](https://www.lightningdesignsystem.com/components/progress-bar/) | Has a vertical bar, only determinate, and can specify progress step |
|
19
|
+
| Semantic UI | Progress | [Progress](https://semantic-ui.com/modules/progress.html#indicating) | Allows for success and error states, default rounded edges. No indeterminate form |
|
20
|
+
|
21
|
+
### Comparison of v8 and v0
|
22
|
+
|
23
|
+
The existing components are:
|
24
|
+
|
25
|
+
- v8
|
26
|
+
- `ProgressIndicator`
|
27
|
+
- v0
|
28
|
+
|
29
|
+
## Sample Code
|
30
|
+
|
31
|
+
Basic example:
|
32
|
+
|
33
|
+
```jsx
|
34
|
+
import { Progress } from '@fluentui/react-progress';
|
35
|
+
|
36
|
+
function App() {
|
37
|
+
return <Progress thickness="large" label="Loading" />;
|
38
|
+
}
|
39
|
+
```
|
40
|
+
|
41
|
+
## Variants
|
42
|
+
|
43
|
+
- Indeterminate Progress
|
44
|
+
- The default Progress that animates indefinitely
|
45
|
+
- Determinate Progress
|
46
|
+
- The determinate form of the Progress component that incrementally loads from 0% to 100%
|
47
|
+
|
48
|
+
### Shape
|
49
|
+
|
50
|
+
The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point
|
51
|
+
|
52
|
+
## API
|
53
|
+
|
54
|
+
### Slots
|
55
|
+
|
56
|
+
- `root` - The root element of the Progress. The html element is a `div`
|
57
|
+
- `bar` - The div element that gets animated into a Progress bar. The html element is `div`
|
58
|
+
- `track` - The div element that functions as the track for the Progress bar. The html element is `div`
|
59
|
+
- `label` - The text shown above the Progress. The html element is a `span`
|
60
|
+
- `description` - The text shown below the Progress. The html element is a `span`
|
61
|
+
|
62
|
+
### Props
|
63
|
+
|
64
|
+
See API at [Progress.types.tsx](./src/components/Progress/Progress.types.ts).
|
65
|
+
|
66
|
+
## Structure
|
67
|
+
|
68
|
+
```html
|
69
|
+
<div class="fui-Progress">
|
70
|
+
<!-- Label for Progress -->
|
71
|
+
<span className="fui-Progress__label">Loading...</span>
|
72
|
+
<!-- Track for Progress -->
|
73
|
+
<div class="fui-Progress__track" />
|
74
|
+
<!-- Bar for Progress -->
|
75
|
+
<div class="fui-Progess__bar" />
|
76
|
+
<!-- Label for Progress description -->
|
77
|
+
<span className="fui-Progress__description">Loading Text</span>
|
78
|
+
</div>
|
79
|
+
```
|
80
|
+
|
81
|
+
## Migration
|
82
|
+
|
83
|
+
See [MIGRATION.md](./MIGRATION.md).
|
84
|
+
|
85
|
+
## Behaviors
|
86
|
+
|
87
|
+
### States
|
88
|
+
|
89
|
+
- **Display** - The Progress will use the following priority:
|
90
|
+
|
91
|
+
- Specifying the `percentComplete` from `0` to `1` will alter the Progress from indeterminate to determinate.
|
92
|
+
- The component also has `rtl` support and will animate the progress bar from right to left if set.
|
93
|
+
|
94
|
+
### Interaction
|
95
|
+
|
96
|
+
The Progress is non-interactive.
|
97
|
+
|
98
|
+
- **Keyboard** - Not keyboard focusable.
|
99
|
+
- **Mouse**
|
100
|
+
|
101
|
+
- Click: No action
|
102
|
+
|
103
|
+
- **Touch** - Nothing
|
104
|
+
|
105
|
+
## Accessibility
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,76 @@
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
4
|
+
import * as React_2 from 'react';
|
5
|
+
import type { Slot } from '@fluentui/react-utilities';
|
6
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
7
|
+
|
8
|
+
/**
|
9
|
+
* A progress bar shows the progression of a task.
|
10
|
+
*/
|
11
|
+
export declare const Progress: ForwardRefComponent<ProgressProps>;
|
12
|
+
|
13
|
+
export declare const progressClassNames: SlotClassNames<ProgressSlots>;
|
14
|
+
|
15
|
+
/**
|
16
|
+
* Progress Props
|
17
|
+
*/
|
18
|
+
export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
|
19
|
+
/**
|
20
|
+
* A decimal number between `0` and `1` (or between `0` and `max` if given),
|
21
|
+
* which specifies how much of the task has been completed.
|
22
|
+
*
|
23
|
+
* If `undefined` (default), the Progress will display an **indeterminate** state.
|
24
|
+
*/
|
25
|
+
value?: number;
|
26
|
+
/**
|
27
|
+
* The maximum value, which indicates the task is complete.
|
28
|
+
* The progress bar will be full when `value` equals `max`.
|
29
|
+
* @default 1
|
30
|
+
*/
|
31
|
+
max?: number;
|
32
|
+
/**
|
33
|
+
* The thickness of the Progress bar
|
34
|
+
* @default 'medium'
|
35
|
+
*/
|
36
|
+
thickness?: 'medium' | 'large';
|
37
|
+
};
|
38
|
+
|
39
|
+
export declare type ProgressSlots = {
|
40
|
+
/**
|
41
|
+
* The track behind the progress bar
|
42
|
+
*/
|
43
|
+
root: NonNullable<Slot<'div'>>;
|
44
|
+
/**
|
45
|
+
* The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.
|
46
|
+
*/
|
47
|
+
bar?: NonNullable<Slot<'div'>>;
|
48
|
+
};
|
49
|
+
|
50
|
+
/**
|
51
|
+
* State used in rendering Progress
|
52
|
+
*/
|
53
|
+
export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;
|
54
|
+
|
55
|
+
/**
|
56
|
+
* Render the final JSX of Progress
|
57
|
+
*/
|
58
|
+
export declare const renderProgress_unstable: (state: ProgressState) => JSX.Element;
|
59
|
+
|
60
|
+
/**
|
61
|
+
* Create the state required to render Progress.
|
62
|
+
*
|
63
|
+
* The returned state can be modified with hooks such as useProgressStyles_unstable,
|
64
|
+
* before being passed to renderProgress_unstable.
|
65
|
+
*
|
66
|
+
* @param props - props from this instance of Progress
|
67
|
+
* @param ref - reference to root HTMLElement of Progress
|
68
|
+
*/
|
69
|
+
export declare const useProgress_unstable: (props: ProgressProps, ref: React_2.Ref<HTMLElement>) => ProgressState;
|
70
|
+
|
71
|
+
/**
|
72
|
+
* Apply styling to the Progress slots based on the state
|
73
|
+
*/
|
74
|
+
export declare const useProgressStyles_unstable: (state: ProgressState) => ProgressState;
|
75
|
+
|
76
|
+
export { }
|
package/lib/Progress.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../src/Progress.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Progress/index';\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { useProgress_unstable } from './useProgress';
|
3
|
+
import { renderProgress_unstable } from './renderProgress';
|
4
|
+
import { useProgressStyles_unstable } from './useProgressStyles';
|
5
|
+
/**
|
6
|
+
* A progress bar shows the progression of a task.
|
7
|
+
*/
|
8
|
+
|
9
|
+
export const Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
|
10
|
+
const state = useProgress_unstable(props, ref);
|
11
|
+
useProgressStyles_unstable(state);
|
12
|
+
return renderProgress_unstable(state);
|
13
|
+
});
|
14
|
+
Progress.displayName = 'Progress';
|
15
|
+
//# sourceMappingURL=Progress.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useProgress_unstable } from './useProgress';\nimport { renderProgress_unstable } from './renderProgress';\nimport { useProgressStyles_unstable } from './useProgressStyles';\nimport type { ProgressProps } from './Progress.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A progress bar shows the progression of a task.\n */\nexport const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {\n const state = useProgress_unstable(props, ref);\n\n useProgressStyles_unstable(state);\n return renderProgress_unstable(state);\n});\n\nProgress.displayName = 'Progress';\n"],"sourceRoot":""}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressSlots = {\n /**\n * The track behind the progress bar\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.\n */\n bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Progress Props\n */\nexport type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {\n /**\n * A decimal number between `0` and `1` (or between `0` and `max` if given),\n * which specifies how much of the task has been completed. \n *\n * If `undefined` (default), the Progress will display an **indeterminate** state.\n */\n value?: number;\n /**\n * The maximum value, which indicates the task is complete.\n * The progress bar will be full when `value` equals `max`.\n * @default 1\n */\n max?: number;\n /**\n * The thickness of the Progress bar\n * @default 'medium'\n */\n thickness?: 'medium' | 'large';\n};\n\n/**\n * State used in rendering Progress\n */\nexport type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"]}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { getSlots } from '@fluentui/react-utilities';
|
3
|
+
/**
|
4
|
+
* Render the final JSX of Progress
|
5
|
+
*/
|
6
|
+
|
7
|
+
export const renderProgress_unstable = state => {
|
8
|
+
const {
|
9
|
+
slots,
|
10
|
+
slotProps
|
11
|
+
} = getSlots(state);
|
12
|
+
return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
13
|
+
}, slots.bar && /*#__PURE__*/React.createElement(slots.bar, { ...slotProps.bar
|
14
|
+
}));
|
15
|
+
};
|
16
|
+
//# sourceMappingURL=renderProgress.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/renderProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,iBAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n const { slots, slotProps } = getSlots<ProgressSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":""}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
2
|
+
/**
|
3
|
+
* Create the state required to render Progress.
|
4
|
+
*
|
5
|
+
* The returned state can be modified with hooks such as useProgressStyles_unstable,
|
6
|
+
* before being passed to renderProgress_unstable.
|
7
|
+
*
|
8
|
+
* @param props - props from this instance of Progress
|
9
|
+
* @param ref - reference to root HTMLElement of Progress
|
10
|
+
*/
|
11
|
+
|
12
|
+
export const useProgress_unstable = (props, ref) => {
|
13
|
+
// Props
|
14
|
+
const {
|
15
|
+
thickness = 'medium',
|
16
|
+
value,
|
17
|
+
max = 1.0
|
18
|
+
} = props;
|
19
|
+
const root = getNativeElementProps('div', {
|
20
|
+
ref,
|
21
|
+
role: 'progressbar',
|
22
|
+
...props
|
23
|
+
});
|
24
|
+
const bar = resolveShorthand(props.bar, {
|
25
|
+
required: true,
|
26
|
+
defaultProps: {
|
27
|
+
'aria-valuemin': value ? 0 : undefined,
|
28
|
+
'aria-valuemax': value ? max : undefined,
|
29
|
+
'aria-valuenow': value
|
30
|
+
}
|
31
|
+
});
|
32
|
+
const state = {
|
33
|
+
max,
|
34
|
+
thickness,
|
35
|
+
value,
|
36
|
+
components: {
|
37
|
+
root: 'div',
|
38
|
+
bar: 'div'
|
39
|
+
},
|
40
|
+
root,
|
41
|
+
bar
|
42
|
+
};
|
43
|
+
return state;
|
44
|
+
};
|
45
|
+
//# sourceMappingURL=useProgress.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/useProgress.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,SAAS,GAAG,QAAd;IAAwB,KAAxB;IAA+B,GAAG,GAAG;EAArC,IAA6C,KAAnD;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IAAE,GAAF;IAAO,IAAI,EAAE,aAAb;IAA4B,GAAG;EAA/B,CAAR,CAAlC;EAEA,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAP,EAAY;IACtC,QAAQ,EAAE,IAD4B;IAEtC,YAAY,EAAE;MACZ,iBAAiB,KAAK,GAAG,CAAH,GAAO,SADjB;MAEZ,iBAAiB,KAAK,GAAG,GAAH,GAAS,SAFnB;MAGZ,iBAAiB;IAHL;EAFwB,CAAZ,CAA5B;EASA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,SAF2B;IAG3B,KAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CAJe;IAQ3B,IAR2B;IAS3B;EAT2B,CAA7B;EAYA,OAAO,KAAP;AACD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n // Props\n const { thickness = 'medium', value, max = 1.0 } = props;\n\n const root = getNativeElementProps('div', { ref, role: 'progressbar', ...props });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n defaultProps: {\n 'aria-valuemin': value ? 0 : undefined,\n 'aria-valuemax': value ? max : undefined,\n 'aria-valuenow': value,\n },\n });\n\n const state: ProgressState = {\n max,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":""}
|
@@ -0,0 +1,124 @@
|
|
1
|
+
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
4
|
+
export const progressClassNames = {
|
5
|
+
root: 'fui-Progress',
|
6
|
+
bar: 'fui-Progress__bar'
|
7
|
+
}; // If the percentComplete is near 0, don't animate it.
|
8
|
+
// This prevents animations on reset to 0 scenarios.
|
9
|
+
|
10
|
+
const ZERO_THRESHOLD = 0.01;
|
11
|
+
const barThicknessValues = {
|
12
|
+
medium: '2px',
|
13
|
+
large: '4px'
|
14
|
+
};
|
15
|
+
const indeterminateProgress = {
|
16
|
+
'0%': {
|
17
|
+
left: '0%'
|
18
|
+
},
|
19
|
+
'100%': {
|
20
|
+
left: '100%'
|
21
|
+
}
|
22
|
+
};
|
23
|
+
/**
|
24
|
+
* Styles for the root slot
|
25
|
+
*/
|
26
|
+
|
27
|
+
const useRootStyles = /*#__PURE__*/__styles({
|
28
|
+
"root": {
|
29
|
+
"mc9l5x": "ftgm304",
|
30
|
+
"De3pzq": "f18f03hv",
|
31
|
+
"Bdqf98w": "fhb5wj7",
|
32
|
+
"B68tc82": "f1p9o1ba",
|
33
|
+
"Bmxbyg5": "f1sil6mw",
|
34
|
+
"I5kgcl": "fs8b23g",
|
35
|
+
"tu2nte": "f1mcb20s",
|
36
|
+
"y0r1ed": "fek7wd8"
|
37
|
+
},
|
38
|
+
"medium": {
|
39
|
+
"Bqenvij": "f4t8t6x"
|
40
|
+
},
|
41
|
+
"large": {
|
42
|
+
"Bqenvij": "f6ywr7j"
|
43
|
+
}
|
44
|
+
}, {
|
45
|
+
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
46
|
+
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
47
|
+
"m": "screen and (forced-colors: active)"
|
48
|
+
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
49
|
+
"m": "screen and (forced-colors: active)"
|
50
|
+
}], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
|
51
|
+
"m": "screen and (forced-colors: active)"
|
52
|
+
}]]
|
53
|
+
});
|
54
|
+
/**
|
55
|
+
* Styles for the progress bar
|
56
|
+
*/
|
57
|
+
|
58
|
+
|
59
|
+
const useBarStyles = /*#__PURE__*/__styles({
|
60
|
+
"base": {
|
61
|
+
"De3pzq": "ftywsgz",
|
62
|
+
"Bpep1pd": "f1neahkh"
|
63
|
+
},
|
64
|
+
"medium": {
|
65
|
+
"Bqenvij": "f4t8t6x"
|
66
|
+
},
|
67
|
+
"large": {
|
68
|
+
"Bqenvij": "f6ywr7j"
|
69
|
+
},
|
70
|
+
"nonZeroDeterminate": {
|
71
|
+
"Bmy1vo4": "fjt6zfz",
|
72
|
+
"B3o57yi": "f1wofebd",
|
73
|
+
"Bkqvd7p": "fv71qf3"
|
74
|
+
},
|
75
|
+
"indeterminate": {
|
76
|
+
"B2u0y6b": "fa0wk36",
|
77
|
+
"qhf8xq": "f10pi13n",
|
78
|
+
"Bcmaq0h": ["fhjp9mj", "ffmeyi5"],
|
79
|
+
"Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
|
80
|
+
"vin17d": "f1a27w2r",
|
81
|
+
"w3vfg9": "f1cpbl36"
|
82
|
+
},
|
83
|
+
"rtl": {
|
84
|
+
"Bxajw12": "f8zwtth"
|
85
|
+
}
|
86
|
+
}, {
|
87
|
+
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fhjp9mj{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".ffmeyi5{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f8zwtth{-webkit-animation-direction:reverse;animation-direction:reverse;}"],
|
88
|
+
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
89
|
+
"m": "screen and (forced-colors: active)"
|
90
|
+
}]],
|
91
|
+
"k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}"]
|
92
|
+
});
|
93
|
+
/**
|
94
|
+
* Apply styling to the Progress slots based on the state
|
95
|
+
*/
|
96
|
+
|
97
|
+
|
98
|
+
export const useProgressStyles_unstable = state => {
|
99
|
+
const {
|
100
|
+
max,
|
101
|
+
thickness,
|
102
|
+
value
|
103
|
+
} = state;
|
104
|
+
const rootStyles = useRootStyles();
|
105
|
+
const barStyles = useBarStyles();
|
106
|
+
const {
|
107
|
+
dir
|
108
|
+
} = useFluent();
|
109
|
+
state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
110
|
+
|
111
|
+
if (state.bar) {
|
112
|
+
state.bar.className = mergeClasses(progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
|
113
|
+
}
|
114
|
+
|
115
|
+
if (state.bar && value !== undefined) {
|
116
|
+
state.bar.style = {
|
117
|
+
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
118
|
+
...state.bar.style
|
119
|
+
};
|
120
|
+
}
|
121
|
+
|
122
|
+
return state;
|
123
|
+
};
|
124
|
+
//# sourceMappingURL=useProgressStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/useProgressStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAA1D,C,CAKP;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAmBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAArB;AAsCA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,GAAF;IAAO,SAAP;IAAkB;EAAlB,IAA4B,KAAlC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,SAAD,CAHuB,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,GAAV,EAAe;IACb,KAAK,CAAC,GAAN,CAAU,SAAV,GAAsB,YAAY,CAChC,kBAAkB,CAAC,GADa,EAEhC,SAAS,CAAC,IAFsB,EAGhC,KAAK,KAAK,SAAV,IAAuB,SAAS,CAAC,aAHD,EAIhC,KAAK,KAAK,SAAV,IAAuB,GAAG,KAAK,KAA/B,IAAwC,SAAS,CAAC,GAJlB,EAKhC,SAAS,CAAC,SAAD,CALuB,EAMhC,KAAK,KAAK,SAAV,IAAuB,KAAK,GAAG,cAA/B,IAAiD,SAAS,CAAC,kBAN3B,EAOhC,KAAK,CAAC,GAAN,CAAU,SAPsB,CAAlC;EASD;;EAED,IAAI,KAAK,CAAC,GAAN,IAAa,KAAK,KAAK,SAA3B,EAAsC;IACpC,KAAK,CAAC,GAAN,CAAU,KAAV,GAAkB;MAChB,KAAK,EAAE,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,CAAT,EAAa,KAAK,GAAG,GAAT,GAAgB,GAA5B,CAAd,IAAkD,GADzC;MAEhB,GAAG,KAAK,CAAC,GAAN,CAAU;IAFG,CAAlB;EAID;;EAED,OAAO,KAAP;AACD,CAjCM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n root: 'fui-Progress',\n bar: 'fui-Progress__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgress = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationDirection: 'reverse',\n },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n const { max, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressClassNames.root,\n rootStyles.root,\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
package/lib/index.js
ADDED
package/lib/index.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,oBAJF,EAKE,0BALF,QAMO,YANP","sourcesContent":["export {\n Progress,\n progressClassNames,\n renderProgress_unstable,\n useProgress_unstable,\n useProgressStyles_unstable,\n} from './Progress';\nexport type { ProgressProps, ProgressSlots, ProgressState } from './Progress';\n"],"sourceRoot":""}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/Progress.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Progress/index';\n"],"sourceRoot":""}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Progress = void 0;
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const useProgress_1 = /*#__PURE__*/require("./useProgress");
|
11
|
+
|
12
|
+
const renderProgress_1 = /*#__PURE__*/require("./renderProgress");
|
13
|
+
|
14
|
+
const useProgressStyles_1 = /*#__PURE__*/require("./useProgressStyles");
|
15
|
+
/**
|
16
|
+
* A progress bar shows the progression of a task.
|
17
|
+
*/
|
18
|
+
|
19
|
+
|
20
|
+
exports.Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
|
21
|
+
const state = useProgress_1.useProgress_unstable(props, ref);
|
22
|
+
useProgressStyles_1.useProgressStyles_unstable(state);
|
23
|
+
return renderProgress_1.renderProgress_unstable(state);
|
24
|
+
});
|
25
|
+
exports.Progress.displayName = 'Progress';
|
26
|
+
//# sourceMappingURL=Progress.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useProgress_unstable } from './useProgress';\nimport { renderProgress_unstable } from './renderProgress';\nimport { useProgressStyles_unstable } from './useProgressStyles';\nimport type { ProgressProps } from './Progress.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A progress bar shows the progression of a task.\n */\nexport const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {\n const state = useProgress_unstable(props, ref);\n\n useProgressStyles_unstable(state);\n return renderProgress_unstable(state);\n});\n\nProgress.displayName = 'Progress';\n"],"sourceRoot":""}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
+
|
9
|
+
tslib_1.__exportStar(require("./Progress"), exports);
|
10
|
+
|
11
|
+
tslib_1.__exportStar(require("./Progress.types"), exports);
|
12
|
+
|
13
|
+
tslib_1.__exportStar(require("./renderProgress"), exports);
|
14
|
+
|
15
|
+
tslib_1.__exportStar(require("./useProgress"), exports);
|
16
|
+
|
17
|
+
tslib_1.__exportStar(require("./useProgressStyles"), exports);
|
18
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"],"sourceRoot":""}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.renderProgress_unstable = void 0;
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
|
+
/**
|
12
|
+
* Render the final JSX of Progress
|
13
|
+
*/
|
14
|
+
|
15
|
+
|
16
|
+
const renderProgress_unstable = state => {
|
17
|
+
const {
|
18
|
+
slots,
|
19
|
+
slotProps
|
20
|
+
} = react_utilities_1.getSlots(state);
|
21
|
+
return React.createElement(slots.root, { ...slotProps.root
|
22
|
+
}, slots.bar && React.createElement(slots.bar, { ...slotProps.bar
|
23
|
+
}));
|
24
|
+
};
|
25
|
+
|
26
|
+
exports.renderProgress_unstable = renderProgress_unstable;
|
27
|
+
//# sourceMappingURL=renderProgress.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/renderProgress.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,IAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n const { slots, slotProps } = getSlots<ProgressSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":""}
|
@@ -0,0 +1,55 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useProgress_unstable = void 0;
|
7
|
+
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
|
+
/**
|
10
|
+
* Create the state required to render Progress.
|
11
|
+
*
|
12
|
+
* The returned state can be modified with hooks such as useProgressStyles_unstable,
|
13
|
+
* before being passed to renderProgress_unstable.
|
14
|
+
*
|
15
|
+
* @param props - props from this instance of Progress
|
16
|
+
* @param ref - reference to root HTMLElement of Progress
|
17
|
+
*/
|
18
|
+
|
19
|
+
|
20
|
+
const useProgress_unstable = (props, ref) => {
|
21
|
+
// Props
|
22
|
+
const {
|
23
|
+
thickness = 'medium',
|
24
|
+
value,
|
25
|
+
max = 1.0
|
26
|
+
} = props;
|
27
|
+
const root = react_utilities_1.getNativeElementProps('div', {
|
28
|
+
ref,
|
29
|
+
role: 'progressbar',
|
30
|
+
...props
|
31
|
+
});
|
32
|
+
const bar = react_utilities_1.resolveShorthand(props.bar, {
|
33
|
+
required: true,
|
34
|
+
defaultProps: {
|
35
|
+
'aria-valuemin': value ? 0 : undefined,
|
36
|
+
'aria-valuemax': value ? max : undefined,
|
37
|
+
'aria-valuenow': value
|
38
|
+
}
|
39
|
+
});
|
40
|
+
const state = {
|
41
|
+
max,
|
42
|
+
thickness,
|
43
|
+
value,
|
44
|
+
components: {
|
45
|
+
root: 'div',
|
46
|
+
bar: 'div'
|
47
|
+
},
|
48
|
+
root,
|
49
|
+
bar
|
50
|
+
};
|
51
|
+
return state;
|
52
|
+
};
|
53
|
+
|
54
|
+
exports.useProgress_unstable = useProgress_unstable;
|
55
|
+
//# sourceMappingURL=useProgress.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/useProgress.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,SAAS,GAAG,QAAd;IAAwB,KAAxB;IAA+B,GAAG,GAAG;EAArC,IAA6C,KAAnD;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IAAE,GAAF;IAAO,IAAI,EAAE,aAAb;IAA4B,GAAG;EAA/B,CAA7B,CAAb;EAEA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE,IAD4B;IAEtC,YAAY,EAAE;MACZ,iBAAiB,KAAK,GAAG,CAAH,GAAO,SADjB;MAEZ,iBAAiB,KAAK,GAAG,GAAH,GAAS,SAFnB;MAGZ,iBAAiB;IAHL;EAFwB,CAA5B,CAAZ;EASA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,SAF2B;IAG3B,KAH2B;IAI3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CAJe;IAQ3B,IAR2B;IAS3B;EAT2B,CAA7B;EAYA,OAAO,KAAP;AACD,CA5BM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n // Props\n const { thickness = 'medium', value, max = 1.0 } = props;\n\n const root = getNativeElementProps('div', { ref, role: 'progressbar', ...props });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n defaultProps: {\n 'aria-valuemin': value ? 0 : undefined,\n 'aria-valuemax': value ? max : undefined,\n 'aria-valuenow': value,\n },\n });\n\n const state: ProgressState = {\n max,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":""}
|
@@ -0,0 +1,136 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useProgressStyles_unstable = exports.progressClassNames = void 0;
|
7
|
+
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
|
10
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
+
|
12
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
13
|
+
|
14
|
+
exports.progressClassNames = {
|
15
|
+
root: 'fui-Progress',
|
16
|
+
bar: 'fui-Progress__bar'
|
17
|
+
}; // If the percentComplete is near 0, don't animate it.
|
18
|
+
// This prevents animations on reset to 0 scenarios.
|
19
|
+
|
20
|
+
const ZERO_THRESHOLD = 0.01;
|
21
|
+
const barThicknessValues = {
|
22
|
+
medium: '2px',
|
23
|
+
large: '4px'
|
24
|
+
};
|
25
|
+
const indeterminateProgress = {
|
26
|
+
'0%': {
|
27
|
+
left: '0%'
|
28
|
+
},
|
29
|
+
'100%': {
|
30
|
+
left: '100%'
|
31
|
+
}
|
32
|
+
};
|
33
|
+
/**
|
34
|
+
* Styles for the root slot
|
35
|
+
*/
|
36
|
+
|
37
|
+
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
38
|
+
"root": {
|
39
|
+
"mc9l5x": "ftgm304",
|
40
|
+
"De3pzq": "f18f03hv",
|
41
|
+
"Bdqf98w": "fhb5wj7",
|
42
|
+
"B68tc82": "f1p9o1ba",
|
43
|
+
"Bmxbyg5": "f1sil6mw",
|
44
|
+
"I5kgcl": "fs8b23g",
|
45
|
+
"tu2nte": "f1mcb20s",
|
46
|
+
"y0r1ed": "fek7wd8"
|
47
|
+
},
|
48
|
+
"medium": {
|
49
|
+
"Bqenvij": "f4t8t6x"
|
50
|
+
},
|
51
|
+
"large": {
|
52
|
+
"Bqenvij": "f6ywr7j"
|
53
|
+
}
|
54
|
+
}, {
|
55
|
+
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
56
|
+
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
57
|
+
"m": "screen and (forced-colors: active)"
|
58
|
+
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
59
|
+
"m": "screen and (forced-colors: active)"
|
60
|
+
}], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
|
61
|
+
"m": "screen and (forced-colors: active)"
|
62
|
+
}]]
|
63
|
+
});
|
64
|
+
/**
|
65
|
+
* Styles for the progress bar
|
66
|
+
*/
|
67
|
+
|
68
|
+
|
69
|
+
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
70
|
+
"base": {
|
71
|
+
"De3pzq": "ftywsgz",
|
72
|
+
"Bpep1pd": "f1neahkh"
|
73
|
+
},
|
74
|
+
"medium": {
|
75
|
+
"Bqenvij": "f4t8t6x"
|
76
|
+
},
|
77
|
+
"large": {
|
78
|
+
"Bqenvij": "f6ywr7j"
|
79
|
+
},
|
80
|
+
"nonZeroDeterminate": {
|
81
|
+
"Bmy1vo4": "fjt6zfz",
|
82
|
+
"B3o57yi": "f1wofebd",
|
83
|
+
"Bkqvd7p": "fv71qf3"
|
84
|
+
},
|
85
|
+
"indeterminate": {
|
86
|
+
"B2u0y6b": "fa0wk36",
|
87
|
+
"qhf8xq": "f10pi13n",
|
88
|
+
"Bcmaq0h": ["fhjp9mj", "ffmeyi5"],
|
89
|
+
"Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
|
90
|
+
"vin17d": "f1a27w2r",
|
91
|
+
"w3vfg9": "f1cpbl36"
|
92
|
+
},
|
93
|
+
"rtl": {
|
94
|
+
"Bxajw12": "f8zwtth"
|
95
|
+
}
|
96
|
+
}, {
|
97
|
+
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fhjp9mj{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".ffmeyi5{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorCompoundBrandBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f8zwtth{-webkit-animation-direction:reverse;animation-direction:reverse;}"],
|
98
|
+
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
99
|
+
"m": "screen and (forced-colors: active)"
|
100
|
+
}]],
|
101
|
+
"k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}"]
|
102
|
+
});
|
103
|
+
/**
|
104
|
+
* Apply styling to the Progress slots based on the state
|
105
|
+
*/
|
106
|
+
|
107
|
+
|
108
|
+
const useProgressStyles_unstable = state => {
|
109
|
+
const {
|
110
|
+
max,
|
111
|
+
thickness,
|
112
|
+
value
|
113
|
+
} = state;
|
114
|
+
const rootStyles = useRootStyles();
|
115
|
+
const barStyles = useBarStyles();
|
116
|
+
const {
|
117
|
+
dir
|
118
|
+
} = react_shared_contexts_1.useFluent_unstable();
|
119
|
+
state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
120
|
+
|
121
|
+
if (state.bar) {
|
122
|
+
state.bar.className = react_1.mergeClasses(exports.progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
|
123
|
+
}
|
124
|
+
|
125
|
+
if (state.bar && value !== undefined) {
|
126
|
+
state.bar.style = {
|
127
|
+
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
128
|
+
...state.bar.style
|
129
|
+
};
|
130
|
+
}
|
131
|
+
|
132
|
+
return state;
|
133
|
+
};
|
134
|
+
|
135
|
+
exports.useProgressStyles_unstable = useProgressStyles_unstable;
|
136
|
+
//# sourceMappingURL=useProgressStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Progress/useProgressStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAApD,C,CAKb;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAmBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAArB;AAsCA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,GAAF;IAAO,SAAP;IAAkB;EAAlB,IAA4B,KAAlC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM;IAAE;EAAF,IAAU,uBAAA,CAAA,kBAAA,EAAhB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,kBAAA,CAAmB,IADE,EAErB,UAAU,CAAC,IAFU,EAGrB,UAAU,CAAC,SAAD,CAHW,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,GAAV,EAAe;IACb,KAAK,CAAC,GAAN,CAAU,SAAV,GAAsB,OAAA,CAAA,YAAA,CACpB,OAAA,CAAA,kBAAA,CAAmB,GADC,EAEpB,SAAS,CAAC,IAFU,EAGpB,KAAK,KAAK,SAAV,IAAuB,SAAS,CAAC,aAHb,EAIpB,KAAK,KAAK,SAAV,IAAuB,GAAG,KAAK,KAA/B,IAAwC,SAAS,CAAC,GAJ9B,EAKpB,SAAS,CAAC,SAAD,CALW,EAMpB,KAAK,KAAK,SAAV,IAAuB,KAAK,GAAG,cAA/B,IAAiD,SAAS,CAAC,kBANvC,EAOpB,KAAK,CAAC,GAAN,CAAU,SAPU,CAAtB;EASD;;EAED,IAAI,KAAK,CAAC,GAAN,IAAa,KAAK,KAAK,SAA3B,EAAsC;IACpC,KAAK,CAAC,GAAN,CAAU,KAAV,GAAkB;MAChB,KAAK,EAAE,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,CAAT,EAAa,KAAK,GAAG,GAAT,GAAgB,GAA5B,CAAd,IAAkD,GADzC;MAEhB,GAAG,KAAK,CAAC,GAAN,CAAU;IAFG,CAAlB;EAID;;EAED,OAAO,KAAP;AACD,CAjCM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n root: 'fui-Progress',\n bar: 'fui-Progress__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgress = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorCompoundBrandBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n },\n\n rtl: {\n animationDirection: 'reverse',\n },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n const { max, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressClassNames.root,\n rootStyles.root,\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useProgressStyles_unstable = exports.useProgress_unstable = exports.renderProgress_unstable = exports.progressClassNames = exports.Progress = void 0;
|
7
|
+
|
8
|
+
var Progress_1 = /*#__PURE__*/require("./Progress");
|
9
|
+
|
10
|
+
Object.defineProperty(exports, "Progress", {
|
11
|
+
enumerable: true,
|
12
|
+
get: function () {
|
13
|
+
return Progress_1.Progress;
|
14
|
+
}
|
15
|
+
});
|
16
|
+
Object.defineProperty(exports, "progressClassNames", {
|
17
|
+
enumerable: true,
|
18
|
+
get: function () {
|
19
|
+
return Progress_1.progressClassNames;
|
20
|
+
}
|
21
|
+
});
|
22
|
+
Object.defineProperty(exports, "renderProgress_unstable", {
|
23
|
+
enumerable: true,
|
24
|
+
get: function () {
|
25
|
+
return Progress_1.renderProgress_unstable;
|
26
|
+
}
|
27
|
+
});
|
28
|
+
Object.defineProperty(exports, "useProgress_unstable", {
|
29
|
+
enumerable: true,
|
30
|
+
get: function () {
|
31
|
+
return Progress_1.useProgress_unstable;
|
32
|
+
}
|
33
|
+
});
|
34
|
+
Object.defineProperty(exports, "useProgressStyles_unstable", {
|
35
|
+
enumerable: true,
|
36
|
+
get: function () {
|
37
|
+
return Progress_1.useProgressStyles_unstable;
|
38
|
+
}
|
39
|
+
});
|
40
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA","sourcesContent":["export {\n Progress,\n progressClassNames,\n renderProgress_unstable,\n useProgress_unstable,\n useProgressStyles_unstable,\n} from './Progress';\nexport type { ProgressProps, ProgressSlots, ProgressState } from './Progress';\n"],"sourceRoot":""}
|
package/package.json
ADDED
@@ -0,0 +1,48 @@
|
|
1
|
+
{
|
2
|
+
"name": "@fluentui/react-progress",
|
3
|
+
"version": "0.0.0-nightly-20221007-1237.1",
|
4
|
+
"description": "Progress component for FluentUI v9",
|
5
|
+
"main": "lib-commonjs/index.js",
|
6
|
+
"module": "lib/index.js",
|
7
|
+
"typings": "dist/index.d.ts",
|
8
|
+
"sideEffects": false,
|
9
|
+
"repository": {
|
10
|
+
"type": "git",
|
11
|
+
"url": "https://github.com/microsoft/fluentui"
|
12
|
+
},
|
13
|
+
"license": "MIT",
|
14
|
+
"scripts": {
|
15
|
+
"build": "just-scripts build",
|
16
|
+
"bundle-size": "bundle-size measure",
|
17
|
+
"clean": "just-scripts clean",
|
18
|
+
"code-style": "just-scripts code-style",
|
19
|
+
"just": "just-scripts",
|
20
|
+
"lint": "just-scripts lint",
|
21
|
+
"test": "jest --passWithNoTests",
|
22
|
+
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
23
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-progress/src && yarn docs",
|
24
|
+
"type-check": "tsc -b tsconfig.json",
|
25
|
+
"storybook": "start-storybook",
|
26
|
+
"start": "yarn storybook"
|
27
|
+
},
|
28
|
+
"devDependencies": {
|
29
|
+
"@fluentui/eslint-plugin": "*",
|
30
|
+
"@fluentui/react-conformance": "*",
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221007-1237.1",
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
33
|
+
},
|
34
|
+
"dependencies": {
|
35
|
+
"@fluentui/react-shared-contexts": "^0.0.0-nightly-20221007-1237.1",
|
36
|
+
"@fluentui/react-theme": "^0.0.0-nightly-20221007-1237.1",
|
37
|
+
"@fluentui/react-utilities": "^0.0.0-nightly-20221007-1237.1",
|
38
|
+
"@griffel/react": "^1.3.0",
|
39
|
+
"tslib": "^2.1.0"
|
40
|
+
},
|
41
|
+
"peerDependencies": {
|
42
|
+
"@types/react": ">=16.8.0 <18.0.0",
|
43
|
+
"@types/react-dom": ">=16.8.0 <18.0.0",
|
44
|
+
"react": ">=16.8.0 <18.0.0",
|
45
|
+
"react-dom": ">=16.8.0 <18.0.0"
|
46
|
+
},
|
47
|
+
"beachball": {}
|
48
|
+
}
|