aport-tools 4.4.17 → 4.4.18
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 +2 -2
- package/dist/index.esm.js +43 -37
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +42 -36
- 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.18 | ISC */
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
var React = require('react');
|
@@ -758,25 +758,22 @@ var InputList = function InputList(_a) {
|
|
758
758
|
var _k = React.useState(false),
|
759
759
|
isDropdownVisible = _k[0],
|
760
760
|
setIsDropdownVisible = _k[1];
|
761
|
-
var selectedOptions =
|
762
|
-
var sortedOptions =
|
763
|
-
return sortBy
|
764
|
-
|
765
|
-
}) : options;
|
766
|
-
}, [options, sortBy]);
|
761
|
+
var selectedOptions = formValues[name] || (multi ? [] : null);
|
762
|
+
var sortedOptions = sortBy ? __spreadArray([], options, true).sort(function (a, b) {
|
763
|
+
return a[sortBy] > b[sortBy] ? 1 : -1;
|
764
|
+
}) : options;
|
767
765
|
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
768
766
|
var colors = theme.colors;
|
769
|
-
var _l = React.useState(
|
767
|
+
var _l = React.useState();
|
770
768
|
_l[0];
|
771
769
|
var setInternalValue = _l[1];
|
772
770
|
// Initialize the internal value based on `firstValue` or `formValues`
|
773
771
|
React.useEffect(function () {
|
774
|
-
var selectedValue = formValues[name];
|
775
772
|
if (firstValue) {
|
776
773
|
setInternalValue(firstValue);
|
777
774
|
setFormValue(name, firstValue);
|
778
775
|
} else {
|
779
|
-
setInternalValue(
|
776
|
+
setInternalValue(formValues[name] || "");
|
780
777
|
}
|
781
778
|
}, [firstValue, formValues[name]]);
|
782
779
|
/**
|
@@ -787,37 +784,51 @@ var InputList = function InputList(_a) {
|
|
787
784
|
var handleSelectOption = function handleSelectOption(option) {
|
788
785
|
var updatedSelections;
|
789
786
|
if (multi) {
|
790
|
-
|
787
|
+
// Ensure selectedOptions is treated as an array
|
788
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
789
|
+
var alreadySelected = selectedArray.some(function (opt) {
|
791
790
|
return opt.id === option.id;
|
792
791
|
});
|
793
|
-
updatedSelections = alreadySelected ?
|
792
|
+
updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
|
794
793
|
return opt.id !== option.id;
|
795
|
-
}) : __spreadArray(__spreadArray([],
|
794
|
+
}) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
|
796
795
|
if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
|
797
796
|
setIsDropdownVisible(false);
|
798
797
|
}
|
799
|
-
setInternalValue(updatedSelections);
|
800
798
|
setFormValue(name, updatedSelections);
|
801
799
|
} else {
|
800
|
+
// Handle single-selection case
|
802
801
|
updatedSelections = option;
|
803
|
-
setInternalValue(option);
|
804
802
|
setFormValue(name, option);
|
805
803
|
if (closeOnSelect) setIsDropdownVisible(false);
|
806
804
|
}
|
805
|
+
// Trigger onChange callback with the updated selection
|
807
806
|
if (onChange) {
|
808
807
|
onChange(updatedSelections);
|
809
808
|
}
|
810
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
|
+
};
|
818
|
+
var renderSelectedText = function renderSelectedText() {
|
819
|
+
if (multi) {
|
820
|
+
// Ensure selectedOptions is treated as an array
|
821
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
822
|
+
return selectedArray.map(function (opt) {
|
823
|
+
return opt.label;
|
824
|
+
}).join(', ') || placeholder;
|
825
|
+
}
|
826
|
+
return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
|
827
|
+
};
|
811
828
|
/**
|
812
829
|
* Renders selected options as a comma-separated string or the placeholder if none selected.
|
813
830
|
* @returns {string} - The display text for selected options or placeholder.
|
814
831
|
*/
|
815
|
-
var renderSelectedText = function renderSelectedText() {
|
816
|
-
if (multi) return (selectedOptions || []).map(function (opt) {
|
817
|
-
return opt.label;
|
818
|
-
}).join(", ") || placeholder;
|
819
|
-
return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
|
820
|
-
};
|
821
832
|
/**
|
822
833
|
* Toggles dropdown visibility. Disables toggle if the component is disabled.
|
823
834
|
*/
|
@@ -834,11 +845,6 @@ var InputList = function InputList(_a) {
|
|
834
845
|
if (isDropdownVisible) setIsDropdownVisible(false);
|
835
846
|
}, [isDropdownVisible]);
|
836
847
|
// Conditionally render item as disabled if max selection reached and item is unselected
|
837
|
-
var isItemDisabled = function isItemDisabled(option) {
|
838
|
-
return multi && maxSelection && selectedOptions.length >= maxSelection && !selectedOptions.some(function (opt) {
|
839
|
-
return opt.id === option.id;
|
840
|
-
});
|
841
|
-
};
|
842
848
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
843
849
|
style: [styles$4.container, style]
|
844
850
|
}, /*#__PURE__*/React.createElement(reactNative.Text, {
|
@@ -876,9 +882,9 @@ var InputList = function InputList(_a) {
|
|
876
882
|
},
|
877
883
|
renderItem: function renderItem(_a) {
|
878
884
|
var item = _a.item;
|
879
|
-
var isSelected = multi ? selectedOptions.some(function (opt) {
|
885
|
+
var isSelected = multi ? Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
|
880
886
|
return opt.id === item.id;
|
881
|
-
}) :
|
887
|
+
}) : selectedOptions && 'id' in selectedOptions && selectedOptions.id === item.id;
|
882
888
|
var isDisabled = isItemDisabled(item);
|
883
889
|
return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
884
890
|
onPress: function onPress() {
|
@@ -916,12 +922,12 @@ var styles$4 = reactNative.StyleSheet.create({
|
|
916
922
|
borderRadius: 5
|
917
923
|
},
|
918
924
|
dropdownContainer: {
|
919
|
-
position:
|
920
|
-
top:
|
925
|
+
position: 'absolute',
|
926
|
+
top: '30%',
|
921
927
|
// Center the dropdown vertically
|
922
|
-
alignSelf:
|
923
|
-
width:
|
924
|
-
backgroundColor:
|
928
|
+
alignSelf: 'center',
|
929
|
+
width: '90%',
|
930
|
+
backgroundColor: '#fff',
|
925
931
|
borderRadius: 8,
|
926
932
|
elevation: 5,
|
927
933
|
paddingVertical: 10
|
@@ -930,16 +936,16 @@ var styles$4 = reactNative.StyleSheet.create({
|
|
930
936
|
padding: 12
|
931
937
|
},
|
932
938
|
disabledText: {
|
933
|
-
color:
|
939
|
+
color: '#999'
|
934
940
|
},
|
935
941
|
separator: {
|
936
942
|
height: 1,
|
937
|
-
backgroundColor:
|
943
|
+
backgroundColor: '#ddd',
|
938
944
|
marginHorizontal: 8
|
939
945
|
},
|
940
946
|
overlay: {
|
941
947
|
flex: 1,
|
942
|
-
backgroundColor:
|
948
|
+
backgroundColor: 'rgba(0,0,0,0.3)'
|
943
949
|
}
|
944
950
|
});
|
945
951
|
|