@evergis/react 4.0.23-alpha.2 → 4.0.23-alpha.3

package/dist/index.js

@@ -7503,7 +7503,10 @@ const EditGroupContainer = React.memo(({ type, elementConfig, renderElement }) =
         layerInfo,
         expandedContainers,
     ]);
-    return controls?.length ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: controls.map(({ targetAttributeName }) => renderContainer(targetAttributeName)) })) : (renderContainer());
+    if (!controls?.length) {
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: attributes.map(({ attributeName }) => renderContainer(attributeName)) }));
+    }
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: controls.map(({ targetAttributeName }) => renderContainer(targetAttributeName)) }));
 });
 
 const useEditControl = (type, elementConfig) => {
@@ -7512,25 +7515,26 @@ const useEditControl = (type, elementConfig) => {
     const { controls: controlsOption } = options || {};
     const valueElement = React.useMemo(() => children.find(({ id }) => id === "value"), [children]);
     const control = React.useMemo(() => controlsOption?.find(item => item.targetAttributeName === valueElement.attributeName), [controlsOption, valueElement.attributeName]);
+    const attributeName = (control?.targetAttributeName ?? valueElement?.attributeName);
     const value = React.useMemo(() => {
-        const currentValue = controls[control?.targetAttributeName] === undefined
-            ? attributes.find(({ attributeName }) => attributeName === control.targetAttributeName)?.value
-            : controls[control?.targetAttributeName];
+        const currentValue = controls[attributeName] === undefined
+            ? attributes.find(({ attributeName: name }) => name === attributeName)?.value
+            : controls[attributeName];
         return currentValue ?? control?.defaultValue;
     }, [
         controls,
-        control.targetAttributeName,
+        attributeName,
         control?.defaultValue,
         attributes,
     ]);
-    const dataSource = React.useMemo(() => dataSources?.find(({ name }) => name === control.relatedDataSource), [control.relatedDataSource, dataSources]);
+    const dataSource = React.useMemo(() => dataSources?.find(({ name }) => name === control?.relatedDataSource), [control?.relatedDataSource, dataSources]);
     const items = React.useMemo(() => control?.variants?.map(v => String(v.text || v.value)) ||
         dataSource?.features.map(item => item.properties[control?.attributeName] || null) || [], [control?.variants, dataSource?.features, control?.attributeName]);
     const onChange = React.useCallback((newValue) => {
         changeControls({
-            [control?.targetAttributeName]: newValue,
+            [attributeName]: newValue,
         });
-    }, [changeControls, control?.targetAttributeName]);
+    }, [changeControls, attributeName]);
     return React.useMemo(() => ({ control, value, dataSource, items, onChange }), [control, value, dataSource, items, onChange]);
 };
 
@@ -7558,14 +7562,14 @@ const EditStringContainer = ({ type, elementConfig, renderElement, }) => {
 const EditNumberContainer = ({ type, elementConfig, renderElement, }) => {
     const { value, control, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { column: true, children: [jsxRuntime.jsx(uilibGl.Input, { value: value?.toString(), width: "100%", onChange: (e) => onChange(e.target.value) }), jsxRuntime.jsx(uilibGl.Slider, { value: value, min: control.minValue, max: control.maxValue, step: control.step, sliderWidth: "100%", primary: true, onChange: onChange })] })] }));
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsxs(ContainerValue, { column: true, children: [jsxRuntime.jsx(uilibGl.Input, { value: value?.toString(), width: "100%", onChange: (e) => onChange(e.target.value) }), jsxRuntime.jsx(uilibGl.Slider, { value: value, min: control?.minValue, max: control?.maxValue, step: control?.step, sliderWidth: "100%", primary: true, onChange: onChange })] })] }));
 };
 
 const EditDropdownContainer = ({ type, elementConfig, renderElement, }) => {
     const { value, control, items, onChange } = useEditControl(type, elementConfig);
     const { id, style } = elementConfig || {};
     const optionsList = React.useMemo(() => items.map(item => ({ text: item, value: item })), [items]);
-    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, label: control.label, placeholder: control.placeholder, options: optionsList, value: value, width: `${control.width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: ([option]) => onChange(option.value) }) })] }));
+    return (jsxRuntime.jsxs(Container, { id: id, isColumn: true, style: { ...BASE_CONTAINER_STYLE, ...style }, children: [jsxRuntime.jsxs(ContainerAlias, { hasBottomMargin: true, children: [renderElement({ id: "alias" }), renderElement({ id: "tooltip" })] }), jsxRuntime.jsx(ContainerValue, { column: true, children: jsxRuntime.jsx(uilibGl.Dropdown, { zIndex: 1000, label: control?.label, placeholder: control?.placeholder, options: optionsList, value: value, width: `${control?.width ?? DEFAULT_DROPDOWN_WIDTH}px`, onChange: ([option]) => onChange(option.value) }) })] }));
 };
 
 const CheckboxWrapper = styled(ContainerValue) `