react-vant-nova 1.0.0-test

package/es/hooks/use-debunce-effect.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import useDebounceFn from './use-debunce-fn';
+import useUpdateEffect from './use-update-effect';
+function useDebounceEffect(effect, deps, options) {
+  const [flag, setFlag] = useState({});
+  const {
+    run
+  } = useDebounceFn(() => {
+    setFlag({});
+  }, options);
+  useEffect(() => {
+    return run();
+  }, deps);
+  useUpdateEffect(effect, [flag]);
+}
+export default useDebounceEffect;

package/es/hooks/use-debunce-fn.d.ts

@@ -0,0 +1,18 @@
+export interface DebounceOptions {
+    wait?: number;
+    leading?: boolean;
+    trailing?: boolean;
+    maxWait?: number;
+}
+declare type noop = (...args: any) => any;
+declare function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions): {
+    run: {
+        (...args: any[]): any;
+        cancel: () => void;
+        flush: () => any;
+        pending: () => boolean;
+    };
+    cancel: () => void;
+    flush: () => any;
+};
+export default useDebounceFn;

package/es/hooks/use-debunce-fn.js

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import useLatest from './use-latest';
+import useUnmount from './use-unmount';
+import { isFunction } from '../utils';
+import { debounce } from '../utils/debounce';
+import { devWarning } from '../utils/dev-log';
+function useDebounceFn(fn, options) {
+  var _a;
+  if (process.env.NODE_ENV === 'development') {
+    if (!isFunction(fn)) {
+      devWarning('useDebounceFn', `expected parameter is a function, got ${typeof fn}`);
+    }
+  }
+  const fnRef = useLatest(fn);
+  const wait = (_a = options === null || options === void 0 ? void 0 : options.wait) !== null && _a !== void 0 ? _a : 1000;
+  const debounced = useMemo(() => debounce((...args) => {
+    return fnRef.current(...args);
+  }, wait, options), []);
+  useUnmount(() => {
+    debounced.cancel();
+  });
+  return {
+    run: debounced,
+    cancel: debounced.cancel,
+    flush: debounced.flush
+  };
+}
+export default useDebounceFn;

package/es/hooks/use-drag-and-pinch.d.ts

@@ -0,0 +1 @@
+export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: Config) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react/dist/declarations/src/types").ReactDOMAttributes;

package/es/hooks/use-drag-and-pinch.js

@@ -0,0 +1,2 @@
+import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react';
+export const useDragAndPinch = createUseGesture([dragAction, pinchAction]);

package/es/hooks/use-effect-with-target.d.ts

@@ -0,0 +1,4 @@
+import { DependencyList, EffectCallback } from 'react';
+import { BasicTarget } from '../utils/dom/getTargetElement';
+declare const useEffectWithTarget: (effect: EffectCallback, deps: DependencyList, target: BasicTarget<any> | BasicTarget<any>[]) => void;
+export default useEffectWithTarget;

