antd-mobile 5.12.4 → 5.13.0

package/2x/cjs/locales/fr-FR.js

@@ -0,0 +1,119 @@
+"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}Pas un valide${type}';
+const frFR = (0, _mergeLocale.mergeLocale)(_base.base, {
+  locale: 'fr-FR',
+  common: {
+    confirm: 'Valider',
+    cancel: 'Annuler',
+    loading: 'Chargement'
+  },
+  Calendar: {
+    markItems: ['un', 'deux', 'trois', 'quatre', 'cinq', 'six', 'sept'],
+    renderYearAndMonth: (year, month) => `${year}Année ${month}Mois`
+  },
+  Cascader: {
+    placeholder: 'Veuillez sélectionner'
+  },
+  Dialog: {
+    ok: 'Je l’ai compris'
+  },
+  ErrorBlock: {
+    default: {
+      title: 'La page rencontre des problèmes mineurs',
+      description: 'Venez essayer plus tard'
+    },
+    busy: {
+      title: 'Pas chargé.',
+      description: 'Tentative de rafraîchir la page'
+    },
+    disconnected: {
+      title: 'Le réseau est occupé',
+      description: 'Tentative de rafraîchir la page'
+    },
+    empty: {
+      title: 'Vous n’avez pas trouvé ce que vous cherchez',
+      description: 'Trouvez les autres'
+    }
+  },
+  Form: {
+    required: 'Qu’il remplit',
+    optional: 'Décharge sélectionnés',
+    defaultValidateMessages: {
+      default: 'Erreur de validation de champ${label}',
+      required: 'Veuillez entrer le${label}',
+      enum: '${label}doit être l’un des[${enum}]',
+      whitespace: '${label}Ne peut pas être un caractère vide',
+      date: {
+        format: '${label}Format de date invalide',
+        parse: '${label}Non convertible en date',
+        invalid: '${label}Est une date non valide'
+      },
+      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}pour${len}Un caractère',
+        min: '${label}Au moins${min}Un caractère',
+        max: '${label}Un maximum de${max}Un caractère',
+        range: '${label}Dans les${min}-${max}Entre les caractères'
+      },
+      number: {
+        len: '${label}Doit être égal à${len}',
+        min: '${label}La valeur minimale est${min}',
+        max: '${label}La valeur maximale est${max}',
+        range: '${label}Dans les${min}-${max}entre'
+      },
+      array: {
+        len: 'pour${len}个${label}',
+        min: 'Au moins${min}个${label}',
+        max: 'Un maximum de${max}个${label}',
+        range: '${label}Montant de${min}-${max}entre'
+      },
+      pattern: {
+        mismatch: '${label}Ne correspond pas au modèle${pattern}'
+      }
+    }
+  },
+  ImageUploader: {
+    uploading: 'Téléchargement...',
+    upload: 'Télécharger'
+  },
+  InfiniteScroll: {
+    noMore: 'Non, plus maintenant.'
+  },
+  Mask: {
+    name: 'Masques'
+  },
+  Modal: {
+    ok: 'Je l’ai compris'
+  },
+  PullToRefresh: {
+    pulling: 'Rafraîchir la liste déroulante',
+    canRelease: 'Libérez instantanément rafraîchir',
+    complete: 'Rafraîchir avec succès'
+  }
+});
+var _default = frFR;
+exports.default = _default;

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

