react-kanca 1.2.0 → 1.3.1

package/README.md

@@ -11,41 +11,56 @@ yarn add react-kanca
 ```
 
 ```bash
-npm install --save react-kanca
+npm install react-kanca
+```
+
+```bash
+pnpm i react-kanca
 ```
 
 ![React Kanca](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*nl2InXMi1tuDmnrv.png)
 
 ## Usage
 
+Storybook Demo:
+[![React Kanca Storybook](https://raw.githubusercontent.com/storybookjs/brand/37c5e9bde5c56b69a8c4312de7d60fb3a9d7de9d/icon/icon-storybook-default.svg)](https://react-kanca-storybook.vercel.app/)
+
 ```jsx
 import {
-  useWindowSize,
-  usePageVisible,
-  useDebounce,
-  usePrevious,
-  useHover,
-  useScrolling,
+  useBatteryInfo,
   useBeforeUnload,
-  useThrottle,
-  useLocalStorage,
-  useEqualObject,
+  useClickOutside,
+  useColorScheme,
+  useConnection,
   useCookie,
+  useCopyToClipboard,
+  useDebounce,
+  useEqualObject,
+  useForceUpdate,
+  useFullScreen,
   useGeolocation,
+  useHover,
+  useIntersectionObserver,
+  useInterval,
   useIsFirstRender,
-  useConnection,
-  useBatteryInfo,
-  useCopyToClipboard,
+  useLocalStorage,
   useMedia,
-  useClickOutside,
-  useColorScheme,
-  useFullScreen,
-  useSessionStorage,
-  useScrollLock,
-  usePreferredLanguage,
+  useMobileLandscape,
   useMousePageLeave,
+  useMultiStateValidator,
+  useOnlineStatus,
   usePageLeave,
-  useForceUpdate
+  usePageVisible,
+  usePreferredLanguage,
+  usePrevious,
+  useScrolling,
+  useScrollLock,
+  useScrollToElement,
+  useSessionStorage,
+  useStateValidator,
+  useThrottle,
+  useWindowScroll,
+  useWindowSize,
 } from 'react-kanca'
 
 // import 'react-kanca/dist/index.css'
