@fountain-ui/core 2.0.0-beta.36 → 2.0.0-beta.38

package/build/commonjs/Image/Image.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Image;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -15,6 +15,10 @@ var _styles = require("../styles");
 
 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; }
+
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const useStyles = function () {
@@ -39,6 +43,8 @@ const useStyles = function () {
 function Image(props) {
   const {
     alt,
+    disableDrag,
+    disableLongClick,
     disableOutline,
     disablePlaceholder,
     loading = 'lazy',
@@ -50,6 +56,7 @@ function Image(props) {
     size,
     onLoad,
     onError,
+    Placeholder: PlaceholderComponent,
     ...otherProps
   } = props;
 
@@ -65,13 +72,31 @@ function Image(props) {
     setFailed(true);
   };
 
+  const Placeholder = _ref => {
+    let {
+      failed,
+      children
+    } = _ref;
+    return PlaceholderComponent ? /*#__PURE__*/_react.default.createElement(PlaceholderComponent, {
+      children: children,
+      failed: failed
+    }) : children;
+  };
+
   const sourceWithSizeParam = { ...source,
     uri: size ? `${source.uri}?size=${size}` : source.uri
   };
+  (0, _react.useEffect)(() => {
+    setFailed(false);
+  }, [sourceWithSizeParam.uri]);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
     style: (0, _styles.css)([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
-  }, otherProps), failed ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, alt) : /*#__PURE__*/_react.default.createElement(_ImageCore.default, {
+  }, otherProps), /*#__PURE__*/_react.default.createElement(Placeholder, {
+    failed: failed
+  }, !failed ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ImageCore.default, {
     alt: alt,
+    disableDrag: disableDrag,
+    disableLongClick: disableLongClick,
     height: '100%',
     loading: loading,
     onError: handleError,
@@ -81,7 +106,7 @@ function Image(props) {
     width: '100%'
   }), overlaidChildren ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _styles.StyleSheet.absoluteFill
-  }, overlaidChildren) : null);
+  }, overlaidChildren) : null) : null));
 }
 
 ;

