antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

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

@@ -1,8 +1,13 @@
 import React from 'react';
 import { FormLayout } from '.';
+import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
 export declare type FormContextType = {
     hasFeedback: boolean;
     layout: FormLayout;
 };
 export declare const DEFAULT_FORM_CONTEXT: FormContextType;
 export declare const FormContext: React.Context<FormContextType>;
+export declare type OnSubMetaChange = (meta: Meta & {
+    destroy?: boolean;
+}, namePath: InternalNamePath) => void;
+export declare const NoStyleItemContext: React.Context<OnSubMetaChange | null>;

package/cjs/components/form/context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FormContext = exports.DEFAULT_FORM_CONTEXT = void 0;
+exports.NoStyleItemContext = exports.FormContext = exports.DEFAULT_FORM_CONTEXT = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,4 +17,8 @@ exports.DEFAULT_FORM_CONTEXT = DEFAULT_FORM_CONTEXT;
 
 var FormContext = /*#__PURE__*/_react["default"].createContext(DEFAULT_FORM_CONTEXT);
 
-exports.FormContext = FormContext;
+exports.FormContext = FormContext;
+
+var NoStyleItemContext = /*#__PURE__*/_react["default"].createContext(null);
+
+exports.NoStyleItemContext = NoStyleItemContext;

package/cjs/components/form/form-item.css

@@ -6,19 +6,21 @@
   height: 100%;
   box-sizing: border-box;
   color: #666;
+  position: relative;
 }
 .adm-form-item-label-required {
-  margin-right: 4px;
+  position: absolute;
+  left: -0.6em;
+  top: 0.2em;
   color: var(--adm-color-danger);
   user-select: none;
 }
-.adm-form-item-label-disable {
-  color: #666;
-  opacity: 0.4;
-}
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
+.adm-form-item-hidden {
+  display: none;
+}
 .adm-form-vertical .adm-form-item-label {
   margin-bottom: 4px;
 }

package/cjs/components/form/form-item.d.ts

@@ -3,16 +3,19 @@ import { NativeProps } from '../../utils/native-props';
 import { FormInstance } from 'rc-field-form';
 import type { FieldProps } from 'rc-field-form/lib/Field';
 import { ListItemProps } from '../list';
