@codeleap/mobile 5.2.6 → 5.3.0

package/dist/components/Calendar/index.js

@@ -1,21 +1,85 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { TypeGuards } from '@codeleap/types';
 import { Calendar as RNCalendar } from 'react-native-calendars';
 import { MobileStyleRegistry } from '../../Registry';
 import { useStylesFor } from '../../hooks';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
 export * from './styles';
 export * from './types';
 export const Calendar = (props) => {
     const { style, value, onValueChange, parseToDate, ...calendarProps } = props;
     const styles = useStylesFor(Calendar.styleRegistryName, style);
     const isDateValue = TypeGuards.isInstance(value, Date);
-    const stringValue = isDateValue ? dayjs(value).format('YYYY-MM-DD') : value ?? '';
+    const isDateRange = Array.isArray(value);
+    const stringValue = useMemo(() => {
+        if (isDateRange) {
+            return value.map(date => isDateValue ? dayjs.utc(date).format('YYYY-MM-DD') : date ?? '');
+        }
+        return isDateValue ? dayjs.utc(value).format('YYYY-MM-DD') : value ?? '';
+    }, [value]);
+    const markedDates = useMemo(() => {
+        if (isDateRange && Array.isArray(stringValue)) {
+            if (stringValue.length === 0)
+                return {};
+            if (stringValue.length === 1) {
+                const [start] = [...stringValue];
+                const dateStr = dayjs(start).format('YYYY-MM-DD');
+                return { [dateStr]: { selected: true } };
+            }
+            const [start, end] = [...stringValue];
+            const startDate = dayjs(start);
+            const endDate = dayjs(end);
+            const markedDates = {};
+            let currentDate = startDate;
+            while (currentDate.isBefore(endDate) || currentDate.isSame(endDate)) {
+                const dateStr = currentDate.format('YYYY-MM-DD');
+                markedDates[dateStr] = {
+                    selected: true,
+                    ...(currentDate.isSame(startDate) && { startingDay: true }),
+                    ...(currentDate.isSame(endDate) && { endingDay: true })
+                };
+                currentDate = currentDate.add(1, 'day');
+            }
+            return markedDates;
+        }
+        return { [stringValue]: { selected: true } };
+    }, [stringValue]);
     const onChange = useCallback((date) => {
-        const newValue = isDateValue || parseToDate ? dayjs(date.dateString).toDate() : date.dateString;
-        onValueChange?.(newValue);
-    }, [onValueChange]);
-    return (<RNCalendar onDayPress={onChange} current={stringValue} monthFormat={'MMMM yyyy'} {...calendarProps} markedDates={{ [stringValue]: { selected: true }, ...calendarProps?.markedDates }} style={styles?.wrapper} headerStyle={styles?.header} theme={{
+        if (isDateRange) {
+            const newValue = Array.isArray(value) ? [...value] : [];
+            let newDates = [];
+            if (newValue.length === 0 || newValue.length === 2) {
+                newDates = [date.dateString];
+            }
+            else if (newValue.length === 1) {
+                const firstDate = newValue[0];
+                const secondDate = date.dateString;
+                if (dayjs(firstDate).isAfter(dayjs(secondDate))) {
+                    newDates = [secondDate, firstDate];
+                }
+                else {
+                    newDates = [firstDate, secondDate];
+                }
+            }
+            const parsedDates = isDateValue || parseToDate ?
+                newDates.map(d => dayjs(d).toDate()) :
+                newDates;
+            onValueChange?.(parsedDates);
+        }
+        else {
+            const newValue = isDateValue || parseToDate ? dayjs(date.dateString).toDate() : date.dateString;
+            onValueChange?.(newValue);
+        }
+    }, [onValueChange, value]);
+    const currentValue = useMemo(() => {
+        return isDateRange ? (Array.isArray(stringValue) ? stringValue[0] : '') : stringValue;
+    }, [stringValue]);
+    return (<RNCalendar onDayPress={onChange} current={currentValue} monthFormat={'MMMM yyyy'} {...calendarProps} markedDates={{
+            ...markedDates,
+            ...calendarProps?.markedDates
+        }} style={styles?.wrapper} headerStyle={styles?.header} theme={{
             ...styles?.calendar,
             ...calendarProps?.theme,
         }}/>);

package/dist/components/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Calendar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAY,MAAM,wBAAwB,CAAA;AAEzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAEvB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,GAAG,aAAa,EACjB,GAAG,KAAK,CAAA;IAET,MAAM,MAAM,GAAG,YAAY,CAAC,QAAQ,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAE9D,MAAM,WAAW,GAAG,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;IACtD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAA;IAEjF,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,IAAc,EAAE,EAAE;QAC9C,MAAM,QAAQ,GAAG,WAAW,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAA;QAC/F,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,OAAO,CACL,CAAC,UAAU,CACT,UAAU,CAAC,CAAC,QAAQ,CAAC,CACrB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,aAAa,CAAC,CAClB,WAAW,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,aAAa,EAAE,WAAW,EAAE,CAAC,CAClF,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CACvB,WAAW,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC;YACL,GAAG,MAAM,EAAE,QAAQ;YACnB,GAAG,aAAa,EAAE,KAAK;SACxB,CAAC,EACF,CACH,CAAA;AACH,CAAC,CAAA;AAED,QAAQ,CAAC,iBAAiB,GAAG,UAAU,CAAA;AACvC,QAAQ,CAAC,QAAQ,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAA;AACrD,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAA;AAEhC,QAAQ,CAAC,gBAAgB,GAAG,CAAsB,MAAS,EAAE,EAAE;IAC7D,OAAO,QAA+E,CAAA;AACxF,CAAC,CAAA;AAED,QAAQ,CAAC,YAAY,GAAG;IACtB,WAAW,EAAE,KAAK;CACO,CAAA;AAE3B,mBAAmB,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Calendar/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Calendar/types.d.ts

@@ -1,9 +1,10 @@
 import { StyledProp } from '@codeleap/styles';
 import { CalendarProps as RNCalendarProps } from 'react-native-calendars';
 import { CalendarComposition } from './styles';
+export type CalendarValue = (string | string[]) | (Date | Date[]);
 export type CalendarProps = Omit<RNCalendarProps, 'style'> & {
-    onValueChange: (date: Date | string) => void;
-    value: Date | string;
+    onValueChange: (date: CalendarValue) => void;
+    value: CalendarValue;
     style?: StyledProp<CalendarComposition>;
     parseToDate?: boolean;
 };

package/dist/components/CalendarInput/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useCompositionStyles } from '@codeleap/styles';
 import { MobileStyleRegistry } from '../../Registry';
 import { useStylesFor } from '../../hooks';
@@ -6,14 +6,16 @@ import { View } from '../View';
 import { Calendar } from '../Calendar';
 import { TextInput } from '../TextInput';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import Animated, { FadeOut, FadeIn } from 'react-native-reanimated';
 import { useInputBase } from '../InputBase';
 import { fields } from '@codeleap/form';
 import { useInputOverlay } from '../InputBase/useInputOverlay';
+dayjs.extend(utc);
 export * from './styles';
 export * from './types';
 export const CalendarInput = (props) => {
-    const { style, value, onValueChange, disabled, gap, calendarPosition, rightIcon, leftIcon, autoClosePeersCalendars, field, format, overlay, ...textInputProps } = {
+    const { style, value, onValueChange, disabled, gap, calendarPosition, rightIcon, leftIcon, autoClosePeersCalendars, field, format, overlay, calendarProps, ...textInputProps } = {
         ...CalendarInput.defaultProps,
         ...props
     };
@@ -22,6 +24,17 @@ export const CalendarInput = (props) => {
     const { inputValue, onInputValueChange, } = useInputBase(field, fields.date, { value, onValueChange });
     const [inputHeight, setInputHeight] = useState(0);
     const [isOpen, toggle] = useInputOverlay(autoClosePeersCalendars);
+    const formattedValue = useMemo(() => {
+        const isRange = Array.isArray(inputValue);
+        if (isRange ? inputValue?.some(v => !v) : !inputValue)
+            return '';
+        if (isRange) {
+            return inputValue
+                .map(date => dayjs.utc(date).format(format))
+                .join(' - ');
+        }
+        return dayjs.utc(inputValue).format(format);
+    }, [inputValue, format]);
     return (<View style={[styles.wrapper, { position: 'relative' }]}>
       <TextInput placeholder='Select Date' disabled={disabled} {...textInputProps} style={compositionStyles.input} leftIcon={!leftIcon ? null : {
             ...leftIcon,
@@ -29,7 +42,7 @@ export const CalendarInput = (props) => {
         }} rightIcon={!rightIcon ? null : {
             ...rightIcon,
             onPress: toggle,
-        }} value={!inputValue ? '' : dayjs(inputValue).format(format)} onValueChange={() => inputValue} onPress={disabled ? null : toggle} innerWrapperProps={{
+        }} value={formattedValue} onValueChange={() => inputValue} onPress={disabled ? null : toggle} innerWrapperProps={{
             rippleDisabled: true,
         }} focused={isOpen} onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)}/>
 
@@ -41,7 +54,7 @@ export const CalendarInput = (props) => {
             } : {
                 marginTop: gap,
             }}>
-          <Calendar style={compositionStyles.calendar} value={inputValue} onValueChange={onInputValueChange} parseToDate/>
+          <Calendar style={compositionStyles.calendar} value={inputValue} onValueChange={onInputValueChange} parseToDate {...calendarProps}/>
         </Animated.View>)}
     </View>);
 };

