dhre-ui-kit 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -28,6 +28,7 @@
     "react": "18.2.0",
     "react-native": "0.74.3",
     "react-native-blob-util": "^0.19.11",
+    "react-native-calendars": "^1.1306.0",
     "react-native-gesture-handler": "2.17.0",
     "react-native-otp-verify": "^1.1.8",
     "react-native-pdf": "^6.7.5",

package/src/components/OutOfOffice/OurOffices.tsx

@@ -3,7 +3,7 @@ import {TouchableOpacity, View, StyleSheet, ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import CustomText from '../customText';
 import {withThemeProvider} from '../../theme/withThemeProvider';
-import {useTheme} from 'src/theme/ThemeContext';
+import {useTheme} from '../../theme/ThemeContext';
 
 interface OurOfficesButtonProps {
   leftIcon?: ReactElement<SvgProps>;

package/src/components/dateRangePicker/DateRangePicker.interface.ts

@@ -0,0 +1,3 @@
+export interface DateRangePickerProps {
+  onPress: (startDate: string, endDate: string) => void;
+}

package/src/components/dateRangePicker/DateRangePicker.styles.ts

@@ -0,0 +1,19 @@
+import {StyleSheet} from 'react-native';
+import {FONT_STYLES} from '../../theme/fonts';
+import {verticalScale, moderateScale} from '../../utils/stylehelper';
+
+const styles = StyleSheet.create({
+  container: {marginTop: verticalScale(8)},
+  applyButton: {
+    height: verticalScale(48),
+    alignItems: 'center',
+    borderRadius: moderateScale(25),
+    backgroundColor: '#fff',
+  },
+  applyButtonText: {
+    color: '#000',
+    ...FONT_STYLES.L1_REGULAR,
+  },
+});
+
+export default styles;

package/src/components/dateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,97 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {Calendar} from 'react-native-calendars';
+import Button from '../button';
+import {DateRangePickerProps} from './DateRangePicker.interface';
+import styles from './DateRangePicker.styles';
+
+const DateRangePicker = ({onPress}: DateRangePickerProps) => {
+  const [selectedRange, setSelectedRange] = useState<{
+    startDate: string;
+    endDate: string;
+  }>({
+    startDate: '',
+    endDate: '',
+  });
+
+  const onDayPress = day => {
+    const {dateString} = day;
+    const {startDate, endDate} = selectedRange;
+
+    if (!startDate || (startDate && endDate)) {
+      setSelectedRange({startDate: dateString, endDate: ''});
+    } else if (startDate && !endDate) {
+      if (new Date(dateString) >= new Date(startDate)) {
+        setSelectedRange({startDate, endDate: dateString});
+      } else {
+        setSelectedRange({startDate: dateString, endDate: ''});
+      }
+    }
+  };
+
+  const getMarkedDates = () => {
+    const {startDate, endDate} = selectedRange;
+    const markedDates = {};
+
+    if (startDate) {
+      markedDates[startDate] = {
+        startingDay: true,
+        color: '#2DE3A6',
+        textColor: '#000000',
+      };
+    }
+    if (endDate) {
+      markedDates[endDate] = {
+        endingDay: true,
+        color: '#2DE3A6',
+        textColor: '#000000',
+      };
+    }
+
+    if (startDate && endDate) {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+
+      while (start < end) {
+        start.setDate(start.getDate() + 1);
+        markedDates[start.toISOString().split('T')[0]] = {
+          color: '#2DE3A6',
+          textColor: '#000000',
+        };
+      }
+    }
+
+    return markedDates;
+  };
+
+  return (
+    <View style={styles.container}>
+      <Calendar
+        markedDates={getMarkedDates()}
+        mode="date"
+        theme={{
+          calendarBackground: 'transparent',
+          arrowColor: '#fff',
+          monthTextColor: '#FFFFFF',
+          dayTextColor: '#A7A7A7',
+          todayTextColor: '#2DE3A6',
+        }}
+        style={{
+          backgroundColor: 'transparent',
+          color: '#A7A7A7',
+        }}
+        onDayPress={onDayPress}
+      />
+      <Button
+        title="Apply"
+        onPress={() => {
+          onPress(selectedRange?.startDate, selectedRange?.endDate);
+        }}
+        containerStyle={styles.applyButton}
+        textStyle={styles.applyButtonText}
+      />
+    </View>
+  );
+};
+
+export default DateRangePicker;

package/src/components/dateRangePicker/index.ts

@@ -0,0 +1 @@
+export {default} from './DateRangePicker';

package/src/index.ts

@@ -28,6 +28,7 @@ export {default as CustomLoader} from './components/customLoader';
 export {default as Line} from './components/horizontalLine';
 export {default as Topic} from './components/topic';
 export {default as ContactModel} from './components/ContactModel';
+export {default as DateRangePicker} from './components/dateRangePicker';
 export {default as OurOfficesButton} from './components/OutOfOffice';
 
 export * from './utils/stylehelper';