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

package/src/StaticComponents/SDatePicker.js

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from 'react';
+import { View, TouchableOpacity, Platform, 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';
+
+export default function SDatePicker(props) {
+  // Initialize date state: normalize incoming passingDate to 12:00 AM
+  const [date, setDate] = useState(
+    props.passingDate
+      ? moment(props.passingDate).startOf('day').toDate()
+      : moment().startOf('day').toDate()
+  );
+
+  const [data, setData] = useState(props.data ?? {});
+  const [mode, setMode] = useState('date');
+  const [show, setShow] = useState(false);
+
+  // Handle date change for native platforms
+  const onNativeChange = (event, selectedDate) => {
+    const currentDate = selectedDate
+      ? moment(selectedDate).startOf('day').toDate() // normalize to 12:00 AM
+      : date;
+
+    setShow(Platform.OS === 'ios');
+    setDate(currentDate);
+
+    setData(prevData => ({ ...prevData, value: currentDate }));
+
+    if (props.onChangeData) {
+      // return formatted string: "YYYY-MM-DD HH:mm:ss.SSS"
+      const formatted = moment(currentDate).format('YYYY-MM-DD HH:mm:ss.SSS');
+      props.onChangeData(formatted);
+    }
+  };
+
+  // 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(prevData => ({ ...prevData, value: selectedDate }));
+
+    if (props.onChangeData) {
+      const formatted = moment(selectedDate).format('YYYY-MM-DD HH:mm:ss.SSS');
+      props.onChangeData(formatted);
+    }
+  };
+
+  const showMode = (currentMode) => {
+    setShow(true);
+    setMode(currentMode);
+  };
+
+  const showDatepicker = () => {
+    showMode('date');
+  };
+
+  // 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];
+  };
+
+  // Web-specific render
+  if (Platform.OS === 'web') {
+    return (
+      <View style={{ borderWidth: 0, width: data.itemwidth ?? '100%' }}>
+        <View style={{ marginTop: normalize(0), paddingHorizontal: 0, borderWidth: 0 }}>
+          {props.table !== true && (
+            <CText
+              style={{
+                fontSize: normalize(11),
+                paddingHorizontal: normalize(5),
+                color: 'black',
+                borderWidth: 0,
+                height: normalize(16),
+              }}
+            >
+              {props.required && <Text style={{ color: 'red', fontSize: normalize(13), fontWeight: 'bold' }}>* </Text>}
+              {data.displaytext ?? 'Date'}
+            </CText>
+          )}
+          <View style={{ elevation: props.table !== true ? 3 : 0 }}>
+            <View style={{
+              flexDirection: 'row',
+              backgroundColor: data.backgroundColor ?? '#fff',
+              height: data.height ?? normalize(35),
+              borderColor: 'lightgrey',
+              borderWidth: props.table !== true ? 1 : 0,
+              borderRadius: 5,
+              alignItems: 'center',
+              marginHorizontal: normalize(1),
+              justifyContent: props.table !== true ? 'flex-start' : 'center',
+            }}>
+              <FontAwesome5
+                name="calendar-alt"
+                size={normalize(15)}
+                color={data.iconcolor ?? 'darkblue'}
+                style={{ paddingHorizontal: 5, width: normalize(25) }}
+              />
+              <input
+                type="date"
+                value={getWebInputValue()}
+                onChange={onWebChange}
+                disabled={props.disabled}
+                min={props.minDate ? moment(props.minDate).format('YYYY-MM-DD') : undefined}
+                max={props.maxDate ? moment(props.maxDate).format('YYYY-MM-DD') : undefined}
+                style={{
+                  flex: 1,
+                  height: '100%',
+                  border: 'none',
+                  backgroundColor: 'transparent',
+                  fontSize: normalize(12),
+                  color: 'black',
+                  fontWeight: 'bold',
+                  outline: 'none',
+                  paddingLeft: normalize(5),
+                }}
+              />
+              {/* Display text for web (hidden by default, shown when no input) */}
+              {!date && (
+                <CText style={{
+                  fontSize: normalize(12),
+                  color: 'black',
+                  fontWeight: 'bold',
+                  position: 'absolute',
+                  left: normalize(30),
+                  pointerEvents: 'none',
+                }}>
+                  {moment(date).format('DD-MM-YYYY')}
+                </CText>
+              )}
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Native platforms (iOS/Android) render
+  return (
+    <View style={{ borderWidth: 0, width: data.itemwidth ?? '100%' }}>
+      <View style={{ marginTop: normalize(0), paddingHorizontal: 0, borderWidth: 0 }}>
+        {props.table !== true && (
+          <CText
+            style={{
+              fontSize: normalize(11),
+              paddingHorizontal: normalize(5),
+              color: 'black',
+              borderWidth: 0,
+              height: normalize(16),
+            }}
+          >
+            {props.required && <Text style={{ color: 'red', fontSize: normalize(13), fontWeight: 'bold' }}>* </Text>}
+            {data.displaytext ?? 'Date'}
+          </CText>
+        )}
+        <View style={{ elevation: props.table !== true ? 3 : 0 }}>
+          <TouchableOpacity
+            disabled={props.disabled}
+            onPress={showDatepicker}
+            style={{
+              flexDirection: 'row',
+              backgroundColor: data.backgroundColor ?? '#fff',
+              height: data.height ?? normalize(35),
+              borderColor: 'lightgrey',
+              borderWidth: props.table !== true ? 1 : 0,
+              borderRadius: 5,
+              alignItems: 'center',
+              marginHorizontal: normalize(1),
+              justifyContent: props.table !== true ? 'flex-start' : 'center',
+            }}
+          >
+            <FontAwesome5
+              name="calendar-alt"
+              size={normalize(15)}
+              color={data.iconcolor ?? 'darkblue'}
+              style={{ paddingHorizontal: 5, width: normalize(25) }}
+            />
+            <CText style={{ fontSize: normalize(12), color: 'black', fontWeight: 'bold' }}>
+              {moment(date).format('DD-MM-YYYY')}
+            </CText>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {show && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={date}
+          mode={mode}
+          is24Hour={true}
+          display="default"
+          onChange={onNativeChange}
+          maximumDate={props.maxDate ?? new Date('2050-01-01')}
+          minimumDate={props.minDate ?? undefined}
+        />
+      )}
+    </View>
+  );
+}

package/src/StaticComponents/SDatePickerLabel.js

@@ -0,0 +1,253 @@
+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 SDatePickerLabel(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',
+                    }}
+                > <div
+                    onClick={handleWebIconClick}
+                    style={{ cursor: props.disabled ? 'not-allowed' : 'pointer' }}
+                >
+                        {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) }}
+                            />
+                        }
+                    </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>
+    );
+}