argous 1.2.216 → 1.2.217

package/lib/components/Zoom/Zoom.d.ts

@@ -0,0 +1,11 @@
+export interface ZoomProps {
+  /**
+   * ID
+   */
+  id: string
+}
+
+
+declare function Zoom(props: ZoomProps) : JSX.Element
+
+export default Zoom;

package/lib/components/Zoom/Zoom.js

@@ -0,0 +1,56 @@
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useState } from 'react';
+import './style.css';
+
+
+const Zoom = ({ id, children }) => {
+
+  const figureId = (id) ? `${id}-zoom-figure` : 'zoom-figure';
+  const [active, setActive] = useState(false);
+
+  const copyMediaUrl = useCallback(() => {
+    const figureElement = document.getElementById(figureId);
+    const mediaElement = figureElement.children?.[0];
+    if (mediaElement) figureElement.style.backgroundImage = "url('" + mediaElement.src + "')";
+  }, [figureId]);
+  useEffect(() => setTimeout(() => copyMediaUrl(), 500), [copyMediaUrl]);
+
+  function zoom(e, activeParameter) {
+    if (active || activeParameter) {
+      let offsetX, offsetY, x, y;
+      const figureElement = document.getElementById(figureId);
+
+      if (figureElement) {
+        if (e?.nativeEvent?.offsetX) offsetX = e.nativeEvent.offsetX;
+        else offsetX = e?.touches?.[0].pageX;
+        if (e?.nativeEvent?.offsetY) offsetY = e.nativeEvent.offsetY;
+        else offsetX = e?.touches?.[0].pageX;
+
+        x = ((offsetX / figureElement.offsetWidth) * 100);
+        y = ((offsetY / figureElement.offsetHeight) * 100);
+
+        figureElement.style.backgroundPosition = `${x}% ${y}%`;
+      }
+    }
+  }
+
+  const handleActive = e => {
+    const state = !active;
+    setActive(state);
+    (state) && zoom(e, state);
+  };
+
+
+  return <figure 
+    id={figureId} 
+    onMouseMove={zoom} 
+    onTouchMove={zoom} 
+    onClick={handleActive} 
+    className={clsx('zoom-figure', { 'zoom-figure-active': active })}
+  >
+    {children}
+  </figure>;
+};
+
+
+export default Zoom;

package/lib/components/Zoom/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Zoom';
+export * from './Zoom';

package/lib/components/Zoom/index.js

@@ -0,0 +1 @@
+export { default } from './Zoom';

package/lib/components/Zoom/style.css

@@ -0,0 +1,25 @@
+figure.zoom-figure {
+    position: relative;
+    overflow: hidden;
+    cursor: zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: -webkit-zoom-in;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+
+    img {
+      transition: opacity 250ms;
+      display: block;
+      width: 100%;
+    }
+}
+
+figure.zoom-figure-active {
+    cursor: zoom-out;
+    cursor: -moz-zoom-out;
+    cursor: -webkit-zoom-out;
+
+    & img:hover {
+        opacity: 0;
+    }
+}

package/lib/components/index.d.ts

@@ -157,4 +157,13 @@ export { default as HalfGauge } from './HalfGauge';
 export * from './HalfGauge';
 
 export { default as UserCard } from './UserCard';
-export * from './UserCard';
+export * from './UserCard';
+
+export { default as TextToHtml } from './TextToHtml';
+export * from './TextToHtml';
+
+export { default as Zoom } from './Zoom';
+export * from './Zoom';
+
+export { default as Carousel } from './Carousel';
+export * from './Carousel';

package/lib/components/index.js

@@ -154,4 +154,14 @@ export * from './PercentageDisplay';
 export { default as HalfGauge } from './HalfGauge';
 export * from './HalfGauge';
 
-export { default as UserCard } from './UserCard';
+export { default as UserCard } from './UserCard';
+export * from './UserCard';
+
+export { default as TextToHtml } from './TextToHtml';
+export * from './TextToHtml';
+
+export { default as Zoom } from './Zoom';
+export * from './Zoom';
+
+export { default as Carousel } from './Carousel';
+export * from './Carousel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.216",
+  "version": "1.2.217",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",
@@ -98,6 +98,7 @@
   "dependencies": {
     "highlight.js": "^10.7.1",
     "jquery": "^3.6.0",
+    "react-colorful": "^5.6.1",
     "react-date-range": "0.9.4",
     "react-paginate": "^7.1.2",
     "react-transition-group": "^4.4.1",