@aplus-frontend/ui
Version:
86 lines (83 loc) • 1.72 kB
JavaScript
import { keyframes as t } from "@emotion/css";
import { genComponentStyleHook as i } from "../../utils/cssinjs/index.mjs";
const c = {
loadingBarAnimateDuration: 250
};
function s() {
const a = t`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`, n = t`
0% {
opacity: 1;
}
100% {
opacity: 0;
}
`;
return [a, n];
}
const m = (a) => {
const [n, e] = s(), { componentCls: o, loadingBarAnimateDuration: r } = a;
return {
[o]: {
position: "absolute",
insetInlineStart: 0,
width: "100%",
zIndex: 1,
[`${o}__bar`]: {
width: "100%",
height: "100%",
pointerEvents: "none",
transition: `background-color ${a.motionDurationMid} ease, transform ${a.motionDurationMid} ease`,
willChange: "transform"
},
"&--default": {
[`${a.componentCls}__bar`]: {
background: a.colorPrimary
}
},
"&--success": {
[`${a.componentCls}__bar`]: {
background: a.colorSuccess
}
},
"&--warning": {
[`${a.componentCls}__bar`]: {
background: a.colorWarn
}
},
"&--error": {
[`${a.componentCls}__bar`]: {
background: a.colorError
}
},
"&-fade": {
"&-enter-active": {
animationName: n,
animationDuration: `${r}ms`
},
"&-leave-active": {
animationName: e,
animationDuration: `${r}ms`
}
}
}
};
}, u = i(
"LoadingBar",
(a) => [m(a)],
c,
{
skipUnit: ["loadingBarAnimateDuration"]
}
);
export {
u as default,
s as genFadeKeyFrames,
m as genLoadingBarStyle
};