@aiszlab/relax 1.3.11 → 1.3.12

package/dist/hooks/use-image-loader.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var rxjs = require('rxjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * image loader
+ */
+var useImageLoader = function useImageLoader(_ref) {
+  var src = _ref.src,
+    crossOrigin = _ref.crossOrigin,
+    _ref$referrerPolicy = _ref.referrerPolicy,
+    referrerPolicy = _ref$referrerPolicy === void 0 ? "no-referrer" : _ref$referrerPolicy;
+  var loader = react.useRef();
+  var _useState = react.useState("none"),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  react.useEffect(function () {
+    if (!src) {
+      return setStatus("none");
+    }
+    // create observable to listen img status
+    new rxjs.Observable(function (subscriber) {
+      loader.current = subscriber;
+      subscriber.next();
+    }).subscribe({
+      next: function next() {
+        return setStatus("loading");
+      },
+      complete: function complete() {
+        return setStatus("loaded");
+      },
+      error: function error() {
+        return setStatus("error");
+      }
+    });
+    var load = function load() {
+      var _loader$current;
+      (_loader$current = loader.current) === null || _loader$current === void 0 || _loader$current.complete();
+    };
+    var error = function error() {
+      var _loader$current2;
+      (_loader$current2 = loader.current) === null || _loader$current2 === void 0 || _loader$current2.error(null);
+    };
+    var image = new Image();
+    image.addEventListener("load", load);
+    image.addEventListener("error", error);
+    image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : null;
+    image.referrerPolicy = referrerPolicy;
+    image.src = src;
+    return function () {
+      image.removeEventListener("load", load);
+      image.removeEventListener("error", error);
+      image.remove();
+    };
+  }, [src, crossOrigin, referrerPolicy]);
+  return status;
+};
+
+exports.useImageLoader = useImageLoader;

package/dist/hooks/use-infinite-scroll.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useEvent = require('./use-event.cjs');
+var debounce = require('../utils/debounce.cjs');
+
+/**
+ * @description
+ * use infinite scroll
+ */
+var useInfiniteScroll = function useInfiniteScroll(_ref) {
+  var _ref$hasMore = _ref.hasMore,
+    hasMore = _ref$hasMore === void 0 ? true : _ref$hasMore,
+    _ref$distance = _ref.distance,
+    distance = _ref$distance === void 0 ? 0 : _ref$distance,
+    onLoadMore = _ref.onLoadMore;
+  var loadable = react.useRef(null);
+  var scrollable = react.useRef(null);
+  var loadMore = useEvent.useEvent(function () {
+    onLoadMore === null || onLoadMore === void 0 || onLoadMore();
+  });
+  react.useEffect(function () {
+    var loader = loadable.current;
+    var scroller = scrollable.current;
+    if (!hasMore) return;
+    if (!scroller) return;
+    // use loader if loader is assigned
+    if (!!loader) {
+      var options = {
+        root: scroller,
+        rootMargin: "0px 0px ".concat(distance, "px 0px"),
+        threshold: 0.1
+      };
+      var observer = new IntersectionObserver(function (entries) {
+        var _entries = _slicedToArray(entries, 1),
+          entry = _entries[0];
+        if (!entry.isIntersecting) return;
+        loadMore();
+      }, options);
+      observer.observe(loader);
+      return function () {
+        observer.disconnect();
+      };
+    }
+    // listen scroll event, when loader is not assigned
+    var _debounce = debounce.debounce(function () {
+        if (scroller.scrollHeight - scroller.scrollTop > scroller.clientHeight + distance) {
+          return;
+        }
+        loadMore();
+      }, 100),
+      next = _debounce.next,
+      abort = _debounce.abort;
+    scroller.addEventListener("scroll", next);
+    return function () {
+      scroller.removeEventListener("scroll", next);
+      abort();
+    };
+  }, [hasMore]);
+  return [loadable, scrollable];
+};
+
+exports.useInfiniteScroll = useInfiniteScroll;

package/dist/hooks/{use-infinite-scroll.js → use-infinite-scroll.mjs}

@@ -1,7 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useRef, useEffect } from 'react';
-import { useEvent } from './use-event.js';
-import { debounce } from '../utils/debounce.js';
+import { useEvent } from './use-event.mjs';
+import { debounce } from '../utils/debounce.mjs';
 
 /**
  * @description

package/dist/hooks/use-is-mounted.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useMounted = require('./use-mounted.cjs');
+
+/**
+ * @description
+ * `useIsMounted`
+ */
+var useIsMounted = function useIsMounted() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$rerender = _ref.rerender,
+    rerender = _ref$rerender === void 0 ? false : _ref$rerender;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    setIsMounted = _useState2[1];
+  var isMountedRef = react.useRef(false);
+  useMounted.useMounted(function () {
+    isMountedRef.current = true;
+    if (rerender) {
+      setIsMounted(true);
+    }
+    return function () {
+      isMountedRef.current = false;
+    };
+  });
+  // only use callback
+  // avoid parent component or hooks change isMountedRef.current
+  return function () {
+    return isMountedRef.current;
+  };
+};
+
+exports.useIsMounted = useIsMounted;

