Merge pull request #775 from lethemanh/765-disable-auto-zoom-in-on-ios

#765 disable auto zoom in on ios

src/components/Calendar/MobileTempSearchInput.tsx

@@ -36,7 +36,7 @@ export const MobileTempSearchInput: React.FC<MobileTempSearchInputProps> = ({
         <TextField
           {...params}
           autoFocus
-          size="small"
+          size="medium"
           sx={{
             '& .MuiOutlinedInput-notchedOutline': {
               border: 'none'

src/components/Event/AddDescButton.tsx

@@ -5,6 +5,7 @@ import React from 'react'
 import { useI18n } from 'twake-i18n'
 import { FieldWithLabel } from './components/FieldWithLabel'
 import { SectionPreviewRow } from './components/SectionPreviewRow'
+import { useScreenSizeDetection } from '@/useScreenSizeDetection'
 
 export function AddDescButton({
   showDescription,
@@ -43,7 +44,7 @@ export function AddDescButton({
         placeholder={t('event.form.descriptionPlaceholder')}
         value={description}
         onChange={e => setDescription(e.target.value)}
-        size="small"
+        size={isMobile ? 'medium' : 'small'}
         margin="dense"
         multiline
         minRows={2}

src/components/Event/EventFormFields.tsx

@@ -177,8 +177,8 @@ export default function EventFormFields({
   setSelectedResources
 }: EventFormFieldsProps): JSX.Element {
   const { t } = useI18n()
-
   const { isTooSmall: isMobile } = useScreenSizeDetection()
+
   const [timezoneDrawerOpen, setTimezoneDrawerOpen] = React.useState(false)
 
   // Internal state for 4 separate fields
@@ -514,7 +514,7 @@ export default function EventFormFields({
           onChange={e => {
             setTitle(e.target.value)
           }}
-          size="small"
+          size={isMobile ? 'medium' : 'small'}
           margin="dense"
           inputRef={titleInputRef}
         />
@@ -694,7 +694,9 @@ export default function EventFormFields({
           timezone={timezone}
           end={end}
           placeholder={t('event.form.addGuestsPlaceholder')}
-          inputSlot={params => <TextField {...params} size="small" />}
+          inputSlot={params => (
+            <TextField {...params} size={isMobile ? 'medium' : 'small'} />
+          )}
         />
       </FieldWithLabel>
 
@@ -815,7 +817,6 @@ export default function EventFormFields({
         showMore={showMore}
         description={description}
         setDescription={setDescription}
-        isMobile={isMobile}
       />
 
       <FieldWithLabel
@@ -841,7 +842,7 @@ export default function EventFormFields({
             placeholder={t('event.form.locationPlaceholder')}
             value={location}
             onChange={e => setLocation(e.target.value)}
-            size="small"
+            size={isMobile ? 'medium' : 'small'}
             margin="dense"
           />
         )}
@@ -922,7 +923,9 @@ export default function EventFormFields({
               <ResourceSearch
                 objectTypes={['resource']}
                 selectedResources={selectedResources}
-                inputSlot={params => <TextField {...params} size="small" />}
+                inputSlot={params => (
+                  <TextField {...params} size={isMobile ? 'medium' : 'small'} />
+                )}
                 onChange={(_event: React.SyntheticEvent, value: Resource[]) => {
                   handleResourceChange(value)
                 }}

src/components/Event/EventRepeat.tsx

@@ -24,6 +24,7 @@ import { useI18n } from 'twake-i18n'
 import { ReadOnlyDateField } from './components/ReadOnlyPickerField'
 import { LONG_DATE_FORMAT } from './utils/dateTimeFormatters'
 import { FC_DAYS, WeekDaySelector } from './WeekDaySelector'
+import { useScreenSizeDetection } from '@/useScreenSizeDetection'
 
 const numericSlotProps = {
   htmlInput: {
@@ -36,18 +37,9 @@ export const RepeatEvent: React.FC<{
   eventStart: Date
   setRepetition: (repetition: RepetitionObject) => void
   isOwn?: boolean
-}> = ({
+}> = ({ repetition, eventStart, setRepetition, isOwn = true }) => {
-  repetition,
-  eventStart,
-  setRepetition,
-  isOwn = true
-}: {
-  repetition: RepetitionObject
-  eventStart: Date
-  setRepetition: (repetition: RepetitionObject) => void
-  isOwn?: boolean
-}) => {
   const { t } = useI18n()
+  const { isTooSmall: isMobile } = useScreenSizeDetection()
   const days = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU']
   const day = new Date(eventStart)
   const dateCalendarLayoutSx = {
@@ -85,8 +77,8 @@ export const RepeatEvent: React.FC<{
                 interval: Number(e.target.value)
               })
             }
-            size="small"
+            size={isMobile ? 'medium' : 'small'}
-            sx={{ width: 80 }}
+            style={{ width: 80 }}
             slotProps={{
               htmlInput: {
                 ...numericSlotProps.htmlInput,
@@ -223,8 +215,12 @@ export const RepeatEvent: React.FC<{
                     <Box
                       sx={{
                         width: 220,
-                        '& .MuiInputBase-root': { fontSize: 14 },
+                        '& .MuiInputBase-root': {
-                        '& .MuiInputBase-input': { fontSize: 14 }
+                          fontSize: isMobile ? 16 : 14
+                        },
+                        '& .MuiInputBase-input': {
+                          fontSize: isMobile ? 16 : 14
+                        }
                       }}
                     >
                       <DatePicker
@@ -278,7 +274,7 @@ export const RepeatEvent: React.FC<{
                   </Typography>
                   <TextField
                     type="number"
-                    size="small"
+                    size={isMobile ? 'medium' : 'small'}
                     value={repetition.occurrences || 1}
                     onChange={e => {
                       const value = Number(e.target.value)

src/components/Event/components/DateTimeFields/TouchDatePickerField.tsx

@@ -104,7 +104,7 @@ const DatePickerDialogContent: React.FC<DatePickerDialogProps> = ({
           <DateField
             fullWidth
             inputMode="numeric"
-            size="small"
+            size="medium"
             value={internalValue}
             onChange={handleInternalChange}
             autoFocus
@@ -171,8 +171,8 @@ export const TouchDatePickerField: React.FC<DatePickerFieldProps> = ({
         slots={{ field: ReadOnlyDateField }}
         slotProps={{
           openPickerButton: { sx: { display: 'none' } },
-          ...getDateSlotProps(testId, hasError, label),
+          ...getDateSlotProps(testId, hasError, label, true),
-          field: getDateFieldSlotProps(testId, hasError, label),
+          field: getDateFieldSlotProps(testId, hasError, label, true),
           layout: { sx: dateCalendarLayoutSx }
         }}
       />

src/components/Event/components/DateTimeFields/TouchTimePickerField.tsx

@@ -113,7 +113,7 @@ export const TouchTimePickerField: React.FC<TimePickerFieldProps> = ({
         slotProps={{
           openPickerButton: { sx: { display: 'none' } },
           field: {
-            ...getTimeFieldSlotProps(testId, hasError, label),
+            ...getTimeFieldSlotProps(testId, hasError, label, true),
             onFocus: e => e.target.blur()
           }
         }}

src/components/Event/components/DateTimeFields/dateTimePickerSlotProps.ts

@@ -28,7 +28,8 @@ export const timePickerPopperSx = {
 const baseFieldProps = (
   testId: string,
   hasError = false,
-  label?: string
+  label?: string,
+  isMobile?: boolean
 ): Pick<
   TextFieldProps,
   | 'size'
@@ -39,7 +40,7 @@ const baseFieldProps = (
   | 'sx'
   | 'inputProps'
 > => ({
-  size: 'small' as const,
+  size: isMobile ? ('medium' as const) : ('small' as const),
   margin: 'dense' as const,
   fullWidth: true,
   InputLabelProps: { shrink: true },
@@ -54,17 +55,19 @@ const baseFieldProps = (
 export const getDateSlotProps = (
   testId: string,
   hasError = false,
-  label?: string
+  label?: string,
+  isMobile?: boolean
 ): Partial<DatePickerSlotProps<true>> => ({
   textField: {
-    ...baseFieldProps(testId, hasError, label)
+    ...baseFieldProps(testId, hasError, label, isMobile)
   }
 })
 
 export const getDateFieldSlotProps = (
   testId: string,
   hasError = false,
-  label?: string
+  label?: string,
+  isMobile?: boolean
 ): Partial<DatePickerFieldProps> &
   Pick<
     TextFieldProps,
@@ -75,12 +78,13 @@ export const getDateFieldSlotProps = (
     | 'error'
     | 'sx'
     | 'inputProps'
-  > => baseFieldProps(testId, hasError, label)
+  > => baseFieldProps(testId, hasError, label, isMobile)
 
 export const getTimeFieldSlotProps = (
   testId: string,
   hasError = false,
-  label?: string
+  label?: string,
+  isMobile?: boolean
 ): Partial<TimePickerFieldProps> &
   Pick<
     TextFieldProps,
@@ -91,4 +95,4 @@ export const getTimeFieldSlotProps = (
     | 'error'
     | 'sx'
     | 'inputProps'
-  > => baseFieldProps(testId, hasError, label)
+  > => baseFieldProps(testId, hasError, label, isMobile)

src/components/Timezone/SmallTimeZoneSelector.tsx

@@ -128,6 +128,7 @@ export const SmallTimezoneSelector: React.FC<
         <TextField
           inputRef={inputRef}
           fullWidth
+          size="medium"
           variant="standard"
           placeholder={t('calendar.searchTimezone')}
           value={searchQuery}
@@ -152,8 +153,7 @@ export const SmallTimezoneSelector: React.FC<
           }}
           sx={{
             '& .MuiInputBase-root': {
-              padding: '8px 0',
+              padding: '8px 0'
-              fontSize: '16px'
             }
           }}
         />

src/declarations.ts

@@ -41,3 +41,10 @@ declare module '@linagora/twake-mui' {
 
   export const radius: Record<string, string | number>
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+declare const process: {
+  env: {
+    [key: string]: string | undefined
+  }
+}