@evoke-platform/ui-components 1.1.0-testing.14 → 1.1.0-testing.15

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.
Files changed (3) hide show
  1. package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js +11 -5
  2. package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js +16 -8
  3. package/package.json +1 -1
package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js CHANGED
@@ -17,8 +17,10 @@ export const ObjectPropertyInput = (props) => {
17
17
  const [options, setOptions] = useState([]);
18
18
  const [openOptions, setOpenOptions] = useState(false);
19
19
  const [layout, setLayout] = useState();
20
+ const [layoutLoaded, setLayoutLoaded] = useState(false);
20
21
  const DEFAULT_CREATE_ACTION = '_create';
21
22
  useEffect(() => {
23
+ setLayoutLoaded(false);
22
24
  if (relatedObject) {
23
25
  let defaultViewLayout;
24
26
  if (relatedObject?.viewLayout?.dropdown && displayOption === 'dropdown') {
@@ -41,10 +43,12 @@ export const ObjectPropertyInput = (props) => {
41
43
  apiServices
42
44
  .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
43
45
  .then(setLayout)
44
- .catch((err) => setLayout(defaultViewLayout));
46
+ .catch(() => setLayout(defaultViewLayout))
47
+ .finally(() => setLayoutLoaded(true));
45
48
  }
46
49
  else {
47
50
  setLayout(defaultViewLayout);
51
+ setLayoutLoaded(true);
48
52
  }
49
53
  }
50
54
  }, [displayOption, relatedObject, viewLayout]);
@@ -109,19 +113,21 @@ export const ObjectPropertyInput = (props) => {
109
113
  });
110
114
  }, [relatedObject, setLoadingOptions, setOptions, property, filter, layout]);
111
115
  useEffect(() => {
112
- if (displayOption === 'dropdown') {
116
+ if (displayOption === 'dropdown' && layoutLoaded) {
113
117
  getDropdownOptions();
114
118
  }
115
- }, [property, filter, displayOption, getDropdownOptions]);
119
+ }, [property, filter, displayOption, getDropdownOptions, layoutLoaded]);
116
120
  const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 500), [
117
121
  filter,
118
122
  property,
119
123
  getDropdownOptions,
120
124
  ]);
121
125
  useEffect(() => {
122
- debouncedGetDropdownOptions(dropdownInput);
126
+ if (dropdownInput !== undefined && layoutLoaded) {
127
+ debouncedGetDropdownOptions(dropdownInput);
128
+ }
123
129
  return () => debouncedGetDropdownOptions.cancel();
124
- }, [dropdownInput, debouncedGetDropdownOptions]);
130
+ }, [dropdownInput, debouncedGetDropdownOptions, layoutLoaded]);
125
131
  useEffect(() => {
126
132
  apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective?sanitizedVersion=true`), (error, object) => {
127
133
  if (error) {
package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js CHANGED
@@ -17,7 +17,8 @@ export const DropdownRepeatableField = (props) => {
17
17
  showAlert: false,
18
18
  isError: true,
19
19
  });
20
- const [searchValue, setSearchValue] = useState('');
20
+ const [searchValue, setSearchValue] = useState();
21
+ const [layoutLoaded, setLayoutLoaded] = useState(false);
21
22
  const { instanceChanges } = useNotification();
22
23
  const fetchMiddleObjectInstances = async () => {
23
24
  const newInstances = await getMiddleObjectInstances();
@@ -36,6 +37,7 @@ export const DropdownRepeatableField = (props) => {
36
37
  useEffect(() => {
37
38
  const endObjectProperty = middleObject?.properties?.find((currProperty) => property.manyToManyPropertyId === currProperty.id);
38
39
  if (endObjectProperty && endObjectProperty.objectId) {
40
+ setLayoutLoaded(false);
39
41
  apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/effective`), { params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } } }, (error, effectiveObject) => {
40
42
  if (error) {
41
43
  console.error(error);
@@ -58,10 +60,12 @@ export const DropdownRepeatableField = (props) => {
58
60
  apiServices
59
61
  .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
60
62
  .then(setLayout)
61
- .catch((err) => setLayout(defaultLayout));
63
+ .catch(() => setLayout(defaultLayout))
64
+ .finally(() => setLayoutLoaded(true));
62
65
  }
63
66
  else {
64
67
  setLayout(defaultLayout);
68
+ setLayoutLoaded(true);
65
69
  }
66
70
  }
67
71
  });
@@ -110,15 +114,19 @@ export const DropdownRepeatableField = (props) => {
110
114
  });
111
115
  }
112
116
  }
113
- }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject, layout]);
117
+ }, [property.objectId, property.manyToManyPropertyId, apiServices, middleObject, layout, criteria]);
114
118
  const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
115
119
  useEffect(() => {
116
- debouncedEndObjectSearch(searchValue);
120
+ if (searchValue !== undefined && layoutLoaded) {
121
+ debouncedEndObjectSearch(searchValue);
122
+ }
117
123
  return () => debouncedEndObjectSearch.cancel();
118
- }, [searchValue, debouncedEndObjectSearch]);
124
+ }, [searchValue, debouncedEndObjectSearch, layoutLoaded]);
119
125
  useEffect(() => {
120
- fetchEndObjectInstances();
121
- }, [criteria, middleObject, property, fetchEndObjectInstances]);
126
+ if (layoutLoaded) {
127
+ fetchEndObjectInstances();
128
+ }
129
+ }, [fetchEndObjectInstances, layoutLoaded]);
122
130
  const saveMiddleInstance = (endObjectId, endObjectName) => {
123
131
  if (property.objectId) {
124
132
  const middleObject = getMiddleObject(instance, property, endObjectId, endObjectName);
@@ -157,5 +165,5 @@ export const DropdownRepeatableField = (props) => {
157
165
  }
158
166
  });
159
167
  };
160
- return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
168
+ return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue ?? '', loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
161
169
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@evoke-platform/ui-components",
3
- "version": "1.1.0-testing.14",
3
+ "version": "1.1.0-testing.15",
4
4
  "description": "",
5
5
  "main": "dist/published/index.js",
6
6
  "module": "dist/published/index.js",