@cloudbase/weda-ui 3.2.1 → 3.3.1

package/dist/src/configs/components/chart/bar.json

@@ -473,6 +473,14 @@
                 "type": "array",
                 "title": "配色",
                 "x-index": 70,
+                "default": [
+                    "#2A70E2",
+                    "#46B690",
+                    "#EDB539",
+                    "#E46961",
+                    "#4FB3D2",
+                    "#805FDC"
+                ],
                 "x-component": "color-plate",
                 "remarks": "当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡"
             },
@@ -553,7 +561,7 @@
                     {
                         "type": "value:visible",
                         "target": "*(groupKey)",
-                        "condition": "{{ console.log($self, 'BaR') || (!$self.value || !$self.value.numValue || $self.value.numValue.length<=1) && !!$self.__datasourceName }}"
+                        "condition": "{{ (!$self.value || !$self.value.numValue || $self.value.numValue.length<=1) && !!$self.__datasourceName }}"
                     }
                 ],
                 "remarks": "Y轴数值字段选择"

package/dist/src/configs/components/chart/line.json

@@ -424,6 +424,14 @@
                 "type": "array",
                 "title": "配色",
                 "x-index": 58,
+                "default": [
+                    "#2A70E2",
+                    "#46B690",
+                    "#EDB539",
+                    "#E46961",
+                    "#4FB3D2",
+                    "#805FDC"
+                ],
                 "x-component": "color-plate",
                 "remarks": "当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡"
             },

package/dist/src/configs/components/chart/pie.json

@@ -408,6 +408,14 @@
                 "type": "array",
                 "title": "配色",
                 "x-index": 60,
+                "default": [
+                    "#2A70E2",
+                    "#46B690",
+                    "#EDB539",
+                    "#E46961",
+                    "#4FB3D2",
+                    "#805FDC"
+                ],
                 "x-component": "color-plate",
                 "remarks": "当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡"
             },

package/dist/src/web/actions/showModal/index.js

@@ -59,7 +59,6 @@ export default async function showModal({ data }) {
         success && success(res);
         return res;
     }, (e) => {
-        // console.log(e);
         fail && fail();
         complete && complete();
         throw e;

package/dist/src/web/components/calendar/index.js

@@ -50,43 +50,45 @@ export default function Calendar({ className, style, initVisible, initValue, con
             });
         }
         return [yearList, monthList];
-    }, [year, month]);
-    // 匹配数据
-    const _dateList = (configList) => {
-        const _map = new Map();
-        const configArr = JSON.parse(JSON.stringify(configData));
-        // 补日期的零
-        configArr &&
-            configArr.length &&
-            configArr.map((item) => {
-                if (item.matchDate === '' || item.matchDate === undefined)
-                    return;
-                const date = item.matchDate.split('-');
-                const day = date[2].split('');
-                if (day.length === 1) {
-                    date[2] = `0${date[2]}`;
-                    item.matchDate = date.join('-');
-                }
-            });
-        for (const item of configArr) {
-            _map.set(item.matchDate, item);
-        }
-        return configList.map((item) => {
-            return item.reduce((res, i) => {
-                if (_map.has(i.formattedDate)) {
-                    const _disabled = _map.get(i.formattedDate)['disabled'];
-                    const _marked = _map.get(i.formattedDate)['marked'];
-                    i['disabled'] =
-                        _disabled !== undefined ? JSON.parse(_disabled) : false;
-                    i['marked'] = _marked;
-                }
-                res.push(i);
-                return res;
-            }, []);
-        });
-    };
+    }, [year]);
     // 日历单元格数据
-    const dateList = useMemo(() => _dateList(createDateList(year, month, firstDayOfWeek, value, format)), [year, month, firstDayOfWeek, format, value, configData]);
+    const dateList = useMemo(() => {
+        // 匹配数据
+        const _dateList = (configList) => {
+            const _map = new Map();
+            const configArr = JSON.parse(JSON.stringify(configData));
+            // 补日期的零
+            configArr &&
+                configArr.length &&
+                configArr.map((item) => {
+                    if (item.matchDate === '' || item.matchDate === undefined)
+                        return;
+                    const date = item.matchDate.split('-');
+                    const day = date[2].split('');
+                    if (day.length === 1) {
+                        date[2] = `0${date[2]}`;
+                        item.matchDate = date.join('-');
+                    }
+                });
+            for (const item of configArr) {
+                _map.set(item.matchDate, item);
+            }
+            return configList.map((item) => {
+                return item.reduce((res, i) => {
+                    if (_map.has(i.formattedDate)) {
+                        const _disabled = _map.get(i.formattedDate)['disabled'];
+                        const _marked = _map.get(i.formattedDate)['marked'];
+                        i['disabled'] =
+                            _disabled !== undefined ? JSON.parse(_disabled) : false;
+                        i['marked'] = _marked;
+                    }
+                    res.push(i);
+                    return res;
+                }, []);
+            });
+        };
+        return _dateList(createDateList(year, month, firstDayOfWeek, value, format));
+    }, [year, month, value, configData]);
     // 表头数组
     const colHeaderList = useMemo(() => {
         const weekTextArr = week;
@@ -112,7 +114,7 @@ export default function Calendar({ className, style, initVisible, initValue, con
             }
         }
         return list;
-    }, [firstDayOfWeek, isShowWeekend, week]);
+    }, []);
     // 补零
     // const fix0 = (num) => {
     //   return num < 10 ? `0${num}` : num;

