react-vant-nova 1.0.0-test

package/es/area/Area.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import clsx from 'clsx';
+import Picker from '../picker';
+import { createNamespace, pick } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const INHERIT_PROPS = ['title', 'visible', 'popup', 'value', 'defaultValue', 'loading', 'readOnly', 'itemHeight', 'swipeDuration', 'visibleItemCount', 'cancelButtonText', 'confirmButtonText', 'toolbar', 'columnsTop', 'columnsBottom', 'optionRender', 'placeholder', 'onChange', 'onCancel', 'onConfirm', 'children'];
+function parseVanAreaList(data, columnsNum) {
+  const {
+    province_list = {},
+    city_list = {},
+    county_list = {}
+  } = data;
+  const provinces = Object.entries(province_list).map(([value, text]) => ({
+    value,
+    text
+  }));
+  const citys = Object.entries(city_list).map(([value, text]) => ({
+    value,
+    text
+  }));
+  const countrys = Object.entries(county_list).map(([value, text]) => ({
+    value,
+    text
+  }));
+  if (columnsNum > 2) {
+    citys.forEach(city => {
+      var _a;
+      const value = (_a = city.value) === null || _a === void 0 ? void 0 : _a.slice(0, 4);
+      const children = countrys.filter(country => {
+        var _a;
+        return ((_a = country.value) === null || _a === void 0 ? void 0 : _a.slice(0, 4)) === value;
+      });
+      city.children = children;
+    });
+  }
+  if (columnsNum > 1) {
+    provinces.forEach(province => {
+      var _a;
+      const provinceCode = (_a = province.value) === null || _a === void 0 ? void 0 : _a.slice(0, 2);
+      const children = citys.filter(city => {
+        var _a;
+        return ((_a = city.value) === null || _a === void 0 ? void 0 : _a.slice(0, 2)) === provinceCode;
+      });
+      province.children = children;
+    });
+  }
+  return provinces;
+}
+const [bem] = createNamespace('area');
+const Area = forwardRef((p, ref) => {
+  const props = mergeProps(p, {
+    areaList: {},
+    columnsNum: 3,
+    itemHeight: 44,
+    visibleItemCount: 5,
+    swipeDuration: 300,
+    showToolbar: true,
+    placeholder: true,
+    toolbarPosition: 'top'
+  });
+  const columns = useMemo(() => {
+    var _a;
+    return (_a = props.columns) !== null && _a !== void 0 ? _a : parseVanAreaList(props.areaList, +props.columnsNum);
+  }, [props.columnsNum, props.areaList, props.columns]);
+  return _jsx(Picker, Object.assign({
+    ref: ref,
+    style: props.style,
+    className: clsx(bem(), props.className),
+    columns: columns
+  }, pick(props, INHERIT_PROPS)));
+});
+export default Area;

package/es/area/PropsType.d.ts

@@ -0,0 +1,30 @@
+import { PickerProps } from '../picker';
+import { PickerPopupActions } from '../picker/PropsType';
+import { BaseTypeProps } from '../utils';
+export declare type AreaList = {
+    city_list?: Record<string, string>;
+    county_list?: Record<string, string>;
+    province_list?: Record<string, string>;
+};
+export declare type AreaColumnOption = {
+    text: string;
+    value: string;
+};
+export declare type AreaColumnType = 'province' | 'county' | 'city';
+export interface AreaProps<T> extends Pick<PickerProps<T>, 'title' | 'loading' | 'columnsFieldNames' | 'visible' | 'popup' | 'readOnly' | 'itemHeight' | 'swipeDuration' | 'visibleItemCount' | 'cancelButtonText' | 'confirmButtonText' | 'toolbar' | 'columns' | 'columnsTop' | 'columnsBottom' | 'optionRender' | 'placeholder' | 'children'>, Omit<BaseTypeProps, 'children'> {
+    /** 当前选中项对应的地区码	 */
+    value?: string[];
+    /** 默认选中项 */
+    defaultValue?: string[];
+    /** 省市区数据 */
+    areaList: AreaList;
+    /** 显示列数，3-省市区，2-省市，1-省	 */
+    columnsNum?: number;
+    /** 选项改变时触发	 */
+    onChange?: (value: string[], column: AreaColumnOption[], indexes: number[]) => void;
+    /** 点击完成按钮时触发	 */
+    onConfirm?: (value: string[], result: AreaColumnOption[], indexes: number[]) => void;
+    /** 点击取消按钮时触发	 */
+    onCancel?: (...args: unknown[]) => void;
+}
+export declare type AreaInstance = PickerPopupActions;

