antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/2x/es/components/error-block/create-error-block.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
+const classPrefix = `adm-error-block`;
+const defaultProps = {
+  status: 'default'
+};
+export function createErrorBlock(imageRecord) {
+  const ErrorBlock = p => {
+    var _a;
+
+    const props = mergeProps(defaultProps, p);
+    const {
+      locale
+    } = useConfig();
+    const contentPack = locale.ErrorBlock[props.status];
+    const des = 'description' in props ? props.description : contentPack.description;
+    const title = 'title' in props ? props.title : contentPack.title;
+    const image = (_a = props.image) !== null && _a !== void 0 ? _a : imageRecord[props.status];
+    const imageNode = typeof image === 'string' ? React.createElement("img", {
+      src: image,
+      alt: 'error block image'
+    }) : image;
+    return withNativeProps(props, React.createElement("div", {
+      className: classNames(classPrefix, {
+        [`${classPrefix}-full-page`]: props.fullPage
+      })
+    }, React.createElement("div", {
+      className: `${classPrefix}-image`
+    }, imageNode), React.createElement("div", {
+      className: `${classPrefix}-description`
+    }, title && React.createElement("div", {
+      className: `${classPrefix}-description-title`
+    }, title), des && React.createElement("div", {
+      className: `${classPrefix}-description-subtitle`
+    }, des)), props.children && React.createElement("div", {
+      className: `${classPrefix}-content`
+    }, props.children)));
+  };
+
+  return ErrorBlock;
+}

package/2x/es/components/error-block/error-block.css

@@ -20,14 +20,14 @@
 }
 
 .adm-error-block-description {
-  font-size: 24px;
+  font-size: var(--adm-font-size-4);
   color: #999;
   line-height: 1.4;
   margin-top: 24px;
 }
 
 .adm-error-block-description-title {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
 }
 
 .adm-error-block-description-subtitle {
@@ -49,10 +49,10 @@
 
 .adm-error-block-full-page .adm-error-block-description {
   margin-top: 40px;
-  font-size: 26px;
+  font-size: var(--adm-font-size-main);
 }
 
 .adm-error-block-full-page .adm-error-block-description-title {
   font-size: 40px;
-  color: #333;
+  color: var(--adm-color-text);
 }

package/2x/es/components/error-block/error-block.d.ts

@@ -1,11 +1,2 @@
-import React, { FC, ReactElement, ReactNode } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type ErrorBlockProps = {
-    status?: 'default' | 'disconnected' | 'empty' | 'busy';
-    title?: ReactNode;
-    image?: string | ReactElement;
-    description?: ReactNode;
-    fullPage?: boolean;
-    children?: React.ReactNode;
-} & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
-export declare const ErrorBlock: FC<ErrorBlockProps>;
+/// <reference types="react" />
+export declare const ErrorBlock: import("react").FC<import("./create-error-block").ErrorBlockProps>;

package/2x/es/components/error-block/error-block.js

@@ -1,47 +1,9 @@
-import React from 'react';
-import classNames from 'classnames';
-import { mergeProps } from '../../utils/with-default-props';
-import { withNativeProps } from '../../utils/native-props';
-import { useConfig } from '../config-provider';
-import { imageRecord } from './images';
-const classPrefix = `adm-error-block`;
-const defaultProps = {
-  status: 'default'
+import { createErrorBlock } from './create-error-block';
+import { busyImage, defaultImage, disconnectedImage, emptyImage } from './images';
+const imageRecord = {
+  'default': defaultImage,
+  'disconnected': disconnectedImage,
+  'empty': emptyImage,
+  'busy': busyImage
 };
-export const ErrorBlock = p => {
-  const props = mergeProps(defaultProps, p);
-  const {
-    locale
-  } = useConfig();
-  const contentPack = locale.ErrorBlock[props.status];
-  const des = 'description' in props ? props.description : contentPack.description;
-  const title = 'title' in props ? props.title : contentPack.title;
-  let imageNode = imageRecord[props.status];
-
-  if (props.image) {
-    if (typeof props.image === 'string') {
-      imageNode = React.createElement("img", {
-        src: props.image,
-        alt: 'error block image'
-      });
-    } else {
-      imageNode = props.image;
-    }
-  }
-
-  return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, {
-      [`${classPrefix}-full-page`]: props.fullPage
-    })
-  }, React.createElement("div", {
-    className: `${classPrefix}-image`
-  }, imageNode), React.createElement("div", {
-    className: `${classPrefix}-description`
-  }, title && React.createElement("div", {
-    className: `${classPrefix}-description-title`
-  }, title), des && React.createElement("div", {
-    className: `${classPrefix}-description-subtitle`
-  }, des)), props.children && React.createElement("div", {
-    className: `${classPrefix}-content`
-  }, props.children)));
-};
+export const ErrorBlock = createErrorBlock(imageRecord);

