react-vant-nova 1.0.0-test

package/es/index.js

@@ -0,0 +1,73 @@
+import './styles';
+export { default as hooks } from './hooks';
+export * from './button';
+export * from './badge';
+export * from './field';
+export * from './flex';
+export * from './space';
+export * from './selector';
+export * from './typography';
+export * from './cell';
+export * from './count-down';
+export * from './divider';
+export * from './image';
+export * from './image-preview';
+export * from './popup';
+export * from './overlay';
+export * from './empty';
+export * from './loading';
+export * from './notify';
+export * from './pull-refresh';
+export * from './swipe-cell';
+export * from './share-sheet';
+export * from './notice-bar';
+export * from './popover';
+export * from './list';
+export * from './skeleton';
+export * from './steps';
+export * from './toast';
+export * from './action-sheet';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './search';
+export * from './sidebar';
+export * from './tabs';
+export * from './sticky';
+export * from './nav-bar';
+export * from './tag';
+export * from './grid';
+export * from './input';
+export * from './index-bar';
+export * from './collapse';
+export * from './radio';
+export * from './rate';
+export * from './calendar';
+export * from './cascader';
+export * from './checkbox';
+export * from './picker';
+export * from './datetime-picker';
+export * from './password-input';
+export * from './number-keyboard';
+export * from './slider';
+export * from './stepper';
+export * from './switch';
+export * from './uploader';
+export * from './progress';
+export * from './circle';
+export * from './pagination';
+export * from './action-bar';
+export * from './tabbar';
+export * from './config-provider';
+export * from './form';
+export * from './lazyload';
+export * from './area';
+export * from './card';
+export * from './product-card';
+export * from './submit-bar';
+export * from './coupon-cell';
+export * from './coupon-list';
+export * from './sku';
+export * from './swiper';
+export * from './floating-ball';
+export * from './water-mark';
+export * from './floating-panel';

package/es/input/Input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputInstance, InputProps } from './PropsType';
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputInstance>>;
+export default Input;

