react-vant-nova 1.0.0-test

package/es/text-area/TextArea.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, forwardRef, useImperativeHandle, useRef, useState, useMemo } from 'react';
+import { Clear } from '@react-vant/icons';
+import clsx from 'clsx';
+import { createNamespace, isDef, isObject, resetScroll } from '../utils';
+import { usePropsValue } from '../hooks';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('textarea');
+const TextArea = forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    rows: 2,
+    clearIcon: _jsx(Clear, {}),
+    clearTrigger: 'focus',
+    defaultValue: ''
+  });
+  const [hasFocus, setHasFocus] = useState(false);
+  const nativeTextAreaRef = useRef();
+  const compositionStartRef = useRef(false);
+  const [value, setValue] = usePropsValue(props);
+  const {
+    className,
+    style,
+    name,
+    rows,
+    placeholder,
+    disabled,
+    readOnly,
+    maxLength,
+    showWordLimit,
+    autoFocus
+  } = props;
+  const focus = () => {
+    if (nativeTextAreaRef === null || nativeTextAreaRef === void 0 ? void 0 : nativeTextAreaRef.current) {
+      nativeTextAreaRef.current.focus();
+    }
+  };
+  const blur = () => {
+    if (nativeTextAreaRef === null || nativeTextAreaRef === void 0 ? void 0 : nativeTextAreaRef.current) {
+      nativeTextAreaRef.current.blur();
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      setValue('');
+    },
+    focus,
+    blur,
+    get nativeElement() {
+      return nativeTextAreaRef.current;
+    }
+  }));
+  const adjustSize = () => {
+    const input = nativeTextAreaRef.current;
+    if (!input) return;
+    input.style.height = 'auto';
+    let height = input.scrollHeight;
+    if (isObject(props.autoSize)) {
+      const {
+        maxHeight,
+        minHeight
+      } = props.autoSize;
+      if (maxHeight) {
+        height = Math.min(height, maxHeight);
+      }
+      if (minHeight) {
+        height = Math.max(height, minHeight);
+      }
+    }
+    if (height) {
+      input.style.height = `${height}px`;
+    }
+  };
+  useEffect(() => {
+    adjustSize();
+  }, [value]);
+  const controlClass = React.useMemo(() => {
+    return bem('control', [{
+      'min-height': !props.autoSize,
+      clear: props.clearable
+    }]);
+  }, [props.autoSize]);
+  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);
+      }
+    }
+    setValue(finalValue);
+  };
+  const handleFocus = e => {
+    var _a;
+    setHasFocus(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;
+    setHasFocus(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    resetScroll();
+  };
+  const renderWordLimit = () => {
+    if (showWordLimit) {
+      const currentCount = (value ? `${value}` : '').length;
+      return _jsx("div", Object.assign({
+        className: clsx(bem('word-limit'))
+      }, {
+        children: typeof showWordLimit === 'function' ? showWordLimit({
+          currentCount,
+          maxLength
+        }) : _jsxs(_Fragment, {
+          children: [_jsx("span", Object.assign({
+            className: clsx(bem('word-num'))
+          }, {
+            children: currentCount
+          })), maxLength ? `/${maxLength}` : false]
+        })
+      }));
+    }
+    return null;
+  };
+  const handleClear = e => {
+    var _a;
+    setValue('');
+    (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props, e);
+  };
+  const showClear = useMemo(() => {
+    if (props.clearable && !readOnly) {
+      const hasValue = value !== '';
+      const trigger = props.clearTrigger === 'always' || props.clearTrigger === 'focus' && hasFocus;
+      return hasValue && trigger;
+    }
+    return false;
+  }, [value, props.clearTrigger, hasFocus]);
+  return _jsxs("div", Object.assign({
+    className: clsx(bem(), className),
+    style: style
+  }, {
+    children: [_jsx("textarea", {
+      ref: nativeTextAreaRef,
+      name: name,
+      rows: rows,
+      className: clsx(controlClass),
+      value: value,
+      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: props.onKeyPress,
+      onKeyDown: props.onKeyDown,
+      onKeyUp: props.onKeyUp,
+      autoComplete: props.autoComplete,
+      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
+    }), showClear && React.cloneElement(props.clearIcon, {
+      className: clsx(bem('clear')),
+      onTouchStart: handleClear
+    }), renderWordLimit()]
+  }));
+});
+export default TextArea;

