@redus/georedus-ui 0.8.6 → 0.8.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @orioro/template-react
 
+## 0.8.8
+
+### Patch Changes
+
+- add missing react import
+
+## 0.8.7
+
+### Patch Changes
+
+- fix share button bar and add questions & suggestions button
+
 ## 0.8.6
 
 ### Patch Changes

package/dist/ShareButtonBar/CopyToClipboardIconButton.d.ts

@@ -0,0 +1,13 @@
+export function CopyToClipboardButton({ text, label, ...props }: {
+    [x: string]: any;
+    text: any;
+    label: any;
+}): React.JSX.Element;
+export function CopyToClipboardIconButton({ text, label, children, copiedMessage, ...props }: {
+    [x: string]: any;
+    text: any;
+    label?: string | undefined;
+    children?: React.JSX.Element | undefined;
+    copiedMessage?: string | undefined;
+}): React.JSX.Element;
+import React from 'react';

package/dist/ShareButtonBar/ShareButtonBar.d.ts

@@ -0,0 +1,5 @@
+export function ShareButtonBar({ url, ...props }: {
+    [x: string]: any;
+    url: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/ShareButtonBar/index.d.ts

@@ -0,0 +1 @@
+export * from "./ShareButtonBar";

package/dist/main.js

@@ -3,8 +3,8 @@ import { MARKDOWN_DEFAULT_REMARK_PLUGINS, MARKDOWN_DEFAULT_REHYPE_PLUGINS, Markd
 import { nodeIdFromPath } from '@orioro/tree-model';
 import { makeDirNav } from '@orioro/react-dir-nav';
 import { Icon } from '@mdi/react';
-import { mdiHelpCircleOutline, mdiDownload, mdiDotsVertical, mdiOpacity, mdiFilterVariant, mdiHospitalBox, mdiHomeCity, mdiSchool, mdiAccountGroup, mdiChevronLeft, mdiShareVariantOutline, mdiDragVertical, mdiLayers, mdiClose } from '@mdi/js';
-import { Tabs, Tooltip, IconButton, Theme, Heading, Text, Dialog, Portal, Popover } from '@radix-ui/themes';
+import { mdiHelpCircleOutline, mdiDownload, mdiDotsVertical, mdiOpacity, mdiFilterVariant, mdiHospitalBox, mdiHomeCity, mdiSchool, mdiAccountGroup, mdiContentCopy, mdiLinkVariant, mdiChevronLeft, mdiShareVariantOutline, mdiForumOutline, mdiDragVertical, mdiLayers, mdiClose } from '@mdi/js';
+import { Tabs, Tooltip, IconButton, Theme, Heading, Text, Popover, Dialog, Portal } from '@radix-ui/themes';
 import styled, { keyframes } from 'styled-components';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { __makeTemplateObject, __assign, __spreadArray, __awaiter, __generator } from 'tslib';
@@ -12,10 +12,12 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
 import { isPlainObject, get, pick, omit, set, uniqBy, groupBy, uniq } from 'lodash';
-import { useDebounce } from 'react-use';
+import { useDebounce, useLocation } from 'react-use';
 import { createDialogSystem, DIALOGS } from '@orioro/react-dialogs';
 import { CsvImportDialog } from '@orioro/react-csv';
 import Highlighter from 'react-highlight-words';
+import { LinkedinShareButton, LinkedinIcon, EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, WhatsappShareButton, WhatsappIcon } from 'react-share';
+import CopyToClipboard from 'react-copy-to-clipboard';
 import { makeSortableMultiList } from '@orioro/react-sortable';
 import { fmtLayerAbsoluteId, makeSyncedMaps, LayeredMap, HoverTooltip, ControlContainer, InspectControl, MapWindow, TerrainControl, fitGeometry } from '@orioro/react-maplibre-util';
 import '@maplibre/maplibre-gl-inspect/dist/maplibre-gl-inspect.css';
@@ -800,9 +802,9 @@ function ViewConfTabs(_ref) {
   }, "Visualiza\xE7\xE3o habilitada"));
 }
 
