react-vant-nova 1.0.0-test

package/es/locale/lang/zh-TW.js

@@ -0,0 +1,74 @@
+export default {
+  name: '姓名',
+  tel: '電話',
+  save: '儲存',
+  confirm: '確認',
+  cancel: '取消',
+  delete: '刪除',
+  loading: '載入中...',
+  noCoupon: '暫無優惠券',
+  nameEmpty: '請填寫姓名',
+  telInvalid: '請填寫正確的電話',
+  vanCalendar: {
+    end: '結束',
+    start: '開始',
+    title: '日期選擇',
+    confirm: '確定',
+    startEnd: '開始/結束',
+    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+    monthTitle: (year, month) => `${year}年${month}月`,
+    rangePrompt: maxRange => `最多選擇 ${maxRange} 天`
+  },
+  vanPicker: {
+    select: '請選擇'
+  },
+  vanContactCard: {
+    addText: '新增聯絡人'
+  },
+  vanContactList: {
+    addText: '建立聯絡人'
+  },
+  vanPagination: {
+    prev: '上一頁',
+    next: '下一頁'
+  },
+  vanPullRefresh: {
+    pulling: '下拉即可刷新...',
+    loosing: '釋放即可刷新...',
+    loading: '載入中...'
+  },
+  vanSubmitBar: {
+    label: '合計：'
+  },
+  vanCoupon: {
+    unlimited: '無使用門檻',
+    discount: discount => `${discount}折`,
+    condition: condition => `滿${condition}元可用`
+  },
+  vanCouponCell: {
+    title: '優惠券',
+    count: count => `${count}張可用`
+  },
+  vanCouponList: {
+    exchange: '兌換',
+    close: '不使用優惠',
+    enable: '可使用優惠券',
+    disabled: '不可使用優惠券',
+    placeholder: '請輸入優惠代碼'
+  },
+  vanAddressEdit: {
+    area: '地區',
+    postal: '郵遞區號',
+    areaEmpty: '請選擇地區',
+    addressEmpty: '請填寫詳細地址',
+    postalEmpty: '郵遞區號不正確',
+    defaultAddress: '設為預設收貨地址'
+  },
+  vanAddressEditDetail: {
+    label: '詳細地址',
+    placeholder: '街道門牌資訊'
+  },
+  vanAddressList: {
+    add: '新增地址'
+  }
+};

package/es/nav-bar/Navbar.d.ts

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

