react-vant-nova 1.0.0-test

package/es/sku/components/SkuStepper.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type SkuStepperProps = {
+    currentNum: number;
+    onChange: (v: number) => void;
+    onSkuStepperState: (v: any) => void;
+    onSkuOverLimit?: (v: any) => void;
+    stock?: number;
+    stepperTitle?: React.ReactNode;
+    disableStepperInput?: boolean;
+    hideQuotaText?: boolean;
+    quota?: number | string;
+    quotaUsed?: number | string;
+    startSaleNum?: number | string;
+    customStepperConfig?: any;
+};
+declare const SkuStepper: React.FC<SkuStepperProps>;
+export default SkuStepper;

package/es/sku/components/SkuStepper.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import cls from 'clsx';
+import { LIMIT_TYPE } from '../constants';
+import Stepper from '../../stepper';
+import { createNamespace } from '../../utils';
+import { mergeProps } from '../../utils/get-default-props';
+const {
+  QUOTA_LIMIT,
+  STOCK_LIMIT
+} = LIMIT_TYPE;
+const [bem] = createNamespace('sku');
+const SkuStepper = p => {
+  const props = mergeProps(p, {
+    quota: 0,
+    quotaUsed: 0,
+    startSaleNum: 1,
+    customStepperConfig: {}
+  });
+  const [limitType, setLimitType] = useState(STOCK_LIMIT);
+  const stepperLimit = useMemo(() => {
+    const quotaLimit = +props.quota - +props.quotaUsed;
+    let limit;
+    let currentLimitType;
+    // 无限购时直接取库存，有限购时取限购数和库存数中小的那个
+    if (+props.quota > 0 && quotaLimit <= props.stock) {
+      // 修正负的limit
+      limit = quotaLimit < 0 ? 0 : quotaLimit;
+      currentLimitType = QUOTA_LIMIT;
+    } else {
+      limit = props.stock;
+      currentLimitType = STOCK_LIMIT;
+    }
+    setLimitType(currentLimitType);
+    return limit;
+  }, [props.quota, props.quotaUsed, props.stock]);
+  const stepperMinLimit = useMemo(() => {
+    return +props.startSaleNum < 1 ? 1 : +props.startSaleNum;
+  }, [props.startSaleNum]);
+  const quotaContent = useMemo(() => {
+    const {
+      quotaText,
+      hideQuotaText
+    } = props.customStepperConfig;
+    if (hideQuotaText) return '';
+    let text = '';
+    if (quotaText) {
+      text = quotaText;
+    } else {
+      const textArr = [];
+      if (+props.startSaleNum > 1) {
+        textArr.push(`${props.startSaleNum}件起售`);
+      }
+      if (+props.quota > 0) {
+        textArr.push(`限购${+props.quota}件`);
+      }
+      text = textArr.join(',');
+    }
+    return text;
+  }, [JSON.stringify(props.customStepperConfig), props.startSaleNum, props.quota]);
+  const checkState = (min, max) => {
+    // 如果选择小于起售，则强制变为起售
+    if (props.currentNum < min || min > max) {
+      props.onChange(min);
+    } else if (props.currentNum > max) {
+      // 当前选择数量大于最大可选时，需要重置已选数量
+      props.onChange(max);
+    }
+    props.onSkuStepperState({
+      valid: min <= max,
+      min,
+      max,
+      limitType,
+      quota: props.quota,
+      quotaUsed: props.quotaUsed,
+      startSaleNum: props.startSaleNum
+    });
+  };
+  const setCurrentNum = num => {
+    props.onChange(num);
+    checkState(stepperMinLimit, stepperLimit);
+  };
+  const onChange = currentValue => {
+    const intValue = parseInt(currentValue, 10);
+    const {
+      handleStepperChange
+    } = props.customStepperConfig;
+    if (handleStepperChange) handleStepperChange(intValue);
+    setCurrentNum(currentValue);
+  };
+  const onOverLimit = action => {
+    props.onSkuOverLimit({
+      action,
+      limitType,
+      quota: props.quota,
+      quotaUsed: props.quotaUsed,
+      startSaleNum: props.startSaleNum
+    });
+  };
+  return _jsxs("div", Object.assign({
+    className: cls(bem('stepper-stock'))
+  }, {
+    children: [_jsx("div", Object.assign({
+      className: cls(bem('stepper-title'))
+    }, {
+      children: props.stepperTitle
+    })), _jsx(Stepper, {
+      min: stepperMinLimit,
+      max: stepperLimit,
+      className: cls(bem('stepper')),
+      disableInput: props.disableStepperInput,
+      value: props.currentNum,
+      onChange: onChange,
+      onOverlimit: onOverLimit
+    }), !props.hideQuotaText && quotaContent && _jsx("span", Object.assign({
+      className: cls(bem('stepper-quota'))
+    }, {
+      children: quotaContent
+    }))]
+  }));
+};
+export default SkuStepper;

