@aiszlab/relax 1.2.57 → 1.2.59

package/dist/hooks/use-focus.js

@@ -0,0 +1,31 @@
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useCallback } from 'react';
+import { useBoolean } from './use-boolean.js';
+import { chain } from '../utils/chain.js';
+
+var useFocus = function useFocus(props) {
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isFocused = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOn = _useBoolean2$.turnOn,
+    turnOff = _useBoolean2$.turnOff;
+  var onFocus = useCallback(function (e) {
+    chain(props === null || props === void 0 ? void 0 : props.onFocus, turnOn, function () {
+      var _props$onFocusChange;
+      return props === null || props === void 0 || (_props$onFocusChange = props.onFocusChange) === null || _props$onFocusChange === void 0 ? void 0 : _props$onFocusChange.call(props, true);
+    })(e);
+  }, [props === null || props === void 0 ? void 0 : props.onFocus, props === null || props === void 0 ? void 0 : props.onFocusChange]);
+  var onBlur = useCallback(function (e) {
+    chain(props === null || props === void 0 ? void 0 : props.onBlur, turnOff, function () {
+      var _props$onFocusChange2;
+      return props === null || props === void 0 || (_props$onFocusChange2 = props.onFocusChange) === null || _props$onFocusChange2 === void 0 ? void 0 : _props$onFocusChange2.call(props, false);
+    })(e);
+  }, [props === null || props === void 0 ? void 0 : props.onBlur, props === null || props === void 0 ? void 0 : props.onFocusChange]);
+  return [isFocused, {
+    onFocus: onFocus,
+    onBlur: onBlur
+  }];
+};
+
+export { useFocus };

package/dist/hooks/use-force-update.d.ts

@@ -0,0 +1,7 @@
+type UsedForceUpdate = [number, () => void];
+/**
+ * @description
+ * force update
+ */
+export declare const useForceUpdate: () => UsedForceUpdate;
+export {};

package/dist/hooks/use-force-update.js

@@ -0,0 +1,21 @@
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useCallback } from 'react';
+
+/**
+ * @description
+ * force update
+ */
+var useForceUpdate = function useForceUpdate() {
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    times = _useState2[0],
+    setTimes = _useState2[1];
+  var forceUpdate = useCallback(function () {
+    setTimes(function (prev) {
+      return prev + 1;
+    });
+  }, []);
+  return [times, forceUpdate];
+};
+
+export { useForceUpdate };

package/dist/hooks/use-hover.d.ts

@@ -0,0 +1,8 @@
+import { type DOMAttributes } from "react";
+type UseHoverBy<T> = {
+    onEnter?: DOMAttributes<T>["onPointerEnter"];
+    onLeave?: DOMAttributes<T>["onPointerLeave"];
+};
+type UsedHover<T> = [boolean, Required<Pick<DOMAttributes<T>, "onPointerEnter" | "onPointerLeave">>];
+export declare const useHover: <T extends Element = Element>(props?: UseHoverBy<T>) => UsedHover<T>;
+export {};

package/dist/hooks/use-hover.js

@@ -0,0 +1,25 @@
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useCallback } from 'react';
+import { useBoolean } from './use-boolean.js';
+import { chain } from '../utils/chain.js';
+
+var useHover = function useHover(props) {
+  var _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    isHovered = _useBoolean2[0],
+    _useBoolean2$ = _useBoolean2[1],
+    turnOn = _useBoolean2$.turnOn,
+    turnOff = _useBoolean2$.turnOff;
+  var onPointerEnter = useCallback(function (e) {
+    chain(props === null || props === void 0 ? void 0 : props.onEnter, turnOn)(e);
+  }, [props === null || props === void 0 ? void 0 : props.onEnter]);
+  var onPointerLeave = useCallback(function (e) {
+    chain(props === null || props === void 0 ? void 0 : props.onLeave, turnOff)(e);
+  }, [props === null || props === void 0 ? void 0 : props.onLeave]);
+  return [isHovered, {
+    onPointerEnter: onPointerEnter,
+    onPointerLeave: onPointerLeave
+  }];
+};
+
+export { useHover };

