@kwiz/fluentui 1.0.138 → 1.0.139
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare function useHighlight(): {
|
|
2
|
+
highlight: (e: HTMLElement, options?: {
|
|
3
|
+
/** highlight text or the box */
|
|
4
|
+
type: "text" | "box";
|
|
5
|
+
/** delay in (seconds, default: 1) */
|
|
6
|
+
delayIn?: number;
|
|
7
|
+
/** delay out (seconds, default: 2) */
|
|
8
|
+
delayOut?: number;
|
|
9
|
+
/** optional highlight color - default: success */
|
|
10
|
+
intent?: "success" | "warn";
|
|
11
|
+
}) => void;
|
|
12
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { makeStyles, tokens } from "@fluentui/react-components";
|
|
2
|
+
const useStyles = makeStyles({
|
|
3
|
+
highlighted: {
|
|
4
|
+
transition: 'text-shadow 0.3s ease-in-out'
|
|
5
|
+
},
|
|
6
|
+
highlight: {
|
|
7
|
+
textShadow: `0 0 10px ${tokens.colorStatusSuccessBorderActive},
|
|
8
|
+
0 0 20px ${tokens.colorStatusSuccessBorderActive},
|
|
9
|
+
0 0 30px ${tokens.colorStatusSuccessBorderActive},
|
|
10
|
+
0 0 40px ${tokens.colorStatusSuccessBorderActive}`
|
|
11
|
+
},
|
|
12
|
+
highlightWarn: {
|
|
13
|
+
textShadow: `0 0 10px ${tokens.colorStatusWarningBorderActive},
|
|
14
|
+
0 0 20px ${tokens.colorStatusWarningBorderActive},
|
|
15
|
+
0 0 30px ${tokens.colorStatusWarningBorderActive},
|
|
16
|
+
0 0 40px ${tokens.colorStatusWarningBorderActive}`
|
|
17
|
+
},
|
|
18
|
+
highlightedBox: {
|
|
19
|
+
transition: 'box-shadow 0.3s ease-in-out'
|
|
20
|
+
},
|
|
21
|
+
highlightBox: {
|
|
22
|
+
boxShadow: `0 0 10px ${tokens.colorStatusSuccessBorderActive},
|
|
23
|
+
0 0 40px ${tokens.colorStatusSuccessBorderActive}`
|
|
24
|
+
},
|
|
25
|
+
highlightBoxWarn: {
|
|
26
|
+
boxShadow: `0 0 10px ${tokens.colorStatusWarningBorderActive},
|
|
27
|
+
0 0 40px ${tokens.colorStatusWarningBorderActive}`
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
export function useHighlight() {
|
|
31
|
+
const css = useStyles();
|
|
32
|
+
return {
|
|
33
|
+
highlight: (elm, o) => {
|
|
34
|
+
if (elm && elm.classList) {
|
|
35
|
+
const mainClass = (o === null || o === void 0 ? void 0 : o.type) === "box"
|
|
36
|
+
? (o === null || o === void 0 ? void 0 : o.intent) === "warn" ? css.highlightBoxWarn : css.highlightBox
|
|
37
|
+
: (o === null || o === void 0 ? void 0 : o.intent) === "warn" ? css.highlightWarn : css.highlight;
|
|
38
|
+
const animClass = (o === null || o === void 0 ? void 0 : o.type) === "box" ? css.highlightedBox : css.highlighted;
|
|
39
|
+
elm.classList.add(animClass); //enable animations
|
|
40
|
+
window.setTimeout(() => {
|
|
41
|
+
elm === null || elm === void 0 ? void 0 : elm.classList.add(mainClass);
|
|
42
|
+
}, (o === null || o === void 0 ? void 0 : o.delayIn) > 0 ? o.delayIn * 1000 : 1000);
|
|
43
|
+
window.setTimeout(() => {
|
|
44
|
+
elm === null || elm === void 0 ? void 0 : elm.classList.remove(mainClass);
|
|
45
|
+
}, (o === null || o === void 0 ? void 0 : o.delayOut) > 0 ? o.delayOut * 1000 : 2000);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=use-highlight.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-highlight.js","sourceRoot":"","sources":["../../src/helpers/use-highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,WAAW,EAAE;QACT,UAAU,EAAE,8BAA8B;KAC7C;IACD,SAAS,EAAE;QACP,UAAU,EACN,YAAY,MAAM,CAAC,8BAA8B;uBACtC,MAAM,CAAC,8BAA8B;uBACrC,MAAM,CAAC,8BAA8B;uBACrC,MAAM,CAAC,8BAA8B,EAAE;KACzD;IACD,aAAa,EAAE;QACX,UAAU,EACN,YAAY,MAAM,CAAC,8BAA8B;uBACtC,MAAM,CAAC,8BAA8B;uBACrC,MAAM,CAAC,8BAA8B;uBACrC,MAAM,CAAC,8BAA8B,EAAE;KACzD;IACD,cAAc,EAAE;QACZ,UAAU,EAAE,6BAA6B;KAC5C;IACD,YAAY,EAAE;QACV,SAAS,EACL,YAAY,MAAM,CAAC,8BAA8B;uBACtC,MAAM,CAAC,8BAA8B,EAAE;KACzD;IACD,gBAAgB,EAAE;QACd,SAAS,EACL,YAAY,MAAM,CAAC,8BAA8B;uBACtC,MAAM,CAAC,8BAA8B,EAAE;KACzD;CACJ,CAAC,CAAC;AACH,MAAM,UAAU,YAAY;IAYxB,MAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IAExB,OAAO;QACH,SAAS,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YAClB,IAAI,GAAG,IAAI,GAAG,CAAC,SAAS,EAAE,CAAC;gBACvB,MAAM,SAAS,GAAG,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,IAAI,MAAK,KAAK;oBAC/B,CAAC,CAAC,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,MAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY;oBAChE,CAAC,CAAC,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,MAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC;gBAC/D,MAAM,SAAS,GAAG,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,IAAI,MAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC;gBAE3E,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,mBAAmB;gBAEhD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACnB,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;gBACjC,CAAC,EAAE,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,OAAO,IAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;gBAC7C,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACnB,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;gBACpC,CAAC,EAAE,CAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,QAAQ,IAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACnD,CAAC;QACL,CAAC;KACJ,CAAA;AACL,CAAC"}
|