package/build/commonjs/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","size","onLoad","onError","otherProps","failed","setFailed","React","useState","styles","handleError","sourceWithSizeParam","uri","css","undefined","absoluteFill"],"sources":["Image.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.paper.grey,\n        },\n    };\n};\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        disableOutline,\n        disablePlaceholder,\n        loading = 'lazy',\n        overlaidChildren,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        size,\n        onLoad,\n        onError,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = React.useState(false);\n\n    const styles = useStyles();\n\n    const handleError = () => {\n        if(onError){\n            onError();\n        }\n\n        setFailed(true);\n    }\n\n    const sourceWithSizeParam = {\n        ...source,\n        uri: size ? `${source.uri}?size=${size}` : source.uri,\n    };\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !disablePlaceholder ? styles.placeholder : undefined,\n                !square ? styles.rounded : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {failed ? (\n                <Text>{alt}</Text>\n            ) : (\n                <ImageCore\n                    alt={alt}\n                    height={'100%'}\n                    loading={loading}\n                    onError={handleError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={sourceWithSizeParam}\n                    width={'100%'}\n                />\n            )}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAWA,MAAMA,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,OAAO,EAAE;MACLC,YAAY,EAAEJ,KAAK,CAACK,KAAN,CAAYC,SADrB;MAELC,QAAQ,EAAE;IAFL,CAFN;IAMHC,WAAW,EAAE;MACTC,eAAe,EAAET,KAAK,CAACU,OAAN,CAAcC,KAAd,CAAoBC;IAD5B,CANV;IASHC,QAAQ,EAAE;MACNC,WAAW,EAAEC,kBAAA,CAAWC,aADlB;MAENC,WAAW,EAAE,OAFP;MAGNC,WAAW,EAAElB,KAAK,CAACU,OAAN,CAAcC,KAAd,CAAoBC;IAH3B;EATP,CAAP;AAeH,CAlBD;;AAoBe,SAASO,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,GADE;IAEFC,cAFE;IAGFC,kBAHE;IAIFC,OAAO,GAAG,MAJR;IAKFC,gBALE;IAMFC,UAAU,GAAG,OANX;IAOFC,MAPE;IAQFC,KARE;IASFC,MAAM,GAAG,KATP;IAUFC,IAVE;IAWFC,MAXE;IAYFC,OAZE;IAaF,GAAGC;EAbD,IAcFb,KAdJ;;EAgBA,MAAM,CAACc,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,KAAf,CAA5B;;EAEA,MAAMC,MAAM,GAAGvC,SAAS,EAAxB;;EAEA,MAAMwC,WAAW,GAAG,MAAM;IACtB,IAAGP,OAAH,EAAW;MACPA,OAAO;IACV;;IAEDG,SAAS,CAAC,IAAD,CAAT;EACH,CAND;;EAQA,MAAMK,mBAAmB,GAAG,EACxB,GAAGb,MADqB;IAExBc,GAAG,EAAEX,IAAI,GAAI,GAAEH,MAAM,CAACc,GAAI,SAAQX,IAAK,EAA9B,GAAkCH,MAAM,CAACc;EAF1B,CAA5B;EAKA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAC,WAAA,EAAI,CACPJ,MAAM,CAACpC,IADA,EAEP,CAACoB,cAAD,GAAkBgB,MAAM,CAACzB,QAAzB,GAAoC8B,SAF7B,EAGP,CAACpB,kBAAD,GAAsBe,MAAM,CAAC9B,WAA7B,GAA2CmC,SAHpC,EAIP,CAACd,MAAD,GAAUS,MAAM,CAACnC,OAAjB,GAA2BwC,SAJpB,EAKPf,KALO,CAAJ;EADX,GAQQK,UARR,GAUKC,MAAM,gBACH,6BAAC,iBAAD,QAAOb,GAAP,CADG,gBAGH,6BAAC,kBAAD;IACI,GAAG,EAAEA,GADT;IAEI,MAAM,EAAE,MAFZ;IAGI,OAAO,EAAEG,OAHb;IAII,OAAO,EAAEe,WAJb;IAKI,MAAM,EAAER,MALZ;IAMI,UAAU,EAAEL,UANhB;IAOI,MAAM,EAAEc,mBAPZ;IAQI,KAAK,EAAE;EARX,EAbR,EAyBKf,gBAAgB,gBACb,6BAAC,iBAAD;IAAM,KAAK,EAAEV,kBAAA,CAAW6B;EAAxB,GACKnB,gBADL,CADa,GAIb,IA7BR,CADJ;AAiCH;;AAAA"}
+{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableDrag","disableLongClick","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","size","onLoad","onError","Placeholder","PlaceholderComponent","otherProps","failed","setFailed","React","useState","styles","handleError","children","sourceWithSizeParam","uri","useEffect","css","undefined","absoluteFill"],"sources":["Image.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\nimport { PlaceholderProps } from './ImageProps';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.paper.grey,\n        },\n    };\n};\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        disableDrag,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        loading = 'lazy',\n        overlaidChildren,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        size,\n        onLoad,\n        onError,\n        Placeholder: PlaceholderComponent,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = React.useState(false);\n\n    const styles = useStyles();\n\n    const handleError = () => {\n        if (onError) {\n            onError();\n        }\n\n        setFailed(true);\n    };\n\n    const Placeholder = ({\n        failed,\n        children,\n    }: PlaceholderProps) => PlaceholderComponent ? (\n        <PlaceholderComponent\n            children={children}\n            failed={failed}\n        />\n    ) : children;\n\n    const sourceWithSizeParam = {\n        ...source,\n        uri: size ? `${source.uri}?size=${size}` : source.uri,\n    };\n\n    useEffect(() => {\n        setFailed(false);\n    }, [sourceWithSizeParam.uri]);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !disablePlaceholder ? styles.placeholder : undefined,\n                !square ? styles.rounded : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Placeholder failed={failed}>\n                {!failed ? (\n                    <React.Fragment>\n                        <ImageCore\n                            alt={alt}\n                            disableDrag={disableDrag}\n                            disableLongClick={disableLongClick}\n                            height={'100%'}\n                            loading={loading}\n                            onError={handleError}\n                            onLoad={onLoad}\n                            resizeMode={resizeMode}\n                            source={sourceWithSizeParam}\n                            width={'100%'}\n                        />\n\n                        {overlaidChildren ? (\n                            <View style={StyleSheet.absoluteFill}>\n                                {overlaidChildren}\n                            </View>\n                        ) : null}\n                    </React.Fragment>\n                ) : null}\n            </Placeholder>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/commonjs/Image/ImageProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode } from '../ImageCore';\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactNode;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    size?: 'small' | 'medium' | 'large';\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode } from '../ImageCore';\n\nexport interface PlaceholderProps {\n    failed: boolean;\n    children: React.ReactElement | null;\n}\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * Disable drag event for web.\n     * @default false\n     */\n    disableDrag?: boolean,\n\n    /**\n     * Disable Long click event for web.\n     * @default false\n     */\n    disableLongClick?: boolean,\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactNode;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    /**\n     * Image file size.\n     * Request image by query string.\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The Custom image placeholder component with condition.\n     */\n    Placeholder?: (props: PlaceholderProps) => JSX.Element | null;\n}> {}\n"],"mappings":""}

package/build/commonjs/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Image';\nexport type { default as ImageProps } from './ImageProps';"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default } from './Image';\nexport type { default as ImageProps } from './ImageProps';\nexport type { PlaceholderProps } from './ImageProps';"],"mappings":";;;;;;;;;;;;AAAA"}

package/build/commonjs/ImageCore/ImageCoreProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\n}> {}"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    disableDrag?: boolean,\n    disableLongClick?: boolean,\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\n}> {}"],"mappings":""}

package/build/commonjs/ImageCore/ImageCoreWeb.js

