aport-tools 4.2.5 → 4.2.7

package/dist/forms/InputAttach.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface InputAttachProps {
+    name: string;
+    type?: string[];
+    amount?: number;
+    disabled?: boolean;
+    placeholder?: string;
+}
+declare const InputAttach: React.FC<InputAttachProps>;
+export default InputAttach;

package/dist/forms/index.d.ts

@@ -4,3 +4,4 @@ export { default as TextArea } from './TextArea';
 export { default as Label } from './Label';
 export { default as ErrorList } from './ErrorList';
 export { InputList } from './InputList';
+export { default as InputAttach } from './InputAttach';

package/dist/index.esm.js

@@ -1,7 +1,8 @@
-/*! aport-tools v4.2.5 | ISC */
+/*! aport-tools v4.2.7 | ISC */
 import React, { useContext, useState, createContext, useCallback, useMemo } from 'react';
-import { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, Modal, Pressable, FlatList, Keyboard, ActivityIndicator, Platform } from 'react-native';
+import { StyleSheet, Text as Text$1, View, TextInput, TouchableOpacity, Modal, Pressable, FlatList, Keyboard, Image, Alert, ActivityIndicator, Platform } from 'react-native';
 import { ThemeContext } from 'aport-themes';
+import * as ImagePicker from 'expo-image-picker';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -230,23 +231,23 @@ var ErrorList = function ErrorList(_a) {
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$6.container
+    style: styles$7.container
   }, errors.map(function (error, index) {
     return /*#__PURE__*/React.createElement(View, {
       key: index,
-      style: styles$6.errorItem
+      style: styles$7.errorItem
     }, /*#__PURE__*/React.createElement(Text, {
-      style: [styles$6.bullet, {
+      style: [styles$7.bullet, {
         color: colors.error.hex
       }]
     }, "\u2022"), /*#__PURE__*/React.createElement(Text, {
-      style: [styles$6.errorText, {
+      style: [styles$7.errorText, {
         color: colors.error.hex
       }]
     }, error));
   }));
 };
-var styles$6 = StyleSheet.create({
+var styles$7 = StyleSheet.create({
   container: {
     marginTop: 4
   },
@@ -324,13 +325,13 @@ var Input = function Input(_a) {
     setFormValue(name, formattedText);
   };
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$5.container
+    style: styles$6.container
   }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles$5.label, {
+    style: [styles$6.label, {
       color: colors.text.hex
     }]
   }, label), /*#__PURE__*/React.createElement(TextInput, __assign({
-    style: [styles$5.input, {
+    style: [styles$6.input, {
       backgroundColor: colors.body.hex,
       borderColor: formErrors[name] ? colors.error.hex : "#CCC",
       color: colors.text.hex
@@ -343,7 +344,7 @@ var Input = function Input(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$5 = StyleSheet.create({
+var styles$6 = StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -374,11 +375,11 @@ var TextArea = function TextArea(_a) {
     setFormValue(name, text);
   };
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$4.container
+    style: styles$5.container
   }, /*#__PURE__*/React.createElement(Text, {
-    style: styles$4.label
+    style: styles$5.label
   }, label), /*#__PURE__*/React.createElement(TextInput, __assign({
-    style: [styles$4.textArea, style],
+    style: [styles$5.textArea, style],
     value: formValues[name] || '',
     onChangeText: handleChange,
     placeholder: label,
@@ -391,7 +392,7 @@ var TextArea = function TextArea(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$4 = StyleSheet.create({
+var styles$5 = StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -420,12 +421,12 @@ var Label = function Label(_a) {
   var theme = useContext(ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(Text, {
-    style: [styles$3.label, style, {
+    style: [styles$4.label, style, {
       color: colors.text.hex
     }]
   }, text);
 };
-var styles$3 = StyleSheet.create({
+var styles$4 = StyleSheet.create({
   label: {
     marginBottom: 4,
     fontWeight: '500'
@@ -538,9 +539,9 @@ var InputList = function InputList(_a) {
     });
   };
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$2.container, style]
+    style: [styles$3.container, style]
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: styles$2.inputContainer,
+    style: styles$3.inputContainer,
     onPress: toggleDropdown,
     disabled: disabled
   }, /*#__PURE__*/React.createElement(Text$1, {
@@ -552,10 +553,10 @@ var InputList = function InputList(_a) {
     transparent: true,
     animationType: "fade"
   }, /*#__PURE__*/React.createElement(Pressable, {
-    style: styles$2.overlay,
+    style: styles$3.overlay,
     onPress: handleCloseDropdown
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$2.dropdownContainer, {
+    style: [styles$3.dropdownContainer, {
       backgroundColor: colors.body.hex
     }]
   }, /*#__PURE__*/React.createElement(FlatList, {
@@ -573,27 +574,29 @@ var InputList = function InputList(_a) {
         onPress: function onPress() {
           return handleSelectOption(item);
         },
-        style: [styles$2.optionItem, isSelected ? {
+        style: [styles$3.optionItem, isSelected ? {
           backgroundColor: colors.primary.hex
-        } : {}, isDisabled ? styles$2.disabledItem : {}],
+        } : {}, isDisabled ? {
+          backgroundColor: colors.placeHolder.hex
+        } : {}],
         disabled: !!isDisabled
       }, /*#__PURE__*/React.createElement(Text$1, {
         style: [isSelected ? {
           color: colors.background.hex
         } : {
           color: colors.text.hex
-        }, isDisabled ? styles$2.disabledText : {}]
+        }, isDisabled ? styles$3.disabledText : {}]
       }, item.label));
     },
     ItemSeparatorComponent: function ItemSeparatorComponent() {
       return separator ? /*#__PURE__*/React.createElement(View, {
-        style: styles$2.separator
+        style: styles$3.separator
       }) : null;
     },
     scrollEnabled: !closeOnScroll
   }))));
 };
-var styles$2 = StyleSheet.create({
+var styles$3 = StyleSheet.create({
   container: {
     padding: 8
   },
@@ -617,9 +620,6 @@ var styles$2 = StyleSheet.create({
   optionItem: {
     padding: 12
   },
-  disabledItem: {
-    backgroundColor: '#f0f0f0'
-  },
   disabledText: {
     color: '#999'
   },
@@ -634,6 +634,175 @@ var styles$2 = StyleSheet.create({
   }
 });
 
+// src/components/InputAttach.tsx
+var InputAttach = function InputAttach(_a) {
+  var name = _a.name,
+    _b = _a.type,
+    type = _b === void 0 ? ["png", "jpg", "jpeg"] : _b,
+    _c = _a.amount,
+    amount = _c === void 0 ? 1 : _c,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
+    _e = _a.placeholder,
+    placeholder = _e === void 0 ? "Upload an image" : _e;
+  var _f = useFormContext(),
+    setFormValue = _f.setFormValue;
+    _f.formValues;
+    var errors = _f.errors;
+  var _g = useState([]),
+    selectedFiles = _g[0],
+    setSelectedFiles = _g[1];
+  var pickImage = function pickImage() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var permissionResult, result, selectedAssets, newFiles, invalidFiles, updatedFiles;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (disabled) return [2 /*return*/];
+            return [4 /*yield*/, ImagePicker.requestMediaLibraryPermissionsAsync()];
+          case 1:
+            permissionResult = _a.sent();
+            if (!permissionResult.granted) {
+              Alert.alert("Permission Required", "We need access to your photos to upload images.");
+              return [2 /*return*/];
+            }
+            return [4 /*yield*/, ImagePicker.launchImageLibraryAsync({
+              mediaTypes: ImagePicker.MediaTypeOptions.Images,
+              allowsMultipleSelection: amount > 1,
+              quality: 1
+            })];
+          case 2:
+            result = _a.sent();
+            if (!result.canceled) {
+              selectedAssets = result.assets || [result];
+              newFiles = selectedAssets.map(function (asset) {
+                return {
+                  uri: asset.uri,
+                  name: asset.fileName || "unknown.jpg",
+                  type: asset.mimeType || "image/jpeg"
+                };
+              });
+              invalidFiles = newFiles.filter(function (file) {
+                return !type.some(function (ext) {
+                  return file.name.toLowerCase().endsWith(ext);
+                });
+              });
+              if (invalidFiles.length > 0) {
+                Alert.alert("Invalid File Type", "Please upload files of type: ".concat(type.join(", ")));
+                return [2 /*return*/];
+              }
+              // Check max amount
+              if (selectedFiles.length + newFiles.length > amount) {
+                Alert.alert("Limit Exceeded", "You can upload up to ".concat(amount, " files."));
+                return [2 /*return*/];
+              }
+              updatedFiles = __spreadArray(__spreadArray([], selectedFiles, true), newFiles, true).slice(0, amount);
+              setSelectedFiles(updatedFiles);
+              setFormValue(name, updatedFiles); // Update form context
+            }
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
+  var removeFile = function removeFile(index) {
+    var updatedFiles = selectedFiles.filter(function (_, i) {
+      return i !== index;
+    });
+    setSelectedFiles(updatedFiles);
+    setFormValue(name, updatedFiles); // Update form context
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$2.container
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    style: styles$2.label
+  }, placeholder), /*#__PURE__*/React.createElement(View, {
+    style: styles$2.fileContainer
+  }, selectedFiles.map(function (file, index) {
+    return /*#__PURE__*/React.createElement(View, {
+      key: index,
+      style: styles$2.fileItem
+    }, /*#__PURE__*/React.createElement(Image, {
+      source: {
+        uri: file.uri
+      },
+      style: styles$2.imagePreview
+    }), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: function onPress() {
+        return removeFile(index);
+      },
+      style: styles$2.removeButton
+    }, /*#__PURE__*/React.createElement(Text$1, {
+      style: styles$2.removeButtonText
+    }, "X")));
+  }), selectedFiles.length < amount && (/*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: pickImage,
+    style: styles$2.addButton,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text$1, {
+    style: styles$2.addButtonText
+  }, "+")))), errors[name] && /*#__PURE__*/React.createElement(Text$1, {
+    style: styles$2.error
+  }, errors[name].join(", ")));
+};
+var styles$2 = StyleSheet.create({
+  container: {
+    marginVertical: 10
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 5,
+    color: "#333"
+  },
+  fileContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10
+  },
+  fileItem: {
+    position: "relative",
+    width: 100,
+    height: 100,
+    marginRight: 10
+  },
+  imagePreview: {
+    width: "100%",
+    height: "100%",
+    borderRadius: 5
+  },
+  removeButton: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    backgroundColor: "red",
+    width: 20,
+    height: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 10
+  },
+  removeButtonText: {
+    color: "#fff",
+    fontWeight: "bold"
+  },
+  addButton: {
+    width: 100,
+    height: 100,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0",
+    borderRadius: 5
+  },
+  addButtonText: {
+    fontSize: 24,
+    color: "#aaa"
+  },
+  error: {
+    color: "red",
+    marginTop: 5
+  }
+});
+
 // src/components/Button.tsx
 /**
  * Determines the styles based on the button type and whether it is disabled.
@@ -812,5 +981,5 @@ var styles = StyleSheet.create({
   }
 });
 
-export { Button, Card, ErrorList, Form, Input, InputList, Label, Text, TextArea, useFormContext };
+export { Button, Card, ErrorList, Form, Input, InputAttach, InputList, Label, Text, TextArea, useFormContext };
 //# sourceMappingURL=index.esm.js.map