@stenajs-webui/core - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/index.d.ts

@@ -34,2 +34,6 @@ export * from "./theme/hooks/UseTheme";
 export * from "./types/Omit";
+export * from "./hooks/UseBoolean";
+export * from "./hooks/UseDebounce";
+export * from "./hooks/UseMultiOnClickOutside";
 export * from "./hooks/UseOnClickOutside";
+export * from "./hooks/UseOnNoMouseInput";

dist/index.es.js

@@ -1,4 +0,5 @@
-import { createContext, useContext, useMemo, createElement, useRef, useEffect } from 'react';
+import { createContext, useContext, useMemo, createElement, useState, useCallback, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { alignItems, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flex, flexWrap, height, justifyContent, minHeight, maxHeight, maxWidth, overflow, position, width, zIndex, left, right, top, bottom, fontSize, fontFamily, fontWeight } from 'styled-system';
+import { debounce } from 'lodash-es';
 
@@ -360,2 +361,59 @@ var defaultTheme = {
 
+var useBoolean = function (initialValue) {
+    var _a = useState(initialValue), value = _a[0], setValue = _a[1];
+    var setTrue = useCallback(function () {
+        setValue(true);
+    }, [setValue]);
+    var setFalse = useCallback(function () {
+        setValue(false);
+    }, [setValue]);
+    var toggle = useCallback(function () {
+        setValue(function (v) { return !v; });
+    }, [setValue]);
+    return [value, setTrue, setFalse, toggle];
+};
+
+var useDebounce = function (value, delay) {
+    // State and setters for debounced value
+    var _a = useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    useEffect(function () {
+        // Update debounced value after delay
+        var handler = setTimeout(function () {
+            setDebouncedValue(value);
+        }, delay);
+        // Cancel the timeout if value changes (also on delay change or unmount)
+        // This is how we prevent debounced value from updating if value is changed ...
+        // .. within the delay period. Timeout gets cleared and restarted.
+        return function () {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+};
+
+var useMultiOnClickOutside = function (refs, handler) {
+    var eventHandler = useRef(function () {
+        return;
+    });
+    useEffect(function () {
+        eventHandler.current = handler;
+    }, [handler]);
+    useEffect(function () {
+        var listener = function (event) {
+            // Do nothing if clicking ref's element or descendent elements
+            var allNotContains = refs.every(function (ref) { return ref.current && !ref.current.contains(event.target); });
+            if (!allNotContains) {
+                return;
+            }
+            eventHandler.current(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, refs.slice());
+};
+
 var useOnClickOutside = function (ref, handler) {
@@ -385,3 +443,20 @@ var eventHandler = useRef(function () {
 
-export { Absolute, Border, Box, Clickable, Column, Indent, Inline, LargeText, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, useOnClickOutside, useTheme, useThemeFields, useThemeSelector };
+var events = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll'];
+var useOnNoMouseMovement = function (callback, delay) {
+    var eventHandler = useRef(function () {
+        return;
+    });
+    useEffect(function () {
+        eventHandler.current = callback;
+    }, [callback]);
+    useEffect(function () {
+        var onIdleChange = debounce(eventHandler.current, delay);
+        events.forEach(function (event) { return window.addEventListener(event, onIdleChange); });
+        return function () {
+            events.forEach(function (event) { return window.removeEventListener(event, onIdleChange); });
+        };
+    }, [delay]);
+};
+
+export { Absolute, Border, Box, Clickable, Column, Indent, Inline, LargeText, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, useBoolean, useDebounce, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useTheme, useThemeFields, useThemeSelector };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -10,2 +10,3 @@ 'use strict';
 var styledSystem = require('styled-system');
+var lodashEs = require('lodash-es');
 
@@ -367,2 +368,59 @@ var defaultTheme = {
 
+var useBoolean = function (initialValue) {
+    var _a = React.useState(initialValue), value = _a[0], setValue = _a[1];
+    var setTrue = React.useCallback(function () {
+        setValue(true);
+    }, [setValue]);
+    var setFalse = React.useCallback(function () {
+        setValue(false);
+    }, [setValue]);
+    var toggle = React.useCallback(function () {
+        setValue(function (v) { return !v; });
+    }, [setValue]);
+    return [value, setTrue, setFalse, toggle];
+};
+
+var useDebounce = function (value, delay) {
+    // State and setters for debounced value
+    var _a = React.useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    React.useEffect(function () {
+        // Update debounced value after delay
+        var handler = setTimeout(function () {
+            setDebouncedValue(value);
+        }, delay);
+        // Cancel the timeout if value changes (also on delay change or unmount)
+        // This is how we prevent debounced value from updating if value is changed ...
+        // .. within the delay period. Timeout gets cleared and restarted.
+        return function () {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+};
+
+var useMultiOnClickOutside = function (refs, handler) {
+    var eventHandler = React.useRef(function () {
+        return;
+    });
+    React.useEffect(function () {
+        eventHandler.current = handler;
+    }, [handler]);
+    React.useEffect(function () {
+        var listener = function (event) {
+            // Do nothing if clicking ref's element or descendent elements
+            var allNotContains = refs.every(function (ref) { return ref.current && !ref.current.contains(event.target); });
+            if (!allNotContains) {
+                return;
+            }
+            eventHandler.current(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, refs.slice());
+};
+
 var useOnClickOutside = function (ref, handler) {
@@ -392,2 +450,19 @@ var eventHandler = React.useRef(function () {
 
+var events = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll'];
+var useOnNoMouseMovement = function (callback, delay) {
+    var eventHandler = React.useRef(function () {
+        return;
+    });
+    React.useEffect(function () {
+        eventHandler.current = callback;
+    }, [callback]);
+    React.useEffect(function () {
+        var onIdleChange = lodashEs.debounce(eventHandler.current, delay);
+        events.forEach(function (event) { return window.addEventListener(event, onIdleChange); });
+        return function () {
+            events.forEach(function (event) { return window.removeEventListener(event, onIdleChange); });
+        };
+    }, [delay]);
+};
+
 exports.Absolute = Absolute;
@@ -418,3 +493,7 @@ exports.Border = Border;
 exports.defaultTinyTextTheme = defaultTinyTextTheme;
+exports.useBoolean = useBoolean;
+exports.useDebounce = useDebounce;
+exports.useMultiOnClickOutside = useMultiOnClickOutside;
 exports.useOnClickOutside = useOnClickOutside;
+exports.useOnNoMouseMovement = useOnNoMouseMovement;
 exports.useTheme = useTheme;
@@ -421,0 +500,0 @@ exports.useThemeFields = useThemeFields;

package.json

 {
   "name": "@stenajs-webui/core",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "",
@@ -32,5 +32,7 @@ "author": "mattias800",
     "@emotion/styled": ">=10.0.10",
-    "@types/react": ">=16.8.18",
+    "@types/lodash-es": ">=4.17.3",
+    "@types/react": ">=16.8.19",
     "@types/react-dom": ">=16.8.4",
     "@types/styled-system": ">=4.1.0",
+    "lodash-es": ">=4.17.11",
     "prop-types": ">=15.5.4",
@@ -42,8 +44,14 @@ "react": ">=16.8.6",
   "devDependencies": {
+    "@emotion/core": "^10.0.10",
+    "@emotion/styled": "^10.0.10",
     "@types/jest": "^23.1.5",
-    "@types/react": "^16.3.13",
-    "@types/react-dom": "^16.0.5",
+    "@types/lodash-es": "^4.17.3",
+    "@types/react": "^16.8.19",
+    "@types/react-dom": "^16.8.4",
     "@types/styled-system": "^4.1.0",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1"
+    "lodash-es": "^4.17.11",
+    "prop-types": "^15.5.4",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "styled-system": "^4.1.0"
   },
@@ -50,0 +58,0 @@ "files": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

165997

increased by12.03%

Lines of code

1284

increased by13.23%

Worsened metrics

Dependency count

11

increased by22.22%

Dev dependency count

12

increased by100%

No dependency changes