package/es/hooks/use-effect-with-target.js

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+import { useRef } from 'react';
+import useUnmount from './use-unmount';
+import { getTargetElement } from '../utils/dom/getTargetElement';
+function depsAreSame(oldDeps, deps) {
+  if (oldDeps === deps) return true;
+  for (let i = 0; i < oldDeps.length; i++) {
+    if (!Object.is(oldDeps[i], deps[i])) return false;
+  }
+  return true;
+}
+const createEffectWithTarget = useEffectType => {
+  /**
+   *
+   * @param effect
+   * @param deps
+   * @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
+   */
+  const useEffectWithTarget = (effect, deps, target) => {
+    const hasInitRef = useRef(false);
+    const lastElementRef = useRef([]);
+    const lastDepsRef = useRef([]);
+    const unLoadRef = useRef();
+    useEffectType(() => {
+      var _a;
+      const targets = Array.isArray(target) ? target : [target];
+      const els = targets.map(item => getTargetElement(item));
+      // init run
+      if (!hasInitRef.current) {
+        hasInitRef.current = true;
+        lastElementRef.current = els;
+        lastDepsRef.current = deps;
+        unLoadRef.current = effect();
+        return;
+      }
+      if (els.length !== lastElementRef.current.length || !depsAreSame(els, lastElementRef.current) || !depsAreSame(deps, lastDepsRef.current)) {
+        (_a = unLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(unLoadRef);
+        lastElementRef.current = els;
+        lastDepsRef.current = deps;
+        unLoadRef.current = effect();
+      }
+    });
+    useUnmount(() => {
+      var _a;
+      (_a = unLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(unLoadRef);
+      // for react-refresh
+      hasInitRef.current = false;
+    });
+  };
+  return useEffectWithTarget;
+};
+const useEffectWithTarget = createEffectWithTarget(useEffect);
+export default useEffectWithTarget;

package/es/hooks/use-event-listener.d.ts

@@ -0,0 +1,11 @@
+import { BasicTarget, TargetElement } from '../utils/dom/getTargetElement';
+export declare let supportsPassive: boolean;
+declare type Target = BasicTarget<TargetElement>;
+export declare type UseEventListenerOptions = {
+    target?: Target;
+    capture?: boolean;
+    passive?: boolean;
+    depends?: Array<unknown>;
+};
+declare function useEventListener(type: string, listener: EventListener, options?: UseEventListenerOptions): void;
+export default useEventListener;

package/es/hooks/use-event-listener.js

@@ -0,0 +1,54 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useEffect } from 'react';
+import { inBrowser } from '../utils';
+import { getTargetElement } from '../utils/dom/getTargetElement';
+// https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#使用_passive_改善的滚屏性能
+export let supportsPassive = false;
+if (inBrowser) {
+  try {
+    const opts = {};
+    Object.defineProperty(opts, 'passive', {
+      get() {
+        supportsPassive = true;
+      }
+    });
+    window.addEventListener('test-passive', null, opts);
+    // eslint-disable-next-line no-empty
+  } catch (e) {}
+}
+function useEventListener(type, listener, options = {}) {
+  if (!inBrowser) {
+    return;
+  }
+  const {
+    target = window,
+    passive = false,
+    capture = false,
+    depends = []
+  } = options;
+  let attached;
+  const add = () => {
+    const element = getTargetElement(target);
+    if (element && !attached) {
+      element.addEventListener(type, listener, supportsPassive ? {
+        capture,
+        passive
+      } : capture);
+      attached = true;
+    }
+  };
+  const remove = () => {
+    const element = getTargetElement(target);
+    if (element && attached) {
+      element.removeEventListener(type, listener, capture);
+      attached = false;
+    }
+  };
+  // https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state
+  useEffect(() => {
+    add();
+    return () => remove();
+  }, [target, ...depends]);
+}
+export default useEventListener;

package/es/hooks/use-form-smart.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'react';
+export declare type FormOption = {
+    /**
+     * initialValues
+     */
+    value?: Record<string, unknown>;
+    /**
+     * sync
+     */
+    sync?: boolean;
+};
+export declare type FormMethod = {
+    set: (values: unknown) => void;
+    get: (name: string) => unknown;
+    submit: () => void;
+    getAll: () => Record<string, unknown>;
+    clear: () => void;
+};
+export declare type FormState = [Ref<unknown>, FormMethod];
+export default function useFormSmart(option?: FormOption): FormState;

package/es/hooks/use-form-smart.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isObject } from '../utils';
+function isEmpty(val) {
+  if (isObject(val)) {
+    return JSON.stringify(val) === '{}';
+  }
+  return true;
+}
+export default function useFormSmart(option = {}) {
+  const {
+    value,
+    sync
+  } = option;
+  const ref = useRef(null);
+  const [once, setOnce] = useState(false);
+  const set = useCallback(values => {
+    var _a;
+    (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue(values);
+  }, []);
+  const get = useCallback(name => {
+    var _a;
+    return (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getFieldValue(name);
+  }, []);
+  const submit = useCallback(() => {
+    var _a;
+    (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.submit();
+  }, []);
+  const clear = useCallback(() => {
+    var _a;
+    (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.resetFields();
+  }, []);
+  const getAll = useCallback(() => {
+    var _a;
+    return (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getFieldsValue();
+  }, []);
+  useEffect(() => {
+    if (!isEmpty(value)) {
+      if (sync) {
+        set(value);
+      } else if (!once) {
+        set(value);
+        setOnce(true);
+      }
+    }
+  }, [value]);
+  const methods = {
+    set,
+    get,
+    submit,
+    clear,
+    getAll
+  };
+  return [ref, methods];
+}

package/es/hooks/use-height.d.ts

@@ -0,0 +1,4 @@
+export declare const useHeight: (element: {
+    current: Element | undefined;
+}) => number;
+export default useHeight;

package/es/hooks/use-height.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { getRect } from './use-rect';
+export const useHeight = element => {
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    if (element.current) {
+      setHeight(getRect(element.current).height);
+    }
+  }, [element.current]);
+  return height;
+};
+export default useHeight;

package/es/hooks/use-in-viewport.d.ts

@@ -0,0 +1,8 @@
+import { BasicTarget } from '../utils/dom/getTargetElement';
+export interface Options {
+    rootMargin?: string;
+    threshold?: number | number[];
+    root?: BasicTarget<Element>;
+}
+declare function useInViewport(target: BasicTarget, options?: Options): readonly [boolean, number];
+export default useInViewport;

package/es/hooks/use-in-viewport.js

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { getTargetElement } from '../utils/dom/getTargetElement';
+import useEffectWithTarget from './use-effect-with-target';
+function useInViewport(target, options) {
+  const [state, setState] = useState();
+  const [ratio, setRatio] = useState();
+  useEffectWithTarget(() => {
+    const el = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+    const observer = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        setRatio(entry.intersectionRatio);
+        setState(entry.isIntersecting);
+      }
+    }, Object.assign(Object.assign({}, options), {
+      root: getTargetElement(options === null || options === void 0 ? void 0 : options.root)
+    }));
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, [], target);
+  return [state, ratio];
+}
+export default useInViewport;

package/es/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicUpdateLayoutEffect: typeof React.useEffect | typeof React.useLayoutEffect;
+export default useIsomorphicLayoutEffect;

package/es/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { inBrowser } from '../utils';
+import { createUpdateEffect } from './create-update-effect';
+export const useIsomorphicLayoutEffect = inBrowser ? React.useLayoutEffect : React.useEffect;
+export const useIsomorphicUpdateLayoutEffect = createUpdateEffect(useIsomorphicLayoutEffect);
+export default useIsomorphicLayoutEffect;

package/es/hooks/use-latest.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function useLatest<T>(value: T): import("react").MutableRefObject<T>;
+export default useLatest;

package/es/hooks/use-latest.js

@@ -0,0 +1,7 @@
+import { useRef } from 'react';
+function useLatest(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+export default useLatest;

package/es/hooks/use-lazy-effect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useLazyEffect: typeof useEffect;
+export default useLazyEffect;

package/es/hooks/use-lazy-effect.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+const useLazyEffect = (effect, deps) => {
+  const [c, setC] = useState(0);
+  useEffect(() => {
+    setC(v => v + 1);
+  }, deps);
+  useEffect(() => {
+    return effect();
+  }, [c]);
+};
+export default useLazyEffect;

package/es/hooks/use-lazy-render.d.ts

@@ -0,0 +1,3 @@
+import React, { ReactNode } from 'react';
+declare function useLazyRender(show: boolean): (render: () => React.ReactNode) => () => ReactNode;
+export default useLazyRender;

package/es/hooks/use-lazy-render.js

@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react';
+function useLazyRender(show) {
+  const [inited, setInited] = useState(false);
+  useEffect(() => {
+    if (show) {
+      setInited(show);
+    }
+  }, [show]);
+  return render => () => inited ? render() : null;
+}
+export default useLazyRender;

package/es/hooks/use-lock-fn.d.ts

@@ -0,0 +1,2 @@
+declare function useLockFn<P extends any[] = any[], V = any>(fn: (...args: P) => Promise<V>): (...args: P) => Promise<V>;
+export default useLockFn;

package/es/hooks/use-lock-fn.js

@@ -0,0 +1,18 @@
+import { __awaiter } from "tslib";
+import { useRef, useCallback } from 'react';
+function useLockFn(fn) {
+  const lockRef = useRef(false);
+  return useCallback((...args) => __awaiter(this, void 0, void 0, function* () {
+    if (lockRef.current) return;
+    lockRef.current = true;
+    try {
+      const ret = yield fn(...args);
+      lockRef.current = false;
+      return ret;
+    } catch (e) {
+      lockRef.current = false;
+      throw e;
+    }
+  }), [fn]);
+}
+export default useLockFn;

package/es/hooks/use-lock-scroll.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useLockScroll(rootRef: RefObject<HTMLElement>, shouldLock: boolean): void;

package/es/hooks/use-lock-scroll.js

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { getScrollParent } from './use-scroll-parent';
+import { supportsPassive } from '../utils/supports-passive';
+import useTouch from './use-touch';
+let totalLockCount = 0;
+const BODY_LOCK_CLASS = 'rv-overflow-hidden';
+// 移植自vant：https://github.com/youzan/vant/blob/HEAD/src/composables/use-lock-scroll.ts
+export function useLockScroll(rootRef, shouldLock) {
+  const touch = useTouch();
+  const onTouchMove = event => {
+    touch.move(event);
+    const direction = touch.deltaY.current > 0 ? '10' : '01';
+    const el = getScrollParent(event.target, rootRef.current);
+    if (!el) return;
+    const {
+      scrollHeight,
+      offsetHeight,
+      scrollTop
+    } = el;
+    let status = '11';
+    if (scrollTop === 0) {
+      status = offsetHeight >= scrollHeight ? '00' : '01';
+    } else if (scrollTop + offsetHeight >= scrollHeight) {
+      status = '10';
+    }
+    if (status !== '11' && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+  };
+  const lock = () => {
+    document.addEventListener('touchstart', touch.start);
+    document.addEventListener('touchmove', onTouchMove, supportsPassive ? {
+      passive: false
+    } : false);
+    if (!totalLockCount) {
+      document.body.classList.add(BODY_LOCK_CLASS);
+    }
+    totalLockCount++;
+  };
+  const unlock = () => {
+    if (totalLockCount) {
+      document.removeEventListener('touchstart', touch.start);
+      document.removeEventListener('touchmove', onTouchMove);
+      totalLockCount--;
+      if (!totalLockCount) {
+        document.body.classList.remove(BODY_LOCK_CLASS);
+      }
+    }
+  };
+  useEffect(() => {
+    if (shouldLock) {
+      lock();
+      return () => {
+        unlock();
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldLock]);
+}

package/es/hooks/use-memoized-fn.d.ts

@@ -0,0 +1,3 @@
+declare type noop = (this: any, ...args: any[]) => any;
+declare function useMemoizedFn<T extends noop>(fn: T): T;
+export default useMemoizedFn;

package/es/hooks/use-memoized-fn.js

@@ -0,0 +1,22 @@
+import { useMemo, useRef } from 'react';
+import { isFunction } from '../utils';
+import { devWarning } from '../utils/dev-log';
+function useMemoizedFn(fn) {
+  if (process.env.NODE_ENV === 'development') {
+    if (!isFunction(fn)) {
+      devWarning('useMemoizedFn', `expected parameter is a function, got ${typeof fn}`);
+    }
+  }
+  const fnRef = useRef(fn);
+  // why not write `fnRef.current = fn`?
+  // https://github.com/alibaba/hooks/issues/728
+  fnRef.current = useMemo(() => fn, [fn]);
+  const memoizedFn = useRef();
+  if (!memoizedFn.current) {
+    memoizedFn.current = function (...args) {
+      return fnRef.current.apply(this, args);
+    };
+  }
+  return memoizedFn.current;
+}
+export default useMemoizedFn;

package/es/hooks/use-merged-state.d.ts

@@ -0,0 +1,5 @@
+declare const useMergedState: <T, R = T>(option?: {
+    defaultValue?: T | (() => T);
+    value?: T;
+}) => [R, (value: T) => void];
+export default useMergedState;

package/es/hooks/use-merged-state.js

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+const useMergedState = option => {
+  const {
+    defaultValue,
+    value
+  } = option || {};
+  const [innerValue, setInnerValue] = useState(() => {
+    if (value !== undefined) {
+      return value;
+    }
+    if (defaultValue !== undefined) {
+      return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
+    }
+    return undefined;
+  });
+  const mergedValue = value !== undefined ? value : innerValue;
+  function triggerChange(newValue) {
+    setInnerValue(newValue);
+  }
+  return [mergedValue, triggerChange];
+};
+export default useMergedState;

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

@@ -0,0 +1,2 @@
+declare const useMount: (fn: () => void) => void;
+export default useMount;

package/es/hooks/use-mount.js

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const useMount = fn => {
+  useEffect(() => {
+    fn();
+  }, []);
+};
+export default useMount;

package/es/hooks/use-next-tick.d.ts

@@ -0,0 +1,2 @@
+declare const useNextTick: (fn?: () => void) => (handler?: () => void) => void;
+export default useNextTick;

package/es/hooks/use-next-tick.js

@@ -0,0 +1,17 @@
+import { useEffect, useCallback } from 'react';
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const useNextTick = fn => {
+  const nextTick = useCallback(handler => {
+    if (handler) {
+      Promise.resolve().then(() => handler());
+    }
+  }, []);
+  useEffect(() => {
+    if (fn) {
+      nextTick(fn);
+    }
+    return () => {};
+  }, [fn, nextTick]);
+  return fn !== null && fn !== void 0 ? fn : nextTick;
+};
+export default useNextTick;

package/es/hooks/use-page-visibility.d.ts

@@ -0,0 +1,3 @@
+declare type VisibilityState = 'hidden' | 'visible';
+declare function usePageVisibility(): VisibilityState;
+export default usePageVisibility;

package/es/hooks/use-page-visibility.js

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { useEffect, useState } from 'react';
+import { inBrowser } from '../utils';
+import useEventListener from './use-event-listener';
+function usePageVisibility() {
+  const [visibility, _setVisibility] = useState('visible');
+  const setVisibility = () => {
+    if (inBrowser) {
+      _setVisibility(document.hidden ? 'hidden' : 'visible');
+    }
+  };
+  useEffect(() => {
+    setVisibility();
+  }, []);
+  useEventListener('visibilitychange', setVisibility, {
+    depends: [visibility]
+  });
+  return visibility;
+}
+export default usePageVisibility;

package/es/hooks/use-props-value.d.ts

@@ -0,0 +1,8 @@
+import { SetStateAction } from 'react';
+declare type Options<T> = {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (v: T) => void;
+};
+export default function usePropsValue<T>(options: Options<T>): readonly [T, (v: SetStateAction<T>, forceTrigger?: boolean) => void];
+export {};

package/es/hooks/use-props-value.js

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+import useMemoizedFn from './use-memoized-fn';
+import useUpdate from './use-update';
+export default function usePropsValue(options) {
+  const {
+    value,
+    defaultValue,
+    onChange
+  } = options;
+  const update = useUpdate();
+  const stateRef = useRef(value !== undefined ? value : defaultValue);
+  if (value !== undefined) {
+    stateRef.current = value;
+  }
+  const setState = useMemoizedFn((v, forceTrigger) => {
+    // `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current`
+    const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
+    if (!forceTrigger && nextValue === stateRef.current) return;
+    stateRef.current = nextValue;
+    update();
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+  });
+  return [stateRef.current, setState];
+}

package/es/hooks/use-rect.d.ts

@@ -0,0 +1,11 @@
+interface Rect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+declare const useRect: (elementRef: Element | Window) => Rect;
+export { useRect as getRect };
+export default useRect;