react-vant-nova 1.0.0-test

package/es/stepper/Stepper.js

@@ -0,0 +1,231 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { isNaN } from '../utils/validate/number';
+import { addUnit, getSizeStyle, formatNumber, resetScroll, preventDefault, createNamespace } from '../utils';
+import { usePropsValue } from '../hooks';
+import { bound } from '../utils/bound';
+import useRefState from '../hooks/use-ref-state';
+import { mergeProps } from '../utils/get-default-props';
+const LONG_PRESS_INTERVAL = 100;
+const LONG_PRESS_START_TIME = 600;
+// add num and avoid float number
+function add(num1, num2) {
+  const cardinal = Math.pow(10, 10);
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+}
+const [bem] = createNamespace('stepper');
+const Stepper = React.forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    theme: 'default',
+    max: Number.MAX_VALUE,
+    step: 1,
+    showPlus: true,
+    showMinus: true,
+    showInput: true,
+    longPress: true,
+    defaultValue: 0
+  });
+  const {
+    defaultValue
+  } = props;
+  let actionType;
+  const inputRef = useRef(null);
+  const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
+    defaultValue,
+    onChange: v => {
+      var _a;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v, {
+        name: props.name
+      });
+    }
+  }));
+  const format = v => {
+    v = +formatNumber(String(v), !props.integer);
+    if (isNaN(v)) return;
+    let target = bound(v, props.min, props.max);
+    if (props.decimalLength !== undefined) {
+      target = parseFloat(target.toFixed(props.decimalLength));
+    }
+    return target;
+  };
+  const setValueWithCheck = v => {
+    setValue(format(v));
+  };
+  const [inputValue, setInputValue, inputValueRef] = useRefState(() => convertValueToText(value, props.decimalLength));
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
+    if (!hasFocus) {
+      setInputValue(convertValueToText(value, props.decimalLength));
+    }
+  }, [hasFocus]);
+  useEffect(() => {
+    if (!hasFocus) {
+      setInputValue(convertValueToText(value, props.decimalLength));
+    }
+  }, [value, props.decimalLength]);
+  const minusDisabled = useMemo(() => props.disabled || props.disableMinus || +value <= +props.min, [props.disabled, props.disableMinus, props.min, value]);
+  const plusDisabled = useMemo(() => props.disabled || props.disablePlus || +value >= +props.max, [props.disabled, props.disablePlus, props.max, value]);
+  const inputStyle = useMemo(() => ({
+    width: addUnit(props.inputWidth),
+    height: addUnit(props.buttonSize)
+  }), [props.inputWidth, props.buttonSize]);
+  const buttonStyle = useMemo(() => getSizeStyle(props.buttonSize), [props.buttonSize]);
+  const onChange = e => {
+    var _a, _b, _c;
+    const isMinus = actionType === 'minus';
+    if (actionType === 'plus' && plusDisabled || isMinus && minusDisabled) {
+      (_a = props.onOverlimit) === null || _a === void 0 ? void 0 : _a.call(props, actionType);
+      return;
+    }
+    const diff = isMinus ? -props.step : +props.step;
+    const val = add(+inputValueRef.current, diff);
+    setValueWithCheck(val);
+    if (isMinus) {
+      (_b = props.onMinus) === null || _b === void 0 ? void 0 : _b.call(props, e, val);
+    } else {
+      (_c = props.onPlus) === null || _c === void 0 ? void 0 : _c.call(props, e, val);
+    }
+  };
+  const onLongPressChange = () => {
+    const isMinus = actionType === 'minus';
+    const diff = isMinus ? -props.step : +props.step;
+    const val = add(+inputValueRef.current, diff);
+    setInputValue(`${format(val)}`);
+  };
+  const onInput = event => {
+    const {
+      value: inputValue
+    } = event.target;
+    setInputValue(inputValue);
+    const value = convertTextToValue(inputValue);
+    if (value === null) {
+      if (props.allowEmpty) {
+        setValue(null);
+      } else {
+        setValue(defaultValue);
+      }
+    } else {
+      setValueWithCheck(value);
+    }
+  };
+  const onFocus = event => {
+    var _a;
+    setHasFocus(true);
+    // readOnly not work in lagacy mobile safari
+    if (props.disableInput && inputRef.current) {
+      inputRef.current.blur();
+    } else {
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    }
+  };
+  const onBlur = event => {
+    var _a;
+    setHasFocus(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    resetScroll();
+  };
+  const isLongPress = useRef(false);
+  const longPressTimer = useRef(null);
+  const longPressStep = () => {
+    longPressTimer.current = setTimeout(() => {
+      onLongPressChange();
+      longPressStep();
+    }, LONG_PRESS_INTERVAL);
+  };
+  const onTouchStart = () => {
+    if (props.longPress) {
+      isLongPress.current = false;
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = setTimeout(() => {
+        isLongPress.current = true;
+        longPressStep();
+      }, LONG_PRESS_START_TIME);
+    }
+  };
+  const onTouchEnd = event => {
+    if (props.longPress) {
+      clearTimeout(longPressTimer.current);
+      if (isLongPress.current) {
+        preventDefault(event);
+      }
+    }
+  };
+  const onMousedown = event => {
+    // fix mobile safari page scroll down issue
+    // see: https://github.com/youzan/vant/issues/7690
+    if (props.disableInput) {
+      event.preventDefault();
+    }
+  };
+  const createListeners = type => ({
+    onClick: event => {
+      // disable double tap scrolling on mobile safari
+      event.preventDefault();
+      actionType = type;
+      onChange(event);
+    },
+    onTouchStart: () => {
+      actionType = type;
+      onTouchStart();
+    },
+    onTouchEnd,
+    onTouchCancel: onTouchEnd
+  });
+  React.useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current.focus(),
+    blur: () => inputRef.current.blur()
+  }));
+  return _jsxs("div", Object.assign({
+    className: clsx(props.className, bem([props.theme])),
+    style: props.style
+  }, {
+    children: [props.showMinus && _jsx("button", Object.assign({
+      type: 'button',
+      "aria-label": 'minus',
+      style: buttonStyle,
+      className: clsx(bem('minus', {
+        disabled: minusDisabled
+      }))
+    }, createListeners('minus'))), props.showInput && _jsx("input", {
+      ref: inputRef,
+      type: props.integer ? 'tel' : 'text',
+      role: 'spinbutton',
+      className: clsx(bem('input')),
+      value: inputValue,
+      style: inputStyle,
+      disabled: props.disabled || props.disableInput,
+      readOnly: props.disableInput,
+      inputMode: props.integer ? 'numeric' : 'decimal',
+      placeholder: props.placeholder,
+      "aria-valuemax": +props.max,
+      "aria-valuemin": +props.min,
+      "aria-valuenow": +inputValue,
+      onChange: onInput,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseDown: onMousedown,
+      onClick: props.onClick
+    }), props.showPlus && _jsx("button", Object.assign({
+      type: 'button',
+      "aria-label": 'add',
+      style: buttonStyle,
+      className: clsx(bem('plus', {
+        disabled: plusDisabled
+      }))
+    }, createListeners('plus')))]
+  }));
+});
+function convertValueToText(value, digits) {
+  if (value === null || value === undefined) return '';
+  if (digits !== undefined) {
+    return value.toFixed(digits);
+  } else {
+    return value.toString();
+  }
+}
+function convertTextToValue(text) {
+  if (text === '') return null;
+  return parseFloat(text);
+}
+export default Stepper;