package/es/nav-bar/Navbar.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { isValidElement, useRef } from 'react';
+import clsx from 'clsx';
+import { ArrowLeft } from '@react-vant/icons';
+import { BORDER_BOTTOM } from '../utils/constant';
+import useHeight from '../hooks/use-height';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('nav-bar');
+const NavBar = p => {
+  const props = mergeProps(p, {
+    border: true,
+    leftArrow: _jsx(ArrowLeft, {})
+  });
+  const navBarRef = useRef(null);
+  const navBarHeight = useHeight(navBarRef);
+  const onClickLeft = event => {
+    if (props.onClickLeft) props.onClickLeft(event);
+  };
+  const onClickRight = event => {
+    if (props.onClickRight) props.onClickRight(event);
+  };
+  const renderLeft = () => {
+    if (typeof props.leftText !== 'string' && isValidElement(props.leftText)) {
+      return props.leftText;
+    }
+    return [props.leftArrow && React.cloneElement(props.leftArrow, {
+      key: 'arroe',
+      className: clsx(bem('arrow'))
+    }), props.leftText && _jsx("span", Object.assign({
+      className: clsx(bem('text'))
+    }, {
+      children: props.leftText
+    }), 'text')];
+  };
+  const renderRight = () => {
+    if (typeof props.rightText !== 'string' && isValidElement(props.rightText)) {
+      return props.rightText;
+    }
+    return _jsx("span", Object.assign({
+      className: clsx(bem('text'))
+    }, {
+      children: props.rightText
+    }));
+  };
+  const renderNavBar = () => {
+    const {
+      title,
+      fixed,
+      border,
+      zIndex
+    } = props;
+    const style = Object.assign({
+      zIndex: zIndex !== undefined ? +zIndex : undefined
+    }, props.style);
+    const hasLeft = props.leftArrow || props.leftText;
+    const hasRight = props.rightText;
+    return _jsx("div", Object.assign({
+      ref: navBarRef,
+      style: style,
+      className: clsx(bem({
+        fixed,
+        'safe-area-inset-top': props.safeAreaInsetTop
+      }), {
+        [BORDER_BOTTOM]: border
+      }, props.className)
+    }, {
+      children: _jsxs("div", Object.assign({
+        className: clsx(bem('content'))
+      }, {
+        children: [hasLeft && _jsx("div", Object.assign({
+          className: clsx(bem('left')),
+          onClick: onClickLeft
+        }, {
+          children: renderLeft()
+        })), _jsx("div", Object.assign({
+          className: clsx(bem('title'), 'rv-ellipsis')
+        }, {
+          children: title
+        })), hasRight && _jsx("div", Object.assign({
+          className: clsx(bem('right')),
+          onClick: onClickRight
+        }, {
+          children: renderRight()
+        }))]
+      }))
+    }));
+  };
+  const renderPlaceholder = () => {
+    if (props.fixed && props.placeholder) {
+      return _jsx("div", {
+        className: clsx(bem('placeholder')),
+        style: {
+          height: navBarHeight ? `${navBarHeight}px` : undefined
+        }
+      });
+    }
+    return null;
+  };
+  return _jsxs(_Fragment, {
+    children: [renderPlaceholder(), renderNavBar()]
+  });
+};
+export default NavBar;

package/es/nav-bar/PropsType.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type LoadingType = 'circular' | 'spinner';
+export interface NavBarProps extends BaseTypeProps {
+    /** 标题	 */
+    title?: React.ReactNode;
+    /** 是否固定在顶部	 */
+    fixed?: boolean;
+    /** 导航栏 z-index	 */
+    zIndex?: number | string;
+    /** 左侧文案	 */
+    leftText?: React.ReactNode;
+    /** 右侧文案	 */
+    rightText?: React.ReactNode;
+    /** 自定义左侧箭头	 */
+    leftArrow?: boolean | React.ReactNode;
+    /** 是否开启顶部安全区适配	 */
+    safeAreaInsetTop?: boolean;
+    /** 是否显示下边框	 */
+    border?: boolean;
+    /** 固定在顶部时，是否在标签位置生成一个等高的占位元素 */
+    placeholder?: boolean;
+    onClickLeft?: (e: React.MouseEvent) => void;
+    onClickRight?: (e: React.MouseEvent) => void;
+}

package/es/nav-bar/PropsType.js

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

package/es/nav-bar/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import NavBar from './Navbar';
+export { NavBar };
+export type { NavBarProps } from './PropsType';

package/es/nav-bar/index.js

@@ -0,0 +1,3 @@
+import "./style/index.css";
+import NavBar from './Navbar';
+export { NavBar };

package/es/nav-bar/style/index.css

