@aplus-frontend/ui
Version:
103 lines (102 loc) • 2.34 kB
JavaScript
import { resetComponent as t } from "../../style/index.mjs";
import { genComponentStyleHook as s } from "../../utils/cssinjs/index.mjs";
const d = (o) => {
const {
loadingOpacity: r,
colorLink: n,
colorSuccess: a,
colorError: c,
colorWarn: l,
componentCls: i
} = o;
return {
[i]: {
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
whiteSpace: "nowrap",
textAlign: "center",
gap: o.spaceXS,
cursor: "pointer",
...t(o),
[`&:not(${i}--disabled):hover`]: {
opacity: 0.7
},
"&--primary": {
color: n,
[`&${i}--disabled`]: {
color: o.colorLinkDisabled
}
},
"&--success": {
color: a,
[`&${i}--disabled`]: {
color: o.colorSuccessDisabled
}
},
"&--error": {
color: c,
[`&${i}--disabled`]: {
color: o.colorErrorDisabled
}
},
"&--warn": {
color: l,
[`&${i}--disabled`]: {
color: o.colorWarnDisabled
}
},
"&--loading": {
opacity: r,
transition: `opacity ${o.motionDurationMid}`,
cursor: "default",
[`&${i}--disabled`]: {
opacity: 1
}
},
"&--disabled": {
cursor: "not-allowed"
},
[`${i}__icon-wrapper`]: {},
"&--icon-first": {
[`${i}__icon-wrapper`]: {
paddingRight: 0
}
},
[`${i}-loading-icon`]: {
display: "inline-block",
transition: ["width", "opacity", "margin"].map(
(e) => `${e} ${o.motionDurationSlow} ${o.apActionLoadingIconEase}`
).join(",")
},
[`${i}-loading-icon-motion`]: {
"&-enter-from": {
marginInlineEnd: o.calc(o.spaceXS).mul(-1).equal()
},
"&-enter-to": {
marginInlineEnd: 0
},
"&-leave-from": {
marginInlineEnd: 0
},
"&-leave-to": {
marginInlineEnd: o.calc(o.spaceXS).mul(-1).equal()
}
}
}
};
}, g = s(
"ApAction",
(o) => [d(o)],
{
loadingOpacity: 0.35,
apActionLoadingIconEase: "cubic-bezier(0.645, 0.045, 0.355, 1)"
},
{
skipUnit: ["loadingOpacity"]
}
);
export {
g as default,
d as genActionItemStyle
};