248 lines
7.9 KiB
JavaScript
248 lines
7.9 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
spinnerClassNames: function() {
|
|
return spinnerClassNames;
|
|
},
|
|
useSpinnerStyles_unstable: function() {
|
|
return useSpinnerStyles_unstable;
|
|
}
|
|
});
|
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const _react = require("@griffel/react");
|
|
const spinnerClassNames = {
|
|
root: 'fui-Spinner',
|
|
spinner: 'fui-Spinner__spinner',
|
|
spinnerTail: 'fui-Spinner__spinnerTail',
|
|
label: 'fui-Spinner__label'
|
|
};
|
|
/**
|
|
* CSS variables used internally by Spinner
|
|
*/ const vars = {
|
|
strokeWidth: '--fui-Spinner--strokeWidth'
|
|
};
|
|
const useRootBaseClassName = (0, _react.makeResetStyles)({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
lineHeight: '0',
|
|
gap: '8px',
|
|
overflow: 'hidden',
|
|
minWidth: 'min-content'
|
|
});
|
|
const useRootStyles = (0, _react.makeStyles)({
|
|
vertical: {
|
|
flexDirection: 'column'
|
|
}
|
|
});
|
|
const useSpinnerBaseClassName = (0, _react.makeResetStyles)({
|
|
position: 'relative',
|
|
flexShrink: 0,
|
|
// Use a mask to create the ring shape of the spinner.
|
|
maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,
|
|
backgroundColor: _reacttheme.tokens.colorBrandStroke2Contrast,
|
|
color: _reacttheme.tokens.colorBrandStroke1,
|
|
'@media screen and (forced-colors: active)': {
|
|
backgroundColor: 'HighlightText',
|
|
color: 'Highlight',
|
|
forcedColorAdjust: 'none'
|
|
},
|
|
animationDuration: '1.5s',
|
|
animationIterationCount: 'infinite',
|
|
animationTimingFunction: 'linear',
|
|
animationName: {
|
|
'0%': {
|
|
transform: 'rotate(0deg)'
|
|
},
|
|
'100%': {
|
|
transform: 'rotate(360deg)'
|
|
}
|
|
},
|
|
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
animationDuration: '1.8s'
|
|
}
|
|
});
|
|
// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
|
|
// The segments are rotated out from behind the mask to expand the visible arc from
|
|
// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
|
|
// The tail and spinner itself also have 360deg rotation animations for the spin.
|
|
const useSpinnerTailBaseClassName = (0, _react.makeResetStyles)({
|
|
position: 'absolute',
|
|
display: 'block',
|
|
width: '100%',
|
|
height: '100%',
|
|
maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
|
|
'&::before, &::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
display: 'block',
|
|
width: '100%',
|
|
height: '100%',
|
|
animation: 'inherit',
|
|
backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'
|
|
},
|
|
animationDuration: '1.5s',
|
|
animationIterationCount: 'infinite',
|
|
animationTimingFunction: _reacttheme.tokens.curveEasyEase,
|
|
animationName: {
|
|
'0%': {
|
|
transform: 'rotate(-135deg)'
|
|
},
|
|
'50%': {
|
|
transform: 'rotate(0deg)'
|
|
},
|
|
'100%': {
|
|
transform: 'rotate(225deg)'
|
|
}
|
|
},
|
|
'&::before': {
|
|
animationName: {
|
|
'0%': {
|
|
transform: 'rotate(0deg)'
|
|
},
|
|
'50%': {
|
|
transform: 'rotate(105deg)'
|
|
},
|
|
'100%': {
|
|
transform: 'rotate(0deg)'
|
|
}
|
|
}
|
|
},
|
|
'&::after': {
|
|
animationName: {
|
|
'0%': {
|
|
transform: 'rotate(0deg)'
|
|
},
|
|
'50%': {
|
|
transform: 'rotate(225deg)'
|
|
},
|
|
'100%': {
|
|
transform: 'rotate(0deg)'
|
|
}
|
|
}
|
|
},
|
|
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
animationIterationCount: '0',
|
|
backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',
|
|
'&::before, &::after': {
|
|
content: 'none'
|
|
}
|
|
}
|
|
});
|
|
const useSpinnerStyles = (0, _react.makeStyles)({
|
|
inverted: {
|
|
backgroundColor: _reacttheme.tokens.colorNeutralStrokeAlpha2,
|
|
color: _reacttheme.tokens.colorNeutralStrokeOnBrand2
|
|
},
|
|
rtlTail: {
|
|
maskImage: 'conic-gradient(white 255deg, transparent 255deg)',
|
|
'&::before, &::after': {
|
|
backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'
|
|
},
|
|
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'
|
|
}
|
|
},
|
|
'extra-tiny': {
|
|
height: '16px',
|
|
width: '16px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
|
|
},
|
|
tiny: {
|
|
height: '20px',
|
|
width: '20px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
|
|
},
|
|
'extra-small': {
|
|
height: '24px',
|
|
width: '24px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
|
|
},
|
|
small: {
|
|
height: '28px',
|
|
width: '28px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
|
|
},
|
|
medium: {
|
|
height: '32px',
|
|
width: '32px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
|
|
},
|
|
large: {
|
|
height: '36px',
|
|
width: '36px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
|
|
},
|
|
'extra-large': {
|
|
height: '40px',
|
|
width: '40px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
|
|
},
|
|
huge: {
|
|
height: '44px',
|
|
width: '44px',
|
|
[vars.strokeWidth]: _reacttheme.tokens.strokeWidthThickest
|
|
}
|
|
});
|
|
const useLabelStyles = (0, _react.makeStyles)({
|
|
inverted: {
|
|
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
|
|
},
|
|
'extra-tiny': {
|
|
..._reacttheme.typographyStyles.body1
|
|
},
|
|
tiny: {
|
|
..._reacttheme.typographyStyles.body1
|
|
},
|
|
'extra-small': {
|
|
..._reacttheme.typographyStyles.body1
|
|
},
|
|
small: {
|
|
..._reacttheme.typographyStyles.body1
|
|
},
|
|
medium: {
|
|
..._reacttheme.typographyStyles.subtitle2
|
|
},
|
|
large: {
|
|
..._reacttheme.typographyStyles.subtitle2
|
|
},
|
|
'extra-large': {
|
|
..._reacttheme.typographyStyles.subtitle2
|
|
},
|
|
huge: {
|
|
..._reacttheme.typographyStyles.subtitle1
|
|
}
|
|
});
|
|
const useSpinnerStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const { labelPosition, size, appearance } = state;
|
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
const rootBaseClassName = useRootBaseClassName();
|
|
const rootStyles = useRootStyles();
|
|
const spinnerBaseClassName = useSpinnerBaseClassName();
|
|
const spinnerStyles = useSpinnerStyles();
|
|
const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
|
|
const labelStyles = useLabelStyles();
|
|
state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
|
|
if (state.spinner) {
|
|
state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
|
|
}
|
|
if (state.spinnerTail) {
|
|
state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
|
|
}
|
|
if (state.label) {
|
|
state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
|
|
}
|
|
return state;
|
|
};
|