package/es/text-area/index.d.ts

@@ -0,0 +1,5 @@
+import TextArea from './TextArea';
+import './style/index.less';
+export default TextArea;
+export { TextArea };
+export type { TextAreaProps, TextAreaInstance } from './PropsType';

package/es/text-area/index.js

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

package/es/text-area/style/index.css

@@ -0,0 +1,144 @@
+: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);
+}
+:root {
+  --rv-textarea-min-height: 60px;
+  --rv-textarea-word-limit-color: var(--rv-gray-7);
+  --rv-textarea-word-limit-font-size: var(--rv-font-size-sm);
+  --rv-textarea-word-limit-line-height: 16px;
+}
+.rv-textarea {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  text-align: left;
+}
+.rv-textarea .rv-textarea__control {
+  display: block;
+  box-sizing: border-box;
+  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-textarea .rv-textarea__control::placeholder {
+  color: var(--rv-input-placeholder-text-color);
+  font-size: var(--rv-input-placeholder-text-font-size);
+}
+.rv-textarea .rv-textarea__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-textarea .rv-textarea__control:read-only {
+  cursor: default;
+}
+.rv-textarea .rv-textarea__control--min-height {
+  min-height: var(--rv-textarea-min-height);
+}
+.rv-textarea .rv-textarea__control--clear {
+  padding-right: var(--rv-padding-md);
+}
+.rv-textarea .rv-textarea__clear {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  z-index: 1;
+  color: var(--rv-input-clear-icon-color);
+  font-size: var(--rv-input-clear-icon-size);
+  cursor: pointer;
+}
+.rv-textarea .rv-textarea__word-limit {
+  margin-top: var(--rv-padding-base);
+  color: var(--rv-textarea-word-limit-color);
+  font-size: var(--rv-textarea-word-limit-font-size);
+  line-height: var(--rv-textarea-word-limit-line-height);
+  text-align: right;
+}

package/es/toast/PropsType.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { LoadingType } from '../loading/PropsType';
+import { BaseTypeProps } from '../utils';
+export declare type ToastType = 'loading' | 'success' | 'fail' | 'info';
+export declare type ToastPosition = 'top' | 'middle' | 'bottom';
+export interface ToastProps extends BaseTypeProps {
+    /** 提示类型 */
+    type?: ToastType;
+    /** 文本内容，支持通过\n换行 */
+    message?: number | string;
+    /** 展示时长(ms)，值为 0 时，toast 不会消失	 */
+    duration?: number | string;
+    /** 自定义图标 */
+    icon?: React.ReactNode;
+    /** 图标大小，如 20px 2em，默认单位为 px	 */
+    iconSize?: number | string;
+    /** 加载图标类型, 可选值为 spinner */
+    loadingType?: LoadingType;
+    /** 是否显示背景遮罩层	 */
+    overlay?: boolean;
+    overlayClass?: string;
+    overlayStyle?: React.CSSProperties;
+    /** 是否禁止背景点击	 */
+    forbidClick?: boolean;
+    /** 是否在点击遮罩层后关闭	 */
+    closeOnClickOverlay?: boolean;
+    /** 是否在点击后关闭	 */
+    closeOnClick?: boolean;
+    /** 位置，可选值为 top bottom	 */
+    position?: ToastPosition;
+    /** 动画类名 */
+    transition?: string;
+    /** 轻提示弹出时的的父容器 */
+    teleport?: HTMLElement | (() => HTMLElement);
+    /** 关闭时的回调函数 */
+    onClose?: () => void;
+    /** 完全展示后的回调函数	 */
+    onOpened?: () => void;
+}
+export declare type ToastPrivateProps = {
+    onClosed?: () => void;
+};
+export declare type ToastOptions = Omit<ToastProps, 'type'> | string;
+export declare type ToastReturnType = {
+    /** 动态更新方法 */
+    config: React.Dispatch<React.SetStateAction<ToastProps>>;
+    /** 清除单例toast */
+    clear: () => void;
+};
+export interface ToastInstance {
+    (opts: ToastProps | string): ToastReturnType;
+    /** 文本提示	 */
+    info(opts: ToastOptions): ToastReturnType;
+    /** 展示加载提示	 */
+    loading(opts: ToastOptions): ToastReturnType;
+    /** 展示成功提示	 */
+    success(opts: ToastOptions): ToastReturnType;
+    /** 展示失败提示	 */
+    fail(opts: ToastOptions): ToastReturnType;
+    /**
+     * 修改默认配置，对所有 Toast 生效。
+     * 传入 type 可以修改指定类型的默认配置
+     */
+    setDefaultOptions(type: ToastType | ToastProps, options?: ToastProps): void;
+    /**
+     * 重置默认配置，对所有 Toast 生效。
+     * 传入 type 可以重置指定类型的默认配置
+     */
+    resetDefaultOptions(type?: ToastType): void;
+    /** 允许同时存在多个 Toast	 */
+    allowMultiple(value?: boolean): void;
+    /** 关闭提示	 */
+    clear(): void;
+}

package/es/toast/PropsType.js

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

package/es/toast/Toast.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ToastPrivateProps, ToastProps } from './PropsType';
+declare const Toast: React.FC<ToastProps & ToastPrivateProps & {
+    visible?: boolean;
+}>;
+export default Toast;

