react-vant-nova 1.0.0-test

package/es/action-bar/ActionBar.d.ts

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

package/es/action-bar/ActionBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import ActionBarContext from './ActionBarContext';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('action-bar');
+const ActionBar = p => {
+  const props = mergeProps(p, {
+    safeAreaInsetBottom: true
+  });
+  const children = useMemo(() => React.Children.toArray(props.children), [props.children]);
+  return _jsx(ActionBarContext.Provider, Object.assign({
+    value: {
+      parent: {
+        children
+      }
+    }
+  }, {
+    children: _jsx("div", Object.assign({
+      className: clsx(props.className, bem(), {
+        'rv-safe-area-bottom': props.safeAreaInsetBottom
+      }),
+      style: props.style
+    }, {
+      children: React.Children.toArray(props.children).filter(Boolean).map((child, index) => React.cloneElement(child, {
+        index
+      }))
+    }))
+  }));
+};
+export default ActionBar;

package/es/action-bar/ActionBarButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ActionBarButtonProps } from './PropsType';
+declare const ActionBarButtonNameSpace: React.FC<ActionBarButtonProps> & {
+    isButton: boolean;
+};
+export default ActionBarButtonNameSpace;

package/es/action-bar/ActionBarButton.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import clsx from 'clsx';
+import Button from '../button';
+import ActionBarContext from './ActionBarContext';
+import { createNamespace } from '../utils';
+const [bem] = createNamespace('action-bar-button');
+const ActionBarButton = props => {
+  const {
+    type,
+    icon,
+    text,
+    color,
+    loading,
+    disabled,
+    index
+  } = props;
+  const {
+    parent
+  } = useContext(ActionBarContext);
+  const isFirst = useMemo(() => {
+    if (parent) {
+      const prev = parent.children[index - 1];
+      return !(prev && 'isButton' in prev.type);
+    }
+    return false;
+  }, [index, parent]);
+  const isLast = useMemo(() => {
+    if (parent) {
+      const next = parent.children[index + 1];
+      return !(next && 'isButton' in next.type);
+    }
+    return false;
+  }, [index, parent]);
+  return _jsx(Button, Object.assign({
+    className: clsx(props.className, bem([type, {
+      last: isLast,
+      first: isFirst
+    }])),
+    style: props.style,
+    size: 'large',
+    type: type,
+    icon: icon,
+    color: color,
+    loading: loading,
+    disabled: disabled,
+    onClick: props.onClick
+  }, {
+    children: props.children ? props.children : text
+  }));
+};
+const ActionBarButtonNameSpace = Object.assign(ActionBarButton, {
+  isButton: true
+});
+export default ActionBarButtonNameSpace;

package/es/action-bar/ActionBarContext.d.ts

@@ -0,0 +1,6 @@
+import { Context } from 'react';
+export interface ActionBarState {
+    parent?: Record<string, any>;
+}
+declare const ActionButtonContext: Context<ActionBarState>;
+export default ActionButtonContext;

package/es/action-bar/ActionBarContext.js

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

package/es/action-bar/ActionBarIcon.d.ts

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

