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

package/src/StaticComponents/SAlphabet.js

@@ -1,47 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, FlatList, Dimensions, TouchableOpacity } from 'react-native';
-import { normalize } from '../CommonStyle/componentStyle';
-
-export default function SAlphabet(props) {
-    const [alphaindex, setAlphaIndex] = useState(0);
-    return (
-        <View style={{
-            // height: Dimensions.get('window').height * 0.6,
-            marginBottom: Dimensions.get('window').height * 0.01,
-        }}>
-            <FlatList
-                data={['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '-', '.']}
-                renderItem={renderAlphabet}
-                style={{ paddingBottom: 20 }}
-                contentContainerStyle={{ alignItems: 'center' }}
-                keyExtractor={(item, index) => 'key' + index}
-                initialNumToRender={50}
-                maxToRenderPerBatch={100}
-            />
-        </View>
-    );
-
-    function renderAlphabet({ index, item }) {
-
-        return (
-            <TouchableOpacity style={{
-                width: normalize(25), alignItems: 'center', paddingVertical: 2, borderRadius: normalize(40) / 2,
-                backgroundColor: index == alphaindex ? '#8162fc' : 'white',
-            }}
-                onPress={() => getAlphabetData(item, index)}>
-                <Text style={{
-                    color: index == alphaindex ? 'white' : 'black',
-                    fontWeight: index == alphaindex ? 'bold' : 'normal',
-                }}>{item}</Text>
-            </TouchableOpacity>
-        );
-    }
-
-    function getAlphabetData(alpha, index) {
-        setAlphaIndex(index);
-        props.callBack != undefined ? props.callBack({
-            'alpha': alpha,
-            'index': index,
-        }) : null;
-    }
-}

package/src/StaticComponents/SCheckBox.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import { normalize } from '../CommonStyle/componentStyle';
-import CText from '../CustomComponents/CText';
-
-const SCheckBox = (props) => {
-  // Normalize value to boolean for rendering
-  const checked = Number(props.data?.value) === 1;
-
-  const handlePress = () => {
-    if (props.callBack) {
-      // Toggle and send back numeric value (0 or 1)
-      const newValue = checked ? 0 : 1;
-      props.callBack(newValue);
-    }
-  };
-
-  return (
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      {props.data?.displaytext && (
-        <CText style={{ color: 'black', fontSize: normalize(14) }}>
-          {props.data.displaytext}
-        </CText>
-      )}
-
-      <TouchableOpacity
-        onPress={handlePress}
-        disabled={props.disabled ?? false}
-        style={{ paddingHorizontal: 5 }}
-      >
-        <AntDesign
-          name={checked ? 'checksquare' : 'checksquareo'}
-          size={normalize(props.data?.size ?? 20)}
-          color={checked ? 'darkblue' : 'grey'}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default SCheckBox;

package/src/StaticComponents/SDatePicker.js

@@ -1,208 +0,0 @@
-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

@@ -1,253 +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 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>
-    );
-}