@evergis/react 2.0.133 → 2.0.135

package/dist/components/MapLegend/MapLegend.d.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-import { LegendProps } from '../Legend';
-declare type MapLegendProps = LegendProps & {
-    fromToTitle?: [string, string];
-    className?: string;
-};
+import { MapLegendProps } from "./types";
 export declare const MapLegend: React.FC<MapLegendProps>;
-export {};

package/dist/components/MapLegend/index.d.ts

@@ -1,3 +1,3 @@
 export * from './MapLegend';
 export * from './MapLegendSymbol';
-export { MapLegendContainer, MapLegendHeader, MapLegendSection, } from './styled';
+export { MapLegendContainer, MapLegendHeader, } from './styled';

package/dist/components/MapLegend/styled.d.ts

@@ -1,5 +1,17 @@
 export declare const MapLegendControl: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MapLegendContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MapLegendHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MapLegendSection: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MapLegendValueDescr: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MapLegendItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MapLegendItem: import("styled-components").StyledComponent<"div", any, {
+    value?: string | undefined;
+}, never>;
+export declare const MapLegendOther: import("styled-components").StyledComponent<"div", any, {
+    value?: string | undefined;
+}, never>;
+export declare const MapLegendValues: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MapLegendValuesRange: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MapLegendValuesOther: import("styled-components").StyledComponent<"div", any, {
+    value?: string | undefined;
+}, never>;
+export declare const MapLegendExpandButton: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,5 @@
+import { LegendProps } from "../Legend";
+export declare type MapLegendProps = LegendProps & {
+    fromToTitle?: [string, string];
+    className?: string;
+};

package/dist/react.cjs.development.js

@@ -2793,7 +2793,7 @@ const pointFeature = /*#__PURE__*/new PointFeature.PointFeature([50, -50], {
 const lineFeature = /*#__PURE__*/new Polyline.Polyline([[0, -57], [26, -57], [40, -35], [60, -65], [74, -43], [100, -43]], {
   crs: Crs.plain
 });
-const polygonFeature = /*#__PURE__*/new Polygon.Polygon([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
+const polygonFeature = /*#__PURE__*/new Polygon.Polygon([[20, -20], [80, -20], [80, -80], [20, -80]], {
   crs: Crs.plain
 });
 const h3gridFeature = /*#__PURE__*/new H3Feature.H3Feature([[50, -15], [80, -33], [80, -67], [50, -85], [20, -67], [20, -33], [50, -15]], {
@@ -4673,9 +4673,9 @@ const EvergisSelect = _ref => {
 var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1;
 const LegendContainer = /*#__PURE__*/styled__default.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #fff;\n\n  canvas {\n    border-radius: 0.125rem;\n  }\n"])));
 const LegendSectionContainer = /*#__PURE__*/styled__default.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-const LegendSymbolTitle = /*#__PURE__*/styled__default.p(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 0;\n"])));
-const LegendValueContainer = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.625rem;\n  padding: 0.125rem 0;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
-const LegendSectionHeader = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])));
+const LegendSymbolTitle = /*#__PURE__*/styled__default.p(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])));
+const LegendValueContainer = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 0.75rem;\n  padding: 0.125rem 0;\n\n  ", " {\n    padding-left: 0.5rem;\n  }\n"])), LegendSymbolTitle);
+const LegendSectionHeader = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 0.75rem;\n  font-weight: 500;\n"])));
 
 const LegendSection = _ref => {
   let {
@@ -4938,39 +4938,39 @@ const Fullscreen = () => {
   }));
 };
 
-var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4;
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
 const MapLegendControl = /*#__PURE__*/styled__default(MapControl)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: default;\n"])));