package/dist/hooks/use-identity.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description
+ * extends from react `useId`
+ */
+export declare const useIdentity: (signal?: string) => [string, () => string];

package/dist/hooks/use-identity.js

@@ -0,0 +1,20 @@
+import { useId, useRef, useCallback } from 'react';
+
+/**
+ * @description
+ * extends from react `useId`
+ */
+var useIdentity = function useIdentity() {
+  var signal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var id = useId();
+  var count = useRef(0);
+  var unique = useCallback(function () {
+    if (!signal) {
+      return "".concat(id).concat(count.current++);
+    }
+    return "".concat(id).concat(signal, ":").concat(count.current++);
+  }, []);
+  return [id, unique];
+};
+
+export { useIdentity };

package/dist/hooks/use-image-loader.d.ts

@@ -0,0 +1,12 @@
+type Status = "none" | "loading" | "error" | "loaded";
+interface Props {
+    src: string;
+}
+/**
+ * @author murukal
+ *
+ * @description
+ * image loader
+ */
+export declare const useImageLoader: ({ src }: Props) => Status;
+export {};

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

@@ -0,0 +1,54 @@
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useState, useEffect } from 'react';
+import { Observable } from 'rxjs';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * image loader
+ */
+var useImageLoader = function useImageLoader(_ref) {
+  var src = _ref.src;
+  var loader = useRef();
+  var _useState = useState("none"),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  useEffect(function () {
+    if (!src) {
+      return setStatus("none");
+    }
+    // create observable to listen img status
+    new 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 image = new Image();
+    image.addEventListener("load", function () {
+      var _loader$current;
+      (_loader$current = loader.current) === null || _loader$current === void 0 || _loader$current.complete();
+    });
+    image.addEventListener("error", function () {
+      var _loader$current2;
+      (_loader$current2 = loader.current) === null || _loader$current2 === void 0 || _loader$current2.error(null);
+    });
+    image.src = src;
+    return function () {
+      image.remove();
+    };
+  }, [src]);
+  return status;
+};
+
+export { useImageLoader };

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author murukal
+ * @description 监听浏览器 media 变化，控制状态
+ *
+ * media 规则 @media not|only mediatype and (mediafeature and|or|not mediafeature)
+ */
+export declare const useMediaQuery: () => void;

package/dist/hooks/use-memorable.d.ts

@@ -0,0 +1 @@
+export declare const useMemorable: <Value, Condition = unknown[]>(getter: () => Value, condition: Condition, shouldUpdate: (prev: Condition, next: Condition) => boolean) => Value;

package/dist/hooks/use-memorable.js

@@ -0,0 +1,14 @@
+import { useRef } from 'react';
+
+var useMemorable = function useMemorable(getter, condition, shouldUpdate) {
+  var cacheRef = useRef(null);
+  if (cacheRef.current === null || shouldUpdate(cacheRef.current.condition, condition)) {
+    cacheRef.current = {
+      value: getter(),
+      condition: condition
+    };
+  }
+  return cacheRef.current.value;
+};
+
+export { useMemorable };

package/dist/hooks/use-mount.d.ts

@@ -0,0 +1,8 @@
+import type { ThenableEffectCallback } from "../types";
+/**
+ * @author murukal
+ *
+ * @description
+ * when components will mount
+ */
+export declare const useMount: (callback: ThenableEffectCallback) => void;

package/dist/hooks/use-mount.js

@@ -0,0 +1,16 @@
+import { useLayoutEffect } from 'react';
+import { effect } from '../utils/effect.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * when components will mount
+ */
+var useMount = function useMount(callback) {
+  useLayoutEffect(function () {
+    return effect(callback);
+  }, []);
+};
+
+export { useMount };

package/dist/hooks/use-mounted.d.ts

@@ -0,0 +1,8 @@
+import type { ThenableEffectCallback } from "../types";
+/**
+ * @author murukal
+ *
+ * @description
+ * when components mounted
+ */
+export declare const useMounted: (callback: ThenableEffectCallback) => void;

package/dist/hooks/use-mounted.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { effect } from '../utils/effect.js';
+
+/**
+ * @author murukal
+ *
+ * @description
+ * when components mounted
+ */
+var useMounted = function useMounted(callback) {
+  useEffect(function () {
+    return effect(callback);
+  }, []);
+};
+
+export { useMounted };

