@evergis/react 3.1.54 → 3.1.56

package/dist/react.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { IconButton, Flex, transition, Chip, Divider, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, UploaderItemArea, UploaderTitleWrapper, Uploader, WaitingButton, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, Expander, darkTheme, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
+import { IconButton, Flex, transition, Chip, Divider, Icon, Description, FlexSpan, IconToggle, Popup, Menu, DraggableTree, shadows, LegendToggler, Tooltip as Tooltip$1, DropdownField, MultiSelectContainer, IconButtonButton, FlatButton, DraggableTreeContainer, WaitingButton, LinearProgress, H2, ThemeProvider, defaultTheme, Preview, Blank, Popover, Expander, darkTheme, UploaderItemArea, UploaderTitleWrapper, Uploader, NumberRangeSlider, useAsyncAutocomplete, AutoComplete, Dropdown, Checkbox, CircularProgress, RangeNumberInput, dateFormat } from '@evergis/uilib-gl';
 import { createContext, memo, useRef, useState, useEffect, useCallback, useContext, useMemo, Fragment } from 'react';
 import styled, { createGlobalStyle, css, useTheme } from 'styled-components';
 import { lineChartClassNames, BarChart as BarChart$1, barChartClassNames, LineChart, PieChart } from '@evergis/charts';
@@ -5118,13 +5118,6 @@ const Container = styled(Flex) `
           align-items: center;
         `}
 
