dhre-ui-kit 0.0.92 → 0.0.94

package/package.json

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

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

@@ -12,4 +12,5 @@ export interface AccordionProps {
   onToggle: () => void;
   optionalElement?: () => React.ReactNode; // Update this line
   headerComponent?: () => React.ReactNode;
+  disabled?: boolean;
 }

package/src/components/accordion/Accordion.tsx

@@ -17,6 +17,7 @@ const Accordion = ({
   onToggle,
   optionalElement, // Destructure the new prop,
   headerComponent,
+  disabled = false,
 }: AccordionProps) => {
   const contentRef = useRef<View>(null);
   const [animation] = useState(new Animated.Value(0));
@@ -45,7 +46,9 @@ const Accordion = ({
 
   return (
     <View style={[styles.container, containerStyle]} testID={testId}>
-      <Pressable style={[styles.header, headerStyle]} onPress={onToggle}>
+      <Pressable
+        style={[styles.header, headerStyle, disabled && {opacity: 0.5}]}
+        onPress={!disabled ? onToggle : undefined}>
         {headerComponent ? (
           headerComponent()
         ) : (

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

@@ -10,3 +10,10 @@ export interface DayType {
   year: number;
   timestamp: number;
 }
+
+export interface MarkedDate {
+  startingDay?: boolean;
+  endingDay?: boolean;
+  color: string;
+  textColor: string;
+}

package/src/components/dateRangePicker/DateRangePicker.tsx

@@ -2,7 +2,11 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import {Calendar} from 'react-native-calendars';
 import Button from '../button';
-import {DateRangePickerProps, DayType} from './DateRangePicker.interface';
+import {
+  DateRangePickerProps,
+  DayType,
+  MarkedDate,
+} from './DateRangePicker.interface';
 import styles from './DateRangePicker.styles';
 
 const DateRangePicker = (props: DateRangePickerProps) => {
@@ -32,7 +36,8 @@ const DateRangePicker = (props: DateRangePickerProps) => {
 
   const getMarkedDates = () => {
     const {startDate, endDate} = selectedRange;
-    const markedDates = {};
+
+    const markedDates: {[key: string]: MarkedDate} = {};
 
     if (startDate) {
       markedDates[startDate] = {
@@ -65,6 +70,8 @@ const DateRangePicker = (props: DateRangePickerProps) => {
     return markedDates;
   };
 
+  const isButtonDisabled = !selectedRange.startDate || !selectedRange.endDate;
+
   return (
     <View>
       <Calendar
@@ -92,6 +99,7 @@ const DateRangePicker = (props: DateRangePickerProps) => {
         }}
         containerStyle={styles.applyButton}
         textStyle={styles.applyButtonText}
+        disabled={isButtonDisabled}
       />
     </View>
   );

package/src/components/progressBar/ProgressBar.tsx

@@ -20,7 +20,7 @@ interface CustomProgressBarProps {
   increment?: number; // Optional increment value for progress update
   interval?: number; // Optional interval time (ms) for progress update
   percentageText?: string;
-  valueTextStyle?: TextStyle
+  valueTextStyle?: TextStyle;
 }
 
 const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
@@ -39,7 +39,7 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
   increment = 1, // Default increment to 1
   interval = 100, // Default interval to 100ms
   percentageText,
-  valueTextStyle
+  valueTextStyle,
 }) => {
   useEffect(() => {
     const progressInterval = setInterval(() => {

package/src/components/textInput/Textinput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, ViewStyle} from 'react-native';
+import {Pressable, StyleSheet, View, ViewStyle} from 'react-native';
 import {TextInput} from 'react-native-paper';
 import {DHRE_COLORS_TEXT, DHRE_DEFAULT} from '../../theme/colors';
 import {verticalScale, moderateScale} from '../../utils/stylehelper';
@@ -22,6 +22,8 @@ interface CommonTextInputProps {
   editable?: boolean;
   textColor?: string;
   labelColor?: string;
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
+  handlePress?: () => void;
 }
 
 const CommonTextInput: React.FC<CommonTextInputProps> = ({
@@ -39,46 +41,62 @@ const CommonTextInput: React.FC<CommonTextInputProps> = ({
   editable = true,
   textColor = theme.CONTENT_PRIMARY['light'],
   labelColor,
+  handlePress,
+  pointerEvents,
 }) => {
   return (
-    <>
-      <TextInput
-        mode="outlined"
-        outlineStyle={{
-          ...styles.outlineStyle,
-          borderColor: value?.length ? activeBorderColor : inactiveBorderColor,
-        }}
-        label={label}
-        value={value}
-        onChangeText={onChangeText}
-        secureTextEntry={isSecureTextEntry}
-        keyboardType={keyboardType}
-        theme={{
-          colors: {
-            primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK,
-          },
-        }}
-        style={[errorMessage ? styles.errorInput : styles.input, inputStyle]}
-        maxLength={maxLength}
-        textColor={textColor}
-        placeholder={placeholderText}
-        editable={editable}
-      />
-      {errorMessage ? (
-        <CustomTypography
-          variant={'L2_REGULAR'}
-          text={errorMessage ?? ''}
-          style={{
-            ...styles.errorStyle,
-            color: DHRE_DEFAULT.DH_SEMENTIC_ERROR,
+    <View style={styles.container}>
+      <Pressable onPress={handlePress} style={styles.touchable}>
+        <TextInput
+          mode="outlined"
+          outlineStyle={{
+            ...styles.outlineStyle,
+            borderColor: value?.length
+              ? activeBorderColor
+              : inactiveBorderColor,
           }}
+          label={label}
+          value={value}
+          onChangeText={onChangeText}
+          secureTextEntry={isSecureTextEntry}
+          keyboardType={keyboardType}
+          theme={{
+            colors: {
+              primary: labelColor ? labelColor : DHRE_COLORS_TEXT.DH_BLACK,
+            },
+          }}
+          style={[errorMessage ? styles.errorInput : styles.input, inputStyle]}
+          maxLength={maxLength}
+          textColor={textColor}
+          placeholder={placeholderText}
+          editable={editable}
+          pointerEvents={pointerEvents}
         />
-      ) : null}
-    </>
+        {errorMessage ? (
+          <CustomTypography
+            variant={'L2_REGULAR'}
+            text={errorMessage ?? ''}
+            style={{
+              ...styles.errorStyle,
+              color: DHRE_DEFAULT.DH_SEMENTIC_ERROR,
+            }}
+          />
+        ) : null}
+      </Pressable>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  touchable: {
+    width: '100%', // Adjust width as needed
+  },
+
   input: {
     marginVertical: verticalScale(8),
     backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,

package/src/components/topic/Topic.tsx

@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
   },
   rightIconContainer: {
     position: 'absolute',
-    left: 10,
+    left: 16,
     top: 10,
   },
 });