-const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 16.5rem;\n  height: 3.875rem;\n  align-items: center;\n  padding: 0.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 0.835rem;\n  }\n"])));
-const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n"])));
-const MapLegendSection = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  font-size: 0.625rem;\n  opacity: 0.65;\n"])));
-
-const MAX_SIZE$2 = 100;
-const MapLegendSymbol = _ref => {
+const MapLegendContainer = /*#__PURE__*/styled__default.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 12.5rem;\n  box-sizing: border-box;\n\n  canvas {\n    height: 1rem;\n    width: 1rem;\n  }\n"])));
+const MapLegendHeader = /*#__PURE__*/styled__default(LegendSectionHeader)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0.25rem 0;\n  font-weight: 500;\n"])));
+const MapLegendValueDescr = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 0.25rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n"])));
+const MapLegendItems = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  border-radius: 0.125rem;\n  overflow: hidden;\n"])));
+const MapLegendItem = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 1rem;\n  background-color: ", ";\n  border: 1px rgba(48, 69, 79, 0.1) solid;\n"])), _ref => {
   let {
-    value,
-    parameter
+    value
   } = _ref;
-  return React__default.createElement(LegendSymbol, {
-    key: value.title,
-    parameter: parameter,
-    parameterValue: value.parameterValue
-  }, symbol => React__default.createElement(Symbol, {
-    render: getMapLegendSymbolRenders,
-    symbol: symbol,
-    size: MAX_SIZE$2
-  }));
+  return value;
+});
+const MapLegendOther = /*#__PURE__*/styled__default(MapLegendItem)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: none;\n  width: 1rem;\n  margin-left: 0.25rem;\n  border-radius: 0.125rem;\n  overflow: hidden;\n"])));
+const MapLegendValues = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  font-size: 0.75rem;\n  color: rgba(48, 69, 79, 0.65);\n"])));
+const MapLegendValuesRange = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const MapLegendValuesOther = /*#__PURE__*/styled__default(MapLegendOther)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  text-align: center;\n  overflow: visible;\n"])));
+const MapLegendExpandButton = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin: 0.1rem 0 0.5rem;\n  font-size: 0.625rem;\n  color: #1FB3AA;\n"])));
+
+const getValueFromLegendTitle = (title, minOrMax) => {
+  const result = title == null ? void 0 : title.split(" - ");
+  return minOrMax === "min" ? result == null ? void 0 : result[0] : result == null ? void 0 : result[1];
 };
 
-const DEFAULT_FROM_TO = ['Выше', 'Ниже'];
 const MapLegend = _ref => {
+  var _symbol$fill, _item$values$, _item$values;
+
   let {
     layer,
     config,
-    fromToTitle = DEFAULT_FROM_TO,
     className
   } = _ref;
   const legend = useMapLegend(layer, config);
+  const [isExpanded, toggleExpanded] = ui.useToggle();
 
   if (!legend) {
     return null;
@@ -4984,11 +4984,35 @@ const MapLegend = _ref => {
     symbol: symbol
   }, React__default.createElement(MapLegendControl, {
     className: className
-  }, React__default.createElement(MapLegendContainer, null, React__default.createElement(MapLegendHeader, null, item.title), React__default.createElement(MapLegendSection, null, React__default.createElement(MapLegendValueDescr, null, fromToTitle[0]), item.values.map(value => React__default.createElement(MapLegendSymbol, {
+  }, React__default.createElement(MapLegendHeader, null, layer == null ? void 0 : layer.alias), React__default.createElement(MapLegendContainer, null, isExpanded ? React__default.createElement(Legend, {
+    layer: layer
+  }) : React__default.createElement(React__default.Fragment, null, React__default.createElement(MapLegendValueDescr, null, item.title), React__default.createElement(MapLegendItems, null, item.values.map(value => React__default.createElement(MapLegendItem, {
     key: value.title,
-    value: value,
-    parameter: item.parameter
-  })), React__default.createElement(MapLegendValueDescr, null, fromToTitle[1])))));
+    title: value.title,
+    value: value.parameterValue
+  })), React__default.createElement(MapLegendOther, {
+    title: "\u0414\u0440\u0443\u0433\u043E\u0435",
+    value: (_symbol$fill = symbol.fill) == null ? void 0 : _symbol$fill.color
+  })), React__default.createElement(MapLegendValues, null, React__default.createElement(MapLegendValuesRange, null, React__default.createElement("div", null, getValueFromLegendTitle((_item$values$ = item.values[0]) == null ? void 0 : _item$values$.title, "max")), React__default.createElement("div", null, getValueFromLegendTitle((_item$values = item.values[item.values.length - 1]) == null ? void 0 : _item$values.title, "min"))), React__default.createElement(MapLegendValuesOther, null, "-"))), React__default.createElement(MapLegendExpandButton, {
+    onClick: toggleExpanded
+  }, isExpanded ? "Свернуть" : "Развернуть"))));
+};
+
+const MAX_SIZE$2 = 100;
+const MapLegendSymbol = _ref => {
+  let {
+    value,
+    parameter
+  } = _ref;
+  return React__default.createElement(LegendSymbol, {
+    key: value.title,
+    parameter: parameter,
+    parameterValue: value.parameterValue
+  }, symbol => React__default.createElement(Symbol, {
+    render: getMapLegendSymbolRenders,
+    symbol: symbol,
+    size: MAX_SIZE$2
+  }));
 };
 
 let MeasureTool = /*#__PURE__*/function (_React$Component) {
@@ -5256,7 +5280,7 @@ const ZoomLevel = () => {
   }, level || 0);
 };
 
