From 984e0646f1eb65f50bbf20125a180337f329cf7c Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Thu, 9 Jan 2025 13:45:11 +0530 Subject: [PATCH 1/7] fix: ignored image-viewer in dependencies.json --- .../src/core-components/nativewind/dependencies.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json index c8b5dc2e1..5db25292b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json +++ b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json @@ -234,5 +234,5 @@ "hooks": ["useBreakpointValue"] } }, - "IgnoredComponents": ["bottomsheet"] + "IgnoredComponents": ["bottomsheet", "image-viewer"] } From b35371b6153aedfb1b5218187ea3513ce767859f Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Thu, 9 Jan 2025 15:40:57 +0530 Subject: [PATCH 2/7] fix: imageviewer updated renderImages --- .../components/ImageViewer/ImageViewer.tsx | 11 +++++-- .../ImageViewer/index.nw.stories.mdx | 6 ++-- packages/unstyled/image-viewer/README.md | 31 +++++++++++-------- 3 files changed, 29 insertions(+), 19 deletions(-) diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx index 394892c95..b99d93289 100644 --- a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx +++ b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx @@ -34,9 +34,14 @@ const ImageViewerBasic = ({ ...props }: any) => { ( - - )} + renderImages={({ item, index }) => { + return ( + + ); + }} keyExtractor={(item, index) => item.id + '-' + index} > diff --git a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx index 2a47bdcd0..9781216c4 100644 --- a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx @@ -71,7 +71,7 @@ This is an illustration of **ImageViewer** component. ( + renderImages={({item, index}) => ( )} keyExtractor={(item, index) => item.id + '-' + index} @@ -300,7 +300,7 @@ The `ImageViewerContent` component is responsible for rendering the images withi - (item: any) => ReactNode + {`({item, index}) => ReactNode`} - @@ -388,7 +388,7 @@ import { Center } from '@/components/ui/center'; ( + renderImages={({item, index}) => ( )} keyExtractor={(item, index) => item.id + '-' + index} diff --git a/packages/unstyled/image-viewer/README.md b/packages/unstyled/image-viewer/README.md index f1edbcf15..942ba1b77 100644 --- a/packages/unstyled/image-viewer/README.md +++ b/packages/unstyled/image-viewer/README.md @@ -67,9 +67,14 @@ export default () => ( ( - - )} + renderImages={({ item, index }) => { + return ( + + ); + }} keyExtractor={(item, index) => `${item.id}-${index}`} /> @@ -81,19 +86,19 @@ export default () => ( ### ImageViewer -| Prop | Type | Default | Description | -| -------- | --------- | ------- | ------------------------------------------------------ | -| isOpen | boolean | false | If true, the image viewer modal will open | -| onClose | function | - | Callback invoked when the image viewer modal is closed | -| children | ReactNode | - | The content to be rendered inside the image viewer | +| Prop | Type | Default | Description | Required | +| -------- | --------- | ------- | ------------------------------------------------------ | -------- | +| isOpen | boolean | false | If true, the image viewer modal will open | Yes | +| onClose | function | - | Callback invoked when the image viewer modal is closed | Yes | +| children | ReactNode | - | The content to be rendered inside the image viewer | \_ | ### ImageViewerContent -| Prop | Type | Default | Description | -| ------------ | ------------------------------------ | ------- | ----------------------------------------------- | -| images | Array | - | Array of image objects to display | -| renderImages | (item: any) => ReactNode | - | Function to render each image item | -| keyExtractor | (item: any, index: number) => string | - | Function to extract the key for each image item | +| Prop | Type | Default | Description | Required | +| ------------ | ----------------------------------------- | ------- | ----------------------------------------------- | -------- | +| images | Array | - | Array of image objects to display | Yes | +| renderImages | ({item: any, index: number}) => ReactNode | - | Function to render each image item | Yes | +| keyExtractor | (item: any, index: number) => string | - | Function to extract the key for each image item | Yes | More guides on how to get started are available [here](https://ui.gluestack.io/docs/components/media-and-icons/image-viewer). From aa7cdf6d1966f08ef3de90ff43ba6b8235441c62 Mon Sep 17 00:00:00 2001 From: Sanchit Kumar Date: Thu, 9 Jan 2025 15:42:58 +0530 Subject: [PATCH 3/7] Update README.md --- packages/unstyled/image-viewer/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/unstyled/image-viewer/README.md b/packages/unstyled/image-viewer/README.md index 942ba1b77..a85a67399 100644 --- a/packages/unstyled/image-viewer/README.md +++ b/packages/unstyled/image-viewer/README.md @@ -90,7 +90,7 @@ export default () => ( | -------- | --------- | ------- | ------------------------------------------------------ | -------- | | isOpen | boolean | false | If true, the image viewer modal will open | Yes | | onClose | function | - | Callback invoked when the image viewer modal is closed | Yes | -| children | ReactNode | - | The content to be rendered inside the image viewer | \_ | +| children | ReactNode | - | The content to be rendered inside the image viewer | _ | ### ImageViewerContent From ca84f1c5d8af4c7fb02f8b79a81b7fd7efdbf296 Mon Sep 17 00:00:00 2001 From: Sanchit Kumar Date: Thu, 9 Jan 2025 16:26:53 +0530 Subject: [PATCH 4/7] Update README.md --- packages/unstyled/image-viewer/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/unstyled/image-viewer/README.md b/packages/unstyled/image-viewer/README.md index a85a67399..69cb883a1 100644 --- a/packages/unstyled/image-viewer/README.md +++ b/packages/unstyled/image-viewer/README.md @@ -70,7 +70,6 @@ export default () => ( renderImages={({ item, index }) => { return ( ); From b9afc1c135c8479cd143d748df9cc55ac8857755 Mon Sep 17 00:00:00 2001 From: Sanchit Kumar Date: Thu, 9 Jan 2025 16:27:30 +0530 Subject: [PATCH 5/7] Update ImageViewer.tsx --- .../src/components/ImageViewer/ImageViewer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx index b99d93289..e6137c104 100644 --- a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx +++ b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx @@ -37,7 +37,6 @@ const ImageViewerBasic = ({ ...props }: any) => { renderImages={({ item, index }) => { return ( ); From af77fe0d461e4789b6b1c632e3123153842776be Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Thu, 9 Jan 2025 16:34:44 +0530 Subject: [PATCH 6/7] chore: updated example --- .../src/components/ImageViewer/ImageViewer.tsx | 8 ++------ .../src/components/ImageViewer/index.nw.stories.mdx | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx index e6137c104..439d30fcd 100644 --- a/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx +++ b/example/storybook-nativewind/src/components/ImageViewer/ImageViewer.tsx @@ -34,12 +34,8 @@ const ImageViewerBasic = ({ ...props }: any) => { { - return ( - - ); + renderImages={({ item }) => { + return ; }} keyExtractor={(item, index) => item.id + '-' + index} > diff --git a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx index 9781216c4..5a24ee157 100644 --- a/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/ImageViewer/index.nw.stories.mdx @@ -72,7 +72,7 @@ This is an illustration of **ImageViewer** component. ( - + )} keyExtractor={(item, index) => item.id + '-' + index} > @@ -389,7 +389,7 @@ import { Center } from '@/components/ui/center'; ( - + )} keyExtractor={(item, index) => item.id + '-' + index} > From fa4bb85d07b6c9e56f4ac288cd69f9bef231fa55 Mon Sep 17 00:00:00 2001 From: Sanchitv3 Date: Thu, 9 Jan 2025 16:42:36 +0530 Subject: [PATCH 7/7] fix: fixed renderImages method and updated example --- packages/unstyled/image-viewer/CHANGELOG.md | 6 ++++++ packages/unstyled/image-viewer/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/unstyled/image-viewer/CHANGELOG.md b/packages/unstyled/image-viewer/CHANGELOG.md index d986a2c23..f384575d0 100644 --- a/packages/unstyled/image-viewer/CHANGELOG.md +++ b/packages/unstyled/image-viewer/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-ui/image-viewer +## 0.0.7 + +### Patch Changes + +- fix: fixed renderImages method and updated example + ## 0.0.6 ### Patch Changes diff --git a/packages/unstyled/image-viewer/package.json b/packages/unstyled/image-viewer/package.json index 2b846de20..af1db7f90 100644 --- a/packages/unstyled/image-viewer/package.json +++ b/packages/unstyled/image-viewer/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-ui/image-viewer", - "version": "0.0.6", + "version": "0.0.7", "main": "lib/index", "module": "lib/index", "types": "lib/index.d.ts",