package/2x/es/components/error-block/error-block.patch.css

@@ -0,0 +1,29 @@
+.adm-error-block-image {
+  height: 200px;
+  width: auto;
+}
+
+.adm-error-block-description {
+  font-size: var(--adm-font-size-4);
+}
+
+.adm-error-block-description-title {
+  font-size: var(--adm-font-size-7);
+}
+
+.adm-error-block-full-page {
+  padding-top: calc(50vh - 400px);
+}
+
+.adm-error-block-full-page .adm-error-block-image {
+  height: 400px;
+  width: auto;
+}
+
+.adm-error-block-full-page .adm-error-block-description {
+  font-size: var(--adm-font-size-main);
+}
+
+.adm-error-block-full-page .adm-error-block-description-title {
+  color: #333333;
+}

package/2x/es/components/error-block/images/busy.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const busyImage: JSX.Element;

package/2x/es/components/error-block/images/default.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const defaultImage: JSX.Element;

package/2x/es/components/error-block/images/disconnected.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const disconnectedImage: JSX.Element;

package/2x/es/components/error-block/images/empty.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const emptyImage: JSX.Element;

package/2x/es/components/error-block/images/index.d.ts

@@ -1,2 +1,4 @@
-import { ReactElement } from 'react';
-export declare const imageRecord: Record<'default' | 'disconnected' | 'empty' | 'busy', ReactElement>;
+export { defaultImage } from './default';
+export { disconnectedImage } from './disconnected';
+export { emptyImage } from './empty';
+export { busyImage } from './busy';

package/2x/es/components/error-block/images/index.js

@@ -1,10 +1,4 @@
-import { defaultImage } from './default';
-import { disconnectedImage } from './disconnected';
-import { emptyImage } from './empty';
-import { busyImage } from './busy';
-export const imageRecord = {
-  'default': defaultImage,
-  'disconnected': disconnectedImage,
-  'empty': emptyImage,
-  'busy': busyImage
-};
+export { defaultImage } from './default';
+export { disconnectedImage } from './disconnected';
+export { emptyImage } from './empty';
+export { busyImage } from './busy';

package/2x/es/components/error-block/index.d.ts

@@ -1,4 +1,8 @@
 import './error-block.less';
+import { ReactNode } from 'react';
 import { ErrorBlock } from './error-block';
-export type { ErrorBlockProps } from './error-block';
+export { createErrorBlock } from './create-error-block';
+export type { ErrorBlockProps } from './create-error-block';
+export declare type ErrorBlockStatus = 'default' | 'disconnected' | 'empty' | 'busy';
+export declare type ImageRecord = Partial<Record<ErrorBlockStatus, string | ReactNode>>;
 export default ErrorBlock;

package/2x/es/components/error-block/index.js

@@ -1,3 +1,4 @@
 import "./error-block.css";
 import { ErrorBlock } from './error-block';
+export { createErrorBlock } from './create-error-block';
 export default ErrorBlock;

package/2x/es/components/floating-bubble/floating-bubble.css

@@ -42,6 +42,7 @@
   overflow: hidden;
   cursor: pointer;
   transition: opacity ease 0.15s;
+  -webkit-user-select: none;
   user-select: none;
   touch-action: none;
   background: var(--background);

package/2x/es/components/floating-panel/floating-panel.css

