@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.5

package/src/Components/FilterInput.js

@@ -0,0 +1,569 @@
+import React, { useContext, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  Keyboard,
+} from 'react-native';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Menu, MenuTrigger, MenuOptions } from 'react-native-popup-menu';
+import moment from 'moment';
+import { normalize } from '../CommonStyle/componentStyle';
+import CDropDownList from '../CustomComponents/CDropDownList';
+import ContextBio from '../ContextAPI/ContextBio';
+import CustomTextInput from './CustomTextInput';
+
+const FilterInput = ({
+  label,
+  inputValue,
+  onChangeText,
+  btnBackgroundColor,
+  iconName,
+  iconSize,
+  iconColor,
+  btnBorderColor,
+  type,
+  selected,
+  onSelect,
+  addTextOperators,
+  addOptionsUpdate,
+  addOperatorsUpdate,
+}) => {
+  const { invoiceData, setInvoiceData } = useContext(ContextBio);
+
+  // State management
+  const [numberOperator, setNumberOperator] = useState(0);
+  const [dateOperator, setDateOperator] = useState(0);
+  const [textOperator, setTextOperator] = useState(0);
+  const [textInput, setTextInput] = useState('');
+  const [firstNumber, setFirstNumber] = useState('');
+  const [secondNumber, setSecondNumber] = useState('');
+  const [date, setDate] = useState(new Date());
+  const [secondDate, setSecondDate] = useState(new Date());
+  const [dateVisibility, setDateVisibility] = useState(false);
+  const [secondDateVisibility, setSecondDateVisibility] = useState(false);
+  const [option, setOption] = useState('');
+
+  // Refs
+  const inputRef = useRef(null);
+  const secondNumberRef = useRef(null);
+  const menuRef = useRef(null);
+  const menuInputRef = useRef(null);
+
+  // Operator configurations
+  const textOperators = [
+    { datavalue: 1, icon: '', displayvalue: 'Exact', value: 1 },
+    { datavalue: 2, icon: '', displayvalue: 'Like', value: 2 },
+    { datavalue: 3, icon: '', displayvalue: 'Middle', value: 3 },
+    { datavalue: 4, icon: '', displayvalue: 'Last', value: 4 },
+  ];
+
+  const genderLabels = [
+    { datavalue: 'M', icon: '', displayvalue: 'Male', value: 'M' },
+    { datavalue: 'F', icon: '', displayvalue: 'Female', value: 'F' },
+  ];
+
+  const checkingOperators = [
+    { datavalue: 1, icon: '', displayvalue: 'Exact', value: 1 },
+    { datavalue: 5, icon: '', displayvalue: 'Less Than', value: 5 },
+    { datavalue: 7, icon: '', displayvalue: 'Greater Than', value: 7 },
+    { datavalue: 8, icon: '', displayvalue: 'Less Than or Equal to', value: 8 },
+    { datavalue: 9, icon: '', displayvalue: 'Greater Than or Equal to', value: 9 },
+    { datavalue: 6, icon: '', displayvalue: 'Between', value: 6 },
+  ];
+
+  // Helper functions
+  const menuOpen = () => menuRef.current?.open();
+  const menuClose = () => menuRef.current?.close();
+
+  const handleOpenMenu = () => {
+    onSelect();
+    setTimeout(() => menuInputRef.current?.focus(), 300);
+  };
+
+  const handleButtonClick = () => {
+    onSelect();
+    if (type === 'date') {
+      setDateVisibility(true);
+    } else if (type === 'number') {
+      inputRef.current?.focus();
+    } else if (type === 'select') {
+      menuOpen();
+    } else {
+      menuOpen();
+    }
+  };
+
+  const handleNumberOperatorClick = (value) => {
+    setNumberOperator(value);
+    handleInputChange(firstNumber, secondNumber, value);
+    if (value === 6) {
+      setTimeout(() => secondNumberRef.current?.focus(), 300);
+    }
+  };
+
+  const handleTextInputChange = (text, operator) => {
+    onChangeText({ firstValue: text, operator });
+    setTextOperator(0);
+  };
+
+  const handleDateChange = (event, selectedDate) => {
+    const currentDate = selectedDate || date;
+    setDateVisibility(false);
+    setDate(currentDate);
+    handleDateInputChange(currentDate, secondDate, dateOperator);
+  };
+
+  const handleSecondDateChange = (event, selectedDate) => {
+    const currentDate = selectedDate || secondDate;
+    setSecondDateVisibility(false);
+    setSecondDate(currentDate);
+    handleDateInputChange(date, currentDate, dateOperator);
+  };
+
+  const handleDateOperatorClick = (value) => {
+    setDateOperator(value);
+    handleDateInputChange(date, secondDate, value);
+    if (value === 6) {setSecondDateVisibility(true);}
+  };
+
+  const getValues = (firstValue, secondValue, operator) => {
+    return { firstValue, operator, secondValue };
+  };
+
+  const handleInputChange = (firstValue, secondValue, operator) => {
+    onChangeText(getValues(firstValue, secondValue, operator));
+  };
+
+  const handleDateInputChange = (firstValue, secondValue, operator) => {
+    onChangeText(getValues(firstValue, secondValue, operator));
+  };
+
+  const handleSelectChange = (value) => {
+    onChangeText({ firstValue: value });
+  };
+
+  const handleClearInput = () => {
+    if (type === 'number') {
+      setFirstNumber('');
+      setSecondNumber('');
+      handleInputChange('', '', numberOperator);
+    } else if (type === 'date') {
+      setDate(new Date());
+      setSecondDate(new Date());
+      handleDateInputChange('', '', dateOperator);
+    } else if (type === 'select') {
+      setOption('');
+      handleSelectChange('');
+    } else {
+      setTextInput('');
+      handleTextInputChange('', textOperator);
+    }
+    setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+  };
+
+  // Render methods
+  const renderTextInputField = () => (
+    <View style={styles.inputRow}>
+      <Menu ref={menuRef} onOpen={handleOpenMenu}>
+        <MenuTrigger>
+          <View style={styles.inputField}>
+            <Text style={inputValue.firstValue ? styles.valueText : styles.placeholderText}>
+              {inputValue.firstValue || label}
+            </Text>
+            {inputValue.firstValue && (
+              <TouchableOpacity onPress={handleClearInput} style={styles.clearButton}>
+                <Icons.FontAwesome5 name="times" size={12} color={colors.icon} />
+              </TouchableOpacity>
+            )}
+          </View>
+        </MenuTrigger>
+        <MenuOptions customStyles={styles.menuOptions}>
+          <View style={styles.menuInputContainer}>
+            <CustomTextInput
+              inputRef={menuInputRef}
+              style={styles.menuInput}
+              placeholder={label}
+              value={inputValue.firstValue}
+              onChangeText={(value) => {
+                setTextInput(value);
+                handleTextInputChange(value, textOperator);
+                setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+              }}
+              onSubmitEditing={() => {
+                menuClose();
+                Keyboard.dismiss();
+              }}
+            />
+          </View>
+        </MenuOptions>
+      </Menu>
+      <OperatorDropdown
+        options={textOperators}
+        onSelect={(val) => {
+          addTextOperators(val);
+          setTextOperator(val.datavalue);
+          handleTextInputChange(textInput, val.datavalue);
+          setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+        }}
+      />
+    </View>
+  );
+
+  const renderNumberInputField = () => (
+    <View style={styles.numberInputContainer}>
+      <View style={styles.numberInputWrapper}>
+        <TextInput
+          ref={inputRef}
+          style={styles.numberInput}
+          placeholder={label}
+          keyboardType="numeric"
+          value={firstNumber}
+          placeholderTextColor={colors.placeholder}
+          onChangeText={(value) => {
+            setFirstNumber(value);
+            handleInputChange(value, secondNumber, numberOperator);
+            onSelect();
+            setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+          }}
+        />
+        {firstNumber !== '' && (
+          <TouchableOpacity onPress={handleClearInput} style={styles.clearButton}>
+            <Icons.FontAwesome5 name="times" size={12} color={colors.icon} />
+          </TouchableOpacity>
+        )}
+      </View>
+      <OperatorDropdown
+        options={checkingOperators}
+        onSelect={(val) => {
+          addOperatorsUpdate(val);
+          handleNumberOperatorClick(val.datavalue);
+          setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+        }}
+      />
+      {numberOperator === 6 && (
+        <View style={styles.numberInputWrapper}>
+          <TextInput
+            ref={secondNumberRef}
+            style={styles.numberInput}
+            placeholder={label}
+            keyboardType="numeric"
+            value={secondNumber}
+            placeholderTextColor={colors.placeholder}
+            onChangeText={(value) => {
+              setSecondNumber(value);
+              handleInputChange(firstNumber, value, numberOperator);
+            }}
+          />
+          {secondNumber !== '' && (
+            <TouchableOpacity onPress={() => {
+              setSecondNumber('');
+              handleInputChange(firstNumber, '', numberOperator);
+            }} style={styles.clearButton}>
+              <Icons.FontAwesome5 name="times" size={12} color={colors.icon} />
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+    </View>
+  );
+
+  const renderSelectField = () => (
+    <View style={styles.selectContainer}>
+      <Text style={option ? styles.valueText : styles.placeholderText}>
+        {option || 'Select'}
+      </Text>
+      <Menu ref={menuRef}>
+        <MenuTrigger customStyles={styles.menuTrigger}>
+          <Icons.FontAwesome5 name="chevron-down" size={14} color={colors.icon} />
+        </MenuTrigger>
+        <MenuOptions customStyles={styles.menuOptions}>
+          <CDropDownList
+            dropdownarray={genderLabels}
+            callback={(val) => {
+              handleSelectChange(val.value);
+              addOptionsUpdate(val);
+              setOption(val.displayvalue);
+              onSelect();
+              setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+            }}
+          />
+        </MenuOptions>
+      </Menu>
+      {option !== '' && (
+        <TouchableOpacity onPress={handleClearInput} style={styles.clearButton}>
+          <Icons.FontAwesome5 name="times" size={12} color={colors.icon} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+
+  const renderDateField = () => (
+    <View style={styles.inputRow}>
+      <TouchableOpacity
+        onPress={() => {
+          setDateVisibility(true);
+          onSelect();
+          setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+        }}
+      >
+        <View style={styles.inputField}>
+          <Text style={inputValue.firstValue ? styles.valueText : styles.placeholderText}>
+            {inputValue.firstValue ? moment(inputValue.firstValue).format('DD-MM-YYYY') : 'Select date'}
+          </Text>
+          {inputValue.firstValue && (
+            <TouchableOpacity onPress={handleClearInput} style={styles.clearButton}>
+              <Icons.FontAwesome5 name="times" size={12} color={colors.icon} />
+            </TouchableOpacity>
+          )}
+        </View>
+      </TouchableOpacity>
+      {dateVisibility && (
+        <DateTimePicker
+          value={date}
+          mode="date"
+          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          onChange={handleDateChange}
+        />
+      )}
+      <OperatorDropdown
+        options={checkingOperators}
+        onSelect={(val) => {
+          addOperatorsUpdate(val);
+          handleDateOperatorClick(val.datavalue);
+          setInvoiceData(prev => ({ ...prev, EditStatus: true }));
+        }}
+      />
+      {secondDateVisibility && (
+        <DateTimePicker
+          value={secondDate}
+          mode="date"
+          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          onChange={handleSecondDateChange}
+        />
+      )}
+    </View>
+  );
+
+  const renderInputField = () => {
+    switch (type) {
+      case 'text':
+      case 'mobile':
+        return renderTextInputField();
+      case 'number':
+        return renderNumberInputField();
+      case 'select':
+        return renderSelectField();
+      case 'date':
+        return renderDateField();
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <View style={styles.mainContainer}>
+      <TouchableOpacity
+        onPress={handleButtonClick}
+        style={[
+          styles.filterButton,
+          {
+            backgroundColor: btnBackgroundColor || colors.buttonBackground,
+            borderColor: selected ? colors.selectedBorder : (btnBorderColor || colors.defaultBorder),
+            shadowColor: selected ? colors.selectedBorder : '#000',
+            elevation: selected ? 3 : 1,
+          },
+        ]}
+        activeOpacity={0.7}
+      >
+        <Icons.FontAwesome5
+          name={iconName || 'file'}
+          size={iconSize || 14}
+          color={selected ? colors.selectedIcon : (iconColor || colors.defaultIcon)}
+        />
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.buttonLabel,
+            { color: selected ? colors.selectedText : colors.defaultText },
+          ]}
+        >
+          {label}
+        </Text>
+      </TouchableOpacity>
+      <View style={styles.inputWrapper}>
+        {renderInputField()}
+      </View>
+    </View>
+  );
+};
+
+const OperatorDropdown = ({ options, onSelect }) => (
+  <Menu>
+    <MenuTrigger customStyles={styles.menuTrigger}>
+      <View style={styles.operatorTrigger}>
+        <Icons.FontAwesome5 name="chevron-down" size={14} color={colors.icon} />
+      </View>
+    </MenuTrigger>
+    <MenuOptions customStyles={styles.menuOptions}>
+      <CDropDownList dropdownarray={options} callback={onSelect} />
+    </MenuOptions>
+  </Menu>
+);
+
+// Color constants for consistent theming
+const colors = {
+  buttonBackground: '#f5f5f5',
+  defaultBorder: '#094485',
+  selectedBorder: '#0288d1',
+  defaultIcon: '#094485',
+  selectedIcon: '#0288d1',
+  defaultText: '#094485',
+  selectedText: '#0288d1',
+  placeholder: '#9e9e9e',
+  icon: '#9e9e9e',
+  inputBorder: '#e0e0e0',
+  inputBackground: '#ffffff',
+  menuBackground: '#ffffff',
+  valueText: '#333333',
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    marginVertical: 8,
+    width: 120,
+    alignSelf: 'center',
+    marginHorizontal: 4,
+  },
+  filterButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    alignItems: 'center',
+    borderWidth: 1,
+    height: 60,
+    justifyContent: 'center',
+    backgroundColor: colors.buttonBackground,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  buttonLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginTop: 4,
+  },
+  inputWrapper: {
+    marginTop: 8,
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputField: {
+    height: 40,
+    borderColor: colors.inputBorder,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    width: 90,
+    backgroundColor: colors.inputBackground,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  placeholderText: {
+    color: colors.placeholder,
+    fontSize: 12,
+    flex: 1,
+  },
+  valueText: {
+    color: colors.valueText,
+    fontSize: 12,
+    flex: 1,
+  },
+  clearButton: {
+    padding: 4,
+  },
+  menuOptions: {
+    optionsContainer: {
+      borderRadius: 8,
+      padding: 8,
+      backgroundColor: colors.menuBackground,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      elevation: 3,
+      minWidth: 150,
+    },
+  },
+  menuInputContainer: {
+    width: '100%',
+    padding: 8,
+  },
+  menuInput: {
+    height: 40,
+    borderColor: colors.inputBorder,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    backgroundColor: colors.inputBackground,
+    color: colors.valueText,
+    fontSize: 12,
+  },
+  menuTrigger: {
+    triggerWrapper: {
+      borderWidth: 0,
+      width: 30,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  },
+  operatorTrigger: {
+    width: 30,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  numberInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  numberInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  numberInput: {
+    height: 40,
+    borderColor: colors.inputBorder,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    flex: 1,
+    backgroundColor: colors.inputBackground,
+    color: colors.valueText,
+    fontSize: 12,
+    marginRight: 4,
+  },
+  selectContainer: {
+    height: 40,
+    borderColor: colors.inputBorder,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    width: '100%',
+    backgroundColor: colors.inputBackground,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+});
+
+export default FilterInput;

package/src/Components/HSubHeading.js

@@ -0,0 +1,68 @@
+import React, { memo } from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import HOCIcons from '../HOC/HOCIcons';
+import { normalize } from '../CommonStyle/componentStyle';
+
+function HSubHeading(props) {
+
+    const styles = props.styles != undefined ? props.styles : {
+        'iconname': 'file',
+        'bgcolor': '#f2efef',
+        'iconsize': 18,
+        'iconcolor': 'black',
+        'displaytext': 'Testing',
+        'textsize': 15,
+        'textcolor': 'darkblue',
+    };
+
+    return (
+        <TouchableOpacity
+            onPress={() => props.callBack(true)}
+            style={{
+                backgroundColor: styles.bgcolor != undefined ? styles.bgcolor : '#f2efef',
+                paddingVertical: 3,
+                paddingHorizontal: 6,
+                marginTop: 3,
+                marginBottom: 2,
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                elevation: 5,
+                borderWidth: 0.5,
+                borderColor: 'lightgrey',
+                width: '88%',
+                alignSelf: 'center',
+            }}>
+            <TouchableOpacity
+                onPress={() => props.Expand != undefined ? props.Expand(1) : null}
+                disabled={props.Expand != undefined ? false : true}
+                style={{ width: normalize(20), alignItems: 'center', marginRight: 5 }}
+            >
+                <HOCIcons.Icons
+                    icongroup={styles.icongroup ? styles.icongroup : 5}
+                    name={styles.iconname}
+                    color={styles.iconcolor}
+                    size={normalize(styles.iconsize)}
+                />
+            </TouchableOpacity>
+
+            <Text
+                style={{
+                    textShadowRadius: 2,
+                    fontSize: normalize(styles.textsize),
+                    fontWeight: 'bold',
+                    color: styles.textcolor,
+                    flex: 1,
+                }}>
+                {styles.displaytext}
+            </Text>
+
+            {/* <View style={{ flexDirection: 'row', width: normalize(60), justifyContent: 'space-around' }}>
+                {props.children}
+            </View> */}
+        </TouchableOpacity>
+    );
+}
+
+export default memo(HSubHeading);

package/src/Components/HeaderCard.js

@@ -0,0 +1,40 @@
+import { View, Text, Dimensions } from 'react-native';
+import React from 'react';
+import { normalize } from '../CommonStyle/componentStyle';
+
+const HeaderCard = ({ suppliername, invoicenumber }) => {
+    return (
+        <View style={{
+            backgroundColor: '#fff',
+            padding: 10,
+            borderRadius: 10,
+            shadowColor: '#000',
+            shadowOpacity: 0.1,
+            shadowRadius: 5,
+            elevation: 3,
+            marginVertical: 5,
+            marginHorizontal: 5,
+            // width: Dimensions.get('screen').width * 0.92,
+            borderLeftWidth: 3,
+            borderLeftColor: '#094485',
+        }}>
+            {suppliername != undefined && suppliername != null && suppliername != '' ||
+                invoicenumber != undefined && invoicenumber != null && invoicenumber != '' ?
+                <View style={{ padding: 5 }}>
+                    {suppliername != undefined && suppliername != null && suppliername != ''
+                        ? <Text style={{
+                            fontWeight: 'bold', marginLeft: normalize(5), fontSize: normalize(14),
+                            color: '#094485', marginHorizontal: normalize(5),
+
+                        }}>{suppliername}</Text> : null}
+                    {invoicenumber != undefined && invoicenumber != null && invoicenumber != ''
+                        ? <Text style={{
+                            fontWeight: 'bold', marginLeft: normalize(5), fontSize: normalize(12),
+                            color: '#333', marginHorizontal: normalize(5),
+                        }}>{invoicenumber}</Text> : null}
+                </View> : null}
+        </View>
+    );
+};
+
+export default HeaderCard;