react-simplikit 0.0.30 → 0.0.31

package/dist/hooks/useDoubleClick/index.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useDoubleClick/index.ts
+var useDoubleClick_exports = {};
+__export(useDoubleClick_exports, {
+  useDoubleClick: () => useDoubleClick
+});
+module.exports = __toCommonJS(useDoubleClick_exports);
+
+// src/hooks/useDoubleClick/useDoubleClick.ts
+var import_react2 = require("react");
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDoubleClick/useDoubleClick.ts
+function useDoubleClick({
+  delay = 250,
+  click,
+  doubleClick
+}) {
+  const clickTimeout = (0, import_react2.useRef)(null);
+  const clearClickTimeout = usePreservedCallback(() => {
+    if (clickTimeout.current != null) {
+      window.clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+    }
+  });
+  (0, import_react2.useEffect)(() => () => clearClickTimeout(), [clearClickTimeout]);
+  const handleEvent = (0, import_react2.useCallback)(
+    (event) => {
+      clearClickTimeout();
+      if (click && event.detail === 1) {
+        clickTimeout.current = window.setTimeout(() => {
+          click(event);
+        }, delay);
+      }
+      if (event.detail === 2) {
+        doubleClick(event);
+      }
+    },
+    [click, doubleClick, delay, clearClickTimeout]
+  );
+  return handleEvent;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDoubleClick
+});

package/dist/hooks/useDoubleClick/index.d.cts

@@ -0,0 +1,42 @@
+import { MouseEvent } from 'react';
+
+type UseDoubleClickProps<E extends HTMLElement> = {
+    delay?: number;
+    click?: (event: MouseEvent<E>) => void;
+    doubleClick: (event: MouseEvent<E>) => void;
+};
+/**
+ * @description
+ * `useDoubleClick` is a React hook that differentiates between single and double click events.
+ * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
+ *
+ * @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
+ * @param {Object} params - Configuration options for click handling.
+ * @param {number} [params.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+ * @param {(event: MouseEvent<E>) => void} [params.click] - The callback function to be executed on a single click.
+ * @param {(event: MouseEvent<E>) => void} params.doubleClick - The callback function to be executed on a double click. Required.
+ *
+ * @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
+ *
+ * @example
+ * function GalleryCard() {
+ *   const [selected, setSelected] = useState(false);
+ *
+ *   const handleClick = () => setSelected((prev) => !prev);
+ *   const handleDoubleClick = () => alert('Zoom in!');
+ *
+ *   const handleEvent = useDoubleClick({
+ *     click: handleClick,
+ *     doubleClick: handleDoubleClick,
+ *   });
+ *
+ *   return (
+ *     <div onClick={handleEvent}>
+ *       {selected ? 'Selected' : 'Not selected'}
+ *     </div>
+ *   );
+ * }
+ */
+declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick, }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
+
+export { useDoubleClick };

package/esm/hooks/useDoubleClick/index.d.ts

@@ -0,0 +1,42 @@
+import { MouseEvent } from 'react';
+
+type UseDoubleClickProps<E extends HTMLElement> = {
+    delay?: number;
+    click?: (event: MouseEvent<E>) => void;
+    doubleClick: (event: MouseEvent<E>) => void;
+};
+/**
+ * @description
+ * `useDoubleClick` is a React hook that differentiates between single and double click events.
+ * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
+ *
+ * @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
+ * @param {Object} params - Configuration options for click handling.
+ * @param {number} [params.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+ * @param {(event: MouseEvent<E>) => void} [params.click] - The callback function to be executed on a single click.
+ * @param {(event: MouseEvent<E>) => void} params.doubleClick - The callback function to be executed on a double click. Required.
+ *
+ * @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
+ *
+ * @example
+ * function GalleryCard() {
+ *   const [selected, setSelected] = useState(false);
+ *
+ *   const handleClick = () => setSelected((prev) => !prev);
+ *   const handleDoubleClick = () => alert('Zoom in!');
+ *
+ *   const handleEvent = useDoubleClick({
+ *     click: handleClick,
+ *     doubleClick: handleDoubleClick,
+ *   });
+ *
+ *   return (
+ *     <div onClick={handleEvent}>
+ *       {selected ? 'Selected' : 'Not selected'}
+ *     </div>
+ *   );
+ * }
+ */
+declare function useDoubleClick<E extends HTMLElement = HTMLElement>({ delay, click, doubleClick, }: UseDoubleClickProps<E>): (event: MouseEvent<E>) => void;
+
+export { useDoubleClick };

package/esm/hooks/useDoubleClick/index.js

@@ -0,0 +1,48 @@
+// src/hooks/useDoubleClick/useDoubleClick.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDoubleClick/useDoubleClick.ts
+function useDoubleClick({
+  delay = 250,
+  click,
+  doubleClick
+}) {
+  const clickTimeout = useRef2(null);
+  const clearClickTimeout = usePreservedCallback(() => {
+    if (clickTimeout.current != null) {
+      window.clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+    }
+  });
+  useEffect2(() => () => clearClickTimeout(), [clearClickTimeout]);
+  const handleEvent = useCallback2(
+    (event) => {
+      clearClickTimeout();
+      if (click && event.detail === 1) {
+        clickTimeout.current = window.setTimeout(() => {
+          click(event);
+        }, delay);
+      }
+      if (event.detail === 2) {
+        doubleClick(event);
+      }
+    },
+    [click, doubleClick, delay, clearClickTimeout]
+  );
+  return handleEvent;
+}
+export {
+  useDoubleClick
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "main": "./dist/index.cjs",
   "type": "module",
   "sideEffects": false,