Extended ImageCrop component with additional image props

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/ImageCrop/ImageCrop.stories.tsx

@@ -1,36 +1,31 @@
-import { Meta, Story } from "@storybook/react";
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+import { Crop } from "react-image-crop";
 
 import image from "../../../assets/images/image-crop.png";
 import ImageCrop from "./";
-import { IImageCropProps } from "./types";
 
 export default {
   title: "Components/ImageCrop",
   component: ImageCrop
 } as Meta;
 
-const Template: Story<IImageCropProps> = args => <ImageCrop {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  src: image,
-  crop: {
+export const Default = () => {
+  const [crop, setCrop] = useState<Crop>({
     width: 150,
     height: 150,
     unit: "px",
     x: 0,
     y: 0
-  },
-  circularCrop: false,
-  aspect: 1,
-  cropAreaClassName: "custom-crop-area-class",
-  locked: false,
-  setCrop: () => {}
-};
-
-export const CircularCrop = Template.bind({});
-CircularCrop.args = {
-  ...Default.args,
-  circularCrop: true,
-  locked: false
+  });
+  return (
+    <ImageCrop
+      src={image}
+      crop={crop}
+      circularCrop={false}
+      aspect={1}
+      locked={false}
+      setCrop={setCrop}
+    />
+  );
 };

src/Components/ImageCrop/index.tsx

@@ -21,7 +21,8 @@ const ImageCrop: FC<IImageCropProps> = ({
   circularCrop,
   locked,
   aspect = 1,
-  cropAreaClassName
+  imgCropWrapperClassName,
+  imgCropClassName
 }) => {
   const previewCanvasRef = useRef(null);
   const imgRef = useRef(null);
@@ -116,13 +117,22 @@ const ImageCrop: FC<IImageCropProps> = ({
           keepSelection
           circularCrop={circularCrop}
         >
-          <img
-            className={classNames(cropAreaClassName)}
-            ref={imgRef}
-            alt='Crop me'
-            src={src}
-            onLoad={onImageLoad}
-          />
+          <div
+            className={classNames(imgCropWrapperClassName, {
+              "relative h-[350px] w-[350px]": !imgCropWrapperClassName
+            })}
+          >
+            <img
+              className={classNames(imgCropClassName, {
+                "absolute h-full w-full bg-left-top object-cover":
+                  !imgCropClassName
+              })}
+              ref={imgRef}
+              alt='Crop me'
+              src={src}
+              onLoad={onImageLoad}
+            />
+          </div>
         </ReactCrop>
       )}
     </div>

src/Components/ImageCrop/types.ts

@@ -9,5 +9,6 @@ export interface IImageCropProps {
   locked?: boolean;
   circularCrop?: boolean;
   aspect?: number;
-  cropAreaClassName?: string;
+  imgCropWrapperClassName?: string;
+  imgCropClassName?: string;
 }

src/Components/ImageInput/ImageInput.stories.tsx

@@ -90,15 +90,21 @@ export const WithImageCrop = () => {
       <div className='flex items-start gap-2'>
         {image && (
           <ImageCrop
-            cropAreaClassName='max-w-[600px] max-h-[600px] min-w-[600px]'
             setCrop={setCrop}
             crop={crop}
             src={image}
             onComplete={handleCropComplete}
             locked={false}
           />
         )}
-        {croppedImage && <img src={croppedImage} />}
+        {croppedImage && (
+          <div className='relative h-[150px] w-[150px]'>
+            <img
+              className='absolute h-full w-full bg-left-top object-cover'
+              src={croppedImage}
+            />
+          </div>
+        )}
       </div>
 
       <ImageInput