package/es/action-bar/ActionBarIcon.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import Badge from '../badge';
+import { createNamespace } from '../utils';
+const [bem] = createNamespace('action-bar-icon');
+const ActionBarIcon = props => {
+  const renderIcon = () => {
+    const {
+      badge,
+      icon
+    } = props;
+    if (icon) {
+      return _jsx(Badge, Object.assign({}, badge, {
+        className: clsx(bem('icon'))
+      }, {
+        children: icon
+      }));
+    }
+    return null;
+  };
+  return _jsxs("div", Object.assign({
+    role: 'button',
+    className: clsx(props.className, bem()),
+    style: props.style,
+    tabIndex: 0,
+    onClick: props.onClick
+  }, {
+    children: [renderIcon(), props.children || props.text]
+  }));
+};
+export default ActionBarIcon;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BadgeSettingProps } from '../badge/PropsType';
+import { ButtonType } from '../button/PropsType';
+import { BaseTypeProps } from '../utils';
+export interface ActionBarProps extends BaseTypeProps {
+    /** 是否开启底部安全区适配 */
+    safeAreaInsetBottom?: boolean;
+}
+export interface ActionBarIconProps extends BaseTypeProps {
+    /** 按钮文字	 */
+    text?: React.ReactNode;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 图标右上角徽标的内容	 */
+    badge?: BadgeSettingProps;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export interface ActionBarButtonProps extends BaseTypeProps {
+    /** 按钮文字 */
+    text?: React.ReactNode;
+    /** 按钮类型 */
+    type?: ButtonType;
+    /** 按钮图标 */
+    icon?: string | React.ReactNode;
+    /** 按钮颜色，支持传入 linear-gradient 渐变色	 */
+    color?: string;
+    /** 是否禁用按钮	 */
+    disabled?: boolean;
+    /** 是否显示为加载状态	 */
+    loading?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    /**  @private */
+    index?: number;
+}

package/es/action-bar/PropsType.js

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './style/index.less';
+declare const ActionBar: import("react").FC<import("./PropsType").ActionBarProps> & {
+    Icon: import("react").FC<import("./PropsType").ActionBarIconProps>;
+    Button: import("react").FC<import("./PropsType").ActionBarButtonProps> & {
+        isButton: boolean;
+    };
+};
+export default ActionBar;
+export { ActionBar };
+export type { ActionBarProps, ActionBarIconProps, ActionBarButtonProps, } from './PropsType';

package/es/action-bar/index.js

@@ -0,0 +1,10 @@
+import "./style/index.css";
+import _ActionBar from './ActionBar';
+import ActionBarIcon from './ActionBarIcon';
+import ActionBarButton from './ActionBarButton';
+const ActionBar = Object.assign(_ActionBar, {
+  Icon: ActionBarIcon,
+  Button: ActionBarButton
+});
+export default ActionBar;
+export { ActionBar };

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

@@ -0,0 +1,76 @@
+:root {
+  --rv-action-bar-background-color: var(--rv-white);
+  --rv-action-bar-height: 50px;
+  --rv-action-bar-button-height: 40px;
+  --rv-action-bar-button-warning-color: var(--rv-gradient-orange);
+  --rv-action-bar-button-danger-color: var(--rv-gradient-red);
+  --rv-action-bar-icon-width: 48px;
+  --rv-action-bar-icon-height: 100%;
+  --rv-action-bar-icon-color: var(--rv-text-color);
+  --rv-action-bar-icon-size: 18px;
+  --rv-action-bar-icon-font-size: var(--rv-font-size-xs);
+  --rv-action-bar-icon-active-color: var(--rv-active-color);
+  --rv-action-bar-icon-text-color: var(--rv-gray-7);
+  --rv-action-bar-icon-background-color: var(--rv-white);
+}
+.rv-action-bar {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+  height: var(--rv-action-bar-height);
+  background-color: var(--rv-action-bar-background-color);
+}
+.rv-action-bar-button.rv-button {
+  flex: 1;
+  height: var(--rv-action-bar-button-height);
+  font-weight: var(--rv-font-weight-bold);
+  font-size: var(--rv-font-size-md);
+  border: none;
+  border-radius: 0;
+}
+@media (max-width: 321px) {
+  .rv-action-bar-button.rv-button {
+    font-size: 13px;
+  }
+}
+.rv-action-bar-button.rv-action-bar-button--first {
+  margin-left: 5px;
+  border-top-left-radius: var(--rv-border-radius-max);
+  border-bottom-left-radius: var(--rv-border-radius-max);
+}
+.rv-action-bar-button.rv-action-bar-button--last {
+  margin-right: 5px;
+  border-top-right-radius: var(--rv-border-radius-max);
+  border-bottom-right-radius: var(--rv-border-radius-max);
+}
+.rv-action-bar-button.rv-action-bar-button--warning {
+  background: var(--rv-action-bar-button-warning-color);
+}
+.rv-action-bar-button.rv-action-bar-button--danger {
+  background: var(--rv-action-bar-button-danger-color);
+}
+.rv-action-bar-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: var(--rv-action-bar-icon-width);
+  height: var(--rv-action-bar-icon-height);
+  color: var(--rv-action-bar-icon-text-color);
+  font-size: var(--rv-action-bar-icon-font-size);
+  line-height: 1;
+  text-align: center;
+  background-color: var(--rv-action-bar-icon-background-color);
+  cursor: pointer;
+}
+.rv-action-bar-icon:active {
+  background-color: var(--rv-action-bar-icon-active-color);
+}
+.rv-action-bar-icon__icon {
+  margin: 0 auto var(--rv-padding-base);
+  color: var(--rv-action-bar-icon-color);
+  font-size: var(--rv-action-bar-icon-size);
+}

