@os-design-mobile/image-upload 1.0.35 → 1.0.36
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/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":["overlayHasImageStyles","p","hasImage","backgroundColor","theme","imageUploadOverlayOpacity","borderRadius","fontSize","Overlay","View","position","top","right","bottom","left","justifyContent","alignItems","padding","imageUploadOverlayPadding","StyledRectButton","RectButton","width","maxWidth","imageUploadMaxWidth","minHeight","imageUploadMinHeight","notHasImageStyles","imageUploadNoImageColorBg","borderWidth","borderColor","imageUploadNoImageColorBorder","borderStyle","Container","Content","styled","flex","Title","Text","marginTop","textAlign","StyledImage","Image","resizeMode","aspectRatio","DeleteButtonContainer","ImageUpload","ref","url","locale","defaultLocale","imageLibraryOptions","cameraOptions","value","defaultValue","onChange","onPress","rest","forwardedValue","setForwardedValue","modalVisible","setModalVisible","chooseFromPhotoLibraryHandler","Promise","resolve","mediaType","assets","e","takePhotoHandler","source","uri","colorText","imageUploadNoImageBgHighlight","imageUploadNoImageBgRipple","t","title","buttonGhostColorText","buttonGhostColorBgHighlight","chooseFromLibrary","takePhoto","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { RectButton, RectButtonProps } from 'react-native-gesture-handler';\nimport ActionMenu, { MenuItem } from '@os-design-mobile/action-menu';\nimport { Picture, Camera, Delete } from '@os-design-mobile/icons';\nimport {\n launchImageLibrary,\n launchCamera,\n Asset,\n ImagePickerResponse,\n} from 'react-native-image-picker';\nimport Text from '@os-design-mobile/text';\nimport Image from '@os-design-mobile/image';\nimport useForwardedState from '@os-design/use-forwarded-state';\nimport styled from '@emotion/native';\nimport omitEmotionProps from '@os-design/omit-emotion-props';\nimport { clr, ThemeOverrider, useTheme } from '@os-design-mobile/theming';\nimport Button from '@os-design-mobile/button';\nimport {\n CameraOptions,\n ImageLibraryOptions,\n} from 'react-native-image-picker/src/types';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\nexport interface ImageUploadProps extends RectButtonProps {\n /**\n * The url of the image.\n * @default undefined\n */\n url?: string;\n /**\n * The locale of the component.\n * @default undefined\n */\n locale?: ImageUploadLocale;\n /**\n * The image library options.\n * @default undefined\n */\n imageLibraryOptions?: Pick<\n ImageLibraryOptions,\n 'maxWidth' | 'maxHeight' | 'quality'\n >;\n /**\n * The camera options.\n * @default undefined\n */\n cameraOptions?: Pick<\n CameraOptions,\n 'maxWidth' | 'maxHeight' | 'quality' | 'saveToPhotos' | 'cameraType'\n >;\n /**\n * The selected local file, or null if the image is marked as deleted.\n * @default undefined\n */\n value?: Asset | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: Asset | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: Asset | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n p.hasImage\n ? {\n backgroundColor: clr([0, 0, 0, p.theme.imageUploadOverlayOpacity]),\n borderRadius: p.theme.borderRadius * p.theme.fontSize,\n }\n : {};\n\ninterface OverlayProps {\n hasImage: boolean;\n}\nconst Overlay = styled(\n View,\n omitEmotionProps('hasImage')\n)<OverlayProps>((p) => ({\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n justifyContent: 'center',\n alignItems: 'center',\n padding: p.theme.imageUploadOverlayPadding * p.theme.fontSize,\n ...overlayHasImageStyles(p),\n}));\n\nconst StyledRectButton = styled(RectButton)((p) => ({\n width: '100%',\n maxWidth: p.theme.imageUploadMaxWidth * p.theme.fontSize,\n minHeight: p.theme.imageUploadMinHeight * p.theme.fontSize,\n borderRadius: p.theme.borderRadius * p.theme.fontSize,\n}));\n\nconst notHasImageStyles = (p): Partial<ViewProps> =>\n !p.hasImage\n ? ({\n backgroundColor: clr(p.theme.imageUploadNoImageColorBg),\n borderWidth: 2,\n borderColor: clr(p.theme.imageUploadNoImageColorBorder),\n borderStyle: 'dashed',\n } as Partial<ViewProps>)\n : {};\n\ninterface ContainerProps {\n hasImage: boolean;\n}\n\nconst Container = styled(\n View,\n omitEmotionProps('hasImage')\n)<ContainerProps>((p) => ({\n minHeight: p.theme.imageUploadMinHeight * p.theme.fontSize,\n borderRadius: p.theme.borderRadius * p.theme.fontSize,\n ...notHasImageStyles(p),\n}));\n\nconst Content = styled.View({\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n});\n\nconst Title = styled(Text)((p) => ({\n marginTop: 0.5 * p.theme.fontSize,\n textAlign: 'center',\n}));\n\nconst StyledImage = styled(Image)({\n resizeMode: 'cover',\n aspectRatio: 1,\n});\n\nconst DeleteButtonContainer = styled.View((p) => ({\n position: 'absolute',\n top: 0.5 * p.theme.fontSize,\n right: 0.5 * p.theme.fontSize,\n}));\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<RectButton, ImageUploadProps>(\n (\n {\n url,\n locale = defaultLocale,\n imageLibraryOptions = {},\n cameraOptions = {},\n value,\n defaultValue,\n onChange,\n onPress = () => {},\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const [modalVisible, setModalVisible] = useState(false);\n const { theme } = useTheme();\n\n const chooseFromPhotoLibraryHandler = useCallback(async () => {\n try {\n const { assets } = await new Promise<ImagePickerResponse>((resolve) => {\n launchImageLibrary(\n {\n mediaType: 'photo',\n ...imageLibraryOptions,\n },\n resolve\n );\n });\n setModalVisible(false);\n if (assets) setForwardedValue(assets[0]);\n } catch (e) {} // eslint-disable-line no-empty\n }, [imageLibraryOptions, setForwardedValue]);\n\n const takePhotoHandler = useCallback(async () => {\n try {\n const { assets } = await new Promise<ImagePickerResponse>((resolve) => {\n launchCamera(\n {\n mediaType: 'photo',\n ...cameraOptions,\n },\n resolve\n );\n });\n setModalVisible(false);\n if (assets) setForwardedValue(assets[0]);\n } catch (e) {} // eslint-disable-line no-empty\n }, [cameraOptions, setForwardedValue]);\n\n const source = useMemo(() => {\n if (forwardedValue === null) return null;\n if (forwardedValue) return forwardedValue.uri; // If the user select an image\n if (url) return url; // If the image already exists\n return null;\n }, [forwardedValue, url]);\n\n const hasImage = useMemo(() => !!source, [source]);\n\n return (\n <>\n <ThemeOverrider overrides={hasImage ? { colorText: [0, 0, 100] } : {}}>\n <StyledRectButton\n onPress={(e) => {\n setModalVisible(true);\n onPress(e);\n }}\n underlayColor={\n hasImage\n ? clr([0, 0, 100])\n : clr(theme.imageUploadNoImageBgHighlight)\n }\n rippleColor={\n hasImage\n ? clr([0, 0, 100])\n : clr(theme.imageUploadNoImageBgRipple)\n }\n activeOpacity={hasImage ? 0.8 : 1}\n {...rest}\n ref={ref}\n >\n <Container\n hasImage={hasImage}\n accessible\n accessibilityRole='imagebutton'\n >\n {source && <StyledImage source={{ uri: source }} />}\n\n <Overlay hasImage={hasImage}>\n <Content>\n <ThemeOverrider\n overrides={(t) => ({ fontSize: 2.5 * t.fontSize })}\n >\n <Picture />\n </ThemeOverrider>\n <Title>{locale?.title}</Title>\n </Content>\n\n {hasImage && (\n <ThemeOverrider\n overrides={{\n buttonGhostColorText: [0, 0, 100],\n buttonGhostColorBgHighlight: [0, 0, 100, 0.1],\n }}\n >\n <DeleteButtonContainer>\n <Button\n type='ghost'\n onPress={() => setForwardedValue(null)}\n >\n <Delete />\n </Button>\n </DeleteButtonContainer>\n </ThemeOverrider>\n )}\n </Overlay>\n </Container>\n </StyledRectButton>\n </ThemeOverrider>\n\n <ActionMenu\n visible={modalVisible}\n onClose={() => setModalVisible(false)}\n >\n <MenuItem left={<Picture />} onPress={chooseFromPhotoLibraryHandler}>\n {locale?.chooseFromLibrary}\n </MenuItem>\n <MenuItem left={<Camera />} onPress={takePhotoHandler}>\n {locale?.takePhoto}\n </MenuItem>\n </ActionMenu>\n </>\n );\n }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["overlayHasImageStyles","p","hasImage","backgroundColor","theme","imageUploadOverlayOpacity","borderRadius","fontSize","Overlay","View","position","top","right","bottom","left","justifyContent","alignItems","padding","imageUploadOverlayPadding","StyledRectButton","RectButton","width","maxWidth","imageUploadMaxWidth","minHeight","imageUploadMinHeight","notHasImageStyles","imageUploadNoImageColorBg","borderWidth","borderColor","imageUploadNoImageColorBorder","borderStyle","Container","Content","styled","flex","Title","Text","marginTop","textAlign","StyledImage","Image","resizeMode","aspectRatio","DeleteButtonContainer","ImageUpload","ref","url","locale","defaultLocale","imageLibraryOptions","cameraOptions","value","defaultValue","onChange","onPress","rest","forwardedValue","setForwardedValue","modalVisible","setModalVisible","chooseFromPhotoLibraryHandler","Promise","resolve","mediaType","assets","e","takePhotoHandler","source","uri","colorText","imageUploadNoImageBgHighlight","imageUploadNoImageBgRipple","t","title","buttonGhostColorText","buttonGhostColorBgHighlight","chooseFromLibrary","takePhoto","displayName"],"sources":["../src/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { View, ViewProps } from 'react-native';\nimport { RectButton, RectButtonProps } from 'react-native-gesture-handler';\nimport ActionMenu, { MenuItem } from '@os-design-mobile/action-menu';\nimport { Picture, Camera, Delete } from '@os-design-mobile/icons';\nimport {\n launchImageLibrary,\n launchCamera,\n Asset,\n ImagePickerResponse,\n} from 'react-native-image-picker';\nimport Text from '@os-design-mobile/text';\nimport Image from '@os-design-mobile/image';\nimport useForwardedState from '@os-design/use-forwarded-state';\nimport styled from '@emotion/native';\nimport omitEmotionProps from '@os-design/omit-emotion-props';\nimport { clr, ThemeOverrider, useTheme } from '@os-design-mobile/theming';\nimport Button from '@os-design-mobile/button';\nimport {\n CameraOptions,\n ImageLibraryOptions,\n} from 'react-native-image-picker/src/types';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\nexport interface ImageUploadProps extends RectButtonProps {\n /**\n * The url of the image.\n * @default undefined\n */\n url?: string;\n /**\n * The locale of the component.\n * @default undefined\n */\n locale?: ImageUploadLocale;\n /**\n * The image library options.\n * @default undefined\n */\n imageLibraryOptions?: Pick<\n ImageLibraryOptions,\n 'maxWidth' | 'maxHeight' | 'quality'\n >;\n /**\n * The camera options.\n * @default undefined\n */\n cameraOptions?: Pick<\n CameraOptions,\n 'maxWidth' | 'maxHeight' | 'quality' | 'saveToPhotos' | 'cameraType'\n >;\n /**\n * The selected local file, or null if the image is marked as deleted.\n * @default undefined\n */\n value?: Asset | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: Asset | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: Asset | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n p.hasImage\n ? {\n backgroundColor: clr([0, 0, 0, p.theme.imageUploadOverlayOpacity]),\n borderRadius: p.theme.borderRadius * p.theme.fontSize,\n }\n : {};\n\ninterface OverlayProps {\n hasImage: boolean;\n}\nconst Overlay = styled(\n View,\n omitEmotionProps('hasImage')\n)<OverlayProps>((p) => ({\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n justifyContent: 'center',\n alignItems: 'center',\n padding: p.theme.imageUploadOverlayPadding * p.theme.fontSize,\n ...overlayHasImageStyles(p),\n}));\n\nconst StyledRectButton = styled(RectButton)((p) => ({\n width: '100%',\n maxWidth: p.theme.imageUploadMaxWidth * p.theme.fontSize,\n minHeight: p.theme.imageUploadMinHeight * p.theme.fontSize,\n borderRadius: p.theme.borderRadius * p.theme.fontSize,\n}));\n\nconst notHasImageStyles = (p): Partial<ViewProps> =>\n !p.hasImage\n ? ({\n backgroundColor: clr(p.theme.imageUploadNoImageColorBg),\n borderWidth: 2,\n borderColor: clr(p.theme.imageUploadNoImageColorBorder),\n borderStyle: 'dashed',\n } as Partial<ViewProps>)\n : {};\n\ninterface ContainerProps {\n hasImage: boolean;\n}\n\nconst Container = styled(\n View,\n omitEmotionProps('hasImage')\n)<ContainerProps>((p) => ({\n minHeight: p.theme.imageUploadMinHeight * p.theme.fontSize,\n borderRadius: p.theme.borderRadius * p.theme.fontSize,\n ...notHasImageStyles(p),\n}));\n\nconst Content = styled.View({\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n});\n\nconst Title = styled(Text)((p) => ({\n marginTop: 0.5 * p.theme.fontSize,\n textAlign: 'center',\n}));\n\nconst StyledImage = styled(Image)({\n resizeMode: 'cover',\n aspectRatio: 1,\n});\n\nconst DeleteButtonContainer = styled.View((p) => ({\n position: 'absolute',\n top: 0.5 * p.theme.fontSize,\n right: 0.5 * p.theme.fontSize,\n}));\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<RectButton, ImageUploadProps>(\n (\n {\n url,\n locale = defaultLocale,\n imageLibraryOptions = {},\n cameraOptions = {},\n value,\n defaultValue,\n onChange,\n onPress = () => {},\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const [modalVisible, setModalVisible] = useState(false);\n const { theme } = useTheme();\n\n const chooseFromPhotoLibraryHandler = useCallback(async () => {\n try {\n const { assets } = await new Promise<ImagePickerResponse>((resolve) => {\n launchImageLibrary(\n {\n mediaType: 'photo',\n ...imageLibraryOptions,\n },\n resolve\n );\n });\n setModalVisible(false);\n if (assets) setForwardedValue(assets[0]);\n } catch (e) {} // eslint-disable-line no-empty\n }, [imageLibraryOptions, setForwardedValue]);\n\n const takePhotoHandler = useCallback(async () => {\n try {\n const { assets } = await new Promise<ImagePickerResponse>((resolve) => {\n launchCamera(\n {\n mediaType: 'photo',\n ...cameraOptions,\n },\n resolve\n );\n });\n setModalVisible(false);\n if (assets) setForwardedValue(assets[0]);\n } catch (e) {} // eslint-disable-line no-empty\n }, [cameraOptions, setForwardedValue]);\n\n const source = useMemo(() => {\n if (forwardedValue === null) return null;\n if (forwardedValue) return forwardedValue.uri; // If the user select an image\n if (url) return url; // If the image already exists\n return null;\n }, [forwardedValue, url]);\n\n const hasImage = useMemo(() => !!source, [source]);\n\n return (\n <>\n <ThemeOverrider overrides={hasImage ? { colorText: [0, 0, 100] } : {}}>\n <StyledRectButton\n onPress={(e) => {\n setModalVisible(true);\n onPress(e);\n }}\n underlayColor={\n hasImage\n ? clr([0, 0, 100])\n : clr(theme.imageUploadNoImageBgHighlight)\n }\n rippleColor={\n hasImage\n ? clr([0, 0, 100])\n : clr(theme.imageUploadNoImageBgRipple)\n }\n activeOpacity={hasImage ? 0.8 : 1}\n {...rest}\n ref={ref}\n >\n <Container\n hasImage={hasImage}\n accessible\n accessibilityRole='imagebutton'\n >\n {source && <StyledImage source={{ uri: source }} />}\n\n <Overlay hasImage={hasImage}>\n <Content>\n <ThemeOverrider\n overrides={(t) => ({ fontSize: 2.5 * t.fontSize })}\n >\n <Picture />\n </ThemeOverrider>\n <Title>{locale?.title}</Title>\n </Content>\n\n {hasImage && (\n <ThemeOverrider\n overrides={{\n buttonGhostColorText: [0, 0, 100],\n buttonGhostColorBgHighlight: [0, 0, 100, 0.1],\n }}\n >\n <DeleteButtonContainer>\n <Button\n type='ghost'\n onPress={() => setForwardedValue(null)}\n >\n <Delete />\n </Button>\n </DeleteButtonContainer>\n </ThemeOverrider>\n )}\n </Overlay>\n </Container>\n </StyledRectButton>\n </ThemeOverrider>\n\n <ActionMenu\n visible={modalVisible}\n onClose={() => setModalVisible(false)}\n >\n <MenuItem left={<Picture />} onPress={chooseFromPhotoLibraryHandler}>\n {locale?.chooseFromLibrary}\n </MenuItem>\n <MenuItem left={<Camera />} onPress={takePhotoHandler}>\n {locale?.takePhoto}\n </MenuItem>\n </ActionMenu>\n </>\n );\n }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"defaultLocale.js","names":["defaultLocale","title","chooseFromLibrary","takePhoto"],"sources":["../../src/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n title: string;\n chooseFromLibrary: string;\n takePhoto: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n title: 'Click here to choose an image',\n chooseFromLibrary: 'Choose from Library',\n takePhoto: 'Take a Photo',\n};\n\nexport default defaultLocale;\n"],"mappings":"gFAMA,GAAMA,CAAAA,aAAgC,CAAG,CACvCC,KAAK,CAAE,+BADgC,CAEvCC,iBAAiB,CAAE,qBAFoB,CAGvCC,SAAS,CAAE,cAH4B,CAAzC,C,aAMeH,a"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design-mobile/image-upload",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.36",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design-mobile.git",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@os-design-mobile/action-menu": "^1.0.
|
|
22
|
+
"@os-design-mobile/action-menu": "^1.0.35",
|
|
23
23
|
"@os-design-mobile/button": "^1.0.34",
|
|
24
24
|
"@os-design-mobile/icons": "^1.0.33",
|
|
25
25
|
"@os-design-mobile/image": "^1.0.19",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"react-native-safe-area-context": ">=3",
|
|
40
40
|
"react-native-svg": ">=12"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "303584b01f5ef7f2accbac362ed956d4f4d13977"
|
|
43
43
|
}
|