@evergis/react 3.1.120 → 3.1.121

package/dist/components/Dashboard/types.d.ts

@@ -45,6 +45,7 @@ export interface BaseMapSettings {
 export type EditAttributeValue = string | number | boolean;
 export interface EditAttribute {
     name: string;
+    type?: "dropdown" | "checkbox" | "chip" | "autocomplete";
     defaultValue?: EditAttributeValue;
     relatedDataSource?: string;
 }

package/dist/components/Dashboard/utils/getControlTemplateName.d.ts

@@ -0,0 +1,2 @@
+import { ContainerTemplate, EditAttribute } from '../types';
+export declare const getControlTemplateName: (type?: EditAttribute["type"]) => ContainerTemplate;

package/dist/index.js

@@ -7383,14 +7383,24 @@ const EditContainer = ({ type, elementConfig, renderElement }) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: style, children: [jsxRuntime.jsx(ContainerAlias, { hasBottomMargin: true, children: renderElement({ id: "alias" }) }), jsxRuntime.jsx(ContainerValue, { children: renderElement({ id: "value" }) })] })] }));
 };
 
+const getControlTemplateName = (type) => {
+    switch (type) {
+        case "dropdown":
+        default: return exports.ContainerTemplate.EditDropdown;
+    }
+};
+
 const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) => {
     const { config, attributes, layerInfo, expandedContainers } = useWidgetContext(type);
     const getRenderContainerItem = useRenderContainerItem(type, renderElement);
     const { id, options } = elementConfig || {};
     const { editAttributes } = options || {};
     const renderContainer = React.useCallback((attribute) => {
+        const editAttribute = editAttributes?.find(({ name }) => name === attribute);
         const itemAttribute = attributes.find(({ name }) => name === attribute);
-        const templateName = getTemplateNameFromAttribute(itemAttribute);
+        const templateName = editAttribute?.type
+            ? getControlTemplateName(editAttribute.type)
+            : getTemplateNameFromAttribute(itemAttribute);
         const itemConfig = {
             ...elementConfig,
             children: elementConfig.children.map(child => ({ ...child, attributeName: attribute })),
@@ -7403,7 +7413,7 @@ const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) =
             return null;
         }
         return (jsxRuntime.jsx(ContainerTemplateValue, { id: attribute, type: type, config: config, elementConfig: itemConfig, layerInfo: layerInfo, attributes: attributes, innerComponent: getContainerComponent(templateName), isVisible: isVisibleContainer(id, expandable, expanded, expandedContainers), renderElement: render }, attribute));
-    }, [id, attributes, elementConfig, expandedContainers]);
+    }, [id, attributes, elementConfig, expandedContainers, editAttributes]);
     return editAttributes?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: editAttributes.map(attribute => renderContainer(attribute.name)) })) : (renderContainer());
 });
 
@@ -7415,7 +7425,7 @@ const useEditAttribute = (type, elementConfig) => {
         const valueElement = children.find(({ id }) => id === "value");
         return valueElement?.attributeName;
     }, [children]);
-    const editAttribute = React.useMemo(() => editAttributes.find(({ name }) => name === attributeName), [editAttributes, attributeName]);
+    const editAttribute = React.useMemo(() => editAttributes?.find(({ name }) => name === attributeName), [editAttributes, attributeName]);
     const attributeValue = React.useMemo(() => {
         const value = controls[attributeName] === undefined
             ? attributes.find(({ name }) => name === attributeName)?.value
@@ -7462,12 +7472,12 @@ const EditDropdownContainer = ({ type, elementConfig, renderElement }) => {
     const { id, style, options } = elementConfig || {};
     const { placeholder, label, width } = options || {};
     const optionsList = React.useMemo(() => dataSource?.features.map(item => {
-        const value = item[editAttribute?.name] || null;
+        const value = item.attributes[editAttribute?.name] || null;
         return { text: value, value };
     }), [dataSource?.features, editAttribute.name]);
     const onChange = React.useCallback(([option]) => {
-        changeControls({ [editAttribute?.name]: option });
-    }, [editAttribute.name, changeControls]);
+        changeControls({ [editAttribute?.name]: option.value });
+    }, [editAttribute?.name, changeControls]);
     return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, label: label, placeholder: placeholder, options: optionsList, value: attributeValue ?? editAttribute.defaultValue, width: `${width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: onChange }) })] }));
 };