@jescon-technologies/react-native-ui-kit 0.0.6 → 0.0.8

package/src/StaticComponents/SDatePickerNew.js

@@ -1,258 +0,0 @@
-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 '../../../../../src/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

@@ -1,381 +0,0 @@
-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 '../../../../../src/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;