aport-tools 4.4.13 → 4.4.15
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 +72 -34
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +72 -34
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! aport-tools v4.4.
|
1
|
+
/*! aport-tools v4.4.15 | ISC */
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
var React = require('react');
|
@@ -632,15 +632,29 @@ var TextArea = function TextArea(_a) {
|
|
632
632
|
var name = _a.name,
|
633
633
|
label = _a.label;
|
634
634
|
_a.errors;
|
635
|
-
var
|
636
|
-
|
635
|
+
var firstValue = _a.firstValue,
|
636
|
+
style = _a.style,
|
637
|
+
rest = __rest(_a, ["name", "label", "errors", "firstValue", "style"]);
|
637
638
|
var _b = useFormContext(),
|
638
639
|
formValues = _b.formValues,
|
639
640
|
setFormValue = _b.setFormValue,
|
640
641
|
formErrors = _b.errors;
|
641
642
|
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
642
643
|
var colors = theme.colors;
|
644
|
+
var _c = React.useState(""),
|
645
|
+
internalValue = _c[0],
|
646
|
+
setInternalValue = _c[1];
|
647
|
+
// Initialize the internal value based on `firstValue` or `formValues`
|
648
|
+
React.useEffect(function () {
|
649
|
+
if (firstValue) {
|
650
|
+
setInternalValue(firstValue);
|
651
|
+
setFormValue(name, firstValue);
|
652
|
+
} else {
|
653
|
+
setInternalValue(formValues[name] || "");
|
654
|
+
}
|
655
|
+
}, [firstValue, formValues[name]]);
|
643
656
|
var handleChange = function handleChange(text) {
|
657
|
+
setInternalValue(text);
|
644
658
|
setFormValue(name, text);
|
645
659
|
};
|
646
660
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
@@ -655,7 +669,7 @@ var TextArea = function TextArea(_a) {
|
|
655
669
|
color: colors.text.hex,
|
656
670
|
borderColor: formErrors[name] ? colors.error.hex : "#CCC"
|
657
671
|
}],
|
658
|
-
value:
|
672
|
+
value: internalValue,
|
659
673
|
onChangeText: handleChange,
|
660
674
|
placeholder: label,
|
661
675
|
placeholderTextColor: colors.placeHolder.hex,
|
@@ -727,27 +741,41 @@ var InputList = function InputList(_a) {
|
|
727
741
|
_d = _a.disabled,
|
728
742
|
disabled = _d === void 0 ? false : _d,
|
729
743
|
sortBy = _a.sortBy,
|
730
|
-
_e = _a.
|
731
|
-
|
732
|
-
_f = _a.
|
733
|
-
|
734
|
-
_g = _a.
|
735
|
-
|
744
|
+
_e = _a.firstValue,
|
745
|
+
firstValue = _e === void 0 ? [] : _e,
|
746
|
+
_f = _a.separator,
|
747
|
+
separator = _f === void 0 ? false : _f,
|
748
|
+
_g = _a.closeOnScroll,
|
749
|
+
closeOnScroll = _g === void 0 ? false : _g,
|
750
|
+
_h = _a.closeOnSelect,
|
751
|
+
closeOnSelect = _h === void 0 ? true : _h,
|
736
752
|
maxSelection = _a.maxSelection,
|
737
753
|
onChange = _a.onChange;
|
738
|
-
var
|
739
|
-
|
740
|
-
setFormValue =
|
741
|
-
formErrors =
|
742
|
-
var
|
743
|
-
isDropdownVisible =
|
744
|
-
setIsDropdownVisible =
|
745
|
-
var selectedOptions = formValues[name] || (multi ? [] : null);
|
754
|
+
var _j = useFormContext();
|
755
|
+
_j.formValues;
|
756
|
+
var setFormValue = _j.setFormValue,
|
757
|
+
formErrors = _j.errors;
|
758
|
+
var _k = React.useState(false),
|
759
|
+
isDropdownVisible = _k[0],
|
760
|
+
setIsDropdownVisible = _k[1];
|
746
761
|
var sortedOptions = sortBy ? __spreadArray([], options, true).sort(function (a, b) {
|
747
762
|
return a[sortBy] > b[sortBy] ? 1 : -1;
|
748
763
|
}) : options;
|
749
764
|
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
750
765
|
var colors = theme.colors;
|
766
|
+
// Initialize selected options based on firstValue
|
767
|
+
var initialSelections = options.filter(function (opt) {
|
768
|
+
return firstValue.includes(opt.value);
|
769
|
+
});
|
770
|
+
var _l = React.useState(multi ? initialSelections : initialSelections[0] || null),
|
771
|
+
selectedOptions = _l[0],
|
772
|
+
setSelectedOptions = _l[1];
|
773
|
+
// Update form value on mount if firstValue is provided
|
774
|
+
React.useEffect(function () {
|
775
|
+
if (Array.isArray(firstValue) && firstValue.length > 0) {
|
776
|
+
setSelectedOptions(firstValue);
|
777
|
+
}
|
778
|
+
}, [firstValue, setSelectedOptions]); // Dependencies are properly set.
|
751
779
|
/**
|
752
780
|
* Handles selection of an option. Adds or removes the option from selectedOptions based on
|
753
781
|
* multi-selection and maxSelection criteria.
|
@@ -756,17 +784,20 @@ var InputList = function InputList(_a) {
|
|
756
784
|
var handleSelectOption = function handleSelectOption(option) {
|
757
785
|
var updatedSelections;
|
758
786
|
if (multi) {
|
759
|
-
|
787
|
+
// Ensure selectedOptions is treated as an array
|
788
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
789
|
+
var alreadySelected = selectedArray.some(function (opt) {
|
760
790
|
return opt.id === option.id;
|
761
791
|
});
|
762
|
-
updatedSelections = alreadySelected ?
|
792
|
+
updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
|
763
793
|
return opt.id !== option.id;
|
764
|
-
}) : __spreadArray(__spreadArray([],
|
794
|
+
}) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
|
765
795
|
if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
|
766
796
|
setIsDropdownVisible(false);
|
767
797
|
}
|
768
798
|
setFormValue(name, updatedSelections);
|
769
799
|
} else {
|
800
|
+
// Handle single-selection case
|
770
801
|
updatedSelections = option;
|
771
802
|
setFormValue(name, option);
|
772
803
|
if (closeOnSelect) setIsDropdownVisible(false);
|
@@ -776,14 +807,26 @@ var InputList = function InputList(_a) {
|
|
776
807
|
onChange(updatedSelections);
|
777
808
|
}
|
778
809
|
};
|
810
|
+
var isItemDisabled = function isItemDisabled(option) {
|
811
|
+
if (!multi) return false; // Disable check only applies for multi-select
|
812
|
+
// Ensure selectedOptions is treated as an array
|
813
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
814
|
+
return maxSelection && selectedArray.length >= maxSelection && !selectedArray.some(function (opt) {
|
815
|
+
return opt.id === option.id;
|
816
|
+
});
|
817
|
+
};
|
779
818
|
/**
|
780
|
-
|
781
|
-
|
782
|
-
|
819
|
+
* Renders selected options as a comma-separated string or the placeholder if none selected.
|
820
|
+
* @returns {string} - The display text for selected options or placeholder.
|
821
|
+
*/
|
783
822
|
var renderSelectedText = function renderSelectedText() {
|
784
|
-
if (multi)
|
785
|
-
|
786
|
-
|
823
|
+
if (multi) {
|
824
|
+
// Ensure selectedOptions is treated as an array
|
825
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
826
|
+
return selectedArray.map(function (opt) {
|
827
|
+
return opt.label;
|
828
|
+
}).join(', ') || placeholder;
|
829
|
+
}
|
787
830
|
return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
|
788
831
|
};
|
789
832
|
/**
|
@@ -802,11 +845,6 @@ var InputList = function InputList(_a) {
|
|
802
845
|
if (isDropdownVisible) setIsDropdownVisible(false);
|
803
846
|
}, [isDropdownVisible]);
|
804
847
|
// Conditionally render item as disabled if max selection reached and item is unselected
|
805
|
-
var isItemDisabled = function isItemDisabled(option) {
|
806
|
-
return multi && maxSelection && selectedOptions.length >= maxSelection && !selectedOptions.some(function (opt) {
|
807
|
-
return opt.id === option.id;
|
808
|
-
});
|
809
|
-
};
|
810
848
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
811
849
|
style: [styles$4.container, style]
|
812
850
|
}, /*#__PURE__*/React.createElement(reactNative.Text, {
|
@@ -844,9 +882,9 @@ var InputList = function InputList(_a) {
|
|
844
882
|
},
|
845
883
|
renderItem: function renderItem(_a) {
|
846
884
|
var item = _a.item;
|
847
|
-
var isSelected = multi ? selectedOptions.some(function (opt) {
|
885
|
+
var isSelected = multi ? Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
|
848
886
|
return opt.id === item.id;
|
849
|
-
}) :
|
887
|
+
}) : selectedOptions && 'id' in selectedOptions && selectedOptions.id === item.id;
|
850
888
|
var isDisabled = isItemDisabled(item);
|
851
889
|
return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
852
890
|
onPress: function onPress() {
|