@@ -9,9 +9,19 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const preventDragging = () => false;
+
+const preventMouseDown = event => {
+  if (event.preventDefault) {
+    event.preventDefault();
+  }
+};
+
 function ImageCore(props) {
   const {
     alt,
+    disableDrag = false,
+    disableLongClick = false,
     height,
     loading,
     onError,
@@ -20,13 +30,20 @@ function ImageCore(props) {
     source,
     width
   } = props;
+  const disableLongClickStyle = disableLongClick ? {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none'
+  } : {};
   const style = {
-    objectFit: resizeMode
+    objectFit: resizeMode,
+    ...disableLongClickStyle
   };
   return /*#__PURE__*/_react.default.createElement("img", {
     alt: alt,
     height: height,
     loading: loading,
+    onDragStart: disableDrag ? preventDragging : undefined,
+    onMouseDown: disableDrag ? preventMouseDown : undefined,
     onError: onError,
     onLoad: onLoad,
     src: source.uri,

package/build/commonjs/ImageCore/ImageCoreWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["ImageCore","props","alt","height","loading","onError","onLoad","resizeMode","source","width","style","objectFit","uri"],"sources":["ImageCoreWeb.tsx"],"sourcesContent":["import React from 'react';\nimport type ImageCoreProps from './ImageCoreProps';\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        alt,\n        height,\n        loading,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const style = { objectFit: resizeMode };\n\n    return (\n        <img\n            alt={alt}\n            height={height}\n            loading={loading}\n            onError={onError}\n            onLoad={onLoad}\n            src={source.uri}\n            style={style}\n            width={width}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;;;AAGe,SAASA,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,GADE;IAEFC,MAFE;IAGFC,OAHE;IAIFC,OAJE;IAKFC,MALE;IAMFC,UANE;IAOFC,MAPE;IAQFC;EARE,IASFR,KATJ;EAWA,MAAMS,KAAK,GAAG;IAAEC,SAAS,EAAEJ;EAAb,CAAd;EAEA,oBACI;IACI,GAAG,EAAEL,GADT;IAEI,MAAM,EAAEC,MAFZ;IAGI,OAAO,EAAEC,OAHb;IAII,OAAO,EAAEC,OAJb;IAKI,MAAM,EAAEC,MALZ;IAMI,GAAG,EAAEE,MAAM,CAACI,GANhB;IAOI,KAAK,EAAEF,KAPX;IAQI,KAAK,EAAED;EARX,EADJ;AAYH;;AAAA"}
+{"version":3,"names":["preventDragging","preventMouseDown","event","preventDefault","ImageCore","props","alt","disableDrag","disableLongClick","height","loading","onError","onLoad","resizeMode","source","width","disableLongClickStyle","style","objectFit","undefined","uri"],"sources":["ImageCoreWeb.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\nimport type ImageCoreProps from './ImageCoreProps';\n\nconst preventDragging = () => false;\n\nconst preventMouseDown: MouseEventHandler<HTMLImageElement> = (event) => {\n    if (event.preventDefault) {\n        event.preventDefault();\n    }\n};\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        alt,\n        disableDrag = false,\n        disableLongClick = false,\n        height,\n        loading,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const disableLongClickStyle = disableLongClick\n        ? {\n            '-webkit-user-select': 'none',\n            '-webkit-touch-callout': 'none',\n        }\n        : {};\n\n    const style = {\n        objectFit: resizeMode,\n        ...disableLongClickStyle,\n    };\n\n    return (\n        <img\n            alt={alt}\n            height={height}\n            loading={loading}\n            onDragStart={disableDrag ? preventDragging : undefined}\n            onMouseDown={disableDrag ? preventMouseDown : undefined}\n            onError={onError}\n            onLoad={onLoad}\n            src={source.uri}\n            style={style}\n            width={width}\n        />\n    );\n};\n"],"mappings":";;;;;;;AAAA;;;;AAGA,MAAMA,eAAe,GAAG,MAAM,KAA9B;;AAEA,MAAMC,gBAAqD,GAAIC,KAAD,IAAW;EACrE,IAAIA,KAAK,CAACC,cAAV,EAA0B;IACtBD,KAAK,CAACC,cAAN;EACH;AACJ,CAJD;;AAMe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,GADE;IAEFC,WAAW,GAAG,KAFZ;IAGFC,gBAAgB,GAAG,KAHjB;IAIFC,MAJE;IAKFC,OALE;IAMFC,OANE;IAOFC,MAPE;IAQFC,UARE;IASFC,MATE;IAUFC;EAVE,IAWFV,KAXJ;EAaA,MAAMW,qBAAqB,GAAGR,gBAAgB,GACxC;IACE,uBAAuB,MADzB;IAEE,yBAAyB;EAF3B,CADwC,GAKxC,EALN;EAOA,MAAMS,KAAK,GAAG;IACVC,SAAS,EAAEL,UADD;IAEV,GAAGG;EAFO,CAAd;EAKA,oBACI;IACI,GAAG,EAAEV,GADT;IAEI,MAAM,EAAEG,MAFZ;IAGI,OAAO,EAAEC,OAHb;IAII,WAAW,EAAEH,WAAW,GAAGP,eAAH,GAAqBmB,SAJjD;IAKI,WAAW,EAAEZ,WAAW,GAAGN,gBAAH,GAAsBkB,SALlD;IAMI,OAAO,EAAER,OANb;IAOI,MAAM,EAAEC,MAPZ;IAQI,GAAG,EAAEE,MAAM,CAACM,GARhB;IASI,KAAK,EAAEH,KATX;IAUI,KAAK,EAAEF;EAVX,EADJ;AAcH;;AAAA"}

package/build/module/Image/Image.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
-import { Text, View } from 'react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
 import ImageCore from '../ImageCore';
 import { css, StyleSheet, useTheme } from '../styles';
 
@@ -27,6 +27,8 @@ const useStyles = function () {
 export default function Image(props) {
   const {
     alt,
+    disableDrag,
+    disableLongClick,
     disableOutline,
     disablePlaceholder,
     loading = 'lazy',
@@ -38,6 +40,7 @@ export default function Image(props) {
     size,
     onLoad,
     onError,
+    Placeholder: PlaceholderComponent,
     ...otherProps
   } = props;
   const [failed, setFailed] = React.useState(false);
@@ -51,13 +54,31 @@ export default function Image(props) {
     setFailed(true);
   };
 
+  const Placeholder = _ref => {
+    let {
+      failed,
+      children
+    } = _ref;
+    return PlaceholderComponent ? /*#__PURE__*/React.createElement(PlaceholderComponent, {
+      children: children,
+      failed: failed
+    }) : children;
+  };
+
   const sourceWithSizeParam = { ...source,
     uri: size ? `${source.uri}?size=${size}` : source.uri
   };
+  useEffect(() => {
+    setFailed(false);
+  }, [sourceWithSizeParam.uri]);
   return /*#__PURE__*/React.createElement(View, _extends({
     style: css([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
-  }, otherProps), failed ? /*#__PURE__*/React.createElement(Text, null, alt) : /*#__PURE__*/React.createElement(ImageCore, {
+  }, otherProps), /*#__PURE__*/React.createElement(Placeholder, {
+    failed: failed
+  }, !failed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageCore, {
     alt: alt,
+    disableDrag: disableDrag,
+    disableLongClick: disableLongClick,
     height: '100%',
     loading: loading,
     onError: handleError,
@@ -67,7 +88,7 @@ export default function Image(props) {
     width: '100%'
   }), overlaidChildren ? /*#__PURE__*/React.createElement(View, {
     style: StyleSheet.absoluteFill
-  }, overlaidChildren) : null);
+  }, overlaidChildren) : null) : null));
 }
 ;
 //# sourceMappingURL=Image.js.map

package/build/module/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","size","onLoad","onError","otherProps","failed","setFailed","useState","styles","handleError","sourceWithSizeParam","uri","undefined","absoluteFill"],"sources":["Image.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.paper.grey,\n        },\n    };\n};\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        disableOutline,\n        disablePlaceholder,\n        loading = 'lazy',\n        overlaidChildren,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        size,\n        onLoad,\n        onError,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = React.useState(false);\n\n    const styles = useStyles();\n\n    const handleError = () => {\n        if(onError){\n            onError();\n        }\n\n        setFailed(true);\n    }\n\n    const sourceWithSizeParam = {\n        ...source,\n        uri: size ? `${source.uri}?size=${size}` : source.uri,\n    };\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !disablePlaceholder ? styles.placeholder : undefined,\n                !square ? styles.rounded : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            {failed ? (\n                <Text>{alt}</Text>\n            ) : (\n                <ImageCore\n                    alt={alt}\n                    height={'100%'}\n                    loading={loading}\n                    onError={handleError}\n                    onLoad={onLoad}\n                    resizeMode={resizeMode}\n                    source={sourceWithSizeParam}\n                    width={'100%'}\n                />\n            )}\n\n            {overlaidChildren ? (\n                <View style={StyleSheet.absoluteFill}>\n                    {overlaidChildren}\n                </View>\n            ) : null}\n        </View>\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;;AAWA,MAAMC,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE,EADH;IAEHC,OAAO,EAAE;MACLC,YAAY,EAAEH,KAAK,CAACI,KAAN,CAAYC,SADrB;MAELC,QAAQ,EAAE;IAFL,CAFN;IAMHC,WAAW,EAAE;MACTC,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;IAD5B,CANV;IASHC,QAAQ,EAAE;MACNC,WAAW,EAAEhB,UAAU,CAACiB,aADlB;MAENC,WAAW,EAAE,OAFP;MAGNC,WAAW,EAAEhB,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;IAH3B;EATP,CAAP;AAeH,CAlBD;;AAoBA,eAAe,SAASM,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,GADE;IAEFC,cAFE;IAGFC,kBAHE;IAIFC,OAAO,GAAG,MAJR;IAKFC,gBALE;IAMFC,UAAU,GAAG,OANX;IAOFC,MAPE;IAQFC,KARE;IASFC,MAAM,GAAG,KATP;IAUFC,IAVE;IAWFC,MAXE;IAYFC,OAZE;IAaF,GAAGC;EAbD,IAcFb,KAdJ;EAgBA,MAAM,CAACc,MAAD,EAASC,SAAT,IAAsBzC,KAAK,CAAC0C,QAAN,CAAe,KAAf,CAA5B;EAEA,MAAMC,MAAM,GAAGpC,SAAS,EAAxB;;EAEA,MAAMqC,WAAW,GAAG,MAAM;IACtB,IAAGN,OAAH,EAAW;MACPA,OAAO;IACV;;IAEDG,SAAS,CAAC,IAAD,CAAT;EACH,CAND;;EAQA,MAAMI,mBAAmB,GAAG,EACxB,GAAGZ,MADqB;IAExBa,GAAG,EAAEV,IAAI,GAAI,GAAEH,MAAM,CAACa,GAAI,SAAQV,IAAK,EAA9B,GAAkCH,MAAM,CAACa;EAF1B,CAA5B;EAKA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAE1C,GAAG,CAAC,CACPuC,MAAM,CAAClC,IADA,EAEP,CAACmB,cAAD,GAAkBe,MAAM,CAACvB,QAAzB,GAAoC2B,SAF7B,EAGP,CAAClB,kBAAD,GAAsBc,MAAM,CAAC5B,WAA7B,GAA2CgC,SAHpC,EAIP,CAACZ,MAAD,GAAUQ,MAAM,CAACjC,OAAjB,GAA2BqC,SAJpB,EAKPb,KALO,CAAD;EADd,GAQQK,UARR,GAUKC,MAAM,gBACH,oBAAC,IAAD,QAAOb,GAAP,CADG,gBAGH,oBAAC,SAAD;IACI,GAAG,EAAEA,GADT;IAEI,MAAM,EAAE,MAFZ;IAGI,OAAO,EAAEG,OAHb;IAII,OAAO,EAAEc,WAJb;IAKI,MAAM,EAAEP,MALZ;IAMI,UAAU,EAAEL,UANhB;IAOI,MAAM,EAAEa,mBAPZ;IAQI,KAAK,EAAE;EARX,EAbR,EAyBKd,gBAAgB,gBACb,oBAAC,IAAD;IAAM,KAAK,EAAE1B,UAAU,CAAC2C;EAAxB,GACKjB,gBADL,CADa,GAIb,IA7BR,CADJ;AAiCH;AAAA"}
+{"version":3,"names":["React","useEffect","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableDrag","disableLongClick","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","size","onLoad","onError","Placeholder","PlaceholderComponent","otherProps","failed","setFailed","useState","styles","handleError","children","sourceWithSizeParam","uri","undefined","absoluteFill"],"sources":["Image.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\nimport { PlaceholderProps } from './ImageProps';\n\ntype ImageStyleKeys =\n    | 'root'\n    | 'rounded'\n    | 'placeholder'\n    | 'outlined';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n    const theme = useTheme();\n\n    return {\n        root: {},\n        rounded: {\n            borderRadius: theme.shape.roundness,\n            overflow: 'hidden',\n        },\n        placeholder: {\n            backgroundColor: theme.palette.paper.grey,\n        },\n        outlined: {\n            borderWidth: StyleSheet.hairlineWidth,\n            borderStyle: 'solid',\n            borderColor: theme.palette.paper.grey,\n        },\n    };\n};\n\nexport default function Image(props: ImageProps) {\n    const {\n        alt,\n        disableDrag,\n        disableLongClick,\n        disableOutline,\n        disablePlaceholder,\n        loading = 'lazy',\n        overlaidChildren,\n        resizeMode = 'cover',\n        source,\n        style,\n        square = false,\n        size,\n        onLoad,\n        onError,\n        Placeholder: PlaceholderComponent,\n        ...otherProps\n    } = props;\n\n    const [failed, setFailed] = React.useState(false);\n\n    const styles = useStyles();\n\n    const handleError = () => {\n        if (onError) {\n            onError();\n        }\n\n        setFailed(true);\n    };\n\n    const Placeholder = ({\n        failed,\n        children,\n    }: PlaceholderProps) => PlaceholderComponent ? (\n        <PlaceholderComponent\n            children={children}\n            failed={failed}\n        />\n    ) : children;\n\n    const sourceWithSizeParam = {\n        ...source,\n        uri: size ? `${source.uri}?size=${size}` : source.uri,\n    };\n\n    useEffect(() => {\n        setFailed(false);\n    }, [sourceWithSizeParam.uri]);\n\n    return (\n        <View\n            style={css([\n                styles.root,\n                !disableOutline ? styles.outlined : undefined,\n                !disablePlaceholder ? styles.placeholder : undefined,\n                !square ? styles.rounded : undefined,\n                style,\n            ])}\n            {...otherProps}\n        >\n            <Placeholder failed={failed}>\n                {!failed ? (\n                    <React.Fragment>\n                        <ImageCore\n                            alt={alt}\n                            disableDrag={disableDrag}\n                            disableLongClick={disableLongClick}\n                            height={'100%'}\n                            loading={loading}\n                            onError={handleError}\n                            onLoad={onLoad}\n                            resizeMode={resizeMode}\n                            source={sourceWithSizeParam}\n                            width={'100%'}\n                        />\n\n                        {overlaidChildren ? (\n                            <View style={StyleSheet.absoluteFill}>\n                                {overlaidChildren}\n                            </View>\n                        ) : null}\n                    </React.Fragment>\n                ) : null}\n            </Placeholder>\n        </View>\n    );\n};\n"],"mappings":"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"}

package/build/module/Image/ImageProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode } from '../ImageCore';\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactNode;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    size?: 'small' | 'medium' | 'large';\n}> {}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '../types';\nimport type { ImageSource, Loading, ResizeMode } from '../ImageCore';\n\nexport interface PlaceholderProps {\n    failed: boolean;\n    children: React.ReactElement | null;\n}\n\nexport default interface ImageProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * Indicating the alternate fallback content to be displayed\n     * if the image has not been loaded.\n     */\n    alt?: string;\n\n    /**\n     * Disable drag event for web.\n     * @default false\n     */\n    disableDrag?: boolean,\n\n    /**\n     * Disable Long click event for web.\n     * @default false\n     */\n    disableLongClick?: boolean,\n\n    /**\n     * If `true`, the image outline is not rendered.\n     * @default false\n     */\n    disableOutline?: boolean;\n\n    /**\n     * If `true`, the placeholder is not rendered.\n     * @default false\n     */\n    disablePlaceholder?: boolean;\n\n    /**\n     * Web only. Loading the document by determining whether to load\n     * the image immediately (`eager`) or on an as-needed basis (`lazy`).\n     * On React Native, it always works as `lazy`.\n     * @default 'lazy'\n     */\n    loading?: Loading;\n\n    /**\n     * error event handler\n     */\n    onError?: () => void;\n\n    /**\n     * image loaded event handler\n     */\n    onLoad?: () => void;\n\n    /**\n     * The children on top this image.\n     */\n    overlaidChildren?: React.ReactNode;\n\n    /**\n     * Determines how to resize the image when the frame doesn't match the raw image dimensions.\n     * @default 'cover'\n     */\n    resizeMode?: ResizeMode;\n\n    /**\n     * The image source.\n     */\n    source: ImageSource;\n\n    /**\n     * If `true`, rounded corners are disabled.\n     * @default false\n     */\n    square?: boolean;\n\n    /**\n     * Image file size.\n     * Request image by query string.\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * The Custom image placeholder component with condition.\n     */\n    Placeholder?: (props: PlaceholderProps) => JSX.Element | null;\n}> {}\n"],"mappings":""}