-var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var _templateObject$8, _templateObject2$7, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$2;
 
 const cornerBottom = cornerSize => styled.css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  &:before {\n    left: 50%;\n    transform: translate(-50%, 100%);\n    bottom: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid rgba(28, 33, 48, 0.8);\n  }\n"])), cornerSize, cornerSize, cornerSize);
 
@@ -5268,21 +5292,21 @@ const cornerTop = cornerSize => styled.css(_templateObject4$5 || (_templateObjec
 
 const top = (distance, cornerSize) => styled.css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  bottom: ", ";\n  ", "\n"])), distance, cornerSize && cornerBottom(cornerSize));
 
-const right = (distance, cornerSize) => styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  left: ", ";\n  ", "\n"])), distance, cornerSize && cornerLeft(cornerSize));
+const right = (distance, cornerSize) => styled.css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  left: ", ";\n  ", "\n"])), distance, cornerSize && cornerLeft(cornerSize));
 
-const left = (distance, cornerSize) => styled.css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  right: ", ";\n  ", "\n"])), distance, cornerSize && cornerRight(cornerSize));
+const left = (distance, cornerSize) => styled.css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  transform: translate(0, -50%);\n  top: -50%;\n  right: ", ";\n  ", "\n"])), distance, cornerSize && cornerRight(cornerSize));
 
-const bottom = (distance, cornerSize) => styled.css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  top: ", ";\n  ", "\n"])), distance, cornerSize && cornerTop(cornerSize));
+const bottom = (distance, cornerSize) => styled.css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  transform: translate(-50%, 0);\n  left: -50%;\n  top: ", ";\n  ", "\n"])), distance, cornerSize && cornerTop(cornerSize));
 
 const placementMixin$1 = function placementMixin(placement, distance, cornerSize) {
   if (placement === void 0) {
     placement = 'top';
   }
 
-  return styled.css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top' && top(distance, cornerSize), placement === 'right' && right(distance, cornerSize), placement === 'left' && left(distance, cornerSize), placement === 'bottom' && bottom(distance, cornerSize));
+  return styled.css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), placement === 'top' && top(distance, cornerSize), placement === 'right' && right(distance, cornerSize), placement === 'left' && left(distance, cornerSize), placement === 'bottom' && bottom(distance, cornerSize));
 };
-const corner = /*#__PURE__*/styled.css(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"])));
-const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), _ref => {
+const corner = /*#__PURE__*/styled.css(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:before {\n    content: '';\n    width: 0;\n    height: 0;\n    position: absolute;\n  }\n"])));
+const TooltipComponent = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 999;\n  display: flex;\n  font-size: 0.625rem;\n  color: #fff;\n  background-color: rgba(28, 33, 48, 0.8);\n  padding: 0.4em 0.6em;\n  border-radius: 2px;\n  user-select: none;\n  box-sizing: border-box;\n  white-space: pre;\n  ", "\n  ", "\n"])), _ref => {
   let {
     placement,
     distance = '0.5rem',
@@ -5419,7 +5443,6 @@ exports.MapControls = MapControls;
 exports.MapLegend = MapLegend;
 exports.MapLegendContainer = MapLegendContainer;
 exports.MapLegendHeader = MapLegendHeader;
-exports.MapLegendSection = MapLegendSection;
 exports.MapLegendSymbol = MapLegendSymbol;
 exports.MapProvider = MapProvider;
 exports.Measure = Measure;
@@ -5480,7 +5503,6 @@ exports.getDashStylePreset = getDashStylePreset;
 exports.getFeatureSymbol = getFeatureSymbol;
 exports.getLegendSymbolRenders = getLegendSymbolRenders;
 exports.getLineDash = getLineDash;
-exports.getLineMiterRender = getLineMiterRender;
 exports.getMapLegendSymbolRenders = getMapLegendSymbolRenders;
 exports.getMapState = getMapState;
 exports.getParameterValue = getParameterValue;