@@ -10,7 +10,7 @@ var _isDev = require("./is-dev");
 var _devLog = require("./dev-log");
 
 function measureCSSLength(raw) {
-  if (raw === null || raw === undefined) {
+  if (raw === null || raw === undefined || raw === '') {
     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.');
     }
@@ -28,7 +28,7 @@ function measureCSSLength(raw) {
     return parseFloat(withUnit) * window.innerWidth / 100;
   } else {
     if (_isDev.isDev) {
-      (0, _devLog.devError)('Global', 'You are using a not supported CSS unit. Only `px` `rem` and `vw` are supported.');
+      (0, _devLog.devError)('Global', `You are using a not supported CSS unit in \`${raw}\`. Only \`px\` \`rem\` and \`vw\` are supported.`);
     }
 
     return 0;

package/2x/cjs/utils/reduce-and-restore-motion.d.ts

@@ -0,0 +1,4 @@
+export declare function reduceMotion(): void;
+export declare function restoreMotion(): void;
+export declare function isMotionReduced(): boolean;
+export declare function useMotionReduced(): boolean;

package/2x/cjs/utils/reduce-and-restore-motion.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMotionReduced = isMotionReduced;
+exports.reduceMotion = reduceMotion;
+exports.restoreMotion = restoreMotion;
+exports.useMotionReduced = useMotionReduced;
+
+var _web = require("@react-spring/web");
+
+var _shim = require("use-sync-external-store/shim");
+
+let reduced = false;
+const subscribers = new Set();
+
+function notify() {
+  subscribers.forEach(subscriber => {
+    subscriber();
+  });
+}
+
+function reduceMotion() {
+  reduced = true;
+  notify();
+
+  _web.Globals.assign({
+    skipAnimation: true
+  });
+}
+
+function restoreMotion() {
+  reduced = false;
+  notify();
+
+  _web.Globals.assign({
+    skipAnimation: false
+  });
+}
+
+function isMotionReduced() {
+  return reduced;
+}
+
+function useMotionReduced() {
+  return (0, _shim.useSyncExternalStore)(onStoreChange => {
+    subscribers.add(onStoreChange);
+    return () => {
+      subscribers.delete(onStoreChange);
+    };
+  }, isMotionReduced);
+}

package/2x/cjs/utils/use-inner-visible.d.ts

@@ -0,0 +1 @@
+export declare function useInnerVisible(outerVisible: boolean): boolean;

package/2x/cjs/utils/use-inner-visible.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInnerVisible = useInnerVisible;
+
+var _react = require("react");
+
+var _ahooks = require("ahooks");
+
+function useInnerVisible(outerVisible) {
+  const [innerVisible, setInnerVisible] = (0, _react.useState)(outerVisible);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    setInnerVisible(outerVisible);
+  }, [outerVisible]);
+  return innerVisible;
+}

package/2x/es/components/action-sheet/action-sheet.css

@@ -9,22 +9,37 @@
   justify-content: center;
   color: var(--adm-color-weak);
   font-size: 30px;
-  padding: 36px 32px;
+  padding: 36px 24px;
+  border-bottom: 2px solid var(--adm-border-color);
+}
+
+.adm-action-sheet-button-list {
   border-bottom: 2px solid var(--adm-border-color);
 }
 
 .adm-action-sheet-button-item-wrapper {
-  background-color: #ffffff;
-  border-top: 2px solid var(--adm-border-color);
+  border-bottom: 2px solid var(--adm-border-color);
 }
 
