@oneblink/apps-react 8.10.0-alpha.1 → 8.10.0-alpha.2
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.
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Area, CropperProps } from 'react-easy-crop';
|
|
3
|
-
declare const _default: React.MemoExoticComponent<({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, }: {
|
|
3
|
+
declare const _default: React.MemoExoticComponent<({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, cropperHeight, }: {
|
|
4
4
|
imgSrc: string;
|
|
5
5
|
disabled?: boolean;
|
|
6
6
|
onCropComplete: (croppedAreaPixels: Area) => void;
|
|
7
7
|
outputAspectRatio?: number;
|
|
8
8
|
zoomWithScroll?: boolean;
|
|
9
9
|
cropperStyles?: CropperProps["style"];
|
|
10
|
+
cropperHeight?: number;
|
|
10
11
|
}) => React.JSX.Element>;
|
|
11
12
|
export default _default;
|
|
12
13
|
export declare const getAspectRatio: ({ width, height, }: {
|
|
@@ -5,7 +5,7 @@ const defaultZoom = 1;
|
|
|
5
5
|
const defaultCrop = { x: 0, y: 0 };
|
|
6
6
|
const emptyFn = () => { };
|
|
7
7
|
// 2. Fix up styling and classes
|
|
8
|
-
const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, }) => {
|
|
8
|
+
const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, cropperHeight, }) => {
|
|
9
9
|
const [crop, setCrop] = React.useState(defaultCrop);
|
|
10
10
|
const [zoom, setZoom] = React.useState(defaultZoom);
|
|
11
11
|
const [image, setImage] = React.useState(null);
|
|
@@ -32,7 +32,7 @@ const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoo
|
|
|
32
32
|
}
|
|
33
33
|
}, [outputAspectRatio, image]);
|
|
34
34
|
return (React.createElement("div", { className: "ob-cropper__container" },
|
|
35
|
-
React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper" },
|
|
35
|
+
React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper", height: cropperHeight },
|
|
36
36
|
React.createElement(Cropper, { image: imgSrc, crop: crop, zoom: zoom, aspect: calculatedAspectRatio, onCropChange: disabled ? emptyFn : setCrop, onCropComplete: (...args) => {
|
|
37
37
|
if (disabled) {
|
|
38
38
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,OAAsC,MAAM,iBAAiB,CAAA;AACpE,OAAO,EACL,aAAa,EACb,UAAU,EACV,2BAA2B,GAC5B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,WAAW,GAAG,CAAC,CAAA;AACrB,MAAM,WAAW,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;AAElC,MAAM,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;AAExB,gCAAgC;AAChC,MAAM,YAAY,GAAG,CAAC,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,aAAa,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useMemo } from 'react'\nimport Cropper, { Area, Point, CropperProps } from 'react-easy-crop'\nimport {\n CropContainer,\n ZoomSlider,\n SLIDER_WHEEL_INTERVAL_VALUE,\n} from './resource-components'\n\nconst defaultZoom = 1\nconst defaultCrop = { x: 0, y: 0 }\n\nconst emptyFn = () => {}\n\n// 2. Fix up styling and classes\nconst ImageCropper = ({\n imgSrc,\n disabled,\n onCropComplete,\n outputAspectRatio,\n zoomWithScroll,\n cropperStyles,\n cropperHeight,\n}: {\n imgSrc: string\n disabled?: boolean\n onCropComplete: (croppedAreaPixels: Area) => void\n outputAspectRatio?: number\n zoomWithScroll?: boolean\n cropperStyles?: CropperProps['style']\n cropperHeight?: number\n}) => {\n const [crop, setCrop] = React.useState<Point>(defaultCrop)\n const [zoom, setZoom] = React.useState(defaultZoom)\n const [image, setImage] = React.useState<HTMLImageElement | null>(null)\n\n React.useEffect(() => {\n if (outputAspectRatio) {\n // If we have a desired aspect ratio, we dont need to get it from the current image\n return\n }\n createImage(imgSrc)\n .then(setImage)\n .catch((error) => {\n console.error(\n 'Error loading image to get aspect ratio for cropping',\n error,\n )\n })\n }, [outputAspectRatio, imgSrc])\n\n const calculatedAspectRatio = useMemo(() => {\n if (outputAspectRatio) {\n return outputAspectRatio\n }\n if (image) {\n return getAspectRatio({\n width: image.width,\n height: image.height,\n })\n }\n }, [outputAspectRatio, image])\n\n return (\n <div className=\"ob-cropper__container\">\n <CropContainer\n className=\"ob-cropper__cropper-wrapper\"\n height={cropperHeight}\n >\n <Cropper\n image={imgSrc}\n crop={crop}\n zoom={zoom}\n aspect={calculatedAspectRatio}\n onCropChange={disabled ? emptyFn : setCrop}\n onCropComplete={(...args) => {\n if (disabled) {\n return\n }\n onCropComplete(args[1])\n }}\n onZoomChange={setZoom}\n zoomSpeed={SLIDER_WHEEL_INTERVAL_VALUE}\n zoomWithScroll={zoomWithScroll}\n classes={{\n containerClassName: 'ob-border-radius',\n }}\n style={cropperStyles}\n />\n </CropContainer>\n <div className=\"ob-cropper__zoom-slider-wrapper\">\n <ZoomSlider value={zoom} setValue={setZoom} disabled={disabled} />\n </div>\n </div>\n )\n}\n\nexport default memo(ImageCropper)\n\nexport const getAspectRatio = ({\n width,\n height,\n}: {\n width: number\n height: number\n}) => width / height\n\nconst createImage = (url: string): Promise<HTMLImageElement> => {\n return new Promise((resolve, reject) => {\n const image = new Image()\n image.onload = () => {\n resolve(image)\n }\n image.onerror = (error) => {\n reject(error)\n }\n image.src = url\n return image\n })\n}\n\nexport const generateCroppedImageBlob = async ({\n croppedAreaPixels,\n imgSrc,\n // width,\n // height,\n fileType,\n}: {\n croppedAreaPixels: Area\n imgSrc: string\n // width: number\n // height: number\n fileType?: string\n}): Promise<Blob | null> => {\n if (!croppedAreaPixels || !imgSrc) {\n return null\n }\n // Source image/canvas\n const image = await createImage(imgSrc)\n const canvas = document.createElement('canvas')\n const ctx = canvas.getContext('2d')\n if (!ctx) {\n return null\n }\n canvas.width = image.width\n canvas.height = image.height\n ctx.drawImage(image, 0, 0)\n\n // Destination image/canvas\n const croppedCanvas = document.createElement('canvas')\n const croppedCtx = croppedCanvas.getContext('2d')\n if (!croppedCtx) {\n return null\n }\n croppedCanvas.width = croppedAreaPixels.width\n croppedCanvas.height = croppedAreaPixels.height\n\n // Draw the cropped source image onto the destination canvas\n croppedCtx.drawImage(\n canvas,\n // source x\n croppedAreaPixels.x,\n // source y\n croppedAreaPixels.y,\n // source width\n croppedAreaPixels.width,\n // source height\n croppedAreaPixels.height,\n // destination x\n 0,\n // destination y\n 0,\n // destination width\n croppedAreaPixels.width,\n // destination height\n croppedAreaPixels.height,\n )\n\n return new Promise((resolve) => {\n croppedCanvas.toBlob((file) => {\n resolve(file)\n }, fileType)\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "8.10.0-alpha.
|
|
4
|
+
"version": "8.10.0-alpha.2",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|