@jescon-technologies/react-native-ui-kit 0.0.1 → 0.0.2

package/src/StaticComponents/SDatePickerNew.js

@@ -0,0 +1,258 @@
+import React, { useState, useRef } from 'react';
+import { View, TouchableOpacity, Platform, Dimensions, Text } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import CText from '../CustomComponents/CText';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { normalize } from '../CommonStyle/componentStyle';
+import moment from 'moment';
+import { Global } from '../Common/Global';
+import { isNU, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import HOCIcons from '../HOC/HOCIcons';
+
+export default function SDatePickerNew(props) {
+  const [data, setData] = useState(props.data != undefined ? props.data : {});
+  const [date, setDate] = useState(props.passingDate != undefined ? new Date(props.passingDate) : new Date());
+  const [minimumdate, setMinimumDate] = useState(isNU(props.minimumdate) ? new Date(props.minimumdate) : new Date());
+  const [mode, setMode] = useState('date');
+  const [show, setShow] = useState(false);
+
+  const webInputRef = useRef(null);
+
+  // Handle date change for native platforms
+  const onNativeChange = (event, selectedDate) => {
+    setShow(Platform.OS === 'ios');
+
+    if (event && event.type == 'set') {
+      const currentDate = selectedDate || date;
+      setDate(currentDate);
+      setData({ ...data, ['value']: currentDate });
+
+      if (props.onChangeData) {
+        props.onChangeData(currentDate);
+      }
+
+      console.log('onChangeData', currentDate);
+    }
+  };
+
+  // Handle date change for web platform
+  const onWebChange = (e) => {
+    const value = e.target.value;
+    if (!value) {return;}
+
+    const selectedDate = new Date(value + 'T00:00:00');
+    if (isNaN(selectedDate.getTime())) {return;}
+
+    setDate(selectedDate);
+    setData({ ...data, ['value']: selectedDate });
+
+    if (props.onChangeData) {
+      props.onChangeData(selectedDate);
+    }
+
+    console.log('onChangeData web', selectedDate);
+  };
+
+  // Get minimum date for web input
+  const getWebMinDate = () => {
+    if (!isNU(props.minimumdate) && minimumdate instanceof Date) {
+      return minimumdate.toISOString().split('T')[0];
+    }
+    return undefined;
+  };
+
+  // Get web input value in YYYY-MM-DD format
+  const getWebInputValue = () => {
+    if (!(date instanceof Date) || isNaN(date.getTime())) {return '';}
+    return date.toISOString().split('T')[0];
+  };
+
+  const showMode = (currentMode) => {
+    setShow(true);
+    setMode(currentMode);
+  };
+
+  const showDatepicker = () => {
+    showMode('date');
+  };
+
+  // Focus web input when icon is clicked
+  const handleWebIconClick = () => {
+    if (webInputRef.current && !props.disabled) {
+      webInputRef.current.focus();
+      webInputRef.current.showPicker?.(); // This works in modern browsers
+    }
+  };
+
+  // Web-specific render
+  if (Platform.OS === 'web') {
+    return (
+      <View style={{
+        width: data.itemwidth != undefined ? data.itemwidth : Dimensions.get('screen').width * 0.5,
+        borderWidth: 0,
+      }}>
+        {props.disableplaceholder && isNU(props.table) ?
+          <Text
+            style={{
+              borderWidth: 0,
+              fontSize: normalize(9),
+              color: 'black',
+            }}
+          >
+            {data.displaytext != undefined ? data.displaytext : 'Date'}
+          </Text>
+        : null}
+
+        <View style={props.pickerstyle ?
+          props.pickerstyle :
+          {
+            flexDirection: 'row',
+            backgroundColor: '#fff',
+            width: ValueCheck(props.width) ? props.width : null,
+            borderColor: 'lightgrey',
+            borderWidth: props.table != undefined && props.table != true ? 1 : 0,
+            borderRadius: 5,
+            alignItems: 'center',
+            height: normalize(30),
+            elevation: props.table != undefined && props.table != true ? 3 : 0,
+            justifyContent: props.table != undefined && props.table != true ? 'flex-start' : 'flex-start',
+          }}
+        >
+          {props.icon ?
+            <div
+              onClick={handleWebIconClick}
+              style={{ cursor: props.disabled ? 'not-allowed' : 'pointer' }}
+            >
+              <HOCIcons.Icons
+                icongroup={isNU(props.icon.icongroup) ? props.icon.icongroup : 5}
+                name={props.icon.name}
+                size={props.icon.size}
+                style={props.iconstyle}
+              />
+            </div>
+            :
+            <div
+              onClick={handleWebIconClick}
+              style={{ cursor: props.disabled ? 'not-allowed' : 'pointer' }}
+            >
+              <FontAwesome5
+                name={'calendar-alt'}
+                size={normalize(15)}
+                color={Global.AppTheme.primary_color}
+                style={{ width: normalize(25) }}
+              />
+            </div>
+          }
+
+          {/* Hidden HTML date input */}
+          <input
+            ref={webInputRef}
+            type="date"
+            value={getWebInputValue()}
+            onChange={onWebChange}
+            // min={getWebMinDate()}
+            disabled={props.disabled}
+            style={{
+              flex: 1,
+              height: '100%',
+              border: 'none',
+              backgroundColor: 'transparent',
+              fontSize: normalize(14),
+              color: 'black',
+              fontWeight: 'bold',
+              outline: 'none',
+              paddingLeft: normalize(5),
+              opacity: 0,
+              position: 'absolute',
+              width: '100%',
+              left: normalize(25),
+              cursor: props.disabled ? 'not-allowed' : 'pointer',
+            }}
+          />
+
+          {/* Display text that shows the formatted date */}
+          <Text style={props.textstyle ? props.textstyle : {
+            fontSize: normalize(14),
+            color: 'black',
+            fontWeight: 'bold',
+            marginLeft: normalize(5),
+            pointerEvents: 'none',
+            userSelect: 'none',
+          }}>
+            {moment(date).format('DD-MM-YYYY')}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  // Native platforms (iOS/Android) render
+  return (
+    <View style={{
+      width: data.itemwidth != undefined ? data.itemwidth : Dimensions.get('screen').width * 0.5,
+      borderWidth: 0,
+    }}>
+      {props.disableplaceholder && isNU(props.table) ?
+        <Text
+          style={{
+            borderWidth: 0,
+            fontSize: normalize(9),
+            color: 'black',
+          }}
+        >
+          {data.displaytext != undefined ? data.displaytext : 'Date'}
+        </Text>
+      : null}
+
+      <TouchableOpacity
+        disabled={props.disabled ? true : false}
+        onPress={() => showDatepicker()}
+        style={props.pickerstyle ?
+          props.pickerstyle :
+          {
+            flexDirection: 'row',
+            backgroundColor: '#fff',
+            width: ValueCheck(props.width) ? props.width : null,
+            borderColor: 'lightgrey',
+            borderWidth: props.table != undefined && props.table != true ? 1 : 0,
+            borderRadius: 5,
+            alignItems: 'center',
+            height: normalize(30),
+            elevation: props.table != undefined && props.table != true ? 3 : 0,
+            justifyContent: props.table != undefined && props.table != true ? 'flex-start' : 'flex-start',
+          }}
+      >
+        {props.icon ?
+          <HOCIcons.Icons
+            icongroup={isNU(props.icon.icongroup) ? props.icon.icongroup : 5}
+            name={props.icon.name}
+            size={props.icon.size}
+            style={props.iconstyle}
+          />
+          :
+          <FontAwesome5
+            name={'calendar-alt'}
+            size={normalize(15)}
+            color={Global.AppTheme.primary_color}
+            style={{ width: normalize(25) }}
+          />
+        }
+        <Text style={props.textstyle ? props.textstyle : { fontSize: normalize(14), color: 'black', fontWeight: 'bold' }}>
+          {moment(date).format('DD-MM-YYYY')}
+        </Text>
+      </TouchableOpacity>
+
+      {show && (
+        <DateTimePicker
+          minimumDate={isNU(props.minimumdate) ? minimumdate : null}
+          testID={'dateTimePicker'}
+          value={date}
+          mode={'date'}
+          is24Hour={true}
+          display="default"
+          onChange={onNativeChange}
+        />
+      )}
+    </View>
+  );
+}

package/src/StaticComponents/SDateTimePickerNew.js

@@ -0,0 +1,381 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { View, Text, Button, Platform, TouchableOpacity } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import HOCIcons from '../HOC/HOCIcons';
+import moment from 'moment';
+import { normalize } from '../CommonStyle/componentStyle';
+import { isNU, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { MaterialCommunityIcons } from '../Common/Icons';
+import { Global } from '../Common/Global';
+
+const SDateTimePickerNew = props => {
+  // State management
+  const [dateTime, setDateTime] = useState(props.passingDate ? new Date(props.passingDate) : new Date());
+  const [timeZone, setTimeZone] = useState(formatTime12Hour(new Date()));
+  const [mode, setMode] = useState('date');
+  const [showPicker, setShowPicker] = useState(false);
+  const [data, setData] = useState(props.data ?? {});
+
+  // Minimum and maximum date constraints
+  const [minimumdate] = useState(isNU(props.minimumdate) ? new Date(props.minimumdate) : null);
+  const [maximumdate] = useState(isNU(props.maximumdate) ? new Date(props.maximumdate) : null);
+
+  const inputRef = useRef(null);
+
+  // Format time in 12-hour format
+  function formatTime12Hour(date) {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+    });
+  }
+
+  // Format date for display
+  const formatDate = date => {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  // Handle date/time change for native platforms
+  const onNativeChange = (event, selectedValue) => {
+    if (selectedValue) {
+      setDateTime(prevDateTime => {
+        let newDateTime = new Date(prevDateTime);
+
+        if (mode === 'date') {
+          // If date is being selected, merge it with the existing time
+          newDateTime.setUTCFullYear(selectedValue.getUTCFullYear());
+          newDateTime.setUTCMonth(selectedValue.getUTCMonth());
+          newDateTime.setUTCDate(selectedValue.getUTCDate());
+
+          if (props.time === true) {
+            setMode('time');
+            setShowPicker(true);
+          } else {
+            setShowPicker(false);
+            // Update data and notify parent
+            setData({ ...data, value: newDateTime });
+            props.onChangeData?.(newDateTime.toISOString());
+          }
+        } else {
+          // If time is being selected, merge it with the existing date
+          newDateTime.setUTCHours(selectedValue.getUTCHours());
+          newDateTime.setUTCMinutes(selectedValue.getUTCMinutes());
+          newDateTime.setUTCSeconds(0);
+          newDateTime.setUTCMilliseconds(0);
+
+          setShowPicker(false);
+
+          // Update data and notify parent
+          setData({ ...data, value: newDateTime });
+          props.onChangeData?.(newDateTime.toISOString());
+
+          // Update time display
+          setTimeout(() => {
+            setTimeZone(formatTime12Hour(newDateTime));
+          }, 10);
+        }
+
+        return newDateTime;
+      });
+    }
+  };
+
+  // Handle date/time change for web platform
+  const onWebChange = (e) => {
+    const value = e.target.value;
+    if (!value) {return;}
+
+    let selectedDate;
+
+    if (props.time === true && props.date === true) {
+      // For datetime-local input (both date and time)
+      // datetime-local format: YYYY-MM-DDTHH:mm returns local time
+      const parts = value.split('T');
+      const dateParts = parts[0].split('-');
+      const timeParts = parts[1].split(':');
+
+      selectedDate = new Date(
+        parseInt(dateParts[0]),
+        parseInt(dateParts[1]) - 1,
+        parseInt(dateParts[2]),
+        parseInt(timeParts[0]),
+        parseInt(timeParts[1]),
+        0
+      );
+    } else if (props.time !== true && props.date === true) {
+      // For date-only picker
+      selectedDate = new Date(value + 'T00:00:00');
+    } else {
+      // For other cases
+      selectedDate = new Date(value);
+    }
+
+    if (isNaN(selectedDate.getTime())) {return;}
+
+    setDateTime(selectedDate);
+    setData({ ...data, value: selectedDate });
+
+    // Update time display if time component exists
+    if (props.time === true) {
+      setTimeZone(formatTime12Hour(selectedDate));
+    }
+
+    // Notify parent
+    props.onChangeData?.(selectedDate.toISOString());
+  };
+
+  // Show date picker
+  const showDatepicker = () => {
+    setMode('date');
+    setShowPicker(true);
+  };
+
+  // Show time picker
+  const showTimepicker = () => {
+    setMode('time');
+    setShowPicker(true);
+  };
+
+  // Effect to notify parent of dateTime changes
+  useEffect(() => {
+    if (props.onChangeData && Platform.OS !== 'web') {
+      props.onChangeData(dateTime.toISOString());
+    }
+  }, [dateTime]);
+
+  // Web-specific input value formatting
+  const getWebInputValue = () => {
+    if (!(dateTime instanceof Date) || isNaN(dateTime.getTime())) {return '';}
+
+    if (props.time === true && props.date === true) {
+      // For datetime-local: format as YYYY-MM-DDTHH:mm
+      const year = dateTime.getFullYear();
+      const month = String(dateTime.getMonth() + 1).padStart(2, '0');
+      const day = String(dateTime.getDate()).padStart(2, '0');
+      const hours = String(dateTime.getHours()).padStart(2, '0');
+      const minutes = String(dateTime.getMinutes()).padStart(2, '0');
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+    } else if (props.time !== true && props.date === true) {
+      // Date only
+      return dateTime.toISOString().split('T')[0];
+    } else if (props.time === true) {
+      // Time only
+      const timeStr = dateTime.toTimeString().split(' ')[0].substring(0, 5);
+      return timeStr;
+    }
+    // Full datetime
+    return dateTime.toISOString().substring(0, 16);
+  };
+
+  // Render for web platform
+  if (Platform.OS === 'web') {
+    return (
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {/* Date picker for web */}
+        {props.date === true && (
+          <View style={{ marginRight: props.time === true ? normalize(10) : 0 }}>
+            {props.labeltext && (
+              <Text style={props.positiontextstyle || { fontSize: normalize(12), marginBottom: 5 }}>
+                {props.labeltext}
+              </Text>
+            )}
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {props.icon && (
+                <HOCIcons.Icons
+                  icongroup={props.icon.icongroup}
+                  name={props.icon.name}
+                  size={props.icon.size}
+                  color={props.icon.color}
+                  style={[props.icon.style, { marginRight: normalize(5) }]}
+                />
+              )}
+              <input
+                ref={inputRef}
+                type={props.time === true ? 'datetime-local' : 'date'}
+                value={getWebInputValue()}
+                min={minimumdate instanceof Date ? minimumdate.toISOString().split('T')[0] : undefined}
+                max={maximumdate instanceof Date ? maximumdate.toISOString().split('T')[0] : undefined}
+                onChange={onWebChange}
+                disabled={props.disabled}
+                style={{
+                  height: normalize(35),
+                  padding: normalize(5),
+                  border: '1px solid #ccc',
+                  borderRadius: normalize(5),
+                  fontSize: normalize(14),
+                  ...props.inputStyle,
+                }}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* Time picker for web (separate if needed) */}
+        {props.time === true && props.date !== true && (
+          <View style={{ marginHorizontal: normalize(5) }}>
+            <View style={{
+              position: 'absolute',
+              top: normalize(-4),
+              left: normalize(7),
+              backgroundColor: 'white',
+              flexDirection: 'row',
+              alignItems: 'center',
+              zIndex: 100,
+            }}>
+              {props.table === undefined && (
+                <Text style={{ fontSize: normalize(9), paddingLeft: normalize(2) }}>
+                  {ValueCheck(props.timeplaceholder) ? props.timeplaceholder : 'TIME'}
+                </Text>
+              )}
+            </View>
+
+            <input
+              type="time"
+              value={dateTime.toTimeString().substring(0, 5)}
+              onChange={onWebChange}
+              disabled={props.timedisabled}
+              style={{
+                width: props.timewidth ? normalize(props.timewidth) : normalize(80),
+                height: props.timeheight ? normalize(props.timeheight) : normalize(35),
+                border: '1px solid lightgrey',
+                backgroundColor: ValueCheck(props.timebgcolor) ? props.timebgcolor : '#fff',
+                borderRadius: normalize(7),
+                padding: normalize(5),
+                fontSize: normalize(14),
+              }}
+            />
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  // Render for native platforms (iOS/Android)
+  return (
+    <View>
+      <View style={{ flexDirection: 'row' }}>
+        {/* Date picker with label */}
+        {props.date === true && (
+          <TouchableOpacity
+            disabled={props.disabled}
+            onPress={showDatepicker}
+            style={props.pickerstyle}
+          >
+            <View style={props.positionviewstyle}>
+              <Text style={props.positiontextstyle}> {props.labeltext} </Text>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <HOCIcons.Icons
+                icongroup={props.icon.icongroup}
+                name={props.icon.name}
+                size={props.icon.size}
+                color={props.icon.color}
+                style={props.icon.style}
+              />
+              <Text style={props.textstyle}>
+                {moment(dateTime).format('DD-MM-YYYY')}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        )}
+
+        {/* Time picker */}
+        {props.time === true && (
+          <View style={{
+            marginHorizontal: normalize(5),
+            marginVertical: normalize(1.5),
+          }}>
+            <View style={{
+              position: 'absolute',
+              top: normalize(-4),
+              left: normalize(7),
+              backgroundColor: 'white',
+              flexDirection: 'row',
+              alignItems: 'center',
+              zIndex: 100,
+            }}>
+              {props.table === undefined && (
+                <Text style={{ fontSize: normalize(9), paddingLeft: normalize(2) }}>
+                  {ValueCheck(props.timeplaceholder) ? props.timeplaceholder : 'TIME'}
+                </Text>
+              )}
+            </View>
+
+            <TouchableOpacity
+              disabled={props.timedisabled}
+              onPress={showTimepicker}
+              style={
+                isNU(props.timepickerstyle)
+                  ? props.timepickerstyle
+                  : {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    width: props.timewidth ? normalize(props.timewidth) : normalize(60),
+                    height: props.timeheight ? normalize(props.timeheight) : normalize(30),
+                    borderWidth: 1,
+                    borderColor: 'lightgrey',
+                    backgroundColor: ValueCheck(props.timebgcolor) ? props.timebgcolor : '#fff',
+                    borderRadius: normalize(7),
+                  }
+              }>
+              {props.timeicon ? (
+                <HOCIcons.Icons
+                  icongroup={isNU(props.timeicon.icongroup) ? props.timeicon.icongroup : 5}
+                  name={props.timeicon.name}
+                  size={props.timeicon.size}
+                  style={props.timeiconstyle}
+                />
+              ) : (
+                <MaterialCommunityIcons
+                  name="timer-outline"
+                  color={Global.AppTheme.primary_color}
+                  size={normalize(15)}
+                  style={{ paddingHorizontal: normalize(1) }}
+                />
+              )}
+
+              {isNU(props.timetextstyle) ? (
+                <Text adjustsFontSizeToFit style={props.timetextstyle}>
+                  {isNU(timeZone) ? timeZone : null}
+                </Text>
+              ) : null}
+
+              {!isNU(props.timetextstyle) && (
+                <View>
+                  <Text style={{
+                    fontSize: normalize(9),
+                    color: 'black',
+                    fontWeight: 'bold',
+                  }}>
+                    {timeZone}
+                  </Text>
+                </View>
+              )}
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+
+      {/* DateTimePicker for native platforms */}
+      {showPicker && Platform.OS !== 'web' && (
+        <DateTimePicker
+          value={dateTime}
+          mode={mode}
+          is24Hour={false}
+          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          minimumDate={minimumdate}
+          maximumDate={maximumdate}
+          onChange={onNativeChange}
+        />
+      )}
+    </View>
+  );
+};
+
+export default SDateTimePickerNew;