dhre-ui-kit 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "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/App.tsx

@@ -1,42 +1,14 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {Badge, Line} from './index';
+import {Badge, DateRangePicker, Line} from './index';
 import {ArrowLeft, CalenderDots} from './assets';
 import {View} from 'react-native';
 import CustomButton from './components/button/Button';
 
 const App = () => {
   return (
-    <ThemeProvider>
-      <View style={{marginTop: 50}}>
-        <Badge
-          handleIconPress={function (): void {}}
-          text="gggsdfghjhgf"
-          style={{margin: 20}}
-          iconName={<CalenderDots width={20} height={20} />}
-          textStyle={{color: 'black'}}
-          iconStyle={{}}
-        />
-        <Line />
-        <CustomButton
-          title="Yes"
-          onPress={() => console.log('Yes Button Pressed')}
-          leftIcon={<ArrowLeft />}
-          // titleColor={color.CONTENT_SECONDRY[currentTheme]}
-          titleVariant="L2_REGULAR"
-          containerStyle={[
-            {
-              borderWidth: 1,
-              borderRadius: 20,
+      <DateRangePicker onPress={() => {}} />
 
-              height: 40,
-            },
-          ]}
-          // iconStyle={styles.iconStyle}
-          imagePosition="left"
-        />
-      </View>
-    </ThemeProvider>
   );
 };
 

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({
+  applyButton: {
+    marginTop: verticalScale(40),
+    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,98 @@
+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>
+      <Calendar
+        markedDates={getMarkedDates()}
+        mode="date"
+        markingType={'period'}
+        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/components/toast/Toast.styles.ts

@@ -9,8 +9,9 @@ import {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
+    alignSelf: 'center',
     height: verticalScale(72),
-    width: width - horizontalScale(48),
+    width: width - horizontalScale(32),
     top: 56,
     borderRadius: moderateScale(8),
     overflow: 'hidden',

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';

package/src/theme/ThemeContext.tsx

@@ -14,8 +14,8 @@ interface ThemeProviderProps {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mode = useSelector((state: any) => state.theme.currentTheme);
-  // const mode = 'light'
+  // const mode = useSelector((state: any) => state.theme.currentTheme);
+  const mode = 'light'
   // Filter the theme based on the mode (light or dark)
   const filteredTheme = Object.keys(theme).reduce((acc, key) => {
     acc[key] = theme[key][mode];