@fountain-ui/core 2.0.0-beta.29 → 2.0.0-beta.30
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 -1
- 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 -1
- 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 +1 -0
- package/package.json +2 -2
- package/src/Image/Image.tsx +7 -1
- package/src/Image/ImageProps.ts +2 -0
|
@@ -47,6 +47,7 @@ function Image(props) {
|
|
|
47
47
|
source,
|
|
48
48
|
style,
|
|
49
49
|
square = false,
|
|
50
|
+
size,
|
|
50
51
|
onLoad,
|
|
51
52
|
onError,
|
|
52
53
|
...otherProps
|
|
@@ -64,6 +65,9 @@ function Image(props) {
|
|
|
64
65
|
setFailed(true);
|
|
65
66
|
};
|
|
66
67
|
|
|
68
|
+
const sourceWithSizeParam = { ...source,
|
|
69
|
+
uri: size ? `${source.uri}?size=${size}` : source.uri
|
|
70
|
+
};
|
|
67
71
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
68
72
|
style: (0, _styles.css)([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
|
|
69
73
|
}, otherProps), failed ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, alt) : /*#__PURE__*/_react.default.createElement(_ImageCore.default, {
|
|
@@ -73,7 +77,7 @@ function Image(props) {
|
|
|
73
77
|
onError: handleError,
|
|
74
78
|
onLoad: onLoad,
|
|
75
79
|
resizeMode: resizeMode,
|
|
76
|
-
source:
|
|
80
|
+
source: sourceWithSizeParam,
|
|
77
81
|
width: '100%'
|
|
78
82
|
}), overlaidChildren ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
79
83
|
style: _styles.StyleSheet.absoluteFill
|
|
@@ -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","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","onLoad","onError","otherProps","failed","setFailed","React","useState","styles","handleError","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 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 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={
|
|
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"}
|
|
@@ -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 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"],"mappings":""}
|
|
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":""}
|
|
@@ -35,6 +35,7 @@ export default function Image(props) {
|
|
|
35
35
|
source,
|
|
36
36
|
style,
|
|
37
37
|
square = false,
|
|
38
|
+
size,
|
|
38
39
|
onLoad,
|
|
39
40
|
onError,
|
|
40
41
|
...otherProps
|
|
@@ -50,6 +51,9 @@ export default function Image(props) {
|
|
|
50
51
|
setFailed(true);
|
|
51
52
|
};
|
|
52
53
|
|
|
54
|
+
const sourceWithSizeParam = { ...source,
|
|
55
|
+
uri: size ? `${source.uri}?size=${size}` : source.uri
|
|
56
|
+
};
|
|
53
57
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
54
58
|
style: css([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
|
|
55
59
|
}, otherProps), failed ? /*#__PURE__*/React.createElement(Text, null, alt) : /*#__PURE__*/React.createElement(ImageCore, {
|
|
@@ -59,7 +63,7 @@ export default function Image(props) {
|
|
|
59
63
|
onError: handleError,
|
|
60
64
|
onLoad: onLoad,
|
|
61
65
|
resizeMode: resizeMode,
|
|
62
|
-
source:
|
|
66
|
+
source: sourceWithSizeParam,
|
|
63
67
|
width: '100%'
|
|
64
68
|
}), overlaidChildren ? /*#__PURE__*/React.createElement(View, {
|
|
65
69
|
style: StyleSheet.absoluteFill
|
|
@@ -1 +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","onLoad","onError","otherProps","failed","setFailed","useState","styles","handleError","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 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 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={
|
|
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"}
|
|
@@ -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 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"],"mappings":""}
|
|
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":""}
|
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.30",
|
|
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": "fae21ec577db95700d6c21442f2249dc824eb3de"
|
|
71
71
|
}
|
package/src/Image/Image.tsx
CHANGED
|
@@ -44,6 +44,7 @@ export default function Image(props: ImageProps) {
|
|
|
44
44
|
source,
|
|
45
45
|
style,
|
|
46
46
|
square = false,
|
|
47
|
+
size,
|
|
47
48
|
onLoad,
|
|
48
49
|
onError,
|
|
49
50
|
...otherProps
|
|
@@ -61,6 +62,11 @@ export default function Image(props: ImageProps) {
|
|
|
61
62
|
setFailed(true);
|
|
62
63
|
}
|
|
63
64
|
|
|
65
|
+
const sourceWithSizeParam = {
|
|
66
|
+
...source,
|
|
67
|
+
uri: size ? `${source.uri}?size=${size}` : source.uri,
|
|
68
|
+
};
|
|
69
|
+
|
|
64
70
|
return (
|
|
65
71
|
<View
|
|
66
72
|
style={css([
|
|
@@ -82,7 +88,7 @@ export default function Image(props: ImageProps) {
|
|
|
82
88
|
onError={handleError}
|
|
83
89
|
onLoad={onLoad}
|
|
84
90
|
resizeMode={resizeMode}
|
|
85
|
-
source={
|
|
91
|
+
source={sourceWithSizeParam}
|
|
86
92
|
width={'100%'}
|
|
87
93
|
/>
|
|
88
94
|
)}
|