@aiszlab/relax 1.3.11 → 1.3.12

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

@@ -1,5 +1,5 @@
 import { useRef, useCallback } from 'react';
-import { scrollTo as _scrollTo } from '../dom/scroll-to.js';
+import { scrollTo as _scrollTo } from '../dom/scroll-to.mjs';
 
 /**
  * @description

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

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

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

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

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var isNull = require('../is/is-null.cjs');
+
+var useStorageState = function useStorageState(key, storage) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$listen = _ref.listen,
+    listen = _ref$listen === void 0 ? true : _ref$listen;
+  var _useState = react.useState(function () {
+      return storage.getItem(key);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  // effect sync state after key change
+  react.useEffect(function () {
+    setState(storage.getItem(key));
+  }, [key]);
+  react.useEffect(function () {
+    var onStorageChange = function onStorageChange(event) {
+      if (event.key !== key) return;
+      if (event.storageArea !== storage) return;
+    };
+    // only listen with flag = `true`
+    if (listen) {
+      window.addEventListener("storage", onStorageChange);
+    }
+    return function () {
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, [listen]);
+  // change handler
+  var setter = react.useCallback(function (value) {
+    if (listen) {
+      if (isNull.isNull(value)) {
+        storage.removeItem(key);
+      } else {
+        storage.setItem(key, value);
+      }
+      return;
+    }
+    setState(value);
+  }, [key, listen]);
+  return [state, setter];
+};
+
+exports.useStorageState = useStorageState;

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

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect, useCallback } from 'react';
-import { isNull } from '../is/is-null.js';
+import { isNull } from '../is/is-null.mjs';
 
 var useStorageState = function useStorageState(key, storage) {
   var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},

package/dist/hooks/use-throttle-callback.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var react = require('react');
+var throttle = require('../utils/throttle.cjs');
+var useEvent = require('./use-event.cjs');
+var isFunction = require('../is/is-function.cjs');
+var useDefault = require('./use-default.cjs');
+
+var useThrottler = function useThrottler(throttler) {
+  var _useMemo = react.useMemo(function () {
+      return isFunction.isFunction(throttler) ? {
+        callback: throttler,
+        pipe: null
+      } : throttler;
+    }, [throttler]),
+    callback = _useMemo.callback,
+    pipe = _useMemo.pipe;
+  return {
+    callback: useEvent.useEvent(function () {
+      return callback.apply(void 0, arguments);
+    }),
+    pipe: useEvent.useEvent(function () {
+      var _pipe;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return (_pipe = pipe === null || pipe === void 0 ? void 0 : pipe.apply(void 0, args)) !== null && _pipe !== void 0 ? _pipe : args;
+    })
+  };
+};
+/**
+ * @author murukal
+ *
+ * @description
+ * throttle callback
+ *
+ * @param callback
+ * @param wait number
+ * @description
+ * The wait time (in milliseconds) until the throttle function is called.
+ * default 1000
+ *
+ * @example
+ * 1000
+ */
+var useThrottleCallback = function useThrottleCallback(throttler) {
+  var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+  var throttled = react.useRef(null);
+  var _useThrottler = useThrottler(throttler),
+    callback = _useThrottler.callback,
+    pipe = _useThrottler.pipe;
+  react.useEffect(function () {
+    var _throttled = throttle.throttle({
+      callback: callback,
+      pipe: pipe
+    }, wait);
+    throttled.current = _throttled;
+    // dispose
+    return function () {
+      _throttled.abort();
+      throttled.current = null;
+    };
+  }, [wait]);
+  return useDefault.useDefault(function () {
+    return {
+      next: function next() {
+        var _throttled$current;
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        return (_throttled$current = throttled.current) === null || _throttled$current === void 0 ? void 0 : _throttled$current.next.apply(_throttled$current, args);
+      },
+      flush: function flush() {
+        var _throttled$current2;
+        return (_throttled$current2 = throttled.current) === null || _throttled$current2 === void 0 ? void 0 : _throttled$current2.flush();
+      },
+      abort: function abort() {
+        var _throttled$current3;
+        return (_throttled$current3 = throttled.current) === null || _throttled$current3 === void 0 ? void 0 : _throttled$current3.abort();
+      }
+    };
+  });
+};
+
+exports.useThrottleCallback = useThrottleCallback;

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

