aport-tools 4.4.13 → 4.4.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/forms/InputList.d.ts +4 -0
- package/dist/forms/TextArea.d.ts +4 -0
- package/dist/index.esm.js +70 -34
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +70 -34
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
@@ -11,6 +11,10 @@ interface InputListProps {
|
|
11
11
|
* @type {string}
|
12
12
|
* @default "Choose value/s"
|
13
13
|
*/
|
14
|
+
/**
|
15
|
+
* Optional first value if you want to set values with fetch or dont have empty inputs.
|
16
|
+
*/
|
17
|
+
firstValue?: any[];
|
14
18
|
placeholder?: string;
|
15
19
|
/**
|
16
20
|
* Custom styles for the component.
|
package/dist/forms/TextArea.d.ts
CHANGED
@@ -2,6 +2,10 @@ import React from 'react';
|
|
2
2
|
import { TextInputProps } from 'react-native';
|
3
3
|
interface TextAreaProps extends TextInputProps {
|
4
4
|
name: string;
|
5
|
+
/**
|
6
|
+
* Optional first value if you want to set values with fetch or dont have empty inputs.
|
7
|
+
*/
|
8
|
+
firstValue?: string;
|
5
9
|
label: string;
|
6
10
|
errors?: string[];
|
7
11
|
}
|
package/dist/index.esm.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! aport-tools v4.4.
|
1
|
+
/*! aport-tools v4.4.14 | ISC */
|
2
2
|
import React, { useContext, useState, createContext, useEffect, useCallback, useMemo } from 'react';
|
3
3
|
import { StyleSheet, Text as Text$1, Animated, View, TouchableOpacity, Image, TextInput, Modal, Pressable, FlatList, Keyboard, Platform, Alert, ActivityIndicator } from 'react-native';
|
4
4
|
import { ThemeContext } from 'aport-themes';
|
@@ -611,15 +611,29 @@ var TextArea = function TextArea(_a) {
|
|
611
611
|
var name = _a.name,
|
612
612
|
label = _a.label;
|
613
613
|
_a.errors;
|
614
|
-
var
|
615
|
-
|
614
|
+
var firstValue = _a.firstValue,
|
615
|
+
style = _a.style,
|
616
|
+
rest = __rest(_a, ["name", "label", "errors", "firstValue", "style"]);
|
616
617
|
var _b = useFormContext(),
|
617
618
|
formValues = _b.formValues,
|
618
619
|
setFormValue = _b.setFormValue,
|
619
620
|
formErrors = _b.errors;
|
620
621
|
var theme = useContext(ThemeContext).theme;
|
621
622
|
var colors = theme.colors;
|
623
|
+
var _c = useState(""),
|
624
|
+
internalValue = _c[0],
|
625
|
+
setInternalValue = _c[1];
|
626
|
+
// Initialize the internal value based on `firstValue` or `formValues`
|
627
|
+
useEffect(function () {
|
628
|
+
if (firstValue) {
|
629
|
+
setInternalValue(firstValue);
|
630
|
+
setFormValue(name, firstValue);
|
631
|
+
} else {
|
632
|
+
setInternalValue(formValues[name] || "");
|
633
|
+
}
|
634
|
+
}, [firstValue, formValues[name]]);
|
622
635
|
var handleChange = function handleChange(text) {
|
636
|
+
setInternalValue(text);
|
623
637
|
setFormValue(name, text);
|
624
638
|
};
|
625
639
|
return /*#__PURE__*/React.createElement(View, {
|
@@ -634,7 +648,7 @@ var TextArea = function TextArea(_a) {
|
|
634
648
|
color: colors.text.hex,
|
635
649
|
borderColor: formErrors[name] ? colors.error.hex : "#CCC"
|
636
650
|
}],
|
637
|
-
value:
|
651
|
+
value: internalValue,
|
638
652
|
onChangeText: handleChange,
|
639
653
|
placeholder: label,
|
640
654
|
placeholderTextColor: colors.placeHolder.hex,
|
@@ -706,27 +720,39 @@ var InputList = function InputList(_a) {
|
|
706
720
|
_d = _a.disabled,
|
707
721
|
disabled = _d === void 0 ? false : _d,
|
708
722
|
sortBy = _a.sortBy,
|
709
|
-
_e = _a.
|
710
|
-
|
711
|
-
_f = _a.
|
712
|
-
|
713
|
-
_g = _a.
|
714
|
-
|
723
|
+
_e = _a.firstValue,
|
724
|
+
firstValue = _e === void 0 ? [] : _e,
|
725
|
+
_f = _a.separator,
|
726
|
+
separator = _f === void 0 ? false : _f,
|
727
|
+
_g = _a.closeOnScroll,
|
728
|
+
closeOnScroll = _g === void 0 ? false : _g,
|
729
|
+
_h = _a.closeOnSelect,
|
730
|
+
closeOnSelect = _h === void 0 ? true : _h,
|
715
731
|
maxSelection = _a.maxSelection,
|
716
732
|
onChange = _a.onChange;
|
717
|
-
var
|
718
|
-
|
719
|
-
setFormValue =
|
720
|
-
formErrors =
|
721
|
-
var
|
722
|
-
isDropdownVisible =
|
723
|
-
setIsDropdownVisible =
|
724
|
-
var selectedOptions = formValues[name] || (multi ? [] : null);
|
733
|
+
var _j = useFormContext();
|
734
|
+
_j.formValues;
|
735
|
+
var setFormValue = _j.setFormValue,
|
736
|
+
formErrors = _j.errors;
|
737
|
+
var _k = useState(false),
|
738
|
+
isDropdownVisible = _k[0],
|
739
|
+
setIsDropdownVisible = _k[1];
|
725
740
|
var sortedOptions = sortBy ? __spreadArray([], options, true).sort(function (a, b) {
|
726
741
|
return a[sortBy] > b[sortBy] ? 1 : -1;
|
727
742
|
}) : options;
|
728
743
|
var theme = useContext(ThemeContext).theme;
|
729
744
|
var colors = theme.colors;
|
745
|
+
// Initialize selected options based on firstValue
|
746
|
+
var initialSelections = options.filter(function (opt) {
|
747
|
+
return firstValue.includes(opt.value);
|
748
|
+
});
|
749
|
+
var _l = useState(multi ? initialSelections : initialSelections[0] || null),
|
750
|
+
selectedOptions = _l[0];
|
751
|
+
_l[1];
|
752
|
+
// Update form value on mount if firstValue is provided
|
753
|
+
useEffect(function () {
|
754
|
+
setFormValue(name, multi ? initialSelections : initialSelections[0] || null);
|
755
|
+
}, [firstValue]);
|
730
756
|
/**
|
731
757
|
* Handles selection of an option. Adds or removes the option from selectedOptions based on
|
732
758
|
* multi-selection and maxSelection criteria.
|
@@ -735,17 +761,20 @@ var InputList = function InputList(_a) {
|
|
735
761
|
var handleSelectOption = function handleSelectOption(option) {
|
736
762
|
var updatedSelections;
|
737
763
|
if (multi) {
|
738
|
-
|
764
|
+
// Ensure selectedOptions is treated as an array
|
765
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
766
|
+
var alreadySelected = selectedArray.some(function (opt) {
|
739
767
|
return opt.id === option.id;
|
740
768
|
});
|
741
|
-
updatedSelections = alreadySelected ?
|
769
|
+
updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
|
742
770
|
return opt.id !== option.id;
|
743
|
-
}) : __spreadArray(__spreadArray([],
|
771
|
+
}) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
|
744
772
|
if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
|
745
773
|
setIsDropdownVisible(false);
|
746
774
|
}
|
747
775
|
setFormValue(name, updatedSelections);
|
748
776
|
} else {
|
777
|
+
// Handle single-selection case
|
749
778
|
updatedSelections = option;
|
750
779
|
setFormValue(name, option);
|
751
780
|
if (closeOnSelect) setIsDropdownVisible(false);
|
@@ -755,14 +784,26 @@ var InputList = function InputList(_a) {
|
|
755
784
|
onChange(updatedSelections);
|
756
785
|
}
|
757
786
|
};
|
787
|
+
var isItemDisabled = function isItemDisabled(option) {
|
788
|
+
if (!multi) return false; // Disable check only applies for multi-select
|
789
|
+
// Ensure selectedOptions is treated as an array
|
790
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
791
|
+
return maxSelection && selectedArray.length >= maxSelection && !selectedArray.some(function (opt) {
|
792
|
+
return opt.id === option.id;
|
793
|
+
});
|
794
|
+
};
|
758
795
|
/**
|
759
|
-
|
760
|
-
|
761
|
-
|
796
|
+
* Renders selected options as a comma-separated string or the placeholder if none selected.
|
797
|
+
* @returns {string} - The display text for selected options or placeholder.
|
798
|
+
*/
|
762
799
|
var renderSelectedText = function renderSelectedText() {
|
763
|
-
if (multi)
|
764
|
-
|
765
|
-
|
800
|
+
if (multi) {
|
801
|
+
// Ensure selectedOptions is treated as an array
|
802
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
803
|
+
return selectedArray.map(function (opt) {
|
804
|
+
return opt.label;
|
805
|
+
}).join(', ') || placeholder;
|
806
|
+
}
|
766
807
|
return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
|
767
808
|
};
|
768
809
|
/**
|
@@ -781,11 +822,6 @@ var InputList = function InputList(_a) {
|
|
781
822
|
if (isDropdownVisible) setIsDropdownVisible(false);
|
782
823
|
}, [isDropdownVisible]);
|
783
824
|
// Conditionally render item as disabled if max selection reached and item is unselected
|
784
|
-
var isItemDisabled = function isItemDisabled(option) {
|
785
|
-
return multi && maxSelection && selectedOptions.length >= maxSelection && !selectedOptions.some(function (opt) {
|
786
|
-
return opt.id === option.id;
|
787
|
-
});
|
788
|
-
};
|
789
825
|
return /*#__PURE__*/React.createElement(View, {
|
790
826
|
style: [styles$4.container, style]
|
791
827
|
}, /*#__PURE__*/React.createElement(Text$1, {
|
@@ -823,9 +859,9 @@ var InputList = function InputList(_a) {
|
|
823
859
|
},
|
824
860
|
renderItem: function renderItem(_a) {
|
825
861
|
var item = _a.item;
|
826
|
-
var isSelected = multi ? selectedOptions.some(function (opt) {
|
862
|
+
var isSelected = multi ? Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
|
827
863
|
return opt.id === item.id;
|
828
|
-
}) :
|
864
|
+
}) : selectedOptions && 'id' in selectedOptions && selectedOptions.id === item.id;
|
829
865
|
var isDisabled = isItemDisabled(item);
|
830
866
|
return /*#__PURE__*/React.createElement(TouchableOpacity, {
|
831
867
|
onPress: function onPress() {
|