react-vant-nova 1.0.0-test

package/lib/cascader/PropsType.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { PickerPopupActions } from '../picker/PropsType';
+import { SharedPopupProps } from '../popup/PropsType';
+import { BaseTypeProps } from '../utils';
+export declare type CascaderOption = {
+    /** 选项文字 */
+    text?: React.ReactNode;
+    /** 选项对应的值 */
+    value?: string | number;
+    /** 选项文字颜色	 */
+    color?: string;
+    /** 是否禁用选项	 */
+    disabled?: boolean;
+    /** 子选项列表	 */
+    children?: CascaderOption[];
+    /** 为对应列添加额外的 class	 */
+    className?: unknown;
+    [key: string]: any;
+};
+export declare type CascaderTab = {
+    options: CascaderOption[];
+    selectedOption: CascaderOption | null;
+};
+export declare type CascaderFieldNames = {
+    text?: string;
+    value?: string;
+    children?: string;
+};
+export interface CascaderProps extends Omit<BaseTypeProps, 'children'> {
+    /** 顶部标题	 */
+    title?: React.ReactNode;
+    /** 是否显示关闭图标	 */
+    closeable?: boolean;
+    /** 是否开启手势左右滑动切换	 */
+    swipeable?: boolean;
+    /** 选中项 */
+    value?: string[];
+    /** 默认选中项 */
+    defaultValue?: string[];
+    /** 自定义 options 结构中的字段	 */
+    fieldNames?: CascaderFieldNames;
+    /** 未选中时的提示文案	 */
+    placeholder?: string;
+    /** 选中状态的高亮颜色	 */
+    activeColor?: string;
+    /** 可选项数据源	 */
+    options?: CascaderOption[];
+    /** 自定义选项文字	 */
+    optionRender?: ({ option, selected, }: {
+        option: CascaderOption;
+        selected: boolean;
+    }) => React.ReactNode;
+    /** 关闭图标 */
+    closeIcon?: React.ReactNode;
+    /** 点击关闭图标时触发	 */
+    onClose?: () => void;
+    /** 选中项变化时触发	 */
+    onChange?: (value: string[], selectedRows: CascaderOption[]) => void;
+    /** 全部选项选择完成后触发	 */
+    onFinish?: (value: string[], selectedRows: CascaderOption[]) => void;
+    /** 点击标签时触发 */
+    onClickTab?: (tabIndex: number) => void;
+}
+export interface PopupCascaderProps extends CascaderProps {
+    visible?: boolean;
+    popup?: boolean | Omit<SharedPopupProps, 'closeable'>;
+    children?: (value: string[], selectedRows: CascaderOption[], actions: PickerPopupActions) => React.ReactNode;
+}

package/lib/cascader/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cascader/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Cascader from './Cascader';
+export default Cascader;
+export { Cascader };
+export type { CascaderProps, CascaderOption, CascaderFieldNames, } from './PropsType';

