antd-mobile 5.8.1 → 5.9.1

package/2x/cjs/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ButtonProps = {
     color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
@@ -11,5 +11,21 @@ export declare type ButtonProps = {
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     type?: 'submit' | 'reset' | 'button';
     shape?: 'default' | 'rounded' | 'rectangular';
+    children?: React.ReactNode;
 } & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
-export declare const Button: FC<ButtonProps>;
+export declare type ButtonRef = {
+    nativeElement: HTMLButtonElement | null;
+};
+export declare const Button: React.ForwardRefExoticComponent<{
+    color?: "default" | "primary" | "success" | "warning" | "danger" | undefined;
+    fill?: "none" | "solid" | "outline" | undefined;
+    size?: "small" | "large" | "middle" | "mini" | undefined;
+    block?: boolean | undefined;
+    loading?: boolean | undefined;
+    loadingText?: string | undefined;
+    disabled?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    type?: "reset" | "submit" | "button" | undefined;
+    shape?: "default" | "rounded" | "rectangular" | undefined;
+    children?: React.ReactNode;
+} & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;

package/2x/cjs/components/button/button.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Button = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -17,6 +17,10 @@ var _nativeProps = require("../../utils/native-props");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const classPrefix = `adm-button`;
 const defaultProps = {
   color: 'default',
@@ -27,11 +31,18 @@ const defaultProps = {
   shape: 'default',
   size: 'middle'
 };
-
-const Button = p => {
+const Button = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const disabled = props.disabled || props.loading;
+  const nativeButtonRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    get nativeElement() {
+      return nativeButtonRef.current;
+    }
+
+  }));
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("button", {
+    ref: nativeButtonRef,
     type: props.type,
     onClick: props.onClick,
     className: (0, _classnames.default)(classPrefix, props.color ? `${classPrefix}-${props.color}` : null, {
@@ -50,6 +61,5 @@ const Button = p => {
   }, _react.default.createElement(_dotLoading.default, {
     color: 'currentColor'
   }), props.loadingText) : props.children));
-};
-
+});
 exports.Button = Button;

package/2x/cjs/components/button/index.d.ts

@@ -1,4 +1,4 @@
 import './button.less';
 import { Button } from './button';
-export type { ButtonProps } from './button';
+export type { ButtonProps, ButtonRef } from './button';
 export default Button;

package/2x/cjs/components/form/context.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormLayout } from '.';
 import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
 export declare type FormContextType = {
+    name?: string;
     hasFeedback: boolean;
     layout: FormLayout;
     requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';

package/2x/cjs/components/form/context.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultFormContext = {
+  name: undefined,
   hasFeedback: true,
   layout: 'vertical',
   requiredMarkStyle: 'asterisk'

package/2x/cjs/components/form/form-item.js

@@ -163,11 +163,12 @@ const FormItem = props => {
     arrow
   } = props,
         fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "clickable", "arrow"]);
-
+  const {
+    name: formName
+  } = (0, _react.useContext)(_context.FormContext);
   const {
     validateTrigger: contextValidateTrigger
-  } = _react.default.useContext(_FieldContext.default);
-
+  } = (0, _react.useContext)(_FieldContext.default);
   const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
 
   const updateRef = _react.default.useRef(0);
