Skip to content

Commit

Permalink
fix: keyboard issue on create alert screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@MounirDhahri
MounirDhahri committed Dec 6, 2023
1 parent 3b4c81a commit a118ed4
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 233 deletions.
267 changes: 132 additions & 135 deletions src/app/Scenes/SavedSearchAlert/Components/Form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { ActionType, ContextModule, OwnerType } from "@artsy/cohesion"
import {
ArrowRightIcon,
ArtsyKeyboardAvoidingView,
Box,
Button,
Flex,
Expand Down Expand Up @@ -120,157 +119,155 @@ export const Form: React.FC<FormProps> = ({

return (
<>
<ArtsyKeyboardAvoidingView>
<ScrollView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="handled"
contentContainerStyle={[{ padding: space(2) }, contentContainerStyle]}
>
{!isEditMode && (
<InfoButton
titleElement={
<Text variant="lg-display" mb={1} mr={0.5}>
Create Alert
<ScrollView
keyboardDismissMode="on-drag"
keyboardShouldPersistTaps="handled"
contentContainerStyle={[{ padding: space(2) }, contentContainerStyle]}
>
{!isEditMode && (
<InfoButton
titleElement={
<Text variant="lg-display" mb={1} mr={0.5}>
Create Alert
</Text>
}
trackEvent={() => {
tracking.trackEvent(tracks.tappedCreateAlertHeaderButton())
}}
maxModalHeight={300}
modalTitle="Create Alert"
modalContent={
<Flex py={1}>
<Text>
On the hunt for a particular work? Create an alert and we’ll let you know when
matching works are added to Artsy.
</Text>
}
trackEvent={() => {
tracking.trackEvent(tracks.tappedCreateAlertHeaderButton())
}}
maxModalHeight={300}
modalTitle="Create Alert"
modalContent={
<Flex py={1}>
<Text>
On the hunt for a particular work? Create an alert and we’ll let you know when
matching works are added to Artsy.
</Text>
</Flex>
}
/>
)}

<Join separator={<Spacer y={4} />}>
<SavedSearchNameInputQueryRenderer attributes={attributes} />

<Box>
<Text variant="sm-display">Filters</Text>
<Flex flexDirection="row" flexWrap="wrap" mt={1} mx={-0.5}>
{pills.map((pill, index) => (
<Pill
testID="alert-pill"
m={0.5}
variant="filter"
disabled={isArtistPill(pill)}
key={`filter-label-${index}`}
onPress={() => onRemovePill(pill)}
>
{pill.label}
</Pill>
))}
</Flex>
</Box>

{!!enableAlertsFilters && !enableAlertsSuggestedFilters ? (
<MenuItem
title="Add Filters"
description={
enableAlertsFiltersSizeFiltering
? "Including Price Range, Rarity, Medium, Size, Color"
: "Including Price Range, Rarity, Medium, Color"
}
onPress={() => {
navigation.navigate("SavedSearchFilterScreen")
}}
px={0}
/>
) : null}
}
/>
)}

{enableAlertsFilters && enableAlertsSuggestedFilters ? (
<SavedSearchSuggestedFiltersQueryRenderer />
) : null}
<Join separator={<Spacer y={4} />}>
<SavedSearchNameInputQueryRenderer attributes={attributes} />

{/* Price range is part of the new filters screen, no need to show it here anymore */}
{!enableAlertsFilters && (
<Flex>
<Touchable
accessibilityLabel="Set price range"
accessibilityRole="button"
onPress={() => navigation.navigate("AlertPriceRange")}
<Box>
<Text variant="sm-display">Filters</Text>
<Flex flexDirection="row" flexWrap="wrap" mt={1} mx={-0.5}>
{pills.map((pill, index) => (
<Pill
testID="alert-pill"
m={0.5}
variant="filter"
disabled={isArtistPill(pill)}
key={`filter-label-${index}`}
onPress={() => onRemovePill(pill)}
>
<Flex flexDirection="row" alignItems="center" py={1}>
<Flex flex={1}>
<Text variant="sm-display">Set price range you are interested in</Text>
</Flex>
<Flex alignSelf="center" mt={0.5}>
<ArrowRightIcon />
</Flex>
</Flex>
</Touchable>
</Flex>
)}
{pill.label}
</Pill>
))}
</Flex>
</Box>

{!!enableDetailsInput && (
<Flex>
<Text>Tell us more about what you’re looking for</Text>
{!!enableAlertsFilters && !enableAlertsSuggestedFilters ? (
<MenuItem
title="Add Filters"
description={
enableAlertsFiltersSizeFiltering
? "Including Price Range, Rarity, Medium, Size, Color"
: "Including Price Range, Rarity, Medium, Color"
}
onPress={() => {
navigation.navigate("SavedSearchFilterScreen")
}}
px={0}
/>
) : null}

<Spacer y={1} />
{enableAlertsFilters && enableAlertsSuggestedFilters ? (
<SavedSearchSuggestedFiltersQueryRenderer />
) : null}

<Input
placeholder="For example, a specific request such as ‘figurative painting’ or ‘David Hockney iPad drawings.’"
value={values.details}
onChangeText={handleChange("details")}
onBlur={handleBlur("details")}
error={errors.details}
multiline
maxLength={700}
testID="alert-input-details"
/>
</Flex>
)}
{/* Price range is part of the new filters screen, no need to show it here anymore */}
{!enableAlertsFilters && (
<Flex>
<Touchable
accessibilityLabel="Set price range"
accessibilityRole="button"
onPress={() => navigation.navigate("AlertPriceRange")}
>
<Flex flexDirection="row" alignItems="center" py={1}>
<Flex flex={1}>
<Text variant="sm-display">Set price range you are interested in</Text>
</Flex>
<Flex alignSelf="center" mt={0.5}>
<ArrowRightIcon />
</Flex>
</Flex>
</Touchable>
</Flex>
)}

<Box>
<SavedSearchAlertSwitch
label="Push Notifications"
onChange={onTogglePushNotification}
active={values.push}
/>
{!!enableDetailsInput && (
<Flex>
<Text>Tell us more about what you’re looking for</Text>

<Spacer y={1} />

<SavedSearchAlertSwitch
label="Email"
onChange={onToggleEmailNotification}
active={values.email}
<Input
placeholder="For example, a specific request such as ‘figurative painting’ or ‘David Hockney iPad drawings.’"
value={values.details}
onChangeText={handleChange("details")}
onBlur={handleBlur("details")}
error={errors.details}
multiline
maxLength={700}
testID="alert-input-details"
/>
</Flex>
)}

{!!shouldShowEmailWarning && (
<Box backgroundColor="orange10" my={1} p={2}>
<Text variant="xs" color="orange150">
Change your email preferences
</Text>
<Text variant="xs" mt={0.5}>
To receive alerts via email, please update your email preferences.
</Text>
</Box>
)}
<Box>
<SavedSearchAlertSwitch
label="Push Notifications"
onChange={onTogglePushNotification}
active={values.push}
/>

{!!values.email && (
<Text
onPress={handleUpdateEmailPreferencesPress}
variant="xs"
color="black60"
style={{ textDecorationLine: "underline" }}
mt={1}
>
Update email preferences
<Spacer y={1} />

<SavedSearchAlertSwitch
label="Email"
onChange={onToggleEmailNotification}
active={values.email}
/>

{!!shouldShowEmailWarning && (
<Box backgroundColor="orange10" my={1} p={2}>
<Text variant="xs" color="orange150">
Change your email preferences
</Text>
)}
</Box>
</Join>
<Text variant="xs" mt={0.5}>
To receive alerts via email, please update your email preferences.
</Text>
</Box>
)}

{!!values.email && (
<Text
onPress={handleUpdateEmailPreferencesPress}
variant="xs"
color="black60"
style={{ textDecorationLine: "underline" }}
mt={1}
>
Update email preferences
</Text>
)}
</Box>
</Join>

<Spacer y={2} />
</ScrollView>
</ArtsyKeyboardAvoidingView>
<Spacer y={2} />
</ScrollView>

<Flex
p={2}
Expand Down
Loading

0 comments on commit a118ed4

Please sign in to comment.