aport-tools 4.5.2 → 4.6.0

package/src/forms/InputCheck.tsx

@@ -0,0 +1,169 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { useFormContext } from "../forms/FormContext";
+import { Image, StyleSheet, FlatList } from "react-native";
+import { ThemeContext } from "aport-themes";
+import { Text } from "../fonts";
+import { Card } from "../cards";
+import ErrorList from "./ErrorList";
+
+interface InputOption {
+  id: string;
+  label?: string;
+  icon?: string;
+  value: string;
+}
+
+interface InputCheckProps {
+  name: string;
+  options: InputOption[]; // Use the shared interface
+  multi?: boolean; // Allows multiple selection (checkbox behavior)
+  max?: number; // Maximum number of selections
+  rowAmount?: number; // Number of items per row
+  iconPosition?: "row" | "column"; // Icon and label layout
+  disabled?: boolean; // Disable the input
+  firstValue?: InputOption[]; // Use the shared interface
+}
+
+const InputCheck: React.FC<InputCheckProps> = ({
+  name,
+  options,
+  multi = false,
+  max,
+  rowAmount = 3,
+  firstValue,
+  iconPosition = "row",
+  disabled = false,
+}) => {
+  const { formValues, setFormValue, errors: formErrors } = useFormContext();
+  const [selectedValues, setSelectedValues] = useState<InputOption[]>([]);
+  const { theme } = useContext(ThemeContext);
+  const { colors } = theme;
+  const isFirstRender = useRef(true);
+
+  // Initialize selectedValues on first render if firstValue is provided
+  useEffect(() => {
+    if (isFirstRender.current && firstValue) {
+      const initialSelectedValues = options.filter((option) =>
+        firstValue.some((fv) => fv.value === option.value)
+      );
+
+      setSelectedValues(initialSelectedValues);
+      setFormValue(name, initialSelectedValues, initialSelectedValues); // Update form context
+      isFirstRender.current = false; // Prevent subsequent updates
+    }
+  }, [firstValue, name, options, setFormValue]);
+
+  const handleSelect = (id: string, value: string) => {
+    if (disabled) return;
+
+    let updatedSelection;
+    if (multi) {
+      const alreadySelected = selectedValues.find((item) => item.id === id);
+      if (alreadySelected) {
+        updatedSelection = selectedValues.filter((item) => item.id !== id);
+      } else {
+        if (max && selectedValues.length >= max) return; // Prevent selection beyond max
+        updatedSelection = [...selectedValues, { id, value }];
+      }
+    } else {
+      updatedSelection = [{ id, value }];
+    }
+
+    setSelectedValues(updatedSelection);
+    setFormValue(name, updatedSelection);
+  };
+
+  const renderItem = ({ item }: { item: InputOption }) => {
+    const isSelected = selectedValues.some(
+      (selected) => selected.id === item.id.toString()
+    );
+
+    return (
+      <Card
+        pressable
+        onPress={() => handleSelect(item.id.toString(), item.value)}
+        style={[
+          styles.card,
+          isSelected && { backgroundColor: colors.primary.hex }, // Replace with colors.primary.hex if available
+          disabled && styles.cardDisabled,
+        ]}
+      >
+        {item.icon && (
+          <Image
+            source={{ uri: item.icon }}
+            style={[
+              styles.icon,
+              iconPosition === "column" && styles.iconColumn,
+            ]}
+          />
+        )}
+        {item.label && (
+          <Text
+            style={[
+              styles.label,
+              { color: isSelected ? colors.textButton.hex : colors.text.hex },
+            ]}
+          >
+            {item.label}
+          </Text>
+        )}
+      </Card>
+    );
+  };
+
+  return (
+    <>
+      {/* Display the name as a title */}
+      <Text style={styles.title}>{name}</Text>
+
+      <FlatList
+        data={options}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        numColumns={rowAmount}
+        columnWrapperStyle={rowAmount > 1 ? styles.row : undefined}
+        scrollEnabled={false}
+      />
+      {formErrors[name] && formErrors[name].length > 0 && (
+        <ErrorList errors={formErrors[name]} />
+      )}
+    </>
+  );
+};
+
+export default InputCheck;
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    margin: 5,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  title: {
+    marginBottom: 4,
+    fontSize: 14,
+  },
+  cardDisabled: {
+    opacity: 0.5,
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    marginBottom: 5,
+  },
+  iconColumn: {
+    marginBottom: 10,
+  },
+  label: {
+    fontSize: 14,
+    textAlign: "center",
+  },
+  row: {
+    justifyContent: "space-between",
+  },
+});

package/src/forms/InputList.tsx

