Add rotate icon and crop button in Lightbox

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": "[email protected]:observation/react-native-components.git",
   "author": "Observation.org",

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: rotation } : undefined
 
-  return <FontAwesomeIcon icon={icon} color={iconColor} size={iconSize} testID={testID} />
+  return <FontAwesomeIcon icon={icon} color={iconColor} size={iconSize} testID={testID} transform={transform} />
 }

src/components/Lightbox.tsx

@@ -42,6 +42,7 @@ const getLightboxFooterComponent =
     content?: React.ReactNode,
     style?: LightboxStyle,
     onPressDelete?: () => void,
+    onPressCrop?: () => void,
   ) =>
   () => (
     <SafeAreaView style={styles.lightboxFooterContainer}>
@@ -57,13 +58,22 @@ const getLightboxFooterComponent =
           </View>
         )}
         {content && <View style={styles.footerItem}>{content}</View>}
-        {onPressDelete && (
+        {(onPressDelete || onPressCrop) && (
           <View style={styles.buttonsContainer}>
-            <View style={styles.buttonContainer}>
-              <TouchableOpacity onPress={onPressDelete} hitSlop={hitSlop}>
-                <Icon name="trash-alt" color={theme.color.white} size={20} testID="delete-photo" />
-              </TouchableOpacity>
-            </View>
+            {onPressDelete && (
+              <View style={styles.buttonContainer}>
+                <TouchableOpacity onPress={onPressDelete} hitSlop={hitSlop}>
+                  <Icon name="trash-alt" color={theme.color.white} size={20} testID="delete-photo" />
+                </TouchableOpacity>
+              </View>
+            )}
+            {onPressCrop && (
+              <View style={styles.buttonContainer}>
+                <TouchableOpacity onPress={onPressCrop} hitSlop={hitSlop}>
+                  <Icon name="crop-alt" color={theme.color.white} size={20} testID="crop-photo" />
+                </TouchableOpacity>
+              </View>
+            )}
           </View>
         )}
       </View>
@@ -78,18 +88,20 @@ type Props = {
   index?: number
   onClose: () => void
   onDelete?: (imageIndex: number) => void
+  onCrop?: (imageIndex: number) => void
   photos: string[]
   title?: string
   description?: string
   content?: JSX.Element
   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<number>()
 
   const onPressDelete = onDelete ? () => onDelete(currentImageIndex ?? initialImageIndex) : undefined
+  const onPressCrop = onCrop ? () => onCrop(currentImageIndex ?? initialImageIndex) : undefined
 
   return (
     <ImageView
@@ -100,7 +112,7 @@ const Lightbox = ({ index, onClose, onDelete, photos, title, description, conten
       onImageIndexChange={setCurrentImageIndex}
       onRequestClose={onClose}
       HeaderComponent={getLightboxHeaderComponent(photos.length, onClose)}
-      FooterComponent={getLightboxFooterComponent(title, description, content, style, onPressDelete)}
+      FooterComponent={getLightboxFooterComponent(title, description, content, style, onPressDelete, onPressCrop)}
     />
   )
 }

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 },