@fountain-ui/core 2.0.0-beta.38 → 2.0.0-beta.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/commonjs/Image/Image.js +5 -2
- package/build/commonjs/Image/Image.js.map +1 -1
- package/build/commonjs/Image/ImageProps.js.map +1 -1
- package/build/module/Image/Image.js +5 -2
- package/build/module/Image/Image.js.map +1 -1
- package/build/module/Image/ImageProps.js.map +1 -1
- package/build/typescript/Image/ImageProps.d.ts +5 -0
- package/package.json +2 -2
- package/src/Image/Image.tsx +6 -3
- package/src/Image/ImageProps.ts +7 -1
|
@@ -47,6 +47,7 @@ function Image(props) {
|
|
|
47
47
|
disableLongClick,
|
|
48
48
|
disableOutline,
|
|
49
49
|
disablePlaceholder,
|
|
50
|
+
failDependency = [],
|
|
50
51
|
loading = 'lazy',
|
|
51
52
|
overlaidChildren,
|
|
52
53
|
resizeMode = 'cover',
|
|
@@ -87,8 +88,10 @@ function Image(props) {
|
|
|
87
88
|
uri: size ? `${source.uri}?size=${size}` : source.uri
|
|
88
89
|
};
|
|
89
90
|
(0, _react.useEffect)(() => {
|
|
90
|
-
|
|
91
|
-
|
|
91
|
+
if (failed !== false) {
|
|
92
|
+
setFailed(false);
|
|
93
|
+
}
|
|
94
|
+
}, [...failDependency]);
|
|
92
95
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
93
96
|
style: (0, _styles.css)([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
|
|
94
97
|
}, otherProps), /*#__PURE__*/_react.default.createElement(Placeholder, {
|
|
@@ -1 +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","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 }, [
|
|
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","disableDrag","disableLongClick","disableOutline","disablePlaceholder","failDependency","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 failDependency = [],\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 if (failed !== false) {\n setFailed(false);\n }\n }, [...failDependency]);\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};"],"mappings":"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"}
|
|
@@ -1 +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 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}> {}
|
|
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 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 /**\n * Dependency array for reset failed value to false.\n * @default []\n */\n failDependency?: Array<any>;\n}> {}"],"mappings":""}
|
|
@@ -31,6 +31,7 @@ export default function Image(props) {
|
|
|
31
31
|
disableLongClick,
|
|
32
32
|
disableOutline,
|
|
33
33
|
disablePlaceholder,
|
|
34
|
+
failDependency = [],
|
|
34
35
|
loading = 'lazy',
|
|
35
36
|
overlaidChildren,
|
|
36
37
|
resizeMode = 'cover',
|
|
@@ -69,8 +70,10 @@ export default function Image(props) {
|
|
|
69
70
|
uri: size ? `${source.uri}?size=${size}` : source.uri
|
|
70
71
|
};
|
|
71
72
|
useEffect(() => {
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
if (failed !== false) {
|
|
74
|
+
setFailed(false);
|
|
75
|
+
}
|
|
76
|
+
}, [...failDependency]);
|
|
74
77
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
75
78
|
style: css([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
|
|
76
79
|
}, otherProps), /*#__PURE__*/React.createElement(Placeholder, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 }, [
|
|
1
|
+
{"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","failDependency","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 failDependency = [],\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 if (failed !== false) {\n setFailed(false);\n }\n }, [...failDependency]);\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};"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;;AAYA,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,WAFE;IAGFC,gBAHE;IAIFC,cAJE;IAKFC,kBALE;IAMFC,cAAc,GAAG,EANf;IAOFC,OAAO,GAAG,MAPR;IAQFC,gBARE;IASFC,UAAU,GAAG,OATX;IAUFC,MAVE;IAWFC,KAXE;IAYFC,MAAM,GAAG,KAZP;IAaFC,IAbE;IAcFC,MAdE;IAeFC,OAfE;IAgBFC,WAAW,EAAEC,oBAhBX;IAiBF,GAAGC;EAjBD,IAkBFlB,KAlBJ;EAoBA,MAAM,CAACmB,MAAD,EAASC,SAAT,IAAsB9C,KAAK,CAAC+C,QAAN,CAAe,KAAf,CAA5B;EAEA,MAAMC,MAAM,GAAGzC,SAAS,EAAxB;;EAEA,MAAM0C,WAAW,GAAG,MAAM;IACtB,IAAIR,OAAJ,EAAa;MACTA,OAAO;IACV;;IAEDK,SAAS,CAAC,IAAD,CAAT;EACH,CAND;;EAQA,MAAMJ,WAAW,GAAG;IAAA,IAAC;MACjBG,MADiB;MAEjBK;IAFiB,CAAD;IAAA,OAGIP,oBAAoB,gBACxC,oBAAC,oBAAD;MACI,QAAQ,EAAEO,QADd;MAEI,MAAM,EAAEL;IAFZ,EADwC,GAKxCK,QARgB;EAAA,CAApB;;EAUA,MAAMC,mBAAmB,GAAG,EACxB,GAAGf,MADqB;IAExBgB,GAAG,EAAEb,IAAI,GAAI,GAAEH,MAAM,CAACgB,GAAI,SAAQb,IAAK,EAA9B,GAAkCH,MAAM,CAACgB;EAF1B,CAA5B;EAKAnD,SAAS,CAAC,MAAM;IACZ,IAAI4C,MAAM,KAAK,KAAf,EAAsB;MAClBC,SAAS,CAAC,KAAD,CAAT;IACH;EACJ,CAJQ,EAIN,CAAC,GAAGd,cAAJ,CAJM,CAAT;EAMA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAE5B,GAAG,CAAC,CACP4C,MAAM,CAACvC,IADA,EAEP,CAACqB,cAAD,GAAkBkB,MAAM,CAAC5B,QAAzB,GAAoCiC,SAF7B,EAGP,CAACtB,kBAAD,GAAsBiB,MAAM,CAACjC,WAA7B,GAA2CsC,SAHpC,EAIP,CAACf,MAAD,GAAUU,MAAM,CAACtC,OAAjB,GAA2B2C,SAJpB,EAKPhB,KALO,CAAD;EADd,GAQQO,UARR,gBAUI,oBAAC,WAAD;IAAa,MAAM,EAAEC;EAArB,GACK,CAACA,MAAD,gBACG,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,SAAD;IACI,GAAG,EAAElB,GADT;IAEI,WAAW,EAAEC,WAFjB;IAGI,gBAAgB,EAAEC,gBAHtB;IAII,MAAM,EAAE,MAJZ;IAKI,OAAO,EAAEI,OALb;IAMI,OAAO,EAAEgB,WANb;IAOI,MAAM,EAAET,MAPZ;IAQI,UAAU,EAAEL,UARhB;IASI,MAAM,EAAEgB,mBATZ;IAUI,KAAK,EAAE;EAVX,EADJ,EAcKjB,gBAAgB,gBACb,oBAAC,IAAD;IAAM,KAAK,EAAE7B,UAAU,CAACiD;EAAxB,GACKpB,gBADL,CADa,GAIb,IAlBR,CADH,GAqBG,IAtBR,CAVJ,CADJ;AAqCH;AAAA"}
|
|
@@ -1 +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 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}> {}
|
|
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 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 /**\n * Dependency array for reset failed value to false.\n * @default []\n */\n failDependency?: Array<any>;\n}> {}"],"mappings":""}
|
|
@@ -74,5 +74,10 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
|
|
|
74
74
|
* The Custom image placeholder component with condition.
|
|
75
75
|
*/
|
|
76
76
|
Placeholder?: (props: PlaceholderProps) => JSX.Element | null;
|
|
77
|
+
/**
|
|
78
|
+
* Dependency array for reset failed value to false.
|
|
79
|
+
* @default []
|
|
80
|
+
*/
|
|
81
|
+
failDependency?: Array<any>;
|
|
77
82
|
}> {
|
|
78
83
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.39",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "44aa49c39c8a9f0986b9d12e06a8a2cfc3766ed9"
|
|
71
71
|
}
|
package/src/Image/Image.tsx
CHANGED
|
@@ -41,6 +41,7 @@ export default function Image(props: ImageProps) {
|
|
|
41
41
|
disableLongClick,
|
|
42
42
|
disableOutline,
|
|
43
43
|
disablePlaceholder,
|
|
44
|
+
failDependency = [],
|
|
44
45
|
loading = 'lazy',
|
|
45
46
|
overlaidChildren,
|
|
46
47
|
resizeMode = 'cover',
|
|
@@ -82,8 +83,10 @@ export default function Image(props: ImageProps) {
|
|
|
82
83
|
};
|
|
83
84
|
|
|
84
85
|
useEffect(() => {
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
if (failed !== false) {
|
|
87
|
+
setFailed(false);
|
|
88
|
+
}
|
|
89
|
+
}, [...failDependency]);
|
|
87
90
|
|
|
88
91
|
return (
|
|
89
92
|
<View
|
|
@@ -122,4 +125,4 @@ export default function Image(props: ImageProps) {
|
|
|
122
125
|
</Placeholder>
|
|
123
126
|
</View>
|
|
124
127
|
);
|
|
125
|
-
};
|
|
128
|
+
};
|
package/src/Image/ImageProps.ts
CHANGED
|
@@ -89,4 +89,10 @@ export default interface ImageProps extends OverridableComponentProps<ViewProps,
|
|
|
89
89
|
* The Custom image placeholder component with condition.
|
|
90
90
|
*/
|
|
91
91
|
Placeholder?: (props: PlaceholderProps) => JSX.Element | null;
|
|
92
|
-
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Dependency array for reset failed value to false.
|
|
95
|
+
* @default []
|
|
96
|
+
*/
|
|
97
|
+
failDependency?: Array<any>;
|
|
98
|
+
}> {}
|