package/dist/hooks/{use-is-mounted.js → use-is-mounted.mjs}

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useRef } from 'react';
-import { useMounted } from './use-mounted.js';
+import { useMounted } from './use-mounted.mjs';
 
 /**
  * @description

package/dist/hooks/use-local-storage-state.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var useStorageState = require('./use-storage-state.cjs');
+
+var useLocalStorageState = function useLocalStorageState(key, useBy) {
+  return useStorageState.useStorageState(key, localStorage, useBy);
+};
+
+exports.useLocalStorageState = useLocalStorageState;

package/dist/hooks/{use-local-storage-state.js → use-local-storage-state.mjs}

@@ -1,4 +1,4 @@
-import { useStorageState } from './use-storage-state.js';
+import { useStorageState } from './use-storage-state.mjs';
 
 var useLocalStorageState = function useLocalStorageState(key, useBy) {
   return useStorageState(key, localStorage, useBy);

package/dist/hooks/use-media-query.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var toArray = require('../utils/to-array.cjs');
+var useEvent = require('./use-event.cjs');
+var replace = require('../utils/replace.cjs');
+
+var useMediaQuery = function useMediaQuery(query) {
+  var _query = react.useMemo(function () {
+    return query.toString();
+  }, [query]);
+  var queries = toArray.toArray(query);
+  var _useState = react.useState(function () {
+      return queries.map(function (query) {
+        var _window$matchMedia, _window;
+        return !!((_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && (_window$matchMedia = _window$matchMedia.call(_window, query)) !== null && _window$matchMedia !== void 0 && _window$matchMedia.matches);
+      });
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var onMediaQueryChange = useEvent.useEvent(function (event, index) {
+    setValue(function (prev) {
+      return replace.replace(prev, {
+        index: index,
+        replaceValue: event.matches
+      });
+    });
+  });
+  react.useEffect(function () {
+    var mediaQueries = queries.map(function (query) {
+      return window.matchMedia(query);
+    });
+    // listen media query change
+    var cleaners = mediaQueries.map(function (mediaQuery, index) {
+      var listener = function listener(event) {
+        return onMediaQueryChange(event, index);
+      };
+      mediaQuery.addEventListener("change", listener);
+      return function () {
+        return mediaQuery.removeEventListener("change", listener);
+      };
+    });
+    // clean up all listeners
+    return function () {
+      return cleaners.forEach(function (cleaner) {
+        return cleaner();
+      });
+    };
+  }, [_query]);
+  return value;
+};
+
+exports.useMediaQuery = useMediaQuery;

package/dist/hooks/{use-media-query.js → use-media-query.mjs}

@@ -1,8 +1,8 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useMemo, useState, useEffect } from 'react';
-import { toArray } from '../utils/to-array.js';
-import { useEvent } from './use-event.js';
-import { replace } from '../utils/replace.js';
+import { toArray } from '../utils/to-array.mjs';
+import { useEvent } from './use-event.mjs';
+import { replace } from '../utils/replace.mjs';
 
 var useMediaQuery = function useMediaQuery(query) {
   var _query = useMemo(function () {

package/dist/hooks/use-memorable.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var react = require('react');
+
+var useMemorable = function useMemorable(getter, condition, shouldUpdate) {
+  var cacheRef = react.useRef(null);
+  if (cacheRef.current === null || shouldUpdate(cacheRef.current.condition, condition)) {
+    cacheRef.current = {
+      value: getter(),
+      condition: condition
+    };
+  }
+  return cacheRef.current.value;
+};
+
+exports.useMemorable = useMemorable;

package/dist/hooks/use-mount.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var react = require('react');
+var effect = require('../utils/effect.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * when components will mount
+ */
+var useMount = function useMount(callback) {
+  react.useLayoutEffect(function () {
+    return effect.effect(callback);
+  }, []);
+};
+
+exports.useMount = useMount;

