From 1035c9458ecdab50b4f313cbe7de88df912ecf08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 10:29:47 +1300 Subject: [PATCH 01/22] hide modal footer buttons while keyboard is open --- .../common/src/hooks/useDialog/useDialog.tsx | 51 +++++++++++++------ 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index d9bd3f210b..d8a4c7fe4f 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -6,6 +6,8 @@ import { Slide } from '../../ui/animations'; import { BasicModal, ModalTitle } from '@common/components'; import { useIntlUtils } from '@common/intl'; import { SxProps, Theme } from '@mui/material'; +import { Capacitor } from '@capacitor/core'; +import { Keyboard } from '@capacitor/keyboard'; type OkClickEvent = React.MouseEvent; @@ -161,6 +163,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { isRtl, animationTimeout ); + const [showActions, setShowActions] = useState(true); const defaultPreventedOnClick = (onClick: (e?: OkClickEvent) => Promise) => @@ -215,6 +218,22 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { width: width ? Math.min(window.innerWidth - 50, width) : undefined, }; + // Hide while keyboard is open fora bit more screen real estate + useEffect(() => { + if (!Capacitor.isPluginAvailable('Keyboard')) return; + + Keyboard.addListener('keyboardDidShow', () => { + setShowActions(false); + }); + Keyboard.addListener('keyboardDidHide', () => { + setShowActions(true); + }); + + return () => { + Keyboard.removeAllListeners(); + }; + }, []); + return ( {
{children}
)} - - {cancelButton} - {deleteButton} - {saveButton} - {copyButton} - {WrappedOkButton} - {WrappedNextButton} - {reportSelector} - + {showActions && ( + + {cancelButton} + {deleteButton} + {saveButton} + {copyButton} + {WrappedOkButton} + {WrappedNextButton} + {reportSelector} + + )} ); From cde3b3c16da4ecafb7fe1a53bc4e5602a5b3fd7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 10:31:41 +1300 Subject: [PATCH 02/22] modal full screen mode --- .../src/ui/components/modals/BasicModal/BasicModal.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx b/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx index 0f44cae1e4..8a69bee4af 100644 --- a/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx +++ b/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import Dialog, { DialogProps as MuiDialogProps } from '@mui/material/Dialog'; import { useIntlUtils } from '@common/intl'; -import { SxProps, Theme } from '@mui/material'; +import { SxProps, Theme, useMediaQuery } from '@mui/material'; interface DialogProps extends MuiDialogProps { height?: number; @@ -17,11 +17,13 @@ export const BasicModal: FC = ({ ...dialogProps }) => { const { isRtl } = useIntlUtils(); + const fullScreen = useMediaQuery('(max-height: 850px)'); return ( Date: Wed, 15 Jan 2025 10:34:21 +1300 Subject: [PATCH 03/22] remove useKeyboardHeightAdjustment usages --- .../modal/StocktakeLineEdit/StocktakeLineEditModal.tsx | 4 +--- .../DetailView/modals/InboundLineEdit/InboundLineEdit.tsx | 4 +--- .../DetailView/OutboundLineEdit/OutboundLineEdit.tsx | 4 +--- .../src/Returns/modals/CustomerReturn/CustomerReturn.tsx | 4 +--- .../src/Returns/modals/SupplierReturn/SupplierReturn.tsx | 4 +--- .../src/VaccineCourseEditModal/VaccineCourseEditModal.tsx | 4 +--- .../Item/DetailView/Tabs/ItemVariants/BundledItemModal.tsx | 4 +--- .../Item/DetailView/Tabs/ItemVariants/ItemVariantModal.tsx | 4 +--- .../src/Name/ListView/Facilities/FacilityEditModal.tsx | 5 +---- .../InventoryAdjustment/InventoryAdjustmentModal.tsx | 4 +--- .../system/src/Vaccination/Components/VaccinationModal.tsx | 4 +--- 11 files changed, 11 insertions(+), 34 deletions(-) diff --git a/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx b/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx index 3b3e434d36..baa37ee00f 100644 --- a/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx +++ b/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx @@ -4,7 +4,6 @@ import { useTranslation, ModalMode, DialogButton, - useKeyboardHeightAdjustment, } from '@openmsupply-client/common'; interface StocktakeLineEditModalProps { @@ -26,7 +25,6 @@ export const StocktakeLineEditModal: FC< disableBackdrop: true, }); const t = useTranslation(); - const height = useKeyboardHeightAdjustment(600); return ( } - height={height} + height={600} width={1125} > <>{children} diff --git a/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx b/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx index 45b49b807b..fe64b15808 100644 --- a/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx +++ b/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx @@ -12,7 +12,6 @@ import { TableProvider, createTableStore, createQueryParamsStore, - useKeyboardHeightAdjustment, } from '@openmsupply-client/common'; import { InboundLineEditForm } from './InboundLineEditForm'; import { InboundLineFragment, useInbound } from '../../../api'; @@ -128,7 +127,6 @@ export const InboundLineEdit: FC = ({ currentItem?.id ?? '' ); const { Modal } = useDialog({ isOpen, onClose, disableBackdrop: true }); - const height = useKeyboardHeightAdjustment(600); const { draftLines, addDraftLine, updateDraftLine, isLoading, saveLines } = useDraftInboundLines(currentItem); const okNextDisabled = @@ -182,7 +180,7 @@ export const InboundLineEdit: FC = ({ }} /> } - height={height} + height={600} width={1024} enableAutocomplete /* Required for previously entered batches to be remembered and suggested in future shipments */ > diff --git a/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx b/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx index e5a4a87be5..13d95ac611 100644 --- a/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx +++ b/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx @@ -13,7 +13,6 @@ import { TableProvider, createTableStore, createQueryParamsStore, - useKeyboardHeightAdjustment, InvoiceLineNodeType, useNotification, InvoiceNodeStatus, @@ -90,7 +89,6 @@ export const OutboundLineEdit: React.FC = ({ const packSizeController = usePackSizeController(draftStockOutLines); const { next, disabled: nextDisabled } = useNextItem(currentItem?.id); const { isDirty, setIsDirty } = useDirtyCheck(); - const height = useKeyboardHeightAdjustment(700); const { warning } = useNotification(); const [showZeroQuantityConfirmation, setShowZeroQuantityConfirmation] = useState(false); @@ -233,7 +231,7 @@ export const OutboundLineEdit: React.FC = ({ onClick={() => handleSave(onClose)} /> } - height={height} + height={700} width={1000} > diff --git a/client/packages/invoices/src/Returns/modals/CustomerReturn/CustomerReturn.tsx b/client/packages/invoices/src/Returns/modals/CustomerReturn/CustomerReturn.tsx index ac6d342ba8..1af696ed82 100644 --- a/client/packages/invoices/src/Returns/modals/CustomerReturn/CustomerReturn.tsx +++ b/client/packages/invoices/src/Returns/modals/CustomerReturn/CustomerReturn.tsx @@ -5,7 +5,6 @@ import { DialogButton, TableProvider, createTableStore, - useKeyboardHeightAdjustment, useTabs, ModalMode, Box, @@ -61,7 +60,6 @@ export const CustomerReturnEditModal = ({ const isDisabled = useReturns.utils.customerIsDisabled() && !isNewReturn; const { Modal } = useDialog({ isOpen, onClose, disableBackdrop: true }); - const height = useKeyboardHeightAdjustment(700); const { lines, update, save, addDraftLine } = useDraftCustomerReturnLines({ outboundShipmentLineIds, @@ -151,7 +149,7 @@ export const CustomerReturnEditModal = ({ : OkButton } nextButton={!isNewReturn ? OkAndNextButton : undefined} - height={height} + height={700} width={1024} > diff --git a/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx b/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx index 5e3de02a4f..0fc4b3279b 100644 --- a/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx +++ b/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx @@ -5,7 +5,6 @@ import { DialogButton, TableProvider, createTableStore, - useKeyboardHeightAdjustment, useTabs, Box, ModalMode, @@ -59,7 +58,6 @@ export const SupplierReturnEditModal = ({ const isDisabled = useReturns.utils.supplierIsDisabled() && !isNewReturn; const { Modal } = useDialog({ isOpen, onClose, disableBackdrop: true }); - const height = useKeyboardHeightAdjustment(600); const { lines, update, save } = useDraftSupplierReturnLines({ supplierId, @@ -149,7 +147,7 @@ export const SupplierReturnEditModal = ({ : OkButton } nextButton={!isNewReturn ? OkAndNextButton : undefined} - height={height} + height={600} width={1024} > diff --git a/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx b/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx index 21a5fa1540..90970ba8b7 100644 --- a/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx +++ b/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx @@ -26,7 +26,6 @@ import { TextInputCell, useColumns, useDialog, - useKeyboardHeightAdjustment, useNotification, useTranslation, } from '@openmsupply-client/common'; @@ -103,7 +102,6 @@ export const VaccineCourseEditModal: FC = ({ const { data: demographicData } = useDemographicData.demographics.list(); const { Modal } = useDialog({ isOpen, onClose, disableBackdrop: true }); - const height = useKeyboardHeightAdjustment(900); const options = useMemo( () => getDemographicOptions(demographicData?.nodes ?? []), @@ -223,7 +221,7 @@ export const VaccineCourseEditModal: FC = ({ onClick={save} /> } - height={height} + height={900} sx={{ width: 1100, maxWidth: 'unset', diff --git a/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/BundledItemModal.tsx b/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/BundledItemModal.tsx index c06962c7da..cb17a628eb 100644 --- a/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/BundledItemModal.tsx +++ b/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/BundledItemModal.tsx @@ -7,7 +7,6 @@ import { Box, useTranslation, useDialog, - useKeyboardHeightAdjustment, QueryParamsProvider, createQueryParamsStore, useNotification, @@ -35,7 +34,6 @@ export const BundledItemModal = ({ }) => { const t = useTranslation(); const { Modal } = useDialog({ isOpen: true, onClose, disableBackdrop: true }); - const height = useKeyboardHeightAdjustment(350); const { success } = useNotification(); const { draft, isComplete, updateDraft, save } = useUpsertBundledItem({ @@ -58,7 +56,7 @@ export const BundledItemModal = ({ }} /> } - height={height} + height={350} width={700} slideAnimation={false} > diff --git a/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/ItemVariantModal.tsx b/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/ItemVariantModal.tsx index f677510d06..06679bb25b 100644 --- a/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/ItemVariantModal.tsx +++ b/client/packages/system/src/Item/DetailView/Tabs/ItemVariants/ItemVariantModal.tsx @@ -8,7 +8,6 @@ import { Box, useTranslation, useDialog, - useKeyboardHeightAdjustment, QueryParamsProvider, createQueryParamsStore, useNotification, @@ -33,7 +32,6 @@ export const ItemVariantModal = ({ }) => { const t = useTranslation(); const { Modal } = useDialog({ isOpen: true, onClose, disableBackdrop: true }); - const height = useKeyboardHeightAdjustment(500); const { success, error } = useNotification(); const { draft, isComplete, updateDraft, updatePackagingVariant, save } = @@ -74,7 +72,7 @@ export const ItemVariantModal = ({ }} /> } - height={height} + height={500} width={1000} slideAnimation={false} > diff --git a/client/packages/system/src/Name/ListView/Facilities/FacilityEditModal.tsx b/client/packages/system/src/Name/ListView/Facilities/FacilityEditModal.tsx index 8b84a2290e..450a02fd4b 100644 --- a/client/packages/system/src/Name/ListView/Facilities/FacilityEditModal.tsx +++ b/client/packages/system/src/Name/ListView/Facilities/FacilityEditModal.tsx @@ -7,7 +7,6 @@ import { BasicSpinner, useDialog, DialogButton, - useKeyboardHeightAdjustment, Typography, PropertyInput, InputWithLabelRow, @@ -58,8 +57,6 @@ export const FacilityEditModal: FC = ({ const { Modal } = useDialog({ isOpen, onClose, disableBackdrop: true }); - const height = useKeyboardHeightAdjustment(600); - const { draftProperties, setDraftProperties } = useDraftFacilityProperties( data?.properties ); @@ -102,7 +99,7 @@ export const FacilityEditModal: FC = ({ /> ) } - height={height} + height={600} width={700} > diff --git a/client/packages/system/src/Stock/Components/InventoryAdjustment/InventoryAdjustmentModal.tsx b/client/packages/system/src/Stock/Components/InventoryAdjustment/InventoryAdjustmentModal.tsx index 675d735f85..d6ea0f1b8b 100644 --- a/client/packages/system/src/Stock/Components/InventoryAdjustment/InventoryAdjustmentModal.tsx +++ b/client/packages/system/src/Stock/Components/InventoryAdjustment/InventoryAdjustmentModal.tsx @@ -8,7 +8,6 @@ import { useNotification, AdjustmentTypeInput, useDialog, - useKeyboardHeightAdjustment, } from '@openmsupply-client/common'; import { StockLineRowFragment, useInventoryAdjustment } from '../../api'; import { InventoryAdjustmentReasonSearchInput } from '../../..'; @@ -28,7 +27,6 @@ export const InventoryAdjustmentModal: FC = ({ const t = useTranslation(); const { success, error } = useNotification(); const { Modal } = useDialog({ isOpen, onClose }); - const height = useKeyboardHeightAdjustment(575); const { draft, setDraft, create } = useInventoryAdjustment(stockLine); @@ -57,7 +55,7 @@ export const InventoryAdjustmentModal: FC = ({ return ( } - height={height} + height={700} width={550} slideAnimation={false} contentProps={{ sx: { paddingTop: !!InfoBox ? 0 : undefined } }} From c5a7593adb651b11fec2bf197efec600795ae868 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 10:50:52 +1300 Subject: [PATCH 04/22] make useKeyboardIsOpen hook --- client/packages/common/src/hooks/index.ts | 1 + .../common/src/hooks/useDialog/useDialog.tsx | 23 +++--------------- .../src/hooks/useKeyboardIsOpen/index.ts | 1 + .../useKeyboardIsOpen/useKeyboardIsOpen.ts | 24 +++++++++++++++++++ 4 files changed, 29 insertions(+), 20 deletions(-) create mode 100644 client/packages/common/src/hooks/useKeyboardIsOpen/index.ts create mode 100644 client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts diff --git a/client/packages/common/src/hooks/index.ts b/client/packages/common/src/hooks/index.ts index fb13d2ffc8..7b895f23ae 100644 --- a/client/packages/common/src/hooks/index.ts +++ b/client/packages/common/src/hooks/index.ts @@ -23,6 +23,7 @@ export * from './useUrlQuery'; export * from './useToggle'; export * from './useWindowDimensions'; export * from './useKeyboardHeightAdjustment'; +export * from './useKeyboardIsOpen'; export * from './useNativeClient'; export * from './useWebClient'; export * from './useInterval'; diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index d8a4c7fe4f..16e1ec02d3 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -6,8 +6,7 @@ import { Slide } from '../../ui/animations'; import { BasicModal, ModalTitle } from '@common/components'; import { useIntlUtils } from '@common/intl'; import { SxProps, Theme } from '@mui/material'; -import { Capacitor } from '@capacitor/core'; -import { Keyboard } from '@capacitor/keyboard'; +import { useKeyboardIsOpen } from '../useKeyboardIsOpen'; type OkClickEvent = React.MouseEvent; @@ -163,7 +162,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { isRtl, animationTimeout ); - const [showActions, setShowActions] = useState(true); + const hideActions = useKeyboardIsOpen(); const defaultPreventedOnClick = (onClick: (e?: OkClickEvent) => Promise) => @@ -218,22 +217,6 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { width: width ? Math.min(window.innerWidth - 50, width) : undefined, }; - // Hide while keyboard is open fora bit more screen real estate - useEffect(() => { - if (!Capacitor.isPluginAvailable('Keyboard')) return; - - Keyboard.addListener('keyboardDidShow', () => { - setShowActions(false); - }); - Keyboard.addListener('keyboardDidHide', () => { - setShowActions(true); - }); - - return () => { - Keyboard.removeAllListeners(); - }; - }, []); - return ( {
{children}
)} - {showActions && ( + {!hideActions && ( { + const [open, setOpen] = useState(false); + + useEffect(() => { + if (!Capacitor.isPluginAvailable('Keyboard')) return; + + Keyboard.addListener('keyboardDidShow', () => { + setOpen(true); + }); + Keyboard.addListener('keyboardDidHide', () => { + setOpen(false); + }); + + return () => { + Keyboard.removeAllListeners(); + }; + }, []); + + return open; +}; From bd6b9a50b74afc2335688ced4072579f7dc288d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 11:38:38 +1300 Subject: [PATCH 05/22] prevent full screen for small modals --- .../common/src/hooks/useDialog/useDialog.tsx | 41 ++++++++++--------- .../modals/BasicModal/BasicModal.tsx | 4 +- .../modals/InputModal/InputModal.tsx | 6 ++- .../portals/AppFooter/AppFooter.tsx | 7 +++- 4 files changed, 34 insertions(+), 24 deletions(-) diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index 16e1ec02d3..4c11997176 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -5,7 +5,7 @@ import { TransitionProps } from '@mui/material/transitions'; import { Slide } from '../../ui/animations'; import { BasicModal, ModalTitle } from '@common/components'; import { useIntlUtils } from '@common/intl'; -import { SxProps, Theme } from '@mui/material'; +import { SxProps, Theme, useMediaQuery } from '@mui/material'; import { useKeyboardIsOpen } from '../useKeyboardIsOpen'; type OkClickEvent = React.MouseEvent; @@ -54,6 +54,7 @@ export interface DialogProps { animationTimeout?: number; disableBackdrop?: boolean; disableEscapeKey?: boolean; + disableMobileFullScreen?: boolean; } interface DialogState { @@ -99,6 +100,7 @@ const useSlideAnimation = (isRtl: boolean, timeout: number) => { * @property {number} [animationTimeout=500] the timeout for the slide animation * @property {boolean} [disableBackdrop=false] (optional) disable clicking the backdrop to close the modal * @property {boolean} [disableEscape=false] (optional) disable pressing of the escape key to close the modal + * @property {boolean} [disableMobileFullScreen=false] (optional) disable modal entering fullscreen mode on smaller screens * @property {boolean} isOpen (optional) is the modal open * @property {function} onClose (optional) method to run on closing the modal * @return {DialogState} the dialog state. Properties are: @@ -114,6 +116,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { animationTimeout = 500, disableBackdrop = true, disableEscapeKey = false, + disableMobileFullScreen = false, } = dialogProps ?? {}; const [open, setOpen] = React.useState(false); const showDialog = useCallback(() => setOpen(true), []); @@ -162,7 +165,8 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { isRtl, animationTimeout ); - const hideActions = useKeyboardIsOpen(); + const keyboardOpen = useKeyboardIsOpen(); + const fullScreen = useMediaQuery('(max-height: 850px)'); const defaultPreventedOnClick = (onClick: (e?: OkClickEvent) => Promise) => @@ -226,6 +230,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { sx={sx} TransitionComponent={Transition} disableEscapeKeyDown={false} + fullScreen={disableMobileFullScreen ? false : fullScreen} > {title ? : null}
{
{children}
)} - {!hideActions && ( - - {cancelButton} - {deleteButton} - {saveButton} - {copyButton} - {WrappedOkButton} - {WrappedNextButton} - {reportSelector} - - )} + + {cancelButton} + {deleteButton} + {saveButton} + {copyButton} + {WrappedOkButton} + {WrappedNextButton} + {reportSelector} +
); diff --git a/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx b/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx index 8a69bee4af..5ba5313acb 100644 --- a/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx +++ b/client/packages/common/src/ui/components/modals/BasicModal/BasicModal.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import Dialog, { DialogProps as MuiDialogProps } from '@mui/material/Dialog'; import { useIntlUtils } from '@common/intl'; -import { SxProps, Theme, useMediaQuery } from '@mui/material'; +import { SxProps, Theme } from '@mui/material'; interface DialogProps extends MuiDialogProps { height?: number; @@ -14,10 +14,10 @@ export const BasicModal: FC = ({ width = 500, height = 400, sx, + fullScreen, ...dialogProps }) => { const { isRtl } = useIntlUtils(); - const fullScreen = useMediaQuery('(max-height: 850px)'); return ( { - const { Modal } = useDialog({ isOpen, onClose }); + const { Modal } = useDialog({ + isOpen, + onClose, + disableMobileFullScreen: true, + }); const [loading, setLoading] = useState(false); return ( diff --git a/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx b/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx index 16b30ca6b1..be3f2f5e96 100644 --- a/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx +++ b/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx @@ -1,7 +1,7 @@ import { Box, BoxProps, Portal } from '@mui/material'; import { styled } from '@mui/material/styles'; import React, { FC, ReactNode, useEffect, useRef } from 'react'; -import { useHostContext } from '@common/hooks'; +import { useHostContext, useKeyboardIsOpen } from '@common/hooks'; import { useIsCentralServerApi } from '@openmsupply-client/common'; const Container = styled('div')(() => ({ @@ -17,6 +17,7 @@ const Container = styled('div')(() => ({ export const AppFooter: FC = () => { const { setAppFooterRef, setAppSessionDetailsRef, fullScreen } = useHostContext(); + const keyboardOpen = useKeyboardIsOpen(); const appFooterRef = useRef(null); const appSessionDetailsRef = useRef(null); const isCentralServer = useIsCentralServerApi(); @@ -26,8 +27,10 @@ export const AppFooter: FC = () => { setAppSessionDetailsRef(appSessionDetailsRef); }, []); + const hideFooter = fullScreen || keyboardOpen; + return ( - + Date: Wed, 15 Jan 2025 11:44:42 +1300 Subject: [PATCH 06/22] remove width limit on report arguments description --- .../system/src/Report/components/ReportArgumentsModal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/client/packages/system/src/Report/components/ReportArgumentsModal.tsx b/client/packages/system/src/Report/components/ReportArgumentsModal.tsx index ebe6dd3447..ff493aa052 100644 --- a/client/packages/system/src/Report/components/ReportArgumentsModal.tsx +++ b/client/packages/system/src/Report/components/ReportArgumentsModal.tsx @@ -70,9 +70,7 @@ export const ReportArgumentsModal: FC = ({ } > <> - - {t('message.arguments')} - + {t('message.arguments')} Date: Wed, 15 Jan 2025 11:55:24 +1300 Subject: [PATCH 07/22] remove dialog button margins when keyboard open --- client/packages/common/src/hooks/useDialog/useDialog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index 4c11997176..a45fb17a7d 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -257,8 +257,8 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { {cancelButton} From 34b53f9708c7e11c332e81b722d0f924aff958c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 13:28:31 +1300 Subject: [PATCH 08/22] fix report arguments styling --- .../system/src/Report/components/ReportArgumentsModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/packages/system/src/Report/components/ReportArgumentsModal.tsx b/client/packages/system/src/Report/components/ReportArgumentsModal.tsx index ff493aa052..ab94dba646 100644 --- a/client/packages/system/src/Report/components/ReportArgumentsModal.tsx +++ b/client/packages/system/src/Report/components/ReportArgumentsModal.tsx @@ -68,6 +68,7 @@ export const ReportArgumentsModal: FC = ({ }} /> } + contentProps={{ sx: { margin: '0 auto' } }} > <> {t('message.arguments')} From f686c6b5d2a966e33724612becc4976f0ac0232c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 13:30:23 +1300 Subject: [PATCH 09/22] fix listeners clearing --- .../useKeyboardIsOpen/useKeyboardIsOpen.ts | 23 ++++++++++-------- .../src/RnRForms/DetailView/Footer.tsx | 24 +++++++++++-------- 2 files changed, 27 insertions(+), 20 deletions(-) diff --git a/client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts b/client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts index b25d730c5f..137ab9b4e7 100644 --- a/client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts +++ b/client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts @@ -6,18 +6,21 @@ export const useKeyboardIsOpen = () => { const [open, setOpen] = useState(false); useEffect(() => { - if (!Capacitor.isPluginAvailable('Keyboard')) return; + (async () => { + if (!Capacitor.isPluginAvailable('Keyboard')) return; - Keyboard.addListener('keyboardDidShow', () => { - setOpen(true); - }); - Keyboard.addListener('keyboardDidHide', () => { - setOpen(false); - }); + const showListener = await Keyboard.addListener('keyboardDidShow', () => { + setOpen(true); + }); + const hideListener = await Keyboard.addListener('keyboardDidHide', () => { + setOpen(false); + }); - return () => { - Keyboard.removeAllListeners(); - }; + return () => { + showListener.remove(); + hideListener.remove(); + }; + })(); }, []); return open; diff --git a/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx b/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx index 9e7a269d75..7899986af2 100644 --- a/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx +++ b/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx @@ -60,18 +60,22 @@ export const Footer = ({ // Hide while keyboard is open fora bit more screen real estate useEffect(() => { - if (!Capacitor.isPluginAvailable('Keyboard')) return; + (async () => { + if (!Capacitor.isPluginAvailable('Keyboard')) return; - Keyboard.addListener('keyboardDidShow', () => { - setShowFooter(false); - }); - Keyboard.addListener('keyboardDidHide', () => { - setShowFooter(true); - }); + const showListener = await Keyboard.addListener('keyboardDidShow', () => { + setShowFooter(false); + }); + const hideListener = await Keyboard.addListener('keyboardDidHide', () => { + setShowFooter(true); + }); - return () => { - Keyboard.removeAllListeners(); - }; + // cleanup + return () => { + showListener.remove(); + hideListener.remove(); + }; + })(); }, []); return ( From 65dd51fa6611d97805e67082e4a52b1c54c6de0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 14:36:09 +1300 Subject: [PATCH 10/22] useKeyboardIsOpen -> useKeyboard --- client/packages/common/src/hooks/index.ts | 2 +- .../common/src/hooks/useDialog/useDialog.tsx | 8 ++++---- .../packages/common/src/hooks/useKeyboard/index.ts | 1 + .../useKeyboard.ts} | 12 ++++++++---- .../common/src/hooks/useKeyboardIsOpen/index.ts | 1 - .../ui/components/portals/AppFooter/AppFooter.tsx | 4 ++-- 6 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 client/packages/common/src/hooks/useKeyboard/index.ts rename client/packages/common/src/hooks/{useKeyboardIsOpen/useKeyboardIsOpen.ts => useKeyboard/useKeyboard.ts} (71%) delete mode 100644 client/packages/common/src/hooks/useKeyboardIsOpen/index.ts diff --git a/client/packages/common/src/hooks/index.ts b/client/packages/common/src/hooks/index.ts index 7b895f23ae..e3598f0fcb 100644 --- a/client/packages/common/src/hooks/index.ts +++ b/client/packages/common/src/hooks/index.ts @@ -23,7 +23,7 @@ export * from './useUrlQuery'; export * from './useToggle'; export * from './useWindowDimensions'; export * from './useKeyboardHeightAdjustment'; -export * from './useKeyboardIsOpen'; +export * from './useKeyboard'; export * from './useNativeClient'; export * from './useWebClient'; export * from './useInterval'; diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index a45fb17a7d..6ada96fe5c 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -6,7 +6,7 @@ import { Slide } from '../../ui/animations'; import { BasicModal, ModalTitle } from '@common/components'; import { useIntlUtils } from '@common/intl'; import { SxProps, Theme, useMediaQuery } from '@mui/material'; -import { useKeyboardIsOpen } from '../useKeyboardIsOpen'; +import { useKeyboard } from '../useKeyboard'; type OkClickEvent = React.MouseEvent; @@ -165,7 +165,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { isRtl, animationTimeout ); - const keyboardOpen = useKeyboardIsOpen(); + const { isOpen: keyboardIsOpen } = useKeyboard(); const fullScreen = useMediaQuery('(max-height: 850px)'); const defaultPreventedOnClick = @@ -257,8 +257,8 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { {cancelButton} diff --git a/client/packages/common/src/hooks/useKeyboard/index.ts b/client/packages/common/src/hooks/useKeyboard/index.ts new file mode 100644 index 0000000000..b5677cb41e --- /dev/null +++ b/client/packages/common/src/hooks/useKeyboard/index.ts @@ -0,0 +1 @@ +export * from './useKeyboard'; diff --git a/client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts b/client/packages/common/src/hooks/useKeyboard/useKeyboard.ts similarity index 71% rename from client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts rename to client/packages/common/src/hooks/useKeyboard/useKeyboard.ts index 137ab9b4e7..866c708397 100644 --- a/client/packages/common/src/hooks/useKeyboardIsOpen/useKeyboardIsOpen.ts +++ b/client/packages/common/src/hooks/useKeyboard/useKeyboard.ts @@ -2,12 +2,13 @@ import { useEffect, useState } from 'react'; import { Keyboard } from '@capacitor/keyboard'; import { Capacitor } from '@capacitor/core'; -export const useKeyboardIsOpen = () => { - const [open, setOpen] = useState(false); +export const useKeyboard = () => { + const [isOpen, setOpen] = useState(false); + const isEnabled = Capacitor.isPluginAvailable('Keyboard'); useEffect(() => { (async () => { - if (!Capacitor.isPluginAvailable('Keyboard')) return; + if (!isEnabled) return; const showListener = await Keyboard.addListener('keyboardDidShow', () => { setOpen(true); @@ -23,5 +24,8 @@ export const useKeyboardIsOpen = () => { })(); }, []); - return open; + return { + isOpen, + isEnabled, + }; }; diff --git a/client/packages/common/src/hooks/useKeyboardIsOpen/index.ts b/client/packages/common/src/hooks/useKeyboardIsOpen/index.ts deleted file mode 100644 index ea08421c2e..0000000000 --- a/client/packages/common/src/hooks/useKeyboardIsOpen/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useKeyboardIsOpen'; diff --git a/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx b/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx index be3f2f5e96..0b3e79a732 100644 --- a/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx +++ b/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx @@ -1,7 +1,7 @@ import { Box, BoxProps, Portal } from '@mui/material'; import { styled } from '@mui/material/styles'; import React, { FC, ReactNode, useEffect, useRef } from 'react'; -import { useHostContext, useKeyboardIsOpen } from '@common/hooks'; +import { useHostContext, useKeyboard } from '@common/hooks'; import { useIsCentralServerApi } from '@openmsupply-client/common'; const Container = styled('div')(() => ({ @@ -17,7 +17,7 @@ const Container = styled('div')(() => ({ export const AppFooter: FC = () => { const { setAppFooterRef, setAppSessionDetailsRef, fullScreen } = useHostContext(); - const keyboardOpen = useKeyboardIsOpen(); + const { isOpen: keyboardOpen } = useKeyboard(); const appFooterRef = useRef(null); const appSessionDetailsRef = useRef(null); const isCentralServer = useIsCentralServerApi(); From 5207e6a2a3856d0eded6aea18e3e876282ad1e4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 14:36:34 +1300 Subject: [PATCH 11/22] open autocomplete options after keyboard opens --- .../src/ui/components/inputs/Autocomplete/Autocomplete.tsx | 6 ++++++ .../inputs/Autocomplete/AutocompleteWithPagination.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx b/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx index d7a8f93e07..31c76ff14e 100644 --- a/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx +++ b/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx @@ -16,6 +16,7 @@ import { } from './types'; import { BasicTextInput } from '../TextInput'; import { StyledPopper } from './components'; +import { useKeyboard } from '@common/hooks'; export interface AutocompleteProps extends Omit< @@ -73,9 +74,11 @@ export function Autocomplete({ getOptionLabel, popperMinWidth, inputProps, + open, ...restOfAutocompleteProps }: PropsWithChildren>): JSX.Element { const filter = filterOptions ?? createFilterOptions(filterOptionConfig); + const keyboard = useKeyboard(); const defaultRenderInput = (props: AutocompleteRenderInputParams) => ( ({ onChange={onChange} getOptionLabel={getOptionLabel || defaultGetOptionLabel} PopperComponent={popperMinWidth ? CustomPopper : StyledPopper} + // prevent the popper from opening before the keyboard is opened + // keyboard moves popper up & out of correct position + open={keyboard.isEnabled && !keyboard.isOpen ? false : open} /> ); } diff --git a/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx b/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx index f8aca48213..8b2dbaf530 100644 --- a/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx +++ b/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx @@ -16,7 +16,7 @@ import { Box, } from '@mui/material'; import { BasicTextInput } from '../TextInput'; -import { useDebounceCallback } from '@common/hooks'; +import { useDebounceCallback, useKeyboard } from '@common/hooks'; import type { AutocompleteProps } from './Autocomplete'; import { StyledPopper } from './components'; import { ArrayUtils } from '@common/utils'; @@ -65,11 +65,13 @@ export function AutocompleteWithPagination({ paginationDebounce, onPageChange, mapOptions, + open, ...restOfAutocompleteProps }: PropsWithChildren>) { const filter = filterOptions ?? createFilterOptions(filterOptionConfig); const [isLoading, setIsLoading] = useState(true); const lastOptions = useRef([]); + const keyboard = useKeyboard(); const options = useMemo(() => { if (!pages) { @@ -190,6 +192,9 @@ export function AutocompleteWithPagination({ getOptionLabel={getOptionLabel || defaultGetOptionLabel} PopperComponent={popperMinWidth ? CustomPopper : StyledPopper} ListboxProps={listboxProps} + // prevent the popper from opening before the keyboard is opened + // keyboard moves popper up & out of correct position + open={keyboard.isEnabled && !keyboard.isOpen ? false : open} /> ); } From 8cf59d67b672ad47d141d6eaeee2ece2461ec536 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:27:45 +1300 Subject: [PATCH 12/22] keyboard as context for cross-render context --- .../common/src/hooks/useDialog/useDialog.tsx | 3 +- .../common/src/hooks/useKeyboard/Keyboard.tsx | 66 +++++++++++++++++++ .../common/src/hooks/useKeyboard/index.ts | 2 +- .../src/hooks/useKeyboard/useKeyboard.ts | 31 --------- .../portals/AppFooter/AppFooter.tsx | 4 +- 5 files changed, 70 insertions(+), 36 deletions(-) create mode 100644 client/packages/common/src/hooks/useKeyboard/Keyboard.tsx delete mode 100644 client/packages/common/src/hooks/useKeyboard/useKeyboard.ts diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index 6ada96fe5c..51971be921 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -165,8 +165,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { isRtl, animationTimeout ); - const { isOpen: keyboardIsOpen } = useKeyboard(); - const fullScreen = useMediaQuery('(max-height: 850px)'); + const { isOpen: keyboardIsOpen } = useKeyboardContext(); const defaultPreventedOnClick = (onClick: (e?: OkClickEvent) => Promise) => diff --git a/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx b/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx new file mode 100644 index 0000000000..595dd0b003 --- /dev/null +++ b/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx @@ -0,0 +1,66 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { Keyboard } from '@capacitor/keyboard'; +import { Capacitor } from '@capacitor/core'; +import { createRegisteredContext } from 'react-singleton-context'; + +interface KeyboardControl { + isOpen: boolean; + isEnabled: boolean; +} + +const defaultKeyboardControl: KeyboardControl = { + isOpen: false, + isEnabled: false, +}; + +const KeyboardContext = createRegisteredContext( + 'auth-context', + defaultKeyboardControl +); + +const { Provider } = KeyboardContext; + +export const KeyboardProvider = ({ + children, +}: { + children: React.ReactNode; +}) => { + const [isOpen, setOpen] = useState(false); + const isEnabled = Capacitor.isPluginAvailable('Keyboard'); + + useEffect(() => { + (async () => { + if (!isEnabled) return; + + const showListener = await Keyboard.addListener('keyboardDidShow', () => { + console.log('setting open'); + setOpen(true); + }); + const hideListener = await Keyboard.addListener('keyboardDidHide', () => { + console.log('setting closed'); + setOpen(false); + }); + + return () => { + showListener.remove(); + hideListener.remove(); + }; + })(); + }, []); + + return ( + + {children} + + ); +}; + +export const useKeyboardContext = () => { + const keyboardControl = useContext(KeyboardContext); + return keyboardControl; +}; diff --git a/client/packages/common/src/hooks/useKeyboard/index.ts b/client/packages/common/src/hooks/useKeyboard/index.ts index b5677cb41e..b608588651 100644 --- a/client/packages/common/src/hooks/useKeyboard/index.ts +++ b/client/packages/common/src/hooks/useKeyboard/index.ts @@ -1 +1 @@ -export * from './useKeyboard'; +export * from './Keyboard'; diff --git a/client/packages/common/src/hooks/useKeyboard/useKeyboard.ts b/client/packages/common/src/hooks/useKeyboard/useKeyboard.ts deleted file mode 100644 index 866c708397..0000000000 --- a/client/packages/common/src/hooks/useKeyboard/useKeyboard.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { useEffect, useState } from 'react'; -import { Keyboard } from '@capacitor/keyboard'; -import { Capacitor } from '@capacitor/core'; - -export const useKeyboard = () => { - const [isOpen, setOpen] = useState(false); - const isEnabled = Capacitor.isPluginAvailable('Keyboard'); - - useEffect(() => { - (async () => { - if (!isEnabled) return; - - const showListener = await Keyboard.addListener('keyboardDidShow', () => { - setOpen(true); - }); - const hideListener = await Keyboard.addListener('keyboardDidHide', () => { - setOpen(false); - }); - - return () => { - showListener.remove(); - hideListener.remove(); - }; - })(); - }, []); - - return { - isOpen, - isEnabled, - }; -}; diff --git a/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx b/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx index 0b3e79a732..262a468fbb 100644 --- a/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx +++ b/client/packages/common/src/ui/components/portals/AppFooter/AppFooter.tsx @@ -1,7 +1,7 @@ import { Box, BoxProps, Portal } from '@mui/material'; import { styled } from '@mui/material/styles'; import React, { FC, ReactNode, useEffect, useRef } from 'react'; -import { useHostContext, useKeyboard } from '@common/hooks'; +import { useHostContext, useKeyboardContext } from '@common/hooks'; import { useIsCentralServerApi } from '@openmsupply-client/common'; const Container = styled('div')(() => ({ @@ -17,7 +17,7 @@ const Container = styled('div')(() => ({ export const AppFooter: FC = () => { const { setAppFooterRef, setAppSessionDetailsRef, fullScreen } = useHostContext(); - const { isOpen: keyboardOpen } = useKeyboard(); + const { isOpen: keyboardOpen } = useKeyboardContext(); const appFooterRef = useRef(null); const appSessionDetailsRef = useRef(null); const isCentralServer = useIsCentralServerApi(); From 4ff8db4c6e387adaa07dc9973b7cd6d4b8055816 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:28:05 +1300 Subject: [PATCH 13/22] add close button for full screen mode --- .../common/src/hooks/useDialog/useDialog.tsx | 25 ++++++++++++++++--- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index 51971be921..902ff5ff96 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -3,10 +3,11 @@ import DialogActions from '@mui/material/DialogActions'; import DialogContent, { DialogContentProps } from '@mui/material/DialogContent'; import { TransitionProps } from '@mui/material/transitions'; import { Slide } from '../../ui/animations'; -import { BasicModal, ModalTitle } from '@common/components'; -import { useIntlUtils } from '@common/intl'; +import { BasicModal, IconButton, ModalTitle } from '@common/components'; +import { useIntlUtils, useTranslation } from '@common/intl'; import { SxProps, Theme, useMediaQuery } from '@mui/material'; -import { useKeyboard } from '../useKeyboard'; +import { useKeyboardContext } from '../useKeyboard'; +import { CloseIcon } from '@common/icons'; type OkClickEvent = React.MouseEvent; @@ -166,6 +167,8 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { animationTimeout ); const { isOpen: keyboardIsOpen } = useKeyboardContext(); + const isSmallerScreen = useMediaQuery('(max-height: 850px)'); + const t = useTranslation(); const defaultPreventedOnClick = (onClick: (e?: OkClickEvent) => Promise) => @@ -220,6 +223,8 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { width: width ? Math.min(window.innerWidth - 50, width) : undefined, }; + const fullScreen = isSmallerScreen && !disableMobileFullScreen; + return ( { sx={sx} TransitionComponent={Transition} disableEscapeKeyDown={false} - fullScreen={disableMobileFullScreen ? false : fullScreen} + fullScreen={fullScreen} > + {fullScreen && ( + } + color="primary" + onClick={() => { + onClose && onClose(); + hideDialog(); + }} + sx={{ position: 'absolute', right: 0, top: 0, padding: 2 }} + label={t('button.close')} + /> + )} {title ? : null}
Date: Wed, 15 Jan 2025 16:32:36 +1300 Subject: [PATCH 14/22] fix imports --- .../src/ui/components/inputs/Autocomplete/Autocomplete.tsx | 4 ++-- .../inputs/Autocomplete/AutocompleteWithPagination.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx b/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx index 31c76ff14e..8987dc5e3e 100644 --- a/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx +++ b/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx @@ -16,7 +16,7 @@ import { } from './types'; import { BasicTextInput } from '../TextInput'; import { StyledPopper } from './components'; -import { useKeyboard } from '@common/hooks'; +import { useKeyboardContext } from '@common/hooks'; export interface AutocompleteProps extends Omit< @@ -78,7 +78,7 @@ export function Autocomplete({ ...restOfAutocompleteProps }: PropsWithChildren>): JSX.Element { const filter = filterOptions ?? createFilterOptions(filterOptionConfig); - const keyboard = useKeyboard(); + const keyboard = useKeyboardContext(); const defaultRenderInput = (props: AutocompleteRenderInputParams) => ( ({ const filter = filterOptions ?? createFilterOptions(filterOptionConfig); const [isLoading, setIsLoading] = useState(true); const lastOptions = useRef([]); - const keyboard = useKeyboard(); + const keyboard = useKeyboardContext(); const options = useMemo(() => { if (!pages) { From 143e7fc1b3435630ab5e29ad6d529099008d4581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:41:03 +1300 Subject: [PATCH 15/22] wrap keyboard provider --- client/packages/host/src/Site.tsx | 303 ++++++++++++++++-------------- 1 file changed, 164 insertions(+), 139 deletions(-) diff --git a/client/packages/host/src/Site.tsx b/client/packages/host/src/Site.tsx index 99cf9e34c7..2b3f52d867 100644 --- a/client/packages/host/src/Site.tsx +++ b/client/packages/host/src/Site.tsx @@ -18,6 +18,7 @@ import { SnackbarProvider, BarcodeScannerProvider, DetailLoadingSkeleton, + KeyboardProvider, } from '@openmsupply-client/common'; import { AppDrawer, AppBar, Footer, NotFound } from './components'; import { CommandK } from './CommandK'; @@ -76,146 +77,170 @@ export const Site: FC = () => { - - - - - - - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - } - /> - } - /> - }> - - - } - /> - }> - - - } - /> - }> - - - } - /> - - } - /> - } /> - + + + + + + + + } + > + + + } + /> + } + > + + + } + /> + } + > + + + } + /> + } + > + + + } + /> + } + > + + + } + /> + } + > + + + } + /> + } + > + + + } + /> + } + /> + } + /> + } + > + + + } + /> + } + > + + + } + /> + } + > + + + } + /> + + } + /> + } /> + + + + } /> - - } /> - - - + + + From e4fcc4fab552afb45d34977a0bea2006f1d73983 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:41:42 +1300 Subject: [PATCH 16/22] remove console.logs --- .../common/src/hooks/useKeyboard/Keyboard.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx b/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx index 595dd0b003..6bceb56033 100644 --- a/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx +++ b/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx @@ -32,14 +32,12 @@ export const KeyboardProvider = ({ (async () => { if (!isEnabled) return; - const showListener = await Keyboard.addListener('keyboardDidShow', () => { - console.log('setting open'); - setOpen(true); - }); - const hideListener = await Keyboard.addListener('keyboardDidHide', () => { - console.log('setting closed'); - setOpen(false); - }); + const showListener = await Keyboard.addListener('keyboardDidShow', () => + setOpen(true) + ); + const hideListener = await Keyboard.addListener('keyboardDidHide', () => + setOpen(false) + ); return () => { showListener.remove(); From 1b18f3a7446f591cbb56c728173ce973f8c33491 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 16:52:28 +1300 Subject: [PATCH 17/22] fix keyboard context name --- client/packages/common/src/hooks/useKeyboard/Keyboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx b/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx index 6bceb56033..2befef87c3 100644 --- a/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx +++ b/client/packages/common/src/hooks/useKeyboard/Keyboard.tsx @@ -14,7 +14,7 @@ const defaultKeyboardControl: KeyboardControl = { }; const KeyboardContext = createRegisteredContext( - 'auth-context', + 'keyboard-context', defaultKeyboardControl ); From 166c727a914c4c79c0c8ed3964a26ade5131610d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Wed, 15 Jan 2025 17:06:31 +1300 Subject: [PATCH 18/22] use keyboard context hook in rnr form --- .../src/RnRForms/DetailView/Footer.tsx | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx b/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx index 7899986af2..931bfe735c 100644 --- a/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx +++ b/client/packages/requisitions/src/RnRForms/DetailView/Footer.tsx @@ -1,6 +1,4 @@ -import React, { useEffect, useState } from 'react'; -import { Keyboard } from '@capacitor/keyboard'; -import { Capacitor } from '@capacitor/core'; +import React from 'react'; import { Box, AppFooterPortal, @@ -10,6 +8,7 @@ import { RnRFormNodeStatus, useNotification, useConfirmationModal, + useKeyboardContext, } from '@openmsupply-client/common'; import { useRnRForm } from '../api'; @@ -22,7 +21,7 @@ export const Footer = ({ linesUnconfirmed: boolean; unsavedChanges: boolean; }) => { - const [showFooter, setShowFooter] = useState(true); + const keyboard = useKeyboardContext(); const t = useTranslation(); const { navigateUpOne } = useBreadcrumbs(); const { error, info, success } = useNotification(); @@ -58,25 +57,7 @@ export const Footer = ({ showFinaliseConfirmation(); }; - // Hide while keyboard is open fora bit more screen real estate - useEffect(() => { - (async () => { - if (!Capacitor.isPluginAvailable('Keyboard')) return; - - const showListener = await Keyboard.addListener('keyboardDidShow', () => { - setShowFooter(false); - }); - const hideListener = await Keyboard.addListener('keyboardDidHide', () => { - setShowFooter(true); - }); - - // cleanup - return () => { - showListener.remove(); - hideListener.remove(); - }; - })(); - }, []); + const showFooter = !keyboard.isOpen; return ( Date: Thu, 16 Jan 2025 08:07:48 +1300 Subject: [PATCH 19/22] remove useKeyboardHeightAdjustment --- client/packages/common/src/hooks/index.ts | 1 - .../useKeyboardHeightAdjustment/index.ts | 1 - .../useKeyboardHeightAdjustment.ts | 24 ------------------- 3 files changed, 26 deletions(-) delete mode 100644 client/packages/common/src/hooks/useKeyboardHeightAdjustment/index.ts delete mode 100644 client/packages/common/src/hooks/useKeyboardHeightAdjustment/useKeyboardHeightAdjustment.ts diff --git a/client/packages/common/src/hooks/index.ts b/client/packages/common/src/hooks/index.ts index e3598f0fcb..a4cda9afa1 100644 --- a/client/packages/common/src/hooks/index.ts +++ b/client/packages/common/src/hooks/index.ts @@ -22,7 +22,6 @@ export * from './useQueryParams'; export * from './useUrlQuery'; export * from './useToggle'; export * from './useWindowDimensions'; -export * from './useKeyboardHeightAdjustment'; export * from './useKeyboard'; export * from './useNativeClient'; export * from './useWebClient'; diff --git a/client/packages/common/src/hooks/useKeyboardHeightAdjustment/index.ts b/client/packages/common/src/hooks/useKeyboardHeightAdjustment/index.ts deleted file mode 100644 index ddd9832046..0000000000 --- a/client/packages/common/src/hooks/useKeyboardHeightAdjustment/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useKeyboardHeightAdjustment'; diff --git a/client/packages/common/src/hooks/useKeyboardHeightAdjustment/useKeyboardHeightAdjustment.ts b/client/packages/common/src/hooks/useKeyboardHeightAdjustment/useKeyboardHeightAdjustment.ts deleted file mode 100644 index eccc07920b..0000000000 --- a/client/packages/common/src/hooks/useKeyboardHeightAdjustment/useKeyboardHeightAdjustment.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useEffect, useState } from 'react'; -import { Keyboard } from '@capacitor/keyboard'; -import { Capacitor } from '@capacitor/core'; - -export const useKeyboardHeightAdjustment = (initialHeight: number) => { - const [height, setHeight] = useState(initialHeight); - - useEffect(() => { - if (!Capacitor.isPluginAvailable('Keyboard')) return; - - Keyboard.addListener('keyboardDidShow', info => { - setHeight(initialHeight - info.keyboardHeight); - }); - Keyboard.addListener('keyboardDidHide', () => { - setHeight(initialHeight); - }); - - return () => { - Keyboard.removeAllListeners(); - }; - }, []); - - return height; -}; From 4e7423bee804f7ed65a2960e1662cb0efe2eef4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Thu, 16 Jan 2025 08:27:25 +1300 Subject: [PATCH 20/22] fix name edit modal width --- client/packages/system/src/Name/ListView/ListView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/packages/system/src/Name/ListView/ListView.tsx b/client/packages/system/src/Name/ListView/ListView.tsx index 0fb16a5c51..0c1daa6982 100644 --- a/client/packages/system/src/Name/ListView/ListView.tsx +++ b/client/packages/system/src/Name/ListView/ListView.tsx @@ -75,7 +75,6 @@ const NameListComponent: FC<{ /> } slideAnimation={false} Transition={Transition} From c16c6b58ec710ed29ef7b2f26ec892368a385206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Thu, 16 Jan 2025 10:15:50 +1300 Subject: [PATCH 21/22] manage open state --- .../inputs/Autocomplete/Autocomplete.tsx | 30 ++++++++++++++--- .../AutocompleteWithPagination.tsx | 33 ++++++++++++++++--- 2 files changed, 55 insertions(+), 8 deletions(-) diff --git a/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx b/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx index 8987dc5e3e..dbf5c78d25 100644 --- a/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx +++ b/client/packages/common/src/ui/components/inputs/Autocomplete/Autocomplete.tsx @@ -16,7 +16,7 @@ import { } from './types'; import { BasicTextInput } from '../TextInput'; import { StyledPopper } from './components'; -import { useKeyboardContext } from '@common/hooks'; +import { useKeyboardContext, useToggle } from '@common/hooks'; export interface AutocompleteProps extends Omit< @@ -75,10 +75,14 @@ export function Autocomplete({ popperMinWidth, inputProps, open, + onOpen, + onClose, ...restOfAutocompleteProps }: PropsWithChildren>): JSX.Element { const filter = filterOptions ?? createFilterOptions(filterOptionConfig); const keyboard = useKeyboardContext(); + // manage popper display when android keyboard appears + const keyboardSelectControl = useToggle(); const defaultRenderInput = (props: AutocompleteRenderInputParams) => ( ({ /> ); + const getIsOpen = () => { + // Use passed in or default if not using android keyboard + if (!keyboard.isEnabled) return open; + + // Keep popper closed until keyboard is open + // keyboard moves popper up & out of correct position + if (!keyboard.isOpen) return false; + + // Use externally controlled `open` state if provided + return open ?? keyboardSelectControl.isOn; + }; + return ( ({ onChange={onChange} getOptionLabel={getOptionLabel || defaultGetOptionLabel} PopperComponent={popperMinWidth ? CustomPopper : StyledPopper} - // prevent the popper from opening before the keyboard is opened - // keyboard moves popper up & out of correct position - open={keyboard.isEnabled && !keyboard.isOpen ? false : open} + open={getIsOpen()} + onOpen={e => { + keyboard.isEnabled && keyboardSelectControl.toggleOn(); + onOpen?.(e); + }} + onClose={(...args) => { + keyboard.isEnabled && keyboardSelectControl.toggleOff(); + onClose?.(...args); + }} /> ); } diff --git a/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx b/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx index b0b8c74620..313bdb8549 100644 --- a/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx +++ b/client/packages/common/src/ui/components/inputs/Autocomplete/AutocompleteWithPagination.tsx @@ -16,7 +16,11 @@ import { Box, } from '@mui/material'; import { BasicTextInput } from '../TextInput'; -import { useDebounceCallback, useKeyboardContext } from '@common/hooks'; +import { + useDebounceCallback, + useKeyboardContext, + useToggle, +} from '@common/hooks'; import type { AutocompleteProps } from './Autocomplete'; import { StyledPopper } from './components'; import { ArrayUtils } from '@common/utils'; @@ -66,12 +70,15 @@ export function AutocompleteWithPagination({ onPageChange, mapOptions, open, + onOpen, + onClose, ...restOfAutocompleteProps }: PropsWithChildren>) { const filter = filterOptions ?? createFilterOptions(filterOptionConfig); const [isLoading, setIsLoading] = useState(true); const lastOptions = useRef([]); const keyboard = useKeyboardContext(); + const keyboardSelectControl = useToggle(); const options = useMemo(() => { if (!pages) { @@ -169,6 +176,18 @@ export function AutocompleteWithPagination({ setTimeout(() => setIsLoading(false), LOADER_HIDE_TIMEOUT); }, [options]); + const getIsOpen = () => { + // Use passed in or default if not using android keyboard + if (!keyboard.isEnabled) return open; + + // Keep popper closed until keyboard is open + // keyboard moves popper up & out of correct position + if (!keyboard.isOpen) return false; + + // Use externally controlled `open` state if provided + return open ?? keyboardSelectControl.isOn; + }; + return ( ({ getOptionLabel={getOptionLabel || defaultGetOptionLabel} PopperComponent={popperMinWidth ? CustomPopper : StyledPopper} ListboxProps={listboxProps} - // prevent the popper from opening before the keyboard is opened - // keyboard moves popper up & out of correct position - open={keyboard.isEnabled && !keyboard.isOpen ? false : open} + open={getIsOpen()} + onOpen={e => { + keyboard.isEnabled && keyboardSelectControl.toggleOn(); + onOpen?.(e); + }} + onClose={(...args) => { + keyboard.isEnabled && keyboardSelectControl.toggleOff(); + onClose?.(...args); + }} /> ); } From f2b1cd3096dfcfae2a35cd00df10dd70b0687802 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lach=C3=A9=20Melvin?= <55115239+lache-melvin@users.noreply.github.com> Date: Fri, 17 Jan 2025 11:05:20 +1300 Subject: [PATCH 22/22] fix modal widths --- client/packages/common/src/hooks/useDialog/useDialog.tsx | 5 +++++ .../modal/StocktakeLineEdit/StocktakeLineEditModal.tsx | 1 + .../src/Stocktake/ListView/CreateStocktakeButton.tsx | 1 + .../DetailView/modals/InboundLineEdit/InboundLineEdit.tsx | 1 + .../DetailView/OutboundLineEdit/OutboundLineEdit.tsx | 1 + .../src/Returns/modals/CustomerReturn/CustomerReturn.tsx | 1 + .../src/Returns/modals/SupplierReturn/SupplierReturn.tsx | 1 + .../src/VaccineCourseEditModal/VaccineCourseEditModal.tsx | 5 +---- client/packages/system/src/Name/ListView/ListView.tsx | 5 ++++- .../src/Patient/CreatePatientModal/CreatePatientModal.tsx | 2 +- .../system/src/Report/components/ReportArgumentsModal.tsx | 1 - .../system/src/Stock/Components/Repack/RepackModal.tsx | 1 + 12 files changed, 18 insertions(+), 7 deletions(-) diff --git a/client/packages/common/src/hooks/useDialog/useDialog.tsx b/client/packages/common/src/hooks/useDialog/useDialog.tsx index 902ff5ff96..179af69cdd 100644 --- a/client/packages/common/src/hooks/useDialog/useDialog.tsx +++ b/client/packages/common/src/hooks/useDialog/useDialog.tsx @@ -47,6 +47,7 @@ export interface ModalProps { deleteButton?: JSX.Element; disableOkKeyBinding?: boolean; enableAutocomplete?: boolean; + fullWidthOnMobile?: boolean; } export interface DialogProps { @@ -159,6 +160,7 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { enableAutocomplete, sx = {}, deleteButton, + fullWidthOnMobile, }) => { // The slide animation is triggered by cloning the next button and wrapping the passed // on click with a trigger to slide. @@ -255,6 +257,9 @@ export const useDialog = (dialogProps?: DialogProps): DialogState => { flexDirection: 'column', flex: '1 1 auto', overflow: 'auto', + ...(fullWidthOnMobile + ? {} + : { width: dimensions.width, margin: '0 auto' }), }} {...formProps} > diff --git a/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx b/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx index baa37ee00f..ef4f6071ca 100644 --- a/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx +++ b/client/packages/inventory/src/Stocktake/DetailView/modal/StocktakeLineEdit/StocktakeLineEditModal.tsx @@ -46,6 +46,7 @@ export const StocktakeLineEditModal: FC< } height={600} width={1125} + fullWidthOnMobile > <>{children} diff --git a/client/packages/inventory/src/Stocktake/ListView/CreateStocktakeButton.tsx b/client/packages/inventory/src/Stocktake/ListView/CreateStocktakeButton.tsx index 54c3b9acb3..a2508619bd 100644 --- a/client/packages/inventory/src/Stocktake/ListView/CreateStocktakeButton.tsx +++ b/client/packages/inventory/src/Stocktake/ListView/CreateStocktakeButton.tsx @@ -132,6 +132,7 @@ export const CreateStocktakeButton: React.FC<{ isOpen: modalController.isOn, onClose, disableBackdrop: true, + disableMobileFullScreen: true, }); const masterLists = diff --git a/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx b/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx index fe64b15808..d56f17fd3c 100644 --- a/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx +++ b/client/packages/invoices/src/InboundShipment/DetailView/modals/InboundLineEdit/InboundLineEdit.tsx @@ -182,6 +182,7 @@ export const InboundLineEdit: FC = ({ } height={600} width={1024} + fullWidthOnMobile enableAutocomplete /* Required for previously entered batches to be remembered and suggested in future shipments */ > {isLoading ? ( diff --git a/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx b/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx index 13d95ac611..194fab639b 100644 --- a/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx +++ b/client/packages/invoices/src/OutboundShipment/DetailView/OutboundLineEdit/OutboundLineEdit.tsx @@ -233,6 +233,7 @@ export const OutboundLineEdit: React.FC = ({ } height={700} width={1000} + fullWidthOnMobile > {returnId && ( diff --git a/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx b/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx index 0fc4b3279b..8b1bbeba7d 100644 --- a/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx +++ b/client/packages/invoices/src/Returns/modals/SupplierReturn/SupplierReturn.tsx @@ -149,6 +149,7 @@ export const SupplierReturnEditModal = ({ nextButton={!isNewReturn ? OkAndNextButton : undefined} height={600} width={1024} + fullWidthOnMobile > {returnId && ( diff --git a/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx b/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx index 90970ba8b7..0919e38fae 100644 --- a/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx +++ b/client/packages/programs/src/VaccineCourseEditModal/VaccineCourseEditModal.tsx @@ -222,10 +222,7 @@ export const VaccineCourseEditModal: FC = ({ /> } height={900} - sx={{ - width: 1100, - maxWidth: 'unset', - }} + width={1100} slideAnimation={false} > {modalContent} diff --git a/client/packages/system/src/Name/ListView/ListView.tsx b/client/packages/system/src/Name/ListView/ListView.tsx index 0c1daa6982..f3aa17b781 100644 --- a/client/packages/system/src/Name/ListView/ListView.tsx +++ b/client/packages/system/src/Name/ListView/ListView.tsx @@ -27,7 +27,10 @@ const NameListComponent: FC<{ const { data, isError, isLoading } = useName.document.list(type); const pagination = { page, first, offset }; - const { Modal, showDialog, hideDialog } = useDialog(); + const { Modal, showDialog, hideDialog } = useDialog({ + // should remove this if we ever make this modal editable + disableMobileFullScreen: true, + }); const columns = useColumns( [ diff --git a/client/packages/system/src/Patient/CreatePatientModal/CreatePatientModal.tsx b/client/packages/system/src/Patient/CreatePatientModal/CreatePatientModal.tsx index 23b693c232..bb95b23cee 100644 --- a/client/packages/system/src/Patient/CreatePatientModal/CreatePatientModal.tsx +++ b/client/packages/system/src/Patient/CreatePatientModal/CreatePatientModal.tsx @@ -106,7 +106,7 @@ export const CreatePatientModal: FC = ({ onClose }) => { return ( = ({ }} /> } - contentProps={{ sx: { margin: '0 auto' } }} > <> {t('message.arguments')} diff --git a/client/packages/system/src/Stock/Components/Repack/RepackModal.tsx b/client/packages/system/src/Stock/Components/Repack/RepackModal.tsx index 8ad3f6d0f4..360e91d7ad 100644 --- a/client/packages/system/src/Stock/Components/Repack/RepackModal.tsx +++ b/client/packages/system/src/Stock/Components/Repack/RepackModal.tsx @@ -144,6 +144,7 @@ export const RepackModal: FC = ({ return (