package/es/sku/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const LIMIT_TYPE: {
+    QUOTA_LIMIT: number;
+    STOCK_LIMIT: number;
+};
+export declare const UNSELECTED_SKU_VALUE_ID = "";
+declare const _default: {
+    LIMIT_TYPE: {
+        QUOTA_LIMIT: number;
+        STOCK_LIMIT: number;
+    };
+    UNSELECTED_SKU_VALUE_ID: string;
+};
+export default _default;

package/es/sku/constants.js

@@ -0,0 +1,9 @@
+export const LIMIT_TYPE = {
+  QUOTA_LIMIT: 0,
+  STOCK_LIMIT: 1
+};
+export const UNSELECTED_SKU_VALUE_ID = '';
+export default {
+  LIMIT_TYPE,
+  UNSELECTED_SKU_VALUE_ID
+};

package/es/sku/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Sku from './Sku';
+export default Sku;
+export { Sku };
+export type { SkuInstance, SkuProps } from './PropsType';

package/es/sku/index.js

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

package/es/sku/style/index.css

@@ -0,0 +1,283 @@
+:root {
+  --rv-sku-item-background-color: var(--rv-background-color);
+}
+.rv-sku {
+  /* sku row */
+}
+.rv-sku__container.rv-popup {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-height: 50%;
+  max-height: 80%;
+  overflow-y: visible;
+  font-size: 14px;
+  background: #fff;
+}
+.rv-sku__body {
+  flex: 1 1 auto;
+  min-height: 44px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.rv-sku__body::-webkit-scrollbar {
+  display: none;
+}
+.rv-sku__header {
+  display: flex;
+  flex-shrink: 0;
+  margin: 0 16px;
+}
+.rv-sku__header__img-wrap.rv-image {
+  flex-shrink: 0;
+  width: 96px;
+  height: 96px;
+  margin: 12px 12px 12px 0;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.rv-sku__header__goods-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 12px 20px 12px 0;
+}
+.rv-sku__header-item {
+  margin-top: 8px;
+  color: #969799;
+  font-size: 12px;
+  line-height: 16px;
+}
+.rv-sku__price-symbol {
+  font-size: 16px;
+  vertical-align: bottom;
+}
+.rv-sku__price-num {
+  font-weight: 500;
+  font-size: 22px;
+  vertical-align: bottom;
+  word-wrap: break-word;
+}
+.rv-sku__goods-price {
+  margin-left: -2px;
+  color: #f44336;
+}
+.rv-sku__price-tag {
+  position: relative;
+  display: inline-block;
+  margin-left: 8px;
+  padding: 0 5px;
+  overflow: hidden;
+  color: #f44336;
+  font-size: 12px;
+  line-height: 16px;
+  border-radius: 8px;
+}
+.rv-sku__price-tag::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: currentColor;
+  opacity: 0.1;
+  content: '';
+}
+.rv-sku__group-container {
+  padding-top: 12px;
+}
+.rv-sku__group-container--hide-soldout .rv-sku-row__item--disabled {
+  display: none;
+}
+.rv-sku-row {
+  margin: 0 16px 12px;
+}
+.rv-sku-row:last-child {
+  margin-bottom: 0;
+}
+.rv-sku-row__item,
+.rv-sku-row__image-item {
+  position: relative;
+  overflow: hidden;
+  color: var(--rv-gray-8);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.rv-sku-row__item::before,
+.rv-sku-row__image-item::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--rv-sku-item-background-color);
+  content: '';
+}
+.rv-sku-row__item--active,
+.rv-sku-row__image-item--active {
+  color: #f44336;
+}
+.rv-sku-row__item--active::before,
+.rv-sku-row__image-item--active::before {
+  background: currentColor;
+  opacity: 0.1;
+}
+.rv-sku-row__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  margin: 0 12px 12px 0;
+  font-size: 13px;
+  line-height: 16px;
+  vertical-align: middle;
+}
+.rv-sku-row__item-img.rv-image {
+  z-index: 1;
+  width: 24px;
+  height: 24px;
+  margin: 4px 0 4px 4px;
+  object-fit: cover;
+  border-radius: 2px;
+}
+.rv-sku-row__item-name {
+  z-index: 1;
+  padding: 8px;
+}
+.rv-sku-row__item--disabled {
+  color: #c8c9cc;
+  background: var(--rv-gray-2);
+  cursor: not-allowed;
+}
+.rv-sku-row__item--disabled .rv-sku-row__item-img {
+  opacity: 0.3;
+}
+.rv-sku-row__image {
+  margin-right: 0;
+}
+.rv-sku-row__image-item {
+  display: flex;
+  flex-direction: column;
+  width: 110px;
+  margin: 0 4px 4px 0;
+  border: 1px solid transparent;
+}
+.rv-sku-row__image-item:last-child {
+  margin-right: 0;
+}
+.rv-sku-row__image-item-img.rv-image {
+  width: 100%;
+  height: 110px;
+}
+.rv-sku-row__image-item-img-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  width: 18px;
+  height: 18px;
+  color: #fff;
+  line-height: 18px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-bottom-left-radius: 4px;
+}
+.rv-sku-row__image-item-name {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 4px;
+  font-size: 12px;
+  line-height: 16px;
+}
+.rv-sku-row__image-item-name span {
+  word-wrap: break-word;
+}
+.rv-sku-row__image-item--active {
+  border-color: currentColor;
+}
+.rv-sku-row__image-item--disabled {
+  color: #c8c9cc;
+  cursor: not-allowed;
+}
+.rv-sku-row__image-item--disabled::before {
+  z-index: 2;
+  background: var(--rv-gray-2);
+  opacity: 0.4;
+}
+.rv-sku-row__title {
+  padding-bottom: 12px;
+}
+.rv-sku-row__title-multiple {
+  color: #969799;
+}
+.rv-sku-row__scroller {
+  margin: 0 -16px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.rv-sku-row__scroller::-webkit-scrollbar {
+  display: none;
+}
+.rv-sku-row__row {
+  display: inline-flex;
+  margin-bottom: 4px;
+  padding: 0 16px;
+}
+.rv-sku-row__indicator {
+  width: 40px;
+  height: 4px;
+  background: #ebedf0;
+  border-radius: 2px;
+}
+.rv-sku-row__indicator-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 16px;
+}
+.rv-sku-row__indicator-slider {
+  width: 50%;
+  height: 100%;
+  background-color: #f44336;
+  border-radius: 2px;
+}
+.rv-sku__stepper-stock {
+  padding: 12px 16px;
+  overflow: hidden;
+  line-height: 30px;
+}
+.rv-sku__stepper {
+  float: right;
+  padding-left: 4px;
+}
+.rv-sku__stepper-title {
+  float: left;
+}
+.rv-sku__stepper-quota {
+  float: right;
+  color: #f44336;
+  font-size: 12px;
+}
+.rv-sku__stock {
+  display: inline-block;
+  margin-right: 8px;
+  color: #969799;
+  font-size: 12px;
+}
+.rv-sku__stock-num--highlight {
+  color: #f44336;
+}
+.rv-sku__actions {
+  flex-shrink: 0;
+  padding: 0 16px;
+}
+.rv-sku__actions .rv-action-bar {
+  position: relative;
+}
+.rv-sku__actions .rv-action-bar .rv-button {
+  margin: 0;
+}

