react-vant-nova 1.0.0-test

package/es/product-card/style/index.css

@@ -0,0 +1,108 @@
+:root {
+  --rv-product-card-padding: var(--rv-padding-xs) var(--rv-padding-md);
+  --rv-product-card-font-size: var(--rv-font-size-sm);
+  --rv-product-card-text-color: var(--rv-text-color);
+  --rv-product-card-background-color: var(--rv-background-color-light);
+  --rv-product-card-thumb-size: 88px;
+  --rv-product-card-thumb-border-radius: var(--rv-border-radius-lg);
+  --rv-product-card-title-line-height: 16px;
+  --rv-product-card-desc-color: var(--rv-gray-7);
+  --rv-product-card-desc-line-height: var(--rv-line-height-md);
+  --rv-product-card-price-color: var(--rv-gray-8);
+  --rv-product-card-origin-price-color: var(--rv-gray-6);
+  --rv-product-card-num-color: var(--rv-gray-6);
+  --rv-product-card-origin-price-font-size: var(--rv-font-size-xs);
+  --rv-product-card-price-font-size: var(--rv-font-size-sm);
+  --rv-product-card-price-integer-font-size: var(--rv-font-size-lg);
+  --rv-product-card-price-font-family: var(--rv-price-integer-font-family);
+}
+.rv-product-card {
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--rv-product-card-padding);
+  color: var(--rv-product-card-text-color);
+  font-size: var(--rv-product-card-font-size);
+  background-color: var(--rv-product-card-background-color);
+}
+.rv-product-card:not(:first-child) {
+  margin-top: var(--rv-padding-xs);
+}
+.rv-product-card__header {
+  display: flex;
+}
+.rv-product-card__thumb {
+  position: relative;
+  flex: none;
+  width: var(--rv-product-card-thumb-size);
+  height: var(--rv-product-card-thumb-size);
+  margin-right: var(--rv-padding-xs);
+}
+.rv-product-card__thumb img {
+  border-radius: var(--rv-product-card-thumb-border-radius);
+}
+.rv-product-card__content {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+  /* hack for flex box ellipsis */
+  min-height: var(--rv-product-card-thumb-size);
+}
+.rv-product-card__content--centered {
+  justify-content: center;
+}
+.rv-product-card__title,
+.rv-product-card__desc {
+  word-wrap: break-word;
+}
+.rv-product-card__title {
+  max-height: 32px;
+  font-weight: var(--rv-font-weight-bold);
+  line-height: var(--rv-product-card-title-line-height);
+}
+.rv-product-card__desc {
+  max-height: var(--rv-product-card-desc-line-height);
+  color: var(--rv-product-card-desc-color);
+  line-height: var(--rv-product-card-desc-line-height);
+}
+.rv-product-card__bottom {
+  line-height: var(--rv-line-height-md);
+}
+.rv-product-card__price {
+  display: inline-block;
+  color: var(--rv-product-card-price-color);
+  font-weight: var(--rv-font-weight-bold);
+  font-size: var(--rv-product-card-price-font-size);
+}
+.rv-product-card__price-integer {
+  font-size: var(--rv-product-card-price-integer-font-size);
+  font-family: var(--rv-product-card-price-font-family);
+}
+.rv-product-card__price-decimal {
+  font-family: var(--rv-product-card-price-font-family);
+}
+.rv-product-card__origin-price {
+  display: inline-block;
+  margin-left: 5px;
+  color: var(--rv-product-card-origin-price-color);
+  font-size: var(--rv-product-card-origin-price-font-size);
+  text-decoration: line-through;
+}
+.rv-product-card__num {
+  float: right;
+  color: var(--rv-product-card-num-color);
+}
+.rv-product-card__tag {
+  position: absolute;
+  top: 2px;
+  left: 0;
+}
+.rv-product-card__footer {
+  flex: none;
+  text-align: right;
+}
+.rv-product-card__footer .rv-button {
+  margin-left: 5px;
+}

package/es/progress/Progress.d.ts

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