package/es/area/PropsType.js

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

package/es/area/index.d.ts

@@ -0,0 +1,4 @@
+import Area from './Area';
+export default Area;
+export { Area };
+export type { AreaProps, AreaInstance, AreaList } from './PropsType';

package/es/area/index.js

@@ -0,0 +1,3 @@
+import Area from './Area';
+export default Area;
+export { Area };

package/es/badge/Badge.d.ts

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

package/es/badge/Badge.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { isDef, addUnit, createNamespace } from '../utils';
+import { isNumeric } from '../utils/validate/number';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('badge');
+const Badge = p => {
+  const props = mergeProps(p, {
+    tag: 'div',
+    showZero: true
+  });
+  const {
+    content,
+    max,
+    dot,
+    showZero,
+    tag = 'div'
+  } = props;
+  const TagElement = tag;
+  const hasContent = () => {
+    if (props.content) {
+      return true;
+    }
+    return isDef(content) && content !== '' && (showZero || +content !== 0);
+  };
+  const renderContent = () => {
+    if (!dot && hasContent()) {
+      // @ts-ignore
+      if (isDef(max) && isNumeric(content === null || content === void 0 ? void 0 : content.toString()) && +content > max) {
+        return `${max}+`;
+      }
+      return content;
+    }
+    return null;
+  };
+  const renderBadge = () => {
+    if (hasContent() || props.dot) {
+      let style = {
+        background: props.color
+      };
+      if (props.offset) {
+        const [x, y] = props.offset;
+        if (props.children) {
+          style.top = addUnit(y);
+          style.right = addUnit(x);
+        } else {
+          style.marginTop = addUnit(y);
+          style.marginLeft = addUnit(x);
+        }
+      }
+      if (!props.children) {
+        style = Object.assign(Object.assign({}, props.style), style);
+      }
+      return _jsx("div", Object.assign({
+        className: clsx({
+          [props.className]: props.className && !props.children
+        }, bem({
+          dot: props.dot,
+          fixed: !!props.children
+        })),
+        style: style
+      }, {
+        children: renderContent()
+      }));
+    }
+    return null;
+  };
+  if (props.children) {
+    const ValidTagElement = TagElement; // @ts-ignore
+    return (
+      // @ts-ignore
+      _jsxs(ValidTagElement, Object.assign({
+        className: clsx(bem('wrapper'), props.className),
+        style: props.style,
+        onClick: props.onClick,
+        onTouchStart: props.onTouchStart
+      }, {
+        children: [props.children, renderBadge()]
+      })) // @ts-ignore TS2786 （按需添加注释屏蔽错误）
+    );
+  }
+  return renderBadge();
+};
+export default Badge;

package/es/badge/PropsType.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+/** HTML 标签	 */
+export declare type HtmlTagType = keyof HTMLElementTagNameMap;
+export interface BadgeProps extends BaseTypeProps {
+    /** 徽标内容 */
+    content?: React.ReactNode;
+    /** 是否展示为小红点	 */
+    dot?: boolean;
+    /** 最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效	 */
+    max?: number | string;
+    /** 徽标背景颜色	 */
+    color?: string;
+    /** 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 px	 */
+    offset?: Array<number | string>;
+    /**
+     * 当 content 为数字 0 时，是否展示徽标
+     * @default true
+     */
+    showZero?: boolean;
+    /** badge指定渲染为html元素
+     * @default div
+     */
+    tag?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    onTouchStart?: (e: React.MouseEvent) => void;
+}
+export declare type BadgeSettingProps = Omit<BadgeProps, 'children' | 'tag' | 'onClick' | 'style' | 'className'>;

