react-vant-nova 1.0.0-test

package/lib/field/Field.js

@@ -0,0 +1,325 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FIELD_KEY = void 0;
+function _tslib() {
+  const data = require("tslib");
+  _tslib = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _icons() {
+  const data = require("@react-vant/icons");
+  _icons = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _cell = _interopRequireDefault(require("../cell"));
+var _dialog = _interopRequireDefault(require("../dialog"));
+var _input = _interopRequireDefault(require("../input"));
+var _utils = require("../utils");
+var _constant = require("../utils/constant");
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const [bem] = (0, _utils.createNamespace)('field');
+const Field = (0, _react().forwardRef)((p, ref) => {
+  var _a;
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    clearIcon: (0, _jsxRuntime().jsx)(_icons().Clear, {}),
+    clearTrigger: 'focus',
+    formatTrigger: 'onChange',
+    defaultValue: ''
+  });
+  const inputRef = (0, _react().useRef)(null);
+  const textareaRef = (0, _react().useRef)(null);
+  const elementRef = props.type === 'textarea' ? textareaRef : inputRef;
+  const focus = () => {
+    if (elementRef.current) {
+      elementRef.current.focus();
+    }
+  };
+  const blur = () => {
+    if (elementRef.current) {
+      elementRef.current.blur();
+    }
+  };
+  const clear = () => {
+    if (elementRef.current) {
+      elementRef.current.clear();
+    }
+  };
+  (0, _react().useImperativeHandle)(ref, () => ({
+    focus,
+    blur,
+    clear,
+    get nativeElement() {
+      return elementRef.current.nativeElement;
+    }
+  }));
+  const getProp = key => {
+    if ((0, _utils.isDef)(props[key])) {
+      return props[key];
+    }
+    return null;
+  };
+  const labelStyle = () => {
+    const labelW = getProp('labelWidth');
+    if (labelW) {
+      return {
+        width: (0, _utils.addUnit)(labelW)
+      };
+    }
+    return {};
+  };
+  const formatValue = (inputValue, trigger = 'onChange') => {
+    const {
+      formatTrigger,
+      formatter
+    } = props;
+    if (formatter && trigger === formatTrigger) {
+      return formatter(inputValue);
+    }
+    return inputValue;
+  };
+  const onChange = val => {
+    var _a;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, formatValue(val));
+  };
+  const renderInput = () => {
+    const {
+      value,
+      defaultValue,
+      align,
+      type,
+      placeholder,
+      name,
+      maxLength,
+      disabled,
+      readOnly,
+      clearable,
+      clearIcon,
+      clearTrigger,
+      autoFocus,
+      onClear,
+      onBlur,
+      onFocus,
+      onKeyPress,
+      onOverlimit
+    } = props;
+    if ((0, _utils.isDef)(props.children)) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('children'))
+      }, {
+        children: props.children
+      }));
+    }
+    const commonProps = {
+      value,
+      onChange,
+      placeholder,
+      name,
+      defaultValue,
+      disabled,
+      clearable,
+      clearIcon,
+      clearTrigger,
+      onClear,
+      onBlur,
+      onFocus,
+      onKeyPress,
+      onOverlimit,
+      autoFocus,
+      readOnly,
+      maxLength,
+      onClick: props.onClickInput
+    };
+    if (type === 'textarea') {
+      return (0, _jsxRuntime().jsx)(_input.default.TextArea, Object.assign({
+        ref: textareaRef,
+        autoSize: props.autoSize,
+        showWordLimit: props.showWordLimit,
+        rows: props.rows
+      }, commonProps));
+    }
+    return (0, _jsxRuntime().jsx)(_input.default, Object.assign({
+      ref: inputRef,
+      type: type,
+      align: align
+    }, commonProps));
+  };
+  const renderLeftIcon = () => {
+    const {
+      leftIcon,
+      onClickLeftIcon
+    } = props;
+    if (!leftIcon) return null;
+    return (0, _jsxRuntime().jsx)("div", Object.assign({
+      className: (0, _clsx().default)(bem('left-icon')),
+      onClick: onClickLeftIcon
+    }, {
+      children: leftIcon
+    }));
+  };
+  const renderRightIcon = () => {
+    const {
+      rightIcon,
+      onClickRightIcon
+    } = props;
+    if (!rightIcon) return null;
+    return (0, _jsxRuntime().jsx)("div", Object.assign({
+      className: (0, _clsx().default)(bem('right-icon')),
+      onClick: onClickRightIcon
+    }, {
+      children: rightIcon
+    }));
+  };
+  const renderMessage = () => {
+    const message = props.errorMessage;
+    if (message) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('error-message'))
+      }, {
+        children: message
+      }));
+    }
+    return null;
+  };
+  const renderIntro = () => {
+    if (props.intro) {
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('intro'))
+      }, {
+        children: props.intro
+      }));
+    }
+    return null;
+  };
+  const renderTooltip = () => {
+    const {
+      tooltip
+    } = props;
+    if (tooltip) {
+      let icon = (0, _jsxRuntime().jsx)(_icons().QuestionO, {});
+      let dialogProps = {
+        message: tooltip
+      };
+      if (!(_react().default.isValidElement(tooltip) || typeof tooltip === 'string')) {
+        const _a = tooltip,
+          {
+            icon: customIcon
+          } = _a,
+          customDialogProps = (0, _tslib().__rest)(_a, ["icon"]);
+        icon = customIcon || icon;
+        dialogProps = customDialogProps;
+      }
+      return (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('tooltip')),
+        onClick: () => _dialog.default.show(dialogProps)
+      }, {
+        children: icon
+      }));
+    }
+    return null;
+  };
+  const renderLabel = () => {
+    const {
+      label,
+      colon
+    } = props;
+    if (label) {
+      return (0, _jsxRuntime().jsxs)(_jsxRuntime().Fragment, {
+        children: [label, !!colon && ':', renderTooltip()]
+      });
+    }
+    return null;
+  };
+  const {
+    size,
+    center,
+    border,
+    isLink,
+    required,
+    clickable,
+    labelAlign,
+    className,
+    labelClass,
+    valueClass,
+    controlAlign,
+    arrowDirection,
+    disabled,
+    titleStyle,
+    error
+  } = props;
+  const suffix = (_a = props.suffix) !== null && _a !== void 0 ? _a : props.button;
+  return (0, _jsxRuntime().jsxs)(_cell.default, Object.assign({
+    title: renderLabel(),
+    size: size,
+    icon: renderLeftIcon(),
+    center: center,
+    border: border,
+    isLink: isLink,
+    required: required,
+    clickable: clickable,
+    extra: props.extra,
+    titleStyle: Object.assign(Object.assign({}, labelStyle()), titleStyle),
+    valueClass: (0, _clsx().default)(bem('value', [controlAlign]), valueClass),
+    titleClass: (0, _clsx().default)(bem('label', labelAlign), labelClass),
+    arrowDirection: arrowDirection,
+    onClick: props.onClick,
+    style: props.style,
+    className: (0, _clsx().default)(bem({
+      error,
+      disabled,
+      [`label-${labelAlign}`]: labelAlign
+    }), className)
+  }, {
+    children: [(0, _jsxRuntime().jsxs)("div", Object.assign({
+      className: (0, _clsx().default)(bem('body'))
+    }, {
+      children: [props.prefix && (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('prefix'))
+      }, {
+        children: props.prefix
+      })), (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('control-wrapper'))
+      }, {
+        children: renderInput()
+      })), renderRightIcon(), suffix && (0, _jsxRuntime().jsx)("div", Object.assign({
+        className: (0, _clsx().default)(bem('suffix'))
+      }, {
+        children: suffix
+      }))]
+    })), renderMessage(), renderIntro()]
+  }));
+});
+const FIELD_KEY = exports.FIELD_KEY = Symbol('field');
+const FieldNamespace = Object.assign(Field, {
+  [_constant.COMPONENT_TYPE_KEY]: FIELD_KEY
+});
+var _default = exports.default = FieldNamespace;