package/es/progress/Progress.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { addUnit, createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('progress');
+const Progress = p => {
+  const props = mergeProps(p, {
+    showPivot: true,
+    percentage: 0
+  });
+  const background = useMemo(() => props.inactive ? '#cacaca' : props.color, [props.inactive, props.color]);
+  const renderPivot = () => {
+    const {
+      textColor,
+      pivotText,
+      pivotColor,
+      percentage
+    } = props;
+    const text = pivotText !== null && pivotText !== void 0 ? pivotText : `${percentage}%`;
+    if (props.showPivot && text) {
+      const style = {
+        color: textColor,
+        left: `${+percentage}%`,
+        transform: `translate(-${+percentage}%,-50%)`,
+        background: pivotColor || background
+      };
+      return _jsx("span", Object.assign({
+        style: style,
+        className: clsx(bem('pivot'))
+      }, {
+        children: text
+      }));
+    }
+    return null;
+  };
+  const {
+    trackColor,
+    percentage,
+    strokeWidth
+  } = props;
+  const rootStyle = Object.assign(Object.assign({}, props.style), {
+    background: trackColor,
+    height: addUnit(strokeWidth)
+  });
+  const portionStyle = {
+    background,
+    transform: `scaleX(${+percentage / 100})`
+  };
+  return _jsxs("div", Object.assign({
+    className: clsx(bem(), props.className),
+    style: rootStyle
+  }, {
+    children: [_jsx("span", {
+      className: clsx(bem('portion')),
+      style: portionStyle
+    }), renderPivot()]
+  }));
+};
+export default Progress;

package/es/progress/PropsType.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export interface ProgressProps extends BaseTypeProps {
+    color?: string;
+    inactive?: boolean;
+    pivotText?: React.ReactNode;
+    textColor?: string;
+    showPivot?: boolean;
+    pivotColor?: string;
+    trackColor?: string;
+    strokeWidth?: number | string;
+    percentage?: string | number;
+}

package/es/progress/PropsType.js

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

package/es/progress/index.d.ts

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

package/es/progress/index.js

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

package/es/progress/style/index.css

@@ -0,0 +1,41 @@
+:root {
+  --rv-progress-height: 4px;
+  --rv-progress-color: var(--rv-primary-color);
+  --rv-progress-background-color: var(--rv-gray-3);
+  --rv-progress-pivot-padding: 0 5px;
+  --rv-progress-pivot-text-color: var(--rv-white);
+  --rv-progress-pivot-font-size: var(--rv-font-size-xs);
+  --rv-progress-pivot-line-height: 1.6;
+  --rv-progress-pivot-background-color: var(--rv-primary-color);
+}
+.rv-progress {
+  position: relative;
+  height: var(--rv-progress-height);
+  background: var(--rv-progress-background-color);
+  border-radius: var(--rv-progress-height);
+}
+.rv-progress__portion {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--rv-progress-color);
+  border-radius: inherit;
+  transform-origin: 0;
+  transition: all var(--rv-animation-duration-base) var(--rv-animation-timing-function-enter);
+}
+.rv-progress__pivot {
+  position: absolute;
+  top: 50%;
+  box-sizing: border-box;
+  min-width: 3.6em;
+  padding: var(--rv-progress-pivot-padding);
+  color: var(--rv-progress-pivot-text-color);
+  font-size: var(--rv-progress-pivot-font-size);
+  line-height: var(--rv-progress-pivot-line-height);
+  text-align: center;
+  word-break: keep-all;
+  background-color: var(--rv-progress-pivot-background-color);
+  border-radius: 1em;
+  transition: all var(--rv-animation-duration-base) var(--rv-animation-timing-function-enter);
+}