-var _excluded$4 = ["textSearch", "content", "maxLines"];
-var _templateObject$3, _templateObject2$2;
-var Container = styled(Box)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  --view-control-base-padding: 12px;\n  box-shadow:\n    rgba(0, 0, 0, 0.12) 0px 1px 3px,\n    rgba(0, 0, 0, 0.24) 0px 1px 2px;\n\n  border-radius: 2px;\n  background-color: var(--redus-bege, white);\n  // background-color: var(--accent-4, white);\n"])));
+var _excluded$5 = ["textSearch", "content", "maxLines"];
+var _templateObject$4, _templateObject2$2;
+var Container$1 = styled(Box)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  --view-control-base-padding: 12px;\n  box-shadow:\n    rgba(0, 0, 0, 0.12) 0px 1px 3px,\n    rgba(0, 0, 0, 0.24) 0px 1px 2px;\n\n  border-radius: 2px;\n  background-color: var(--redus-bege, white);\n  // background-color: var(--accent-4, white);\n"])));
 var Summary = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  // background-color: var(--redus-bege, white);\n  background-color: ", ";\n  padding: 0;\n\n  transition: background-color 0.1s ease-out;\n\n  display: flex;\n  border: none;\n  text-align: left;\n  width: 100%;\n\n  cursor: pointer;\n\n  &:hover {\n    // background-color: color-mix(in srgb, var(--redus-bege) 80%, white);\n    background-color: ", ";\n  }\n\n  &:active {\n    filter: brightness(96%);\n  }\n"])), function (_ref) {
   var $active = _ref.$active;
   return $active ? 'var(--redus-bege, white)' : 'var(--accent-2)';