@@ -0,0 +1,72 @@
+:root {
+  --rv-nav-bar-height: 46px;
+  --rv-nav-bar-background-color: var(--rv-white);
+  --rv-nav-bar-arrow-size: 16px;
+  --rv-nav-bar-icon-color: var(--rv-primary-color);
+  --rv-nav-bar-text-color: var(--rv-primary-color);
+  --rv-nav-bar-title-font-size: var(--rv-font-size-lg);
+  --rv-nav-bar-title-text-color: var(--rv-text-color);
+  --rv-nav-bar-z-index: 1;
+}
+.rv-nav-bar {
+  position: relative;
+  z-index: var(--rv-nav-bar-z-index);
+  line-height: var(--rv-line-height-lg);
+  text-align: center;
+  background-color: var(--rv-nav-bar-background-color);
+  user-select: none;
+}
+.rv-nav-bar--fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.rv-nav-bar--safe-area-inset-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.rv-nav-bar .rv-icon {
+  color: var(--rv-nav-bar-icon-color);
+}
+.rv-nav-bar__content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--rv-nav-bar-height);
+}
+.rv-nav-bar__arrow {
+  margin-right: var(--rv-padding-base);
+  font-size: var(--rv-nav-bar-arrow-size);
+}
+.rv-nav-bar__title {
+  max-width: 60%;
+  margin: 0 auto;
+  color: var(--rv-nav-bar-title-text-color);
+  font-weight: var(--rv-font-weight-bold);
+  font-size: var(--rv-nav-bar-title-font-size);
+}
+.rv-nav-bar__left,
+.rv-nav-bar__right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--rv-padding-md);
+  font-size: var(--rv-font-size-md);
+  cursor: pointer;
+}
+.rv-nav-bar__left:active,
+.rv-nav-bar__right:active {
+  opacity: var(--rv-active-opacity);
+}
+.rv-nav-bar__left {
+  left: 0;
+}
+.rv-nav-bar__right {
+  right: 0;
+}
+.rv-nav-bar__text {
+  color: var(--rv-nav-bar-text-color);
+}

package/es/notice-bar/NoticeBar.d.ts

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