package/es/pull-refresh/PropsType.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type LoadingType = 'circular' | 'spinner';
+export declare type PullRefreshStatus = 'normal' | 'loading' | 'loosing' | 'pulling' | 'success';
+declare type StatusTextType = React.ReactNode | (({ distance }: {
+    distance: number;
+}) => React.ReactNode);
+export interface PullRefreshProps extends BaseTypeProps {
+    /** 是否禁用下拉刷新	 */
+    disabled?: boolean;
+    /** 刷新成功提示文案	 */
+    successText?: StatusTextType;
+    /** 下拉过程提示文案	 */
+    pullingText?: StatusTextType;
+    /** 释放过程提示文案	 */
+    loosingText?: StatusTextType;
+    /** 加载过程提示文案	 */
+    loadingText?: StatusTextType;
+    /** 刷新成功提示展示时长(ms)	 */
+    successDuration?: number | string;
+    /** 动画时长	 */
+    animationDuration?: number | string;
+    /**
+     * 顶部内容高度
+     * @default 50
+     */
+    headHeight?: number | string;
+    /**
+     * 触发下拉刷新的距离
+     * @default '与 headHeight 一致'
+     */
+    pullDistance?: number | string;
+    /** 下拉刷新时触发 */
+    onRefresh: () => Promise<unknown> | void;
+    /** 刷新完成后触发 */
+    onRefreshEnd?: () => void;
+    children?: React.ReactNode;
+}
+export {};

package/es/pull-refresh/PropsType.js

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

package/es/pull-refresh/PullRefresh.d.ts

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

package/es/pull-refresh/PullRefresh.js