package/lib/field/PropsType.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { CellProps } from '../cell/PropsType';
+import { DialogProps } from '../dialog/PropsType';
+import { TextAreaSelfProps } from '../text-area/PropsType';
+import { InputSharedProps, InputTextAlign } from '../input/PropsType';
+export declare type FieldType = 'tel' | 'text' | 'digit' | 'number' | 'search' | 'password' | 'textarea';
+export declare type FieldClearTrigger = 'always' | 'focus';
+export declare type FieldFormatTrigger = 'onBlur' | 'onChange';
+export declare type FieldAutosizeConfig = {
+    maxHeight?: number;
+    minHeight?: number;
+};
+export declare type FieldTooltipProps = Omit<DialogProps, 'visible'> & {
+    icon?: React.ReactNode;
+};
+export interface FieldCommonProps extends InputSharedProps, TextAreaSelfProps {
+    align?: InputTextAlign;
+    /** 是否将输入内容标红	 */
+    error?: boolean;
+    /** 底部错误提示文案，为空时不展示 */
+    errorMessage?: React.ReactNode;
+    /** 左侧图标名称或图片链接	 */
+    leftIcon?: React.ReactNode;
+    /** 右侧图标名称或图片链接	 */
+    rightIcon?: React.ReactNode;
+    /** 输入内容格式化函数 */
+    formatter?: (val: string | number) => string;
+    /**
+     * 格式化函数触发的时机
+     * @default 'onChange'
+     */
+    formatTrigger?: FieldFormatTrigger;
+    /**
+     * 显示清除图标的时机，
+     * always 表示输入框不为空时展示 focus 表示输入框聚焦且不为空时展示
+     * @default 'focus'
+     */
+    clearTrigger?: FieldClearTrigger;
+    /** 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效。 */
+    children?: React.ReactNode;
+}
+export interface FieldProps extends FieldCommonProps, Partial<Omit<CellProps, 'value' | 'style' | 'children'>> {
+    /** Field 类型 */
+    type?: FieldType;
+    /** 左侧文本额外类名	 */
+    labelClass?: string;
+    /** 左侧文本宽度，默认单位为 px	 */
+    labelWidth?: number | string;
+    /** 左侧文本对齐方式 */
+    labelAlign?: InputTextAlign;
+    /** 右侧输入控件容器的对齐方式 */
+    controlAlign?: InputTextAlign;
+    /** 是否在 label 后面添加冒号	 */
+    colon?: boolean;
+    /** 错误提示文案对齐方式 */
+    errorMessageAlign?: InputTextAlign;
+    /** 额外的提示信息 */
+    intro?: React.ReactNode;
+    /** 字段提示信息 */
+    tooltip?: React.ReactNode | FieldTooltipProps;
+    /** 自定义输入框尾部按钮 */
+    suffix?: React.ReactNode;
+    /** @deprecated
+     * 请使用 suffix 代替
+     */
+    button?: React.ReactNode;
+    /** 设置前置内容 */
+    prefix?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    onKeyPress?: (e: React.KeyboardEvent) => void;
+    onClickInput?: (e: React.MouseEvent) => void;
+    onClickLeftIcon?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClickRightIcon?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare type FieldInstance = {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    nativeElement: HTMLTextAreaElement | HTMLInputElement | null;
+};

package/lib/field/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/field/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Field from './Field';
+export default Field;
+export { Field };
+export type { FieldProps, FieldInstance, FieldType, FieldClearTrigger, FieldFormatTrigger, FieldAutosizeConfig, } from './PropsType';

package/lib/field/index.js

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

package/lib/field/style/index.css

@@ -0,0 +1,132 @@
+:root {
+  --rv-field-input-error-text-color: var(--rv-danger-color);
+  --rv-field-label-width: 6.2em;
+  --rv-field-label-color: var(--rv-gray-7);
+  --rv-field-label-margin-right: var(--rv-padding-sm);
+  --rv-field-icon-size: 16px;
+  --rv-field-right-icon-color: var(--rv-gray-6);
+  --rv-field-error-message-color: var(--rv-danger-color);
+  --rv-field-error-message-font-size: 12px;
+  --rv-field-disabled-text-color: var(--rv-gray-5);
+  --rv-field-required-mark-color: var(--rv-red);
+  --rv-field-intro-color: var(--rv-gray-6);
+  --rv-field-tooltip-icon-color: var(--rv-gray-5);
+}
+.rv-field .rv-field__label {
+  flex: none;
+  box-sizing: border-box;
+  width: var(--rv-field-label-width);
+  margin-right: var(--rv-field-label-margin-right);
+  color: var(--rv-field-label-color);
+  text-align: left;
+  word-wrap: break-word;
+}
+.rv-field .rv-field__label--center {
+  text-align: center;
+}
+.rv-field .rv-field__label--right {
+  text-align: right;
+}
+.rv-field .rv-field__label--required::before {
+  margin-right: 2px;
+  color: var(--rv-field-required-mark-color);
+  content: '*';
+}
+.rv-field--error .rv-input__control,
+.rv-field--error .rv-input__control::placeholder,
+.rv-field--error .rv-textarea__control,
+.rv-field--error .rv-textarea__control::placeholder {
+  color: var(--rv-field-input-error-text-color);
+  -webkit-text-fill-color: currentColor;
+}
+.rv-field--disabled .rv-field__label {
+  color: var(--rv-field-disabled-text-color);
+}
+.rv-field__value {
+  overflow: visible;
+}
+.rv-field__value--center .rv-field__children,
+.rv-field__value--center .rv-field__intro,
+.rv-field__value--center .rv-field__error-message {
+  justify-content: center;
+  text-align: center;
+}
+.rv-field__value--center .rv-input,
+.rv-field__value--center .rv-textarea {
+  text-align: center;
+}
+.rv-field__value--right .rv-field__children,
+.rv-field__value--right .rv-field__intro,
+.rv-field__value--right .rv-field__error-message {
+  justify-content: flex-end;
+  text-align: right;
+}
+.rv-field__value--right .rv-input,
+.rv-field__value--right .rv-textarea {
+  text-align: right;
+}
+.rv-field__body {
+  display: flex;
+  align-items: center;
+}
+.rv-field__children {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  min-height: var(--rv-cell-line-height);
+}
+.rv-field__control-wrapper {
+  width: 100%;
+  flex: 1;
+}
+.rv-field__icon,
+.rv-field__suffix,
+.rv-field__right-icon {
+  flex-shrink: 0;
+}
+.rv-field__right-icon {
+  margin-right: calc(var(--rv-padding-xs) * -1);
+  padding: 0 var(--rv-padding-xs);
+  box-sizing: content-box;
+}
+.rv-field__left-icon .rv-icon,
+.rv-field__right-icon .rv-icon {
+  display: block;
+  font-size: var(--rv-field-icon-size);
+  line-height: inherit;
+}
+.rv-field__left-icon {
+  margin-right: var(--rv-padding-base);
+}
+.rv-field__right-icon {
+  color: var(--rv-field-right-icon-color);
+}
+.rv-field__prefix {
+  padding-right: var(--rv-padding-xs);
+}
+.rv-field__suffix {
+  padding-left: var(--rv-padding-xs);
+}
+.rv-field__error-message {
+  color: var(--rv-field-error-message-color);
+  font-size: var(--rv-field-error-message-font-size);
+  line-height: 1.4em;
+  display: flex;
+  justify-content: flex-start;
+  text-align: left;
+}
+.rv-field__tooltip {
+  display: inline-block;
+  margin-left: 2px;
+  color: var(--rv-field-intro-color);
+  font-weight: bold;
+  vertical-align: middle;
+}
+.rv-field__intro {
+  color: var(--rv-field-intro-color);
+  font-size: var(--rv-field-error-message-font-size);
+  line-height: 1.4em;
+  text-align: left;
+  display: flex;
+  justify-content: flex-start;
+}

package/lib/flex/Flex.d.ts

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

package/lib/flex/Flex.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _tslib() {
+  const data = require("tslib");
+  _tslib = function () {
+    return data;
+  };
+  return data;
+}
+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 _FlexContext = _interopRequireDefault(require("./FlexContext"));
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+const [bem] = (0, _utils.createNamespace)('flexbox');
+const Flex = props => {
+  const {
+      direction,
+      wrap,
+      justify,
+      align,
+      gutter = 0,
+      style,
+      className,
+      children
+    } = props,
+    rest = (0, _tslib().__rest)(props, ["direction", "wrap", "justify", "align", "gutter", "style", "className", "children"]);
+  const getGutter = (0, _react().useMemo)(() => Array.isArray(gutter) ? gutter : [gutter, gutter], [gutter]);
+  const rowStyle = Object.assign(Object.assign(Object.assign({}, getGutter[0] > 0 ? {
+    marginLeft: getGutter[0] / -2,
+    marginRight: getGutter[0] / -2
+  } : {}), getGutter[1] > 0 ? {
+    marginTop: getGutter[1] / -2,
+    marginBottom: getGutter[1] / -2
+  } : {}), style);
+  const wrapCls = (0, _clsx().default)(className, bem([direction, wrap, justify ? `justify-${justify}` : false, align ? `align-${align}` : false]));
+  return (0, _jsxRuntime().jsx)(_FlexContext.default.Provider, Object.assign({
+    value: {
+      gutter: getGutter
+    }
+  }, {
+    children: (0, _jsxRuntime().jsx)("div", Object.assign({
+      className: wrapCls,
+      style: rowStyle
+    }, rest, {
+      children: children
+    }))
+  }));
+};
+var _default = exports.default = Flex;

package/lib/flex/FlexContext.d.ts

@@ -0,0 +1,6 @@
+import { Context } from 'react';
+export interface FlexContextState {
+    gutter?: [number, number];
+}
+declare const FlexContext: Context<FlexContextState>;
+export default FlexContext;

package/lib/flex/FlexContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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); }
+const FlexContext = (0, _react().createContext)({});
+var _default = exports.default = FlexContext;

package/lib/flex/FlexItem.d.ts

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