package/es/input/Input.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { Clear } from '@react-vant/icons';
+import clsx from 'clsx';
+import { isDef, formatNumber, preventDefault, resetScroll, createNamespace } from '../utils';
+import { usePropsValue } from '../hooks';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('input');
+const Input = forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    clearIcon: _jsx(Clear, {}),
+    clearTrigger: 'focus',
+    defaultValue: ''
+  });
+  const inputRef = useRef();
+  const [inputFocus, setInputFocus] = useState(false);
+  const compositionStartRef = useRef(false);
+  const [value, setValue] = usePropsValue(props);
+  const {
+    className,
+    style,
+    align,
+    type,
+    name,
+    placeholder,
+    disabled,
+    readOnly,
+    maxLength,
+    autoFocus
+  } = props;
+  const focus = () => {
+    if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  const blur = () => {
+    if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+      inputRef.current.blur();
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      setValue('');
+    },
+    focus,
+    blur,
+    get nativeElement() {
+      return inputRef.current;
+    }
+  }));
+  const showClear = useMemo(() => {
+    if (props.clearable && !readOnly) {
+      const hasValue = value !== '';
+      const trigger = props.clearTrigger === 'always' || props.clearTrigger === 'focus' && inputFocus;
+      return hasValue && trigger;
+    }
+    return false;
+  }, [value, props.clearTrigger, inputFocus]);
+  const handleValueChange = inputValue => {
+    var _a;
+    let finalValue = inputValue;
+    if (!compositionStartRef.current) {
+      if (isDef(maxLength) && finalValue.length > +maxLength) {
+        finalValue = finalValue.slice(0, maxLength);
+        (_a = props.onOverlimit) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+      if (type === 'number' || type === 'digit') {
+        const isNumber = type === 'number';
+        finalValue = formatNumber(finalValue, isNumber, isNumber);
+      }
+    }
+    setValue(finalValue);
+  };
+  const handleFocus = e => {
+    var _a;
+    setInputFocus(true);
+    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    // readOnly not work in legacy mobile safari
+    if (readOnly) {
+      blur();
+    }
+  };
+  const handleBulr = e => {
+    var _a;
+    setInputFocus(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    resetScroll();
+  };
+  const handleKeyPress = e => {
+    var _a;
+    if (e.key === 'Enter' || +e.charCode === 13) {
+      preventDefault(e);
+      // trigger blur after click keyboard search button
+      if (props.type === 'search') {
+        blur();
+      }
+    }
+    (_a = props.onKeyPress) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  };
+  const renderInput = () => {
+    let inputType = type;
+    let inputMode;
+    // type="number" is weired in iOS, and can't prevent dot in Android
+    // so use inputmode to set keyboard in mordern browers
+    if (type === 'number') {
+      inputType = 'text';
+      inputMode = 'decimal';
+    }
+    if (type === 'digit') {
+      inputType = 'tel';
+      inputMode = 'numeric';
+    }
+    return _jsx("input", {
+      value: value,
+      type: inputType,
+      inputMode: inputMode,
+      ref: inputRef,
+      name: name,
+      className: clsx(bem('control')),
+      disabled: disabled,
+      autoFocus: autoFocus,
+      readOnly: readOnly,
+      placeholder: placeholder || '',
+      onBlur: handleBulr,
+      onFocus: handleFocus,
+      onChange: e => {
+        var _a;
+        return handleValueChange((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.value);
+      },
+      onKeyPress: handleKeyPress,
+      autoCapitalize: props.autoCapitalize,
+      autoCorrect: props.autoCorrect,
+      onKeyDown: props.onKeyDown,
+      onKeyUp: props.onKeyUp,
+      onCompositionStart: e => {
+        var _a;
+        compositionStartRef.current = true;
+        (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      },
+      onCompositionEnd: e => {
+        var _a, _b;
+        compositionStartRef.current = false;
+        (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        handleValueChange((_b = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _b === void 0 ? void 0 : _b.value);
+      },
+      onClick: props.onClick
+    });
+  };
+  const handleClear = e => {
+    var _a;
+    setValue('');
+    (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  };
+  return _jsxs("div", Object.assign({
+    className: clsx(bem([align]), className),
+    style: style
+  }, {
+    children: [props.prefix && _jsx("div", Object.assign({
+      className: clsx(bem('prefix'))
+    }, {
+      children: props.prefix
+    })), renderInput(), showClear && React.cloneElement(props.clearIcon || _jsx(Clear, {}), {
+      className: clsx(bem('clear')),
+      onTouchStart: handleClear
+    }), props.suffix && _jsx("div", Object.assign({
+      className: clsx(bem('suffix'))
+    }, {
+      children: props.suffix
+    }))]
+  }));
+});
+export default Input;

package/es/input/PropsType.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+export declare type InputType = 'tel' | 'text' | 'digit' | 'number' | 'search' | 'password';
+export declare type InputTextAlign = 'left' | 'center' | 'right';
+export declare type InputClearTrigger = 'always' | 'focus';
+export declare type InputAutosizeConfig = {
+    maxHeight?: number;
+    minHeight?: number;
+};
+declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare type InputNativeProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'name' | 'readOnly' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'>;
+export interface InputSharedProps {
+    value?: string;
+    defaultValue?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /** 输入框占位提示文字	 */
+    placeholder?: string;
+    /** 是否禁用输入框	 */
+    disabled?: boolean;
+    name?: string;
+    readOnly?: boolean;
+    /**  是否自动聚焦，iOS 系统不支持该属性	 */
+    autoFocus?: boolean;
+    /** 是否启用清除图标，点击清除图标后会清空输入框	 */
+    clearable?: boolean;
+    /** 自定义清除图标 */
+    clearIcon?: React.ReactNode;
+    /**
+     * 显示清除图标的时机，
+     * always 表示输入框不为空时展示 focus 表示输入框聚焦且不为空时展示
+     * @default 'focus'
+     */
+    clearTrigger?: InputClearTrigger;
+    onChange?: (val: string) => void;
+    onClear?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** 当输入值超出maxLength时触发 */
+    onOverlimit?: () => void;
+}
+export interface InputProps extends InputNativeProps, InputSharedProps {
+    /** 输入框类型 */
+    type?: InputType;
+    /** 输入框对齐方式，可选值为 `center` `right` */
+    align?: InputTextAlign;
+    /** 自定义前置内容 */
+    prefix?: React.ReactNode;
+    /** 自定义后置内容 */
+    suffix?: React.ReactNode;
+}
+export declare type InputInstance = {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    nativeElement: HTMLInputElement | null;
+};
+export {};

package/es/input/PropsType.js

@@ -0,0 +1 @@
+export {};

package/es/input/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './style/index.less';
+declare const Input: import("react").ForwardRefExoticComponent<import("./PropsType").InputProps & import("react").RefAttributes<import("./PropsType").InputInstance>> & {
+    TextArea: import("react").ForwardRefExoticComponent<import("../text-area").TextAreaProps & import("react").RefAttributes<import("../text-area").TextAreaInstance>>;
+};
+export default Input;
+export { Input };
+export type { InputProps, InputInstance } from './PropsType';
+export type { TextAreaProps, TextAreaInstance } from '../text-area/PropsType';

package/es/input/index.js

@@ -0,0 +1,8 @@
+import _Input from './Input';
+import TextArea from '../text-area';
+import "./style/index.css";
+const Input = Object.assign(_Input, {
+  TextArea
+});
+export default Input;
+export { Input };

package/es/input/style/index.css

@@ -0,0 +1,82 @@
+:root {
+  --rv-input-text-color: var(--rv-text-color);
+  --rv-input-disabled-text-color: var(--rv-gray-5);
+  --rv-input-placeholder-text-color: var(--rv-gray-5);
+  --rv-input-placeholder-text-font-size: var(--rv-font-size-md);
+  --rv-input-background-color: transparent;
+  --rv-input-clear-icon-size: 16px;
+  --rv-input-clear-icon-color: var(--rv-gray-5);
+}
+.rv-input {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+}
+.rv-input--center .rv-input__control {
+  text-align: center;
+}
+.rv-input--right .rv-input__control {
+  text-align: right;
+}
+.rv-input--right .rv-input__clear {
+  padding-right: 0;
+}
+.rv-input__control {
+  display: block;
+  box-sizing: border-box;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  color: var(--rv-input-text-color);
+  line-height: inherit;
+  text-align: inherit;
+  background-color: var(--rv-input-background-color);
+  border: 0;
+  resize: none;
+  user-select: auto;
+}
+.rv-input__control::placeholder {
+  color: var(--rv-input-placeholder-text-color);
+  font-size: var(--rv-input-placeholder-text-font-size);
+}
+.rv-input__control:disabled {
+  color: var(--rv-input-disabled-text-color);
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: var(--rv-input-disabled-text-color);
+}
+.rv-input__control:read-only {
+  cursor: default;
+}
+.rv-input__control[type='date'],
+.rv-input__control[type='time'],
+.rv-input__control[type='datetime-local'] {
+  min-height: var(--rv-cell-line-height);
+}
+.rv-input__control[type='search'] {
+  -webkit-appearance: none;
+}
+.rv-input__clear {
+  flex-shrink: 0;
+  color: var(--rv-input-clear-icon-color);
+  font-size: var(--rv-input-clear-icon-size);
+  margin-right: calc(var(--rv-padding-xs) * -1);
+  padding: 0 var(--rv-padding-xs);
+  box-sizing: content-box;
+  cursor: pointer;
+}
+.rv-input__prefix,
+.rv-input__suffix {
+  display: flex;
+  align-items: center;
+}
+.rv-input__prefix {
+  padding-right: var(--rv-padding-xs);
+}
+.rv-input__suffix {
+  padding-left: var(--rv-padding-xs);
+}

package/es/lazyload/Lazyload.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LazyloadProps } from './PropsType';
+declare const Lazyload: React.FC<LazyloadProps>;
+export default Lazyload;

package/es/lazyload/Lazyload.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import cls from 'clsx';
+import { useInViewport } from '../hooks';
+import Skeleton from '../skeleton';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('lazyload');
+const Lazyload = p => {
+  const props = mergeProps(p, {
+    placeholder: _jsx(Skeleton, {
+      title: true
+    })
+  });
+  const ref = useRef();
+  const [inViewPort] = useInViewport(ref);
+  const {
+    height,
+    placeholder,
+    children,
+    className,
+    style
+  } = props;
+  return inViewPort ? _jsx(_Fragment, {
+    children: children
+  }) : _jsx("div", Object.assign({
+    ref: ref,
+    className: cls(bem(), className),
+    style: Object.assign({
+      height
+    }, style)
+  }, {
+    children: placeholder
+  }));
+};
+export default Lazyload;

package/es/lazyload/PropsType.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export interface LazyloadProps extends BaseTypeProps {
+    /** 占位容器高度 */
+    height?: number | string;
+    /** 自定义占位符 */
+    placeholder?: React.ReactNode;
+    children?: React.ReactNode;
+}

package/es/lazyload/PropsType.js

@@ -0,0 +1 @@
+export {};

package/es/lazyload/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import Lazyload from './Lazyload';
+export default Lazyload;
+export { Lazyload };

package/es/lazyload/index.js

@@ -0,0 +1,4 @@
+import "./style/index.css";
+import Lazyload from './Lazyload';
+export default Lazyload;
+export { Lazyload };

package/es/lazyload/style/index.css

@@ -0,0 +1,5 @@
+.rv-lazyload {
+  position: relative;
+  display: block;
+  width: 100%;
+}

package/es/list/List.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ListProps } from './PropsType';
+declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<import("./PropsType").LoadMoreInstance>>;
+export default List;

package/es/list/List.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import LoadMore from './LoadMore';
+import { mergeProps } from '../utils/get-default-props';
+const List = forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    offset: 300
+  });
+  return _jsx(LoadMore, Object.assign({
+    ref: ref,
+    className: clsx(props.className),
+    style: props.style,
+    onLoad: props.onLoad,
+    threshold: props.offset,
+    finished: props.finished,
+    finishedText: props.finishedText,
+    loadingText: props.loadingText,
+    errorText: props.errorText
+  }, {
+    children: props.children
+  }));
+});
+export default List;

