Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CP Staging] Fix useResponsiveLayout bugs #48723

Merged
merged 6 commits into from
Sep 7, 2024
Merged

[CP Staging] Fix useResponsiveLayout bugs #48723

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6979c15
Fix - App freezes when clicking checkbox in subtag list
rayane-d Sep 6, 2024
60f9fcc
Fix - Report fields - No checkbox next to list value on web layout
rayane-d Sep 6, 2024
71489bb
Clarify comments
rayane-d Sep 6, 2024
6bd40e0
Clarify comments
rayane-d Sep 6, 2024
cce4b4d
Rename web and desktop sourcemaps artifacts before upload in order to…
rayane-d Sep 6, 2024
26b28ec
Revert "Rename web and desktop sourcemaps artifacts before upload in …
rayane-d Sep 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/components/SelectionListWithModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,15 @@ function SelectionListWithModal<TItem extends ListItem>(
const [isModalVisible, setIsModalVisible] = useState(false);
const [longPressedItem, setLongPressedItem] = useState<TItem | null>(null);
const {translate} = useLocalize();
const {shouldUseNarrowLayout} = useResponsiveLayout();
// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout https://github.com/Expensify/App/issues/48675
// Because there is a race condition somewhere in the app that causes shouldUseNarrowLayout to change indefinitely in this component
const {isSmallScreenWidth} = useResponsiveLayout();
const {selectionMode} = useMobileSelectionMode(true);

useEffect(() => {
// We can access 0 index safely as we are not displaying multiple sections in table view
const selectedItems = sections[0].data.filter((item) => item.isSelected);
if (!shouldUseNarrowLayout) {
if (!isSmallScreenWidth) {
if (selectedItems.length === 0) {
turnOffMobileSelectionMode();
}
Expand All @@ -38,11 +40,11 @@ function SelectionListWithModal<TItem extends ListItem>(
if (selectedItems.length > 0 && !selectionMode?.isEnabled) {
turnOnMobileSelectionMode();
}
}, [sections, selectionMode, shouldUseNarrowLayout]);
}, [sections, selectionMode, isSmallScreenWidth]);

const handleLongPressRow = (item: TItem) => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if (!turnOnSelectionModeOnLongPress || !shouldUseNarrowLayout || item?.isDisabled || item?.isDisabledCheckbox) {
if (!turnOnSelectionModeOnLongPress || !isSmallScreenWidth || item?.isDisabled || item?.isDisabledCheckbox) {
return;
}
setLongPressedItem(item);
Expand Down
17 changes: 9 additions & 8 deletions src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,16 @@ function ReportFieldsListValuesPage({
}: ReportFieldsListValuesPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {shouldUseNarrowLayout} = useResponsiveLayout();
// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use selection mode on small screens only https://github.com/Expensify/App/issues/48724
const {isSmallScreenWidth} = useResponsiveLayout();
const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT);
const {selectionMode} = useMobileSelectionMode();

const [selectedValues, setSelectedValues] = useState<Record<string, boolean>>({});
const [deleteValuesConfirmModalVisible, setDeleteValuesConfirmModalVisible] = useState(false);
const hasAccountingConnections = PolicyUtils.hasAccountingConnections(policy);

const canSelectMultiple = !hasAccountingConnections && (shouldUseNarrowLayout ? selectionMode?.isEnabled : true);
const canSelectMultiple = !hasAccountingConnections && (isSmallScreenWidth ? selectionMode?.isEnabled : true);

const [listValues, disabledListValues] = useMemo(() => {
let reportFieldValues: string[];
Expand Down Expand Up @@ -177,7 +178,7 @@ function ReportFieldsListValuesPage({

const getHeaderButtons = () => {
const options: Array<DropdownOption<DeepValueOf<typeof CONST.POLICY.BULK_ACTION_TYPES>>> = [];
if (shouldUseNarrowLayout ? selectionMode?.isEnabled : selectedValuesArray.length > 0) {
if (isSmallScreenWidth ? selectionMode?.isEnabled : selectedValuesArray.length > 0) {
if (selectedValuesArray.length > 0) {
options.push({
icon: Expensicons.Trashcan,
Expand Down Expand Up @@ -259,15 +260,15 @@ function ReportFieldsListValuesPage({
customText={translate('workspace.common.selected', {selectedNumber: selectedValuesArray.length})}
options={options}
isSplitButton={false}
style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]}
style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}
isDisabled={!selectedValuesArray.length}
/>
);
}

return (
<Button
style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]}
style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}
medium
success
icon={Expensicons.Plus}
Expand All @@ -277,7 +278,7 @@ function ReportFieldsListValuesPage({
);
};

const selectionModeHeader = selectionMode?.isEnabled && shouldUseNarrowLayout;
const selectionModeHeader = selectionMode?.isEnabled && isSmallScreenWidth;

return (
<AccessOrNotFoundWrapper
Expand All @@ -302,9 +303,9 @@ function ReportFieldsListValuesPage({
Navigation.goBack();
}}
>
{!shouldUseNarrowLayout && !hasAccountingConnections && getHeaderButtons()}
{!isSmallScreenWidth && !hasAccountingConnections && getHeaderButtons()}
</HeaderWithBackButton>
{shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{!hasAccountingConnections && getHeaderButtons()}</View>}
{isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{!hasAccountingConnections && getHeaderButtons()}</View>}
<View style={[styles.ph5, styles.pv4]}>
<Text style={[styles.sidebarLinkText, styles.optionAlternateText]}>{translate('workspace.reportFields.listInputSubtitle')}</Text>
</View>
Expand Down
Loading