package/lib/cascader/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Cascader", {
+  enumerable: true,
+  get: function () {
+    return _Cascader.default;
+  }
+});
+exports.default = void 0;
+require("./style/index.css");
+var _Cascader = _interopRequireDefault(require("./Cascader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Cascader.default;

package/lib/cascader/style/index.css

@@ -0,0 +1,90 @@
+:root {
+  --rv-cascader-header-height: 48px;
+  --rv-cascader-header-padding: 0 var(--rv-padding-md);
+  --rv-cascader-title-font-size: var(--rv-font-size-lg);
+  --rv-cascader-title-line-height: 20px;
+  --rv-cascader-close-icon-size: 22px;
+  --rv-cascader-close-icon-color: var(--rv-gray-5);
+  --rv-cascader-close-icon-active-color: var(--rv-gray-6);
+  --rv-cascader-selected-icon-size: 18px;
+  --rv-cascader-tabs-height: 48px;
+  --rv-cascader-active-color: var(--rv-primary-color);
+  --rv-cascader-options-height: 384px;
+  --rv-cascader-option-disabled-color: var(--rv-gray-5);
+  --rv-cascader-tab-color: var(--rv-text-color);
+  --rv-cascader-unselected-tab-color: var(--rv-gray-6);
+}
+.rv-cascader__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--rv-cascader-header-height);
+  padding: var(--rv-cascader-header-padding);
+}
+.rv-cascader__title {
+  font-weight: var(--rv-font-weight-bold);
+  font-size: var(--rv-cascader-title-font-size);
+  line-height: var(--rv-cascader-title-line-height);
+}
+.rv-cascader__close-icon {
+  color: var(--rv-cascader-close-icon-color);
+  font-size: var(--rv-cascader-close-icon-size);
+}
+.rv-cascader__close-icon:active {
+  color: var(--rv-cascader-close-icon-active-color);
+}
+.rv-cascader__close-icon .rv-icon {
+  display: block;
+}
+.rv-cascader__tabs .rv-tab {
+  flex: none;
+  padding: 0 10px;
+}
+.rv-cascader__tabs.rv-tabs--line .rv-tabs__wrap {
+  height: var(--rv-cascader-tabs-height);
+}
+.rv-cascader__tabs .rv-tabs__nav--complete {
+  padding-right: 6px;
+  padding-left: 6px;
+}
+.rv-cascader__tab {
+  color: var(--rv-cascader-tab-color);
+  font-weight: var(--rv-font-weight-bold);
+}
+.rv-cascader__tab--unselected {
+  color: var(--rv-cascader-unselected-tab-color);
+  font-weight: normal;
+}
+.rv-cascader__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px var(--rv-padding-md);
+  font-size: var(--rv-font-size-md);
+  line-height: var(--rv-line-height-md);
+  cursor: pointer;
+}
+.rv-cascader__option:active {
+  background-color: var(--rv-active-color);
+}
+.rv-cascader__option--selected {
+  color: var(--rv-cascader-active-color);
+  font-weight: var(--rv-font-weight-bold);
+}
+.rv-cascader__option--disabled {
+  color: var(--rv-cascader-option-disabled-color);
+  cursor: not-allowed;
+}
+.rv-cascader__option--disabled:active {
+  background-color: transparent;
+}
+.rv-cascader__selected-icon {
+  font-size: var(--rv-cascader-selected-icon-size);
+}
+.rv-cascader__options {
+  box-sizing: border-box;
+  height: var(--rv-cascader-options-height);
+  padding-top: 6px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}

package/lib/cascader/useCascaderExtend.d.ts

@@ -0,0 +1,12 @@
+import type { CascaderProps } from './PropsType';
+declare type KeysProps = {
+    textKey: string;
+    valueKey: string;
+    childrenKey: string;
+};
+export declare function useCascaderExtend(options: CascaderProps['options'], keys: KeysProps, value: string[]): {
+    tabs: import("./PropsType").CascaderOption[][];
+    items: import("./PropsType").CascaderOption[];
+    depth: number;
+};
+export {};

package/lib/cascader/useCascaderExtend.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCascaderExtend = useCascaderExtend;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function useCascaderExtend(options, keys, value) {
+  const {
+    childrenKey,
+    valueKey
+  } = keys;
+  const depth = (0, _react().useMemo)(() => {
+    let depth = 0;
+    function traverse(options, currentDepth) {
+      if (currentDepth > depth) depth = currentDepth;
+      const nextDepth = currentDepth + 1;
+      options.forEach(option => {
+        if (option[childrenKey]) {
+          traverse(option[childrenKey], nextDepth);
+        }
+      });
+    }
+    traverse(options, 1);
+    return depth;
+  }, [options, childrenKey]);
+  const tabs = (0, _react().useMemo)(() => {
+    var _a;
+    if (!value || !value.length) {
+      return (_a = [options]) !== null && _a !== void 0 ? _a : [];
+    }
+    return value.reduce((a, v, i) => {
+      if (!v) return a;
+      const next = a[i].find(option => option[valueKey] === value[i]);
+      if (next && next[childrenKey]) a.push(next[childrenKey]);
+      return a;
+    }, [options]);
+  }, [value, childrenKey, valueKey, options]);
+  const items = (0, _react().useMemo)(() => {
+    return value.map((val, i) => {
+      var _a;
+      const item = (_a = tabs[i].find(tab => tab[valueKey] === val)) !== null && _a !== void 0 ? _a : undefined;
+      return item;
+    });
+  }, [value, valueKey, tabs]);
+  return {
+    tabs,
+    items,
+    depth
+  };
+}

