@trackunit/react-components 0.1.152 → 0.1.153
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/index.cjs.js +64 -32
- package/index.esm.js +64 -33
- package/package.json +1 -1
- package/src/hooks/index.d.ts +1 -0
- package/src/hooks/useContinuousTimeout.d.ts +19 -0
- package/src/hooks/useTimeout.d.ts +11 -7
package/index.cjs.js
CHANGED
|
@@ -36585,6 +36585,69 @@ const useClickOutside = (el, options = {}, onClick) => {
|
|
|
36585
36585
|
});
|
|
36586
36586
|
};
|
|
36587
36587
|
|
|
36588
|
+
/**
|
|
36589
|
+
* Hook for managing timeouts.
|
|
36590
|
+
*
|
|
36591
|
+
* @param {object} options - Options for the useTimeout hook.
|
|
36592
|
+
* @param {Function} options.onTimeout - Callback function to execute on timeout.
|
|
36593
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36594
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36595
|
+
*/
|
|
36596
|
+
const useTimeout = ({ onTimeout, duration }) => {
|
|
36597
|
+
const ready = React.useRef(false);
|
|
36598
|
+
const timeout = React.useRef();
|
|
36599
|
+
const callback = React.useRef(onTimeout);
|
|
36600
|
+
const startTimeout = React.useCallback(() => {
|
|
36601
|
+
ready.current = false;
|
|
36602
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36603
|
+
timeout.current = setTimeout(() => {
|
|
36604
|
+
ready.current = true;
|
|
36605
|
+
callback.current();
|
|
36606
|
+
}, duration);
|
|
36607
|
+
}, [duration]);
|
|
36608
|
+
const stopTimeout = React.useCallback(() => {
|
|
36609
|
+
ready.current = null;
|
|
36610
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36611
|
+
}, []);
|
|
36612
|
+
React.useEffect(() => {
|
|
36613
|
+
callback.current = onTimeout;
|
|
36614
|
+
}, [onTimeout]);
|
|
36615
|
+
React.useEffect(() => {
|
|
36616
|
+
// Cleanup function to clear the timeout when component unmounts
|
|
36617
|
+
return () => {
|
|
36618
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36619
|
+
};
|
|
36620
|
+
}, []);
|
|
36621
|
+
return { startTimeout, stopTimeout };
|
|
36622
|
+
};
|
|
36623
|
+
|
|
36624
|
+
/**
|
|
36625
|
+
* Hook for continuous retries with a timeout mechanism.
|
|
36626
|
+
*
|
|
36627
|
+
* @param {object} options - Options for the useContinuousTimeout hook.
|
|
36628
|
+
* @param {Function} options.onTimeout - Callback function to execute on each timeout.
|
|
36629
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36630
|
+
* @param {number} options.maxRetries - Maximum number of retry attempts.
|
|
36631
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36632
|
+
*/
|
|
36633
|
+
const useContinuousTimeout = ({ onTimeout, duration, maxRetries }) => {
|
|
36634
|
+
const retries = React.useRef(0);
|
|
36635
|
+
const { startTimeout, stopTimeout } = useTimeout({
|
|
36636
|
+
duration,
|
|
36637
|
+
onTimeout: () => {
|
|
36638
|
+
onTimeout();
|
|
36639
|
+
if (retries.current < maxRetries) {
|
|
36640
|
+
startTimeout();
|
|
36641
|
+
retries.current++;
|
|
36642
|
+
}
|
|
36643
|
+
else {
|
|
36644
|
+
retries.current = 0;
|
|
36645
|
+
}
|
|
36646
|
+
},
|
|
36647
|
+
});
|
|
36648
|
+
return { startTimeout, stopTimeout, retries: retries.current };
|
|
36649
|
+
};
|
|
36650
|
+
|
|
36588
36651
|
/**
|
|
36589
36652
|
* The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
|
|
36590
36653
|
*
|
|
@@ -36739,38 +36802,6 @@ const getWindowSize = () => {
|
|
|
36739
36802
|
}
|
|
36740
36803
|
};
|
|
36741
36804
|
|
|
36742
|
-
/**
|
|
36743
|
-
* @param {UseTimeoutProps} props The props
|
|
36744
|
-
* @returns {{ startTimeout: () => void; stopTimeout: () => void;}} return
|
|
36745
|
-
*/
|
|
36746
|
-
const useTimeout = ({ onTimeout, duration }) => {
|
|
36747
|
-
const ready = React.useRef(false);
|
|
36748
|
-
const timeout = React.useRef();
|
|
36749
|
-
const callback = React.useRef(onTimeout);
|
|
36750
|
-
const startTimeout = React.useCallback(() => {
|
|
36751
|
-
ready.current = false;
|
|
36752
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36753
|
-
timeout.current = setTimeout(() => {
|
|
36754
|
-
ready.current = true;
|
|
36755
|
-
callback.current();
|
|
36756
|
-
}, duration);
|
|
36757
|
-
}, [duration]);
|
|
36758
|
-
const stopTimeout = React.useCallback(() => {
|
|
36759
|
-
ready.current = null;
|
|
36760
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36761
|
-
}, []);
|
|
36762
|
-
React.useEffect(() => {
|
|
36763
|
-
callback.current = onTimeout;
|
|
36764
|
-
}, [onTimeout]);
|
|
36765
|
-
React.useEffect(() => {
|
|
36766
|
-
// Cleanup function to clear the timeout when component unmounts
|
|
36767
|
-
return () => {
|
|
36768
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36769
|
-
};
|
|
36770
|
-
}, []);
|
|
36771
|
-
return [startTimeout, stopTimeout];
|
|
36772
|
-
};
|
|
36773
|
-
|
|
36774
36805
|
/**
|
|
36775
36806
|
* Returns a callback that will be called when the visibility state of the document changes.
|
|
36776
36807
|
*/
|
|
@@ -39125,6 +39156,7 @@ exports.getValueBarColorByValue = getValueBarColorByValue;
|
|
|
39125
39156
|
exports.setLocalStorage = setLocalStorage;
|
|
39126
39157
|
exports.useClickOutside = useClickOutside;
|
|
39127
39158
|
exports.useContainerProps = useContainerProps;
|
|
39159
|
+
exports.useContinuousTimeout = useContinuousTimeout;
|
|
39128
39160
|
exports.useDebounce = useDebounce;
|
|
39129
39161
|
exports.useDevicePixelRatio = useDevicePixelRatio;
|
|
39130
39162
|
exports.useHover = useHover;
|
package/index.esm.js
CHANGED
|
@@ -36558,6 +36558,69 @@ const useClickOutside = (el, options = {}, onClick) => {
|
|
|
36558
36558
|
});
|
|
36559
36559
|
};
|
|
36560
36560
|
|
|
36561
|
+
/**
|
|
36562
|
+
* Hook for managing timeouts.
|
|
36563
|
+
*
|
|
36564
|
+
* @param {object} options - Options for the useTimeout hook.
|
|
36565
|
+
* @param {Function} options.onTimeout - Callback function to execute on timeout.
|
|
36566
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36567
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36568
|
+
*/
|
|
36569
|
+
const useTimeout = ({ onTimeout, duration }) => {
|
|
36570
|
+
const ready = useRef(false);
|
|
36571
|
+
const timeout = useRef();
|
|
36572
|
+
const callback = useRef(onTimeout);
|
|
36573
|
+
const startTimeout = useCallback(() => {
|
|
36574
|
+
ready.current = false;
|
|
36575
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36576
|
+
timeout.current = setTimeout(() => {
|
|
36577
|
+
ready.current = true;
|
|
36578
|
+
callback.current();
|
|
36579
|
+
}, duration);
|
|
36580
|
+
}, [duration]);
|
|
36581
|
+
const stopTimeout = useCallback(() => {
|
|
36582
|
+
ready.current = null;
|
|
36583
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36584
|
+
}, []);
|
|
36585
|
+
useEffect(() => {
|
|
36586
|
+
callback.current = onTimeout;
|
|
36587
|
+
}, [onTimeout]);
|
|
36588
|
+
useEffect(() => {
|
|
36589
|
+
// Cleanup function to clear the timeout when component unmounts
|
|
36590
|
+
return () => {
|
|
36591
|
+
timeout.current && clearTimeout(timeout.current);
|
|
36592
|
+
};
|
|
36593
|
+
}, []);
|
|
36594
|
+
return { startTimeout, stopTimeout };
|
|
36595
|
+
};
|
|
36596
|
+
|
|
36597
|
+
/**
|
|
36598
|
+
* Hook for continuous retries with a timeout mechanism.
|
|
36599
|
+
*
|
|
36600
|
+
* @param {object} options - Options for the useContinuousTimeout hook.
|
|
36601
|
+
* @param {Function} options.onTimeout - Callback function to execute on each timeout.
|
|
36602
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
36603
|
+
* @param {number} options.maxRetries - Maximum number of retry attempts.
|
|
36604
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
36605
|
+
*/
|
|
36606
|
+
const useContinuousTimeout = ({ onTimeout, duration, maxRetries }) => {
|
|
36607
|
+
const retries = useRef(0);
|
|
36608
|
+
const { startTimeout, stopTimeout } = useTimeout({
|
|
36609
|
+
duration,
|
|
36610
|
+
onTimeout: () => {
|
|
36611
|
+
onTimeout();
|
|
36612
|
+
if (retries.current < maxRetries) {
|
|
36613
|
+
startTimeout();
|
|
36614
|
+
retries.current++;
|
|
36615
|
+
}
|
|
36616
|
+
else {
|
|
36617
|
+
retries.current = 0;
|
|
36618
|
+
}
|
|
36619
|
+
},
|
|
36620
|
+
});
|
|
36621
|
+
return { startTimeout, stopTimeout, retries: retries.current };
|
|
36622
|
+
};
|
|
36623
|
+
|
|
36561
36624
|
/**
|
|
36562
36625
|
* The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
|
|
36563
36626
|
*
|
|
@@ -36712,38 +36775,6 @@ const getWindowSize = () => {
|
|
|
36712
36775
|
}
|
|
36713
36776
|
};
|
|
36714
36777
|
|
|
36715
|
-
/**
|
|
36716
|
-
* @param {UseTimeoutProps} props The props
|
|
36717
|
-
* @returns {{ startTimeout: () => void; stopTimeout: () => void;}} return
|
|
36718
|
-
*/
|
|
36719
|
-
const useTimeout = ({ onTimeout, duration }) => {
|
|
36720
|
-
const ready = useRef(false);
|
|
36721
|
-
const timeout = useRef();
|
|
36722
|
-
const callback = useRef(onTimeout);
|
|
36723
|
-
const startTimeout = useCallback(() => {
|
|
36724
|
-
ready.current = false;
|
|
36725
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36726
|
-
timeout.current = setTimeout(() => {
|
|
36727
|
-
ready.current = true;
|
|
36728
|
-
callback.current();
|
|
36729
|
-
}, duration);
|
|
36730
|
-
}, [duration]);
|
|
36731
|
-
const stopTimeout = useCallback(() => {
|
|
36732
|
-
ready.current = null;
|
|
36733
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36734
|
-
}, []);
|
|
36735
|
-
useEffect(() => {
|
|
36736
|
-
callback.current = onTimeout;
|
|
36737
|
-
}, [onTimeout]);
|
|
36738
|
-
useEffect(() => {
|
|
36739
|
-
// Cleanup function to clear the timeout when component unmounts
|
|
36740
|
-
return () => {
|
|
36741
|
-
timeout.current && clearTimeout(timeout.current);
|
|
36742
|
-
};
|
|
36743
|
-
}, []);
|
|
36744
|
-
return [startTimeout, stopTimeout];
|
|
36745
|
-
};
|
|
36746
|
-
|
|
36747
36778
|
/**
|
|
36748
36779
|
* Returns a callback that will be called when the visibility state of the document changes.
|
|
36749
36780
|
*/
|
|
@@ -39033,4 +39064,4 @@ const cvaClickable = cvaMerge([
|
|
|
39033
39064
|
},
|
|
39034
39065
|
});
|
|
39035
39066
|
|
|
39036
|
-
export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, setLocalStorage, useClickOutside, useContainerProps, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
|
|
39067
|
+
export { Alert, Badge, Button$1 as Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, Timeline, TimelineElement, Tip, Tooltip, ValueBar, cvaButton, cvaButtonSpinner, cvaClickable, cvaIconButtonContainer, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useHover, useIsFirstRender, useLocalStorage, useLocalStorageReducer, useModal, usePopoverContext, usePrompt, useResize, useTimeout, useVisibilityChange };
|
package/package.json
CHANGED
package/src/hooks/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from "./localStorage/setLocalStorage";
|
|
|
2
2
|
export * from "./localStorage/useLocalStorage";
|
|
3
3
|
export * from "./localStorage/useLocalStorageReducer";
|
|
4
4
|
export * from "./useClickOutside";
|
|
5
|
+
export * from "./useContinuousTimeout";
|
|
5
6
|
export * from "./useDebounce";
|
|
6
7
|
export * from "./useDevicePixelRatio";
|
|
7
8
|
export * from "./useHover";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { UseTimeoutProps } from "./useTimeout";
|
|
2
|
+
interface UseContinuousTimeoutProps extends UseTimeoutProps {
|
|
3
|
+
maxRetries: number;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Hook for continuous retries with a timeout mechanism.
|
|
7
|
+
*
|
|
8
|
+
* @param {object} options - Options for the useContinuousTimeout hook.
|
|
9
|
+
* @param {Function} options.onTimeout - Callback function to execute on each timeout.
|
|
10
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
11
|
+
* @param {number} options.maxRetries - Maximum number of retry attempts.
|
|
12
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
13
|
+
*/
|
|
14
|
+
export declare const useContinuousTimeout: ({ onTimeout, duration, maxRetries }: UseContinuousTimeoutProps) => {
|
|
15
|
+
startTimeout: () => void;
|
|
16
|
+
stopTimeout: () => void;
|
|
17
|
+
retries: number;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
export type UseTimeoutReturn = [Callback, Callback];
|
|
3
|
-
interface UseTimeoutProps {
|
|
1
|
+
export interface UseTimeoutProps {
|
|
4
2
|
onTimeout: () => void;
|
|
5
3
|
duration: number;
|
|
6
4
|
}
|
|
7
5
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
6
|
+
* Hook for managing timeouts.
|
|
7
|
+
*
|
|
8
|
+
* @param {object} options - Options for the useTimeout hook.
|
|
9
|
+
* @param {Function} options.onTimeout - Callback function to execute on timeout.
|
|
10
|
+
* @param {number} options.duration - Duration of the timeout in milliseconds.
|
|
11
|
+
* @returns {object} An object containing functions to start and stop the timeout.
|
|
10
12
|
*/
|
|
11
|
-
export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) =>
|
|
12
|
-
|
|
13
|
+
export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => {
|
|
14
|
+
startTimeout: () => void;
|
|
15
|
+
stopTimeout: () => void;
|
|
16
|
+
};
|