package/dist/hooks/use-mutate-observer.d.ts

@@ -0,0 +1 @@
+export declare const useMutateObserver: (_elements: HTMLElement | HTMLElement[] | null, _callback: MutationCallback) => void;

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

@@ -0,0 +1,28 @@
+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';
+
+var useMutateObserver = function useMutateObserver(_elements, _callback) {
+  var callback = useEvent(_callback);
+  useEffect(function () {
+    if (!isDomUsable() || !_elements) {
+      return;
+    }
+    var elements = 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]);
+};
+
+export { useMutateObserver };

package/dist/hooks/use-raf.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description
+ * raf
+ */
+export declare const useRaf: (_callback: Function, { timely, }?: {
+    timely?: boolean;
+}) => () => void;

package/dist/hooks/use-raf.js

@@ -0,0 +1,26 @@
+import { useRef } from 'react';
+import { useEvent } from './use-event.js';
+
+/**
+ * @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(_callback);
+  var timed = useRef(null);
+  var isTimed = useRef(false);
+  return function () {
+    if (isTimed.current) return;
+    isTimed.current = true;
+    timely && callback();
+    timed.current = requestAnimationFrame(function () {
+      isTimed.current = false;
+      !timely && callback();
+    });
+  };
+};
+
+export { useRaf };

package/dist/hooks/use-reactive.d.ts

@@ -0,0 +1,6 @@
+import type { State } from "../types";
+/**
+ * @description
+ * use reactive
+ */
+export declare const useReactive: <T>(initialState: State<T>) => void;

package/dist/hooks/use-refs.d.ts

@@ -0,0 +1,5 @@
+import { type MutableRefObject, type RefCallback } from "react";
+import type { Nullable, Voidable } from "../types";
+type Refable<T> = RefCallback<T> | MutableRefObject<T> | string;
+export declare const useRefs: <T>(...refs: Voidable<Refable<Nullable<T>>>[]) => (trigger: T) => void;
+export {};

package/dist/hooks/use-refs.js

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { isFunction } from '../is/is-function.js';
+
+var mount = function mount(ref, trigger) {
+  if (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 useMemo(function () {
+    return function (trigger) {
+      refs.forEach(function (ref) {
+        if (!ref) return;
+        mount(ref, trigger);
+      });
+    };
+  }, refs);
+};
+
+export { useRefs };

package/dist/hooks/use-scroll-locker.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description
+ * hooks
+ */
+export declare const useScrollLocker: (isLock?: boolean) => void;

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

@@ -0,0 +1,92 @@
+import { createClass as _createClass, classPrivateFieldGet2 as _classPrivateFieldGet2, classPrivateFieldSet2 as _classPrivateFieldSet2, classCallCheck as _classCallCheck, classPrivateFieldInitSpec as _classPrivateFieldInitSpec } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useLayoutEffect } from 'react';
+import { isOverflow } from '../is/is-overflow.js';
+import { setStyle } from '../utils/set-style.js';
+
+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 (_classPrivateFieldGet2(_barSize, this)) return _classPrivateFieldGet2(_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);
+      _classPrivateFieldSet2(_barSize, this, {
+        width: _target.offsetWidth - _target.clientWidth,
+        height: _target.offsetHeight - _target.clientHeight
+      });
+      document.body.removeChild(_target);
+      return _classPrivateFieldGet2(_barSize, this);
+    }
+  }, {
+    key: "isOverflow",
+    get: function get() {
+      return 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 (_classPrivateFieldGet2(_locked, this).has(element)) return;
+      // if target is not scrollable, do not lock
+      if (!isOverflow(element)) return;
+      _classPrivateFieldGet2(_locked, this).set(element, 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 (!_classPrivateFieldGet2(_locked, this).has(element)) return;
+      // reset style, in lock, some styled are setted
+      setStyle(element, _classPrivateFieldGet2(_locked, this).get(element));
+      _classPrivateFieldGet2(_locked, this)["delete"](element);
+    }
+  }]);
+}();
+/**
+ * @description
+ * hooks
+ */
+// singleton mode
+var _scrollLocker = {
+  _: null
+};
+var useScrollLocker = function useScrollLocker(isLock) {
+  useLayoutEffect(function () {
+    var scrollLocker = new ScrollLocker();
+    if (!!isLock) {
+      scrollLocker.lock(document.body);
+    } else {
+      scrollLocker.unlock(document.body);
+    }
+    return function () {
+      scrollLocker.unlock(document.body);
+    };
+  }, [!!isLock]);
+};
+
+export { useScrollLocker };