package/es/toast/Toast.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+import { Cross, Success } from '@react-vant/icons';
+import Popup from '../popup';
+import Loading from '../loading';
+import { lockClick } from './lock-click';
+import { createNamespace, isDef } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('toast');
+const Toast = p => {
+  const props = mergeProps(p, {
+    type: 'info',
+    duration: 2000,
+    position: 'middle',
+    transition: 'rv-fade',
+    loadingType: 'circular',
+    overlay: false
+  });
+  const onClick = () => {
+    if (props.closeOnClick) {
+      props.onClose();
+    }
+  };
+  useEffect(() => {
+    if (!props.visible) {
+      lockClick(false);
+      return;
+    }
+    let clickable = false;
+    const newValue = props.visible && props.forbidClick;
+    if (clickable !== newValue) {
+      clickable = newValue;
+      lockClick(clickable);
+    }
+  }, [props.visible, props.forbidClick]);
+  const renderIcon = () => {
+    const {
+      icon,
+      type,
+      iconSize,
+      loadingType
+    } = props;
+    const hasIcon = icon || type === 'success' || type === 'fail';
+    if (hasIcon) {
+      const buildInIcon = type === 'fail' ? _jsx(Cross, {}) : _jsx(Success, {});
+      return React.cloneElement(icon || buildInIcon, {
+        className: clsx(bem('icon')),
+        fontSize: iconSize
+      });
+    }
+    if (type === 'loading') {
+      return _jsx(Loading, {
+        className: clsx(bem('loading')),
+        type: loadingType
+      });
+    }
+    return null;
+  };
+  const renderMessage = () => {
+    const {
+      message
+    } = props;
+    if (isDef(message) && message !== '') {
+      return _jsx("div", Object.assign({
+        className: clsx(bem('info'))
+      }, {
+        children: message
+      }));
+    }
+    return null;
+  };
+  return _jsxs(Popup, Object.assign({
+    className: clsx([bem([props.position, {
+      [props.type]: !props.icon
+    }]), props.className]),
+    visible: props.visible,
+    overlay: props.overlay,
+    transition: props.transition,
+    overlayClass: props.overlayClass,
+    overlayStyle: props.overlayStyle,
+    closeOnClickOverlay: props.closeOnClickOverlay,
+    lockScroll: false,
+    onClick: onClick,
+    onClose: props.onClose,
+    onClosed: props.onClosed,
+    onOpened: props.onOpened,
+    teleport: props.teleport
+  }, {
+    children: [renderIcon(), renderMessage()]
+  }));
+};
+export default Toast;

package/es/toast/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Toast from './method';
+export default Toast;
+export { Toast };
+export type { ToastType, ToastPosition, ToastOptions, ToastReturnType, } from './PropsType';

package/es/toast/index.js

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

package/es/toast/lock-click.d.ts

@@ -0,0 +1 @@
+export declare function lockClick(lock: boolean): void;

package/es/toast/lock-click.js

@@ -0,0 +1,14 @@
+let lockCount = 0;
+export function lockClick(lock) {
+  if (lock) {
+    if (!lockCount) {
+      document.body.classList.add('rv-toast--unclickable');
+    }
+    lockCount += 1;
+  } else if (lockCount) {
+    lockCount -= 1;
+    if (!lockCount) {
+      document.body.classList.remove('rv-toast--unclickable');
+    }
+  }
+}

package/es/toast/method.d.ts

@@ -0,0 +1,3 @@
+import { ToastInstance } from './PropsType';
+declare const _default: ToastInstance;
+export default _default;

