@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/custom-components/CustomTooltip.jsx

@@ -0,0 +1,51 @@
+import { Tooltip } from '@mui/material';
+import PropTypes from 'prop-types';
+
+export const CustomTooltip = ({
+  title,
+  arrow,
+  placement,
+  followCursor,
+  slots,
+  open,
+  slotProps,
+  className,
+  children,
+  ...restProps
+}) => {
+  return (
+    <Tooltip
+      title={title}
+      arrow={arrow}
+      open={open}
+      className={className}
+      placement={placement}
+      followCursor={followCursor}
+      slots={slots}
+      slotProps={slotProps}
+      {...restProps}
+    >
+      <div>{children}</div>
+    </Tooltip>
+  );
+};
+
+
+
+CustomTooltip.propTypes = {
+  title: PropTypes.any,
+  arrow: PropTypes.bool,
+  placement: PropTypes.string,
+  followCursor: PropTypes.bool,
+  slots: PropTypes.object,
+  open: PropTypes.bool,
+  slotProps: PropTypes.object,
+  className: PropTypes.any,
+  children: PropTypes.any,
+  onClick: PropTypes.any,
+  disabled: PropTypes.any,
+  label: PropTypes.any,
+  suffix: PropTypes.any,
+  prefix: PropTypes.any,
+  type: PropTypes.any,
+};

package/src/views/custom-components/CustomZoomImage.jsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types'; // 1. Import PropTypes
+import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
+
+// --- OVERLAY CONTROLS COMPONENT ---
+const Controls = () => {
+  const { zoomIn, zoomOut, resetTransform } = useControls();
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: '20px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        gap: '8px',
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        padding: '8px 12px',
+        borderRadius: '20px',
+        boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
+        backdropFilter: 'blur(4px)',
+        zIndex: 10,
+      }}
+    >
+      <button style={buttonStyle} onClick={() => zoomOut()} title="Zoom Out">
+        −
+      </button>
+      <button
+        style={{ ...buttonStyle, fontSize: '14px', padding: '0 12px', width: 'auto' }}
+        onClick={() => resetTransform()}
+      >
+        Reset
+      </button>
+      <button style={buttonStyle} onClick={() => zoomIn()} title="Zoom In">
+        +
+      </button>
+    </div>
+  );
+};
+
+// --- MAIN IMAGE COMPONENT ---
+const CustomZoomImage = ({ imageUrl, altText = 'Image', fallbackText = 'Image not available' }) => {
+  const [hasError, setHasError] = useState(false);
+
+  if (!imageUrl || hasError) {
+    return (
+      <div style={containerStyle}>
+        <div style={{ color: '#666', fontSize: '16px', fontWeight: '500' }}>{fallbackText}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={containerStyle}>
+      <TransformWrapper
+        initialScale={1}
+        minScale={0.5}
+        maxScale={4}
+        centerOnInit={true}
+        wheel={{ wheelDisabled: false, step: 0.1 }}
+      >
+        <Controls />
+
+        {/* We add contentStyle here to make the inner wrapper fill the box perfectly */}
+        <TransformComponent
+          wrapperStyle={{ width: '100%', height: '100%' }}
+          contentStyle={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <img
+            src={imageUrl}
+            alt={altText}
+            onError={() => setHasError(true)}
+            style={{
+              // Using max-width/max-height ensures it never overflows the container
+              maxWidth: '100%',
+              maxHeight: '100%',
+              objectFit: 'contain',
+              cursor: 'grab',
+            }}
+          />
+        </TransformComponent>
+      </TransformWrapper>
+    </div>
+  );
+};
+
+// --- PROPTYPES ---
+// 2. Define the expected types for your props
+CustomZoomImage.propTypes = {
+  imageUrl: PropTypes.string, // Expected to be a string (the URL)
+  altText: PropTypes.string, // Expected to be a string
+  fallbackText: PropTypes.string, // Expected to be a string
+};
+
+// --- STYLES ---
+// --- STYLES ---
+const containerStyle = {
+  width: '100%',   // Changed from '600px'
+  height: '100%',  // Changed from '400px'
+  position: 'relative',
+  overflow: 'hidden',
+  // You can also remove the border-radius and box-shadow here 
+  // since your Tailwind parent is already styling the borders!
+  backgroundColor: '#f8f9fa',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const buttonStyle = {
+  border: 'none',
+  background: '#fff',
+  color: '#333',
+  fontSize: '18px',
+  fontWeight: 'bold',
+  width: '32px',
+  height: '32px',
+  borderRadius: '50%',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+  transition: 'background 0.2s',
+};
+
+export default CustomZoomImage;