package/dist/hooks/{use-mount.js → use-mount.mjs}

@@ -1,5 +1,5 @@
 import { useLayoutEffect } from 'react';
-import { effect } from '../utils/effect.js';
+import { effect } from '../utils/effect.mjs';
 
 /**
  * @author murukal

package/dist/hooks/use-mounted.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var react = require('react');
+var effect = require('../utils/effect.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * when components mounted
+ */
+var useMounted = function useMounted(callback) {
+  react.useEffect(function () {
+    return effect.effect(callback);
+  }, []);
+};
+
+exports.useMounted = useMounted;

package/dist/hooks/{use-mounted.js → use-mounted.mjs}

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { effect } from '../utils/effect.js';
+import { effect } from '../utils/effect.mjs';
 
 /**
  * @author murukal

package/dist/hooks/use-mutate-observer.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var react = require('react');
+var useEvent = require('./use-event.cjs');
+var isDomUsable = require('../is/is-dom-usable.cjs');
+var toArray = require('../utils/to-array.cjs');
+
+var useMutateObserver = function useMutateObserver(_elements, _callback) {
+  var callback = useEvent.useEvent(_callback);
+  react.useEffect(function () {
+    if (!isDomUsable.isDomUsable() || !_elements) {
+      return;
+    }
+    var elements = toArray.toArray(_elements);
+    var listener = new MutationObserver(callback);
+    elements.forEach(function (element) {
+      listener.observe(element, {
+        subtree: true,
+        childList: true,
+        attributeFilter: ["style", "class"]
+      });
+    });
+    return function () {
+      listener.takeRecords();
+      listener.disconnect();
+    };
+  }, [_elements, callback]);
+};
+
+exports.useMutateObserver = useMutateObserver;

package/dist/hooks/{use-mutate-observer.js → use-mutate-observer.mjs}

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
-import { useEvent } from './use-event.js';
-import { isDomUsable } from '../is/is-dom-usable.js';
-import { toArray } from '../utils/to-array.js';
+import { useEvent } from './use-event.mjs';
+import { isDomUsable } from '../is/is-dom-usable.mjs';
+import { toArray } from '../utils/to-array.mjs';
 
 var useMutateObserver = function useMutateObserver(_elements, _callback) {
   var callback = useEvent(_callback);

package/dist/hooks/use-raf.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var react = require('react');
+var useEvent = require('./use-event.cjs');
+
+/**
+ * @description
+ * raf
+ */
+var useRaf = function useRaf(_callback) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$timely = _ref.timely,
+    timely = _ref$timely === void 0 ? false : _ref$timely;
+  var callback = useEvent.useEvent(_callback);
+  var timed = react.useRef(null);
+  var isTimed = react.useRef(false);
+  return function () {
+    if (isTimed.current) return;
+    isTimed.current = true;
+    timely && callback();
+    timed.current = requestAnimationFrame(function () {
+      isTimed.current = false;
+      !timely && callback();
+    });
+  };
+};
+
+exports.useRaf = useRaf;

