dhre-ui-kit 0.0.49 → 0.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/accordion/Accordion.interface.ts

@@ -6,6 +6,9 @@ export interface AccordionProps {
   testId?: string;
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
-  children: React.ReactNode;
   headerStyle?: ViewStyle;
+  children?: React.ReactNode;
+  isOpen: boolean;
+  onToggle: () => void;
+  optionalElement?: () => React.ReactNode; // Update this line
 }

package/src/components/accordion/Accordion.tsx

@@ -15,7 +15,8 @@ const Accordion = ({
   children,
   isOpen,
   onToggle,
-}: AccordionProps & {isOpen: boolean; onToggle: () => void}) => {
+  optionalElement, // Destructure the new prop
+}: AccordionProps) => {
   const contentRef = useRef<View>(null);
   const [animation] = useState(new Animated.Value(0));
   const [contentHeight, setContentHeight] = useState(0);
@@ -55,6 +56,9 @@ const Accordion = ({
           style: styles.iconStyle,
         })}
       </Pressable>
+
+      {optionalElement ? optionalElement() : null}
+
       <Animated.View style={[styles.content, {height: cardHeight}]}>
         <View
           ref={contentRef}

package/src/components/customSearchBar/CustomSearchBar.interface.ts

@@ -16,4 +16,6 @@ export interface CustomSearchBarProps extends TextInputProps {
   disablePlaceHolderStyle?: string;
   enablePlaceHolderStyle?: string;
   borderColor?: string;
+  setValue: (val: string) => void;
+  value: string;
 }

package/src/components/customSearchBar/CustomSearchBar.test.tsx

@@ -11,7 +11,15 @@ const mockProps = {
 
 describe('Custom search bar component', () => {
   it('Component renders correctly', () => {
-    const {getByTestId} = render(<CustomSearchBar {...mockProps} />);
+    const {getByTestId} = render(
+      <CustomSearchBar
+        setValue={(val: string) => {
+          return val;
+        }}
+        value={''}
+        {...mockProps}
+      />,
+    );
     expect(getByTestId(mockProps.testID)).toBeTruthy();
     const textInput = getByTestId('CUSTOM-SEARCH-BAR-INPUT');
     fireEvent.changeText(textInput, 'test@example.com');

package/src/components/customSearchBar/CustomSearchBar.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {Pressable, TextInput, View} from 'react-native';
 import {CrossIcon, SearchIcon} from '../../assets';
 import {moderateScale, verticalScale} from '../../utils/stylehelper';
@@ -6,6 +6,7 @@ import {CustomSearchBarProps} from './CustomSearchBar.interface';
 import styles from './CustomSearchBar.styles';
 
 const CustomSearchBar = ({
+  value,
   height = 40,
   disabled = false,
   testID = 'CUSTOM-SEARCH-BAR',
@@ -16,6 +17,7 @@ const CustomSearchBar = ({
   onSearchIconPress,
   onCrossIconPress,
   handleOnChangeText,
+  setValue,
   rightIcon = <CrossIcon />,
   disableBorderColor = '#4F4F4F',
   borderColor = '#FFFFFF',
@@ -23,8 +25,6 @@ const CustomSearchBar = ({
   enablePlaceHolderStyle = '#A7A7A7',
   ...props
 }: CustomSearchBarProps) => {
-  const [value, setValue] = useState('');
-
   return (
     <View
       testID={testID}

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

@@ -1,3 +1,12 @@
-export interface DateRangePickerProps {
-  onPress: (startDate: string, endDate: string) => void;
+import {CalendarProps} from 'react-native-calendars';
+export interface DateRangePickerProps extends CalendarProps {
+  onButtonPress: (startDate: string, endDate: string) => void;
+}
+
+export interface DayType {
+  dateString: string;
+  day: number;
+  month: number;
+  year: number;
+  timestamp: number;
 }

package/src/components/dateRangePicker/DateRangePicker.tsx

@@ -2,10 +2,11 @@ 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 {DateRangePickerProps, DayType} from './DateRangePicker.interface';
 import styles from './DateRangePicker.styles';
 
-const DateRangePicker = ({onPress}: DateRangePickerProps) => {
+const DateRangePicker = (props: DateRangePickerProps) => {
+  const {onButtonPress} = props;
   const [selectedRange, setSelectedRange] = useState<{
     startDate: string;
     endDate: string;
@@ -14,7 +15,7 @@ const DateRangePicker = ({onPress}: DateRangePickerProps) => {
     endDate: '',
   });
 
-  const onDayPress = day => {
+  const onDayPress = (day: DayType) => {
     const {dateString} = day;
     const {startDate, endDate} = selectedRange;
 
@@ -82,11 +83,12 @@ const DateRangePicker = ({onPress}: DateRangePickerProps) => {
           color: '#A7A7A7',
         }}
         onDayPress={onDayPress}
+        {...props}
       />
       <Button
         title="Apply"
         onPress={() => {
-          onPress(selectedRange?.startDate, selectedRange?.endDate);
+          onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
         }}
         containerStyle={styles.applyButton}
         textStyle={styles.applyButtonText}