package/lib/cell/Cell.d.ts

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

package/lib/cell/Cell.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+function _icons() {
+  const data = require("@react-vant/icons");
+  _icons = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [bem] = (0, _utils.createNamespace)('cell');
+const Cell = props => {
+  const renderLabel = () => {
+    const showLabel = (0, _utils.isDef)(props.label);
+    if (showLabel) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('label'), props.labelClass)
+      }, {
+        children: props.label
+      }));
+    }
+    return null;
+  };
+  const renderTitle = () => {
+    if ((0, _utils.isDef)(props.title)) {
+      return (0, _jsxRuntime().jsxs)("div", Object.assign({
+        className: (0, _clsx().default)(bem('title'), props.titleClass),
+        style: props.titleStyle
+      }, {
+        children: [props.title, renderLabel()]
+      }));
+    }
+    return null;
+  };
+  const renderValue = () => {
+    const hasTitle = (0, _utils.isDef)(props.title);
+    const hasValue = (0, _utils.isDef)(props.children) || (0, _utils.isDef)(props.value);
+    if (hasValue) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('value', {
+          alone: !hasTitle
+        }), props.valueClass)
+      }, {
+        children: (0, _utils.isDef)(props.children) ? props.children : (0, _jsxRuntime().jsx)("span", {
+          children: props.value
+        })
+      }));
+    }
+    return null;
+  };
+  const renderLeftIcon = () => {
+    var _a, _b, _c;
+    // @ts-ignore
+    if (props.icon) {
+      return _react().default.cloneElement(props.icon, {
+        // @ts-ignore
+        className: (0, _clsx().default)((_c = (_b = (_a = props.icon) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.className) !== null && _c !== void 0 ? _c : '', bem('left-icon'))
+      });
+    }
+    return null;
+  };
+  const renderRightIcon = () => {
+    if (props.rightIcon) {
+      return props.rightIcon;
+    }
+    if (props.isLink) {
+      const className = (0, _clsx().default)(bem('right-icon'));
+      if (props.arrowDirection === 'left') return (0, _jsxRuntime().jsx)(_icons().ArrowLeft, {
+        className: className
+      });
+      if (props.arrowDirection === 'up') return (0, _jsxRuntime().jsx)(_icons().ArrowUp, {
+        className: className
+      });
+      if (props.arrowDirection === 'down') return (0, _jsxRuntime().jsx)(_icons().ArrowDown, {
+        className: className
+      });
+      return (0, _jsxRuntime().jsx)(_icons().Arrow, {
+        className: className
+      });
+    }
+    return null;
+  };
+  const {
+    className,
+    style,
+    size,
+    center,
+    border = true,
+    isLink,
+    required,
+    onClick
+  } = props;
+  const clickable = isLink || props.clickable;
+  const classes = {
+    center,
+    required,
+    clickable,
+    borderless: !border
+  };
+  if (size) {
+    classes[size] = !!size;
+  }
+  return (0, _jsxRuntime().jsxs)("div", Object.assign({
+    style: style,
+    className: (0, _clsx().default)(bem(classes), className),
+    role: clickable ? 'button' : undefined,
+    onClick: onClick
+  }, {
+    children: [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), props.extra]
+  }));
+};
+var _default = exports.default = Cell;