@@ -53,7 +68,6 @@ import {
 const App = () => {
     const { width, height } = useWindowSize()
     const isVisible = usePageVisible()
-    const debounce = useDebounce('React Kanca', 5000)
 
     .
     .

package/dist/index.js

@@ -42,19 +42,23 @@ var useWindowSize = function useWindowSize() {
   return size;
 };
 
-var useDebounce = function useDebounce(value, delay) {
-  var _useState = react.useState(''),
-    debounce = _useState[0],
-    setDebounce = _useState[1];
-  react.useEffect(function () {
+var useDebounce = function useDebounce() {
+  var _useState = react.useState(null),
+    debouncedValue = _useState[0],
+    setDebouncedValue = _useState[1];
+  var debounce = function debounce(value, delay) {
     var handler = setTimeout(function () {
-      setDebounce(value);
+      if (typeof value === 'function') {
+        value();
+      } else {
+        setDebouncedValue(value);
+      }
     }, delay);
     return function () {
       clearTimeout(handler);
     };
-  }, [value, delay]);
-  return debounce;
+  };
+  return [debouncedValue, debounce];
 };
 
 var usePrevious = function usePrevious(value) {
@@ -188,16 +192,16 @@ var useThrottle = function useThrottle(value, ms) {
   react.useEffect(function () {
     if (!timeout.current) {
       setState(value);
-      var timeoutCallback = function timeoutCallback() {
+      var _timeoutCallback = function timeoutCallback() {
         if (hasNextValue.current) {
           hasNextValue.current = false;
           setState(nextValue.current);
-          timeout.current = setTimeout(timeoutCallback, ms);
+          timeout.current = setTimeout(_timeoutCallback, ms);
         } else {
           timeout.current = undefined;
         }
       };
-      timeout.current = setTimeout(timeoutCallback, ms);
+      timeout.current = setTimeout(_timeoutCallback, ms);
     } else {
       nextValue.current = value;
       hasNextValue.current = true;
@@ -264,7 +268,7 @@ var useLocalStorage = function useLocalStorage(key, initialValue, options) {
   return [state, set, remove];
 };
 
-var useEqualObject = function useEqualObject(obj1, obj2) {
+var _useEqualObject = function useEqualObject(obj1, obj2) {
   if (obj1 === obj2) return true;
   if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) return false;
   var keys1 = Object.keys(obj1);
@@ -272,7 +276,7 @@ var useEqualObject = function useEqualObject(obj1, obj2) {
   if (keys1.length !== keys2.length) return false;
   for (var _i = 0, _keys = keys1; _i < _keys.length; _i++) {
     var key = _keys[_i];
-    if (!keys2.includes(key) || !useEqualObject(obj1[key], obj2[key])) return false;
+    if (!keys2.includes(key) || !_useEqualObject(obj1[key], obj2[key])) return false;
   }
   return true;
 };
@@ -295,18 +299,13 @@ var useCookie = function useCookie(cookieName) {
 };
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 var useGeolocation = function useGeolocation(options) {
@@ -417,11 +416,8 @@ var useBatteryInfo = function useBatteryInfo() {
     isCharging = _useState2[0],
     setIsCharging = _useState2[1];
   var _useState3 = react.useState(null),
-    chargingTime = _useState3[0],
-    setChargingTime = _useState3[1];
-  var _useState4 = react.useState(null),
-    dischargingTime = _useState4[0],
-    setDischargingTime = _useState4[1];
+    dischargingTime = _useState3[0],
+    setDischargingTime = _useState3[1];
   react.useEffect(function () {
     var getBatteryInfo = function getBatteryInfo() {
       try {
@@ -430,7 +426,6 @@ var useBatteryInfo = function useBatteryInfo() {
             var updateBatteryInfo = function updateBatteryInfo() {
               setBatteryLevel(Math.round(battery.level * 100));
               setIsCharging(battery.charging);
-              setChargingTime(battery.chargingTime);
               setDischargingTime(battery.dischargingTime);
             };
             updateBatteryInfo();
@@ -458,7 +453,6 @@ var useBatteryInfo = function useBatteryInfo() {
   return {
     batteryLevel: batteryLevel,
     isCharging: isCharging,
-    chargingTime: chargingTime,
     dischargingTime: dischargingTime
   };
 };
@@ -656,6 +650,201 @@ var useForceUpdate = function useForceUpdate() {
   return update;
 };
 
+var useInterval = function useInterval(callback, delay) {
+  var savedCallback = react.useRef(function () {});
+  react.useEffect(function () {
+    savedCallback.current = callback;
+  });
+  react.useEffect(function () {
+    if (delay !== null) {
+      var interval = setInterval(function () {
+        return savedCallback.current();
+      }, delay || 0);
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+    return undefined;
+  }, [delay]);
+};
+
+var useIntersectionObserver = function useIntersectionObserver(targetRef, options) {
+  var _useState = react.useState(false),
+    isIntersecting = _useState[0],
+    setIsIntersecting = _useState[1];
+  react.useEffect(function () {
+    var observer = new IntersectionObserver(function (_ref) {
+      var entry = _ref[0];
+      setIsIntersecting(entry.isIntersecting);
+    }, options);
+    if (targetRef.current) {
+      observer.observe(targetRef.current);
+    }
+    return function () {
+      if (targetRef.current) {
+        observer.unobserve(targetRef.current);
+      }
+    };
+  }, [targetRef, options]);
+  return isIntersecting;
+};
+
+var useMobileLandscape = function useMobileLandscape() {
+  var _useState = react.useState(false),
+    isLandscape = _useState[0],
+    setIsLandscape = _useState[1];
+  var _useState2 = react.useState(false),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+  var _useState3 = react.useState(false),
+    isMobileLandscape = _useState3[0],
+    setIsMobileLandscape = _useState3[1];
+  var handleResize = function handleResize() {
+    var landscape = window.innerWidth > window.innerHeight;
+    var mobile = window.innerWidth <= 996;
+    setIsLandscape(landscape);
+    setIsMobile(mobile);
+    setIsMobileLandscape(landscape && mobile);
+  };
+  react.useEffect(function () {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return {
+    isMobileLandscape: isMobileLandscape,
+    isLandscape: isLandscape,
+    isMobile: isMobile
+  };
+};
+
+var useOnlineStatus = function useOnlineStatus() {
+  var _useState = react.useState(navigator.onLine),
+    isOnline = _useState[0],
+    setIsOnline = _useState[1];
+  react.useEffect(function () {
+    var handleOnline = function handleOnline() {
+      return setIsOnline(true);
+    };
+    var handleOffline = function handleOffline() {
+      return setIsOnline(false);
+    };
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return function () {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+  return isOnline;
+};
+
+var useScrollToElement = function useScrollToElement() {
+  var scrollToElement = react.useCallback(function (selectorOrRef, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    var element;
+    if (typeof selectorOrRef === 'string') {
+      element = document.querySelector(selectorOrRef);
+    } else if (selectorOrRef.current) {
+      element = selectorOrRef.current;
+    }
+    if (element) {
+      element.scrollIntoView(_extends({
+        behavior: 'smooth'
+      }, options));
+    }
+  }, []);
+  return scrollToElement;
+};
+
+var useStateValidator = function useStateValidator(state, validator, initialState) {
+  if (initialState === void 0) {
+    initialState = [undefined];
+  }
+  var validatorInner = react.useRef(validator);
+  var stateInner = react.useRef(state);
+  validatorInner.current = validator;
+  stateInner.current = state;
+  var _useState = react.useState(initialState),
+    validity = _useState[0],
+    setValidity = _useState[1];
+  var validate = react.useCallback(function () {
+    if (validatorInner.current.length >= 2) {
+      validatorInner.current(stateInner.current, setValidity);
+    } else {
+      setValidity(validatorInner.current(stateInner.current));
+    }
+  }, [setValidity]);
+  react.useEffect(function () {
+    validate();
+  }, [state]);
+  return [validity, validate];
+};
+
+var useMultiStateValidator = function useMultiStateValidator(states, validator, initialValidity) {
+  if (initialValidity === void 0) {
+    initialValidity = [undefined];
+  }
+  if (typeof states !== 'object') {
+    throw new Error("state'in bir nesne ya da dizi olması beklenirken -> " + typeof states);
+  }
+  var validatorInner = react.useRef(validator);
+  var statesInner = react.useRef(states);
+  validatorInner.current = validator;
+  statesInner.current = states;
+  var _useState = react.useState(initialValidity),
+    validity = _useState[0],
+    setValidity = _useState[1];
+  var validate = react.useCallback(function () {
+    if (validatorInner.current.length >= 2) {
+      validatorInner.current(statesInner.current, setValidity);
+    } else {
+      setValidity(validatorInner.current(statesInner.current));
+    }
+  }, [setValidity]);
+  react.useEffect(function () {
+    validate();
+  }, Object.values(states));
+  return [validity, validate];
+};
+
+var useWindowScroll = function useWindowScroll() {
+  var _useState = react.useState(function () {
+      return {
+        x: isBrowser ? window.pageXOffset : 0,
+        y: isBrowser ? window.pageYOffset : 0
+      };
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  react.useEffect(function () {
+    var handler = function handler() {
+      setState(function (state) {
+        var _window = window,
+          pageXOffset = _window.pageXOffset,
+          pageYOffset = _window.pageYOffset;
+        return state.x !== pageXOffset || state.y !== pageYOffset ? {
+          x: pageXOffset,
+          y: pageYOffset
+        } : state;
+      });
+    };
+    handler();
+    on(window, 'scroll', handler, {
+      capture: false,
+      passive: true
+    });
+    return function () {
+      off(window, 'scroll', handler);
+    };
+  }, []);
+  return state;
+};
+
 exports.useBatteryInfo = useBatteryInfo;
 exports.useBeforeUnload = useBeforeUnload;
 exports.useClickOutside = useClickOutside;
@@ -664,22 +853,30 @@ exports.useConnection = useConnection;
 exports.useCookie = useCookie;
 exports.useCopyToClipboard = useCopyToClipboard;
 exports.useDebounce = useDebounce;
-exports.useEqualObject = useEqualObject;
+exports.useEqualObject = _useEqualObject;
 exports.useForceUpdate = useForceUpdate;
 exports.useFullScreen = useFullScreen;
 exports.useGeolocation = useGeolocation;
 exports.useHover = useHover;
+exports.useIntersectionObserver = useIntersectionObserver;
+exports.useInterval = useInterval;
 exports.useIsFirstRender = useIsFirstRender;
 exports.useLocalStorage = useLocalStorage;
 exports.useMedia = useMedia;
+exports.useMobileLandscape = useMobileLandscape;
 exports.useMousePageLeave = useMousePageLeave;
+exports.useMultiStateValidator = useMultiStateValidator;
+exports.useOnlineStatus = useOnlineStatus;
 exports.usePageLeave = usePageLeave;
 exports.usePageVisible = usePageVisible;
 exports.usePreferredLanguage = usePreferredLanguage;
 exports.usePrevious = usePrevious;
 exports.useScrollLock = useScrollLock;
+exports.useScrollToElement = useScrollToElement;
 exports.useScrolling = useScrolling;
 exports.useSessionStorage = useSessionStorage;
+exports.useStateValidator = useStateValidator;
 exports.useThrottle = useThrottle;
+exports.useWindowScroll = useWindowScroll;
 exports.useWindowSize = useWindowSize;
 //# sourceMappingURL=index.js.map