@@ -281,7 +282,8 @@ const FormItem = props => {
   }), (control, meta, context) => {
     let childNode = null;
     const isRequired = required !== undefined ? required : rules && rules.some(rule => !!(rule && typeof rule === 'object' && rule.required));
-    const fieldId = ((0, _utils.toArray)(name).length && meta ? meta.name : []).join('_');
+    const nameList = (0, _utils.toArray)(name).length && meta ? meta.name : [];
+    const fieldId = (nameList.length > 0 && formName ? [formName, ...nameList] : nameList).join('_');
 
     if (shouldUpdate && dependencies) {
       (0, _devLog.devWarning)('Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together.");

package/2x/cjs/components/form/form.js

@@ -95,6 +95,7 @@ const Form = (0, _react.forwardRef)((p, ref) => {
     validateMessages: validateMessages
   }), _react.default.createElement(_context.FormContext.Provider, {
     value: {
+      name: formProps.name,
       hasFeedback,
       layout,
       requiredMarkStyle

package/2x/cjs/components/image-uploader/image-uploader.js

@@ -172,7 +172,8 @@ const ImageUploader = p => {
     className: classPrefix
   }, _react.default.createElement(_space.default, {
     className: `${classPrefix}-space`,
-    wrap: true
+    wrap: true,
+    block: true
   }, value.map((fileItem, index) => {
     var _a, _b;
 

package/2x/cjs/components/picker/picker-utils.d.ts

@@ -0,0 +1,2 @@
+import { PickerColumnItem } from '../picker-view';
+export declare const defaultRenderLabel: (item: PickerColumnItem) => import("react").ReactNode;

package/2x/cjs/components/picker/picker-utils.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultRenderLabel = void 0;
+
+const defaultRenderLabel = item => item.label;
+
+exports.defaultRenderLabel = defaultRenderLabel;

package/2x/cjs/components/picker/picker.d.ts

@@ -16,5 +16,6 @@ export declare type PickerProps = {
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
+    renderLabel?: (item: PickerColumnItem) => ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/2x/cjs/components/picker/picker.js

@@ -25,6 +25,8 @@ var _ahooks = require("ahooks");
 
 var _safeArea = _interopRequireDefault(require("../safe-area"));
 
+var _pickerUtils = require("./picker-utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -34,7 +36,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const classPrefix = `adm-picker`;
 const defaultProps = {
   defaultValue: [],
-  closeOnMaskClick: true
+  closeOnMaskClick: true,
+  renderLabel: _pickerUtils.defaultRenderLabel
 };
 const Picker = (0, _react.memo)(p => {
   var _a;
@@ -101,6 +104,7 @@ const Picker = (0, _react.memo)(p => {
     className: `${classPrefix}-body`
   }, _react.default.createElement(_pickerView.default, {
     columns: props.columns,
+    renderLabel: props.renderLabel,
     value: innerValue,
     onChange: onChange
   }))));

package/2x/cjs/components/picker-view/picker-view.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { PickerProps } from '../picker';
 export declare type PickerValue = string | null;
 export declare type PickerValueExtend = {
     columns: PickerColumnItem[][];
@@ -15,5 +16,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
+} & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/2x/cjs/components/picker-view/picker-view.js

@@ -17,13 +17,16 @@ var _nativeProps = require("../../utils/native-props");
 
 var _ahooks = require("ahooks");
 
+var _pickerUtils = require("../picker/picker-utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const classPrefix = `adm-picker-view`;
 const defaultProps = {
-  defaultValue: []
+  defaultValue: [],
+  renderLabel: _pickerUtils.defaultRenderLabel
 };
 const PickerView = (0, _react.memo)(p => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
@@ -72,7 +75,8 @@ const PickerView = (0, _react.memo)(p => {
     index: index,
     column: column,
     value: innerValue[index],
-    onSelect: handleSelect
+    onSelect: handleSelect,
+    renderLabel: props.renderLabel
   })), _react.default.createElement("div", {
     className: `${classPrefix}-mask`
   }, _react.default.createElement("div", {

package/2x/cjs/components/picker-view/wheel.d.ts

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { PickerColumnItem, PickerValue } from './index';
-interface Props {
+declare type Props = {
     index: number;
     column: PickerColumnItem[];
     value: PickerValue;
     onSelect: (value: PickerValue, index: number) => void;
-}
+    renderLabel: (item: PickerColumnItem) => ReactNode;
+};
 export declare const Wheel: React.NamedExoticComponent<Props>;
 export {};

package/2x/cjs/components/picker-view/wheel.js

@@ -31,7 +31,8 @@ const classPrefix = `adm-picker-view`;
 const Wheel = (0, _react.memo)(props => {
   const {
     value,
-    column
+    column,
+    renderLabel
   } = props;
 
   function onSelect(val) {
@@ -177,7 +178,7 @@ const Wheel = (0, _react.memo)(props => {
       "aria-label": selected ? 'active' : ''
     }, _react.default.createElement("div", {
       className: `${classPrefix}-column-item-label`
-    }, item.label));
+    }, renderLabel(item)));
   })), renderAccessible());
 }, (prev, next) => {
   if (prev.index !== next.index) return false;

package/2x/cjs/components/popover/popover.js

@@ -149,7 +149,6 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
     if (!props.trigger) return;
 
     function handleClick() {
-      console.log('handleClick');
       setVisible(v => !v);
     }
 

package/2x/cjs/components/swipe-action/swipe-action.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type SwipeActionRef = {
     close: () => void;
     show: (side?: 'left' | 'right') => void;
@@ -18,6 +19,7 @@ export declare type SwipeActionProps = {
     closeOnTouchOutside?: boolean;
     closeOnAction?: boolean;
     children: ReactNode;
+    stopPropagation?: PropagationEvent[];
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -26,5 +28,6 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnTouchOutside?: boolean | undefined;
     closeOnAction?: boolean | undefined;
     children: ReactNode;
+    stopPropagation?: "click"[] | undefined;
 } & NativeProps<"--background"> & React.RefAttributes<SwipeActionRef>>;
 export {};

package/2x/cjs/components/swipe-action/swipe-action.js

@@ -19,6 +19,8 @@ var _nearest = require("../../utils/nearest");
 
 var _nativeProps = require("../../utils/native-props");
 
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,7 +31,8 @@ const defaultProps = {
   rightActions: [],
   leftActions: [],
   closeOnTouchOutside: true,
-  closeOnAction: true
+  closeOnAction: true,
+  stopPropagation: []
 };
 const SwipeAction = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
@@ -187,10 +190,10 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     style: {
       x
     }
-  }, _react.default.createElement("div", {
+  }, (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, _react.default.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
     ref: leftRef
-  }, props.leftActions.map(renderAction)), _react.default.createElement("div", {
+  }, props.leftActions.map(renderAction))), _react.default.createElement("div", {
     className: 'adm-swipe-action-content',
     onClickCapture: e => {
       if (x.goal !== 0) {
@@ -205,10 +208,10 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     style: {
       pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'unset')
     }
-  }, props.children)), _react.default.createElement("div", {
+  }, props.children)), (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, _react.default.createElement("div", {
     className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
     ref: rightRef
-  }, props.rightActions.map(renderAction)))));
+  }, props.rightActions.map(renderAction))))));
 });
 exports.SwipeAction = SwipeAction;
 const colorRecord = {

package/2x/cjs/locales/es-ES.d.ts

@@ -0,0 +1,102 @@
+declare const esES: {
+    locale: string;
+    common: {
+        confirm: string;
+        cancel: string;
+        loading: string;
+    };
+    Calendar: {
+        markItems: string[];
+        renderYearAndMonth: (year: number, month: number) => string;
+    };
+    Cascader: {
+        placeholder: string;
+    };
+    Dialog: {
+        ok: string;
+    };
+    ErrorBlock: {
+        default: {
+            title: string;
+            description: string;
+        };
+        busy: {
+            title: string;
+            description: string;
+        };
+        disconnected: {
+            title: string;
+            description: string;
+        };
+        empty: {
+            title: string;
+            description: string;
+        };
+    };
+    Form: {
+        required: string;
+        optional: string;
+        defaultValidateMessages: {
+            default: string;
+            required: string;
+            enum: string;
+            whitespace: string;
+            date: {
+                format: string;
+                parse: string;
+                invalid: string;
+            };
+            types: {
+                string: string;
+                method: string;
+                array: string;
+                object: string;
+                number: string;
+                date: string;
+                boolean: string;
+                integer: string;
+                float: string;
+                regexp: string;
+                email: string;
+                url: string;
+                hex: string;
+            };
+            string: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            number: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            array: {
+                len: string;
+                min: string;
+                max: string;
+                range: string;
+            };
+            pattern: {
+                mismatch: string;
+            };
+        };
+    };
+    ImageUploader: {
+        uploading: string;
+    };
+    Mask: {
+        name: string;
+    };
+    Modal: {
+        ok: string;
+    };
+    PullToRefresh: {
+        pulling: string;
+        canRelease: string;
+        complete: string;
+    };
+};
+export default esES;

package/2x/cjs/locales/es-ES.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _mergeLocale = require("../utils/merge-locale");
+
+var _base = require("./base");
+
+const typeTemplate = '${label} no es un ${type} válido';
+const esES = (0, _mergeLocale.mergeLocale)(_base.base, {
+  locale: 'es',
+  common: {
+    confirm: 'Confirmar',
+    cancel: 'Cancelar',
+    loading: 'Cargando...'
+  },
+  Calendar: {
+    markItems: ['Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab', 'Dom'],
+    renderYearAndMonth: (year, month) => `${year}/${month}`
+  },
+  Cascader: {
+    placeholder: 'Seleccionando'
+  },
+  Dialog: {
+    ok: 'OK'
+  },
+  ErrorBlock: {
+    default: {
+      title: 'Oops, algo salió mal',
+      description: 'Por favor espere un minuto e intente nuevamente'
+    },
+    busy: {
+      title: 'Oops, no está cargando',
+      description: 'Intente refrescar la página'
+    },
+    disconnected: {
+      title: 'La red se encuentra ocupada',
+      description: 'Intente refrescar la página'
+    },
+    empty: {
+      title: 'Hmm, no pudimos encontrar eso...',
+      description: 'Quieres intentar una nueva búsqueda?'
+    }
+  },
+  Form: {
+    required: 'Requerido',
+    optional: 'Opcional',
+    defaultValidateMessages: {
+      default: 'Error de validación para el campo ${label}',
+      required: 'Por favor ingrese ${label}',
+      enum: '${label} debe ser uno de los siguientes [${enum}]',
+      whitespace: '${label} no puede ser un caracter en blanco',
+      date: {
+        format: '${label} el formato de fecha es inválido',
+        parse: '${label} no puede ser convertido a fecha',
+        invalid: '${label} no es una fecha válida'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label} debe tener ${len} caracteres',
+        min: '${label} debe tener al menos ${min} caracteres',
+        max: '${label} debe tener como mucho ${max} caracteres',
+        range: '${label} debe tener entre ${min}-${max} caracteres'
+      },
+      number: {
+        len: '${label} debe ser igual a ${len}',
+        min: '${label} debe ser mínimo ${min}',
+        max: '${label} debe ser máximo ${max}',
+        range: '${label} debe ser entre ${min}-${max}'
+      },
+      array: {
+        len: 'Debe ser ${len} ${label}',
+        min: 'Al menos ${min} ${label}',
+        max: 'Como mucho ${max} ${label}',
+        range: 'La cantidad de ${label} debe ser entre ${min}-${max}'
+      },
+      pattern: {
+        mismatch: '${label} no coincide con el patrón ${pattern}'
+      }
+    }
+  },
+  ImageUploader: {
+    uploading: 'Subiendo...'
+  },
+  Mask: {
+    name: 'Máscara'
+  },
+  Modal: {
+    ok: 'OK'
+  },
+  PullToRefresh: {
+    pulling: 'Desplácese hacia abajo para refrescar',
+    canRelease: 'Suelte para refrescar inmediatamente',
+    complete: 'Refrescó exitosamente'
+  }
+});
+var _default = esES;
+exports.default = _default;