@@ -2,9 +2,6 @@
   --border-radius: 16px;
   --header-height: 56px;
   --z-index: var(--adm-floating-panel-z-index, 900);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  background: var(--adm-color-white);
   position: fixed;
   z-index: var(--z-index);
   bottom: 0;
@@ -32,7 +29,7 @@
   bottom: -100vh;
   height: 100vh;
   width: 100vw;
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }
 
 .adm-floating-panel .adm-floating-panel-header {
@@ -41,8 +38,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: -webkit-grab;
   cursor: grab;
+  -webkit-user-select: none;
   user-select: none;
+  background-color: var(--adm-color-background);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
 }
 
 .adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
@@ -55,4 +57,5 @@
 .adm-floating-panel .adm-floating-panel-content {
   flex: 1;
   overflow-y: scroll;
+  background: var(--adm-color-background);
 }

package/2x/es/components/floating-panel/floating-panel.d.ts

@@ -16,4 +16,8 @@ export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     children: ReactNode;
     onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
     handleDraggingOfContent?: boolean | undefined;
-} & NativeProps<"--z-index" | "--border-radius" | "--header-height"> & React.RefAttributes<FloatingPanelRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--z-index" | "--border-radius" | "--header-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<FloatingPanelRef>>;

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

@@ -5,7 +5,7 @@ export declare type FormContextType = {
     name?: string;
     hasFeedback: boolean;
     layout: FormLayout;
-    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional' | 'none';
     disabled: boolean;
 };
 export declare const defaultFormContext: FormContextType;

package/2x/es/components/form/form-item.css

@@ -8,7 +8,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 
 .adm-form-item-label .adm-form-item-required-asterisk {
@@ -17,6 +17,7 @@
   top: 0;
   font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -79,6 +80,6 @@
 }
 
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 8px;
 }

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

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useContext, useCallback, useState, useRef } from 'react';
 import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { Field } from 'rc-field-form';
 import FieldContext from 'rc-field-form/lib/FieldContext';
 import { devWarning } from '../../utils/dev-log';
@@ -62,6 +63,9 @@ const FormItemLayout = props => {
           className: `${classPrefix}-required-text`
         }, "(", locale.Form.optional, ")");
 
+      case 'none':
+        return null;
+
       default:
         return null;
     }
@@ -80,14 +84,14 @@ const FormItemLayout = props => {
       e.preventDefault();
     }
   }, React.createElement(QuestionCircleOutline, null)))) : null;
-  const description = React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
+  const description = props.description || hasFeedback ? React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
     key: `error-${index}`,
     className: `${classPrefix}-feedback-error`
   }, error)), props.warnings.map((warning, index) => React.createElement("div", {
     key: `warning-${index}`,
     className: `${classPrefix}-feedback-warning`
-  }, warning))));
-  return React.createElement(List.Item, {
+  }, warning)))) : null;
+  return withNativeProps(props, React.createElement(List.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
@@ -105,7 +109,7 @@ const FormItemLayout = props => {
     className: classNames(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
   }, React.createElement("div", {
     className: classNames(`${classPrefix}-child-inner`)
-  }, children)));
+  }, children))));
 };
 
 export const FormItem = props => {
@@ -197,7 +201,7 @@ export const FormItem = props => {
 
       return subWarnings;
     }, curWarnings);
-    return React.createElement(FormItemLayout, {
+    return withNativeProps(props, React.createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
@@ -218,7 +222,7 @@ export const FormItem = props => {
       arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
-    }, baseChildren));
+    }, baseChildren)));
   }
 
   const isRenderProps = typeof children === 'function';
@@ -228,10 +232,7 @@ export const FormItem = props => {
   }
 
   let Variables = {};
