"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[5298],{"./src/utils/useDelayedSwitch.ts":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{k:function(){return useDelayedSwitch}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");function useDelayedSwitch(value,options={}){const{duration:duration=250,delay:delay=250}=options,[delayedValue,setDelayedValue]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value),onStartTime=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{let timeout;if(value)timeout=setTimeout((()=>{onStartTime.current=new Date,setDelayedValue(value)}),delay);else{const timeSpent=onStartTime.current?Date.now()-onStartTime.current.valueOf():0,turnOff=()=>{onStartTime.current=void 0,setDelayedValue(value)};timeSpent>=duration?turnOff():timeout=setTimeout(turnOff,duration-timeSpent)}return()=>{timeout&&(clearTimeout(timeout),timeout=void 0)}}),[value,duration,delay]),delayedValue}},"./src/utils/useDelayedSwitch.story.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:function(){return Basic}});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_useDelayedSwitch__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/utils/useDelayedSwitch.ts");__webpack_exports__.default={title:"Utilities/useDelayedSwitch"};const Basic=({value:value,delay:delay,duration:duration})=>{const valueDelayed=(0,_useDelayedSwitch__WEBPACK_IMPORTED_MODULE_1__.k)(value,{delay:delay,duration:duration});return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{children:valueDelayed?"ON":"OFF"})};Basic.args={value:!1,duration:2e3,delay:2e3},Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:"({\n  value,\n  delay,\n  duration\n}) => {\n  const valueDelayed = useDelayedSwitch(value, {\n    delay,\n    duration\n  });\n  return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;\n}",...Basic.parameters?.docs?.source}}}}}]);