-.adm-action-sheet-button-item-wrapper:first-child {
-  border-top: none;
+.adm-action-sheet-button-item-wrapper:last-child {
+  border-bottom: none;
 }
 
 .adm-action-sheet-button-item {
-  padding: 28px;
   text-align: center;
+  display: block;
+  background-color: #ffffff;
+  padding: 32px;
+}
+
+.adm-action-sheet-button-item:active {
+  background-color: #eeeeee;
+}
+
+.adm-action-sheet-button-item-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.4;
 }
 
 .adm-action-sheet-button-item-name {
@@ -35,7 +50,7 @@
 .adm-action-sheet-button-item-description {
   font-size: 24px;
   color: var(--adm-color-weak);
-  padding-top: 8px;
+  padding-top: 4px;
 }
 
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {

package/2x/es/components/action-sheet/action-sheet.js

@@ -3,7 +3,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
 import Popup from '../popup';
-import Button from '../button';
 import SafeArea from '../safe-area';
 import { renderImperatively } from '../../utils/render-imperatively';
 const classPrefix = `adm-action-sheet`;
@@ -41,11 +40,11 @@ export const ActionSheet = p => {
   }, props.actions.map((action, index) => React.createElement("div", {
     key: action.key,
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    disabled: action.disabled,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
+      [`${classPrefix}-button-item-danger`]: action.danger,
+      [`${classPrefix}-button-item-disabled`]: action.disabled
+    }),
     onClick: () => {
       var _a, _b, _c;
 
@@ -55,10 +54,7 @@ export const ActionSheet = p => {
       if (props.closeOnAction) {
         (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
       }
-    },
-    className: classNames(`${classPrefix}-button-item`, {
-      [`${classPrefix}-button-item-danger`]: action.danger
-    })
+    }
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-name`
   }, action.text), action.description && React.createElement("div", {
@@ -67,11 +63,8 @@ export const ActionSheet = p => {
     className: `${classPrefix}-cancel`
   }, React.createElement("div", {
     className: `${classPrefix}-button-item-wrapper`
-  }, React.createElement(Button, {
-    block: true,
-    fill: 'none',
-    shape: 'rectangular',
-    className: `${classPrefix}-button-item`,
+  }, React.createElement("a", {
+    className: classNames('adm-plain-anchor', `${classPrefix}-button-item`),
     onClick: () => {
       var _a;
 

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

@@ -31,5 +31,5 @@ export declare const Button: React.ForwardRefExoticComponent<{
     type?: "reset" | "submit" | "button" | undefined;
     shape?: "default" | "rounded" | "rectangular" | undefined;
     children?: React.ReactNode;
-} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & NativeProps<"--text-color" | "--background-color" | "--border-radius" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & NativeProps<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color"> & React.RefAttributes<ButtonRef>>;
 export {};

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

@@ -86,6 +86,10 @@
   border-bottom-right-radius: 8px;
 }
 
+.adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected {
+  color: var(--adm-color-light);
+}
+
 .adm-calendar-cell .adm-calendar-cell-top {
   flex: none;
   font-size: 36px;

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

@@ -19,6 +19,7 @@ export declare type CalendarProps = {
     allowClear?: boolean;
     max?: Date;
     min?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
 } & ({
     selectionMode?: undefined;
     value?: undefined;

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

@@ -125,7 +125,7 @@ export const Calendar = forwardRef((p, ref) => {
       }
 
       const inThisMonth = d.month() === current.month();
-      const disabled = maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
       cells.push(React.createElement("div", {
         key: d.valueOf(),
         className: classNames(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {

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

@@ -24,5 +24,7 @@ export declare type DialogProps = {
     maskClassName?: string;
     stopPropagation?: PropagationEvent[];
     disableBodyScroll?: boolean;
+    destroyOnClose?: boolean;
+    forceRender?: boolean;
 } & NativeProps;
 export declare const Dialog: FC<DialogProps>;

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

@@ -2,7 +2,7 @@ import { __awaiter } from "tslib";
 import React, { useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
-import { useUnmountedRef } from 'ahooks';
+import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
 import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
@@ -11,6 +11,8 @@ import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
+import { ShouldRender } from '../../utils/should-render';
+import { useInnerVisible } from '../../utils/use-inner-visible';
 const defaultProps = {
   visible: false,
   actions: [],
@@ -18,7 +20,9 @@ const defaultProps = {
   closeOnMaskClick: false,
   stopPropagation: ['click'],
   getContainer: null,
-  disableBodyScroll: true
+  disableBodyScroll: true,
+  destroyOnClose: false,
+  forceRender: false
 };
 export const Dialog = p => {
   const props = mergeProps(defaultProps, p);
@@ -32,9 +36,6 @@ export const Dialog = p => {
       friction: 25,
       clamp: true
     },
-    onStart: () => {
-      setActive(true);
-    },
     onRest: () => {
       var _a, _b;
 
@@ -49,6 +50,12 @@ export const Dialog = p => {
     }
   });
   const [active, setActive] = useState(props.visible);
+  useIsomorphicLayoutEffect(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const maskVisible = useInnerVisible(active && props.visible);
   const body = React.createElement("div", {
     className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
     style: props.bodyStyle
@@ -85,26 +92,28 @@ export const Dialog = p => {
       })
     })));
   })));
-  const node = withNativeProps(props, React.createElement("div", {
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
     className: cls(),
     style: {
-      display: active ? undefined : 'none'
+      display: active ? undefined : 'none',
+      pointerEvents: active ? undefined : 'none'
     }
   }, React.createElement(Mask, {
-    visible: props.visible,
+    visible: maskVisible,
     onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
     style: props.maskStyle,
     className: classNames(cls('mask'), props.maskClassName),
     disableBodyScroll: props.disableBodyScroll
   }), React.createElement("div", {
-    className: cls('wrap'),
-    style: {
-      pointerEvents: props.visible ? undefined : 'none'
-    }
+    className: cls('wrap')
   }, React.createElement(animated.div, {
     style: style
-  }, body))));
-  return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
+  }, body)))));
+  return React.createElement(ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, renderToContainer(props.getContainer, node));
 };
 
 function cls(name = '') {

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

@@ -98,7 +98,7 @@ export const Ellipsis = p => {
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
-        const rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
+        const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
         container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {

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

@@ -0,0 +1,12 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { ErrorBlockStatus, ImageRecord } from '.';
+export declare type ErrorBlockProps = {
+    status?: ErrorBlockStatus;
+    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 function createErrorBlock(imageRecord: ImageRecord): React.FC<ErrorBlockProps>;

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.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/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/form/form-item.js

@@ -228,10 +228,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/image/image.d.ts

@@ -9,6 +9,7 @@ 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;