@fluentui-react-native/experimental-activity-indicator 0.10.18 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/lib/ActivityIndicator.android.d.ts +1 -1
- package/lib/ActivityIndicator.android.js +1 -1
- package/lib/ActivityIndicator.d.ts +1 -1
- package/lib/ActivityIndicator.ios.d.ts +1 -1
- package/lib/ActivityIndicator.ios.js +1 -1
- package/lib/ActivityIndicator.js +1 -1
- package/lib/ActivityIndicator.mobile.d.ts +7 -2
- package/lib/ActivityIndicator.mobile.d.ts.map +1 -1
- package/lib/ActivityIndicator.mobile.js +91 -89
- package/lib/ActivityIndicator.mobile.js.map +1 -1
- package/lib/ActivityIndicator.styling.d.ts +15 -5
- package/lib/ActivityIndicator.styling.js +76 -67
- package/lib/ActivityIndicator.styling.js.map +1 -1
- package/lib/ActivityIndicator.types.d.ts +36 -36
- package/lib/ActivityIndicator.types.js +1 -1
- package/lib/CoreActivityIndicator.d.ts +8 -4
- package/lib/CoreActivityIndicator.d.ts.map +1 -1
- package/lib/CoreActivityIndicator.js +13 -13
- package/lib/CoreActivityIndicator.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +1 -1
- package/lib-commonjs/ActivityIndicator.android.d.ts +1 -1
- package/lib-commonjs/ActivityIndicator.android.js +11 -6
- package/lib-commonjs/ActivityIndicator.android.js.map +1 -1
- package/lib-commonjs/ActivityIndicator.d.ts +1 -1
- package/lib-commonjs/ActivityIndicator.ios.d.ts +1 -1
- package/lib-commonjs/ActivityIndicator.ios.js +11 -6
- package/lib-commonjs/ActivityIndicator.ios.js.map +1 -1
- package/lib-commonjs/ActivityIndicator.js +11 -6
- package/lib-commonjs/ActivityIndicator.js.map +1 -1
- package/lib-commonjs/ActivityIndicator.mobile.d.ts +7 -2
- package/lib-commonjs/ActivityIndicator.mobile.d.ts.map +1 -1
- package/lib-commonjs/ActivityIndicator.mobile.js +107 -96
- package/lib-commonjs/ActivityIndicator.mobile.js.map +1 -1
- package/lib-commonjs/ActivityIndicator.styling.d.ts +15 -5
- package/lib-commonjs/ActivityIndicator.styling.js +89 -78
- package/lib-commonjs/ActivityIndicator.styling.js.map +1 -1
- package/lib-commonjs/ActivityIndicator.types.d.ts +36 -36
- package/lib-commonjs/ActivityIndicator.types.js +3 -3
- package/lib-commonjs/CoreActivityIndicator.d.ts +8 -4
- package/lib-commonjs/CoreActivityIndicator.d.ts.map +1 -1
- package/lib-commonjs/CoreActivityIndicator.js +18 -18
- package/lib-commonjs/CoreActivityIndicator.js.map +1 -1
- package/lib-commonjs/index.d.ts +1 -1
- package/lib-commonjs/index.js +10 -5
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +56 -57
- package/src/ActivityIndicator.mobile.tsx +2 -3
- package/src/CoreActivityIndicator.tsx +2 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/experimental-activity-indicator
|
|
2
2
|
|
|
3
|
+
## 0.11.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- d7adbdd: # Migration from Beachball to Changesets
|
|
8
|
+
|
|
9
|
+
This changeset represents the migration from Beachball to Changesets for version management and consolidates all changes from 440+ beachball change files that were in the `change/` directory.
|
|
10
|
+
|
|
11
|
+
All 75 affected packages receive a minor version bump to acknowledge the accumulated changes from the beachball era.
|
|
12
|
+
|
|
13
|
+
## What Changed
|
|
14
|
+
|
|
15
|
+
Going forward, all version management uses Changesets via `yarn changeset`. The following beachball infrastructure has been removed:
|
|
16
|
+
|
|
17
|
+
- ❌ 440+ beachball change files from `change/` directory
|
|
18
|
+
- ❌ `beachball` package dependency
|
|
19
|
+
- ❌ Beachball scripts from `package.json`
|
|
20
|
+
- ❌ `beachball.config.js` configuration file
|
|
21
|
+
- ❌ Beachball publish steps from Azure Pipelines
|
|
22
|
+
|
|
23
|
+
## New Workflow
|
|
24
|
+
|
|
25
|
+
✅ **Create changes**: Run `yarn changeset` to document changes
|
|
26
|
+
✅ **Version bump PRs**: Automatically created by GitHub Actions
|
|
27
|
+
✅ **Publishing**: Handled by Azure Pipelines using `changeset publish`
|
|
28
|
+
✅ **Validation**: CI validates changesets and blocks major version bumps
|
|
29
|
+
|
|
30
|
+
For details, see `CHANGESETS_SETUP.md` and `CONTRIBUTING.md`.
|
|
31
|
+
|
|
32
|
+
### Patch Changes
|
|
33
|
+
|
|
34
|
+
- d1d8c26: We were pinning @types/react and react-native-macos via resolutions. This fixes that which uncovered a bunch of type inconsistencies that needed to be addressed.
|
|
35
|
+
- Updated dependencies [d7adbdd]
|
|
36
|
+
- Updated dependencies [d1d8c26]
|
|
37
|
+
- @fluentui-react-native/framework@0.15.0
|
|
38
|
+
|
|
3
39
|
<!-- This log was last generated on Tue, 15 Jul 2025 23:27:19 GMT and should not be manually modified. -->
|
|
4
40
|
|
|
5
41
|
<!-- Start content -->
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ActivityIndicator } from './ActivityIndicator.mobile';
|
|
2
2
|
export { ActivityIndicator } from './ActivityIndicator.mobile';
|
|
3
3
|
export default ActivityIndicator;
|
|
4
|
-
//# sourceMappingURL=ActivityIndicator.android.d.ts.map
|
|
4
|
+
//# sourceMappingURL=ActivityIndicator.android.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ActivityIndicator } from './ActivityIndicator.mobile';
|
|
2
2
|
export { ActivityIndicator } from './ActivityIndicator.mobile';
|
|
3
3
|
export default ActivityIndicator;
|
|
4
|
-
//# sourceMappingURL=ActivityIndicator.android.js.map
|
|
4
|
+
//# sourceMappingURL=ActivityIndicator.android.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ActivityIndicator } from './ActivityIndicator.mobile';
|
|
2
2
|
export { ActivityIndicator } from './ActivityIndicator.mobile';
|
|
3
3
|
export default ActivityIndicator;
|
|
4
|
-
//# sourceMappingURL=ActivityIndicator.ios.d.ts.map
|
|
4
|
+
//# sourceMappingURL=ActivityIndicator.ios.d.ts.map
|
package/lib/ActivityIndicator.js
CHANGED
|
@@ -2,5 +2,10 @@ import { Animated } from 'react-native';
|
|
|
2
2
|
import { Svg } from 'react-native-svg';
|
|
3
3
|
import type { ActivityIndicatorProps } from './ActivityIndicator.types';
|
|
4
4
|
export declare const AnimatedSvg: Animated.AnimatedComponent<typeof Svg>;
|
|
5
|
-
export declare const ActivityIndicator: import(
|
|
6
|
-
|
|
5
|
+
export declare const ActivityIndicator: import('@fluentui-react-native/framework').ComposableComponent<
|
|
6
|
+
ActivityIndicatorProps,
|
|
7
|
+
import('./ActivityIndicator.types').FluentActivityIndicatorSlotProps,
|
|
8
|
+
import('./ActivityIndicator.types').ActivityIndicatorTokens,
|
|
9
|
+
import('@fluentui-react-native/framework-base').ObjectBase
|
|
10
|
+
>;
|
|
11
|
+
//# sourceMappingURL=ActivityIndicator.mobile.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActivityIndicator.mobile.d.ts","sourceRoot":"","sources":["../src/ActivityIndicator.mobile.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ActivityIndicator.mobile.d.ts","sourceRoot":"","sources":["../src/ActivityIndicator.mobile.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAgB,MAAM,cAAc,CAAC;AAItD,OAAO,EAAE,GAAG,EAAQ,MAAM,kBAAkB,CAAC;AAI7C,OAAO,KAAK,EAAE,sBAAsB,EAA+B,MAAM,2BAA2B,CAAC;AAcrG,eAAO,MAAM,WAAW,wCAAwC,CAAC;AAEjE,eAAO,MAAM,iBAAiB,uRAiG5B,CAAC"}
|
|
@@ -1,101 +1,103 @@
|
|
|
1
|
-
|
|
2
|
-
/** @
|
|
1
|
+
import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
|
|
2
|
+
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
3
3
|
import { useRef, useEffect, useCallback } from 'react';
|
|
4
4
|
import { Animated, Easing, View } from 'react-native';
|
|
5
|
-
import { compose, mergeProps,
|
|
5
|
+
import { compose, mergeProps, buildUseStyling } from '@fluentui-react-native/framework';
|
|
6
6
|
import { Svg, Path } from 'react-native-svg';
|
|
7
7
|
import { diameterSizeMap, lineThicknessSizeMap, stylingSettings } from './ActivityIndicator.styling';
|
|
8
8
|
import { activityIndicatorName } from './ActivityIndicator.types';
|
|
9
9
|
const getActivityIndicatorPath = (diameter, width, color) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
const start = {
|
|
11
|
+
x: width / 2,
|
|
12
|
+
y: diameter / 2,
|
|
13
|
+
};
|
|
14
|
+
const innerRadius = diameter / 2 - width / 2;
|
|
15
|
+
const path = `M${start.x} ${start.y} a${innerRadius} ${innerRadius} 0 1 1 ${innerRadius} ${innerRadius}`;
|
|
16
|
+
return _jsx(Path, { d: path, stroke: color, strokeWidth: width, strokeLinecap: 'round', fill: 'transparent' });
|
|
17
17
|
};
|
|
18
18
|
export const AnimatedSvg = Animated.createAnimatedComponent(Svg);
|
|
19
19
|
const useStyling = buildUseStyling(stylingSettings);
|
|
20
20
|
export const ActivityIndicator = compose({
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
}, [rotationAngle, animating]);
|
|
54
|
-
const stopRotation = () => {
|
|
55
|
-
if (rotationAnimation.current) {
|
|
56
|
-
rotationAnimation.current.stop();
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
if (rotationAnimation.current === undefined) {
|
|
61
|
-
rotationAnimation.current = Animated.sequence([
|
|
62
|
-
Animated.timing(rotationAngle, {
|
|
63
|
-
toValue: 359,
|
|
64
|
-
duration: 750,
|
|
65
|
-
useNativeDriver: true,
|
|
66
|
-
easing: Easing.linear,
|
|
67
|
-
}),
|
|
68
|
-
]);
|
|
69
|
-
}
|
|
70
|
-
if (animating) {
|
|
71
|
-
startRotation();
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
stopRotation();
|
|
75
|
-
}
|
|
76
|
-
}, [animating, hidesWhenStopped, rotationAngle]);
|
|
77
|
-
const interpolateSpin = rotationAngle.interpolate({
|
|
78
|
-
inputRange: [0, 359],
|
|
79
|
-
outputRange: ['0deg', '359deg'],
|
|
21
|
+
displayName: activityIndicatorName,
|
|
22
|
+
...stylingSettings,
|
|
23
|
+
slots: {
|
|
24
|
+
root: View,
|
|
25
|
+
svg: AnimatedSvg,
|
|
26
|
+
},
|
|
27
|
+
useRender: (props, useSlots) => {
|
|
28
|
+
const Slots = useSlots(props);
|
|
29
|
+
const slotProps = useStyling(props);
|
|
30
|
+
const animating = props.animating != undefined ? props.animating : true;
|
|
31
|
+
const hidesWhenStopped = props.hidesWhenStopped != undefined ? props.hidesWhenStopped : true;
|
|
32
|
+
// React Native ActivityIndicator still takes up space when hidden, so to perfectly match would use opacity
|
|
33
|
+
// hiding opacity makes the screen reader on iOS and Android skip over it
|
|
34
|
+
const hideOpacity = animating == false && hidesWhenStopped == true ? 0 : 1;
|
|
35
|
+
const rotationAngle = useRef(new Animated.Value(0)).current;
|
|
36
|
+
const rotationAnimation = useRef(undefined);
|
|
37
|
+
/**
|
|
38
|
+
* https://github.com/facebook/react-native/pull/29585
|
|
39
|
+
* For Animated.loop() to work with the native driver, React Native needs this fix.
|
|
40
|
+
* It's only available in React Native 0.66+, and React Native macOS 0.62+
|
|
41
|
+
* To workaround this, let's just rerun the loop everytime the animation finishes
|
|
42
|
+
*/
|
|
43
|
+
const startRotation = useCallback(() => {
|
|
44
|
+
if (rotationAnimation.current) {
|
|
45
|
+
rotationAngle.setValue(0);
|
|
46
|
+
rotationAnimation.current.reset();
|
|
47
|
+
rotationAnimation.current.start((result) => {
|
|
48
|
+
if (result.finished) {
|
|
49
|
+
startRotation();
|
|
50
|
+
}
|
|
80
51
|
});
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
52
|
+
}
|
|
53
|
+
}, [rotationAngle, animating]);
|
|
54
|
+
const stopRotation = () => {
|
|
55
|
+
if (rotationAnimation.current) {
|
|
56
|
+
rotationAnimation.current.stop();
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
useEffect(() => {
|
|
60
|
+
if (rotationAnimation.current === undefined) {
|
|
61
|
+
rotationAnimation.current = Animated.sequence([
|
|
62
|
+
Animated.timing(rotationAngle, {
|
|
63
|
+
toValue: 359,
|
|
64
|
+
duration: 750,
|
|
65
|
+
useNativeDriver: true,
|
|
66
|
+
easing: Easing.linear,
|
|
67
|
+
}),
|
|
68
|
+
]);
|
|
69
|
+
}
|
|
70
|
+
if (animating) {
|
|
71
|
+
startRotation();
|
|
72
|
+
} else {
|
|
73
|
+
stopRotation();
|
|
74
|
+
}
|
|
75
|
+
}, [animating, hidesWhenStopped, rotationAngle]);
|
|
76
|
+
const interpolateSpin = rotationAngle.interpolate({
|
|
77
|
+
inputRange: [0, 359],
|
|
78
|
+
outputRange: ['0deg', '359deg'],
|
|
79
|
+
});
|
|
80
|
+
const path = getActivityIndicatorPath(
|
|
81
|
+
diameterSizeMap[slotProps.root.size],
|
|
82
|
+
lineThicknessSizeMap[slotProps.root.lineThickness],
|
|
83
|
+
slotProps.root.activityIndicatorColor,
|
|
84
|
+
);
|
|
85
|
+
// perspective is needed for animations to work on Android. See https://reactnative.dev/docs/animations#bear-in-mind
|
|
86
|
+
const animatedSvgProps = {
|
|
87
|
+
style: {
|
|
88
|
+
transform: [{ rotateZ: interpolateSpin }, { perspective: 10 }],
|
|
89
|
+
},
|
|
90
|
+
};
|
|
91
|
+
const otherRootProps = {
|
|
92
|
+
style: {
|
|
93
|
+
opacity: hideOpacity,
|
|
94
|
+
},
|
|
95
|
+
accessibilityState: { busy: animating },
|
|
96
|
+
};
|
|
97
|
+
return (rest) => {
|
|
98
|
+
const { ...mergedProps } = mergeProps(props, rest, otherRootProps);
|
|
99
|
+
return _jsx(Slots.root, { ...mergedProps, children: _jsx(Slots.svg, { ...animatedSvgProps, children: path }) });
|
|
100
|
+
};
|
|
101
|
+
},
|
|
100
102
|
});
|
|
101
|
-
//# sourceMappingURL=ActivityIndicator.mobile.js.map
|
|
103
|
+
//# sourceMappingURL=ActivityIndicator.mobile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActivityIndicator.mobile.js","sourceRoot":"","sources":["../src/ActivityIndicator.mobile.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"ActivityIndicator.mobile.js","sourceRoot":"","sources":["../src/ActivityIndicator.mobile.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,23 @@
|
|
|
1
1
|
import type { ActivityIndicatorProps as CoreActivityIndicatorProps } from 'react-native';
|
|
2
2
|
import type { UseStylingOptions } from '@fluentui-react-native/framework';
|
|
3
|
-
import type {
|
|
3
|
+
import type {
|
|
4
|
+
ActivityIndicatorProps,
|
|
5
|
+
FluentActivityIndicatorSlotProps,
|
|
6
|
+
ActivityIndicatorTokens,
|
|
7
|
+
CoreActivityIndicatorSlotProps,
|
|
8
|
+
ActivityIndicatorSize,
|
|
9
|
+
} from './ActivityIndicator.types';
|
|
4
10
|
export declare const diameterSizeMap: {
|
|
5
|
-
|
|
11
|
+
[key: string]: number;
|
|
6
12
|
};
|
|
7
13
|
export declare const lineThicknessSizeMap: {
|
|
8
|
-
|
|
14
|
+
[key: string]: number;
|
|
9
15
|
};
|
|
10
16
|
export declare function coreSizeFromFluentSize(fluentSize: ActivityIndicatorSize): CoreActivityIndicatorProps['size'];
|
|
11
17
|
export declare const stylingSettings: UseStylingOptions<ActivityIndicatorProps, FluentActivityIndicatorSlotProps, ActivityIndicatorTokens>;
|
|
12
|
-
export declare const coreStylingSettings: UseStylingOptions<
|
|
13
|
-
|
|
18
|
+
export declare const coreStylingSettings: UseStylingOptions<
|
|
19
|
+
ActivityIndicatorProps,
|
|
20
|
+
CoreActivityIndicatorSlotProps,
|
|
21
|
+
ActivityIndicatorTokens
|
|
22
|
+
>;
|
|
23
|
+
//# sourceMappingURL=ActivityIndicator.styling.d.ts.map
|
|
@@ -3,81 +3,90 @@ import { buildProps } from '@fluentui-react-native/framework';
|
|
|
3
3
|
import assertNever from 'assert-never';
|
|
4
4
|
import { activityIndicatorName } from './ActivityIndicator.types';
|
|
5
5
|
export const diameterSizeMap = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
xSmall: 12,
|
|
7
|
+
small: 16,
|
|
8
|
+
medium: 24,
|
|
9
|
+
large: 32,
|
|
10
|
+
xLarge: 36,
|
|
11
11
|
};
|
|
12
12
|
export const lineThicknessSizeMap = {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
xSmall: 1,
|
|
14
|
+
small: 1,
|
|
15
|
+
medium: 2,
|
|
16
|
+
large: 3,
|
|
17
|
+
xLarge: 4,
|
|
18
18
|
};
|
|
19
19
|
// Size coversion ramp from the Fluent ActivityIndicator size to the RN ActivityIndicator.
|
|
20
20
|
export function coreSizeFromFluentSize(fluentSize) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
21
|
+
if (typeof fluentSize === 'undefined') {
|
|
22
|
+
return fluentSize;
|
|
23
|
+
}
|
|
24
|
+
switch (fluentSize) {
|
|
25
|
+
case 'xSmall':
|
|
26
|
+
return 'small';
|
|
27
|
+
case 'small':
|
|
28
|
+
return 'small';
|
|
29
|
+
case 'medium':
|
|
30
|
+
return 'small';
|
|
31
|
+
case 'large':
|
|
32
|
+
return 'large';
|
|
33
|
+
case 'xLarge':
|
|
34
|
+
return 'large';
|
|
35
|
+
default:
|
|
36
|
+
assertNever(fluentSize);
|
|
37
|
+
}
|
|
38
38
|
}
|
|
39
39
|
export const stylingSettings = {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
40
|
+
tokens: [
|
|
41
|
+
() => ({
|
|
42
|
+
activityIndicatorColor: Appearance.getColorScheme() === 'light' ? '#BDBDBD' : '#666666',
|
|
43
|
+
lineThickness: 'medium',
|
|
44
|
+
size: 'medium',
|
|
45
|
+
}),
|
|
46
|
+
activityIndicatorName,
|
|
47
|
+
],
|
|
48
|
+
tokensThatAreAlsoProps: 'all',
|
|
49
|
+
slotProps: {
|
|
50
|
+
root: buildProps(
|
|
51
|
+
(tokens) => ({
|
|
52
|
+
activityIndicatorColor: tokens.activityIndicatorColor,
|
|
53
|
+
size: tokens.size,
|
|
54
|
+
lineThickness: tokens.lineThickness != 'medium' ? tokens.lineThickness : tokens.size,
|
|
55
|
+
accessibilityLabel: 'progressbar',
|
|
56
|
+
accessible: true,
|
|
57
|
+
style: {
|
|
58
|
+
width: diameterSizeMap[tokens.size],
|
|
59
|
+
height: diameterSizeMap[tokens.size],
|
|
60
|
+
},
|
|
61
|
+
}),
|
|
62
|
+
['activityIndicatorColor', 'lineThickness', 'size'],
|
|
63
|
+
),
|
|
64
|
+
svg: buildProps(
|
|
65
|
+
(tokens) => ({
|
|
66
|
+
width: diameterSizeMap[tokens.size],
|
|
67
|
+
height: diameterSizeMap[tokens.size],
|
|
68
|
+
}),
|
|
69
|
+
['size'],
|
|
70
|
+
),
|
|
71
|
+
},
|
|
66
72
|
};
|
|
67
73
|
// Minimal styling settings for the RN Core ActivityIndicator
|
|
68
74
|
export const coreStylingSettings = {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}),
|
|
81
|
-
|
|
75
|
+
tokens: [
|
|
76
|
+
() => ({
|
|
77
|
+
size: 'small',
|
|
78
|
+
}),
|
|
79
|
+
activityIndicatorName,
|
|
80
|
+
],
|
|
81
|
+
tokensThatAreAlsoProps: 'all',
|
|
82
|
+
slotProps: {
|
|
83
|
+
root: buildProps(
|
|
84
|
+
(tokens) => ({
|
|
85
|
+
color: tokens.activityIndicatorColor,
|
|
86
|
+
...(tokens.size && { size: coreSizeFromFluentSize(tokens.size) }), // Only pass in the prop if defined
|
|
87
|
+
}),
|
|
88
|
+
['activityIndicatorColor', 'size'],
|
|
89
|
+
),
|
|
90
|
+
},
|
|
82
91
|
};
|
|
83
|
-
//# sourceMappingURL=ActivityIndicator.styling.js.map
|
|
92
|
+
//# sourceMappingURL=ActivityIndicator.styling.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActivityIndicator.styling.js","sourceRoot":"","sources":["../src/ActivityIndicator.styling.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,WAAW,MAAM,cAAc,CAAC;AASvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,MAAM,CAAC,MAAM,eAAe,GAA8B;IACxD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;CACX,CAAC;AACF,MAAM,CAAC,MAAM,oBAAoB,GAA8B;IAC7D,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,0FAA0F;AAC1F,MAAM,UAAU,sBAAsB,CAAC,UAAiC;
|
|
1
|
+
{"version":3,"file":"ActivityIndicator.styling.js","sourceRoot":"","sources":["../src/ActivityIndicator.styling.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,54 +1,54 @@
|
|
|
1
1
|
import type { Animated, ActivityIndicatorProps as CoreActivityIndicatorProps } from 'react-native';
|
|
2
2
|
import type { SvgProps } from 'react-native-svg';
|
|
3
|
-
export declare const activityIndicatorName =
|
|
3
|
+
export declare const activityIndicatorName = 'ActivityIndicator';
|
|
4
4
|
/**
|
|
5
5
|
* Specifies the possible sizes of the ActivityIndicator.
|
|
6
6
|
*/
|
|
7
7
|
export type ActivityIndicatorSize = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
|
|
8
8
|
export interface ActivityIndicatorTokens {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
9
|
+
/**
|
|
10
|
+
* ActivityIndicator element color
|
|
11
|
+
* @defaultValue 'BDBDBD' for light mode, '666666' for dark mode
|
|
12
|
+
*/
|
|
13
|
+
activityIndicatorColor?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Line thickness of the ActivityIndicator
|
|
16
|
+
* @defaultValue 'medium' or what size is set to
|
|
17
|
+
*/
|
|
18
|
+
lineThickness?: ActivityIndicatorSize;
|
|
19
|
+
/**
|
|
20
|
+
* Size of the ActivityIndicator view
|
|
21
|
+
* @defaultValue 'medium'
|
|
22
|
+
*/
|
|
23
|
+
size?: ActivityIndicatorSize;
|
|
24
24
|
}
|
|
25
25
|
export interface ActivityIndicatorProps extends ActivityIndicatorTokens, Omit<CoreActivityIndicatorProps, 'size'> {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
/**
|
|
27
|
+
* ActivityIndicator animating or not
|
|
28
|
+
* @defaultValue 'true'
|
|
29
|
+
*/
|
|
30
|
+
animating?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* ActivityIndicator hidden when not animating or not hidden
|
|
33
|
+
* @defaultValue 'true'
|
|
34
|
+
*/
|
|
35
|
+
hidesWhenStopped?: boolean;
|
|
36
36
|
}
|
|
37
37
|
export interface FluentActivityIndicatorSlotProps {
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
root: ActivityIndicatorProps;
|
|
39
|
+
svg: Animated.AnimatedProps<SvgProps>;
|
|
40
40
|
}
|
|
41
41
|
export interface FluentActivityIndicatorType {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
props: ActivityIndicatorProps;
|
|
43
|
+
slotProps: FluentActivityIndicatorSlotProps;
|
|
44
|
+
tokens: ActivityIndicatorTokens;
|
|
45
45
|
}
|
|
46
46
|
export interface CoreActivityIndicatorSlotProps {
|
|
47
|
-
|
|
47
|
+
root: CoreActivityIndicatorProps;
|
|
48
48
|
}
|
|
49
49
|
export interface CoreActivityIndicatorType {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
props: ActivityIndicatorProps;
|
|
51
|
+
slotProps: CoreActivityIndicatorSlotProps;
|
|
52
|
+
tokens: ActivityIndicatorTokens;
|
|
53
53
|
}
|
|
54
|
-
//# sourceMappingURL=ActivityIndicator.types.d.ts.map
|
|
54
|
+
//# sourceMappingURL=ActivityIndicator.types.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const activityIndicatorName = 'ActivityIndicator';
|
|
2
|
-
//# sourceMappingURL=ActivityIndicator.types.js.map
|
|
2
|
+
//# sourceMappingURL=ActivityIndicator.types.js.map
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
/** @
|
|
2
|
-
/** @jsx withSlots */
|
|
1
|
+
/** @jsxImportSource @fluentui-react-native/framework-base */
|
|
3
2
|
import type { ActivityIndicatorProps } from './ActivityIndicator.types';
|
|
4
3
|
/**
|
|
5
4
|
* Wrapper around React Native Core's ActivityIndicator for platforms we do not
|
|
6
5
|
* have a custom FluentUI React Native ActivityIndicator defined.
|
|
7
6
|
*/
|
|
8
|
-
export declare const ActivityIndicator: import(
|
|
9
|
-
|
|
7
|
+
export declare const ActivityIndicator: import('@fluentui-react-native/framework').ComposableComponent<
|
|
8
|
+
ActivityIndicatorProps,
|
|
9
|
+
import('./ActivityIndicator.types').CoreActivityIndicatorSlotProps,
|
|
10
|
+
import('./ActivityIndicator.types').ActivityIndicatorTokens,
|
|
11
|
+
import('@fluentui-react-native/framework-base').ObjectBase
|
|
12
|
+
>;
|
|
13
|
+
//# sourceMappingURL=CoreActivityIndicator.d.ts.map
|