package/es/badge/PropsType.js

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

package/es/badge/index.d.ts

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

package/es/badge/index.js

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

package/es/badge/style/index.css

@@ -0,0 +1,45 @@
+:root {
+  --rv-badge-size: 16px;
+  --rv-badge-color: var(--rv-white);
+  --rv-badge-padding: 0 3px;
+  --rv-badge-font-size: var(--rv-font-size-sm);
+  --rv-badge-font-weight: var(--rv-font-weight-bold);
+  --rv-badge-border-width: var(--rv-border-width-base);
+  --rv-badge-background-color: var(--rv-danger-color);
+  --rv-badge-dot-color: var(--rv-danger-color);
+  --rv-badge-dot-size: 8px;
+  --rv-badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+}
+.rv-badge {
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: var(--rv-badge-size);
+  padding: var(--rv-badge-padding);
+  color: var(--rv-badge-color);
+  font-weight: var(--rv-badge-font-weight);
+  font-size: var(--rv-badge-font-size);
+  font-family: var(--rv-badge-font-family);
+  line-height: 1.2;
+  text-align: center;
+  background-color: var(--rv-badge-background-color);
+  border: var(--rv-badge-border-width) solid var(--rv-white);
+  border-radius: var(--rv-border-radius-max);
+}
+.rv-badge--fixed {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  transform-origin: 100%;
+}
+.rv-badge--dot {
+  width: var(--rv-badge-dot-size);
+  min-width: 0;
+  height: var(--rv-badge-dot-size);
+  background-color: var(--rv-badge-dot-color);
+  border-radius: 100%;
+}
+.rv-badge__wrapper {
+  position: relative;
+  display: inline-block;
+}

package/es/button/Button.d.ts

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

package/es/button/Button.js

