@dartech/arsenal-ui 1.4.21 → 1.4.23
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|