package/dist/src/web/components/carousel/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import classNames from '../../utils/classnames';
 import Swipe from 'react-easy-swipe';
 import { useDebouncedCallback, useEventListener, useResizeObserver, } from '@react-hookz/web';
@@ -13,6 +13,15 @@ export default function Carousel({ className, style, autoplay, circular, vertica
     const [swipeStyle, setSwipeStyle] = useState(null);
     const [height, setHeight] = useState(0);
     const { change = () => { } } = events;
+    const setIndex = useCallback((index) => {
+        if (index >= itemCount) {
+            index = 0;
+        }
+        if (index < 0) {
+            index = itemCount - 1;
+        }
+        setCurrentIndex(index);
+    }, [itemCount, setCurrentIndex]);
     // 自动切换
     useEffect(() => {
         if (autoplay) {
@@ -23,10 +32,60 @@ export default function Carousel({ className, style, autoplay, circular, vertica
             }, interval);
             return () => clearInterval(timer);
         }
-    }, [currentIndex, autoplay]);
+    }, [currentIndex, autoplay, interval, setIndex]);
     // 触发切换
     const pre = useRef({ index: currentIndex }).current;
     useEffect(() => {
+        // 设置容器样式、动画
+        // TODO fix settimeout mess
+        const updateSwipeStyle = (to, cur, length) => {
+            let style = {};
+            // 最后向前到最开始
+            if (to === 0 && cur === length - 1) {
+                circular &&
+                    setSwipeStyle({
+                        transform: `translate3d(0, 0, 0)`,
+                    });
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -100%, 0)`
+                            : `translate3d(-100%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            // 第一个后退到最后
+            if (to === length - 1 && cur === 0) {
+                circular &&
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 2) * 100}%, 0)`
+                            : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
+                    });
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                            : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            style = {
+                transform: vertical
+                    ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                    : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+            };
+            if (to !== cur) {
+                style.transitionDuration = `${duration}ms`;
+            }
+            setSwipeStyle(style);
+        };
         updateSwipeStyle(currentIndex, pre.index, itemCount);
         change({
             current: currentIndex,
@@ -34,7 +93,7 @@ export default function Carousel({ className, style, autoplay, circular, vertica
         return () => {
             pre.index = currentIndex;
         };
-    }, [currentIndex, vertical]);
+    }, [currentIndex, vertical, pre, change, itemCount, circular, duration]);
     const outerWrapRef = useRef();
     useEventListener(outerWrapRef, 'load', (e) => {
         setHeight(e.target.clientHeight);
@@ -46,65 +105,6 @@ export default function Carousel({ className, style, autoplay, circular, vertica
                     width: x.width ? x.width : '100%',
                 } })));
     });
-    const setIndex = (index) => {
-        if (index >= itemCount) {
-            index = 0;
-        }
-        if (index < 0) {
-            index = itemCount - 1;
-        }
-        setCurrentIndex(index);
-    };
-    // 设置容器样式、动画
-    // TODO fix settimeout mess
-    const updateSwipeStyle = (to, cur, length) => {
-        let style = {};
-        // 最后向前到最开始
-        if (to === 0 && cur === length - 1) {
-            circular &&
-                setSwipeStyle({
-                    transform: `translate3d(0, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -100%, 0)`
-                        : `translate3d(-100%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        // 第一个后退到最后
-        if (to === length - 1 && cur === 0) {
-            circular &&
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 2) * 100}%, 0)`
-                        : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        style = {
-            transform: vertical
-                ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-        };
-        if (to !== cur) {
-            style.transitionDuration = `${duration}ms`;
-        }
-        setSwipeStyle(style);
-    };
     return (React.createElement("div", { className: classNames('g-swiper weda-ui g-carousel', className, {
             vertical: vertical,
         }), style: { height: height ? height : 'auto', ...style }, ref: outerWrapRef, id: id, "data-testid": "carousel" },

package/dist/src/web/components/chart/bar/index.js

@@ -4,8 +4,11 @@ import { checkIsNewData, transform } from '../common/data-transform';
 import { Chart } from '../common/Chart';
 import { emptyArray } from '../../../utils/constant';
 import { ChartCustomConnector } from '../common/chart-custom-connector';
-import { ChartErrorBoundary } from '../common/error-boundary';
+import { CommonErrorBoundary } from '../../common/error-boundary';
+import { debug } from '../../../utils/console';
+const logger = debug('bar:impl');
 function BarImpl(props) {
+    logger.log(props, checkIsNewData(props));
     if (props.dataSourceType === 'data-model') {
         if (checkIsNewData(props)) {
             props.dataSource = {
@@ -21,6 +24,7 @@ function BarImpl(props) {
         oldBarProps['connectorMethod'] = undefined;
         oldBarProps['connectorParams'] = undefined;
         oldBarProps['connector'] = undefined;
+        debug('bar:old').log('OldBar', oldBarProps);
         return React.createElement(OldBar, { ...oldBarProps });
     }
     else if (props.dataSourceType === 'variable') {
@@ -36,6 +40,6 @@ function BarImpl(props) {
     }
 }
 export default function Bar(props) {
-    return (React.createElement(ChartErrorBoundary, { ...props },
+    return (React.createElement(CommonErrorBoundary, { ...props },
         React.createElement(BarImpl, { ...props })));
 }

package/dist/src/web/components/chart/common/Chart.d.ts

@@ -3,6 +3,7 @@ import type { CommonPropsType } from '../../../types';
 import type { ECOption } from './echarts';
 interface IChartProps extends CommonPropsType {
     chartOptions: ECOption;
+    showLoading?: boolean;
     ['data-testid']: string;
 }
 export declare function Chart(props: IChartProps): JSX.Element;

package/dist/src/web/components/chart/common/Chart.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import classNames from '../../../utils/classnames';
 import { useChart } from './useChart';
 export function Chart(props) {
-    const { id, style, className, chartOptions, 'data-testid': dataTestId, } = props;
+    const { id, style, className, chartOptions, showLoading, 'data-testid': dataTestId, } = props;
     const inlineStyle = {
         height: '380px',
         width: '100%',
@@ -15,6 +15,14 @@ export function Chart(props) {
         var _a;
         (_a = chart === null || chart === void 0 ? void 0 : chart.setOption) === null || _a === void 0 ? void 0 : _a.call(chart, chartOptions);
     }, [chart, chartOptions]);
+    useEffect(() => {
+        if (showLoading === true) {
+            chart === null || chart === void 0 ? void 0 : chart.showLoading();
+        }
+        else {
+            chart === null || chart === void 0 ? void 0 : chart.hideLoading();
+        }
+    }, [showLoading, chart]);
     return (React.createElement("div", { id: id, "data-testid": dataTestId, ref: ref, style: inlineStyle, className: classNames({
             'echart-wrapper-canvas': true,
             'echart-dark-body': true,

package/dist/src/web/components/chart/common/chart-custom-connector.js

@@ -21,7 +21,7 @@ export const ChartCustomConnector = (props) => {
     }, []);
     useEffect(() => {
         actions.execute();
-    }, [connector, connectorMethod, connectorParams]);
+    }, [connector, connectorMethod, connectorParams, actions]);
     if (state.error) {
         throw state.error;
     }

package/dist/src/web/components/chart/common/core/eChartBase.js

@@ -19,7 +19,7 @@ class EchartBase extends AbstractEchartBaseModal {
         });
         this.config = getConfig();
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     async setOptions(_options) { }
     /** 获取所有配置好的图表数据 */
     getOptions() {

package/dist/src/web/components/chart/common/data-transform.js

@@ -1,9 +1,11 @@
+import { debug } from '../../../utils/console';
 import { ChartError } from './chart-error';
 export const checkIsNewData = (props) => {
     var _a, _b;
     return (Object.keys((_a = props.dataSource) !== null && _a !== void 0 ? _a : {}).length === 0 &&
         Object.keys((_b = props['dataModel']) !== null && _b !== void 0 ? _b : {}).length > 0);
 };
+const logger = debug('chart:transform');
 export function transform(chartType, dataInput, chartInput) {
     var _a;
     if (!Array.isArray(dataInput)) {
@@ -173,7 +175,7 @@ export function transform(chartType, dataInput, chartInput) {
             });
         });
     }
-    console.log(dataInput, chartInput, 'TRANSFORM');
+    logger.log(dataInput, chartInput);
     if (chartType === 'bar' || chartType === 'line') {
         const xAxis = {
             name: chartInput.isXaxisName ? chartInput.xAxisName : '',

package/dist/src/web/components/chart/common/useChart.js

@@ -1,5 +1,7 @@
 import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect, useResizeObserver, } from '@react-hookz/web';
 import { useEffect, useState } from 'react';
+import { debug } from '../../../utils/console';
+const logger = debug('chart:use-chart');
 export function useChart(ref) {
     const [chartRef, setChartRef] = useState(null);
     const isMounted = useIsMounted();
@@ -30,6 +32,7 @@ export function useWedaChart(domRef, ModalClass, options) {
     const getOptions = async () => {
         const chartModal = new ModalClass();
         let finalOptions = await chartModal.setOptions(options);
+        logger.log(options, finalOptions);
         if (!finalOptions) {
             finalOptions = chartModal.getOptions();
         }
@@ -47,8 +50,16 @@ export function useWedaChart(domRef, ModalClass, options) {
         actions,
     ]);
     useEffect(() => {
+        if (state.status === 'loading' || state.status === 'not-executed') {
+            chart === null || chart === void 0 ? void 0 : chart.showLoading();
+            return;
+        }
+        chart === null || chart === void 0 ? void 0 : chart.hideLoading();
+    }, [chart, state.status]);
+    useEffect(() => {
+        logger.log(state, state.result);
         if (state.status === 'success' && chart) {
-            console.log(ModalClass.name, options, state.result, window.location.href);
+            logger.log(options, state.result, window.location.href);
             chart.setOption(state.result, true // noMerge 全刷
             );
         }
@@ -57,5 +68,5 @@ export function useWedaChart(domRef, ModalClass, options) {
                 console.error(state.error);
             }
         }
-    }, [state]);
+    }, [state, chart, options]);
 }

package/dist/src/web/components/chart/line/index.js

@@ -4,7 +4,7 @@ import { checkIsNewData, transform } from '../common/data-transform';
 import { emptyArray } from '../../../utils/constant';
 import { Chart } from '../common/Chart';
 import { ChartCustomConnector } from '../common/chart-custom-connector';
-import { ChartErrorBoundary } from '../common/error-boundary';
+import { CommonErrorBoundary } from '../../common/error-boundary';
 function LineImpl(props) {
     if (props.dataSourceType === 'data-model') {
         if (checkIsNewData(props)) {
@@ -37,6 +37,6 @@ function LineImpl(props) {
     }
 }
 export default function Line(props) {
-    return (React.createElement(ChartErrorBoundary, { ...props },
+    return (React.createElement(CommonErrorBoundary, { ...props },
         React.createElement(LineImpl, { ...props })));
 }

package/dist/src/web/components/chart/pie/index.js

@@ -4,7 +4,7 @@ import { checkIsNewData, transform } from '../common/data-transform';
 import { emptyArray } from '../../../utils/constant';
 import { Chart } from '../common/Chart';
 import { ChartCustomConnector } from '../common/chart-custom-connector';
-import { ChartErrorBoundary } from '../common/error-boundary';
+import { CommonErrorBoundary } from '../../common/error-boundary';
 function PieImpl(props) {
     if (props.dataSourceType === 'data-model') {
         if (checkIsNewData(props)) {
@@ -37,6 +37,6 @@ function PieImpl(props) {
     }
 }
 export default function Pie(props) {
-    return (React.createElement(ChartErrorBoundary, { ...props },
+    return (React.createElement(CommonErrorBoundary, { ...props },
         React.createElement(PieImpl, { ...props })));
 }

package/dist/src/web/components/common/error-boundary.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+export declare const CommonErrorBoundary: (props: CommonPropsType & {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/src/web/components/common/error-boundary.js

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import classNames from '../../utils/classnames';
+import { ChartError } from '../chart/common/chart-error';
+import { DetectedRenderLoppError } from './use-loop-render-detect';
+export const CommonErrorBoundary = (props) => {
+    const FallbackComponent = ({ error, resetErrorBoundary, }) => {
+        const errorMsg = useMemo(() => {
+            var _a;
+            if (error instanceof ChartError ||
+                error instanceof DetectedRenderLoppError) {
+                return error.message;
+            }
+            else {
+                return (_a = error.stack) !== null && _a !== void 0 ? _a : error.message;
+            }
+        }, [error]);
+        return (React.createElement("div", { style: props.style, id: props.id, className: classNames([
+                'wedaui-common-error-boundary',
+                props.className,
+            ]) },
+            React.createElement("code", null,
+                React.createElement("pre", { style: { display: 'inline' } }, errorMsg)),
+            React.createElement("a", { href: "#", style: {
+                    padding: '0 8px',
+                    textDecoration: 'none',
+                }, onClick: (ev) => {
+                    ev.preventDefault();
+                    resetErrorBoundary();
+                } }, "\u91CD\u8BD5")));
+    };
+    return (React.createElement(ErrorBoundary, { FallbackComponent: FallbackComponent }, props.children));
+};

package/dist/src/web/components/common/use-loop-render-detect.d.ts

@@ -0,0 +1,11 @@
+export declare const useRenderCount: () => [number, () => void];
+declare type ILoopRenderDetectOptions = Readonly<{
+    limit?: number;
+    throwError?: boolean;
+    message?: string;
+    timeWindowMs?: number;
+}>;
+export declare class DetectedRenderLoppError extends Error {
+}
+export declare const useLoopRenderDetect: (inputOptions?: ILoopRenderDetectOptions) => boolean;
+export {};

package/dist/src/web/components/common/use-loop-render-detect.js

@@ -0,0 +1,124 @@
+import { useSyncedRef } from '@react-hookz/web';
+import { useCallback, useEffect, useRef } from 'react';
+import { debug } from '../../utils/console';
+export const useRenderCount = () => {
+    const countRef = useRef(0);
+    const syncedRef = useSyncedRef(++countRef.current);
+    const reset = useCallback(() => {
+        countRef.current = 0;
+    }, []);
+    return [syncedRef.current, reset];
+};
+class FpsCounter {
+    constructor() {
+        Object.defineProperty(this, "t", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: performance || Date
+        });
+        Object.defineProperty(this, "frames", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "prevTime", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "started", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "fpsCnt", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 30
+        });
+    }
+    get isStarted() {
+        return this.started;
+    }
+    get fps() {
+        return this.fpsCnt;
+    }
+    tick() {
+        this.started = true;
+        this.frames++;
+        const time = this.t.now();
+        if (time >= this.prevTime + 1000) {
+            this.fpsCnt = (this.frames * 1000) / (time - this.prevTime);
+            this.frames = 0;
+            this.prevTime = time;
+        }
+    }
+}
+const fpsCounterSingleton = new FpsCounter();
+function useFps() {
+    useEffect(() => {
+        if (typeof requestAnimationFrame == 'undefined')
+            return;
+        function tick() {
+            fpsCounterSingleton.tick();
+            // eslint-disable-next-line rulesdir/no-timer
+            requestAnimationFrame(tick);
+        }
+        if (!fpsCounterSingleton.isStarted) {
+            // eslint-disable-next-line rulesdir/no-timer
+            requestAnimationFrame(tick);
+        }
+    }, []);
+    const syncedRef = useSyncedRef(fpsCounterSingleton.fps);
+    return syncedRef.current;
+}
+const defaultOptions = {
+    limit: 500,
+    throwError: true,
+    message: '组件控制逻辑出现死循环，请检查并修改相关配置',
+    timeWindowMs: 6 * 1000,
+};
+const logger = debug('useLoopRenderDetect');
+export class DetectedRenderLoppError extends Error {
+}
+export const useLoopRenderDetect = (inputOptions = defaultOptions) => {
+    const options = Object.assign({}, defaultOptions, inputOptions);
+    const [renderCount, reset] = useRenderCount();
+    useEffect(() => {
+        let id = null;
+        const resetCountTimer = () => {
+            reset();
+            // eslint-disable-next-line rulesdir/no-timer
+            id = setTimeout(() => {
+                resetCountTimer();
+            }, options.timeWindowMs);
+        };
+        resetCountTimer();
+        return () => {
+            if (id !== null) {
+                clearTimeout(id);
+            }
+        };
+    }, [options.timeWindowMs, reset]);
+    const fps = useFps();
+    logger.log({
+        timeWindowMs: options.timeWindowMs,
+        fps,
+        renderCount,
+        limit: options.limit,
+    });
+    if ((renderCount > options.limit && fps < 1) ||
+        renderCount > options.limit * 3) {
+        reset();
+        if (options.throwError) {
+            throw new DetectedRenderLoppError(options.message);
+        }
+        return true;
+    }
+    return false;
+};