@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
51 lines • 2.49 kB
JavaScript
import { makeStyles, tokens } from "@fluentui/react-components";
const useStyles = makeStyles({
highlighted: {
transition: 'text-shadow 0.3s ease-in-out'
},
highlight: {
textShadow: `0 0 10px ${tokens.colorStatusSuccessBorderActive},
0 0 20px ${tokens.colorStatusSuccessBorderActive},
0 0 30px ${tokens.colorStatusSuccessBorderActive},
0 0 40px ${tokens.colorStatusSuccessBorderActive}`
},
highlightWarn: {
textShadow: `0 0 10px ${tokens.colorStatusWarningBorderActive},
0 0 20px ${tokens.colorStatusWarningBorderActive},
0 0 30px ${tokens.colorStatusWarningBorderActive},
0 0 40px ${tokens.colorStatusWarningBorderActive}`
},
highlightedBox: {
transition: 'box-shadow 0.3s ease-in-out'
},
highlightBox: {
boxShadow: `0 0 10px ${tokens.colorStatusSuccessBorderActive},
0 0 40px ${tokens.colorStatusSuccessBorderActive}`
},
highlightBoxWarn: {
boxShadow: `0 0 10px ${tokens.colorStatusWarningBorderActive},
0 0 40px ${tokens.colorStatusWarningBorderActive}`
}
});
/** returns a function you can call to make an element glow momentarily */
export function useHighlight() {
const css = useStyles();
return {
highlight: (elm, o) => {
if (elm && elm.classList) {
const mainClass = ((o === null || o === void 0 ? void 0 : o.type) === "box"
? (o === null || o === void 0 ? void 0 : o.intent) === "warn" ? css.highlightBoxWarn : css.highlightBox
: (o === null || o === void 0 ? void 0 : o.intent) === "warn" ? css.highlightWarn : css.highlight).split(' ');
const animClass = ((o === null || o === void 0 ? void 0 : o.type) === "box" ? css.highlightedBox : css.highlighted).split(' ');
elm.classList.add(...animClass); //enable animations
window.setTimeout(() => {
elm === null || elm === void 0 ? void 0 : elm.classList.add(...mainClass);
}, (o === null || o === void 0 ? void 0 : o.delayIn) > 0 ? o.delayIn * 1000 : 1000);
window.setTimeout(() => {
elm === null || elm === void 0 ? void 0 : elm.classList.remove(...mainClass);
}, (o === null || o === void 0 ? void 0 : o.delayOut) > 0 ? o.delayOut * 1000 : 2000);
}
}
};
}
//# sourceMappingURL=use-highlight.js.map