package/es/stepper/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Stepper from './Stepper';
+export { Stepper };
+export default Stepper;
+export type { StepperProps, StepperInstance, StepperTheme } from './PropsType';

package/es/stepper/index.js

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

package/es/stepper/style/index.css

@@ -0,0 +1,130 @@
+:root {
+  --rv-stepper-active-color: #e8e8e8;
+  --rv-stepper-background-color: var(--rv-active-color);
+  --rv-stepper-button-icon-color: var(--rv-text-color);
+  --rv-stepper-button-disabled-color: var(--rv-background-color);
+  --rv-stepper-button-disabled-icon-color: var(--rv-gray-5);
+  --rv-stepper-button-round-theme-color: var(--rv-primary-color);
+  --rv-stepper-input-width: 32px;
+  --rv-stepper-input-height: 28px;
+  --rv-stepper-input-font-size: var(--rv-font-size-md);
+  --rv-stepper-input-line-height: normal;
+  --rv-stepper-input-text-color: var(--rv-text-color);
+  --rv-stepper-input-disabled-text-color: var(--rv-gray-5);
+  --rv-stepper-input-disabled-background-color: var(--rv-active-color);
+  --rv-stepper-border-radius: var(--rv-border-radius-md);
+}
+.rv-stepper {
+  display: inline-block;
+  user-select: none;
+}
+.rv-stepper__minus,
+.rv-stepper__plus {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--rv-stepper-input-height);
+  height: var(--rv-stepper-input-height);
+  margin: 0;
+  padding: 0;
+  color: var(--rv-stepper-button-icon-color);
+  vertical-align: middle;
+  background-color: var(--rv-stepper-background-color);
+  border: 0;
+  cursor: pointer;
+}
+.rv-stepper__minus::before,
+.rv-stepper__plus::before {
+  width: 50%;
+  height: 1px;
+}
+.rv-stepper__minus::after,
+.rv-stepper__plus::after {
+  width: 1px;
+  height: 50%;
+}
+.rv-stepper__minus::before,
+.rv-stepper__plus::before,
+.rv-stepper__minus::after,
+.rv-stepper__plus::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: currentColor;
+  transform: translate(-50%, -50%);
+  content: '';
+}
+.rv-stepper__minus:active,
+.rv-stepper__plus:active {
+  background-color: var(--rv-stepper-active-color);
+}
+.rv-stepper__minus--disabled,
+.rv-stepper__plus--disabled {
+  color: var(--rv-stepper-button-disabled-icon-color);
+  background-color: var(--rv-stepper-button-disabled-color);
+  cursor: not-allowed;
+}
+.rv-stepper__minus--disabled:active,
+.rv-stepper__plus--disabled:active {
+  background-color: var(--rv-stepper-button-disabled-color);
+}
+.rv-stepper__minus {
+  border-radius: var(--rv-stepper-border-radius) 0 0 var(--rv-stepper-border-radius);
+}
+.rv-stepper__minus::after {
+  display: none;
+}
+.rv-stepper__plus {
+  border-radius: 0 var(--rv-stepper-border-radius) var(--rv-stepper-border-radius) 0;
+}
+.rv-stepper__input {
+  box-sizing: border-box;
+  width: var(--rv-stepper-input-width);
+  height: var(--rv-stepper-input-height);
+  margin: 0 2px;
+  padding: 0;
+  color: var(--rv-stepper-input-text-color);
+  font-size: var(--rv-stepper-input-font-size);
+  line-height: var(--rv-stepper-input-line-height);
+  text-align: center;
+  vertical-align: middle;
+  background-color: var(--rv-stepper-background-color);
+  border: 0;
+  border-width: 1px 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+}
+.rv-stepper__input:disabled {
+  color: var(--rv-stepper-input-disabled-text-color);
+  background-color: var(--rv-stepper-input-disabled-background-color);
+  -webkit-text-fill-color: var(--rv-stepper-input-disabled-text-color);
+  opacity: 1;
+}
+.rv-stepper__input:read-only {
+  cursor: default;
+}
+.rv-stepper--round .rv-stepper__input {
+  background-color: transparent;
+}
+.rv-stepper--round .rv-stepper__plus,
+.rv-stepper--round .rv-stepper__minus {
+  border-radius: 100%;
+}
+.rv-stepper--round .rv-stepper__plus:active,
+.rv-stepper--round .rv-stepper__minus:active {
+  opacity: var(--rv-active-opacity);
+}
+.rv-stepper--round .rv-stepper__plus--disabled,
+.rv-stepper--round .rv-stepper__minus--disabled,
+.rv-stepper--round .rv-stepper__plus--disabled:active,
+.rv-stepper--round .rv-stepper__minus--disabled:active {
+  opacity: 0.3;
+}
+.rv-stepper--round .rv-stepper__plus {
+  color: var(--rv-white);
+  background-color: var(--rv-stepper-button-round-theme-color);
+}
+.rv-stepper--round .rv-stepper__minus {
+  color: var(--rv-stepper-button-round-theme-color);
+  background-color: var(--rv-white);
+  border: 1px solid var(--rv-stepper-button-round-theme-color);
+}

