From a77bc948686e2481f1037c051e136b588ecbaaf7 Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Fri, 21 Jun 2024 17:23:54 +0200 Subject: [PATCH 1/9] Crop icons --- src/lib/Icons.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/Icons.ts b/src/lib/Icons.ts index 9a64d05..70c5318 100644 --- a/src/lib/Icons.ts +++ b/src/lib/Icons.ts @@ -52,6 +52,7 @@ import { faHexagon as faHexagonLight } from '@fortawesome/pro-light-svg-icons/fa import { faImages as faImagesLight } from '@fortawesome/pro-light-svg-icons/faImages' import { faInfoCircle as faInfoCircleLight } from '@fortawesome/pro-light-svg-icons/faInfoCircle' import { faLanguage as faLanguageLight } from '@fortawesome/pro-light-svg-icons/faLanguage' +import { faLevelDown as faLevelDownLight } from '@fortawesome/pro-light-svg-icons/faLevelDown' import { faLocationCheck as faLocationCheckLight } from '@fortawesome/pro-light-svg-icons/faLocationCheck' import { faLocationCrosshairs as faLocationCrosshairsLight } from '@fortawesome/pro-light-svg-icons/faLocationCrosshairs' import { faMapMarkerAlt as faMapMarkerAltLight } from '@fortawesome/pro-light-svg-icons/faMapMarkerAlt' @@ -145,6 +146,7 @@ import { faHexagon as faHexagonSolid } from '@fortawesome/pro-solid-svg-icons/fa import { faImages as faImagesSolid } from '@fortawesome/pro-solid-svg-icons/faImages' import { faInfoCircle as faInfoCircleSolid } from '@fortawesome/pro-solid-svg-icons/faInfoCircle' import { faLanguage as faLanguageSolid } from '@fortawesome/pro-solid-svg-icons/faLanguage' +import { faLevelDown as faLevelDownSolid } from '@fortawesome/pro-solid-svg-icons/faLevelDown' import { faLocationCheck as faLocationCheckSolid } from '@fortawesome/pro-solid-svg-icons/faLocationCheck' import { faLocationCrosshairs as faLocationCrosshairsSolid } from '@fortawesome/pro-solid-svg-icons/faLocationCrosshairs' import { faMapMarkerAlt as faMapMarkerAltSolid } from '@fortawesome/pro-solid-svg-icons/faMapMarkerAlt' @@ -241,6 +243,7 @@ type IconName = Extract< | 'images' | 'info-circle' | 'language' + | 'level-down' | 'location-check' | 'location-crosshairs' | 'map-marker-alt' @@ -337,6 +340,7 @@ const icons: { [key in IconName]: { light: IconDefinition; solid: IconDefinition images: { light: faImagesLight, solid: faImagesSolid }, 'info-circle': { light: faInfoCircleLight, solid: faInfoCircleSolid }, language: { light: faLanguageLight, solid: faLanguageSolid }, + 'level-down': { light: faLevelDownLight, solid: faLevelDownSolid }, 'location-check': { light: faLocationCheckLight, solid: faLocationCheckSolid }, 'location-crosshairs': { light: faLocationCrosshairsLight, solid: faLocationCrosshairsSolid }, 'map-marker-alt-slash': { light: faMapMarkerAltSlashLight, solid: faMapMarkerAltSlashSolid }, From b043b8b2e69ff878ca255d483446db05e9c934fd Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Fri, 21 Jun 2024 17:46:28 +0200 Subject: [PATCH 2/9] Add rotation --- src/components/Icon.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index fe860a9..1a038f1 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -12,17 +12,19 @@ export type IconAppearanceProps = { color?: string size?: number testID?: string + rotation?: number } export type IconProps = IconAppearanceProps & { name: IconName } -export const Icon = ({ name, color, size, testID, style }: IconProps): JSX.Element => { +export const Icon = ({ name, color, size, testID, style, rotation }: IconProps): JSX.Element => { const iconStyle = style ?? 'light' const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid const iconColor = color ?? theme.color.primary const iconSize = size ?? theme.icon.size.large + const transform = rotation ? { rotate: 42 } : undefined - return + return } From 9d6d0839c2e91fe659871352c7dde42ba6ced67c Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Sun, 23 Jun 2024 10:54:00 +0200 Subject: [PATCH 3/9] Add crop icon --- src/components/Icon.tsx | 2 +- src/components/Lightbox.tsx | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 1a038f1..ed5f395 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -24,7 +24,7 @@ export const Icon = ({ name, color, size, testID, style, rotation }: IconProps): const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid const iconColor = color ?? theme.color.primary const iconSize = size ?? theme.icon.size.large - const transform = rotation ? { rotate: 42 } : undefined + const transform = rotation ? { rotate: rotation } : undefined return } diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx index d0db34d..417cee0 100644 --- a/src/components/Lightbox.tsx +++ b/src/components/Lightbox.tsx @@ -42,6 +42,7 @@ const getLightboxFooterComponent = content?: React.ReactNode, style?: LightboxStyle, onPressDelete?: () => void, + onPressCrop?: () => void, ) => () => ( @@ -57,15 +58,23 @@ const getLightboxFooterComponent = )} {content && {content}} - {onPressDelete && ( - + + + {onPressDelete && ( - - )} + )} + {onPressCrop && ( + + + + + + )} + ) From de29420aa5a78c20d5dfdfd7551a8f7eea7afd40 Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Sun, 23 Jun 2024 10:56:51 +0200 Subject: [PATCH 4/9] Add function to component --- src/components/Lightbox.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx index 417cee0..9c23068 100644 --- a/src/components/Lightbox.tsx +++ b/src/components/Lightbox.tsx @@ -87,6 +87,7 @@ type Props = { index?: number onClose: () => void onDelete?: (imageIndex: number) => void + onCrop?: (imageIndex: number) => void photos: string[] title?: string description?: string @@ -94,11 +95,12 @@ type Props = { style?: LightboxStyle } -const Lightbox = ({ index, onClose, onDelete, photos, title, description, content, style }: Props) => { +const Lightbox = ({ index, onClose, onDelete, onCrop, photos, title, description, content, style }: Props) => { const initialImageIndex = index ?? 0 const [currentImageIndex, setCurrentImageIndex] = useState() const onPressDelete = onDelete ? () => onDelete(currentImageIndex ?? initialImageIndex) : undefined + const onPressCrop = onCrop ? () => onCrop(currentImageIndex ?? initialImageIndex) : undefined return ( ) } From 9926aef7b241c4982a3bd6331fb1832af5c7e915 Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Mon, 24 Jun 2024 17:58:34 +0200 Subject: [PATCH 5/9] Don't show button container if there are no buttons --- src/components/Lightbox.tsx | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx index 9c23068..0185ba2 100644 --- a/src/components/Lightbox.tsx +++ b/src/components/Lightbox.tsx @@ -59,22 +59,24 @@ const getLightboxFooterComponent = )} {content && {content}} - - {onPressDelete && ( - - - - - - )} - {onPressCrop && ( - - - - - - )} - + {(onPressDelete || onPressCrop) && ( + + {onPressDelete && ( + + + + + + )} + {onPressCrop && ( + + + + + + )} + + )} ) From a8ec725125dcf243431b4e99f6cefd90a89f7eb1 Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Wed, 26 Jun 2024 19:37:45 +0200 Subject: [PATCH 6/9] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 081f48a..2a046dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.38.0", + "version": "1.39.0", "main": "src/index.ts", "repository": "git@github.com:observation/react-native-components.git", "author": "Observation.org", From d42e9af6038d29402bceaa0180bd72b48e323d69 Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Wed, 26 Jun 2024 19:40:03 +0200 Subject: [PATCH 7/9] Remove unnecessary newline --- src/components/Lightbox.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx index 0185ba2..ddd3311 100644 --- a/src/components/Lightbox.tsx +++ b/src/components/Lightbox.tsx @@ -58,7 +58,6 @@ const getLightboxFooterComponent = )} {content && {content}} - {(onPressDelete || onPressCrop) && ( {onPressDelete && ( From 2956801156a6025ec7879035f71de5a26239afd6 Mon Sep 17 00:00:00 2001 From: Jonathan Neuteboom <--global> Date: Mon, 1 Jul 2024 20:13:05 +0200 Subject: [PATCH 8/9] Review comments --- src/components/Icon.tsx | 6 +- src/components/__tests__/Lightbox.test.tsx | 21 + .../__snapshots__/Lightbox.test.tsx.snap | 431 ++++++++++++++++++ src/lib/Icons.ts | 12 +- 4 files changed, 458 insertions(+), 12 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index ed5f395..fe860a9 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -12,19 +12,17 @@ export type IconAppearanceProps = { color?: string size?: number testID?: string - rotation?: number } export type IconProps = IconAppearanceProps & { name: IconName } -export const Icon = ({ name, color, size, testID, style, rotation }: IconProps): JSX.Element => { +export const Icon = ({ name, color, size, testID, style }: IconProps): JSX.Element => { const iconStyle = style ?? 'light' const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid const iconColor = color ?? theme.color.primary const iconSize = size ?? theme.icon.size.large - const transform = rotation ? { rotate: rotation } : undefined - return + return } diff --git a/src/components/__tests__/Lightbox.test.tsx b/src/components/__tests__/Lightbox.test.tsx index 1d58f26..e9b4875 100644 --- a/src/components/__tests__/Lightbox.test.tsx +++ b/src/components/__tests__/Lightbox.test.tsx @@ -77,6 +77,15 @@ describe('Lightbox', () => { expect(queryByTestId('delete-photo')).not.toBeNull() expect(toJSON()).toMatchSnapshot() }) + + test('With a crop button', () => { + const { toJSON, queryByTestId } = render( + {}} />, + ) + + expect(queryByTestId('crop-photo')).not.toBeNull() + expect(toJSON()).toMatchSnapshot() + }) }) describe('Interaction', () => { @@ -103,6 +112,18 @@ describe('Lightbox', () => { expect(onDelete).toHaveBeenCalledWith(0) }) + test('Press crop button calls onCrop', async () => { + // GIVEN + const onCrop = jest.fn() + const { getByTestId } = render() + + // WHEN + await fireEvent.press(getByTestId('crop-photo')) + + // THEN + expect(onCrop).toHaveBeenCalledWith(0) + }) + test('When swiping to the second photo and pressing the delete button, onDelete is called with the second photo', async () => { // GIVEN jest.mock('@observation.org/react-native-image-viewing', () => 'ImageCarousel') diff --git a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap index e9939df..8a78956 100644 --- a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap @@ -1599,6 +1599,437 @@ exports[`Lightbox Rendering Second photo 1`] = ` `; +exports[`Lightbox Rendering With a crop button 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + exports[`Lightbox Rendering With a delete button 1`] = ` Date: Mon, 1 Jul 2024 20:15:31 +0200 Subject: [PATCH 9/9] Add missing sparkles --- src/lib/Icons.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/Icons.ts b/src/lib/Icons.ts index 2a52794..09ba8cb 100644 --- a/src/lib/Icons.ts +++ b/src/lib/Icons.ts @@ -74,6 +74,7 @@ import { faShareNodes as faShareNodesLight } from '@fortawesome/pro-light-svg-ic import { faShield as faShieldLight } from '@fortawesome/pro-light-svg-icons/faShield' import { faShieldCheck as faShieldCheckLight } from '@fortawesome/pro-light-svg-icons/faShieldCheck' import { faSlidersH as faSlidersHLight } from '@fortawesome/pro-light-svg-icons/faSlidersH' +import { faSparkles as faSparklesLight } from '@fortawesome/pro-light-svg-icons/faSparkles' import { faSquare as faSquareLight } from '@fortawesome/pro-light-svg-icons/faSquare' import { faStars as faStarsLight } from '@fortawesome/pro-light-svg-icons/faStars' import { faSwatchbook as faSwatchbookLight } from '@fortawesome/pro-light-svg-icons/faSwatchbook' @@ -167,6 +168,7 @@ import { faShareNodes as faShareNodesSolid } from '@fortawesome/pro-solid-svg-ic import { faShield as faShieldSolid } from '@fortawesome/pro-solid-svg-icons/faShield' import { faShieldCheck as faShieldCheckSolid } from '@fortawesome/pro-solid-svg-icons/faShieldCheck' import { faSlidersH as faSlidersHSolid } from '@fortawesome/pro-solid-svg-icons/faSlidersH' +import { faSparkles as faSparklesSolid } from '@fortawesome/pro-solid-svg-icons/faSparkles' import { faSquare as faSquareSolid } from '@fortawesome/pro-solid-svg-icons/faSquare' import { faStars as faStarsSolid } from '@fortawesome/pro-solid-svg-icons/faStars' import { faSwatchbook as faSwatchbookSolid } from '@fortawesome/pro-solid-svg-icons/faSwatchbook' @@ -263,6 +265,7 @@ type IconName = Extract< | 'shield' | 'shield-check' | 'sliders-h' + | 'sparkles' | 'square' | 'stars' | 'swatchbook' @@ -359,6 +362,7 @@ const icons: { [key in IconName]: { light: IconDefinition; solid: IconDefinition shield: { light: faShieldLight, solid: faShieldSolid }, 'shield-check': { light: faShieldCheckLight, solid: faShieldCheckSolid }, 'sliders-h': { light: faSlidersHLight, solid: faSlidersHSolid }, + sparkles: { light: faSparklesLight, solid: faSparklesSolid }, square: { light: faSquareLight, solid: faSquareSolid }, stars: { light: faStarsLight, solid: faStarsSolid }, swatchbook: { light: faSwatchbookLight, solid: faSwatchbookSolid },