-  ${({ isMain, isColumn }) => (isMain || isColumn) &&
-    css `
-      > :not(:last-child) {
-        margin-bottom: 1.5rem;
-      }
-    `}
-
   ${({ isTitle }) => isTitle &&
     css `
       &&&& {
@@ -5145,6 +5138,7 @@ const ContainerWrapper = styled(Flex) `
   width: 100%;
   background: ${({ theme: { palette } }) => palette.backgroundAlpha};
   box-shadow: rgb(0 0 0 / 15%) 0 0.1875rem 0.625rem;
+  margin-bottom: 2rem;
   padding: 1.5rem;
   border-radius: 0.5rem;
   backdrop-filter: blur(20px);
@@ -5155,6 +5149,12 @@ const ContainerWrapper = styled(Flex) `
   ${Container} > :not(:last-child) {
     margin-bottom: 1.5rem;
   }
+  
+  ${({ $noMargin }) => $noMargin && css `
+    &&&& {
+      margin-bottom: 0;
+    }
+  `}
 `;
 const DashboardChip = styled(Chip) `
   margin: 0 0.25rem 0.25rem 0;
@@ -5219,12 +5219,6 @@ const DashboardWrapper = styled(Flex) `
   width: calc(100% - 3rem);
   height: calc(100% - ${LEFT_PANEL_HEADER_HEIGHT});
 
-  > ${ContainerWrapper} {
-    > * {
-      margin-bottom: 2rem;
-    }
-  }
-
   ${({ hasImage, isPresentationMode }) => hasImage &&
     !isPresentationMode &&
     css `
@@ -6715,96 +6709,34 @@ const ExportPdfContainer = memo(({ type, elementConfig }) => {
     return (jsx(Container, { id: id, style: style, children: jsx(IconButton, { kind: icon || "download", primary: true, disabled: loading, onClick: onExport, children: title ?? t("downloadPdf", { ns: "dashboard", defaultValue: "Скачать PDF" }) }) }));
 });
 
-const UploaderContainer = styled(Container) `
-  ${UploaderItemArea} {
-    overflow: visible;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-  
-  ${UploaderTitleWrapper} {
-    top: 0;
-    padding-top: 0;
-    border: 0;
-  }
-`;
-const UploaderTitle = styled(Flex) `
-  flex-direction: column;
-  align-items: center;
-  width: 11rem;
-  margin: 0 auto;
-  text-align: center;
-  font-size: 0.625rem;
-  color: ${({ theme: { palette } }) => palette.textSecondary};
-  
-  span[kind] {
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-bottom: 0.75rem;
-    
-    :after {
-      font-size: 1.5rem;
-      color: ${({ theme: { palette } }) => palette.textSecondary};
-      opacity: 0.12;
-    }
-  }
-`;
-
-const DEFAULT_FILE_EXTENSIONS = ".txt,.csv,.py";
 const UploadContainer = memo(({ type, elementConfig, renderElement }) => {
-    const { t, api } = useGlobalContext();
-    const { changeFilters } = useWidgetContext(type);
-    const [files, setFiles] = useState([]);
-    const refInput = useRef();
-    const { id, style, options } = elementConfig || {};
-    const { icon, title, filterName, fileExtensions = DEFAULT_FILE_EXTENSIONS, parentResourceId, multiSelect } = options || {};
-    const onUpload = useCallback(async (input) => {
-        const files = Array.isArray(input) ? input : [input];
-        const response = await Promise.all(files.map(file => {
-            return api.file.upload(file, true, parentResourceId, file.name);
-        }));
-        const uploadedFiles = response.map(item => ({
-            name: item.name,
-            id: item.resourceId,
-            done: true,
-        }));
-        setFiles(currentFiles => ([...uploadedFiles, ...currentFiles]));
-    }, [parentResourceId]);
-    const onDelete = useCallback(async (id) => {
-        const index = files.findIndex(file => file.id === id);
-        if (index === -1)
-            return;
-        const resourceId = files[index].id;
-        await api.file.deleteResource(resourceId);
-        setFiles(currentFiles => currentFiles.filter(({ id }) => id !== resourceId));
-    }, [files]);
-    const renderTitle = useMemo(() => {
-        if (files.length)
-            return null;
-        return (jsxs(UploaderTitle, { children: [jsx(Icon, { kind: icon || "upload" }), jsx("div", { children: title ?? t("uploadTitle", {
-                        ns: "dashboard",
-                        defaultValue: "Перетащите файл сюда или нажмите, чтобы выбрать",
-                    }) })] }));
-    }, [icon, t, title, files.length]);
-    useEffect(() => {
-        if (!filterName)
-            return;
-        changeFilters({ [filterName]: { value: files.map(({ id }) => id) } });
-    }, [files]);
-    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsx(UploaderContainer, { id: id, style: style, children: jsx(Uploader, { title: renderTitle, accept: fileExtensions, fileItems: files, currentRef: refInput, isMultiple: multiSelect, onUpload: onUpload, onDelete: onDelete }) })] }));
+    const { expandedContainers } = useWidgetContext(type);
+    const { id, options } = elementConfig || {};
+    const { expandable, expanded } = options || {};
+    const isVisible = isVisibleContainer(id, expandable, expanded, expandedContainers);
+    return (jsxs(Fragment$1, { children: [jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), isVisible && renderElement({ id: "uploader", wrap: false })] }));
 });
 
-const TaskContainer = memo(({ elementConfig }) => {
-    const { t } = useGlobalContext();
-    const { runTask, error, result, executionTime, loading } = usePythonTask();
+const TaskContainer = memo(({ type, elementConfig }) => {
+    const { t, ewktGeometry } = useGlobalContext();
+    const { dataSources, filters: selectedFilters } = useWidgetContext(type);
+    const { currentPage } = useWidgetPage(type);
+    const { runTask, loading } = usePythonTask();
     const { options } = elementConfig || {};
-    const { title, relatedResources } = options || {};
+    const { title, relatedResources, center, icon } = options || {};
     const onClick = useCallback(async () => {
         await Promise.all(relatedResources.map(({ resourceId, parameters, script }) => {
-            return runTask({ resourceId, parameters, script });
+            const newParams = applyQueryFilters({
+                parameters,
+                dataSources,
+                selectedFilters,
+                filters: currentPage.filters,
+                geometry: ewktGeometry,
+            });
+            return runTask({ resourceId, parameters: newParams, script });
         }));
-    }, [relatedResources, runTask]);
-    return (jsx(WaitingButton, { primary: true, isWaiting: loading, disabled: !relatedResources?.length, onClick: onClick, children: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }) }));
+    }, [currentPage.filters, dataSources, ewktGeometry, relatedResources, runTask, selectedFilters]);
+    return (jsx(Flex, { justifyContent: center ? "center" : "flex-start", children: jsxs(WaitingButton, { primary: true, isWaiting: loading, disabled: !relatedResources?.length, onClick: onClick, children: [icon && jsx(FlexSpan, { marginRight: "0.5rem", children: jsx(Icon, { kind: icon }) }), title || t("run", { ns: "dashboard", defaultValue: "Запуск" })] }) }));
 });
 
 const containerComponents = {
@@ -8188,6 +8120,86 @@ const getDefaultConfig = ({ title, defaultTitle, items, baseMapName, position, r
     return dashboardConfiguration;
 };
 
+const UploaderContainer = styled(Container) `
+  ${UploaderItemArea} {
+    overflow: visible;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  
+  ${UploaderTitleWrapper} {
+    top: 0;
+    padding-top: 0;
+    border: 0;
+  }
+`;
+
+const UploaderTitle = styled(Flex) `
+  flex-direction: column;
+  align-items: center;
+  width: 11rem;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 0.625rem;
+  color: ${({ theme: { palette } }) => palette.textSecondary};
+
+  span[kind] {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-bottom: 0.75rem;
+
+    :after {
+      font-size: 1.5rem;
+      color: ${({ theme: { palette } }) => palette.textSecondary};
+      opacity: 0.12;
+    }
+  }
+`;
+
+const DEFAULT_FILE_EXTENSIONS = ".txt,.csv,.py";
+const ElementUploader = memo(({ elementConfig, type }) => {
+    const { t, api } = useGlobalContext();
+    const { changeFilters } = useWidgetContext(type);
+    const [files, setFiles] = useState([]);
+    const refInput = useRef();
+    const { id, style, options } = elementConfig || {};
+    const { fileExtensions = DEFAULT_FILE_EXTENSIONS, multiSelect, parentResourceId, icon, title, filterName } = options || {};
+    const onUpload = useCallback(async (input) => {
+        const files = Array.isArray(input) ? input : [input];
+        const response = await Promise.all(files.map(file => {
+            return api.file.upload(file, true, parentResourceId || "", file.name);
+        }));
+        const uploadedFiles = response.map(item => ({
+            name: item.name,
+            id: item.resourceId,
+            done: true,
+        }));
+        setFiles(currentFiles => ([...uploadedFiles, ...currentFiles]));
+    }, [parentResourceId]);
+    const onDelete = useCallback(async (id) => {
+        const index = files.findIndex(file => file.id === id);
+        if (index === -1)
+            return;
+        const resourceId = files[index].id;
+        await api.file.deleteResource(resourceId);
+        setFiles(currentFiles => currentFiles.filter(({ id }) => id !== resourceId));
+    }, [files]);
+    const renderTitle = useMemo(() => {
+        if (files.length)
+            return null;
+        return (jsxs(UploaderTitle, { children: [jsx(Icon, { kind: icon || "upload" }), jsx("div", { children: title ?? t("uploadTitle", {
+                        ns: "dashboard",
+                        defaultValue: "Перетащите файл сюда или нажмите, чтобы выбрать",
+                    }) })] }));
+    }, [icon, t, title, files.length]);
+    useEffect(() => {
+        if (!filterName)
+            return;
+        changeFilters({ [filterName]: { value: files.map(({ id }) => id) } });
+    }, [files]);
+    return (jsx(UploaderContainer, { id: id, style: style, children: jsx("div", { children: jsx(Uploader, { currentRef: refInput, title: renderTitle, accept: fileExtensions, width: "100%", fileItems: files, isMultiple: multiSelect, onUpload: onUpload, onDelete: onDelete }) }) }));
+});
+
 const elementComponents = {
     image: ElementImage,
     slideshow: ElementSlideshow,
@@ -8201,6 +8213,7 @@ const elementComponents = {
     chart: ElementChart,
     legend: ElementLegend,
     markdown: ElementMarkdown,
+    uploader: ElementUploader,
 };
 
 const getElementValue = ({ getDefaultContainer, ...props }) => {
@@ -10256,12 +10269,12 @@ const ContainerChildren = memo(({ items, isColumn, isMain, renderElement }) => {
                 index,
                 wrap: isColumn || isMain,
             });
-            return isMain ? (jsx(ContainerWrapper, { id: item.id, "data-templatename": item.templateName, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(Fragment, { children: render }, index));
+            return isMain ? (jsx(ContainerWrapper, { "data-id": item.id, "data-templatename": item.templateName, "$noMargin": item.options?.noMargin, children: jsx(DashboardWrapper, { children: render }) }, index)) : (jsx(Fragment, { children: render }, index));
         }) }));
 });
 
 const DashboardLoading = memo(() => {
-    return (jsx(Container, { noBorders: true, children: jsx(ContainerWrapper, { children: jsx(DashboardWrapper, { children: jsx(DashboardPlaceholderWrap, { children: jsxs(DashboardPlaceholder, { isLoading: true, children: [jsx(Icon, { kind: "dashboard_loading" }), jsx(Flex, { width: "8rem", children: jsx(LinearProgress, {}) })] }) }) }) }) }));
+    return (jsx(Container, { noBorders: true, children: jsx(ContainerWrapper, { "$noMargin": true, children: jsx(DashboardWrapper, { children: jsx(DashboardPlaceholderWrap, { children: jsxs(DashboardPlaceholder, { isLoading: true, children: [jsx(Icon, { kind: "dashboard_loading" }), jsx(Flex, { width: "8rem", children: jsx(LinearProgress, {}) })] }) }) }) }) }));
 });
 
 const Dashboard = memo(({ type = WidgetType.Dashboard, config, noBorders }) => {