package/es/sku/utils.d.ts

@@ -0,0 +1,25 @@
+import { SelectedSkuData, SkuData } from './PropsType';
+export declare type SelectedValueType = {
+    ks: string;
+    imgUrl: string;
+    position: number;
+};
+export declare function getSkuImgValue(sku: SkuData, selectedSku: SelectedSkuData): SelectedValueType | undefined;
+export declare const normalizeSkuTree: (skuTree: any) => {};
+export declare const normalizePropList: (propList: any) => {};
+export declare const isAllSelected: (skuTree: any, selectedSku: any) => boolean;
+export declare const getSkuComb: (skuList: any, selectedSku: any) => any;
+export declare const getSelectedSkuValues: (skuTree: any, selectedSku: any) => any[];
+export declare const isSkuChoosable: (skuList: any, selectedSku: any, skuToChoose: any) => boolean;
+export declare const getSelectedPropValues: (propList: any, selectedProp: any) => any[];
+export declare const getSelectedProperties: (propList: any, selectedProp: any) => any[];
+declare const _default: {
+    normalizeSkuTree: (skuTree: any) => {};
+    getSkuComb: (skuList: any, selectedSku: any) => any;
+    getSelectedSkuValues: (skuTree: any, selectedSku: any) => any[];
+    isAllSelected: (skuTree: any, selectedSku: any) => boolean;
+    isSkuChoosable: (skuList: any, selectedSku: any, skuToChoose: any) => boolean;
+    getSelectedPropValues: (propList: any, selectedProp: any) => any[];
+    getSelectedProperties: (propList: any, selectedProp: any) => any[];
+};
+export default _default;

