@yakad/ui 1.3.164 → 1.3.166
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.
- package/dist/ActiveOnVisible/ActiveOnVisible.d.ts +1 -1
- package/dist/ActiveOnVisible/ActiveOnVisible.js +2 -1
- package/dist/AppBar/AppBar.d.ts +1 -1
- package/dist/Avatar/Avatar.d.ts +1 -1
- package/dist/Avatar/Avatar.js +2 -2
- package/dist/Button/Button.d.ts +1 -1
- package/dist/Button/Button.js +2 -2
- package/dist/Card/Card.d.ts +1 -1
- package/dist/CheckBox/CheckBox.d.ts +1 -1
- package/dist/CheckBox/CheckBox.js +2 -2
- package/dist/CodeBox/CodeBox.d.ts +1 -1
- package/dist/CodeBox/CodeBox.js +2 -2
- package/dist/CodeField/CodeField.d.ts +1 -1
- package/dist/Container/Container.d.ts +1 -1
- package/dist/Display/Display.d.ts +1 -1
- package/dist/Dropdown/Dropdown.d.ts +2 -1
- package/dist/Dropdown/Dropdown.js +17 -3
- package/dist/Footer/Footer.d.ts +1 -1
- package/dist/Form/Form.d.ts +1 -1
- package/dist/GridContainer/GridContainer.d.ts +1 -1
- package/dist/GridItem/GridItem.d.ts +1 -1
- package/dist/Hr/Hr.d.ts +1 -1
- package/dist/InputField/InputField.d.ts +13 -5
- package/dist/InputField/InputField.js +36 -6
- package/dist/InputField/cn.d.ts +2 -0
- package/dist/InputField/cn.js +5 -0
- package/dist/InputField/input.d.ts +7 -0
- package/dist/InputField/input.js +18 -0
- package/dist/List/List.d.ts +1 -1
- package/dist/ListItem/ListItem.d.ts +1 -1
- package/dist/Main/Main.d.ts +1 -1
- package/dist/Navigation/Navigation.d.ts +1 -1
- package/dist/Popup/Popup.d.ts +2 -1
- package/dist/Popup/Popup.js +19 -5
- package/dist/RadioButton/RadioButton.d.ts +1 -1
- package/dist/RadioButton/RadioButton.js +2 -2
- package/dist/RadioGroup/RadioGroup.d.ts +1 -1
- package/dist/RenderByScroll/RenderByScroll.d.ts +1 -1
- package/dist/RenderByScroll/RenderByScroll.js +2 -1
- package/dist/Row/Row.d.ts +1 -1
- package/dist/Screen/Screen.d.ts +1 -1
- package/dist/Select/Select.d.ts +1 -1
- package/dist/Spacer/Spacer.d.ts +1 -1
- package/dist/Stack/Stack.d.ts +1 -1
- package/dist/SvgIcon/SvgIcon.d.ts +1 -1
- package/dist/Table/Table.d.ts +7 -7
- package/dist/Text/Text.d.ts +9 -9
- package/dist/Theme/Theme.d.ts +1 -1
- package/dist/WithOverlay/WithOverlay.d.ts +1 -1
- package/dist/WithOverlay/WithOverlay.js +12 -23
- package/dist/index.d.ts +0 -11
- package/dist/index.js +0 -11
- package/package.json +8 -4
- package/dist/InputField/InputField.module.css +0 -212
- package/dist/LoadingIcon/LoadingIcon.d.ts +0 -7
- package/dist/LoadingIcon/LoadingIcon.js +0 -19
- package/dist/LoadingIcon/LoadingIcon.module.css +0 -98
- package/dist/interactionHooks/useOnDoubleTap.d.ts +0 -2
- package/dist/interactionHooks/useOnDoubleTap.js +0 -23
- package/dist/interactionHooks/useOnHoverChange.d.ts +0 -2
- package/dist/interactionHooks/useOnHoverChange.js +0 -23
- package/dist/interactionHooks/useOnOutsideClick.d.ts +0 -2
- package/dist/interactionHooks/useOnOutsideClick.js +0 -21
- package/dist/interactionHooks/useOnPinch.d.ts +0 -2
- package/dist/interactionHooks/useOnPinch.js +0 -35
- package/dist/interactionHooks/useOnResizeChange.d.ts +0 -2
- package/dist/interactionHooks/useOnResizeChange.js +0 -23
- package/dist/interactionHooks/useOnRightClick.d.ts +0 -2
- package/dist/interactionHooks/useOnRightClick.js +0 -19
- package/dist/interactionHooks/useOnRotate.d.ts +0 -2
- package/dist/interactionHooks/useOnRotate.js +0 -36
- package/dist/interactionHooks/useOnScroll.d.ts +0 -2
- package/dist/interactionHooks/useOnScroll.js +0 -29
- package/dist/interactionHooks/useOnSwipe.d.ts +0 -2
- package/dist/interactionHooks/useOnSwipe.js +0 -53
- package/dist/interactionHooks/useOnVisibilityChange.d.ts +0 -2
- package/dist/interactionHooks/useOnVisibilityChange.js +0 -21
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from "react";
|
|
2
|
-
export function useOnRightClick(callback, ref) {
|
|
3
|
-
const defaultRef = useRef(null);
|
|
4
|
-
const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
|
|
5
|
-
const handleContextMenu = useCallback((e) => {
|
|
6
|
-
e.preventDefault();
|
|
7
|
-
callback(e);
|
|
8
|
-
}, [callback]);
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
const element = targetRef.current;
|
|
11
|
-
if (!element)
|
|
12
|
-
return;
|
|
13
|
-
element.addEventListener("contextmenu", handleContextMenu);
|
|
14
|
-
return () => {
|
|
15
|
-
element.removeEventListener("contextmenu", handleContextMenu);
|
|
16
|
-
};
|
|
17
|
-
}, [handleContextMenu, targetRef]);
|
|
18
|
-
return targetRef;
|
|
19
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
-
export function useOnRotate(callback, ref) {
|
|
3
|
-
const defaultRef = useRef(null);
|
|
4
|
-
const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
|
|
5
|
-
const [startAngle, setStartAngle] = useState(0);
|
|
6
|
-
const getAngle = (t1, t2) => Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) *
|
|
7
|
-
(180 / Math.PI);
|
|
8
|
-
const handleStart = useCallback((e) => {
|
|
9
|
-
if (e.touches.length === 2) {
|
|
10
|
-
const [t1, t2] = e.touches;
|
|
11
|
-
setStartAngle(getAngle(t1, t2));
|
|
12
|
-
}
|
|
13
|
-
}, []);
|
|
14
|
-
const handleMove = useCallback((e) => {
|
|
15
|
-
if (e.touches.length === 2) {
|
|
16
|
-
const [t1, t2] = e.touches;
|
|
17
|
-
const angle = getAngle(t1, t2);
|
|
18
|
-
const deltaAngle = angle - startAngle;
|
|
19
|
-
if (Math.abs(deltaAngle) > 15) {
|
|
20
|
-
callback(e, deltaAngle);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}, [callback, startAngle]);
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
const element = targetRef.current;
|
|
26
|
-
if (!element)
|
|
27
|
-
return;
|
|
28
|
-
element.addEventListener("touchstart", handleStart);
|
|
29
|
-
element.addEventListener("touchmove", handleMove);
|
|
30
|
-
return () => {
|
|
31
|
-
element.removeEventListener("touchstart", handleStart);
|
|
32
|
-
element.removeEventListener("touchmove", handleMove);
|
|
33
|
-
};
|
|
34
|
-
}, [handleMove, handleStart, targetRef]);
|
|
35
|
-
return targetRef;
|
|
36
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from "react";
|
|
2
|
-
export function useOnScroll(callback, ref) {
|
|
3
|
-
const defaultRef = useRef(null);
|
|
4
|
-
const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
|
|
5
|
-
const scrollTimeoutRef = useRef(undefined);
|
|
6
|
-
const scrollingRef = useRef(false);
|
|
7
|
-
const handleScroll = useCallback(() => {
|
|
8
|
-
if (!scrollingRef.current) {
|
|
9
|
-
scrollingRef.current = true;
|
|
10
|
-
callback(true);
|
|
11
|
-
}
|
|
12
|
-
clearTimeout(scrollTimeoutRef.current);
|
|
13
|
-
scrollTimeoutRef.current = setTimeout(() => {
|
|
14
|
-
scrollingRef.current = false;
|
|
15
|
-
callback(false);
|
|
16
|
-
}, 150);
|
|
17
|
-
}, [callback]);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
const element = targetRef.current;
|
|
20
|
-
if (!element)
|
|
21
|
-
return;
|
|
22
|
-
element.addEventListener("scroll", handleScroll);
|
|
23
|
-
return () => {
|
|
24
|
-
element.removeEventListener("scroll", handleScroll);
|
|
25
|
-
clearTimeout(scrollTimeoutRef.current);
|
|
26
|
-
};
|
|
27
|
-
}, [handleScroll, targetRef]);
|
|
28
|
-
return targetRef;
|
|
29
|
-
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
-
export function useOnSwipe(callback, ref) {
|
|
3
|
-
const defaultRef = useRef(null);
|
|
4
|
-
const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
|
|
5
|
-
const [swipeCoordinates, setSwipeCoordinates] = useState({
|
|
6
|
-
startX: 0,
|
|
7
|
-
startY: 0,
|
|
8
|
-
endX: 0,
|
|
9
|
-
endY: 0,
|
|
10
|
-
});
|
|
11
|
-
const touchStart = useCallback((e) => {
|
|
12
|
-
const t = e.touches[0];
|
|
13
|
-
setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { startX: t.clientX, startY: t.clientY, endX: t.clientX, endY: t.clientY })));
|
|
14
|
-
}, []);
|
|
15
|
-
const touchMove = useCallback((e) => {
|
|
16
|
-
const t = e.touches[0];
|
|
17
|
-
setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { endX: t.clientX, endY: t.clientY })));
|
|
18
|
-
}, []);
|
|
19
|
-
const touchEnd = useCallback((e) => {
|
|
20
|
-
// Could do unpacking of object but its not necessary
|
|
21
|
-
const dx = swipeCoordinates.endX - swipeCoordinates.startX;
|
|
22
|
-
const dy = swipeCoordinates.endY - swipeCoordinates.startY;
|
|
23
|
-
const absDx = Math.abs(dx);
|
|
24
|
-
const absDy = Math.abs(dy);
|
|
25
|
-
const threshold = 30;
|
|
26
|
-
if (absDx > absDy) {
|
|
27
|
-
if (dx > threshold)
|
|
28
|
-
callback(e, "right");
|
|
29
|
-
if (dx < -threshold)
|
|
30
|
-
callback(e, "left");
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
if (dy > threshold)
|
|
34
|
-
callback(e, "down");
|
|
35
|
-
if (dy < -threshold)
|
|
36
|
-
callback(e, "up");
|
|
37
|
-
}
|
|
38
|
-
}, [callback, swipeCoordinates.endX, swipeCoordinates.startX, swipeCoordinates.endY, swipeCoordinates.startY]);
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
const element = targetRef.current;
|
|
41
|
-
if (!element)
|
|
42
|
-
return;
|
|
43
|
-
element.addEventListener("touchstart", touchStart, { passive: true });
|
|
44
|
-
element.addEventListener("touchmove", touchMove, { passive: true });
|
|
45
|
-
element.addEventListener("touchend", touchEnd, { passive: true });
|
|
46
|
-
return () => {
|
|
47
|
-
element.removeEventListener("touchstart", touchStart);
|
|
48
|
-
element.removeEventListener("touchmove", touchMove);
|
|
49
|
-
element.removeEventListener("touchend", touchEnd);
|
|
50
|
-
};
|
|
51
|
-
}, [touchStart, touchMove, touchEnd, targetRef]);
|
|
52
|
-
return targetRef;
|
|
53
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useRef } from "react";
|
|
2
|
-
export function useOnVisibilityChange(callback, ref) {
|
|
3
|
-
const defaultRef = useRef(null);
|
|
4
|
-
const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
|
|
5
|
-
const handleVisibility = useCallback((visible) => {
|
|
6
|
-
callback(visible);
|
|
7
|
-
}, [callback]);
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
const element = targetRef.current;
|
|
10
|
-
if (!element)
|
|
11
|
-
return;
|
|
12
|
-
const intersectionObserver = new IntersectionObserver((entries) => {
|
|
13
|
-
entries[0].isIntersecting ? handleVisibility(true) : handleVisibility(false);
|
|
14
|
-
});
|
|
15
|
-
intersectionObserver.observe(element);
|
|
16
|
-
return () => {
|
|
17
|
-
intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
|
|
18
|
-
};
|
|
19
|
-
}, [handleVisibility, targetRef]);
|
|
20
|
-
return targetRef;
|
|
21
|
-
}
|