@dartech/arsenal-ui 1.4.21 → 1.4.23
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/index.js +37 -34
- package/package.json +1 -1
package/index.js
CHANGED
@@ -810,6 +810,7 @@ const ControlAutocomplete = _a => {
|
|
810
810
|
};
|
811
811
|
|
812
812
|
function ControlQueryAutocomplete(_a) {
|
813
|
+
var _b;
|
813
814
|
var {
|
814
815
|
name,
|
815
816
|
label,
|
@@ -831,7 +832,7 @@ function ControlQueryAutocomplete(_a) {
|
|
831
832
|
requiredErrorText = ''
|
832
833
|
} = _a,
|
833
834
|
autocompleteProps = __rest(_a, ["name", "label", "control", "required", "searchBy", "labelKey", "multiple", "disabled", "valueKey", "sortBy", "hideErrorMessage", "disableCloseOnSelect", "textFieldProps", "onChange", "queryFunction", "validate", "itemQueryFunction", "requiredErrorText"]);
|
834
|
-
const
|
835
|
+
const _c = useController({
|
835
836
|
control,
|
836
837
|
name,
|
837
838
|
defaultValue: multiple ? [] : null,
|
@@ -840,20 +841,19 @@ function ControlQueryAutocomplete(_a) {
|
|
840
841
|
validate
|
841
842
|
}
|
842
843
|
}),
|
843
|
-
|
844
|
+
_d = _c.field,
|
844
845
|
{
|
845
846
|
ref,
|
846
847
|
onChange: setFieldValue,
|
847
848
|
value: formValue
|
848
|
-
} =
|
849
|
-
fieldProps = __rest(
|
849
|
+
} = _d,
|
850
|
+
fieldProps = __rest(_d, ["ref", "onChange", "value"]),
|
850
851
|
{
|
851
852
|
fieldState: {
|
852
853
|
error,
|
853
854
|
isDirty
|
854
855
|
}
|
855
|
-
} =
|
856
|
-
// const formValue = useWatch({ control, name, defaultValue: });
|
856
|
+
} = _c;
|
857
857
|
const {
|
858
858
|
getOptionLabel,
|
859
859
|
isOptionEqualToValue,
|
@@ -865,13 +865,25 @@ function ControlQueryAutocomplete(_a) {
|
|
865
865
|
const [open, setOpen] = useState(false);
|
866
866
|
const [inputValue, setInputValue] = useState('');
|
867
867
|
const [searchValue, setSearchValue] = useState('');
|
868
|
-
const [totalItems, setTotalItems] = useState(0);
|
869
868
|
const [page, setPage] = useState(0);
|
870
|
-
const
|
869
|
+
const {
|
870
|
+
data,
|
871
|
+
isFetching
|
872
|
+
} = useQuery(['options', page, searchValue], () => {
|
873
|
+
const params = qs.parse(Object.assign({
|
874
|
+
page: `${page}`,
|
875
|
+
size: '20',
|
876
|
+
sort: sortBy
|
877
|
+
}, searchValue ? {
|
878
|
+
[searchBy]: searchValue
|
879
|
+
} : {}), {
|
880
|
+
ignoreQueryPrefix: true
|
881
|
+
});
|
882
|
+
return queryFunction(params);
|
883
|
+
});
|
871
884
|
const debouncedChange = useDebounce(val => {
|
872
885
|
setPage(0);
|
873
886
|
setSearchValue(val);
|
874
|
-
setOptions([]);
|
875
887
|
}, 500);
|
876
888
|
const handleInputChange = useCallback((_, value) => {
|
877
889
|
setInputValue(value);
|
@@ -897,10 +909,10 @@ function ControlQueryAutocomplete(_a) {
|
|
897
909
|
}, [formValue, isDirty, valueKey, labelKey, itemQueryFunction, setFieldValue]);
|
898
910
|
const handleOnScroll = useCallback(event => {
|
899
911
|
const listboxNode = event.currentTarget;
|
900
|
-
if (listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 &&
|
912
|
+
if (listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 && (data === null || data === void 0 ? void 0 : data.collection.length) < (data === null || data === void 0 ? void 0 : data.totalItems)) {
|
901
913
|
setPage(page => page + 1);
|
902
914
|
}
|
903
|
-
}, [
|
915
|
+
}, [data]);
|
904
916
|
const handleOpen = () => {
|
905
917
|
setOpen(true);
|
906
918
|
};
|
@@ -908,33 +920,12 @@ function ControlQueryAutocomplete(_a) {
|
|
908
920
|
setOpen(false);
|
909
921
|
setSearchValue('');
|
910
922
|
};
|
911
|
-
const {
|
912
|
-
data,
|
913
|
-
isFetching
|
914
|
-
} = useQuery(['options', page, searchValue], () => {
|
915
|
-
const params = qs.parse(Object.assign({
|
916
|
-
page: `${page}`,
|
917
|
-
size: '20',
|
918
|
-
sort: sortBy
|
919
|
-
}, searchValue ? {
|
920
|
-
[searchBy]: searchValue
|
921
|
-
} : {}), {
|
922
|
-
ignoreQueryPrefix: true
|
923
|
-
});
|
924
|
-
return queryFunction(params);
|
925
|
-
});
|
926
|
-
useEffect(() => {
|
927
|
-
if (data) {
|
928
|
-
setOptions(prevOptions => [...prevOptions, ...data.collection]);
|
929
|
-
setTotalItems(data.totalItems);
|
930
|
-
}
|
931
|
-
}, [data]);
|
932
923
|
return jsx(Autocomplete, Object.assign({}, fieldProps, {
|
933
924
|
fullWidth: true,
|
934
925
|
disablePortal: true,
|
935
926
|
size: "small",
|
936
927
|
readOnly: disabled,
|
937
|
-
options:
|
928
|
+
options: (_b = data === null || data === void 0 ? void 0 : data.collection) !== null && _b !== void 0 ? _b : [],
|
938
929
|
multiple: multiple,
|
939
930
|
getOptionLabel: getOptionLabel,
|
940
931
|
isOptionEqualToValue: isOptionEqualToValue,
|
@@ -1577,7 +1568,6 @@ const formatPropertyValue = (propertyType, value, params) => {
|
|
1577
1568
|
break;
|
1578
1569
|
}
|
1579
1570
|
case PropertyType.JSON:
|
1580
|
-
case PropertyType.ANY:
|
1581
1571
|
try {
|
1582
1572
|
if (typeof value !== 'string') {
|
1583
1573
|
parsedValue = JSON.stringify(value);
|
@@ -1588,6 +1578,19 @@ const formatPropertyValue = (propertyType, value, params) => {
|
|
1588
1578
|
parsedValue = null;
|
1589
1579
|
}
|
1590
1580
|
break;
|
1581
|
+
case PropertyType.ANY:
|
1582
|
+
try {
|
1583
|
+
if (typeof value === 'string') {
|
1584
|
+
parsedValue = JSON.parse(parsedValue);
|
1585
|
+
} else {
|
1586
|
+
parsedValue = value;
|
1587
|
+
}
|
1588
|
+
// parsedValue = JSON.parse(parsedValue as string);
|
1589
|
+
} catch (e) {
|
1590
|
+
// console.log(e);
|
1591
|
+
parsedValue = value;
|
1592
|
+
}
|
1593
|
+
break;
|
1591
1594
|
case PropertyType.ENTITY:
|
1592
1595
|
parsedValue = formatDefinitionData(params.properties, value);
|
1593
1596
|
break;
|