180 lines
10 KiB
JavaScript
180 lines
10 KiB
JavaScript
'use client';
|
|
|
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
export 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 = /*#__PURE__*/__resetStyles("rpp59a7", null, [".rpp59a7{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;min-width:min-content;}"]);
|
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
vertical: {
|
|
Beiy3e4: "f1vx9l62"
|
|
}
|
|
}, {
|
|
d: [".f1vx9l62{flex-direction:column;}"]
|
|
});
|
|
const useSpinnerBaseClassName = /*#__PURE__*/__resetStyles("rvgcg50", "r15nd2jo", {
|
|
r: [".rvgcg50{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rb7n1on;}", "@keyframes rb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}", ".r15nd2jo{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:r1gx3jof;}", "@keyframes r1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}"],
|
|
s: ["@media screen and (forced-colors: active){.rvgcg50{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}", "@media screen and (prefers-reduced-motion: reduce){.rvgcg50{animation-duration:1.8s;}}", "@media screen and (forced-colors: active){.r15nd2jo{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r15nd2jo{animation-duration: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 = /*#__PURE__*/__resetStyles("rxov3xa", "r1o544mv", {
|
|
r: [".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}", ".rxov3xa::before,.rxov3xa::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}", ".rxov3xa::before{animation-name:r18vhmn8;}", "@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}", ".rxov3xa::after{animation-name:rkgrvoi;}", "@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}", ".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}", ".r1o544mv::before,.r1o544mv::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}", ".r1o544mv::before{animation-name:r17whflh;}", "@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}", ".r1o544mv::after{animation-name:re4odhl;}", "@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"],
|
|
s: ["@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}"]
|
|
});
|
|
const useSpinnerStyles = /*#__PURE__*/__styles({
|
|
inverted: {
|
|
De3pzq: "fr407j0",
|
|
sj55zd: "f1f7voed"
|
|
},
|
|
rtlTail: {
|
|
btxmck: "f179dep3",
|
|
gb5jj2: "fbz9ihp",
|
|
Bdya8wy: "f1pme1qz"
|
|
},
|
|
"extra-tiny": {
|
|
Bqenvij: "fd461yt",
|
|
a9b677: "fjw5fx7",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
tiny: {
|
|
Bqenvij: "fjamq6b",
|
|
a9b677: "f64fuq3",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
"extra-small": {
|
|
Bqenvij: "frvgh55",
|
|
a9b677: "fq4mcun",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
small: {
|
|
Bqenvij: "fxldao9",
|
|
a9b677: "f1w9dchk",
|
|
qmp6fs: "f1v3ph3m"
|
|
},
|
|
medium: {
|
|
Bqenvij: "f1d2rq10",
|
|
a9b677: "f1szoe96",
|
|
qmp6fs: "fb52u90"
|
|
},
|
|
large: {
|
|
Bqenvij: "f8ljn23",
|
|
a9b677: "fpdz1er",
|
|
qmp6fs: "fb52u90"
|
|
},
|
|
"extra-large": {
|
|
Bqenvij: "fbhnoac",
|
|
a9b677: "feqmc2u",
|
|
qmp6fs: "fb52u90"
|
|
},
|
|
huge: {
|
|
Bqenvij: "f1ft4266",
|
|
a9b677: "fksc0bp",
|
|
qmp6fs: "fa3u9ii"
|
|
}
|
|
}, {
|
|
d: [".fr407j0{background-color:var(--colorNeutralStrokeAlpha2);}", ".f1f7voed{color:var(--colorNeutralStrokeOnBrand2);}", ".f179dep3{-webkit-mask-image:conic-gradient(white 255deg, transparent 255deg);mask-image:conic-gradient(white 255deg, transparent 255deg);}", ".fbz9ihp::before,.fbz9ihp::after{background-image:conic-gradient(transparent 225deg, currentcolor 225deg);}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".f1v3ph3m{--fui-Spinner--strokeWidth:var(--strokeWidthThick);}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".fxldao9{height:28px;}", ".f1w9dchk{width:28px;}", ".f1d2rq10{height:32px;}", ".f1szoe96{width:32px;}", ".fb52u90{--fui-Spinner--strokeWidth:var(--strokeWidthThicker);}", ".f8ljn23{height:36px;}", ".fpdz1er{width:36px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".f1ft4266{height:44px;}", ".fksc0bp{width:44px;}", ".fa3u9ii{--fui-Spinner--strokeWidth:var(--strokeWidthThickest);}"],
|
|
m: [["@media screen and (prefers-reduced-motion: reduce){.f1pme1qz{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}", {
|
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
}]]
|
|
});
|
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
inverted: {
|
|
sj55zd: "fonrgv7"
|
|
},
|
|
"extra-tiny": {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
tiny: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
"extra-small": {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
small: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fkhj508",
|
|
Bhrd7zp: "figsok6",
|
|
Bg96gwp: "f1i3iumi"
|
|
},
|
|
medium: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "faaz57k"
|
|
},
|
|
large: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "faaz57k"
|
|
},
|
|
"extra-large": {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "fod5ikn",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "faaz57k"
|
|
},
|
|
huge: {
|
|
Bahqtrf: "fk6fouc",
|
|
Be2twd7: "f1pp30po",
|
|
Bhrd7zp: "fl43uef",
|
|
Bg96gwp: "f106mvju"
|
|
}
|
|
}, {
|
|
d: [".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
|
|
});
|
|
/**
|
|
* Apply styling to the Spinner slots based on the state
|
|
*/
|
|
export const useSpinnerStyles_unstable = state => {
|
|
'use no memo';
|
|
|
|
const {
|
|
labelPosition,
|
|
size,
|
|
appearance
|
|
} = state;
|
|
const {
|
|
dir
|
|
} = useFluent();
|
|
const rootBaseClassName = useRootBaseClassName();
|
|
const rootStyles = useRootStyles();
|
|
const spinnerBaseClassName = useSpinnerBaseClassName();
|
|
const spinnerStyles = useSpinnerStyles();
|
|
const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
|
|
const labelStyles = useLabelStyles();
|
|
state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
|
|
if (state.spinner) {
|
|
state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
|
|
}
|
|
if (state.spinnerTail) {
|
|
state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
|
|
}
|
|
if (state.label) {
|
|
state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
|
|
}
|
|
return state;
|
|
}; |