ywana-core8 0.0.751 → 0.0.753

package/dist/index.cjs

@@ -203,6 +203,29 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+/**
+ * Tooltip
+ */
+
+var Tooltip = function Tooltip(props) {
+  var _props$text = props.text,
+      text = _props$text === void 0 ? "" : _props$text,
+      _props$top = props.top,
+      top = _props$top === void 0 ? "1rem" : _props$top,
+      _props$left = props.left,
+      left = _props$left === void 0 ? "1rem" : _props$left;
+  var style = {
+    top: top,
+    left: left
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "tooltip"
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "tooltip-text",
+    style: style
+  }, text), props.children);
+};
+
 /**
  * Icon 
  */
@@ -211,6 +234,7 @@ var Icon = function Icon(_ref) {
   var icon = _ref.icon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "normal" : _ref$size,
+      tooltip = _ref.tooltip,
       _ref$clickable = _ref.clickable,
       clickable = _ref$clickable === void 0 ? false : _ref$clickable,
       _ref$disabled = _ref.disabled,
@@ -230,7 +254,10 @@ var Icon = function Icon(_ref) {
   }
 
   var style = disabled ? "disabled" : clickable ? "clickable" : "";
-  return /*#__PURE__*/React__default["default"].createElement("i", {
+  return tooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, tooltip, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "icon " + size + " " + style + " " + className + " material-icons",
+    onClick: click
+  }, icon)) : /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon " + size + " " + style + " " + className + " material-icons",
     onClick: click
   }, icon);
@@ -752,6 +779,7 @@ var ListItem = function ListItem(_ref) {
       onSelect = _ref.onSelect;
   var id = item.id,
       icon = item.icon,
+      iconTooltip = item.iconTooltip,
       line1 = item.line1,
       line2 = item.line2,
       meta = item.meta;
@@ -767,7 +795,8 @@ var ListItem = function ListItem(_ref) {
     onClick: select
   }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
-    size: "small"
+    size: "small",
+    tooltip: iconTooltip
   }) : null, /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "primary-line"
   }, /*#__PURE__*/React__default["default"].createElement(Text, null, line1)), line2 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2420,29 +2449,6 @@ var Switch = function Switch(props) {
   }));
 };
 
-/**
- * Tooltip
- */
-
-var Tooltip = function Tooltip(props) {
-  var _props$text = props.text,
-      text = _props$text === void 0 ? "" : _props$text,
-      _props$top = props.top,
-      top = _props$top === void 0 ? "1rem" : _props$top,
-      _props$left = props.left,
-      left = _props$left === void 0 ? "1rem" : _props$left;
-  var style = {
-    top: top,
-    left: left
-  };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "tooltip"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "tooltip-text",
-    style: style
-  }, text), props.children);
-};
-
 /**
  * Thumbnail
  */
@@ -4315,6 +4321,156 @@ var EmptyMessage = function EmptyMessage(_ref) {
   }, text));
 };
 