-
-  if (typeof label === 'string') {
-    Variables.label = label;
-  }
+  Variables.label = typeof label === 'string' ? label : '';
 
   if (messageVariables) {
     Variables = Object.assign(Object.assign({}, Variables), messageVariables);

package/2x/es/components/form/form-subscribe.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import type { FormInstance } from 'rc-field-form';
 import type { NamePath } from 'rc-field-form/es/interface';
 declare type RenderChildren<Values = any> = (changedValues: Record<string, any>, form: FormInstance<Values>) => React.ReactNode;
@@ -7,5 +7,10 @@ export interface FormSubscribeProps {
     to: NamePath[];
     children: ChildrenType;
 }
-export declare const FormSubscribe: React.VFC<FormSubscribeProps>;
+export declare const FormSubscribe: FC<FormSubscribeProps>;
+export declare const Watcher: React.NamedExoticComponent<{
+    form: FormInstance;
+    namePath: NamePath;
+    onChange: () => void;
+}>;
 export {};

package/2x/es/components/form/form-subscribe.js

@@ -1,14 +1,21 @@
-import React from 'react';
-import Form from '.';
-export const FormSubscribe = ({
-  children,
-  to
-}) => {
-  return React.createElement(Form.Item, {
-    noStyle: true,
-    dependencies: to
-  }, form => {
-    const changedValues = form.getFieldsValue(to);
-    return children(changedValues, form);
-  });
-};
+import React, { memo, useContext } from 'react';
+import { FieldContext, useWatch } from 'rc-field-form';
+import { useUpdate } from 'ahooks';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
+export const FormSubscribe = props => {
+  const update = useUpdate();
+  const form = useContext(FieldContext);
+  return React.createElement(React.Fragment, null, props.children(form.getFieldsValue(props.to), form), props.to.map(namePath => React.createElement(Watcher, {
+    key: namePath.toString(),
+    form: form,
+    namePath: namePath,
+    onChange: update
+  })));
+};
+export const Watcher = memo(props => {
+  const value = useWatch(props.namePath, props.form);
+  useIsomorphicUpdateLayoutEffect(() => {
+    props.onChange();
+  }, [value]);
+  return null;
+});

package/2x/es/components/form/form.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-border-color);
-  --border-top: solid 2px var(--adm-border-color);
-  --border-bottom: solid 2px var(--adm-border-color);
+  --border-inner: solid 2px var(--adm-color-border);
+  --border-top: solid 2px var(--adm-color-border);
+  --border-bottom: solid 2px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);

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

@@ -8,7 +8,11 @@ export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'na
     footer?: ReactNode;
     mode?: ListProps['mode'];
 };
-export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
+export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & Partial<FormContextType> & {
     footer?: ReactNode;
     mode?: ListProps['mode'];
 } & React.RefAttributes<FormInstance>>;

package/2x/es/components/form/index.css

@@ -1,7 +1,7 @@
 .adm-form {
-  --border-inner: solid 2px var(--adm-border-color);
-  --border-top: solid 2px var(--adm-border-color);
-  --border-bottom: solid 2px var(--adm-border-color);
+  --border-inner: solid 2px var(--adm-color-border);
+  --border-top: solid 2px var(--adm-color-border);
+  --border-bottom: solid 2px var(--adm-color-border);
   ---border-inner: var(--border-inner);
   ---border-top: var(--border-top);
   ---border-bottom: var(--border-bottom);
@@ -34,7 +34,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 
 .adm-form-item-label .adm-form-item-required-asterisk {
@@ -43,6 +43,7 @@
   top: 0;
   font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -105,6 +106,6 @@
 }
 
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 30px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 8px;
 }

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

@@ -7,12 +7,16 @@ export type { FormItemProps } from './form-item';
 export type { FormSubscribeProps } from './form-subscribe';
 export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
 export type { FormArrayField, FormArrayOperation, FormArrayProps, } from './form-array';
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<import("./context").FormContextType> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--border-bottom" | "--border-inner" | "--border-top", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("./form").FormInstance>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
-    Subscribe: import("react").VFC<import("./form-subscribe").FormSubscribeProps>;
+    Subscribe: import("react").FC<import("./form-subscribe").FormSubscribeProps>;
     Header: import("react").FC<{
         children?: import("react").ReactNode;
     }>;

package/2x/es/components/grid/grid.css

@@ -4,6 +4,7 @@
   --gap-vertical: var(--gap);
   display: grid;
   grid-gap: 20px;
+  -webkit-column-gap: var(--gap-horizontal);
   column-gap: var(--gap-horizontal);
   row-gap: var(--gap-vertical);
   grid-template-columns: repeat(var(--columns), minmax(0, 1fr));

