117 lines
3.7 KiB
JavaScript
117 lines
3.7 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, {
|
|
progressBarClassNames: function() {
|
|
return progressBarClassNames;
|
|
},
|
|
useProgressBarStyles_unstable: function() {
|
|
return useProgressBarStyles_unstable;
|
|
}
|
|
});
|
|
const _react = require("@griffel/react");
|
|
const _reacttheme = require("@fluentui/react-theme");
|
|
const progressBarClassNames = {
|
|
root: 'fui-ProgressBar',
|
|
bar: 'fui-ProgressBar__bar'
|
|
};
|
|
// If the percentComplete is near 0, don't animate it.
|
|
// This prevents animations on reset to 0 scenarios.
|
|
const ZERO_THRESHOLD = 0.01;
|
|
const barThicknessValues = {
|
|
medium: '2px',
|
|
large: '4px'
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/ const useRootStyles = (0, _react.makeStyles)({
|
|
root: {
|
|
display: 'block',
|
|
backgroundColor: _reacttheme.tokens.colorNeutralBackground6,
|
|
width: '100%',
|
|
overflow: 'hidden',
|
|
'@media screen and (forced-colors: active)': {
|
|
backgroundColor: 'CanvasText'
|
|
}
|
|
},
|
|
rounded: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
},
|
|
square: {
|
|
borderRadius: _reacttheme.tokens.borderRadiusNone
|
|
},
|
|
medium: {
|
|
height: barThicknessValues.medium
|
|
},
|
|
large: {
|
|
height: barThicknessValues.large
|
|
}
|
|
});
|
|
/**
|
|
* Styles for the ProgressBar bar
|
|
*/ const useBarStyles = (0, _react.makeStyles)({
|
|
base: {
|
|
'@media screen and (forced-colors: active)': {
|
|
backgroundColor: 'Highlight'
|
|
},
|
|
borderRadius: 'inherit',
|
|
height: '100%'
|
|
},
|
|
nonZeroDeterminate: {
|
|
transitionProperty: 'width',
|
|
transitionDuration: '0.3s',
|
|
transitionTimingFunction: 'ease'
|
|
},
|
|
indeterminate: {
|
|
maxWidth: '33%',
|
|
position: 'relative',
|
|
backgroundImage: `linear-gradient(
|
|
to right,
|
|
${_reacttheme.tokens.colorNeutralBackground6} 0%,
|
|
${_reacttheme.tokens.colorTransparentBackground} 50%,
|
|
${_reacttheme.tokens.colorNeutralBackground6} 100%
|
|
)`,
|
|
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
// Reduced motion: bar is sized here, and the opacity is pulsed by ProgressBarIndeterminateMotion
|
|
maxWidth: '100%'
|
|
}
|
|
},
|
|
brand: {
|
|
backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground
|
|
},
|
|
error: {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3
|
|
},
|
|
warning: {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3
|
|
},
|
|
success: {
|
|
backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3
|
|
}
|
|
});
|
|
const useProgressBarStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const { color, max, shape, thickness, value } = state;
|
|
const rootStyles = useRootStyles();
|
|
const barStyles = useBarStyles();
|
|
state.root.className = (0, _react.mergeClasses)(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
if (state.bar) {
|
|
state.bar.className = (0, _react.mergeClasses)(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
}
|
|
if (state.bar && value !== undefined) {
|
|
state.bar.style = {
|
|
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
...state.bar.style
|
|
};
|
|
}
|
|
return state;
|
|
};
|