+import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemProps, 'style' | 'onClick'> & {
-    label?: string;
-    help?: string;
+export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemProps, 'style' | 'onClick' | 'extra'> & {
+    label?: React.ReactNode;
+    help?: React.ReactNode;
     hasFeedback?: boolean;
     required?: boolean;
     noStyle?: boolean;
     disabled?: boolean;
+    hidden?: boolean;
+    layout?: FormLayout;
     children: ChildrenType;
 };
 export declare const FormItem: FC<FormItemProps>;

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

@@ -40,6 +40,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
+var NAME_SPLIT = '__SPLIT__';
 var classPrefix = "adm-form-item";
 
 var MemoInput = /*#__PURE__*/_react["default"].memo(function (_ref) {
@@ -54,24 +55,25 @@ var FormItemLayout = function FormItemLayout(props) {
 
   var className = props.className,
       style = props.style,
+      extra = props.extra,
       label = props.label,
       help = props.help,
       required = props.required,
       disabled = props.disabled,
-      meta = props.meta,
       children = props.children,
-      htmlFor = props.htmlFor;
+      htmlFor = props.htmlFor,
+      hidden = props.hidden,
+      errors = props.errors;
   var context = (0, _react.useContext)(_context.FormContext);
   var hasFeedback = props.hasFeedback || context.hasFeedback;
   var layout = props.layout || context.layout;
-  var formItemLabelClass = (0, _classnames["default"])(classPrefix + "-label", (_classNames = {}, _classNames[classPrefix + "-label-disable"] = disabled, _classNames));
-  var feedback = hasFeedback && meta && meta.errors.length > 0 ? meta.errors[0] : null;
+  var feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
   var labelElement = label ? /*#__PURE__*/_react["default"].createElement("label", {
-    className: formItemLabelClass,
+    className: classPrefix + "-label",
     htmlFor: htmlFor
-  }, required && /*#__PURE__*/_react["default"].createElement("span", {
+  }, label, required && /*#__PURE__*/_react["default"].createElement("span", {
     className: classPrefix + "-label-required"
-  }, "*"), label, help && /*#__PURE__*/_react["default"].createElement("span", {
+  }, "*"), help && /*#__PURE__*/_react["default"].createElement("span", {
     className: classPrefix + "-label-help"
   }, help)) : null;
 
@@ -83,8 +85,10 @@ var FormItemLayout = function FormItemLayout(props) {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
+    extra: extra,
     description: descriptionElement,
-    className: (0, _classnames["default"])(classPrefix, className),
+    className: (0, _classnames["default"])(classPrefix, className, (_classNames = {}, _classNames[classPrefix + "-hidden"] = hidden, _classNames)),
+    disabled: disabled,
     onClick: props.onClick
   }, children);
 };
@@ -94,10 +98,13 @@ var FormItem = function FormItem(props) {
       style = props.style,
       label = props.label,
       help = props.help,
+      extra = props.extra,
       hasFeedback = props.hasFeedback,
       name = props.name,
       required = props.required,
       noStyle = props.noStyle,
+      hidden = props.hidden,
+      layout = props.layout,
       disabled = props.disabled,
       rules = props.rules,
       children = props.children,
@@ -108,7 +115,7 @@ var FormItem = function FormItem(props) {
       onClick = props.onClick,
       shouldUpdate = props.shouldUpdate,
       dependencies = props.dependencies,
-      fieldProps = __rest(props, ["className", "style", "label", "help", "hasFeedback", "name", "required", "noStyle", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
+      fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
 
   var _React$useContext = _react["default"].useContext(_FieldContext["default"]),
       contextValidateTrigger = _React$useContext.validateTrigger;
@@ -119,23 +126,61 @@ var FormItem = function FormItem(props) {
 
   updateRef.current += 1;
 
+  var _useState = (0, _react.useState)({}),
+      subMetas = _useState[0],
+      setSubMetas = _useState[1];
+
+  var onSubMetaChange = (0, _react.useCallback)(function (subMeta, namePath) {
+    setSubMetas(function (prevSubMetas) {
+      var nextSubMetas = Object.assign({}, prevSubMetas);
+      var nameKey = namePath.join(NAME_SPLIT);
+
+      if (subMeta.destroy) {
+        delete nextSubMetas[nameKey];
+      } else {
+        nextSubMetas[nameKey] = subMeta;
+      }
+
+      return nextSubMetas;
+    });
+  }, [setSubMetas]);
+
   function renderLayout(baseChildren, fieldId, meta, isRequired) {
-    if (noStyle) {
+    var _a;
+
+    if (noStyle && !hidden) {
       return baseChildren;
     }
 
+    var curErrors = (_a = meta === null || meta === void 0 ? void 0 : meta.errors) !== null && _a !== void 0 ? _a : [];
+    var errors = Object.keys(subMetas).reduce(function (subErrors, key) {
+      var _a, _b;
+
+      var errors = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : [];
+
+      if (errors.length) {
+        subErrors = [].concat(subErrors, errors);
+      }
+
+      return subErrors;
+    }, curErrors);
     return /*#__PURE__*/_react["default"].createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
+      extra: extra,
       help: help,
       required: isRequired,
       disabled: disabled,
       hasFeedback: hasFeedback,
       htmlFor: fieldId,
-      meta: meta,
-      onClick: onClick
-    }, baseChildren);
+      errors: errors,
+      onClick: onClick,
+      hidden: hidden,
+      layout: layout
+    }, /*#__PURE__*/_react["default"].createElement(_context.NoStyleItemContext.Provider, {
+      value: onSubMetaChange
+    }, baseChildren));
   }
 
   var isRenderProps = typeof children === 'function';
@@ -144,23 +189,33 @@ var FormItem = function FormItem(props) {
     return renderLayout(children);
   }
 
-  var variables = {};
+  var Variables = {};
 
   if (typeof label === 'string') {
-    variables.label = label;
+    Variables.label = label;
   }
 
   if (messageVariables) {
-    variables = Object.assign(Object.assign({}, variables), messageVariables);
+    Variables = Object.assign(Object.assign({}, Variables), messageVariables);
   }
 
+  var notifyParentMetaChange = (0, _react.useContext)(_context.NoStyleItemContext);
+
+  var onMetaChange = function onMetaChange(meta) {
+    if (noStyle && notifyParentMetaChange) {
+      var namePath = meta.name;
+      notifyParentMetaChange(meta, namePath);
+    }
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_rcFieldForm.Field, Object.assign({}, fieldProps, {
     name: name,
     shouldUpdate: shouldUpdate,
     dependencies: dependencies,
     rules: rules,
     trigger: trigger,
-    validateTrigger: mergedValidateTrigger
+    validateTrigger: mergedValidateTrigger,
+    onMetaChange: onMetaChange
   }), function (control, meta, context) {
     var childNode = null;
     var isRequired = required !== undefined ? required : !!(rules && rules.some(function (rule) {
@@ -200,10 +255,6 @@ var FormItem = function FormItem(props) {
 
       if (!childProps.id) {
         childProps.id = fieldId;
-      }
-
-      if (disabled) {
-        childProps.disabled = disabled;
       } // We should keep user origin event handler
 
 

package/cjs/components/form/form.css

@@ -1,3 +1,6 @@
+.adm-form .adm-list {
+  --padding-left: 20px;
+}
 .adm-form .adm-form-footer {
   padding: 12px;
 }

package/cjs/components/form/form.d.ts

@@ -1,10 +1,16 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import type { FormProps as RcFormProps } from 'rc-field-form';
+import { ListProps } from '../list';
+import type { FormProps as RcFormProps, FormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 import type { FormLayout } from '.';
 export declare type FormProps = RcFormProps & NativeProps & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: FormLayout;
+    mode?: ListProps['mode'];
 };
-export declare const Form: FC<FormProps>;
+export declare const Form: React.ForwardRefExoticComponent<RcFormProps<any> & NativeProps<never> & Partial<FormContextType> & {
+    footer?: ReactNode;
+    layout?: "horizontal" | "vertical" | undefined;
+    mode?: ListProps['mode'];
+} & React.RefAttributes<FormInstance<any>>>;

package/cjs/components/form/form.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Form = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -19,6 +19,10 @@ var _withDefaultProps = require("../../utils/with-default-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 _getRequireWildcardCache(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; }
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -37,8 +41,7 @@ var defaultProps = {
   hasFeedback: true,
   layout: 'vertical'
 };
-
-var Form = function Form(p) {
+var Form = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
 
   var className = props.className,
@@ -47,12 +50,15 @@ var Form = function Form(p) {
       children = props.children,
       layout = props.layout,
       footer = props.footer,
-      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer"]);
+      mode = props.mode,
+      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
 
   return /*#__PURE__*/_react["default"].createElement(_rcFieldForm["default"], Object.assign({
     className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + layout, className),
-    style: style
+    style: style,
+    ref: ref
   }, formProps), /*#__PURE__*/_react["default"].createElement(_list["default"], {
+    mode: mode,
     style: {
       '--prefix-width': '6em',
       '--align-items': 'stretch'
@@ -65,6 +71,5 @@ var Form = function Form(p) {
   }, children)), footer && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-footer"
   }, footer));
-};
-
+});
 exports.Form = Form;

package/cjs/components/form/index.css

@@ -1,3 +1,6 @@
+.adm-form .adm-list {
+  --padding-left: 20px;
+}
 .adm-form .adm-form-footer {
   padding: 12px;
 }
@@ -9,19 +12,21 @@
   height: 100%;
   box-sizing: border-box;
   color: #666;
+  position: relative;
 }
 .adm-form-item-label-required {
-  margin-right: 4px;
+  position: absolute;
+  left: -0.6em;
+  top: 0.2em;
   color: var(--adm-color-danger);
   user-select: none;
 }
-.adm-form-item-label-disable {
-  color: #666;
-  opacity: 0.4;
-}
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
+.adm-form-item-hidden {
+  display: none;
+}
 .adm-form-vertical .adm-form-item-label {
   margin-bottom: 4px;
 }

package/cjs/components/form/index.d.ts

@@ -3,7 +3,12 @@ import './index.less';
 import { useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
 export type { FormProps } from './form';
-declare const _default: import("react").FC<import("./form").FormProps> & {
+export type { FormInstance } from 'rc-field-form';
+declare const _default: import("react").ForwardRefExoticComponent<import("rc-field-form").FormProps<any> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
+    footer?: import("react").ReactNode;
+    layout?: "horizontal" | "vertical" | undefined;
+    mode?: "default" | "card" | undefined;
+} & import("react").RefAttributes<import("rc-field-form").FormInstance<any>>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
     useForm: typeof useForm;
 };

package/cjs/components/grid/grid.css

@@ -1,8 +1,11 @@
 .adm-grid {
+  --gap: 0;
+  --gap-horizontal: var(--gap);
+  --gap-vertical: var(--gap);
   display: grid;
   grid-gap: 10px;
-  column-gap: var(--horizontal-gap);
-  row-gap: var(--vertical-gap);
+  column-gap: var(--gap-horizontal);
+  row-gap: var(--gap-vertical);
   grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
   align-items: stretch;
 }

package/cjs/components/grid/grid.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type GridProps = {
     columns: number;
-    gap?: number | number[] | string | string[];
-} & NativeProps;
-export declare const Grid: React.FC<GridProps>;
+    gap?: number | string | [number | string, number | string];
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Grid: FC<GridProps>;
 export declare type GridItemProps = {
     span?: number;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 } & NativeProps;
-export declare const GridItem: React.FC<GridItemProps>;
+export declare const GridItem: FC<GridItemProps>;

package/cjs/components/grid/grid.js

@@ -11,44 +11,47 @@ var _react = _interopRequireDefault(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
+var _toCssLength = require("../../utils/to-css-length");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-grid";
-var defaultProps = {
-  gap: 0
-};
-var Grid = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (props) {
-  var gapStyle = {};
-  var gap = props.gap;
 
-  if (gap) {
-    var _ref = Array.isArray(gap) ? gap : [gap, gap],
-        horizontalGap = _ref[0],
-        verticalGap = _ref[1];
+var Grid = function Grid(props) {
+  var style = {
+    '--columns': props.columns.toString()
+  };
+  var gap = props.gap;
 
-    gapStyle = Object.assign(Object.assign({}, gapStyle), {
-      '--vertical-gap': typeof verticalGap === 'number' ? verticalGap + "px" : verticalGap,
-      '--horizontal-gap': typeof horizontalGap === 'number' ? horizontalGap + "px" : horizontalGap
-    });
+  if (gap !== undefined) {
+    if (Array.isArray(gap)) {
+      style['--gap-horizontal'] = (0, _toCssLength.toCSSLength)(gap[0]);
+      style['--gap-vertical'] = (0, _toCssLength.toCSSLength)(gap[1]);
+    } else {
+      style['--gap'] = (0, _toCssLength.toCSSLength)(gap);
+    }
   }
 
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix,
-    style: Object.assign(Object.assign({}, gapStyle), {
-      '--columns': props.columns
-    })
+    style: style
   }, props.children));
-});
+};
+
 exports.Grid = Grid;
-var GridItem = (0, _withDefaultProps.withDefaultProps)({
-  span: 1
-})(function (props) {
+
+var GridItem = function GridItem(p) {
+  var props = (0, _withDefaultProps.mergeProps)({
+    span: 1
+  }, p);
   var itemStyle = {
     '--item-span': props.span
   };
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-item",
-    style: itemStyle
+    style: itemStyle,
+    onClick: props.onClick
   }, props.children));
-});
+};
+
 exports.GridItem = GridItem;

package/cjs/components/image/image.css

@@ -1,4 +1,8 @@
 .adm-image {
+  --width: var(--adm-image-width, auto);
+  --height: var(--adm-image-height, auto);
+  width: var(--width);
+  height: var(--height);
   display: inline-block;
   overflow: hidden;
 }
@@ -13,7 +17,7 @@
   min-height: 24px;
   min-width: 24px;
 }
-.adm-image-tip > .anticon {
+.adm-image-tip > .antd-mobile-icon {
   position: absolute;
   left: 50%;
   top: 50%;

package/cjs/components/image/image.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ImageProps = {
     src: string;
@@ -8,7 +8,8 @@ export declare type ImageProps = {
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
     placeholder?: ReactNode;
     fallback?: ReactNode;
-    onClick?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    lazy?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-} & NativeProps & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
-export declare const Image: FC<ImageProps>;
+} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
+export declare const Image: React.FC<ImageProps>;

package/cjs/components/image/image.js

@@ -11,7 +11,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
-var _icons = require("@ant-design/icons");
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _stagedComponents = require("staged-components");
+
+var _toCssLength = require("../../utils/to-css-length");
+
+var _lazyDetector = require("./lazy-detector");
+
+var _ahooks = require("ahooks");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -22,13 +30,13 @@ var defaultProps = {
   fit: 'fill',
   placeholder: /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-tip"
-  }, /*#__PURE__*/_react["default"].createElement(_icons.PictureOutlined, null)),
+  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.PictureOutline, null)),
   fallback: /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-tip"
-  }, /*#__PURE__*/_react["default"].createElement(_icons.DisconnectOutlined, null))
+  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.PictureWrongOutline, null)),
+  lazy: false
 };