package/dist/hooks/{use-raf.js → use-raf.mjs}

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useEvent } from './use-event.js';
+import { useEvent } from './use-event.mjs';
 
 /**
  * @description

package/dist/hooks/use-reactive.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useEvent = require('./use-event.cjs');
+
+/**
+ * @description
+ * use reactive
+ */
+var useReactive = function useReactive(initialState) {
+  var _useState = react.useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    _state = _useState2[0],
+    _setState = _useState2[1];
+  var getter = useEvent.useEvent(function () {
+    return _state;
+  });
+  var setter = useEvent.useEvent(function (_target, _key, value) {
+    _setState(value);
+    return true;
+  });
+  var ref = react.useRef(new Proxy({
+    value: _state
+  }, {
+    get: getter,
+    set: setter
+  }));
+  return ref.current;
+};
+
+exports.useReactive = useReactive;

package/dist/hooks/{use-reactive.js → use-reactive.mjs}

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useRef } from 'react';
-import { useEvent } from './use-event.js';
+import { useEvent } from './use-event.mjs';
 
 /**
  * @description

package/dist/hooks/use-refs.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var react = require('react');
+var isFunction = require('../is/is-function.cjs');
+
+var mount = function mount(ref, trigger) {
+  if (isFunction.isFunction(ref)) {
+    ref(trigger);
+    return;
+  }
+  // in deprecated react, class component can use string ref
+  // but there are many problems, in relax, we just make it not work
+  // issue for react: https://github.com/facebook/react/pull/8333#issuecomment-271648615
+  if (typeof ref === "string") {
+    return;
+  }
+  ref.current = trigger;
+};
+var useRefs = function useRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  return react.useMemo(function () {
+    return function (trigger) {
+      refs.forEach(function (ref) {
+        if (!ref) return;
+        mount(ref, trigger);
+      });
+    };
+  }, refs);
+};
+
+exports.useRefs = useRefs;

package/dist/hooks/{use-refs.js → use-refs.mjs}

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { isFunction } from '../is/is-function.js';
+import { isFunction } from '../is/is-function.mjs';
 
 var mount = function mount(ref, trigger) {
   if (isFunction(ref)) {

package/dist/hooks/use-scroll-locker.cjs

@@ -0,0 +1,99 @@
+'use strict';
+
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _classPrivateFieldInitSpec = require('@babel/runtime/helpers/classPrivateFieldInitSpec');
+var _classPrivateFieldSet = require('@babel/runtime/helpers/classPrivateFieldSet2');
+var _classPrivateFieldGet = require('@babel/runtime/helpers/classPrivateFieldGet2');
+var react = require('react');
+var isOverflow = require('../is/is-overflow.cjs');
+var setStyle = require('../utils/set-style.cjs');
+
+var _barSize = /*#__PURE__*/new WeakMap();
+var _locked = /*#__PURE__*/new WeakMap();
+var ScrollLocker = /*#__PURE__*/function () {
+  function ScrollLocker() {
+    var _scrollLocker$_;
+    _classCallCheck(this, ScrollLocker);
+    // bar size
+    _classPrivateFieldInitSpec(this, _barSize, null);
+    // locked elements, with previous styles
+    _classPrivateFieldInitSpec(this, _locked, new Map());
+    return (_scrollLocker$_ = _scrollLocker._) !== null && _scrollLocker$_ !== void 0 ? _scrollLocker$_ : _scrollLocker._ = this;
+  }
+  return _createClass(ScrollLocker, [{
+    key: "barSize",
+    get: function get() {
+      if (_classPrivateFieldGet(_barSize, this)) return _classPrivateFieldGet(_barSize, this);
+      // how to calculate dom scroll bar size
+      // create a backend dom element, set force scrollable
+      var _target = document.createElement("div");
+      _target.attributeStyleMap.set("position", "absolute");
+      _target.attributeStyleMap.set("left", "0");
+      _target.attributeStyleMap.set("top", "0");
+      _target.attributeStyleMap.set("width", "100vw");
+      _target.attributeStyleMap.set("height", "100vh");
+      _target.attributeStyleMap.set("overflow", "scroll");
+      // calculate, then clear
+      document.body.appendChild(_target);
+      _classPrivateFieldSet(_barSize, this, {
+        width: _target.offsetWidth - _target.clientWidth,
+        height: _target.offsetHeight - _target.clientHeight
+      });
+      document.body.removeChild(_target);
+      return _classPrivateFieldGet(_barSize, this);
+    }
+  }, {
+    key: "isOverflow",
+    get: function get() {
+      return isOverflow.isOverflow();
+    }
+  }, {
+    key: "lock",
+    value: function lock() {
+      var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.body;
+      // if locked, do not lock again
+      if (_classPrivateFieldGet(_locked, this).has(element)) return;
+      // if target is not scrollable, do not lock
+      if (!isOverflow.isOverflow(element)) return;
+      _classPrivateFieldGet(_locked, this).set(element, setStyle.setStyle(element, {
+        overflow: "hidden",
+        width: "calc(100% - ".concat(this.barSize.width, "px)")
+      }));
+    }
+  }, {
+    key: "unlock",
+    value: function unlock() {
+      var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.body;
+      // not locked, no need to unlock
+      if (!_classPrivateFieldGet(_locked, this).has(element)) return;
+      // reset style, in lock, some styled are setted
+      setStyle.setStyle(element, _classPrivateFieldGet(_locked, this).get(element));
+      _classPrivateFieldGet(_locked, this)["delete"](element);
+    }
+  }]);
+}();
+/**
+ * @description
+ * hooks
+ */
+// singleton mode
+var _scrollLocker = {
+  _: null
+};
+var useScrollLocker = function useScrollLocker() {
+  var isLock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  react.useLayoutEffect(function () {
+    var scrollLocker = new ScrollLocker();
+    if (!!isLock) {
+      scrollLocker.lock(document.body);
+    } else {
+      scrollLocker.unlock(document.body);
+    }
+    return function () {
+      scrollLocker.unlock(document.body);
+    };
+  }, [isLock]);
+};
+
+exports.useScrollLocker = useScrollLocker;