@@ -828,7 +830,7 @@ function HeadingWithTooltipAndEllipsis(_ref7) {
     content = _ref7.content,
     _ref7$maxLines = _ref7.maxLines,
     maxLines = _ref7$maxLines === void 0 ? 2 : _ref7$maxLines,
-    props = _objectWithoutProperties(_ref7, _excluded$4);
+    props = _objectWithoutProperties(_ref7, _excluded$5);
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content
   }, /*#__PURE__*/React.createElement(Heading, _extends({
@@ -869,7 +871,7 @@ function ViewControl(_ref8) {
   }, [active, deactivateView, setView]);
   return viewSpec && /*#__PURE__*/React.createElement(Collapsible.Root, {
     open: configurable === true && active
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Summary, {
+  }, /*#__PURE__*/React.createElement(Container$1, null, /*#__PURE__*/React.createElement(Summary, {
     type: "button",
     role: "button",
     style: style,
@@ -937,8 +939,8 @@ function ViewControl(_ref8) {
 
 var VIEW_TYPE_SURFACE_CHOROPLETH = 'surface_choropleth';
 
-var _excluded$3 = ["viewSpecs", "viewConfState", "resolvedViews", "onSetView", "onDeactivateView", "style"];
-var _templateObject$2, _templateObject2$1;
+var _excluded$4 = ["viewSpecs", "viewConfState", "resolvedViews", "onSetView", "onDeactivateView", "style"];
+var _templateObject$3, _templateObject2$1;
 var STATIC_NODE_ICONS = {
   'populacao-e-domicilios': /*#__PURE__*/React.createElement(Icon, {
     path: mdiAccountGroup
@@ -961,7 +963,7 @@ var ViewMenuContext = /*#__PURE__*/createContext({
   onSetView: errNoViewMenuContext,
   onDeactivateView: errNoViewMenuContext
 });
-var ActiveCounter = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(-30%, -30%);\n  border-radius: 50%;\n  border: 1px solid white;\n  height: 20px;\n  width: 20px;\n  font-size: 12px;\n  background-color: var(--accent-9);\n  color: white;\n  font-weight: bold;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var ActiveCounter = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(-30%, -30%);\n  border-radius: 50%;\n  border: 1px solid white;\n  height: 20px;\n  width: 20px;\n  font-size: 12px;\n  background-color: var(--accent-9);\n  color: white;\n  font-weight: bold;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 function Item(_ref) {
   var node = _ref.node;
     _ref.depth;
@@ -1079,7 +1081,7 @@ function ViewMenu(_ref4) {
     onSetView = _ref4.onSetView,
     onDeactivateView = _ref4.onDeactivateView,
     style = _ref4.style,
-    props = _objectWithoutProperties(_ref4, _excluded$3);
+    props = _objectWithoutProperties(_ref4, _excluded$4);
   var viewSpecsById = useMemo(function () {
     return Object.fromEntries(viewSpecs.map(function (spec) {
       return [spec.id, spec];
@@ -1230,6 +1232,101 @@ function GeoReDUSLogoText() {
   }))));
 }
 
+var _excluded2 = ["text", "label", "children", "copiedMessage"];
+var DEFAULT_ICON = /*#__PURE__*/React.createElement(Icon, {
+  path: mdiContentCopy,
+  size: "18px"
+});
+function CopyToClipboardIconButton(_ref2) {
+  var text = _ref2.text,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Copiar' : _ref2$label,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? DEFAULT_ICON : _ref2$children,
+    _ref2$copiedMessage = _ref2.copiedMessage,
+    copiedMessage = _ref2$copiedMessage === void 0 ? 'Copiado!' : _ref2$copiedMessage,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    copied = _useState4[0],
+    setCopied = _useState4[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popover.Root, {
+    open: copied
+  }, /*#__PURE__*/React.createElement(CopyToClipboard, {
+    text: text
+  }, /*#__PURE__*/React.createElement(Popover.Trigger, null, /*#__PURE__*/React.createElement(IconButton, _extends({
+    asChild: true,
+    radius: "full"
+  }, props), /*#__PURE__*/React.createElement("button", {
+    onClick: function onClick() {
+      setCopied(true);
+      setTimeout(function () {
+        setCopied(function () {
+          return false;
+        });
+      }, 2500);
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: label,
+    sideOffset: 10
+  }, children))))), /*#__PURE__*/React.createElement(Popover.Content, {
+    align: "center",
+    size: "1",
+    style: {
+      fontSize: '.8rem',
+      padding: 8
+    },
+    maxWidth: 60
+  }, copiedMessage)));
+}
+
+var _excluded$3 = ["url"];
+var _templateObject$2;
+var Container = styled(Flex)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  > * {\n    height: 32px;\n  }\n"])));
+var ShareButtonBar = function ShareButtonBar(_ref) {
+  var url = _ref.url,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  var _useLocation = useLocation(),
+    href = _useLocation.href;
+  var shareUrl = url ? url : href;
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    direction: "row",
+    gap: "3"
+  }, props), /*#__PURE__*/React.createElement(CopyToClipboardIconButton, {
+    label: "Copiar link de compartilhamento",
+    copiedMessage: "Link copiado para \xE1rea de transfer\xEAncia",
+    text: shareUrl
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiLinkVariant,
+    size: "18px"
+  })), /*#__PURE__*/React.createElement(LinkedinShareButton, {
+    url: shareUrl
+  }, /*#__PURE__*/React.createElement(LinkedinIcon, {
+    size: 32,
+    round: true
+  })), /*#__PURE__*/React.createElement(EmailShareButton, {
+    url: shareUrl
+  }, /*#__PURE__*/React.createElement(EmailIcon, {
+    size: 32,
+    round: true
+  })), /*#__PURE__*/React.createElement(FacebookShareButton, {
+    url: shareUrl
+  }, /*#__PURE__*/React.createElement(FacebookIcon, {
+    size: 32,
+    round: true
+  })), /*#__PURE__*/React.createElement(TwitterShareButton, {
+    url: shareUrl
+  }, /*#__PURE__*/React.createElement(TwitterIcon, {
+    size: 32,
+    round: true
+  })), /*#__PURE__*/React.createElement(WhatsappShareButton, {
+    url: shareUrl
+  }, /*#__PURE__*/React.createElement(WhatsappIcon, {
+    size: 32,
+    round: true
+  })));
+};
+
 //
 // html2canvas does not support color functions
 // radix uses: oklch and color(...)
@@ -1269,7 +1366,7 @@ function SharePanel(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.Title, null, "Compartilhar"), /*#__PURE__*/React.createElement(Flex, {
     direction: "row",
     gap: "4"
-  }, "ShareButtonBar"));
+  }, /*#__PURE__*/React.createElement(ShareButtonBar, null)));
 }
 
 var _templateObject$1;
@@ -1418,6 +1515,7 @@ function LeftPanel(_ref) {
       },
       pb: "3",
       direction: "column",
+      gap: "3",
       justifyContent: "flex-end",
       alignItems: "center"
     }, /*#__PURE__*/React.createElement(IconButton, {
@@ -1438,10 +1536,25 @@ function LeftPanel(_ref) {
           }
         }, _callee);
       }))
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: "Compartilhar"
     }, /*#__PURE__*/React.createElement(Icon, {
       path: mdiShareVariantOutline,
       size: "24px"
-    })))
+    }))), /*#__PURE__*/React.createElement(IconButton, {
+      variant: "soft",
+      size: "3",
+      asChild: true
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "https://www.redus.org.br/georedus-rede-de-dados-urbanos/formularios/cbf766bb-9a74-4bc5-897a-70b9151afbdb",
+      target: "_blank",
+      rel: "noreferrer nofollow"
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: "D\xFAvidas e sugest\xF5es"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      path: mdiForumOutline,
+      size: "24px"
+    })))))
   }) : /*#__PURE__*/React.createElement("div", {
     style: {
       flexGrow: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redus/georedus-ui",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "packageManager": "yarn@4.0.2",
   "type": "module",
   "main": "dist/main.js",
@@ -72,7 +72,9 @@
     "katex": "^0.16.22",
     "lodash": "^4.17.21",
     "query-string": "^9.1.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-highlight-words": "^0.21.0",
+    "react-share": "^5.1.0",
     "react-use": "^17.5.0",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",