package/es/toast/method.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { extend, isObject } from '../utils';
+import { resolveContainer } from '../utils/dom/getContainer';
+import { lockClick } from './lock-click';
+import BaseToast from './Toast';
+import { render, unmount } from '../utils/dom/render';
+import canUseDom from '../utils/dom/canUseDom';
+const defaultOptions = {
+  message: '',
+  className: '',
+  type: 'info',
+  position: 'middle',
+  forbidClick: false,
+  duration: 2000,
+  teleport: () => document.body
+};
+const toastArray = [];
+let allowMultiple = false;
+let currentOptions = extend({}, defaultOptions);
+// default options of specific type
+const defaultOptionsMap = new Map();
+// 同步的销毁
+function syncClear() {
+  let fn = toastArray.pop();
+  while (fn) {
+    fn();
+    fn = toastArray.pop();
+  }
+}
+// 针对 toast 还没弹出来就立刻销毁的情况，将销毁放到下一个 event loop 中，避免销毁失败。
+function nextTickClear() {
+  setTimeout(syncClear);
+}
+// 可返回用于销毁此弹窗的方法
+const ToastObj = p => {
+  if (!canUseDom()) return null;
+  const props = parseOptions(p);
+  const update = {
+    config: () => {},
+    clear: () => null
+  };
+  let timer = 0;
+  const {
+    onClose,
+    teleport
+  } = props;
+  const container = document.createElement('div');
+  const bodyContainer = resolveContainer(teleport);
+  bodyContainer.appendChild(container);
+  const TempToast = () => {
+    const options = Object.assign({
+      duration: 2000
+    }, props);
+    const [visible, setVisible] = useState(false);
+    const [state, setState] = useState(Object.assign({}, options));
+    // clearDOM after animation
+    const internalOnClosed = useCallback(() => {
+      if (state.forbidClick) {
+        lockClick(false);
+      }
+      setVisible(false);
+      window.setTimeout(() => {
+        const unmountResult = unmount(container);
+        if (unmountResult && container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+      }, +state.duration || +defaultOptions.duration);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [container]);
+    // close with animation
+    const destroy = useCallback(() => {
+      setVisible(false);
+      if (onClose) onClose();
+    }, []);
+    update.clear = internalOnClosed;
+    update.config = useCallback(nextState => {
+      setState(prev => typeof nextState === 'function' ? Object.assign(Object.assign({}, prev), nextState(prev)) : Object.assign(Object.assign({}, prev), nextState));
+    }, [setState]);
+    useEffect(() => {
+      setVisible(true);
+      if (!allowMultiple) syncClear();
+      toastArray.push(internalOnClosed);
+      if (state.duration !== 0 && 'duration' in state) {
+        timer = window.setTimeout(destroy, +state.duration);
+      }
+      return () => {
+        if (timer !== 0) {
+          window.clearTimeout(timer);
+        }
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return _jsx(BaseToast, Object.assign({}, state, {
+      visible: visible,
+      teleport: () => container,
+      onClose: destroy,
+      onClosed: internalOnClosed
+    }));
+  };
+  render(_jsx(TempToast, {}), container);
+  return update;
+};
+function parseOptions(message) {
+  if (isObject(message)) {
+    return message;
+  }
+  return {
+    message
+  };
+}
+const createMethod = type => options => ToastObj(Object.assign(Object.assign(Object.assign(Object.assign({}, currentOptions), defaultOptionsMap.get(type)), parseOptions(options)), {
+  type
+}));
+['info', 'loading', 'success', 'fail'].forEach(method => {
+  ToastObj[method] = createMethod(method);
+});
+ToastObj.allowMultiple = (value = true) => {
+  allowMultiple = value;
+};
+ToastObj.clear = nextTickClear;
+function setDefaultOptions(type, options) {
+  if (typeof type === 'string') {
+    defaultOptionsMap.set(type, options);
+  } else {
+    extend(currentOptions, type);
+  }
+}
+ToastObj.setDefaultOptions = setDefaultOptions;
+ToastObj.resetDefaultOptions = type => {
+  if (typeof type === 'string') {
+    defaultOptionsMap.delete(type);
+  } else {
+    currentOptions = extend({}, defaultOptions);
+    defaultOptionsMap.clear();
+  }
+};
+const Toast = ToastObj;
+export default Toast;