@oneblink/apps-react 8.10.0-alpha.1 → 8.10.0-alpha.3
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,20 +1,30 @@
|
|
|
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, }: {
|
|
13
14
|
width: number;
|
|
14
15
|
height: number;
|
|
15
16
|
}) => number;
|
|
16
|
-
export declare const generateCroppedImageBlob: ({ croppedAreaPixels, imgSrc, fileType, }: {
|
|
17
|
+
export declare const generateCroppedImageBlob: ({ croppedAreaPixels, imgSrc, size, fileType, }: {
|
|
17
18
|
croppedAreaPixels: Area;
|
|
18
19
|
imgSrc: string;
|
|
20
|
+
/**
|
|
21
|
+
* If provided, the cropped image will be resized to the given size. If not
|
|
22
|
+
* provided, the cropped image will be the same size as the cropped portion of
|
|
23
|
+
* the source image.
|
|
24
|
+
*/
|
|
25
|
+
size?: {
|
|
26
|
+
width: number;
|
|
27
|
+
height: number;
|
|
28
|
+
};
|
|
19
29
|
fileType?: string;
|
|
20
30
|
}) => Promise<Blob | null>;
|
|
@@ -4,8 +4,7 @@ import { CropContainer, ZoomSlider, SLIDER_WHEEL_INTERVAL_VALUE, } from './resou
|
|
|
4
4
|
const defaultZoom = 1;
|
|
5
5
|
const defaultCrop = { x: 0, y: 0 };
|
|
6
6
|
const emptyFn = () => { };
|
|
7
|
-
|
|
8
|
-
const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, }) => {
|
|
7
|
+
const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, cropperHeight, }) => {
|
|
9
8
|
const [crop, setCrop] = React.useState(defaultCrop);
|
|
10
9
|
const [zoom, setZoom] = React.useState(defaultZoom);
|
|
11
10
|
const [image, setImage] = React.useState(null);
|
|
@@ -32,7 +31,7 @@ const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoo
|
|
|
32
31
|
}
|
|
33
32
|
}, [outputAspectRatio, image]);
|
|
34
33
|
return (React.createElement("div", { className: "ob-cropper__container" },
|
|
35
|
-
React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper" },
|
|
34
|
+
React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper", height: cropperHeight },
|
|
36
35
|
React.createElement(Cropper, { image: imgSrc, crop: crop, zoom: zoom, aspect: calculatedAspectRatio, onCropChange: disabled ? emptyFn : setCrop, onCropComplete: (...args) => {
|
|
37
36
|
if (disabled) {
|
|
38
37
|
return;
|
|
@@ -59,10 +58,8 @@ const createImage = (url) => {
|
|
|
59
58
|
return image;
|
|
60
59
|
});
|
|
61
60
|
};
|
|
62
|
-
export const generateCroppedImageBlob = async ({ croppedAreaPixels, imgSrc,
|
|
63
|
-
|
|
64
|
-
// height,
|
|
65
|
-
fileType, }) => {
|
|
61
|
+
export const generateCroppedImageBlob = async ({ croppedAreaPixels, imgSrc, size, fileType, }) => {
|
|
62
|
+
var _a, _b, _c, _d;
|
|
66
63
|
if (!croppedAreaPixels || !imgSrc) {
|
|
67
64
|
return null;
|
|
68
65
|
}
|
|
@@ -82,8 +79,8 @@ fileType, }) => {
|
|
|
82
79
|
if (!croppedCtx) {
|
|
83
80
|
return null;
|
|
84
81
|
}
|
|
85
|
-
croppedCanvas.width = croppedAreaPixels.width;
|
|
86
|
-
croppedCanvas.height = croppedAreaPixels.height;
|
|
82
|
+
croppedCanvas.width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : croppedAreaPixels.width;
|
|
83
|
+
croppedCanvas.height = (_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : croppedAreaPixels.height;
|
|
87
84
|
// Draw the cropped source image onto the destination canvas
|
|
88
85
|
croppedCtx.drawImage(canvas,
|
|
89
86
|
// source x
|
|
@@ -99,9 +96,9 @@ fileType, }) => {
|
|
|
99
96
|
// destination y
|
|
100
97
|
0,
|
|
101
98
|
// destination width
|
|
102
|
-
croppedAreaPixels.width,
|
|
99
|
+
(_c = size === null || size === void 0 ? void 0 : size.width) !== null && _c !== void 0 ? _c : croppedAreaPixels.width,
|
|
103
100
|
// destination height
|
|
104
|
-
croppedAreaPixels.height);
|
|
101
|
+
(_d = size === null || size === void 0 ? void 0 : size.height) !== null && _d !== void 0 ? _d : croppedAreaPixels.height);
|
|
105
102
|
return new Promise((resolve) => {
|
|
106
103
|
croppedCanvas.toBlob((file) => {
|
|
107
104
|
resolve(file);
|
|
@@ -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,
|
|
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\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 size,\n fileType,\n}: {\n croppedAreaPixels: Area\n imgSrc: string\n /**\n * If provided, the cropped image will be resized to the given size. If not\n * provided, the cropped image will be the same size as the cropped portion of\n * the source image.\n */\n size?: {\n width: number\n height: number\n }\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 = size?.width ?? croppedAreaPixels.width\n croppedCanvas.height = size?.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 size?.width ?? croppedAreaPixels.width,\n // destination height\n size?.height ?? 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.3",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|