aport-tools 4.4.17 → 4.4.19
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 +54 -61
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +53 -60
- 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.19 | ISC */
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
var React = require('react');
|
@@ -751,94 +751,87 @@ var InputList = function InputList(_a) {
|
|
751
751
|
closeOnSelect = _h === void 0 ? true : _h,
|
752
752
|
maxSelection = _a.maxSelection,
|
753
753
|
onChange = _a.onChange;
|
754
|
-
var _j = useFormContext()
|
755
|
-
|
756
|
-
setFormValue = _j.setFormValue,
|
754
|
+
var _j = useFormContext();
|
755
|
+
_j.formValues;
|
756
|
+
var setFormValue = _j.setFormValue,
|
757
757
|
formErrors = _j.errors;
|
758
758
|
var _k = React.useState(false),
|
759
759
|
isDropdownVisible = _k[0],
|
760
760
|
setIsDropdownVisible = _k[1];
|
761
|
-
var
|
762
|
-
|
763
|
-
|
764
|
-
return a[sortBy] > b[sortBy] ? 1 : -1;
|
765
|
-
}) : options;
|
766
|
-
}, [options, sortBy]);
|
761
|
+
var sortedOptions = sortBy ? __spreadArray([], options, true).sort(function (a, b) {
|
762
|
+
return a[sortBy] > b[sortBy] ? 1 : -1;
|
763
|
+
}) : options;
|
767
764
|
var theme = React.useContext(aportThemes.ThemeContext).theme;
|
768
765
|
var colors = theme.colors;
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
|
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
|
+
_l[1];
|
773
|
+
// Update form value on mount if firstValue is provided
|
773
774
|
React.useEffect(function () {
|
774
|
-
|
775
|
-
|
776
|
-
setInternalValue(firstValue);
|
777
|
-
setFormValue(name, firstValue);
|
778
|
-
} else {
|
779
|
-
setInternalValue(selectedValue || (multi ? [] : null));
|
780
|
-
}
|
781
|
-
}, [firstValue, formValues[name]]);
|
782
|
-
/**
|
783
|
-
* Handles selection of an option. Adds or removes the option from selectedOptions based on
|
784
|
-
* multi-selection and maxSelection criteria.
|
785
|
-
* @param {Option} option - The selected option object.
|
786
|
-
*/
|
775
|
+
setFormValue(name, multi ? initialSelections : initialSelections[0] || null);
|
776
|
+
}, [firstValue]);
|
787
777
|
var handleSelectOption = function handleSelectOption(option) {
|
788
778
|
var updatedSelections;
|
789
779
|
if (multi) {
|
790
|
-
|
780
|
+
// Ensure selectedOptions is treated as an array
|
781
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
782
|
+
var alreadySelected = selectedArray.some(function (opt) {
|
791
783
|
return opt.id === option.id;
|
792
784
|
});
|
793
|
-
updatedSelections = alreadySelected ?
|
785
|
+
updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
|
794
786
|
return opt.id !== option.id;
|
795
|
-
}) : __spreadArray(__spreadArray([],
|
787
|
+
}) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
|
796
788
|
if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
|
797
789
|
setIsDropdownVisible(false);
|
798
790
|
}
|
799
|
-
setInternalValue(updatedSelections);
|
800
791
|
setFormValue(name, updatedSelections);
|
801
792
|
} else {
|
793
|
+
// Handle single-selection case
|
802
794
|
updatedSelections = option;
|
803
|
-
setInternalValue(option);
|
804
795
|
setFormValue(name, option);
|
805
796
|
if (closeOnSelect) setIsDropdownVisible(false);
|
806
797
|
}
|
798
|
+
// Trigger onChange callback with the updated selection
|
807
799
|
if (onChange) {
|
808
800
|
onChange(updatedSelections);
|
809
801
|
}
|
810
802
|
};
|
811
|
-
|
812
|
-
|
813
|
-
|
814
|
-
|
803
|
+
var isItemDisabled = function isItemDisabled(option) {
|
804
|
+
if (!multi) return false; // Disable check only applies for multi-select
|
805
|
+
// Ensure selectedOptions is treated as an array
|
806
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
807
|
+
return maxSelection && selectedArray.length >= maxSelection && !selectedArray.some(function (opt) {
|
808
|
+
return opt.id === option.id;
|
809
|
+
});
|
810
|
+
};
|
815
811
|
var renderSelectedText = function renderSelectedText() {
|
816
|
-
if (multi)
|
817
|
-
|
818
|
-
|
812
|
+
if (multi) {
|
813
|
+
// Ensure selectedOptions is treated as an array
|
814
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
815
|
+
return selectedArray.map(function (opt) {
|
816
|
+
return opt.label;
|
817
|
+
}).join(', ') || placeholder;
|
818
|
+
}
|
819
819
|
return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
|
820
820
|
};
|
821
|
-
/**
|
822
|
-
* Toggles dropdown visibility. Disables toggle if the component is disabled.
|
823
|
-
*/
|
824
821
|
var toggleDropdown = function toggleDropdown() {
|
825
822
|
if (!disabled) {
|
826
823
|
setIsDropdownVisible(!isDropdownVisible);
|
827
824
|
if (!isDropdownVisible) reactNative.Keyboard.dismiss();
|
828
825
|
}
|
829
826
|
};
|
830
|
-
/**
|
831
|
-
* Closes the dropdown when pressing outside.
|
832
|
-
*/
|
833
827
|
var handleCloseDropdown = React.useCallback(function () {
|
834
828
|
if (isDropdownVisible) setIsDropdownVisible(false);
|
835
829
|
}, [isDropdownVisible]);
|
830
|
+
/**
|
831
|
+
* Renders selected options as a comma-separated string or the placeholder if none selected.
|
832
|
+
* @returns {string} - The display text for selected options or placeholder.
|
833
|
+
*/
|
836
834
|
// 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
835
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
843
836
|
style: [styles$4.container, style]
|
844
837
|
}, /*#__PURE__*/React.createElement(reactNative.Text, {
|
@@ -876,9 +869,9 @@ var InputList = function InputList(_a) {
|
|
876
869
|
},
|
877
870
|
renderItem: function renderItem(_a) {
|
878
871
|
var item = _a.item;
|
879
|
-
var isSelected = multi ? selectedOptions.some(function (opt) {
|
872
|
+
var isSelected = multi ? Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
|
880
873
|
return opt.id === item.id;
|
881
|
-
}) :
|
874
|
+
}) : selectedOptions && 'id' in selectedOptions && selectedOptions.id === item.id;
|
882
875
|
var isDisabled = isItemDisabled(item);
|
883
876
|
return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
884
877
|
onPress: function onPress() {
|
@@ -916,12 +909,12 @@ var styles$4 = reactNative.StyleSheet.create({
|
|
916
909
|
borderRadius: 5
|
917
910
|
},
|
918
911
|
dropdownContainer: {
|
919
|
-
position:
|
920
|
-
top:
|
912
|
+
position: 'absolute',
|
913
|
+
top: '30%',
|
921
914
|
// Center the dropdown vertically
|
922
|
-
alignSelf:
|
923
|
-
width:
|
924
|
-
backgroundColor:
|
915
|
+
alignSelf: 'center',
|
916
|
+
width: '90%',
|
917
|
+
backgroundColor: '#fff',
|
925
918
|
borderRadius: 8,
|
926
919
|
elevation: 5,
|
927
920
|
paddingVertical: 10
|
@@ -930,16 +923,16 @@ var styles$4 = reactNative.StyleSheet.create({
|
|
930
923
|
padding: 12
|
931
924
|
},
|
932
925
|
disabledText: {
|
933
|
-
color:
|
926
|
+
color: '#999'
|
934
927
|
},
|
935
928
|
separator: {
|
936
929
|
height: 1,
|
937
|
-
backgroundColor:
|
930
|
+
backgroundColor: '#ddd',
|
938
931
|
marginHorizontal: 8
|
939
932
|
},
|
940
933
|
overlay: {
|
941
934
|
flex: 1,
|
942
|
-
backgroundColor:
|
935
|
+
backgroundColor: 'rgba(0,0,0,0.3)'
|
943
936
|
}
|
944
937
|
});
|
945
938
|
|