package/es/list/LoadMore.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LoadMoreProps, LoadMoreInstance } from './PropsType';
+declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<LoadMoreInstance>>;
+export default LoadMore;

package/es/list/LoadMore.js

@@ -0,0 +1,134 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import clsx from 'clsx';
+import { createNamespace } from '../utils';
+import useLockFn from '../hooks/use-lock-fn';
+import { getScrollParent } from '../hooks/use-scroll-parent';
+import Loading from '../loading';
+import ConfigProviderContext from '../config-provider/ConfigProviderContext';
+import useThrottleFn from '../hooks/use-throttle-fn';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('list');
+function isWindow(element) {
+  return element === window;
+}
+const LoadMore = React.forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    threshold: 300
+  });
+  const {
+    locale
+  } = React.useContext(ConfigProviderContext);
+  const [failed, setFailed] = React.useState(false);
+  const doLoadMore = useLockFn(isRetry => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      yield props.onLoad(isRetry);
+    } catch (e) {
+      setFailed(true);
+    }
+  }));
+  const elementRef = React.useRef(null);
+  // Prevent duplicated trigger of `check` function
+  const [flag, setFlag] = React.useState({});
+  const nextFlagRef = React.useRef(flag);
+  const [scrollParent, setScrollParent] = React.useState();
+  const {
+    run: check
+  } = useThrottleFn(() => __awaiter(void 0, void 0, void 0, function* () {
+    if (nextFlagRef.current !== flag) return;
+    if (props.finished || failed) return;
+    const element = elementRef.current;
+    if (!element) return;
+    if (!element.offsetParent) return;
+    const parent = getScrollParent(element);
+    setScrollParent(parent);
+    if (!parent) return;
+    const rect = element.getBoundingClientRect();
+    const elementTop = rect.top;
+    const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
+    const isReachEdge = current >= elementTop - props.threshold;
+    if (isReachEdge) {
+      const nextFlag = {};
+      nextFlagRef.current = nextFlag;
+      yield doLoadMore(false);
+      setFlag(nextFlag);
+    }
+  }), {
+    wait: 100,
+    leading: true,
+    trailing: true
+  });
+  React.useEffect(() => {
+    check();
+  });
+  React.useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    if (!scrollParent) return;
+    function onScroll() {
+      check();
+    }
+    scrollParent.addEventListener('scroll', onScroll);
+    return () => {
+      scrollParent.removeEventListener('scroll', onScroll);
+    };
+  }, [scrollParent]);
+  function retry() {
+    return __awaiter(this, void 0, void 0, function* () {
+      setFailed(false);
+      yield doLoadMore(true);
+      setFlag(nextFlagRef.current);
+    });
+  }
+  const renderDone = () => {
+    if (props.finishedText) {
+      return _jsx("div", Object.assign({
+        className: clsx(bem('finished'))
+      }, {
+        children: props.finishedText
+      }));
+    }
+    return null;
+  };
+  const renderFailed = () => {
+    if (props.errorText) {
+      if (typeof props.errorText === 'function') return props.errorText(retry);
+      return _jsx("div", Object.assign({
+        onClick: retry,
+        className: clsx(bem('error'))
+      }, {
+        children: props.errorText
+      }));
+    }
+    return null;
+  };
+  const renderLoading = () => {
+    return _jsx(Loading, Object.assign({
+      className: clsx(bem('loading')),
+      size: 16
+    }, {
+      children: props.loadingText || locale.loading
+    }));
+  };
+  const renderPlaceholder = () => {
+    if (props.finished) return renderDone();
+    if (failed) return renderFailed();
+    return renderLoading();
+  };
+  React.useImperativeHandle(ref, () => ({
+    check
+  }));
+  return _jsxs("div", Object.assign({
+    className: clsx(props.className, bem()),
+    style: props.style
+  }, {
+    children: [props.children, _jsx("div", Object.assign({
+      className: clsx(props.className, bem('loadmore')),
+      ref: elementRef
+    }, {
+      children: renderPlaceholder()
+    }))]
+  }));
+});
+export default LoadMore;