From 1fc694d488e55087845f29de1fdb11d3140cc771 Mon Sep 17 00:00:00 2001 From: Ansh Date: Thu, 1 Jun 2023 08:47:17 -0700 Subject: [PATCH] [APP-656] make alt text expandable (#821) * make alt text expandable * clean code --- src/view/com/lightbox/Lightbox.web.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index 61446519..f6aa26a3 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -1,10 +1,11 @@ -import React, {useCallback, useEffect} from 'react' +import React, {useCallback, useEffect, useState} from 'react' import { Image, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, View, + Pressable, } from 'react-native' import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' @@ -61,7 +62,8 @@ function LightboxInner({ initialIndex: number onClose: () => void }) { - const [index, setIndex] = React.useState(initialIndex) + const [index, setIndex] = useState(initialIndex) + const [isAltExpanded, setAltExpanded] = useState(false) const canGoLeft = index >= 1 const canGoRight = index < imgs.length - 1 @@ -140,7 +142,20 @@ function LightboxInner({ {imgs[index].alt ? ( - {imgs[index].alt} + { + setAltExpanded(!isAltExpanded) + }}> + + {imgs[index].alt} + + ) : null}