@@ -0,0 +1,304 @@
+import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
+import { View, Text, TouchableOpacity, FlatList, StyleSheet, Modal, Pressable, Keyboard } from 'react-native';
+import { ThemeContext } from "aport-themes";
+import { useFormContext } from '../forms/FormContext';
+import ErrorList from "./ErrorList";
+
+interface Option {
+  id: number | string;
+  label: string;
+  value: any;
+}
+
+interface InputListProps {
+    name: string;
+  /**
+   * Placeholder text displayed in the input box when no selection is made.
+   * @type {string}
+   * @default "Choose value/s"
+   */
+
+  /**
+   * Optional first value if you want to set values with fetch or dont have empty inputs.
+   */
+  firstValue?: any[]; // Optional prop for the initial value
+
+  placeholder?: string;
+  
+  /**
+   * Custom styles for the component.
+   * @type {object}
+   */
+  style?: object;
+
+  /**
+   * Array of options to display in the dropdown. Each option should have an id, label, and value.
+   * @type {Option[]}
+   */
+  options: Option[];
+
+  /**
+   * Enables multi-selection mode when true. If enabled, users can select multiple values.
+   * @type {boolean}
+   * @default false
+   */
+  multi?: boolean;
+
+  /**
+   * Disables the dropdown input when true.
+   * @type {boolean}
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Key used to sort options in the dropdown (e.g., by 'id', 'label').
+   * @type {keyof Option}
+   */
+  sortBy?: keyof Option;
+
+  /**
+   * If true, displays a separator line between each option.
+   * @type {boolean}
+   * @default false
+   */
+  separator?: boolean;
+
+  /**
+   * Closes the dropdown if the user scrolls the list.
+   * @type {boolean}
+   * @default false
+   */
+  closeOnScroll?: boolean;
+
+  /**
+   * Closes the dropdown after selecting an item if true (only relevant when multi is false).
+   * @type {boolean}
+   * @default true
+   */
+  closeOnSelect?: boolean;
+
+  /**
+   * Limits the maximum number of items that can be selected when multi is true.
+   * Once the limit is reached, the dropdown closes, and no further selections can be made until
+   * an item is deselected.
+   * @type {number}
+   */
+  maxSelection?: number;
+
+  /**
+   * Callback function called when the selection changes. Useful for conditional field enabling.
+   * @param {Option | Option[] | null} selection - The updated selection.
+   */
+  onChange?: (selection: Option | Option[] | null) => void;
+}
+
+/**
+ * InputList component - A custom dropdown list component for React Native with multi-selection support,
+ * customizable styling, sorting, and configurable close behavior on selection or scrolling.
+ *
+ * @param {string} placeholder - Placeholder text for the input.
+ * @param {object} style - Custom styles for the component.
+ * @param {Option[]} options - Array of options to display in the dropdown.
+ * @param {boolean} multi - Enables multi-selection mode.
+ * @param {boolean} disabled - Disables the dropdown input.
+ * @param {keyof Option} sortBy - Key to sort options by (e.g., 'id').
+ * @param {boolean} separator - If true, adds a separator line between options.
+ * @param {boolean} closeOnScroll - Closes the dropdown if the user scrolls the list.
+ * @param {boolean} closeOnSelect - Closes the dropdown on selection in single-select mode.
+ * @param {number} maxSelection - Maximum number of items selectable in multi-select mode.
+ */
+export const InputList: React.FC<InputListProps> = ({
+  name,
+  placeholder = "Choose value/s",
+  style,
+  options,
+  multi = false,
+  disabled = false,
+  sortBy,
+  firstValue = [],
+  separator = false,
+  closeOnScroll = false,
+  closeOnSelect = true,
+  maxSelection,
+  onChange,
+}) => {
+  const { formValues, setFormValue, errors: formErrors } = useFormContext();
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+
+// Memoize sorted options for performance
+const sortedOptions = useMemo(() => {
+  return sortBy
+    ? [...options].sort((a, b) => (a[sortBy] > b[sortBy] ? 1 : -1))
+    : options;
+}, [options, sortBy]);  
+const { theme } = useContext(ThemeContext);
+  const { colors } = theme;
+
+  // Initialize selected options based on firstValue
+ // Filter initial selections from options based on `firstValue`
+ const initialSelections = useMemo(
+  () => options.filter((opt) => firstValue.includes(opt.value)),
+  [options, firstValue]
+);
+  // State for selected options
+  const [selectedOptions, setSelectedOptions] = useState(
+    multi ? initialSelections : initialSelections[0] || null
+  );
+  // Update form value when firstValue changes
+  useEffect(() => {
+    if (!firstValue || firstValue.length === 0) return;
+  
+    const matchedSelections = options.filter((opt) => firstValue.includes(opt.value));
+  
+    if (multi) {
+      setSelectedOptions(matchedSelections);
+      setFormValue(name, matchedSelections, matchedSelections);
+    } else {
+      const singleValue = matchedSelections[0] || null;
+      setSelectedOptions(singleValue);
+      setFormValue(name, singleValue, singleValue);
+    }
+  }, [firstValue, multi]);
+  
+
+ // Handle option selection
+ const handleSelectOption = (option: Option) => {
+
+  let updatedSelections;
+
+  if (multi) {
+    const selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+    const alreadySelected = selectedArray.some((opt) => opt.id === option.id);
+
+    updatedSelections = alreadySelected
+      ? selectedArray.filter((opt) => opt.id !== option.id)
+      : [...selectedArray, option];
+
+    if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
+      setIsDropdownVisible(false);
+    }
+
+    setFormValue(name, updatedSelections);
+  } else {
+    updatedSelections = option;
+    setFormValue(name, option);
+    if (closeOnSelect) setIsDropdownVisible(false);
+  }
+
+  setSelectedOptions(updatedSelections);
+  if (onChange) onChange(updatedSelections);
+};
+  
+  const isItemDisabled = (option: Option) => {
+    if (!multi) return false; // Disable check only applies for multi-select
+  
+    // Ensure selectedOptions is treated as an array
+    const selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+    return (
+      maxSelection &&
+      selectedArray.length >= maxSelection &&
+      !selectedArray.some((opt) => opt.id === option.id)
+    );
+  };
+  
+  const renderSelectedText = () => {
+    if (multi) {
+      // Ensure selectedOptions is treated as an array
+      const selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
+      return selectedArray.map((opt) => opt.label).join(', ') || placeholder;
+    }
+    return (selectedOptions as Option)?.label || placeholder;
+  };
+  
+
+  const toggleDropdown = () => {
+    if (!disabled) {
+      setIsDropdownVisible(!isDropdownVisible);
+      if (!isDropdownVisible) Keyboard.dismiss();
+    }
+  };
+
+  const handleCloseDropdown = useCallback(() => {
+    if (isDropdownVisible) setIsDropdownVisible(false);
+  }, [isDropdownVisible]);
+
+  /**
+   * Renders selected options as a comma-separated string or the placeholder if none selected.
+   * @returns {string} - The display text for selected options or placeholder.
+   */
+
+
+   // Conditionally render item as disabled if max selection reached and item is unselected
+
+
+  return (
+    <View style={[styles.container, style]}>
+              <Text style={{color: colors.text.hex,marginBottom: 4,
+}}>{name}</Text>
+
+      <TouchableOpacity style={[styles.inputContainer,{borderColor: formErrors[name] ? colors.error.hex : "#CCC",}]} onPress={toggleDropdown} disabled={disabled}>
+        <Text style={{color: colors.text.hex}}>{renderSelectedText()}</Text>
+      </TouchableOpacity>
+      
+       {/* Display errors only if form has been submitted and there are errors */}
+       {formErrors[name] && formErrors[name].length > 0 && (
+        <ErrorList errors={formErrors[name]} />
+      )}
+      <Modal visible={isDropdownVisible} transparent animationType="fade">
+        <Pressable style={styles.overlay} onPress={handleCloseDropdown} />
+        <View style={[styles.dropdownContainer,{backgroundColor: colors.body.hex,
+}]}>
+          <FlatList
+            data={sortedOptions}
+            keyExtractor={(item) => item.id.toString()}
+            renderItem={({ item }) => {
+              const isSelected = multi
+                ? Array.isArray(selectedOptions) && selectedOptions.some((opt: Option) => opt.id === item.id)
+                : selectedOptions && 'id' in selectedOptions && selectedOptions.id === item.id;
+          
+              const isDisabled = isItemDisabled(item);
+
+              return (
+                <TouchableOpacity
+                  onPress={() => handleSelectOption(item)}
+                  style={[
+                    styles.optionItem,
+                    isSelected ? {backgroundColor: colors.primary.hex} : {},
+                    isDisabled ? {backgroundColor: colors.placeHolder.hex} : {},
+                  ]}
+                  disabled={!!isDisabled} // Ensure disabled prop is a boolean
+                  >
+                  <Text style={[isSelected ? {color: colors.body.hex}: {color: colors.text.hex}, isDisabled ? styles.disabledText : {}]}>
+                    {item.label}
+                  </Text>
+                </TouchableOpacity>
+              );
+            }}
+            ItemSeparatorComponent={() => (separator ? <View style={styles.separator} /> : null)}
+            scrollEnabled={!closeOnScroll}
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {marginVertical: 10  },
+  inputContainer: { padding: 12, borderWidth: 1, borderRadius: 5 },
+  dropdownContainer: {
+    position: 'absolute',
+    top: '30%', // Center the dropdown vertically
+    alignSelf: 'center',
+    width: '90%',
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    elevation: 5,
+    paddingVertical: 10,
+  },
+  optionItem: { padding: 12 },
+  disabledText: { color: '#999' },
+  separator: { height: 1, backgroundColor: '#ddd', marginHorizontal: 8 },
+  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.3)' },
+});

package/src/forms/Label.tsx

@@ -0,0 +1,26 @@
+// src/forms/Label.tsx
+
+import React, { useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from '../fonts/Text';
+import { ThemeContext } from 'aport-themes';
+
+interface LabelProps {
+  text: string;
+  style?: any;
+}
+
+const Label: React.FC<LabelProps> = ({ text, style }) => {
+    const { theme } = useContext(ThemeContext);
+    const { colors } = theme;
+  return <Text style={[styles.label, style, { color: colors.text.hex }]}>{text}</Text>;
+};
+
+const styles = StyleSheet.create({
+  label: {
+    marginBottom: 4,
+    fontWeight: '500',
+  },
+});
+
+export default Label;