package/2x/es/components/image/broken-image-icon.d.ts

@@ -0,0 +1 @@
+export declare const BrokenImageIcon: () => JSX.Element;

package/2x/es/components/image/broken-image-icon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const BrokenImageIcon = () => React.createElement("svg", {
+  viewBox: '0 0 48 48',
+  xmlns: 'http://www.w3.org/2000/svg'
+}, React.createElement("path", {
+  d: 'M19.233 6.233 17.42 9.08l-10.817.001a.665.665 0 0 0-.647.562l-.007.096V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.415 2.415 0 0 1 1.807.625l.126.127 4.182 4.525 2.267-3.292 5.461 7.841-4.065 7.375H6.604c-1.86 0-3.382-1.47-3.482-3.317l-.005-.192V9.744c0-1.872 1.461-3.405 3.296-3.505l.19-.005h12.63Zm22.163 0c1.86 0 3.382 1.472 3.482 3.314l.005.192v29.14a3.507 3.507 0 0 1-3.3 3.505l-.191.006H27.789l3.63-6.587.06-.119a1.87 1.87 0 0 0-.163-1.853l-6.928-9.949 3.047-4.422a2.374 2.374 0 0 1 1.96-1.01 2.4 2.4 0 0 1 1.86.87l.106.14L42.05 34.89V9.74a.664.664 0 0 0-.654-.658H21.855l1.812-2.848h17.73Zm-28.305 5.611c.794 0 1.52.298 2.07.788l-.843 1.325-.067.114a1.87 1.87 0 0 0 .11 1.959l.848 1.217c-.556.515-1.3.83-2.118.83a3.122 3.122 0 0 1-3.117-3.116 3.119 3.119 0 0 1 3.117-3.117Z',
+  fill: '#DBDBDB',
+  fillRule: 'nonzero'
+}));

package/2x/es/components/image/image-icon.d.ts

@@ -0,0 +1 @@
+export declare const ImageIcon: () => JSX.Element;

package/2x/es/components/image/image-icon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const ImageIcon = () => React.createElement("svg", {
+  viewBox: '0 0 48 48',
+  xmlns: 'http://www.w3.org/2000/svg'
+}, React.createElement("path", {
+  d: 'M41.396 6.234c1.923 0 3.487 1.574 3.487 3.505v29.14c0 1.937-1.568 3.51-3.491 3.51H6.604c-1.923 0-3.487-1.573-3.487-3.51V9.745c0-1.936 1.564-3.51 3.487-3.51Zm0 2.847H6.604c-.355 0-.654.3-.654.658V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.405 2.405 0 0 1 1.933.752l4.182 4.525 7.58-11.005a2.374 2.374 0 0 1 1.96-1.01c.79 0 1.532.38 1.966 1.01L42.05 34.89V9.74a.664.664 0 0 0-.654-.658Zm-28.305 2.763a3.119 3.119 0 0 1 3.117 3.117 3.119 3.119 0 0 1-3.117 3.117 3.122 3.122 0 0 1-3.117-3.117 3.119 3.119 0 0 1 3.117-3.117Z',
+  fill: '#DBDBDB',
+  fillRule: 'nonzero'
+}));

package/2x/es/components/image/image.css

@@ -14,13 +14,15 @@
 
 .adm-image-tip {
   position: relative;
-  background-color: #f3f3f3;
+  background-color: var(--adm-color-box);
   height: 100%;
   min-height: 48px;
   min-width: 48px;
 }
 
-.adm-image-tip > .antd-mobile-icon {
+.adm-image-tip > svg {
+  width: 48px;
+  height: 48px;
   position: absolute;
   left: 50%;
   top: 50%;

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

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ImageProps = {
-    src: string;
+    src?: string;
     alt?: string;
     width?: number | string;
     height?: number | string;
@@ -9,8 +9,10 @@ export declare type ImageProps = {
     placeholder?: ReactNode;
     fallback?: ReactNode;
     lazy?: boolean;
+    draggable?: boolean;
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
 } & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
 export declare const Image: React.FC<ImageProps>;