@jescon-technologies/react-native-ui-kit 0.0.14 → 0.0.15

package/src/StaticComponents/SDateTimePicker.tsx

@@ -0,0 +1,503 @@
+import React, { useEffect, useState, useRef } from 'react';
+import {
+  View,
+  Text,
+  Platform,
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from '@react-native-community/datetimepicker';
+import HIcons from '../Hoc/HIcons';
+import moment from 'moment';
+import { normalize } from '../CommonStyle/componentStyle';
+import { isNU, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { Global } from '../Common/Global';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type PickerMode = 'date' | 'time';
+
+interface IconDescriptor {
+  icongroup?: number;
+  name?: string;
+  size?: number;
+  color?: string;
+  style?: StyleProp<TextStyle>;
+}
+
+export interface SDateTimePickerNewProps {
+  /** Initial date (ISO string, date string, or Date). */
+  passingDate?: string | Date | null;
+  /** Extra data object; a `value: Date` field is written back on change. */
+  data?: Record<string, unknown> & { value?: Date };
+  /** Minimum selectable date. */
+  minimumdate?: string | Date | null;
+  /** Maximum selectable date. */
+  maximumdate?: string | Date | null;
+  /** Enable the date picker. */
+  date?: boolean;
+  /** Enable the time picker. */
+  time?: boolean;
+  /** Disable the date picker. */
+  disabled?: boolean;
+  /** Disable the time picker. */
+  timedisabled?: boolean;
+  /** Hide the floating TIME label when `table` is defined. */
+  table?: unknown;
+  /** Label shown above the date picker. */
+  labeltext?: string;
+  /** Placeholder label for the time field. Defaults to 'TIME'. */
+  timeplaceholder?: string;
+  /** Icon descriptor used for the date picker (native). */
+  icon?: IconDescriptor;
+  /** Icon descriptor used for the time picker (native). */
+  timeicon?: IconDescriptor;
+  /** Width of the time field (native + web). */
+  timewidth?: number;
+  /** Height of the time field (native + web). */
+  timeheight?: number;
+  /** Background color of the time field. */
+  timebgcolor?: string;
+  /** Container style for the date picker (native). */
+  pickerstyle?: StyleProp<ViewStyle>;
+  /** Container style for the floating label (native). */
+  positionviewstyle?: StyleProp<ViewStyle>;
+  /** Text style for the floating label (native). */
+  positiontextstyle?: StyleProp<TextStyle>;
+  /** Text style for the date value (native). */
+  textstyle?: StyleProp<TextStyle>;
+  /** Container style for the time picker (native). */
+  timepickerstyle?: StyleProp<ViewStyle>;
+  /** Text style for the time value (native). */
+  timetextstyle?: StyleProp<TextStyle>;
+  /** Style for the time icon (native). */
+  timeiconstyle?: StyleProp<TextStyle>;
+  /** Fired whenever the date/time changes. Receives an ISO 8601 string. */
+  onChangeData?: (iso: string) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatTime12Hour(date: Date): string {
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  });
+}
+
+/** Web `<input>` shim — RN's TS config doesn't include DOM tags. */
+const WebInput: React.FC<{
+  ref?: React.Ref<HTMLInputElement>;
+  type: string;
+  value: string;
+  min?: string;
+  max?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+}> = (props) => React.createElement('input', props as React.InputHTMLAttributes<HTMLInputElement>);
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const SDateTimePicker: React.FC<SDateTimePickerNewProps> = (props) => {
+  const {
+    passingDate,
+    data: dataProp,
+    minimumdate: minProp,
+    maximumdate: maxProp,
+    date: showDate = false,
+    time: showTime = false,
+    disabled,
+    timedisabled,
+    table,
+    labeltext,
+    timeplaceholder,
+    icon,
+    timeicon,
+    timewidth,
+    timeheight,
+    timebgcolor,
+    pickerstyle,
+    positionviewstyle,
+    positiontextstyle,
+    textstyle,
+    timepickerstyle,
+    timetextstyle,
+    timeiconstyle,
+    onChangeData,
+  } = props;
+
+  // State management
+  const [dateTime, setDateTime] = useState<Date>(
+    passingDate ? new Date(passingDate) : new Date()
+  );
+  const [timeZone, setTimeZone] = useState<string>(formatTime12Hour(new Date()));
+  const [mode, setMode] = useState<PickerMode>('date');
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+  const [data, setData] = useState<Record<string, unknown> & { value?: Date }>(
+    dataProp ?? {}
+  );
+
+  // Minimum and maximum date constraints
+  const [minimumdate] = useState<Date | null>(
+    isNU(minProp) ? new Date(minProp as string | Date) : null
+  );
+  const [maximumdate] = useState<Date | null>(
+    isNU(maxProp) ? new Date(maxProp as string | Date) : null
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync incoming `data` prop if it changes externally (original didn't, but
+  // keeping a no-op comment so the reader knows it's intentional).
+  useEffect(() => {
+    // no-op: original relied on `data` prop only at mount
+  }, [dataProp]);
+
+  // Format date for display
+  const formatDate = (d: Date): string =>
+    d.toLocaleDateString('en-US', {
+      weekday: 'short',
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+
+  // Handle date/time change for native platforms
+  const onNativeChange = (_event: DateTimePickerEvent, selectedValue?: Date): void => {
+    if (selectedValue) {
+      setDateTime((prevDateTime) => {
+        const 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 (showTime === true) {
+            setMode('time');
+            setShowPicker(true);
+          } else {
+            setShowPicker(false);
+            setData((prev) => ({ ...prev, value: newDateTime }));
+            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);
+
+          setData((prev) => ({ ...prev, value: newDateTime }));
+          onChangeData?.(newDateTime.toISOString());
+
+          setTimeout(() => {
+            setTimeZone(formatTime12Hour(newDateTime));
+          }, 10);
+        }
+
+        return newDateTime;
+      });
+    }
+  };
+
+  // Handle date/time change for web platform
+  const onWebChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const value = e.target.value;
+    if (!value) return;
+
+    let selectedDate: Date;
+
+    if (showTime === true && showDate === true) {
+      // datetime-local format: YYYY-MM-DDTHH:mm (local time)
+      const parts = value.split('T');
+      const dateParts = parts[0].split('-');
+      const timeParts = parts[1].split(':');
+
+      selectedDate = new Date(
+        parseInt(dateParts[0], 10),
+        parseInt(dateParts[1], 10) - 1,
+        parseInt(dateParts[2], 10),
+        parseInt(timeParts[0], 10),
+        parseInt(timeParts[1], 10),
+        0
+      );
+    } else if (showTime !== true && showDate === true) {
+      // Date-only picker
+      selectedDate = new Date(value + 'T00:00:00');
+    } else {
+      // Time-only / other
+      selectedDate = new Date(value);
+    }
+
+    if (isNaN(selectedDate.getTime())) return;
+
+    setDateTime(selectedDate);
+    setData((prev) => ({ ...prev, value: selectedDate }));
+
+    if (showTime === true) {
+      setTimeZone(formatTime12Hour(selectedDate));
+    }
+
+    onChangeData?.(selectedDate.toISOString());
+  };
+
+  // Show date picker
+  const showDatepicker = (): void => {
+    setMode('date');
+    setShowPicker(true);
+  };
+
+  // Show time picker
+  const showTimepicker = (): void => {
+    setMode('time');
+    setShowPicker(true);
+  };
+
+  const getWebInputValue = (): string => {
+    if (!(dateTime instanceof Date) || isNaN(dateTime.getTime())) return '';
+
+    if (showTime === true && showDate === true) {
+      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 (showTime !== true && showDate === true) {
+      return dateTime.toISOString().split('T')[0];
+    } else if (showTime === true) {
+      return dateTime.toTimeString().split(' ')[0].substring(0, 5);
+    }
+    return dateTime.toISOString().substring(0, 16);
+  };
+
+  // -------------------------------------------------------------------------
+  // Render — web
+  // -------------------------------------------------------------------------
+
+  if (Platform.OS === 'web') {
+    return (
+      <>
+        {showDate === true && (
+          <View style={{ marginRight: showTime === true ? normalize(10) : 0 }}>
+            {labeltext && (
+              <Text style={{ color: Global.AppTheme.primary_color }}>{labeltext}</Text>
+            )}
+            <WebInput
+              ref={inputRef}
+              type={showTime === 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={disabled}
+              style={{
+                height: normalize(30),
+                width: '100%',
+                border: '1px solid #ccc',
+                borderRadius: normalize(5),
+                fontSize: normalize(14),
+                // ⚠️ Original spread `...props.icon` here. That's an icon
+                // descriptor object (icongroup/name/size/color/style), not
+                // CSS — spreading it as a style is almost certainly a bug.
+                // Preserved to match behavior; remove or replace with a
+                // dedicated `iconStyle` prop.
+                ...(icon as unknown as React.CSSProperties),
+              }}
+            />
+          </View>
+        )}
+
+        {showTime === true && showDate !== true && (
+          <View style={{ marginHorizontal: normalize(5) }}>
+            <View
+              style={{
+                position: 'absolute',
+                top: normalize(-4),
+                left: normalize(7),
+                backgroundColor: 'white',
+                flexDirection: 'row',
+                alignItems: 'center',
+                zIndex: 100,
+              }}
+            >
+              {table === undefined && (
+                <Text style={{ fontSize: normalize(9), paddingLeft: normalize(2) }}>
+                  {ValueCheck(timeplaceholder) ? timeplaceholder : 'TIME'}
+                </Text>
+              )}
+            </View>
+
+            <WebInput
+              type="time"
+              value={dateTime.toTimeString().substring(0, 5)}
+              onChange={onWebChange}
+              disabled={timedisabled}
+              style={{
+                width: timewidth ? normalize(timewidth) : normalize(80),
+                height: timeheight ? normalize(timeheight) : normalize(35),
+                border: '1px solid lightgrey',
+                backgroundColor: ValueCheck(timebgcolor) ? timebgcolor : '#fff',
+                borderRadius: normalize(7),
+                padding: normalize(5),
+                fontSize: normalize(14),
+              }}
+            />
+          </View>
+        )}
+      </>
+    );
+  }
+
+  // -------------------------------------------------------------------------
+  // Render — native (iOS/Android)
+  // -------------------------------------------------------------------------
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'row' }}>
+        {showDate === true && (
+          <TouchableOpacity
+            disabled={disabled}
+            onPress={showDatepicker}
+            style={pickerstyle}
+          >
+            <View style={positionviewstyle}>
+              <Text style={positiontextstyle}>{labeltext}</Text>
+            </View>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <HIcons.Icons
+                icongroup={icon?.icongroup}
+                name={icon?.name}
+                size={icon?.size}
+                color={icon?.color}
+                style={icon?.style}
+              />
+              <Text style={textstyle}>{moment(dateTime).format('DD-MM-YYYY')}</Text>
+            </View>
+          </TouchableOpacity>
+        )}
+
+        {showTime === 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,
+              }}
+            >
+              {table === undefined && (
+                <Text style={{ fontSize: normalize(9), paddingLeft: normalize(2) }}>
+                  {ValueCheck(timeplaceholder) ? timeplaceholder : 'TIME'}
+                </Text>
+              )}
+            </View>
+
+            <TouchableOpacity
+              disabled={timedisabled}
+              onPress={showTimepicker}
+              style={
+                isNU(timepickerstyle)
+                  ? timepickerstyle
+                  : {
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      width: timewidth ? normalize(timewidth) : normalize(60),
+                      height: timeheight ? normalize(timeheight) : normalize(30),
+                      borderWidth: 1,
+                      borderColor: 'lightgrey',
+                      backgroundColor: ValueCheck(timebgcolor) ? timebgcolor : '#fff',
+                      borderRadius: normalize(7),
+                    }
+              }
+            >
+              {timeicon ? (
+                <HIcons.Icons
+                  icongroup={isNU(timeicon.icongroup) ? timeicon.icongroup : 5}
+                  name={timeicon.name}
+                  size={timeicon.size}
+                  style={timeiconstyle}
+                />
+              ) : (
+                <HIcons.MaterialCommunityIcons
+                  name="timer-outline"
+                  color={Global.AppTheme.primary_color}
+                  size={normalize(15)}
+                  style={{ paddingHorizontal: normalize(1) }}
+                />
+              )}
+
+              {isNU(timetextstyle) ? (
+                <Text adjustsFontSizeToFit style={timetextstyle}>
+                  {isNU(timeZone) ? timeZone : null}
+                </Text>
+              ) : null}
+
+              {!isNU(timetextstyle) && (
+                <View>
+                  <Text
+                    style={{
+                      fontSize: normalize(9),
+                      color: 'black',
+                      fontWeight: 'bold',
+                    }}
+                  >
+                    {timeZone}
+                  </Text>
+                </View>
+              )}
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+
+      {showPicker && Platform.OS !== 'web' && (
+        <DateTimePicker
+          value={dateTime}
+          mode={mode}
+          is24Hour={false}
+          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          minimumDate={minimumdate ?? undefined}
+          maximumDate={maximumdate ?? undefined}
+          onChange={onNativeChange}
+        />
+      )}
+    </View>
+  );
+};
+
+export default SDateTimePicker;

package/src/StaticComponents/SSearchBar.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import {
+    TextInput,
+    View,
+    StyleSheet,
+    Image,
+    TouchableOpacity,
+    StyleProp,
+    ViewStyle,
+    Dimensions,
+} from 'react-native';
+import { normalize, ValueCheck } from '../CommonStyle/ComponentFunctions';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface SSearchBarProps {
+    /** Controlled value. If omitted, the component falls back to local state. */
+    value?: string;
+    /** Invoked on each text change with the current text. */
+    onChangeText?: (text: string) => void;
+    /** Invoked when the search icon is pressed. Receives `true`. */
+    callBack?: (pressed: boolean) => void;
+    /** Extra style applied to the outer container. */
+    style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const SSearchBar: React.FC<SSearchBarProps> = ({ value, onChangeText, callBack, style }) => {
+    const [localSearchData, setLocalSearchData] = React.useState<string>(value ?? '');
+
+    React.useEffect(() => {
+        setLocalSearchData(value ?? '');
+    }, [value]);
+
+    return (
+        <View
+            style={[
+                styles.searchTextbox_View,
+                styles.overlay_searchTextbox_View,
+                style ?? {},
+            ]}
+        >
+            <View style={styles.textinput_view}>
+                <TextInput
+                    style={[styles.searchTextbox]}
+                    editable={true}
+                    autoCapitalize={'characters'}
+                    keyboardType={'default'}
+                    placeholder="Search"
+                    value={localSearchData}
+                    onChangeText={(text: string) => {
+                        setLocalSearchData(text);
+                        onChangeText?.(text);
+                    }}
+                />
+            </View>
+
+            <TouchableOpacity
+                disabled={ValueCheck(callBack) ? false : true}
+                onPress={() => callBack?.(true)}
+            >
+                <Image
+                    style={[styles.searchIcon]}
+                    source={{ uri: 'https://i.ibb.co/j8ywYpJ/search.png' }}
+                />
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+export default SSearchBar;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+    overlay_searchTextbox_View: {
+        width: '95%',
+        alignSelf: 'center',
+        justifyContent: 'center',
+    },
+    textinput_view: {
+        flex: 1,
+        paddingLeft: '1%',
+    },
+    searchTextbox_View: {
+        flexDirection: 'row',
+        borderWidth: 0,
+        borderColor: '#ddd',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        borderRadius: 7,
+        // margin: Dimensions.get("window").height * 0.002,
+        marginBottom: Dimensions.get('window').height * 0.003,
+        height: 35,
+        // width:'100%',
+        backgroundColor: '#f1f3f6',
+        // backgroundColor:colors.color_componentBgcolor,
+        marginTop: 0, padding: 5,
+    },
+    searchTextbox: {
+        color: 'black',
+        width: '100%', marginLeft: '1%', marginRight: '1%',
+        fontWeight: 'bold',
+        fontSize: normalize(18),
+        textAlign: 'justify',
+        padding: 0, height: '100%', marginBottom: -(Dimensions.get('window').height * 0.003),
+    },
+    searchIcon: {
+        width: 20, height: 20, margin: 5, resizeMode: 'contain',
+    },
+});