package/dist/hooks/{use-scroll-locker.js → use-scroll-locker.mjs}

@@ -4,8 +4,8 @@ import _classPrivateFieldInitSpec from '@babel/runtime/helpers/classPrivateField
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet2';
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet2';
 import { useLayoutEffect } from 'react';
-import { isOverflow } from '../is/is-overflow.js';
-import { setStyle } from '../utils/set-style.js';
+import { isOverflow } from '../is/is-overflow.mjs';
+import { setStyle } from '../utils/set-style.mjs';
 
 var _barSize = /*#__PURE__*/new WeakMap();
 var _locked = /*#__PURE__*/new WeakMap();

package/dist/hooks/use-scrollable.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var react = require('react');
+var scrollTo = require('../dom/scroll-to.cjs');
+
+/**
+ * @description
+ * scrollable hook
+ */
+var useScrollable = function useScrollable() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation;
+  var targetRef = react.useRef(null);
+  var triggerRefs = react.useRef(new Map());
+  var scrollTo$1 = react.useCallback(function (to) {
+    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var target = targetRef.current;
+    if (!target) return;
+    // use animated scroll
+    scrollTo.scrollTo(target, to, {
+      duration: duration,
+      orientation: orientation
+    });
+  }, [orientation]);
+  var to = react.useCallback(function (key) {
+    var trigger = triggerRefs.current.get(key);
+    if (!trigger) return 0;
+    // different orientation, use different property
+    return orientation === "vertical" ? trigger.offsetTop : trigger.offsetLeft;
+  }, [orientation]);
+  // set trigger
+  var setTrigger = react.useCallback(function (key, trigger) {
+    triggerRefs.current.set(key, trigger);
+  }, []);
+  return {
+    targetRef: targetRef,
+    triggerRefs: triggerRefs,
+    scrollTo: scrollTo$1,
+    to: to,
+    setTrigger: setTrigger
+  };
+};
+
+exports.useScrollable = useScrollable;