@@ -0,0 +1,229 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { createNamespace, getScrollTop, preventDefault } from '../utils';
+import { getScrollParent } from '../hooks/use-scroll-parent';
+import useEventListener from '../hooks/use-event-listener';
+import Loading from '../loading';
+import { useSetState, useTouch, useUpdateEffect } from '../hooks';
+import ConfigProviderContext from '../config-provider/ConfigProviderContext';
+import { mergeProps } from '../utils/get-default-props';
+const DEFAULT_HEAD_HEIGHT = 50;
+const TEXT_STATUS = ['pulling', 'loosing', 'success'];
+const [bem] = createNamespace('pull-refresh');
+const PullRefresh = p => {
+  const props = mergeProps(p, {
+    headHeight: 50,
+    animationDuration: 300,
+    successDuration: 500
+  });
+  const {
+    locale
+  } = useContext(ConfigProviderContext);
+  const {
+    disabled,
+    animationDuration
+  } = props;
+  const root = useRef();
+  const [state, updateState] = useSetState({
+    refreshing: false,
+    status: 'normal',
+    distance: 0,
+    duration: 0
+  });
+  const track = useRef();
+  const reachTop = useRef(null);
+  const touch = useTouch();
+  const getHeadStyle = () => {
+    if (props.headHeight !== DEFAULT_HEAD_HEIGHT) {
+      return {
+        height: `${props.headHeight}px`
+      };
+    }
+    return null;
+  };
+  const isTouchable = useCallback(() => {
+    return state.status !== 'loading' && state.status !== 'success' && !disabled;
+  }, [state.status, disabled]);
+  const ease = distance => {
+    const pullDistance = +(props.pullDistance || props.headHeight);
+    if (distance > pullDistance) {
+      if (distance < pullDistance * 2) {
+        distance = pullDistance + (distance - pullDistance) / 2;
+      } else {
+        distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+      }
+    }
+    return Math.round(distance);
+  };
+  const setStatus = (distance, isLoading) => {
+    const pullDistance = +(props.pullDistance || props.headHeight);
+    const newState = {
+      distance
+    };
+    if (isLoading) {
+      newState.status = 'loading';
+    } else if (distance === 0) {
+      newState.status = 'normal';
+    } else if (distance < pullDistance) {
+      newState.status = 'pulling';
+    } else {
+      newState.status = 'loosing';
+    }
+    updateState(newState);
+  };
+  const getStatusText = () => {
+    if (state.status === 'normal') {
+      return '';
+    }
+    return props[`${state.status}Text`] || locale.vanPullRefresh[state.status];
+  };
+  const renderStatus = () => {
+    var _a;
+    const {
+      status,
+      distance
+    } = state;
+    if (typeof props[`${state.status}Text`] === 'function') {
+      return (_a = props[`${state.status}Text`]) === null || _a === void 0 ? void 0 : _a.call(props, {
+        distance
+      });
+    }
+    const nodes = [];
+    if (TEXT_STATUS.includes(status)) {
+      nodes.push(_jsx("div", Object.assign({
+        className: clsx(bem('text'))
+      }, {
+        children: getStatusText()
+      }), 'text'));
+    }
+    if (status === 'loading') {
+      nodes.push(_jsx(Loading, Object.assign({
+        className: clsx(bem('loading'))
+      }, {
+        children: getStatusText()
+      }), 'loading'));
+    }
+    return nodes;
+  };
+  const showSuccessTip = () => {
+    updateState({
+      status: 'success'
+    });
+    setTimeout(() => {
+      setStatus(0);
+    }, +props.successDuration);
+  };
+  const onRefresh = () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      updateState({
+        refreshing: true
+      });
+      yield props.onRefresh();
+      updateState({
+        refreshing: false
+      });
+    } catch (error) {
+      updateState({
+        refreshing: false
+      });
+    }
+  });
+  const checkPosition = event => {
+    const scrollTarget = getScrollParent(event.target);
+    reachTop.current = getScrollTop(scrollTarget) === 0;
+    if (reachTop.current) {
+      updateState({
+        duration: 0
+      });
+      touch.start(event);
+    }
+  };
+  const onTouchStart = event => {
+    if (isTouchable()) {
+      checkPosition(event.nativeEvent);
+    }
+  };
+  const onTouchMove = useCallback(event => {
+    if (isTouchable()) {
+      if (!reachTop.current) {
+        checkPosition(event);
+      }
+      touch.move(event);
+      if (reachTop.current && touch.deltaY.current >= 0 && touch.isVertical()) {
+        setStatus(ease(touch.deltaY.current));
+        preventDefault(event);
+      } else {
+        /**
+         * IN THIS CASE:
+         * if component don't rerender after event.preventDefault
+         * ios will hold `preventDefault` behavior when touchmoving
+         * it will cause window unscrollable
+         */
+        setStatus(0);
+      }
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [reachTop.current, touch.deltaY.current, isTouchable]);
+  const onTouchEnd = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (reachTop.current && touch.deltaY && isTouchable()) {
+      updateState({
+        duration: +animationDuration
+      });
+      if (state.status === 'loosing') {
+        setStatus(+props.headHeight, true);
+        yield onRefresh();
+        setTimeout(() => {
+          var _a;
+          return (_a = props.onRefreshEnd) === null || _a === void 0 ? void 0 : _a.call(props);
+        });
+      } else {
+        setStatus(0);
+      }
+    }
+  });
+  useEventListener('touchmove', onTouchMove, {
+    target: track.current,
+    depends: [reachTop.current, isTouchable(), touch.deltaY]
+  });
+  useUpdateEffect(() => {
+    updateState({
+      duration: +animationDuration
+    });
+    if (state.refreshing) {
+      setStatus(+props.headHeight, true);
+    } else if (props.successText) {
+      showSuccessTip();
+    } else {
+      setStatus(0, false);
+    }
+  }, [state.refreshing]);
+  const trackStyle = useMemo(() => ({
+    transitionDuration: `${state.duration}ms`,
+    transform: state.distance ? `translate3d(0,${state.distance}px, 0)` : ''
+  }), [state.duration, state.distance]);
+  return _jsx("div", Object.assign({
+    ref: root,
+    className: clsx(props.className, bem()),
+    style: props.style
+  }, {
+    children: _jsxs("div", Object.assign({
+      ref: track,
+      className: clsx(bem('track')),
+      style: trackStyle,
+      onTouchStart: onTouchStart,
+      onTouchEnd: onTouchEnd,
+      onTouchCancel: onTouchEnd
+    }, {
+      children: [_jsx("div", Object.assign({
+        className: clsx(bem('head')),
+        style: getHeadStyle()
+      }, {
+        children: renderStatus()
+      })), props.children]
+    }))
+  }));
+};
+export default PullRefresh;

package/es/pull-refresh/index.d.ts

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

package/es/pull-refresh/index.js

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