@@ -0,0 +1,134 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import clsx from 'clsx';
+import Loading from '../loading';
+import { BORDER_SURROUND, SHADOW, WHITE } from '../utils/constant';
+import ButtonContext from './ButtonContext';
+import { createNamespace } from '../utils';
+const [bem] = createNamespace('button');
+const Button = props => {
+  const {
+      color,
+      loading,
+      className,
+      hairline,
+      loadingText,
+      round,
+      square,
+      plain: _plain,
+      block: _block,
+      loadingType,
+      nativeType: _nativeType,
+      iconPosition: _iconPosition
+    } = props,
+    restProps = __rest(props, ["color", "loading", "className", "hairline", "loadingText", "round", "square", "plain", "block", "loadingType", "nativeType", "iconPosition"]);
+  const {
+    parent
+  } = useContext(ButtonContext);
+  const size = React.useMemo(() => props.size || (parent === null || parent === void 0 ? void 0 : parent.size) || 'normal', [parent === null || parent === void 0 ? void 0 : parent.size, props.size]);
+  const type = React.useMemo(() => props.type || (parent === null || parent === void 0 ? void 0 : parent.type) || 'default', [parent === null || parent === void 0 ? void 0 : parent.type, props.type]);
+  const plain = React.useMemo(() => _plain !== null && _plain !== void 0 ? _plain : parent === null || parent === void 0 ? void 0 : parent.plain, [parent === null || parent === void 0 ? void 0 : parent.plain, _plain]);
+  const block = React.useMemo(() => _block !== null && _block !== void 0 ? _block : parent === null || parent === void 0 ? void 0 : parent.block, [parent === null || parent === void 0 ? void 0 : parent.block, _block]);
+  const iconPosition = React.useMemo(() => _iconPosition || (parent === null || parent === void 0 ? void 0 : parent.iconPosition) || 'left', [parent === null || parent === void 0 ? void 0 : parent.iconPosition, _iconPosition]);
+  const disabled = React.useMemo(() => {
+    var _a;
+    return (_a = props.disabled) !== null && _a !== void 0 ? _a : parent === null || parent === void 0 ? void 0 : parent.disabled;
+  }, [parent === null || parent === void 0 ? void 0 : parent.disabled, props.disabled]);
+  const nativeType = React.useMemo(() => _nativeType || (parent === null || parent === void 0 ? void 0 : parent.nativeType) || 'button', [parent === null || parent === void 0 ? void 0 : parent.nativeType, _nativeType]);
+  const tag = React.useMemo(() => props.tag || (parent === null || parent === void 0 ? void 0 : parent.tag) || 'button', [parent === null || parent === void 0 ? void 0 : parent.tag, props.tag]);
+  const TagElement = tag;
+  const classes = clsx(className, bem([type, size, {
+    plain,
+    loading,
+    disabled,
+    hairline,
+    block,
+    round,
+    square
+  }]), {
+    [BORDER_SURROUND]: hairline
+  }, props.shadow && `${SHADOW}--${+props.shadow}`);
+  const style = Object.assign({}, props.style);
+  if (color) {
+    style.color = plain ? color : WHITE;
+    if (!plain) {
+      // Use background instead of backgroundColor to make linear-gradient work
+      style.background = color;
+    }
+    // hide border when color is linear-gradient
+    if (color.indexOf('gradient') !== -1) {
+      style.border = 0;
+    } else {
+      style.borderColor = color;
+    }
+  }
+  const onClick = event => {
+    if (!loading && !disabled && props.onClick) {
+      props.onClick(event);
+    }
+  };
+  const renderLoadingIcon = () => {
+    if (loading) {
+      const {
+        loadingSize = '20px'
+      } = props;
+      return (
+        // @ts-ignore
+        _jsx(Loading, {
+          className: clsx(bem('loading')),
+          size: loadingSize,
+          type: loadingType,
+          color: type === 'default' ? undefined : ''
+        })
+      );
+    }
+    return null;
+  };
+  const renderIcon = () => {
+    if (props.loading) {
+      return renderLoadingIcon();
+    }
+    if (props.icon) {
+      return React.cloneElement(props.icon, {
+        className: clsx(bem('icon'))
+      });
+    }
+    return null;
+  };
+  const renderText = () => {
+    let text;
+    if (loading) {
+      text = loadingText;
+    } else {
+      text = props.children || props.text;
+    }
+    if (text) {
+      return _jsx("span", Object.assign({
+        className: clsx(bem('text'))
+      }, {
+        children: text
+      }), 'text');
+    }
+    return null;
+  };
+  const renderContent = () => _jsxs("div", Object.assign({
+    className: clsx(bem('content'))
+  }, {
+    children: [iconPosition === 'left' && renderIcon(), renderText(), iconPosition === 'right' && renderIcon()]
+  }));
+  const ValidTagElement = TagElement; // @ts-ignore
+  return (
+    // @ts-ignore
+    _jsx(ValidTagElement, Object.assign({}, restProps, {
+      disabled: disabled,
+      className: classes,
+      style: style,
+      type: nativeType,
+      onClick: onClick
+    }, {
+      children: renderContent()
+    }))
+  );
+};
+export default Button;

package/es/button/ButtonContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonGroupProps } from './PropsType';
+declare type ButtonContextType = {
+    parent?: ButtonGroupProps;
+};
+declare const ButtonContext: React.Context<ButtonContextType>;
+export default ButtonContext;

package/es/button/ButtonContext.js

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

package/es/button/ButtonGroup.d.ts

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

package/es/button/ButtonGroup.js