+var SCROLL_SENSITIVITY = 0.0005;
+var MAX_ZOOM = 5;
+var MIN_ZOOM = 0.1;
+var ImageViewer = function ImageViewer(_ref) {
+  var image = _ref.image;
+
+  var _useState = React.useState({
+    x: 0,
+    y: 0
+  }),
+      offset = _useState[0],
+      setOffset = _useState[1];
+
+  var _useState2 = React.useState(1),
+      zoom = _useState2[0],
+      setZoom = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      draggind = _useState3[0],
+      setDragging = _useState3[1];
+
+  var touch = React.useRef({
+    x: 0,
+    y: 0
+  });
+  var canvasRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+  var observer = React.useRef(null);
+  var background = React.useMemo(function () {
+    return new Image();
+  }, [image]);
+
+  var clamp = function clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+  };
+
+  var handleWheel = function handleWheel(event) {
+    var deltaY = event.deltaY;
+
+    if (!draggind) {
+      setZoom(function (zoom) {
+        return clamp(zoom + deltaY * SCROLL_SENSITIVITY * -1, MIN_ZOOM, MAX_ZOOM);
+      });
+    }
+  };
+
+  var handleMouseMove = function handleMouseMove(event) {
+    if (draggind) {
+      var _touch$current = touch.current,
+          x = _touch$current.x,
+          y = _touch$current.y;
+      var clientX = event.clientX,
+          clientY = event.clientY;
+      setOffset({
+        x: offset.x + (x - clientX),
+        y: offset.y + (y - clientY)
+      });
+      touch.current = {
+        x: clientX,
+        y: clientY
+      };
+    }
+  };
+
+  var handleMouseDown = function handleMouseDown(event) {
+    var clientX = event.clientX,
+        clientY = event.clientY;
+    touch.current = {
+      x: clientX,
+      y: clientY
+    };
+    setDragging(true);
+  };
+
+  var handleMouseUp = function handleMouseUp() {
+    return setDragging(false);
+  };
+
+  var draw = function draw() {
+    if (canvasRef.current) {
+      var _canvasRef$current = canvasRef.current,
+          width = _canvasRef$current.width,
+          height = _canvasRef$current.height;
+      var context = canvasRef.current.getContext("2d"); // Set canvas dimensions
+
+      canvasRef.current.width = width;
+      canvasRef.current.height = height; // Clear canvas and scale it
+
+      context.translate(-offset.x, -offset.y);
+      context.scale(zoom, zoom);
+      context.clearRect(0, 0, width, height); // Make sure we're zooming to the center
+
+      var x = (context.canvas.width / zoom - background.width) / 2;
+      var y = (context.canvas.height / zoom - background.height) / 2; // Draw image
+
+      context.drawImage(background, x, y);
+    }
+  };
+
+  React.useEffect(function () {
+    observer.current = new ResizeObserver(function (entries) {
+      entries.forEach(function (_ref2) {
+        var target = _ref2.target;
+        var width = background.width,
+            height = background.height; // If width of the container is smaller than image, scale image down
+
+        if (target.clientWidth < width) {
+          // Calculate scale
+          var scale = target.clientWidth / width; // Redraw image
+
+          canvasRef.current.width = width * scale;
+          canvasRef.current.height = height * scale;
+          canvasRef.current.getContext("2d").drawImage(background, 0, 0, width * scale, height * scale);
+        }
+      });
+    });
+    observer.current.observe(containerRef.current);
+    return function () {
+      return observer.current.unobserve(containerRef.current);
+    };
+  }, []);
+  React.useEffect(function () {
+    background.src = image;
+
+    if (canvasRef.current) {
+      background.onload = function () {
+        // Get the image dimensions
+        var width = background.width,
+            height = background.height;
+        canvasRef.current.width = width;
+        canvasRef.current.height = height; // Set image as background
+
+        canvasRef.current.getContext("2d").drawImage(background, 0, 0);
+      };
+    }
+  }, [background]);
+  React.useEffect(function () {
+    draw();
+  }, [zoom, offset]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/React__default["default"].createElement("canvas", {
+    onMouseDown: handleMouseDown,
+    onMouseUp: handleMouseUp,
+    onWheel: handleWheel,
+    onMouseMove: handleMouseMove,
+    ref: canvasRef
+  }));
+};
+
 /**
  * Content Form 
  */
@@ -6353,6 +6509,9 @@ var CollectionEditor$1 = function CollectionEditor(props) {
       var _temp5 = function _temp5() {
         if (onChange) onChange(form);
         setPageContext(Object.assign({}, pageContext));
+        site.notify({
+          title: "Datos Guardados"
+        });
       };
 
       var _temp6 = function () {
@@ -11014,6 +11173,7 @@ exports.Form = Form;
 exports.HTTPClient = HTTPClient;
 exports.Header = Header;
 exports.Icon = Icon;
+exports.ImageViewer = ImageViewer;
 exports.Kanban = Kanban;
 exports.KanbanCard = KanbanCard;
 exports.KanbanColumn = KanbanColumn;