package/es/sku/utils.js

@@ -0,0 +1,153 @@
+import { UNSELECTED_SKU_VALUE_ID } from './constants';
+export function getSkuImgValue(sku, selectedSku) {
+  let imgValue;
+  sku.tree.some(item => {
+    const id = selectedSku[item.k_s];
+    if (id && item.v) {
+      const matchedSkuIdx = item.v.findIndex(skuValue => skuValue.id === id);
+      const matchedSku = item.v[matchedSkuIdx];
+      const img = (matchedSku === null || matchedSku === void 0 ? void 0 : matchedSku.previewImgUrl) || (matchedSku === null || matchedSku === void 0 ? void 0 : matchedSku.imgUrl) || (matchedSku === null || matchedSku === void 0 ? void 0 : matchedSku.img_url);
+      if (img) {
+        imgValue = Object.assign(Object.assign({}, matchedSku), {
+          ks: item.k_s,
+          imgUrl: img,
+          position: matchedSkuIdx
+        });
+        return true;
+      }
+    }
+    return false;
+  });
+  return imgValue;
+}
+/*
+  normalize sku tree
+
+  [
+    {
+      count: 2,
+      k: "品种", // 规格名称 skuKeyName
+      k_id: "1200", // skuKeyId
+      k_s: "s1" // skuKeyStr
+      v: [ // skuValues
+        { // skuValue
+          id: "1201", // skuValueId
+          name: "萌" // 具体的规格值 skuValueName
+        }, {
+          id: "973",
+          name: "帅"
+        }
+      ]
+    },
+    ...
+  ]
+                |
+                v
+  {
+    s1: [{
+      id: "1201",
+      name: "萌"
+    }, {
+      id: "973",
+      name: "帅"
+    }],
+    ...
+  }
+ */
+export const normalizeSkuTree = skuTree => {
+  const normalizedTree = {};
+  skuTree.forEach(treeItem => {
+    normalizedTree[treeItem.k_s] = treeItem.v;
+  });
+  return normalizedTree;
+};
+export const normalizePropList = propList => {
+  const normalizedProp = {};
+  propList.forEach(item => {
+    const itemObj = {};
+    item.v.forEach(it => {
+      itemObj[it.id] = it;
+    });
+    normalizedProp[item.k_id] = itemObj;
+  });
+  return normalizedProp;
+};
+// 判断是否所有的sku都已经选中
+export const isAllSelected = (skuTree, selectedSku) => {
+  // 筛选selectedSku对象中key值不为空的值
+  const selected = Object.keys(selectedSku).filter(skuKeyStr => selectedSku[skuKeyStr] !== UNSELECTED_SKU_VALUE_ID);
+  return skuTree.length === selected.length;
+};
+// 根据已选择的 sku 获取 skuComb
+export const getSkuComb = (skuList, selectedSku) => {
+  const skuComb = skuList.filter(item => Object.keys(selectedSku).every(skuKeyStr => String(item[skuKeyStr]) === String(selectedSku[skuKeyStr])));
+  return skuComb[0];
+};
+// 获取已选择的sku名称
+export const getSelectedSkuValues = (skuTree, selectedSku) => {
+  const normalizedTree = normalizeSkuTree(skuTree);
+  return Object.keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
+    const skuValues = normalizedTree[skuKeyStr];
+    const skuValueId = selectedSku[skuKeyStr];
+    if (skuValueId !== UNSELECTED_SKU_VALUE_ID) {
+      const skuValue = skuValues.filter(value => value.id === skuValueId)[0];
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      skuValue && selectedValues.push(skuValue);
+    }
+    return selectedValues;
+  }, []);
+};
+// 判断sku是否可选
+export const isSkuChoosable = (skuList, selectedSku, skuToChoose) => {
+  const {
+    key,
+    valueId
+  } = skuToChoose;
+  // 先假设sku已选中，拼入已选中sku对象中
+  const matchedSku = Object.assign(Object.assign({}, selectedSku), {
+    [key]: valueId
+  });
+  // 再判断剩余sku是否全部不可选，若不可选则当前sku不可选中
+  const skusToCheck = Object.keys(matchedSku).filter(skuKey => matchedSku[skuKey] !== UNSELECTED_SKU_VALUE_ID);
+  const filteredSku = skuList.filter(sku => skusToCheck.every(skuKey => String(matchedSku[skuKey]) === String(sku[skuKey])));
+  const stock = filteredSku.reduce((total, sku) => {
+    total += sku.stock_num;
+    return total;
+  }, 0);
+  return stock > 0;
+};
+export const getSelectedPropValues = (propList, selectedProp) => {
+  const normalizeProp = normalizePropList(propList);
+  return Object.keys(selectedProp).reduce((acc, cur) => {
+    selectedProp[cur].forEach(it => {
+      acc.push(Object.assign({}, normalizeProp[cur][it]));
+    });
+    return acc;
+  }, []);
+};
+export const getSelectedProperties = (propList, selectedProp) => {
+  const list = [];
+  (propList || []).forEach(prop => {
+    if (selectedProp[prop.k_id] && selectedProp[prop.k_id].length > 0) {
+      const v = [];
+      prop.v.forEach(it => {
+        if (selectedProp[prop.k_id].indexOf(it.id) > -1) {
+          v.push(Object.assign({}, it));
+        }
+      });
+      list.push(Object.assign(Object.assign({}, prop), {
+        v
+      }));
+    }
+  });
+  return list;
+};
+export default {
+  normalizeSkuTree,
+  getSkuComb,
+  getSelectedSkuValues,
+  isAllSelected,
+  isSkuChoosable,
+  getSelectedPropValues,
+  getSelectedProperties
+};