package/es/action-sheet/ActionSheet.d.ts

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

package/es/action-sheet/ActionSheet.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Cross } from '@react-vant/icons';
+import clsx from 'clsx';
+import { createNamespace, pick } from '../utils';
+import Loading from '../loading';
+import Popup from '../popup';
+import { sharedPopupProps } from '../popup/Popup';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('action-sheet');
+const ActionSheet = p => {
+  const props = mergeProps(p, {
+    closeable: true,
+    safeAreaInsetBottom: true,
+    round: true,
+    lockScroll: true,
+    overlay: true,
+    closeOnClickOverlay: true,
+    closeIcon: _jsx(Cross, {})
+  });
+  const onCancel = () => {
+    var _a, _b;
+    (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    (_b = props.onCancel) === null || _b === void 0 ? void 0 : _b.call(props);
+  };
+  const renderHeader = () => {
+    if (!props.title) return null;
+    return _jsxs("div", Object.assign({
+      className: clsx(bem('header'))
+    }, {
+      children: [props.title, props.closeable && React.cloneElement(props.closeIcon, {
+        className: clsx(bem('clear')),
+        onClick: onCancel
+      })]
+    }));
+  };
+  const renderCancel = () => {
+    if (!props.cancelText) return null;
+    return [_jsx("div", {
+      className: clsx(bem('gap'))
+    }, 'cancel-gap'), _jsx("button", Object.assign({
+      type: 'button',
+      className: clsx(bem('cancel')),
+      onClick: onCancel
+    }, {
+      children: props.cancelText
+    }), 'cancel-btn')];
+  };
+  const renderOption = (item, index) => {
+    const {
+      name,
+      color,
+      subname,
+      loading,
+      callback,
+      disabled,
+      className,
+      style
+    } = item;
+    const Content = loading ? _jsx(Loading, {
+      className: clsx(bem('loading-icon'))
+    }) : [_jsx("span", Object.assign({
+      className: clsx(bem('name'))
+    }, {
+      children: name
+    }), `${index}-1`), subname && _jsx("div", Object.assign({
+      className: clsx(bem('subname'))
+    }, {
+      children: subname
+    }), `${index}-2`)];
+    const onClick = () => {
+      if (disabled || loading) {
+        return;
+      }
+      if (callback) {
+        callback(item);
+      }
+      if (props.closeOnClickAction) {
+        onCancel();
+      }
+      setTimeout(() => {
+        var _a;
+        (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
+      }, 0);
+    };
+    return _jsx("button", Object.assign({
+      type: 'button',
+      style: Object.assign({
+        color
+      }, style),
+      className: clsx(bem('item', {
+        loading,
+        disabled
+      }), className),
+      onClick: onClick
+    }, {
+      children: Content
+    }), index);
+  };
+  const renderDescription = () => {
+    if (props.description) {
+      return _jsx("div", Object.assign({
+        className: clsx(bem('description'))
+      }, {
+        children: props.description
+      }));
+    }
+    return null;
+  };
+  const renderOptions = () => {
+    if (props.actions) {
+      return props.actions.map(renderOption);
+    }
+    return null;
+  };
+  return _jsx(Popup, Object.assign({
+    visible: props.visible,
+    className: clsx(bem('wrapper')),
+    position: 'bottom'
+  }, pick(props, sharedPopupProps), {
+    onClose: onCancel,
+    closeable: false
+  }, {
+    children: _jsxs("div", Object.assign({
+      className: clsx(bem(), props.className),
+      style: props.style
+    }, {
+      children: [renderHeader(), renderDescription(), _jsxs("div", Object.assign({
+        className: clsx(bem('content'))
+      }, {
+        children: [renderOptions(), props.children]
+      })), renderCancel()]
+    }))
+  }));
+};
+export default ActionSheet;

package/es/action-sheet/PropsType.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { SharedPopupProps } from '../popup/PropsType';
+import { BaseTypeProps } from '../utils';
+export declare type ActionSheetAction = {
+    /** 标题	 */
+    name?: string;
+    /** 选项文字颜色	 */
+    color?: string;
+    /** 二级标题	 */
+    subname?: string;
+    /** 是否为加载状态	 */
+    loading?: boolean;
+    /** 是否为禁用状态	 */
+    disabled?: boolean;
+    /** 点击时触发的回调函数	 */
+    callback?: (action: ActionSheetAction) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export interface ActionSheetProps extends BaseTypeProps, SharedPopupProps {
+    visible?: boolean;
+    /** 面板选项列表	 */
+    actions?: ActionSheetAction[];
+    /** 顶部标题	 */
+    title?: React.ReactNode;
+    /** 取消按钮文字	 */
+    cancelText?: React.ReactNode;
+    /** 选项上方的描述信息	 */
+    description?: React.ReactNode;
+    /** 自定义关闭图标 */
+    closeIcon?: React.ReactNode;
+    /** 是否在点击选项后关闭	 */
+    closeOnClickAction?: boolean;
+    /** 点击选项时触发，禁用或加载状态下不会触发	 */
+    onSelect?: (item: ActionSheetAction, index: number) => void;
+    /** 点击取消按钮时触发	 */
+    onCancel?: () => void;
+}

package/es/action-sheet/PropsType.js

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

package/es/action-sheet/index.d.ts

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

package/es/action-sheet/index.js

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

package/es/action-sheet/style/index.css

@@ -0,0 +1,126 @@
+:root {
+  --rv-action-sheet-max-height: 80%;
+  --rv-action-sheet-header-height: 48px;
+  --rv-action-sheet-header-font-size: var(--rv-font-size-lg);
+  --rv-action-sheet-description-color: var(--rv-gray-6);
+  --rv-action-sheet-description-font-size: var(--rv-font-size-md);
+  --rv-action-sheet-description-line-height: var(--rv-line-height-md);
+  --rv-action-sheet-item-background: var(--rv-white);
+  --rv-action-sheet-item-font-size: var(--rv-font-size-lg);
+  --rv-action-sheet-item-line-height: var(--rv-line-height-lg);
+  --rv-action-sheet-item-text-color: var(--rv-text-color);
+  --rv-action-sheet-item-disabled-text-color: var(--rv-gray-5);
+  --rv-action-sheet-subname-color: var(--rv-gray-6);
+  --rv-action-sheet-subname-font-size: var(--rv-font-size-sm);
+  --rv-action-sheet-subname-line-height: var(--rv-line-height-sm);
+  --rv-action-sheet-close-icon-size: 22px;
+  --rv-action-sheet-close-icon-color: var(--rv-gray-5);
+  --rv-action-sheet-close-icon-active-color: var(--rv-gray-6);
+  --rv-action-sheet-close-icon-padding: 0 var(--rv-padding-md);
+  --rv-action-sheet-cancel-text-color: var(--rv-gray-7);
+  --rv-action-sheet-cancel-padding-top: var(--rv-padding-xs);
+  --rv-action-sheet-cancel-padding-color: var(--rv-background-color);
+  --rv-action-sheet-loading-icon-size: 22px;
+}
+.rv-action-sheet {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--rv-action-sheet-max-height);
+  overflow: hidden;
+  color: var(--rv-action-sheet-item-text-color);
+}
+.rv-action-sheet__content {
+  flex: 1 auto;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.rv-action-sheet__item,
+.rv-action-sheet__cancel {
+  display: block;
+  width: 100%;
+  padding: 14px var(--rv-padding-md);
+  font-size: var(--rv-action-sheet-item-font-size);
+  background-color: var(--rv-action-sheet-item-background);
+  border: none;
+  cursor: pointer;
+}
+.rv-action-sheet__item:active,
+.rv-action-sheet__cancel:active {
+  background-color: var(--rv-active-color);
+}
+.rv-action-sheet__item {
+  line-height: var(--rv-action-sheet-item-line-height);
+}
+.rv-action-sheet__item--loading,
+.rv-action-sheet__item--disabled {
+  color: var(--rv-action-sheet-item-disabled-text-color);
+}
+.rv-action-sheet__item--loading:active,
+.rv-action-sheet__item--disabled:active {
+  background-color: var(--rv-action-sheet-item-background);
+}
+.rv-action-sheet__item--disabled {
+  cursor: not-allowed;
+}
+.rv-action-sheet__item--loading {
+  cursor: default;
+}
+.rv-action-sheet__cancel {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  color: var(--rv-action-sheet-cancel-text-color);
+}
+.rv-action-sheet__subname {
+  margin-top: var(--rv-padding-xs);
+  color: var(--rv-action-sheet-subname-color);
+  font-size: var(--rv-action-sheet-subname-font-size);
+  line-height: var(--rv-action-sheet-subname-line-height);
+}
+.rv-action-sheet__gap {
+  display: block;
+  height: var(--rv-action-sheet-cancel-padding-top);
+  background-color: var(--rv-action-sheet-cancel-padding-color);
+}
+.rv-action-sheet__header {
+  flex-shrink: 0;
+  font-weight: var(--rv-font-weight-bold);
+  font-size: var(--rv-action-sheet-header-font-size);
+  line-height: var(--rv-action-sheet-header-height);
+  text-align: center;
+}
+.rv-action-sheet__description {
+  position: relative;
+  flex-shrink: 0;
+  padding: 20px var(--rv-padding-md);
+  color: var(--rv-action-sheet-description-color);
+  font-size: var(--rv-action-sheet-description-font-size);
+  line-height: var(--rv-action-sheet-description-line-height);
+  text-align: center;
+}
+.rv-action-sheet__description::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: var(--rv-padding-md);
+  bottom: 0;
+  left: var(--rv-padding-md);
+  border-bottom: 1px solid var(--rv-border-color);
+  transform: scaleY(0.5);
+}
+.rv-action-sheet__loading-icon .rv-loading__spinner {
+  width: var(--rv-action-sheet-loading-icon-size);
+  height: var(--rv-action-sheet-loading-icon-size);
+}
+.rv-action-sheet__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--rv-action-sheet-close-icon-padding);
+  color: var(--rv-action-sheet-close-icon-color);
+  font-size: var(--rv-action-sheet-close-icon-size);
+  line-height: inherit;
+}
+.rv-action-sheet__close:active {
+  color: var(--rv-action-sheet-close-icon-active-color);
+}

package/es/area/Area.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AreaColumnOption, AreaProps } from './PropsType';
+declare const Area: React.ForwardRefExoticComponent<AreaProps<AreaColumnOption> & React.RefAttributes<import("../picker").PickerPopupActions>>;
+export default Area;