1 line
4.0 KiB
Plaintext
1 line
4.0 KiB
Plaintext
{"version":3,"sources":["../src/use-spinner.ts"],"sourcesContent":["import { useInterval } from \"@chakra-ui/react-use-interval\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\n/**\n * When click and hold on a button - the speed of auto changing the value.\n */\nconst CONTINUOUS_CHANGE_INTERVAL = 50\n\n/**\n * When click and hold on a button - the delay before auto changing the value.\n */\nconst CONTINUOUS_CHANGE_DELAY = 300\n\ntype Action = \"increment\" | \"decrement\"\n\n/**\n * React hook used in the number input to spin its\n * value on long press of the spin buttons\n *\n * @param increment the function to increment\n * @param decrement the function to decrement\n */\nexport function useSpinner(increment: Function, decrement: Function) {\n /**\n * To keep incrementing/decrementing on press, we call that `spinning`\n */\n const [isSpinning, setIsSpinning] = useState(false)\n\n // This state keeps track of the action (\"increment\" or \"decrement\")\n const [action, setAction] = useState<Action | null>(null)\n\n // To increment the value the first time you mousedown, we call that `runOnce`\n const [runOnce, setRunOnce] = useState(true)\n\n // Store the timeout instance id in a ref, so we can clear the timeout later\n const timeoutRef = useRef<any>(null)\n\n // Clears the timeout from memory\n const removeTimeout = () => clearTimeout(timeoutRef.current)\n\n /**\n * useInterval hook provides a performant way to\n * update the state value at specific interval\n */\n useInterval(\n () => {\n if (action === \"increment\") {\n increment()\n }\n if (action === \"decrement\") {\n decrement()\n }\n },\n isSpinning ? CONTINUOUS_CHANGE_INTERVAL : null,\n )\n\n // Function to activate the spinning and increment the value\n const up = useCallback(() => {\n // increment the first time\n if (runOnce) {\n increment()\n }\n\n // after a delay, keep incrementing at interval (\"spinning up\")\n timeoutRef.current = setTimeout(() => {\n setRunOnce(false)\n setIsSpinning(true)\n setAction(\"increment\")\n }, CONTINUOUS_CHANGE_DELAY)\n }, [increment, runOnce])\n\n // Function to activate the spinning and increment the value\n const down = useCallback(() => {\n // decrement the first time\n if (runOnce) {\n decrement()\n }\n\n // after a delay, keep decrementing at interval (\"spinning down\")\n timeoutRef.current = setTimeout(() => {\n setRunOnce(false)\n setIsSpinning(true)\n setAction(\"decrement\")\n }, CONTINUOUS_CHANGE_DELAY)\n }, [decrement, runOnce])\n\n // Function to stop spinning (useful for mouseup, keyup handlers)\n const stop = useCallback(() => {\n setRunOnce(true)\n setIsSpinning(false)\n removeTimeout()\n }, [])\n\n /**\n * If the component unmounts while spinning,\n * let's clear the timeout as well\n */\n useEffect(() => {\n return () => removeTimeout()\n }, [])\n\n return { up, down, stop, isSpinning }\n}\n"],"mappings":";;;AAAA,SAAS,mBAAmB;AAC5B,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAKzD,IAAM,6BAA6B;AAKnC,IAAM,0BAA0B;AAWzB,SAAS,WAAW,WAAqB,WAAqB;AAInE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AAGxD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAG3C,QAAM,aAAa,OAAY,IAAI;AAGnC,QAAM,gBAAgB,MAAM,aAAa,WAAW,OAAO;AAM3D;AAAA,IACE,MAAM;AACJ,UAAI,WAAW,aAAa;AAC1B,kBAAU;AAAA,MACZ;AACA,UAAI,WAAW,aAAa;AAC1B,kBAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,aAAa,6BAA6B;AAAA,EAC5C;AAGA,QAAM,KAAK,YAAY,MAAM;AAE3B,QAAI,SAAS;AACX,gBAAU;AAAA,IACZ;AAGA,eAAW,UAAU,WAAW,MAAM;AACpC,iBAAW,KAAK;AAChB,oBAAc,IAAI;AAClB,gBAAU,WAAW;AAAA,IACvB,GAAG,uBAAuB;AAAA,EAC5B,GAAG,CAAC,WAAW,OAAO,CAAC;AAGvB,QAAM,OAAO,YAAY,MAAM;AAE7B,QAAI,SAAS;AACX,gBAAU;AAAA,IACZ;AAGA,eAAW,UAAU,WAAW,MAAM;AACpC,iBAAW,KAAK;AAChB,oBAAc,IAAI;AAClB,gBAAU,WAAW;AAAA,IACvB,GAAG,uBAAuB;AAAA,EAC5B,GAAG,CAAC,WAAW,OAAO,CAAC;AAGvB,QAAM,OAAO,YAAY,MAAM;AAC7B,eAAW,IAAI;AACf,kBAAc,KAAK;AACnB,kBAAc;AAAA,EAChB,GAAG,CAAC,CAAC;AAML,YAAU,MAAM;AACd,WAAO,MAAM,cAAc;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,IAAI,MAAM,MAAM,WAAW;AACtC;","names":[]} |