package/dist/components/CalendarInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CalendarInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CalendarInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/CalendarInput/types.d.ts

@@ -12,6 +12,7 @@ export type CalendarInputProps = Omit<TextInputProps, 'value' | 'onValueChange'
     field?: DateField<any>;
     format?: string;
     overlay?: boolean;
+    calendarProps?: Partial<CalendarProps>;
     /**
       * Defines the position where the calendar will be anchored relative to the input.
     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.2.6",
+  "version": "5.3.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,28 +9,28 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/types": "5.2.6",
-    "@codeleap/utils": "5.2.6",
-    "@codeleap/hooks": "5.2.6",
-    "@codeleap/form": "5.2.6",
-    "@codeleap/query": "5.2.6",
-    "@codeleap/logger": "5.2.6",
-    "@codeleap/config": "5.2.6",
-    "@codeleap/modals": "5.2.6"
+    "@codeleap/types": "5.3.0",
+    "@codeleap/utils": "5.3.0",
+    "@codeleap/hooks": "5.3.0",
+    "@codeleap/form": "5.3.0",
+    "@codeleap/query": "5.3.0",
+    "@codeleap/logger": "5.3.0",
+    "@codeleap/config": "5.3.0",
+    "@codeleap/modals": "5.3.0"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/types": "5.2.6",
-    "@codeleap/utils": "5.2.6",
-    "@codeleap/hooks": "5.2.6",
-    "@codeleap/form": "5.2.6",
-    "@codeleap/query": "5.2.6",
-    "@codeleap/logger": "5.2.6",
-    "@codeleap/styles": "5.2.6",
-    "@codeleap/modals": "5.2.6",
+    "@codeleap/types": "5.3.0",
+    "@codeleap/utils": "5.3.0",
+    "@codeleap/hooks": "5.3.0",
+    "@codeleap/form": "5.3.0",
+    "@codeleap/query": "5.3.0",
+    "@codeleap/logger": "5.3.0",
+    "@codeleap/styles": "5.3.0",
+    "@codeleap/modals": "5.3.0",
     "@d11/react-native-fast-image": "8.9.2",
     "@react-native-firebase/messaging": "21.12.0",
     "@react-navigation/bottom-tabs": "7.3.10",

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.2.6",
+  "version": "5.3.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Calendar/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { TypeGuards } from '@codeleap/types'
 import { Calendar as RNCalendar, DateData } from 'react-native-calendars'
 import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
@@ -6,6 +6,9 @@ import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
 import { CalendarProps } from './types'
 import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+
+dayjs.extend(utc)
 
 export * from './styles'
 export * from './types'
@@ -22,20 +25,98 @@ export const Calendar = (props: CalendarProps) => {
   const styles = useStylesFor(Calendar.styleRegistryName, style)
 
   const isDateValue = TypeGuards.isInstance(value, Date)
-  const stringValue = isDateValue ? dayjs(value).format('YYYY-MM-DD') : value ?? ''
+  const isDateRange = Array.isArray(value)
+
+  const stringValue = useMemo(() => {
+    if (isDateRange) {
+      return value.map(date => 
+        isDateValue ? dayjs.utc(date).format('YYYY-MM-DD') : date ?? ''
+      )
+    }
+
+    return isDateValue ? dayjs.utc(value).format('YYYY-MM-DD') : value ?? ''
+  }, [value])
+
+  const markedDates = useMemo(() => {
+    if (isDateRange && Array.isArray(stringValue)) {
+      if (stringValue.length === 0) return {}
+      if (stringValue.length === 1) {
+        const [start] = [...stringValue]
+
+        const dateStr = dayjs(start).format('YYYY-MM-DD')
+
+        return { [dateStr]: { selected: true } }
+      }
+      
+      const [start, end] = [...stringValue]
+      const startDate = dayjs(start)
+      const endDate = dayjs(end)
+      
+      const markedDates: Record<string, any> = {}
+      
+      let currentDate = startDate
+
+      while (currentDate.isBefore(endDate) || currentDate.isSame(endDate)) {
+        const dateStr = currentDate.format('YYYY-MM-DD')
+
+        markedDates[dateStr] = {
+          selected: true,
+          ...(currentDate.isSame(startDate) && { startingDay: true }),
+          ...(currentDate.isSame(endDate) && { endingDay: true })
+        }
+        
+        currentDate = currentDate.add(1, 'day')
+      }
+      
+      return markedDates
+    }
+    
+    return { [stringValue as string]: { selected: true } }
+  }, [stringValue])
 
   const onChange = useCallback((date: DateData) => {
-    const newValue = isDateValue || parseToDate ? dayjs(date.dateString).toDate() : date.dateString
-    onValueChange?.(newValue)
-  }, [onValueChange])
+    if (isDateRange) {
+      const newValue = Array.isArray(value) ? [...value] : []
+      let newDates: any = []
+      
+      if (newValue.length === 0 || newValue.length === 2) {
+        newDates = [date.dateString]
+      } else if (newValue.length === 1) {
+        const firstDate = newValue[0]
+        const secondDate = date.dateString
+        
+        if (dayjs(firstDate).isAfter(dayjs(secondDate))) {
+          newDates = [secondDate, firstDate]
+        } else {
+          newDates = [firstDate, secondDate]
+        }
+      }
+      
+      const parsedDates = isDateValue || parseToDate ? 
+        newDates.map(d => dayjs(d).toDate()) : 
+        newDates
+      
+      onValueChange?.(parsedDates)
+    } else {
+      const newValue = isDateValue || parseToDate ? dayjs(date.dateString).toDate() : date.dateString
+      onValueChange?.(newValue)
+    }
+  }, [onValueChange, value])
 
+  const currentValue = useMemo(() => {
+    return isDateRange ? (Array.isArray(stringValue) ? stringValue[0] : '') : stringValue
+  }, [stringValue])
+  
   return (
     <RNCalendar
       onDayPress={onChange}
-      current={stringValue}
+      current={currentValue}
       monthFormat={'MMMM yyyy'}
       {...calendarProps}
-      markedDates={{ [stringValue]: { selected: true }, ...calendarProps?.markedDates }}
+      markedDates={{
+        ...markedDates,
+        ...calendarProps?.markedDates
+      }}
       style={styles?.wrapper}
       headerStyle={styles?.header}
       theme={{
@@ -58,4 +139,4 @@ Calendar.defaultProps = {
   parseToDate: false,
 } as Partial<CalendarProps>
 
-MobileStyleRegistry.registerComponent(Calendar)
+MobileStyleRegistry.registerComponent(Calendar)

package/src/components/Calendar/types.ts

@@ -2,11 +2,13 @@ import { StyledProp } from '@codeleap/styles'
 import { CalendarProps as RNCalendarProps } from 'react-native-calendars'
 import { CalendarComposition } from './styles'
 
+export type CalendarValue = (string | string[]) | (Date | Date[])
+
 export type CalendarProps =
   Omit<RNCalendarProps, 'style'> &
   {
-    onValueChange: (date: Date | string) => void
-    value: Date | string
+    onValueChange: (date: CalendarValue) => void
+    value: CalendarValue
     style?: StyledProp<CalendarComposition>
     parseToDate?: boolean
   }

package/src/components/CalendarInput/index.tsx

@@ -1,17 +1,20 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
 import { CalendarInputProps } from './types'
 import { View } from '../View'
-import { Calendar } from '../Calendar'
+import { Calendar, CalendarProps } from '../Calendar'
 import { TextInput } from '../TextInput'
 import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
 import Animated, { FadeOut, FadeIn } from 'react-native-reanimated'
 import { useInputBase } from '../InputBase'
 import { fields } from '@codeleap/form'
 import { useInputOverlay } from '../InputBase/useInputOverlay'
 
+dayjs.extend(utc)
+
 export * from './styles'
 export * from './types'
 
@@ -29,6 +32,7 @@ export const CalendarInput = (props: CalendarInputProps) => {
     field,
     format,
     overlay,
+    calendarProps,
     ...textInputProps
   } = {
     ...CalendarInput.defaultProps,
@@ -42,12 +46,26 @@ export const CalendarInput = (props: CalendarInputProps) => {
   const {
     inputValue,
     onInputValueChange,
-  } = useInputBase<Date | string>(field, fields.date as any, { value, onValueChange })
+  } = useInputBase<CalendarProps['value']>(field, fields.date as any, { value, onValueChange })
 
   const [inputHeight, setInputHeight] = useState(0)
 
   const [isOpen, toggle] = useInputOverlay(autoClosePeersCalendars)
 
+  const formattedValue = useMemo(() => {
+    const isRange = Array.isArray(inputValue)
+
+    if (isRange ? inputValue?.some(v => !v) : !inputValue) return ''
+    
+    if (isRange) {
+      return inputValue
+        .map(date => dayjs.utc(date).format(format))
+        .join(' - ')
+    }
+    
+    return dayjs.utc(inputValue).format(format)
+  }, [inputValue, format])
+
   return (
     <View style={[styles.wrapper, { position: 'relative' }]}>
       <TextInput
@@ -63,7 +81,7 @@ export const CalendarInput = (props: CalendarInputProps) => {
           ...rightIcon,
           onPress: toggle,
         }}
-        value={!inputValue ? '' : dayjs(inputValue).format(format)}
+        value={formattedValue}
         onValueChange={() => inputValue}
         onPress={disabled ? null : toggle}
         innerWrapperProps={{
@@ -91,6 +109,7 @@ export const CalendarInput = (props: CalendarInputProps) => {
             value={inputValue}
             onValueChange={onInputValueChange}
             parseToDate
+            {...calendarProps}
           />
         </Animated.View>
       )}

package/src/components/CalendarInput/types.ts

@@ -15,6 +15,7 @@ export type CalendarInputProps =
     field?: DateField<any>
     format?: string
     overlay?: boolean
+    calendarProps?: Partial<CalendarProps>
 
     /**
       * Defines the position where the calendar will be anchored relative to the input.