package/es/slider/PropsType.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type SliderValue = number | [number, number];
+export interface SliderBaseProps<T> extends BaseTypeProps {
+    /** 当前进度百分比，在双滑块模式下为数组格式 */
+    value?: T;
+    /** 是否开启双滑块模式	 */
+    range?: boolean;
+    /** 是否禁用滑块	 */
+    disabled?: boolean;
+    /** 是否将进度条反转	 */
+    reverse?: boolean;
+    /** 是否为只读状态，只读状态下无法修改滑块的值	 */
+    readOnly?: boolean;
+    /** 是否垂直展示	 */
+    vertical?: boolean;
+    /** 进度条高度，默认单位为 `px` */
+    barHeight?: number | string;
+    /** 滑块按钮大小，默认单位为 `px`	 */
+    buttonSize?: number | string;
+    /** 进度条激活态颜色	 */
+    activeColor?: string;
+    /** 进度条非激活态颜色	 */
+    inactiveColor?: string;
+    /**
+     * 最小值
+     * @default 0
+     */
+    min?: number;
+    /**
+     * 最大值
+     * @default 100
+     */
+    max?: number;
+    /**
+     * 步长
+     * @default 1
+     */
+    step?: number;
+    /** 自定义滑块按钮	 */
+    button?: React.ReactNode | (({ value }: {
+        value: SliderValue;
+    }) => React.ReactNode);
+    /** 自定义左侧滑块按钮（双滑块模式下） */
+    leftButton?: React.ReactNode;
+    /** 自定义右侧滑块按钮 （双滑块模式下）	*/
+    rightButton?: React.ReactNode;
+    /** 进度变化时实时触发 */
+    onChange?: (value: T) => void;
+    /** 进度变化且结束拖动后触发 */
+    onChangeAfter?: (value: T) => void;
+    /** 开始拖动时触发 */
+    onDragStart?: (event: React.TouchEvent, value: T) => void;
+    /** 结束拖动时触发 */
+    onDragEnd?: (event: React.TouchEvent, value: T) => void;
+}
+export declare type SliderSingleProps = SliderBaseProps<number>;
+export declare type SliderRangeProps = SliderBaseProps<[number, number]>;
+export declare type SliderProps = SliderSingleProps | SliderRangeProps;

package/es/slider/PropsType.js

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

package/es/slider/Slider.d.ts

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