package/es/steps/PropsType.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type StepsDirection = 'horizontal' | 'vertical';
+export interface StepsProps extends BaseTypeProps {
+    /** 已完成步骤对应的底部图标，优先级高于 inactive-icon，可选值见 Icon 组件	 */
+    finishIcon?: React.ReactNode;
+    /** 当前步骤和已完成步骤的颜色	 */
+    activeColor?: string;
+    /** 非当前步骤对应的底部图标，可选值见 Icon 组件	 */
+    inactiveIcon?: React.ReactNode;
+    /** 未激活步骤的颜色	 */
+    inactiveColor?: string;
+    /** 当前步骤对应的索引值	 */
+    active?: number;
+    /** 步骤条方向 */
+    direction?: StepsDirection;
+    /** 当前步骤对应的底部图标，可选值见 Icon 组件 */
+    activeIcon?: React.ReactNode;
+    /** 点击步骤的标题或图标时触发	 */
+    onClickStep?: (index: number) => void;
+}
+export interface StepsItemProps extends BaseTypeProps {
+    /** @private */
+    parent?: StepsProps;
+    /** @private */
+    index?: number;
+    /** 已完成步骤对应的底部图标，优先级高于 inactiveIcon */
+    finishIcon?: React.ReactNode;
+    /** 非当前步骤对应的底部图标，可选值见 Icon 组件	 */
+    inactiveIcon?: React.ReactNode;
+    /** 当前步骤对应的底部图标，可选值见 Icon 组件 */
+    activeIcon?: React.ReactNode;
+}