package/es/notice-bar/NoticeBar.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useEffect, useImperativeHandle, forwardRef, useContext } from 'react';
+import clsx from 'clsx';
+import { Arrow, Cross } from '@react-vant/icons';
+import { getRect } from '../hooks/use-rect';
+import useEventListener from '../hooks/use-event-listener';
+import { createNamespace, isDef, noop } from '../utils';
+import { raf, doubleRaf } from '../utils/raf';
+import { useSetState, useUpdateEffect } from '../hooks';
+import PopupContext from '../popup/PopupContext';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('notice-bar');
+const NoticeBar = forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    delay: 1,
+    speed: 60,
+    onClick: noop,
+    onClose: noop
+  });
+  const {
+    text,
+    color,
+    background,
+    wrapable,
+    scrollable,
+    speed,
+    delay = 1
+  } = props;
+  const popupContext = useContext(PopupContext);
+  const [state, setState] = useSetState({
+    show: true,
+    offset: 0,
+    duration: 0
+  });
+  const wrapRef = useRef();
+  const contentRef = useRef();
+  const wrapWidth = useRef(0);
+  const contentWidth = useRef(0);
+  const startTimer = useRef(null);
+  const renderLeftIcon = () => {
+    if (props.leftIcon) {
+      return React.cloneElement(props.leftIcon, {
+        className: clsx(bem('left-icon'))
+      });
+    }
+    return null;
+  };
+  const getRightIcon = () => {
+    if (props.mode === 'closeable') {
+      return _jsx(Cross, {});
+    }
+    if (props.mode === 'link') {
+      return _jsx(Arrow, {});
+    }
+    return null;
+  };
+  const onClickRightIcon = event => {
+    if (props.mode === 'closeable') {
+      setState({
+        show: false
+      });
+      if (props.onClose) {
+        props.onClose(event);
+      }
+    }
+  };
+  //  右侧图标
+  const renderRightIcon = () => {
+    if (props.rightIcon) {
+      return props.rightIcon;
+    }
+    const finalRightIcon = props.rightIcon || getRightIcon();
+    if (finalRightIcon) {
+      return React.cloneElement(finalRightIcon, {
+        className: clsx(bem('right-icon')),
+        onClick: onClickRightIcon
+      });
+    }
+    return null;
+  };
+  //  动画结束
+  const onTransitionEnd = () => {
+    setState({
+      offset: wrapWidth.current,
+      duration: 0
+    });
+    raf(() => {
+      // use double raf to ensure animation can start
+      doubleRaf(() => {
+        setState({
+          offset: -contentWidth.current,
+          duration: (contentWidth.current + wrapWidth.current) / speed
+        });
+        if (props.onReplay) {
+          props.onReplay();
+        }
+      });
+    });
+  };
+  //  文字部分
+  const renderMarquee = () => {
+    const ellipsis = scrollable === false && !props.wrapable;
+    const style = {
+      transform: state.offset ? `translateX(${state.offset}px)` : '',
+      transitionDuration: `${state.duration}s`
+    };
+    return _jsx("div", Object.assign({
+      className: clsx(bem('wrap')),
+      ref: wrapRef
+    }, {
+      children: _jsx("div", Object.assign({
+        className: clsx(bem('content'), {
+          'rv-ellipsis': ellipsis
+        }),
+        ref: contentRef,
+        style: style,
+        onTransitionEnd: onTransitionEnd
+      }, {
+        children: props.children || text
+      }))
+    }));
+  };
+  const reset = () => {
+    const ms = isDef(delay) ? +delay * 1000 : 0;
+    wrapWidth.current = 0;
+    contentWidth.current = 0;
+    setState({
+      offset: 0,
+      duration: 0
+    });
+    clearTimeout(startTimer.current);
+    startTimer.current = setTimeout(() => {
+      if (!wrapRef.current || !contentRef.current || scrollable === false) {
+        return;
+      }
+      const wrapRefWidth = getRect(wrapRef.current).width;
+      const contentRefWidth = getRect(contentRef.current).width;
+      if (scrollable || contentRefWidth > wrapRefWidth) {
+        doubleRaf(() => {
+          wrapWidth.current = wrapRefWidth;
+          contentWidth.current = contentRefWidth;
+          setState({
+            offset: -contentWidth.current,
+            duration: contentWidth.current / speed
+          });
+        });
+      }
+    }, ms);
+  };
+  // fix cache issues with forwards and back history in safari
+  // see: https://guwii.com/cache-issues-with-forwards-and-back-history-in-safari/
+  useEventListener('pageshow', reset);
+  useEffect(() => {
+    reset();
+  }, [text, scrollable]);
+  useUpdateEffect(() => {
+    reset();
+  }, [popupContext.visible]);
+  useImperativeHandle(ref, () => ({
+    reset
+  }));
+  return state.show && _jsxs("div", Object.assign({
+    role: 'alert',
+    className: clsx(bem({
+      wrapable
+    }), props.className),
+    style: Object.assign({
+      color,
+      background
+    }, props.style),
+    onClick: props.onClick
+  }, {
+    children: [renderLeftIcon(), renderMarquee(), renderRightIcon()]
+  }));
+});
+export default NoticeBar;

package/es/notice-bar/PropsType.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type NoticeBarMode = '' | 'closeable' | 'link';
+export declare type NoticeBarInstance = {
+    /** 重置通知栏到初始状态	 */
+    reset: () => void;
+};
+export interface NoticeBarProps extends BaseTypeProps {
+    /** 通知栏模式 */
+    mode?: NoticeBarMode;
+    /** 左侧图标 */
+    leftIcon?: React.ReactNode;
+    /** 右侧图标 */
+    rightIcon?: React.ReactNode;
+    /** 滚动条背景	 */
+    background?: string;
+    /** 通知文本颜色	 */
+    color?: string;
+    /** 通知文本内容	 */
+    text?: React.ReactNode;
+    /** 是否开启滚动播放，内容长度溢出时默认开启	 */
+    scrollable?: boolean;
+    /** 是否开启文本换行，只在禁用滚动时生效	 */
+    wrapable?: boolean;
+    /** 滚动速率 (px/s)	*/
+    speed?: number;
+    /** 动画延迟时间 (s)	 */
+    delay?: number;
+    /** 关闭通知栏时触发		 */
+    onClose?: (event: React.MouseEvent) => void;
+    /** 点击通知栏时触发	 */
+    onClick?: (event: React.MouseEvent) => void;
+    /** 每当滚动栏重新开始滚动时触发	 */
+    onReplay?: () => void;
+    children?: React.ReactNode;
+}