package/dist/hooks/use-scrollable.d.ts

@@ -0,0 +1,17 @@
+import { type Key } from "react";
+import { type Direction } from "../dom/scroll-to";
+interface Dependencies {
+    direction?: Direction;
+}
+/**
+ * @description
+ * scrollable hook
+ */
+export declare const useScrollable: <P extends HTMLElement, C extends HTMLElement>({ direction, }?: Dependencies) => {
+    targetRef: import("react").RefObject<P>;
+    triggerRefs: import("react").MutableRefObject<Map<Key, C | null>>;
+    scrollTo: (to: number, duration?: number) => void;
+    to: (key: Key) => number;
+    setTrigger: (key: Key, trigger: C) => void;
+};
+export {};

package/dist/hooks/use-scrollable.js

@@ -0,0 +1,43 @@
+import { useRef, useCallback } from 'react';
+import { scrollTo } from '../dom/scroll-to.js';
+
+/**
+ * @description
+ * scrollable hook
+ */
+var useScrollable = function useScrollable() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "vertical" : _ref$direction;
+  var targetRef = useRef(null);
+  var triggerRefs = useRef(new Map());
+  var scrollTo$1 = 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(target, to, {
+      duration: duration,
+      direction: direction
+    });
+  }, [direction]);
+  var to = useCallback(function (key) {
+    var trigger = triggerRefs.current.get(key);
+    if (!trigger) return 0;
+    // different direction, use different property
+    return direction === "vertical" ? trigger.offsetTop : trigger.offsetLeft;
+  }, [direction]);
+  /// set trigger
+  var setTrigger = useCallback(function (key, trigger) {
+    triggerRefs.current.set(key, trigger);
+  }, []);
+  return {
+    targetRef: targetRef,
+    triggerRefs: triggerRefs,
+    scrollTo: scrollTo$1,
+    to: to,
+    setTrigger: setTrigger
+  };
+};
+
+export { useScrollable };

package/dist/hooks/use-throttle-callback.d.ts

@@ -0,0 +1,18 @@
+import { type Throttler, type Throttled } from "../utils/throttle";
+import { type Callable } from "./use-event";
+/**
+ * @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
+ */
+export declare const useThrottleCallback: <T extends Callable, R extends Array<unknown> = Parameters<T>>(throttler: T | Throttler<T, R>, wait?: number) => Throttled<T>;

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

@@ -0,0 +1,83 @@
+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';
+
+var useThrottler = function useThrottler(throttler) {
+  var _useMemo = useMemo(function () {
+      return isFunction(throttler) ? {
+        callback: throttler,
+        pipe: null
+      } : throttler;
+    }, [throttler]),
+    callback = _useMemo.callback,
+    pipe = _useMemo.pipe;
+  return {
+    callback: useEvent(function () {
+      return callback.apply(void 0, arguments);
+    }),
+    pipe: 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 = useRef(null);
+  var _useThrottler = useThrottler(throttler),
+    callback = _useThrottler.callback,
+    pipe = _useThrottler.pipe;
+  useEffect(function () {
+    var _throttled = throttle({
+      callback: callback,
+      pipe: pipe
+    }, wait);
+    throttled.current = _throttled;
+    // dispose
+    return function () {
+      _throttled.abort();
+      throttled.current = null;
+    };
+  }, [wait]);
+  return 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();
+      }
+    };
+  });
+};
+
+export { useThrottleCallback };

package/dist/hooks/use-timeout.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author murukal
+ *
+ * @description
+ * timeout effect
+ */
+export declare const useTimeout: (callback: Function, wait: number) => {
+    flush: () => void;
+    cancel: () => void;
+};