@evergis/react 3.1.80 → 3.1.81
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.
- package/dist/components/Dashboard/containers/EditContainer/index.d.ts +3 -0
- package/dist/components/Dashboard/containers/registry.d.ts +1 -0
- package/dist/components/Dashboard/elements/ElementControl/index.d.ts +3 -0
- package/dist/components/Dashboard/elements/index.d.ts +1 -0
- package/dist/components/Dashboard/elements/registry.d.ts +1 -0
- package/dist/components/Dashboard/hooks/useWidgetConfig.d.ts +2 -1
- package/dist/components/Dashboard/types.d.ts +1 -0
- package/dist/index.js +63 -16
- package/dist/index.js.map +1 -1
- package/dist/react.esm.js +64 -18
- package/dist/react.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -29,5 +29,6 @@ export declare const containerComponents: {
|
|
|
29
29
|
readonly ExportPdf: import('react').FC<import('../types').ContainerProps>;
|
|
30
30
|
readonly Upload: import('react').FC<import('../types').ContainerProps>;
|
|
31
31
|
readonly Task: import('react').FC<import('../types').ContainerProps>;
|
|
32
|
+
readonly Edit: import('react').FC<import('../types').ContainerProps>;
|
|
32
33
|
readonly default: import('react').FC<import('../types').ContainerProps>;
|
|
33
34
|
};
|
|
@@ -3,6 +3,7 @@ export * from './ElementCamera';
|
|
|
3
3
|
export * from './ElementCamera/styled';
|
|
4
4
|
export * from './ElementChart';
|
|
5
5
|
export * from './ElementChips';
|
|
6
|
+
export * from './ElementControl';
|
|
6
7
|
export * from './ElementIcon';
|
|
7
8
|
export * from './ElementImage';
|
|
8
9
|
export * from './ElementLegend';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export declare const elementComponents: {
|
|
2
|
+
readonly control: import('react').FC<import('..').ContainerProps>;
|
|
2
3
|
readonly image: import('react').FC<import('..').ContainerProps>;
|
|
3
4
|
readonly slideshow: import('react').FC<import('./ElementSlideshow/types').DashboardSlideshowProps>;
|
|
4
5
|
readonly svg: import('react').FC<import('..').ContainerProps>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { ConfigContainerChild, WidgetType } from '../types';
|
|
1
|
+
import { ConfigContainer, ConfigContainerChild, WidgetType } from '../types';
|
|
2
2
|
export declare const useWidgetConfig: (type?: WidgetType) => {
|
|
3
3
|
config: any;
|
|
4
|
+
editConfig: ConfigContainer;
|
|
4
5
|
pages: ConfigContainerChild[];
|
|
5
6
|
};
|
package/dist/index.js
CHANGED
|
@@ -3387,6 +3387,7 @@ exports.ContainerTemplate = void 0;
|
|
|
3387
3387
|
ContainerTemplate["ExportPdf"] = "ExportPdf";
|
|
3388
3388
|
ContainerTemplate["Upload"] = "Upload";
|
|
3389
3389
|
ContainerTemplate["Task"] = "Task";
|
|
3390
|
+
ContainerTemplate["Edit"] = "Edit";
|
|
3390
3391
|
ContainerTemplate["Divider"] = "Divider";
|
|
3391
3392
|
})(exports.ContainerTemplate || (exports.ContainerTemplate = {}));
|
|
3392
3393
|
exports.HeaderTemplate = void 0;
|
|
@@ -5163,14 +5164,16 @@ const Container = styled(uilibGl.Flex) `
|
|
|
5163
5164
|
|
|
5164
5165
|
${({ isColumn }) => isColumn
|
|
5165
5166
|
? styled.css `
|
|
5166
|
-
|
|
5167
|
-
|
|
5168
|
-
|
|
5167
|
+
&&& > * {
|
|
5168
|
+
justify-content: flex-start;
|
|
5169
|
+
}
|
|
5170
|
+
> * {
|
|
5171
|
+
width: 100%;
|
|
5169
5172
|
|
|
5170
|
-
|
|
5171
|
-
|
|
5172
|
-
}
|
|
5173
|
+
:not(:last-child) {
|
|
5174
|
+
margin-bottom: 1.5rem;
|
|
5173
5175
|
}
|
|
5176
|
+
}
|
|
5174
5177
|
`
|
|
5175
5178
|
: styled.css `
|
|
5176
5179
|
flex-direction: row;
|
|
@@ -6501,16 +6504,6 @@ const TitleContainer = React.memo(({ containerId, templateName, layerNames, font
|
|
|
6501
6504
|
return (jsxRuntime.jsx(Container, { id: id, style: style, isTitle: isVisible, children: jsxRuntime.jsxs(ContainerTitle, { simple: simple, children: [jsxRuntime.jsxs(ContainerIconTitle, { fontColor: fontColor, children: [renderElement({ id: "titleIcon", wrap: false }), renderElement({ id: "title" }), !!downloadById && (jsxRuntime.jsx(uilibGl.IconButton, { kind: "download", onClick: onExport })), isLayers && renderToggler] }), !isLayers && renderToggler, renderVisibility] }) }));
|
|
6502
6505
|
});
|
|
6503
6506
|
|
|
6504
|
-
const ContainerDivider = styled(uilibGl.Divider) `
|
|
6505
|
-
width: 100%;
|
|
6506
|
-
border-color: ${({ theme: { palette }, $bgColor }) => $bgColor || palette.elementDeep};
|
|
6507
|
-
`;
|
|
6508
|
-
|
|
6509
|
-
const DividerContainer = React.memo(({ elementConfig, config }) => {
|
|
6510
|
-
const { id, style } = elementConfig || {};
|
|
6511
|
-
return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
|
|
6512
|
-
});
|
|
6513
|
-
|
|
6514
6507
|
const SlideshowContainer = React.memo(({ config, elementConfig, type }) => {
|
|
6515
6508
|
const { pageIndex, expandedContainers, selectedTabId, setSelectedTabId, dataSources } = useWidgetContext(type);
|
|
6516
6509
|
const { attributes, layerInfo } = useRelatedDataSourceAttributes({
|
|
@@ -6963,6 +6956,21 @@ const TaskContainer = React.memo(({ type, elementConfig, renderElement }) => {
|
|
|
6963
6956
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxRuntime.jsxs(uilibGl.Flex, { justifyContent: center ? "center" : "flex-start", children: [jsxRuntime.jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uilibGl.IconButton, { kind: "info", onClick: openLog }), jsxRuntime.jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: closeLog })] }))] })] }));
|
|
6964
6957
|
});
|
|
6965
6958
|
|
|
6959
|
+
const EditContainer = ({ type, elementConfig, renderElement }) => {
|
|
6960
|
+
const { id, style } = elementConfig || {};
|
|
6961
|
+
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" }) })] })] }));
|
|
6962
|
+
};
|
|
6963
|
+
|
|
6964
|
+
const ContainerDivider = styled(uilibGl.Divider) `
|
|
6965
|
+
width: 100%;
|
|
6966
|
+
border-color: ${({ theme: { palette }, $bgColor }) => $bgColor || palette.elementDeep};
|
|
6967
|
+
`;
|
|
6968
|
+
|
|
6969
|
+
const DividerContainer = React.memo(({ elementConfig, config }) => {
|
|
6970
|
+
const { id, style } = elementConfig || {};
|
|
6971
|
+
return (jsxRuntime.jsx(Container, { id: id, style: style, children: jsxRuntime.jsx(ContainerDivider, { "$bgColor": config?.options?.bgColor }) }));
|
|
6972
|
+
});
|
|
6973
|
+
|
|
6966
6974
|
const containerComponents = {
|
|
6967
6975
|
[exports.ContainerTemplate.DefaultAttributes]: DefaultAttributesContainer,
|
|
6968
6976
|
[exports.ContainerTemplate.Pages]: PagesContainer,
|
|
@@ -6986,6 +6994,7 @@ const containerComponents = {
|
|
|
6986
6994
|
[exports.ContainerTemplate.ExportPdf]: ExportPdfContainer,
|
|
6987
6995
|
[exports.ContainerTemplate.Upload]: UploadContainer,
|
|
6988
6996
|
[exports.ContainerTemplate.Task]: TaskContainer,
|
|
6997
|
+
[exports.ContainerTemplate.Edit]: EditContainer,
|
|
6989
6998
|
default: ContainersGroupContainer,
|
|
6990
6999
|
};
|
|
6991
7000
|
|
|
@@ -7759,6 +7768,38 @@ const ElementChips = React.memo(({ type, elementConfig }) => {
|
|
|
7759
7768
|
return (jsxRuntime.jsx(DashboardChipsContainer, { style: style, children: tags?.map(tag => (jsxRuntime.jsx(DashboardChip$1, { text: tag, "$bgColor": colorAttr?.value || bgColor, "$fontColor": fontColor, "$fontSize": fontSize, "$isDefault": !colorAttr?.value }, tag))) }));
|
|
7760
7769
|
});
|
|
7761
7770
|
|
|
7771
|
+
const ElementControl = ({ elementConfig }) => {
|
|
7772
|
+
const { t } = useGlobalContext();
|
|
7773
|
+
const { dataSources, filters, changeFilters } = useWidgetContext(exports.WidgetType.FeatureCard);
|
|
7774
|
+
const { options, attributeName } = elementConfig || {};
|
|
7775
|
+
const { filterName, relatedDataSource, label, placeholder = t("selectValue", { ns: "dashboard", defaultValue: "Выберите значение" }) } = options || {};
|
|
7776
|
+
// Получаем данные из datasource
|
|
7777
|
+
const dataSource = React.useMemo(() => getDataSource(relatedDataSource, dataSources), [relatedDataSource, dataSources]);
|
|
7778
|
+
// Формируем опции для dropdown из features datasource
|
|
7779
|
+
const items = React.useMemo(() => {
|
|
7780
|
+
if (!dataSource?.features?.length || !attributeName) {
|
|
7781
|
+
return [];
|
|
7782
|
+
}
|
|
7783
|
+
return dataSource.features.map((feature, index) => ({
|
|
7784
|
+
id: feature.id || index,
|
|
7785
|
+
value: feature.attributes?.[attributeName] || "",
|
|
7786
|
+
label: feature.attributes?.[attributeName] || "",
|
|
7787
|
+
}));
|
|
7788
|
+
}, [dataSource, attributeName]);
|
|
7789
|
+
// Получаем текущее выбранное значение
|
|
7790
|
+
const selectedItem = React.useMemo(() => items.find(opt => opt.value === filters?.[filterName]?.value), [items, filters, filterName]);
|
|
7791
|
+
const handleChange = React.useCallback((option) => {
|
|
7792
|
+
if (changeFilters && filterName) {
|
|
7793
|
+
changeFilters({
|
|
7794
|
+
[filterName]: {
|
|
7795
|
+
value: option?.value || null,
|
|
7796
|
+
},
|
|
7797
|
+
});
|
|
7798
|
+
}
|
|
7799
|
+
}, [changeFilters, filterName]);
|
|
7800
|
+
return (jsxRuntime.jsx(uilibGl.Dropdown, { label: label, options: items, value: selectedItem, onChange: handleChange, width: "100%", placeholder: placeholder }));
|
|
7801
|
+
};
|
|
7802
|
+
|
|
7762
7803
|
const StyledIconFontSizeMixin = styled.css `
|
|
7763
7804
|
height: ${({ fontSize }) => `${fontSize}px`};
|
|
7764
7805
|
|
|
@@ -8398,6 +8439,7 @@ const ElementUploader = React.memo(({ elementConfig, type }) => {
|
|
|
8398
8439
|
});
|
|
8399
8440
|
|
|
8400
8441
|
const elementComponents = {
|
|
8442
|
+
control: ElementControl,
|
|
8401
8443
|
image: ElementImage,
|
|
8402
8444
|
slideshow: ElementSlideshow,
|
|
8403
8445
|
svg: ElementSvg,
|
|
@@ -9599,9 +9641,13 @@ const useWidgetConfig = (type = exports.WidgetType.Dashboard) => {
|
|
|
9599
9641
|
}
|
|
9600
9642
|
return currentConfig;
|
|
9601
9643
|
}, [configProp, containerIds, layerInfo?.configuration?.cardConfiguration, projectInfo?.content?.dashboardConfiguration, type]);
|
|
9644
|
+
const editConfig = React.useMemo(() => type === exports.WidgetType.Dashboard
|
|
9645
|
+
? (projectInfo?.content?.editConfiguration || {})
|
|
9646
|
+
: (layerInfo?.configuration?.editConfiguration || {}), []);
|
|
9602
9647
|
const pages = React.useMemo(() => (getPagesFromConfig(config) || []), [config]);
|
|
9603
9648
|
return {
|
|
9604
9649
|
config,
|
|
9650
|
+
editConfig,
|
|
9605
9651
|
pages,
|
|
9606
9652
|
};
|
|
9607
9653
|
};
|
|
@@ -11153,6 +11199,7 @@ exports.ElementButton = ElementButton;
|
|
|
11153
11199
|
exports.ElementCamera = ElementCamera;
|
|
11154
11200
|
exports.ElementChart = ElementChart;
|
|
11155
11201
|
exports.ElementChips = ElementChips;
|
|
11202
|
+
exports.ElementControl = ElementControl;
|
|
11156
11203
|
exports.ElementIcon = ElementIcon;
|
|
11157
11204
|
exports.ElementImage = ElementImage;
|
|
11158
11205
|
exports.ElementLegend = ElementLegend;
|