package/es/pull-refresh/style/index.css

@@ -0,0 +1,31 @@
+:root {
+  --rv-pull-refresh-head-height: 50px;
+  --rv-pull-refresh-head-font-size: var(--rv-font-size-md);
+  --rv-pull-refresh-head-text-color: var(--rv-gray-6);
+  --rv-pull-refresh-loading-icon-size: 16px;
+}
+.rv-pull-refresh {
+  overflow: hidden;
+  user-select: none;
+}
+.rv-pull-refresh__track {
+  position: relative;
+  height: 100%;
+  transition-property: transform;
+}
+.rv-pull-refresh__head {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: var(--rv-pull-refresh-head-height);
+  overflow: hidden;
+  color: var(--rv-pull-refresh-head-text-color);
+  font-size: var(--rv-pull-refresh-head-font-size);
+  line-height: var(--rv-pull-refresh-head-height);
+  text-align: center;
+  transform: translateY(-100%);
+}
+.rv-pull-refresh__loading .rv-loading__spinner {
+  width: var(--rv-pull-refresh-loading-icon-size);
+  height: var(--rv-pull-refresh-loading-icon-size);
+}

package/es/radio/PropsType.d.ts

@@ -0,0 +1,24 @@
+import { BaseTypeProps } from '../utils';
+import { CheckerProps } from '../checkbox/PropsType';
+import React from 'react';
+export declare type RadioValueType = number | string;
+export interface RadioGroupProps<T = RadioValueType> extends BaseTypeProps {
+    /** 是否为禁用状态	 */
+    disabled?: boolean;
+    /** 图标大小，默认单位为px	 */
+    iconSize?: number | string;
+    /** 排列方向，可选值为horizontal	 */
+    direction?: string;
+    /** 选中状态颜色	 */
+    checkedColor?: string;
+    /** 当前值 */
+    value?: T;
+    /** 默认值 */
+    defaultValue?: T;
+    /** 当绑定值变化时触发的事件	 */
+    onChange?: (name: T) => void;
+    children?: React.ReactNode;
+}
+export interface RadioProps<T = RadioValueType> extends CheckerProps<RadioGroupProps<T>> {
+    value?: T;
+}

package/es/radio/PropsType.js

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

package/es/radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import { RadioProps, RadioValueType } from './PropsType';
+declare function Radio<T = RadioValueType>(props: RadioProps<T>): JSX.Element;
+export default Radio;

package/es/radio/Radio.js

@@ -0,0 +1,29 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import RadioContext from './RadioContext';
+import Checker from '../checkbox/Checker';
+import { createNamespace } from '../utils';
+const [bem] = createNamespace('radio');
+function Radio(props) {
+  const _a = useContext(RadioContext),
+    {
+      parent
+    } = _a,
+    context = __rest(_a, ["parent"]);
+  const checked = useMemo(() => {
+    return parent ? context.checked === props.name : props.checked;
+  }, [context.checked]);
+  const toggle = () => {
+    const emitter = parent ? context.toggle : () => {};
+    emitter(props.name);
+  };
+  return _jsx(Checker, Object.assign({}, props, {
+    bem: bem,
+    role: 'radio',
+    parent: parent,
+    checked: checked,
+    onToggle: toggle
+  }));
+}
+export default Radio;

package/es/radio/RadioContext.d.ts

@@ -0,0 +1,11 @@
+import { Context } from 'react';
+import { RadioGroupProps, RadioValueType } from './PropsType';
+export interface RadioContextState<T = RadioValueType> {
+    parent?: {
+        props: RadioGroupProps<T>;
+    };
+    toggle?: (name: T) => void;
+    checked?: T;
+}
+declare const RadioContext: Context<RadioContextState>;
+export default RadioContext;

package/es/radio/RadioContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const RadioContext = createContext({});
+export default RadioContext;

package/es/radio/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import { RadioGroupProps, RadioValueType } from './PropsType';
+declare function RadioGroup<T = RadioValueType>(props: RadioGroupProps<T>): JSX.Element;
+export default RadioGroup;