npm - @bikdotai/bik-component-library - Versions diffs - 0.0.814 → 0.0.816-beta.0 - Mend

@bikdotai/bik-component-library 0.0.814 → 0.0.816-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (743) hide show

package/dist/esm/components/image-cropper/BikImageCropper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","imgElement","imgWidth"],"mappings":"~~;;;;;~~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"}
1	+ {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsx","StyledModal","ReactCrop","c","imgElement","imgWidth"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.814",
+	"version": "0.0.816-beta.0",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",