@@ -0,0 +1,38 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import ButtonContext from './ButtonContext';
+import { SHADOW } from '../utils/constant';
+import { createNamespace } from '../utils';
+const [bem] = createNamespace('button-group');
+export const ButtonGroup = _a => {
+  var {
+      className,
+      style,
+      children,
+      onClick
+    } = _a,
+    props = __rest(_a, ["className", "style", "children", "onClick"]);
+  const internalClick = e => {
+    if (props.disabled) return;
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  return _jsx("div", Object.assign({
+    onClick: internalClick,
+    style: style,
+    className: clsx(className, bem([props.type, {
+      round: props.round,
+      plain: props.plain,
+      disabled: props.disabled
+    }]), props.shadow && `${SHADOW}--${+props.shadow}`)
+  }, {
+    children: _jsx(ButtonContext.Provider, Object.assign({
+      value: {
+        parent: props
+      }
+    }, {
+      children: children
+    }))
+  }));
+};
+export default ButtonGroup;

package/es/button/PropsType.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import { LoadingType } from '../loading/PropsType';
+import { BaseTypeProps } from '../utils';
+export declare type ButtonType = 'default' | 'primary' | 'info' | 'warning' | 'danger';
+export declare type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
+export declare type ButtonIconPosition = 'right' | 'left';
+export interface ButtonProps extends BaseTypeProps, Omit<React.HTMLAttributes<HTMLButtonElement>, 'style'> {
+    /**
+     * 指定渲染的dom标签
+     * @default 'button'
+     */
+    tag?: keyof HTMLElementTagNameMap | string;
+    /** 按钮类型 */
+    type?: ButtonType;
+    /** 按钮尺寸 */
+    size?: ButtonSize;
+    /**
+     * 按钮文本
+     * 业务内建议使用children代替
+     * */
+    text?: React.ReactNode;
+    /** 左侧图标 */
+    icon?: React.ReactNode;
+    /** 按钮颜色，支持传入 linear-gradient 渐变色 */
+    color?: string;
+    /** 是否为块级元素(全宽)	 */
+    block?: boolean;
+    /** 是否为朴素按钮	 */
+    plain?: boolean;
+    /** 是否为圆形按钮	 */
+    round?: boolean;
+    /** 是否为方形按钮	 */
+    square?: boolean;
+    /** 是否为阴影按钮 */
+    shadow?: boolean | 1 | 2 | 3;
+    /** 是否显示为加载状态	 */
+    loading?: boolean;
+    /** 是否使用 0.5px 边框	 */
+    hairline?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 原生 button 标签的 type 属性	 */
+    nativeType?: string;
+    /** 图标展示位置，可选值为 `right` */
+    iconPosition?: ButtonIconPosition;
+    /** 加载图标大小	 */
+    loadingSize?: string;
+    /**
+     * 加载图标类型，可选值为 `spinner`
+     * @default circular
+     * */
+    loadingType?: LoadingType;
+    /**
+     * 加载状态提示文字
+     */
+    loadingText?: string;
+    /**
+     * 点击事件
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export declare type ButtonGroupProps = BaseTypeProps & Pick<ButtonProps, 'size' | 'type' | 'square' | 'tag' | 'block' | 'round' | 'plain' | 'shadow' | 'disabled' | 'nativeType' | 'iconPosition'> & {
+    /**
+     * 点击事件
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};

package/es/button/PropsType.js

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

package/es/button/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './style/index.less';
+declare const Button: import("react").FC<import("./PropsType").ButtonProps> & {
+    Group: import("react").FC<import("./PropsType").ButtonGroupProps>;
+};
+export default Button;
+export { Button };
+export type { ButtonProps, ButtonType, ButtonSize, ButtonIconPosition, } from './PropsType';

package/es/button/index.js

@@ -0,0 +1,8 @@
+import "./style/index.css";
+import _Button from './Button';
+import Group from './ButtonGroup';
+const Button = Object.assign(_Button, {
+  Group
+});
+export default Button;
+export { Button };