package/es/notice-bar/PropsType.js

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

package/es/notice-bar/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import NoticeBar from './NoticeBar';
+export { NoticeBar };
+export type { NoticeBarProps, NoticeBarInstance } from './PropsType';

package/es/notice-bar/index.js

@@ -0,0 +1,3 @@
+import "./style/index.css";
+import NoticeBar from './NoticeBar';
+export { NoticeBar };

package/es/notice-bar/style/index.css

@@ -0,0 +1,62 @@
+:root {
+  --rv-notice-bar-height: 40px;
+  --rv-notice-bar-padding: 0 var(--rv-padding-md);
+  --rv-notice-bar-wrapable-padding: var(--rv-padding-xs) var(--rv-padding-md);
+  --rv-notice-bar-text-color: var(--rv-orange-dark);
+  --rv-notice-bar-font-size: var(--rv-font-size-md);
+  --rv-notice-bar-line-height: 24px;
+  --rv-notice-bar-background-color: var(--rv-orange-light);
+  --rv-notice-bar-icon-size: 16px;
+  --rv-notice-bar-icon-min-width: 24px;
+}
+.rv-notice-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--rv-notice-bar-height);
+  padding: var(--rv-notice-bar-padding);
+  color: var(--rv-notice-bar-text-color);
+  font-size: var(--rv-notice-bar-font-size);
+  line-height: var(--rv-notice-bar-line-height);
+  background-color: var(--rv-notice-bar-background-color);
+}
+.rv-notice-bar__left-icon,
+.rv-notice-bar__right-icon {
+  min-width: var(--rv-notice-bar-icon-min-width);
+  font-size: var(--rv-notice-bar-icon-size);
+}
+.rv-notice-bar__left-icon {
+  text-align: left;
+}
+.rv-notice-bar__right-icon {
+  text-align: right;
+  cursor: pointer;
+}
+.rv-notice-bar__wrap {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  height: 100%;
+  overflow: hidden;
+}
+.rv-notice-bar__content {
+  position: absolute;
+  white-space: nowrap;
+  transition-timing-function: linear;
+}
+.rv-notice-bar__content.rv-ellipsis {
+  max-width: 100%;
+}
+.rv-notice-bar--wrapable {
+  height: auto;
+  padding: var(--rv-notice-bar-wrapable-padding);
+}
+.rv-notice-bar--wrapable .rv-notice-bar__wrap {
+  height: auto;
+}
+.rv-notice-bar--wrapable .rv-notice-bar__content {
+  position: relative;
+  white-space: normal;
+  word-wrap: break-word;
+}

package/es/notify/Notify.d.ts

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

package/es/notify/Notify.js

@@ -0,0 +1,41 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import cls from 'clsx';
+import Popup from '../popup';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('notify');
+const Notify = _a => {
+  var {
+      children
+    } = _a,
+    p = __rest(_a, ["children"]);
+  const props = mergeProps(p, {
+    type: 'danger',
+    duration: 3000,
+    color: 'white',
+    lockScroll: false
+  });
+  const style = {
+    color: props.color,
+    background: props.background
+  };
+  return _jsx(Popup, Object.assign({
+    visible: props.visible,
+    style: style,
+    overlay: false,
+    position: 'top',
+    lockScroll: props.lockScroll,
+    onClick: props.onClick,
+    onClose: props.onClose,
+    onClosed: props.onClosed,
+    teleport: props.teleport
+  }, {
+    children: _jsx("div", Object.assign({
+      className: cls(bem([props.type]), props.className)
+    }, {
+      children: children || props.message
+    }))
+  }));
+};
+export default Notify;