package/2x/cjs/utils/measure-css-length.d.ts

@@ -1 +1 @@
-export declare function measureCSSLength(raw: string): number;
+export declare function measureCSSLength(raw: string | undefined | null): number;

package/2x/cjs/utils/measure-css-length.js

@@ -10,6 +10,14 @@ var _isDev = require("./is-dev");
 var _devLog = require("./dev-log");
 
 function measureCSSLength(raw) {
+  if (raw === null || raw === undefined) {
+    if (_isDev.isDev) {
+      (0, _devLog.devError)('Global', 'Seems like the you will encounter a style messed problem. Please check the browser environment to make sure it supports CSS variables.');
+    }
+
+    return 0;
+  }
+
   const withUnit = raw.trim();
 
   if (withUnit.endsWith('px')) {

package/2x/es/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ButtonProps = {
     color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
@@ -11,5 +11,21 @@ export declare type ButtonProps = {
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     type?: 'submit' | 'reset' | 'button';
     shape?: 'default' | 'rounded' | 'rectangular';
+    children?: React.ReactNode;
 } & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
-export declare const Button: FC<ButtonProps>;
+export declare type ButtonRef = {
+    nativeElement: HTMLButtonElement | null;
+};
+export declare const Button: React.ForwardRefExoticComponent<{
+    color?: "default" | "primary" | "success" | "warning" | "danger" | undefined;
+    fill?: "none" | "solid" | "outline" | undefined;
+    size?: "small" | "large" | "middle" | "mini" | undefined;
+    block?: boolean | undefined;
+    loading?: boolean | undefined;
+    loadingText?: string | undefined;
+    disabled?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    type?: "reset" | "submit" | "button" | undefined;
+    shape?: "default" | "rounded" | "rectangular" | undefined;
+    children?: React.ReactNode;
+} & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;

package/2x/es/components/button/button.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import DotLoading from '../dot-loading';
 import { mergeProps } from '../../utils/with-default-props';
@@ -13,10 +13,18 @@ const defaultProps = {
   shape: 'default',
   size: 'middle'
 };
-export const Button = p => {
+export const Button = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
   const disabled = props.disabled || props.loading;
+  const nativeButtonRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    get nativeElement() {
+      return nativeButtonRef.current;
+    }
+
+  }));
   return withNativeProps(props, React.createElement("button", {
+    ref: nativeButtonRef,
     type: props.type,
     onClick: props.onClick,
     className: classNames(classPrefix, props.color ? `${classPrefix}-${props.color}` : null, {
@@ -35,4 +43,4 @@ export const Button = p => {
   }, React.createElement(DotLoading, {
     color: 'currentColor'
   }), props.loadingText) : props.children));
-};
+});

package/2x/es/components/button/index.d.ts

@@ -1,4 +1,4 @@
 import './button.less';
 import { Button } from './button';
-export type { ButtonProps } from './button';
+export type { ButtonProps, ButtonRef } from './button';
 export default Button;