aport-tools 4.2.5 → 4.2.7

package/dist/index.js

@@ -1,9 +1,29 @@
-/*! aport-tools v4.2.5 | ISC */
+/*! aport-tools v4.2.7 | ISC */
 'use strict';
 
 var React = require('react');
 var reactNative = require('react-native');
 var aportThemes = require('aport-themes');
+var ImagePicker = require('expo-image-picker');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var ImagePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(ImagePicker);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -232,23 +252,23 @@ var ErrorList = function ErrorList(_a) {
   var theme = React.useContext(aportThemes.ThemeContext).theme;
   var colors = theme.colors;
   return /*#__PURE__*/React.createElement(reactNative.View, {
-    style: styles$6.container
+    style: styles$7.container
   }, errors.map(function (error, index) {
     return /*#__PURE__*/React.createElement(reactNative.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 = reactNative.StyleSheet.create({
+var styles$7 = reactNative.StyleSheet.create({
   container: {
     marginTop: 4
   },
@@ -326,13 +346,13 @@ var Input = function Input(_a) {
     setFormValue(name, formattedText);
   };
   return /*#__PURE__*/React.createElement(reactNative.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(reactNative.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
@@ -345,7 +365,7 @@ var Input = function Input(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$5 = reactNative.StyleSheet.create({
+var styles$6 = reactNative.StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -376,11 +396,11 @@ var TextArea = function TextArea(_a) {
     setFormValue(name, text);
   };
   return /*#__PURE__*/React.createElement(reactNative.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(reactNative.TextInput, __assign({
-    style: [styles$4.textArea, style],
+    style: [styles$5.textArea, style],
     value: formValues[name] || '',
     onChangeText: handleChange,
     placeholder: label,
@@ -393,7 +413,7 @@ var TextArea = function TextArea(_a) {
     errors: formErrors[name]
   })));
 };
-var styles$4 = reactNative.StyleSheet.create({
+var styles$5 = reactNative.StyleSheet.create({
   container: {
     marginBottom: 16
   },
@@ -422,12 +442,12 @@ var Label = function Label(_a) {
   var theme = React.useContext(aportThemes.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 = reactNative.StyleSheet.create({
+var styles$4 = reactNative.StyleSheet.create({
   label: {
     marginBottom: 4,
     fontWeight: '500'
@@ -540,9 +560,9 @@ var InputList = function InputList(_a) {
     });
   };
   return /*#__PURE__*/React.createElement(reactNative.View, {
-    style: [styles$2.container, style]
+    style: [styles$3.container, style]
   }, /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
-    style: styles$2.inputContainer,
+    style: styles$3.inputContainer,
     onPress: toggleDropdown,
     disabled: disabled
   }, /*#__PURE__*/React.createElement(reactNative.Text, {
@@ -554,10 +574,10 @@ var InputList = function InputList(_a) {
     transparent: true,
     animationType: "fade"
   }, /*#__PURE__*/React.createElement(reactNative.Pressable, {
-    style: styles$2.overlay,
+    style: styles$3.overlay,
     onPress: handleCloseDropdown
   }), /*#__PURE__*/React.createElement(reactNative.View, {
-    style: [styles$2.dropdownContainer, {
+    style: [styles$3.dropdownContainer, {
       backgroundColor: colors.body.hex
     }]
   }, /*#__PURE__*/React.createElement(reactNative.FlatList, {
@@ -575,27 +595,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(reactNative.Text, {
         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(reactNative.View, {
-        style: styles$2.separator
+        style: styles$3.separator
       }) : null;
     },
     scrollEnabled: !closeOnScroll
   }))));
 };
-var styles$2 = reactNative.StyleSheet.create({
+var styles$3 = reactNative.StyleSheet.create({
   container: {
     padding: 8
   },
@@ -619,9 +641,6 @@ var styles$2 = reactNative.StyleSheet.create({
   optionItem: {
     padding: 12
   },
-  disabledItem: {
-    backgroundColor: '#f0f0f0'
-  },
   disabledText: {
     color: '#999'
   },
@@ -636,6 +655,175 @@ var styles$2 = reactNative.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 = React.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__namespace.requestMediaLibraryPermissionsAsync()];
+          case 1:
+            permissionResult = _a.sent();
+            if (!permissionResult.granted) {
+              reactNative.Alert.alert("Permission Required", "We need access to your photos to upload images.");
+              return [2 /*return*/];
+            }
+            return [4 /*yield*/, ImagePicker__namespace.launchImageLibraryAsync({
+              mediaTypes: ImagePicker__namespace.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) {
+                reactNative.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) {
+                reactNative.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(reactNative.View, {
+    style: styles$2.container
+  }, /*#__PURE__*/React.createElement(reactNative.Text, {
+    style: styles$2.label
+  }, placeholder), /*#__PURE__*/React.createElement(reactNative.View, {
+    style: styles$2.fileContainer
+  }, selectedFiles.map(function (file, index) {
+    return /*#__PURE__*/React.createElement(reactNative.View, {
+      key: index,
+      style: styles$2.fileItem
+    }, /*#__PURE__*/React.createElement(reactNative.Image, {
+      source: {
+        uri: file.uri
+      },
+      style: styles$2.imagePreview
+    }), /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
+      onPress: function onPress() {
+        return removeFile(index);
+      },
+      style: styles$2.removeButton
+    }, /*#__PURE__*/React.createElement(reactNative.Text, {
+      style: styles$2.removeButtonText
+    }, "X")));
+  }), selectedFiles.length < amount && (/*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
+    onPress: pickImage,
+    style: styles$2.addButton,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(reactNative.Text, {
+    style: styles$2.addButtonText
+  }, "+")))), errors[name] && /*#__PURE__*/React.createElement(reactNative.Text, {
+    style: styles$2.error
+  }, errors[name].join(", ")));
+};
+var styles$2 = reactNative.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.
@@ -819,6 +1007,7 @@ exports.Card = Card;
 exports.ErrorList = ErrorList;
 exports.Form = Form;
 exports.Input = Input;
+exports.InputAttach = InputAttach;
 exports.InputList = InputList;
 exports.Label = Label;
 exports.Text = Text;