package/lib/cell/CellGroup.d.ts

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

package/lib/cell/CellGroup.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _constant = require("../utils/constant");
+var _utils = require("../utils");
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [bem] = (0, _utils.createNamespace)('cell-group');
+const CellGroup = p => {
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    border: true
+  });
+  const {
+    title,
+    border,
+    inset: insetP,
+    card
+  } = props;
+  const inset = card || insetP;
+  const renderGroup = () => (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: (0, _clsx().default)(bem({
+      inset
+    }), {
+      [_constant.BORDER_TOP_BOTTOM]: !inset && border
+    })
+  }, {
+    children: props.children
+  }));
+  const renderTitle = () => {
+    if (title) return (0, _jsxRuntime().jsx)("div", Object.assign({
+      className: (0, _clsx().default)(bem('title'))
+    }, {
+      children: title
+    }));
+    return null;
+  };
+  return (0, _jsxRuntime().jsxs)("div", Object.assign({
+    className: props.className,
+    style: props.style
+  }, {
+    children: [renderTitle(), renderGroup()]
+  }));
+};
+var _default = exports.default = CellGroup;

package/lib/cell/PropsType.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
+export interface CellProps extends BaseTypeProps {
+    /** 左侧标题	*/
+    title?: React.ReactNode;
+    /** 右侧内容 */
+    value?: number | string | React.ReactNode;
+    /**  标题下方的描述信息	*/
+    label?: React.ReactNode;
+    /** 单元格大小 */
+    size?: 'large';
+    /** 是否使内容垂直居中	  */
+    center?: boolean;
+    /**  是否展示右侧箭头并开启点击反馈	*/
+    isLink?: boolean;
+    /** 是否显示表单必填星号	 */
+    required?: boolean;
+    /** 是否开启点击反馈	 */
+    clickable?: boolean;
+    /** 左侧标题额外样式	 */
+    titleStyle?: React.CSSProperties;
+    /** 左侧标题额外类名	 */
+    titleClass?: string;
+    /** 右侧内容额外类名	 */
+    valueClass?: string;
+    /** 描述信息额外类名	 */
+    labelClass?: string;
+    /** 箭头方向 */
+    arrowDirection?: CellArrowDirection;
+    /** 是否显示内边框	 */
+    border?: boolean;
+    /** 自定义左侧图标 */
+    icon?: React.ReactNode;
+    /** 右侧自定义图标 */
+    rightIcon?: React.ReactNode;
+    /** 自定义单元格最右侧的额外内容 */
+    extra?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export interface CellGroupProps extends BaseTypeProps {
+    /** 分组标题	 */
+    title?: React.ReactNode;
+    /** 是否显示外边框	 */
+    border?: boolean;
+    /**
+     * 是否展示为圆角卡片风格
+     * @deprecated
+     */
+    inset?: boolean;
+    /** 是否展示为圆角卡片风格 */
+    card?: boolean;
+}

package/lib/cell/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cell/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './style/index.less';
+import CellGroup from './CellGroup';
+declare const Cell: import("react").FC<import("./PropsType").CellProps> & {
+    Group: import("react").FC<import("./PropsType").CellGroupProps>;
+};
+export default Cell;
+export { Cell, CellGroup };
+export type { CellProps, CellGroupProps, CellArrowDirection } from './PropsType';

package/lib/cell/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Cell = void 0;
+Object.defineProperty(exports, "CellGroup", {
+  enumerable: true,
+  get: function () {
+    return _CellGroup.default;
+  }
+});
+exports.default = void 0;
+require("./style/index.css");
+var _CellGroup = _interopRequireDefault(require("./CellGroup"));
+var _Cell2 = _interopRequireDefault(require("./Cell"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Cell = exports.Cell = Object.assign(_Cell2.default, {
+  Group: _CellGroup.default
+});
+var _default = exports.default = Cell;