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
package/dist/index.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/*! aport-tools v4.4.
|
1
|
+
/*! aport-tools v4.4.14 | 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,39 @@ 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
|
+
_l[1];
|
773
|
+
// Update form value on mount if firstValue is provided
|
774
|
+
React.useEffect(function () {
|
775
|
+
setFormValue(name, multi ? initialSelections : initialSelections[0] || null);
|
776
|
+
}, [firstValue]);
|
751
777
|
/**
|
752
778
|
* Handles selection of an option. Adds or removes the option from selectedOptions based on
|
753
779
|
* multi-selection and maxSelection criteria.
|
@@ -756,17 +782,20 @@ var InputList = function InputList(_a) {
|
|
756
782
|
var handleSelectOption = function handleSelectOption(option) {
|
757
783
|
var updatedSelections;
|
758
784
|
if (multi) {
|
759
|
-
|
785
|
+
// Ensure selectedOptions is treated as an array
|
786
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
787
|
+
var alreadySelected = selectedArray.some(function (opt) {
|
760
788
|
return opt.id === option.id;
|
761
789
|
});
|
762
|
-
updatedSelections = alreadySelected ?
|
790
|
+
updatedSelections = alreadySelected ? selectedArray.filter(function (opt) {
|
763
791
|
return opt.id !== option.id;
|
764
|
-
}) : __spreadArray(__spreadArray([],
|
792
|
+
}) : __spreadArray(__spreadArray([], selectedArray, true), [option], false);
|
765
793
|
if (!alreadySelected && maxSelection && updatedSelections.length >= maxSelection) {
|
766
794
|
setIsDropdownVisible(false);
|
767
795
|
}
|
768
796
|
setFormValue(name, updatedSelections);
|
769
797
|
} else {
|
798
|
+
// Handle single-selection case
|
770
799
|
updatedSelections = option;
|
771
800
|
setFormValue(name, option);
|
772
801
|
if (closeOnSelect) setIsDropdownVisible(false);
|
@@ -776,14 +805,26 @@ var InputList = function InputList(_a) {
|
|
776
805
|
onChange(updatedSelections);
|
777
806
|
}
|
778
807
|
};
|
808
|
+
var isItemDisabled = function isItemDisabled(option) {
|
809
|
+
if (!multi) return false; // Disable check only applies for multi-select
|
810
|
+
// Ensure selectedOptions is treated as an array
|
811
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
812
|
+
return maxSelection && selectedArray.length >= maxSelection && !selectedArray.some(function (opt) {
|
813
|
+
return opt.id === option.id;
|
814
|
+
});
|
815
|
+
};
|
779
816
|
/**
|
780
|
-
|
781
|
-
|
782
|
-
|
817
|
+
* Renders selected options as a comma-separated string or the placeholder if none selected.
|
818
|
+
* @returns {string} - The display text for selected options or placeholder.
|
819
|
+
*/
|
783
820
|
var renderSelectedText = function renderSelectedText() {
|
784
|
-
if (multi)
|
785
|
-
|
786
|
-
|
821
|
+
if (multi) {
|
822
|
+
// Ensure selectedOptions is treated as an array
|
823
|
+
var selectedArray = Array.isArray(selectedOptions) ? selectedOptions : [];
|
824
|
+
return selectedArray.map(function (opt) {
|
825
|
+
return opt.label;
|
826
|
+
}).join(', ') || placeholder;
|
827
|
+
}
|
787
828
|
return (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.label) || placeholder;
|
788
829
|
};
|
789
830
|
/**
|
@@ -802,11 +843,6 @@ var InputList = function InputList(_a) {
|
|
802
843
|
if (isDropdownVisible) setIsDropdownVisible(false);
|
803
844
|
}, [isDropdownVisible]);
|
804
845
|
// 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
846
|
return /*#__PURE__*/React.createElement(reactNative.View, {
|
811
847
|
style: [styles$4.container, style]
|
812
848
|
}, /*#__PURE__*/React.createElement(reactNative.Text, {
|
@@ -844,9 +880,9 @@ var InputList = function InputList(_a) {
|
|
844
880
|
},
|
845
881
|
renderItem: function renderItem(_a) {
|
846
882
|
var item = _a.item;
|
847
|
-
var isSelected = multi ? selectedOptions.some(function (opt) {
|
883
|
+
var isSelected = multi ? Array.isArray(selectedOptions) && selectedOptions.some(function (opt) {
|
848
884
|
return opt.id === item.id;
|
849
|
-
}) :
|
885
|
+
}) : selectedOptions && 'id' in selectedOptions && selectedOptions.id === item.id;
|
850
886
|
var isDisabled = isItemDisabled(item);
|
851
887
|
return /*#__PURE__*/React.createElement(reactNative.TouchableOpacity, {
|
852
888
|
onPress: function onPress() {
|