-
-var Image = function Image(p) {
+var Image = (0, _stagedComponents.staged)(function (p) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
 
   var _useState = (0, _react.useState)(false),
@@ -39,14 +47,29 @@ var Image = function Image(p) {
       failed = _useState2[0],
       setFailed = _useState2[1];
 
+  var ref = (0, _react.useRef)(null);
+  var src = props.src;
+  var srcSet = props.srcSet;
+
+  var _useState3 = (0, _react.useState)(!props.lazy),
+      initialized = _useState3[0],
+      setInitialized = _useState3[1];
+
+  src = initialized ? props.src : undefined;
+  srcSet = initialized ? props.srcSet : undefined;
+  (0, _ahooks.useUpdateLayoutEffect)(function () {
+    setLoaded(false);
+    setFailed(false);
+  }, [src]);
+
   function renderInner() {
     if (failed) {
-      return props.fallback;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.fallback);
     }
 
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !loaded && props.placeholder, /*#__PURE__*/_react["default"].createElement("img", {
+    var img = /*#__PURE__*/_react["default"].createElement("img", {
       className: classPrefix + "-img",
-      src: props.src,
+      src: src,
       alt: props.alt,
       onClick: props.onClick,
       onLoad: function onLoad() {
@@ -67,18 +90,31 @@ var Image = function Image(p) {
       loading: props.loading,
       referrerPolicy: props.referrerPolicy,
       sizes: props.sizes,
-      srcSet: props.srcSet,
+      srcSet: srcSet,
       useMap: props.useMap
-    }));
+    });
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !loaded && props.placeholder, img);
+  }
+
+  var style = {};
+
+  if (props.width) {
+    style['--width'] = (0, _toCssLength.toCSSLength)(props.width);
+  }
+
+  if (props.height) {
+    style['--height'] = (0, _toCssLength.toCSSLength)(props.height);
   }
 
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
     className: classPrefix,
-    style: {
-      width: props.width,
-      height: props.height
+    style: style
+  }, props.lazy && !initialized && /*#__PURE__*/_react["default"].createElement(_lazyDetector.LazyDetector, {
+    onActive: function onActive() {
+      setInitialized(true);
     }
-  }, renderInner()));
-};
-
+  }), renderInner()));
+});
 exports.Image = Image;

package/cjs/components/image/lazy-detector.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+declare type Props = {
+    onActive: () => void;
+};
+export declare const LazyDetector: FC<Props>;
+export {};