package/es/steps/PropsType.js

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

package/es/steps/Steps.d.ts

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

package/es/steps/Steps.js

@@ -0,0 +1,35 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import cls from 'clsx';
+import { Checked } from '@react-vant/icons';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('steps');
+const Steps = _a => {
+  var {
+      children,
+      className,
+      style
+    } = _a,
+    p = __rest(_a, ["children", "className", "style"]);
+  const props = mergeProps(p, {
+    active: 0,
+    direction: 'horizontal',
+    activeIcon: _jsx(Checked, {})
+  });
+  return _jsx("div", Object.assign({
+    className: cls(className, bem([props.direction])),
+    style: style
+  }, {
+    children: _jsx("div", Object.assign({
+      className: cls(bem('items'))
+    }, {
+      children: React.Children.toArray(children).filter(Boolean).map((child, index) => React.cloneElement(child, {
+        index,
+        parent: props
+      }))
+    }))
+  }));
+};
+export default Steps;

package/es/steps/StepsItem.d.ts

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

package/es/steps/StepsItem.js

@@ -0,0 +1,118 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import cls from 'clsx';
+import { BORDER } from '../utils/constant';
+import { createNamespace } from '../utils';
+import { devWarning } from '../utils/dev-log';
+const [bem] = createNamespace('step');
+const StepsItem = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  const {
+    index,
+    parent: parentProps
+  } = props;
+  if (!parentProps) {
+    if (process.env.NODE_ENV !== 'production') {
+      devWarning('Steps', '<Steps.Step> must be a child component of <Steps>.');
+    }
+  }
+  const getStatus = () => {
+    const active = +parentProps.active;
+    if (index < active) {
+      return 'finish';
+    }
+    return index === active ? 'process' : 'waiting';
+  };
+  const isActive = () => getStatus() === 'process';
+  const lineStyle = useMemo(() => ({
+    background: getStatus() === 'finish' ? parentProps.activeColor : parentProps.inactiveColor
+  }), [index, parentProps.active, parentProps.activeColor, parentProps.inactiveColor]);
+  const titleStyle = useMemo(() => {
+    if (isActive()) {
+      return {
+        color: parentProps.activeColor
+      };
+    }
+    if (!getStatus()) {
+      return {
+        color: parentProps.inactiveColor
+      };
+    }
+    return {};
+  }, [index, parentProps.active, parentProps.activeColor, parentProps.inactiveColor]);
+  const onClickStep = () => {
+    if (parentProps.onClickStep) parentProps.onClickStep(index);
+  };
+  const renderCircle = () => {
+    var _a, _b, _c;
+    const {
+      activeColor
+    } = parentProps;
+    const finishIcon = (_a = props.finishIcon) !== null && _a !== void 0 ? _a : parentProps.finishIcon;
+    const activeIcon = (_b = props.activeIcon) !== null && _b !== void 0 ? _b : parentProps.activeIcon;
+    const inactiveIcon = (_c = props.inactiveIcon) !== null && _c !== void 0 ? _c : parentProps.inactiveIcon;
+    if (isActive()) {
+      if (activeIcon) {
+        return React.cloneElement(activeIcon, {
+          className: cls(bem('icon', 'active')),
+          color: activeColor,
+          style: {
+            color: activeColor
+          }
+        });
+      }
+    }
+    if (getStatus() === 'finish' && finishIcon) {
+      return React.cloneElement(finishIcon, {
+        className: cls(bem('icon', 'finish')),
+        color: activeColor,
+        style: {
+          color: activeColor
+        }
+      });
+    }
+    if (inactiveIcon) {
+      return React.cloneElement(inactiveIcon, {
+        className: cls(bem('icon')),
+        color: activeColor,
+        style: {
+          color: activeColor
+        }
+      });
+    }
+    return _jsx("i", {
+      className: cls(bem('circle')),
+      style: lineStyle
+    });
+  };
+  const status = getStatus();
+  return _jsxs("div", Object.assign({
+    style: props.style,
+    className: cls(props.className, BORDER, bem([parentProps.direction, {
+      [status]: status
+    }]))
+  }, {
+    children: [_jsx("div", Object.assign({
+      className: cls(bem('title', {
+        active: isActive()
+      })),
+      style: titleStyle,
+      onClick: onClickStep
+    }, {
+      children: children
+    })), _jsx("div", Object.assign({
+      className: cls(bem('circle-container')),
+      onClick: onClickStep
+    }, {
+      children: renderCircle()
+    })), _jsx("div", {
+      className: cls(bem('line')),
+      style: lineStyle
+    })]
+  }));
+};
+export default StepsItem;

package/es/steps/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './style/index.less';
+import StepsItem from './StepsItem';
+declare const Steps: import("react").FC<import("./PropsType").StepsProps> & {
+    Item: import("react").FC<import("./PropsType").StepsItemProps>;
+};
+export { Steps, StepsItem };
+export type { StepsProps } from './PropsType';

package/es/steps/index.js

@@ -0,0 +1,7 @@
+import "./style/index.css";
+import _Steps from './Steps';
+import StepsItem from './StepsItem';
+const Steps = Object.assign(_Steps, {
+  Item: StepsItem
+});
+export { Steps, StepsItem };