@@ -1,8 +1,8 @@
 import { useRef, useEffect, useMemo } from 'react';
-import { throttle } from '../utils/throttle.js';
-import { useEvent } from './use-event.js';
-import { isFunction } from '../is/is-function.js';
-import { useDefault } from './use-default.js';
+import { throttle } from '../utils/throttle.mjs';
+import { useEvent } from './use-event.mjs';
+import { isFunction } from '../is/is-function.mjs';
+import { useDefault } from './use-default.mjs';
 
 var useThrottler = function useThrottler(throttler) {
   var _useMemo = useMemo(function () {

package/dist/hooks/use-timeout.cjs

@@ -0,0 +1,70 @@
+'use strict';
+
+var react = require('react');
+var rxjs = require('rxjs');
+var useEvent = require('./use-event.cjs');
+var useMounted = require('./use-mounted.cjs');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * timeout effect
+ */
+var useTimeout = function useTimeout(callback, wait) {
+  var trigger = react.useRef(null);
+  var timed = react.useRef(null);
+  var callable = useEvent.useEvent(callback);
+  useMounted.useMounted(function () {
+    new rxjs.Observable(function (_) {
+      trigger.current = _;
+    }).subscribe({
+      complete: function complete() {
+        return callable();
+      }
+    });
+  });
+  // when user what to flush timeout handler
+  // if trigger already registed, just complete trigger
+  // not registed, call `handler` manaully
+  var flush = useEvent.useEvent(function () {
+    var _timed$current;
+    if (trigger.current) {
+      trigger.current.complete();
+    } else {
+      callback();
+    }
+    (_timed$current = timed.current) === null || _timed$current === void 0 || _timed$current.unsubscribe();
+    timed.current = null;
+    trigger.current = null;
+  });
+  // cancel
+  var cancel = useEvent.useEvent(function () {
+    var _trigger$current, _timed$current2;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.error();
+    (_timed$current2 = timed.current) === null || _timed$current2 === void 0 || _timed$current2.unsubscribe();
+    timed.current = null;
+  });
+  // add timer for `wait`
+  react.useEffect(function () {
+    // if 0, always mean not need to set timeout
+    if (wait <= 0) {
+      return;
+    }
+    var _timed = rxjs.timer(wait).subscribe(function () {
+      var _trigger$current2;
+      (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.complete();
+    });
+    timed.current = _timed;
+    return function () {
+      _timed.unsubscribe();
+      timed.current = null;
+    };
+  }, [wait]);
+  return {
+    flush: flush,
+    cancel: cancel
+  };
+};
+
+exports.useTimeout = useTimeout;

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

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from 'react';
 import { Observable, timer } from 'rxjs';
-import { useEvent } from './use-event.js';
-import { useMounted } from './use-mounted.js';
+import { useEvent } from './use-event.mjs';
+import { useMounted } from './use-mounted.mjs';
 
 /**
  * @author murukal

package/dist/hooks/use-timer.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var react = require('react');
+var useUnmount = require('./use-unmount.cjs');
+
+/**
+ * @description
+ * use timer
+ */
+var useTimer = function useTimer() {
+  var timed = react.useRef(void 0);
+  var clear = react.useCallback(function () {
+    clearTimeout(timed.current);
+    timed.current = void 0;
+  }, []);
+  var timeout = react.useCallback(function (handler) {
+    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    clear();
+    if (duration <= 0) {
+      handler();
+      return;
+    }
+    timed.current = setTimeout(function () {
+      handler();
+    }, duration);
+  }, []);
+  useUnmount.useUnmount(clear);
+  return {
+    timeout: timeout,
+    clear: clear
+  };
+};
+
+exports.useTimer = useTimer;

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

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

package/dist/hooks/use-togglable.cjs

@@ -0,0 +1,191 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _classPrivateFieldInitSpec = require('@babel/runtime/helpers/classPrivateFieldInitSpec');
+var _classPrivateFieldGet = require('@babel/runtime/helpers/classPrivateFieldGet2');
+var _classPrivateFieldSet = require('@babel/runtime/helpers/classPrivateFieldSet2');
+var react = require('react');
+var useControlledState = require('./use-controlled-state.cjs');
+var useEvent = require('./use-event.cjs');
+
+var _groupedLeaves = /*#__PURE__*/new WeakMap();
+var Tree = /*#__PURE__*/function () {
+  function Tree() {
+    _classCallCheck(this, Tree);
+    _classPrivateFieldInitSpec(this, _groupedLeaves, void 0);
+    _classPrivateFieldSet(_groupedLeaves, this, new Map());
+  }
+  return _createClass(Tree, [{
+    key: "groupedLeaves",
+    get: function get() {
+      return _classPrivateFieldGet(_groupedLeaves, this);
+    }
+  }, {
+    key: "grow",
+    value: function grow(togglableKey) {
+      // create leaf, leaf will auto trigger tree collect callback
+      new Leaf({
+        key: togglableKey.key,
+        parent: null,
+        belongTo: this
+      }).grow(togglableKey.children);
+      return this;
+    }
+  }, {
+    key: "collect",
+    value: function collect(leaf) {
+      _classPrivateFieldGet(_groupedLeaves, this).has(leaf.key) ? _classPrivateFieldGet(_groupedLeaves, this).get(leaf.key).add(leaf) : _classPrivateFieldGet(_groupedLeaves, this).set(leaf.key, new Set([leaf]));
+    }
+  }, {
+    key: "toggle",
+    value: function toggle(key, toggledKeys) {
+      var hasToggled = toggledKeys.has(key);
+      var isToggled = !hasToggled;
+      return this.toggleBy(key, isToggled, toggledKeys);
+    }
+  }, {
+    key: "toggleBy",
+    value: function toggleBy(key, isToggled, _toggledKeys) {
+      var _classPrivateFieldGet2;
+      var toggledKeys = new Set(_toggledKeys);
+      // toggle current leaf
+      if (isToggled) {
+        toggledKeys.add(key);
+      } else {
+        toggledKeys["delete"](key);
+      }
+      return Array.from((_classPrivateFieldGet2 = _classPrivateFieldGet(_groupedLeaves, this).get(key)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : []).reduce(function (prev, leaf) {
+        // deep fall, add or remove child key
+        return leaf.rise(
+        // deep rise, add or remove parent key
+        leaf.fall(isToggled, prev));
+      }, toggledKeys);
+    }
+  }]);
+}();
+var _key = /*#__PURE__*/new WeakMap();
+var _belongTo = /*#__PURE__*/new WeakMap();
+var _parent = /*#__PURE__*/new WeakMap();
+var _children = /*#__PURE__*/new WeakMap();
+var Leaf = /*#__PURE__*/function () {
+  function Leaf(props) {
+    _classCallCheck(this, Leaf);
+    _classPrivateFieldInitSpec(this, _key, void 0);
+    _classPrivateFieldInitSpec(this, _belongTo, void 0);
+    _classPrivateFieldInitSpec(this, _parent, void 0);
+    _classPrivateFieldInitSpec(this, _children, void 0);
+    _classPrivateFieldSet(_key, this, props.key);
+    _classPrivateFieldSet(_parent, this, props.parent);
+    _classPrivateFieldSet(_belongTo, this, props.belongTo);
+    _classPrivateFieldSet(_children, this, []);
+    // when leaf has grew, let tree collect leaf
+    _classPrivateFieldGet(_belongTo, this).collect(this);
+  }
+  return _createClass(Leaf, [{
+    key: "key",
+    get: function get() {
+      return _classPrivateFieldGet(_key, this);
+    }
+  }, {
+    key: "grow",
+    value: function grow() {
+      var _this = this;
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      if (children.length === 0) return this;
+      children.forEach(function (node) {
+        var child = new Leaf({
+          key: node.key,
+          parent: _this,
+          belongTo: _classPrivateFieldGet(_belongTo, _this)
+        }).grow(node.children);
+        _classPrivateFieldGet(_children, _this).push(child);
+      });
+      return this;
+    }
+  }, {
+    key: "rise",
+    value: function rise(_toggledKeys) {
+      var rised = new Set(_toggledKeys);
+      if (!_classPrivateFieldGet(_parent, this)) return rised;
+      var isChildrenToggled = _classPrivateFieldGet(_children, _classPrivateFieldGet(_parent, this)).every(function (child) {
+        return rised.has(child.key);
+      });
+      if (isChildrenToggled) {
+        rised.add(_classPrivateFieldGet(_parent, this).key);
+      } else {
+        rised["delete"](_classPrivateFieldGet(_parent, this).key);
+      }
+      // go on parent
+      return _classPrivateFieldGet(_parent, this).rise(rised);
+    }
+  }, {
+    key: "fall",
+    value: function fall(isToggled, toggledKeys) {
+      return _classPrivateFieldGet(_children, this).reduce(function (prev, leaf) {
+        // deep loop, remove or add key
+        var fell = leaf.fall(isToggled, prev);
+        // toggle true, add current leaf key
+        // toggle false, remove current leaf key
+        if (isToggled) {
+          fell.add(leaf.key);
+        } else {
+          fell["delete"](leaf.key);
+        }
+        return fell;
+      }, new Set(toggledKeys));
+    }
+  }]);
+}();
+/**
+ * @description
+ * toggle able
+ */
+var useTogglable = function useTogglable(togglableKeys) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    onToggle = _ref.onToggle,
+    _ref$defaultToggledKe = _ref.defaultToggledKeys,
+    defaultToggledKeys = _ref$defaultToggledKe === void 0 ? [] : _ref$defaultToggledKe,
+    isDefaultToggled = _ref.isDefaultToggled,
+    toggledKeys = _ref.toggledKeys;
+  // re-create tree when togglable keys changed
+  var tree = react.useMemo(function () {
+    return togglableKeys.reduce(function (_tree, togglable) {
+      return _tree.grow(togglable);
+    }, new Tree());
+  }, [togglableKeys]);
+  // use controlled state to record toggled keys
+  var _useControlledState = useControlledState.useControlledState(toggledKeys, {
+      defaultState: function defaultState() {
+        return isDefaultToggled ? Array.from(tree.groupedLeaves.keys()) : defaultToggledKeys;
+      }
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _toggledKeys = _useControlledState2[0],
+    _setToggledKeys = _useControlledState2[1];
+  // use set for toggled keys to make it read easily
+  var readableToggledKeys = react.useMemo(function () {
+    return new Set(_toggledKeys);
+  }, [_toggledKeys]);
+  // check current key is toggled
+  var isToggled = react.useCallback(function (key) {
+    return readableToggledKeys.has(key);
+  }, [readableToggledKeys]);
+  // toggle one key
+  var toggle = useEvent.useEvent(function (key) {
+    // get new toggled keys by toggle current key
+    var _toggledKeys = Array.from(tree.toggle(key, readableToggledKeys));
+    // set state
+    _setToggledKeys(_toggledKeys);
+    // trigger on toggle callback
+    onToggle === null || onToggle === void 0 || onToggle(_toggledKeys);
+  });
+  return {
+    toggledKeys: readableToggledKeys,
+    isToggled: isToggled,
+    toggle: toggle
+  };
+};
+
+exports.useTogglable = useTogglable;

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

@@ -5,8 +5,8 @@ import _classPrivateFieldInitSpec from '@babel/runtime/helpers/classPrivateField
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet2';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet2';
 import { useMemo, useCallback } from 'react';
-import { useControlledState } from './use-controlled-state.js';
-import { useEvent } from './use-event.js';
+import { useControlledState } from './use-controlled-state.mjs';
+import { useEvent } from './use-event.mjs';
 
 var _groupedLeaves = /*#__PURE__*/new WeakMap();
 var Tree = /*#__PURE__*/function () {

package/dist/hooks/use-unmount.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('react');
+
+/**
+ * @author murukal
+ *
+ * @description
+ * unmount
+ */
+var useUnmount = function useUnmount(callback) {
+  react.useEffect(function () {
+    return callback;
+  }, []);
+};
+
+exports.useUnmount = useUnmount;

package/dist/hooks/use-update-effect.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var react = require('react');
+var effect = require('../utils/effect.cjs');
+var useIsMounted = require('./use-is-mounted.cjs');
+
+var useUpdateEffect = function useUpdateEffect(callback, deps) {
+  react.useEffect(function () {
+    if (!isMounted()) return;
+    return effect.effect(callback);
+  }, deps);
+  var isMounted = useIsMounted.useIsMounted();
+};
+
+exports.useUpdateEffect = useUpdateEffect;

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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { effect } from '../utils/effect.js';
-import { useIsMounted } from './use-is-mounted.js';
+import { effect } from '../utils/effect.mjs';
+import { useIsMounted } from './use-is-mounted.mjs';
 
 var useUpdateEffect = function useUpdateEffect(callback, deps) {
   useEffect(function () {