package/build/module/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Image';\nexport type { default as ImageProps } from './ImageProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB"}
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './Image';\nexport type { default as ImageProps } from './ImageProps';\nexport type { PlaceholderProps } from './ImageProps';"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB"}

package/build/module/ImageCore/ImageCoreProps.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\n}> {}"],"mappings":""}
+{"version":3,"names":[],"sources":["ImageCoreProps.ts"],"sourcesContent":["export interface ImageSource {\n    uri: string;\n}\n\nexport type ResizeMode = 'cover' | 'contain';\n\nexport type Loading = 'lazy' | 'eager';\n\nexport default interface ImageCoreProps extends Readonly<{\n    alt?: string;\n    disableDrag?: boolean,\n    disableLongClick?: boolean,\n    height?: number | string;\n    loading: Loading;\n    onError?: () => void;\n    onLoad?: () => void;\n    resizeMode: ResizeMode;\n    source: ImageSource;\n    width?: number | string;\n}> {}"],"mappings":""}

package/build/module/ImageCore/ImageCoreWeb.js

@@ -1,7 +1,18 @@
 import React from 'react';
+
+const preventDragging = () => false;
+
+const preventMouseDown = event => {
+  if (event.preventDefault) {
+    event.preventDefault();
+  }
+};
+
 export default function ImageCore(props) {
   const {
     alt,
+    disableDrag = false,
+    disableLongClick = false,
     height,
     loading,
     onError,
@@ -10,13 +21,20 @@ export default function ImageCore(props) {
     source,
     width
   } = props;
+  const disableLongClickStyle = disableLongClick ? {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none'
+  } : {};
   const style = {
-    objectFit: resizeMode
+    objectFit: resizeMode,
+    ...disableLongClickStyle
   };
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     height: height,
     loading: loading,
+    onDragStart: disableDrag ? preventDragging : undefined,
+    onMouseDown: disableDrag ? preventMouseDown : undefined,
     onError: onError,
     onLoad: onLoad,
     src: source.uri,

package/build/module/ImageCore/ImageCoreWeb.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ImageCore","props","alt","height","loading","onError","onLoad","resizeMode","source","width","style","objectFit","uri"],"sources":["ImageCoreWeb.tsx"],"sourcesContent":["import React from 'react';\nimport type ImageCoreProps from './ImageCoreProps';\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        alt,\n        height,\n        loading,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const style = { objectFit: resizeMode };\n\n    return (\n        <img\n            alt={alt}\n            height={height}\n            loading={loading}\n            onError={onError}\n            onLoad={onLoad}\n            src={source.uri}\n            style={style}\n            width={width}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,GADE;IAEFC,MAFE;IAGFC,OAHE;IAIFC,OAJE;IAKFC,MALE;IAMFC,UANE;IAOFC,MAPE;IAQFC;EARE,IASFR,KATJ;EAWA,MAAMS,KAAK,GAAG;IAAEC,SAAS,EAAEJ;EAAb,CAAd;EAEA,oBACI;IACI,GAAG,EAAEL,GADT;IAEI,MAAM,EAAEC,MAFZ;IAGI,OAAO,EAAEC,OAHb;IAII,OAAO,EAAEC,OAJb;IAKI,MAAM,EAAEC,MALZ;IAMI,GAAG,EAAEE,MAAM,CAACI,GANhB;IAOI,KAAK,EAAEF,KAPX;IAQI,KAAK,EAAED;EARX,EADJ;AAYH;AAAA"}
+{"version":3,"names":["React","preventDragging","preventMouseDown","event","preventDefault","ImageCore","props","alt","disableDrag","disableLongClick","height","loading","onError","onLoad","resizeMode","source","width","disableLongClickStyle","style","objectFit","undefined","uri"],"sources":["ImageCoreWeb.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\nimport type ImageCoreProps from './ImageCoreProps';\n\nconst preventDragging = () => false;\n\nconst preventMouseDown: MouseEventHandler<HTMLImageElement> = (event) => {\n    if (event.preventDefault) {\n        event.preventDefault();\n    }\n};\n\nexport default function ImageCore(props: ImageCoreProps) {\n    const {\n        alt,\n        disableDrag = false,\n        disableLongClick = false,\n        height,\n        loading,\n        onError,\n        onLoad,\n        resizeMode,\n        source,\n        width,\n    } = props;\n\n    const disableLongClickStyle = disableLongClick\n        ? {\n            '-webkit-user-select': 'none',\n            '-webkit-touch-callout': 'none',\n        }\n        : {};\n\n    const style = {\n        objectFit: resizeMode,\n        ...disableLongClickStyle,\n    };\n\n    return (\n        <img\n            alt={alt}\n            height={height}\n            loading={loading}\n            onDragStart={disableDrag ? preventDragging : undefined}\n            onMouseDown={disableDrag ? preventMouseDown : undefined}\n            onError={onError}\n            onLoad={onLoad}\n            src={source.uri}\n            style={style}\n            width={width}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAyC,OAAzC;;AAGA,MAAMC,eAAe,GAAG,MAAM,KAA9B;;AAEA,MAAMC,gBAAqD,GAAIC,KAAD,IAAW;EACrE,IAAIA,KAAK,CAACC,cAAV,EAA0B;IACtBD,KAAK,CAACC,cAAN;EACH;AACJ,CAJD;;AAMA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,GADE;IAEFC,WAAW,GAAG,KAFZ;IAGFC,gBAAgB,GAAG,KAHjB;IAIFC,MAJE;IAKFC,OALE;IAMFC,OANE;IAOFC,MAPE;IAQFC,UARE;IASFC,MATE;IAUFC;EAVE,IAWFV,KAXJ;EAaA,MAAMW,qBAAqB,GAAGR,gBAAgB,GACxC;IACE,uBAAuB,MADzB;IAEE,yBAAyB;EAF3B,CADwC,GAKxC,EALN;EAOA,MAAMS,KAAK,GAAG;IACVC,SAAS,EAAEL,UADD;IAEV,GAAGG;EAFO,CAAd;EAKA,oBACI;IACI,GAAG,EAAEV,GADT;IAEI,MAAM,EAAEG,MAFZ;IAGI,OAAO,EAAEC,OAHb;IAII,WAAW,EAAEH,WAAW,GAAGP,eAAH,GAAqBmB,SAJjD;IAKI,WAAW,EAAEZ,WAAW,GAAGN,gBAAH,GAAsBkB,SALlD;IAMI,OAAO,EAAER,OANb;IAOI,MAAM,EAAEC,MAPZ;IAQI,GAAG,EAAEE,MAAM,CAACM,GARhB;IASI,KAAK,EAAEH,KATX;IAUI,KAAK,EAAEF;EAVX,EADJ;AAcH;AAAA"}

package/build/typescript/Image/ImageProps.d.ts

@@ -2,12 +2,26 @@ import React from 'react';
 import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 import type { ImageSource, Loading, ResizeMode } from '../ImageCore';
+export interface PlaceholderProps {
+    failed: boolean;
+    children: React.ReactElement | null;
+}
 export default interface ImageProps extends OverridableComponentProps<ViewProps, {
     /**
      * Indicating the alternate fallback content to be displayed
      * if the image has not been loaded.
      */
     alt?: string;
+    /**
+     * Disable drag event for web.
+     * @default false
+     */
+    disableDrag?: boolean;
+    /**
+     * Disable Long click event for web.
+     * @default false
+     */
+    disableLongClick?: boolean;
     /**
      * If `true`, the image outline is not rendered.
      * @default false
@@ -51,6 +65,14 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      * @default false
      */
     square?: boolean;
+    /**
+     * Image file size.
+     * Request image by query string.
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * The Custom image placeholder component with condition.
+     */
+    Placeholder?: (props: PlaceholderProps) => JSX.Element | null;
 }> {
 }

package/build/typescript/Image/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Image';
 export type { default as ImageProps } from './ImageProps';
+export type { PlaceholderProps } from './ImageProps';

package/build/typescript/ImageCore/ImageCoreProps.d.ts

@@ -5,6 +5,8 @@ export declare type ResizeMode = 'cover' | 'contain';
 export declare type Loading = 'lazy' | 'eager';
 export default interface ImageCoreProps extends Readonly<{
     alt?: string;
+    disableDrag?: boolean;
+    disableLongClick?: boolean;
     height?: number | string;
     loading: Loading;
     onError?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.36",
+  "version": "2.0.0-beta.38",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "019b85d550c729ccca7f3877d6aebe3fa02bd2ec"
+  "gitHead": "c967fb1d7418883204e42ee037f2969107bcbaa6"
 }

package/src/Image/Image.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { Text, View } from 'react-native';
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import ImageCore from '../ImageCore';
 import { css, StyleSheet, useTheme } from '../styles';
 import type ImageProps from './ImageProps';
+import { PlaceholderProps } from './ImageProps';
 
 type ImageStyleKeys =
     | 'root'
@@ -36,6 +37,8 @@ const useStyles: UseStyles<ImageStyles> = function (): ImageStyles {
 export default function Image(props: ImageProps) {
     const {
         alt,
+        disableDrag,
+        disableLongClick,
         disableOutline,
         disablePlaceholder,
         loading = 'lazy',
@@ -47,6 +50,7 @@ export default function Image(props: ImageProps) {
         size,
         onLoad,
         onError,
+        Placeholder: PlaceholderComponent,
         ...otherProps
     } = props;
 
@@ -55,18 +59,32 @@ export default function Image(props: ImageProps) {
     const styles = useStyles();
 
     const handleError = () => {
-        if(onError){
+        if (onError) {
             onError();
         }
 
         setFailed(true);
-    }
+    };
+
+    const Placeholder = ({
+        failed,
+        children,
+    }: PlaceholderProps) => PlaceholderComponent ? (
+        <PlaceholderComponent
+            children={children}
+            failed={failed}
+        />
+    ) : children;
 
     const sourceWithSizeParam = {
         ...source,
         uri: size ? `${source.uri}?size=${size}` : source.uri,
     };
 
+    useEffect(() => {
+        setFailed(false);
+    }, [sourceWithSizeParam.uri]);
+
     return (
         <View
             style={css([
@@ -78,26 +96,30 @@ export default function Image(props: ImageProps) {
             ])}
             {...otherProps}
         >
-            {failed ? (
-                <Text>{alt}</Text>
-            ) : (
-                <ImageCore
-                    alt={alt}
-                    height={'100%'}
-                    loading={loading}
-                    onError={handleError}
-                    onLoad={onLoad}
-                    resizeMode={resizeMode}
-                    source={sourceWithSizeParam}
-                    width={'100%'}
-                />
-            )}
+            <Placeholder failed={failed}>
+                {!failed ? (
+                    <React.Fragment>
+                        <ImageCore
+                            alt={alt}
+                            disableDrag={disableDrag}
+                            disableLongClick={disableLongClick}
+                            height={'100%'}
+                            loading={loading}
+                            onError={handleError}
+                            onLoad={onLoad}
+                            resizeMode={resizeMode}
+                            source={sourceWithSizeParam}
+                            width={'100%'}
+                        />
 
-            {overlaidChildren ? (
-                <View style={StyleSheet.absoluteFill}>
-                    {overlaidChildren}
-                </View>
-            ) : null}
+                        {overlaidChildren ? (
+                            <View style={StyleSheet.absoluteFill}>
+                                {overlaidChildren}
+                            </View>
+                        ) : null}
+                    </React.Fragment>
+                ) : null}
+            </Placeholder>
         </View>
     );
 };

package/src/Image/ImageProps.ts

@@ -3,6 +3,11 @@ import type { ViewProps } from 'react-native';
 import type { OverridableComponentProps } from '../types';
 import type { ImageSource, Loading, ResizeMode } from '../ImageCore';
 
+export interface PlaceholderProps {
+    failed: boolean;
+    children: React.ReactElement | null;
+}
+
 export default interface ImageProps extends OverridableComponentProps<ViewProps, {
     /**
      * Indicating the alternate fallback content to be displayed
@@ -10,6 +15,18 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      */
     alt?: string;
 
+    /**
+     * Disable drag event for web.
+     * @default false
+     */
+    disableDrag?: boolean,
+
+    /**
+     * Disable Long click event for web.
+     * @default false
+     */
+    disableLongClick?: boolean,
+
     /**
      * If `true`, the image outline is not rendered.
      * @default false
@@ -62,5 +79,14 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
      */
     square?: boolean;
 
+    /**
+     * Image file size.
+     * Request image by query string.
+     */
     size?: 'small' | 'medium' | 'large';
+
+    /**
+     * The Custom image placeholder component with condition.
+     */
+    Placeholder?: (props: PlaceholderProps) => JSX.Element | null;
 }> {}

package/src/Image/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Image';
-export type { default as ImageProps } from './ImageProps';
+export type { default as ImageProps } from './ImageProps';
+export type { PlaceholderProps } from './ImageProps';

package/src/ImageCore/ImageCoreProps.ts

@@ -8,6 +8,8 @@ export type Loading = 'lazy' | 'eager';
 
 export default interface ImageCoreProps extends Readonly<{
     alt?: string;
+    disableDrag?: boolean,
+    disableLongClick?: boolean,
     height?: number | string;
     loading: Loading;
     onError?: () => void;

package/src/ImageCore/ImageCoreWeb.tsx

@@ -1,9 +1,19 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import type ImageCoreProps from './ImageCoreProps';
 
+const preventDragging = () => false;
+
+const preventMouseDown: MouseEventHandler<HTMLImageElement> = (event) => {
+    if (event.preventDefault) {
+        event.preventDefault();
+    }
+};
+
 export default function ImageCore(props: ImageCoreProps) {
     const {
         alt,
+        disableDrag = false,
+        disableLongClick = false,
         height,
         loading,
         onError,
@@ -13,13 +23,25 @@ export default function ImageCore(props: ImageCoreProps) {
         width,
     } = props;
 
-    const style = { objectFit: resizeMode };
+    const disableLongClickStyle = disableLongClick
+        ? {
+            '-webkit-user-select': 'none',
+            '-webkit-touch-callout': 'none',
+        }
+        : {};
+
+    const style = {
+        objectFit: resizeMode,
+        ...disableLongClickStyle,
+    };
 
     return (
         <img
             alt={alt}
             height={height}
             loading={loading}
+            onDragStart={disableDrag ? preventDragging : undefined}
+            onMouseDown={disableDrag ? preventMouseDown : undefined}
             onError={onError}
             onLoad={onLoad}
             src={source.uri}