@codeleap/web 6.2.3 → 6.3.0

package/dist/components/CropPicker/components/CropPickerFooter.d.ts

@@ -0,0 +1,11 @@
+import { ICSS } from '@codeleap/styles';
+import { ButtonComposition } from '../../Button';
+import { AnyFunction, StylesOf } from '@codeleap/types';
+export type CropPickerFooterProps = {
+    footerStyle: ICSS;
+    confirmStyles: StylesOf<ButtonComposition>;
+    cancelStyles: StylesOf<ButtonComposition>;
+    onConfirmCrop: AnyFunction;
+    onCancelCrop: AnyFunction;
+};
+export declare const CropPickerFooter: (props: CropPickerFooterProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CropPicker/components/CropPickerFooter.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CropPickerFooter = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var Button_1 = require("../../Button");
+var View_1 = require("../../View");
+var CropPickerFooter = function (props) {
+    var footerStyle = props.footerStyle, confirmStyles = props.confirmStyles, cancelStyles = props.cancelStyles, onConfirmCrop = props.onConfirmCrop, onCancelCrop = props.onCancelCrop;
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, { style: footerStyle, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { text: 'Cancel', onPress: onCancelCrop, debugName: 'cropModal:cancel', style: cancelStyles }), (0, jsx_runtime_1.jsx)(Button_1.Button, { text: 'Confirm', onPress: onConfirmCrop, debugName: 'cropModal:confirm', style: confirmStyles })] }));
+};
+exports.CropPickerFooter = CropPickerFooter;
+//# sourceMappingURL=CropPickerFooter.js.map

package/dist/components/CropPicker/components/CropPickerFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropPickerFooter.js","sourceRoot":"","sources":["../../../../src/components/CropPicker/components/CropPickerFooter.tsx"],"names":[],"mappings":";;;;AACA,uCAAwD;AACxD,mCAAiC;AAW1B,IAAM,gBAAgB,GAAG,UAAC,KAA4B;IAEzD,IAAA,WAAW,GAKT,KAAK,YALI,EACX,aAAa,GAIX,KAAK,cAJM,EACb,YAAY,GAGV,KAAK,aAHK,EACZ,aAAa,GAEX,KAAK,cAFM,EACb,YAAY,GACV,KAAK,aADK,CACL;IAET,OAAO,CACL,wBAAC,WAAI,IAAC,KAAK,EAAE,WAAW,aACtB,uBAAC,eAAM,IACL,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,YAAY,EACrB,SAAS,EAAE,kBAAkB,EAC7B,KAAK,EAAE,YAAY,GACnB,EACF,uBAAC,eAAM,IACL,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,aAAa,EACtB,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,aAAa,GACpB,IACG,CACR,CAAA;AACH,CAAC,CAAA;AAzBY,QAAA,gBAAgB,oBAyB5B"}

package/dist/components/CropPicker/hooks.d.ts

@@ -0,0 +1,39 @@
+import { WebInputFile } from '@codeleap/types';
+import { Crop } from 'react-image-crop';
+export type UseCropPicker = {
+    file: File;
+    aspect?: number;
+    minWidth?: number;
+    minHeight?: number;
+    onCrop?: (croppedFile: WebInputFile | null) => void;
+};
+export declare function useCropPicker({ aspect, minWidth: minW, minHeight: minH, file, onCrop, }: UseCropPicker): {
+    containerStyles: {
+        width?: undefined;
+        height?: undefined;
+        maxWidth?: undefined;
+        maxHeight?: undefined;
+        margin?: undefined;
+    } | {
+        width: number;
+        height: number;
+        maxWidth: string;
+        maxHeight: string;
+        margin: string;
+    };
+    imageStyles: {
+        width?: undefined;
+        height?: undefined;
+        objectFit?: undefined;
+    } | {
+        width: number;
+        height: number;
+        objectFit: "contain";
+    };
+    handleCropChange: (newCrop: Crop) => void;
+    handleConfirmCrop: () => Promise<void>;
+    handleCancelCrop: () => void;
+    setRelativeCrop: import("react").Dispatch<import("react").SetStateAction<Crop>>;
+    crop: Crop;
+    image: HTMLImageElement;
+};

package/dist/components/CropPicker/hooks.js

@@ -0,0 +1,184 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCropPicker = useCropPicker;
+var react_1 = require("react");
+var react_2 = require("react");
+var utils_1 = require("./utils");
+function useCropPicker(_a) {
+    var _this = this;
+    var aspect = _a.aspect, minW = _a.minWidth, minH = _a.minHeight, file = _a.file, onCrop = _a.onCrop;
+    var _b = (0, react_2.useState)(null), image = _b[0], setImage = _b[1];
+    var _c = (0, react_2.useState)(), crop = _c[0], setCrop = _c[1];
+    var _d = (0, react_2.useState)(), relativeCrop = _d[0], setRelativeCrop = _d[1];
+    var _e = (0, react_2.useState)(null), imageDimensions = _e[0], setImageDimensions = _e[1];
+    var cleanup = function () {
+        setRelativeCrop(null);
+        setCrop(undefined);
+        setImageDimensions(null);
+        setTimeout(function () { return setImage(null); }, 500);
+    };
+    var handleConfirmCrop = function () { return __awaiter(_this, void 0, void 0, function () {
+        var _a, preview, croppedBlob, newImage;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, (0, utils_1.cropImage)(image, relativeCrop)];
+                case 1:
+                    _a = _b.sent(), preview = _a[0], croppedBlob = _a[1];
+                    newImage = {
+                        file: new File([croppedBlob], 'cropped.jpg', {
+                            type: 'image/jpeg',
+                            lastModified: Date.now(),
+                        }),
+                        preview: preview,
+                    };
+                    onCrop(newImage);
+                    setTimeout(function () { return cleanup(); });
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelCrop = function () {
+        onCrop(null);
+        setTimeout(function () { return cleanup(); });
+    };
+    var loadFile = (0, react_2.useCallback)(function (toReadFile) { return __awaiter(_this, void 0, void 0, function () {
+        var imageData, naturalWidth, naturalHeight, dimensions, targetAspect, imageAspect, initialCrop, v;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, utils_1.readImage)(toReadFile)];
+                case 1:
+                    imageData = _a.sent();
+                    naturalWidth = imageData.naturalWidth, naturalHeight = imageData.naturalHeight;
+                    dimensions = (0, utils_1.calculateProportionalDimensions)(naturalWidth, naturalHeight);
+                    setImageDimensions(dimensions);
+                    targetAspect = aspect || dimensions.aspectRatio;
+                    imageAspect = dimensions.aspectRatio;
+                    if (aspect) {
+                        v = imageAspect >= targetAspect
+                            ? {
+                                width: ((naturalHeight * targetAspect) / naturalWidth) * 100,
+                                height: 100,
+                            }
+                            : {
+                                width: 100,
+                                height: (naturalWidth / targetAspect / naturalHeight) * 100,
+                            };
+                        initialCrop = __assign(__assign({}, v), { x: (100 - v.width) / 2, y: (100 - v.height) / 2, unit: '%' });
+                    }
+                    else {
+                        initialCrop = {
+                            width: 100,
+                            height: 100,
+                            x: 0,
+                            y: 0,
+                            unit: '%',
+                        };
+                    }
+                    setCrop(initialCrop);
+                    setRelativeCrop(initialCrop);
+                    setImage(imageData);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var getMinDimensions = (0, react_2.useCallback)(function () {
+        if (!imageDimensions)
+            return { minWidth: minW !== null && minW !== void 0 ? minW : 100, minHeight: minH !== null && minH !== void 0 ? minH : 100 };
+        var targetAspect = aspect || imageDimensions.aspectRatio;
+        var calculatedMinWidth = (minW !== null && minW !== void 0 ? minW : 100) * targetAspect;
+        var calculatedMinHeight = minH !== null && minH !== void 0 ? minH : 100;
+        return {
+            minWidth: Math.max(calculatedMinWidth, 50),
+            minHeight: Math.max(calculatedMinHeight, 50),
+        };
+    }, [aspect, imageDimensions, minW, minH]);
+    var handleCropChange = (0, react_2.useCallback)(function (newCrop) {
+        if (!imageDimensions) {
+            setCrop(newCrop);
+            return;
+        }
+        var _a = getMinDimensions(), minWidth = _a.minWidth, minHeight = _a.minHeight;
+        setCrop(__assign(__assign({}, newCrop), { width: newCrop.width < minWidth ? minWidth : newCrop.width, height: newCrop.height < minHeight ? minHeight : newCrop.height }));
+    }, [imageDimensions, getMinDimensions]);
+    var containerStyles = (0, react_1.useMemo)(function () {
+        if (!imageDimensions)
+            return {};
+        return {
+            width: imageDimensions.displayWidth,
+            height: imageDimensions.displayHeight,
+            maxWidth: '90vw',
+            maxHeight: '70vh',
+            margin: '0 auto',
+        };
+    }, [imageDimensions]);
+    var imageStyles = (0, react_1.useMemo)(function () {
+        if (!imageDimensions)
+            return {};
+        return {
+            width: imageDimensions.displayWidth,
+            height: imageDimensions.displayHeight,
+            objectFit: 'contain',
+        };
+    }, [imageDimensions]);
+    (0, react_2.useEffect)(function () {
+        loadFile(file);
+    }, []);
+    return {
+        containerStyles: containerStyles,
+        imageStyles: imageStyles,
+        handleCropChange: handleCropChange,
+        handleConfirmCrop: handleConfirmCrop,
+        handleCancelCrop: handleCancelCrop,
+        setRelativeCrop: setRelativeCrop,
+        crop: crop,
+        image: image,
+    };
+}
+//# sourceMappingURL=hooks.js.map

package/dist/components/CropPicker/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/CropPicker/hooks.ts"],"names":[],"mappings":"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"}

package/dist/components/CropPicker/index.d.ts

@@ -1,8 +1,10 @@
+import { StyledComponentProps, AnyRecord, IJSX } from '@codeleap/styles';
 import { CropPickerProps } from './types';
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
 import 'react-image-crop/dist/ReactCrop.css';
 export * from './styles';
 export * from './types';
+export * from './hooks';
+export * from './components/CropPickerFooter';
 export declare const CropPicker: {
     (props: CropPickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
     styleRegistryName: string;

package/dist/components/CropPicker/index.js

@@ -24,56 +24,43 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CropPicker = void 0;
 var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 var styles_1 = require("@codeleap/styles");
-var lib_1 = require("../../lib");
 var WebStyleRegistry_1 = require("../../lib/WebStyleRegistry");
 var useStylesFor_1 = require("../../lib/hooks/useStylesFor");
-var FileInput_1 = require("../FileInput");
-var Modal_1 = require("../Modal");
-var Button_1 = require("../Button");
-var LoadingOverlay_1 = require("../LoadingOverlay");
-var ReactCrop = require('react-image-crop').Component;
+var View_1 = require("../View");
+var ActivityIndicator_1 = require("../ActivityIndicator");
+var CropPickerFooter_1 = require("./components/CropPickerFooter");
 require("react-image-crop/dist/ReactCrop.css");
+var ReactCrop = require('react-image-crop').Component;
 __exportStar(require("./styles"), exports);
 __exportStar(require("./types"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./components/CropPickerFooter"), exports);
 var CropPicker = function (props) {
-    var _a = __assign(__assign({}, exports.CropPicker.defaultProps), props), onFileSelect = _a.onFileSelect, targetCrop = _a.targetCrop, modalProps = _a.modalProps, title = _a.title, confirmButton = _a.confirmButton, debugName = _a.debugName, handle = _a.handle, withLoading = _a.withLoading, style = _a.style, confirmButtonProps = _a.confirmButtonProps, ref = _a.ref, fileInputProps = __rest(_a, ["onFileSelect", "targetCrop", "modalProps", "title", "confirmButton", "debugName", "handle", "withLoading", "style", "confirmButtonProps", "ref"]);
-    var _b = handle || (0, lib_1.useCropPicker)(__assign({ onFileSelect: onFileSelect, ref: ref }, targetCrop)), onConfirmCrop = _b.onConfirmCrop, onFilesReturned = _b.onFilesReturned, onClose = _b.onClose, fileInputRef = _b.fileInputRef, visible = _b.visible, image = _b.image, crop = _b.crop, setRelativeCrop = _b.setRelativeCrop, isLoading = _b.isLoading, handleCropChange = _b.handleCropChange;
+    var _a = __assign(__assign({}, exports.CropPicker.defaultProps), props), style = _a.style, handle = _a.handle, reactCrop = _a.reactCrop, aspect = _a.aspect, children = _a.children, FooterComponent = _a.FooterComponent;
     var styles = (0, useStylesFor_1.useStylesFor)(exports.CropPicker.styleRegistryName, style);
-    var composition = (0, styles_1.useCompositionStyles)(['confirmButton', 'modal'], styles);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FileInput_1.FileInput
-            // @ts-ignore
-            , __assign({ 
-                // @ts-ignore
-                ref: fileInputRef, onChange: function (files) { return onFilesReturned(files); } }, fileInputProps)), (0, jsx_runtime_1.jsxs)(Modal_1.Modal, __assign({ visible: visible, toggle: onClose, title: title, footer: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ text: confirmButton, style: composition === null || composition === void 0 ? void 0 : composition.confirmButton, onPress: onConfirmCrop, debugName: debugName }, confirmButtonProps)) }, modalProps, { style: composition === null || composition === void 0 ? void 0 : composition.modal, children: [!!(image === null || image === void 0 ? void 0 : image.src) ? ((0, jsx_runtime_1.jsx)(ReactCrop, __assign({ crop: crop, onChange: handleCropChange, onComplete: function (_, relCrop) { return setRelativeCrop(relCrop); } }, targetCrop, { style: styles.previewSize, children: (0, jsx_runtime_1.jsx)("img", { src: image === null || image === void 0 ? void 0 : image.src, 
-                            // @ts-ignore
-                            css: [styles.cropPreview, styles.previewSize] }) }))) : null, withLoading ? (0, jsx_runtime_1.jsx)(LoadingOverlay_1.LoadingOverlay, { debugName: 'CropPicker', visible: isLoading }) : null] }))] }));
+    var compositionStyles = (0, styles_1.useCompositionStyles)(['indicator', 'confirm', 'cancel'], styles);
+    if (!handle)
+        return null;
+    var image = handle.image, crop = handle.crop, setRelativeCrop = handle.setRelativeCrop, handleCropChange = handle.handleCropChange, handleConfirmCrop = handle.handleConfirmCrop, handleCancelCrop = handle.handleCancelCrop;
+    if (!(image === null || image === void 0 ? void 0 : image.src))
+        return (0, jsx_runtime_1.jsx)(View_1.View, { style: styles.loadingWrapper, children: (0, jsx_runtime_1.jsx)(ActivityIndicator_1.ActivityIndicator, { style: compositionStyles.indicator, debugName: 'CropPickerLoading' }) });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ReactCrop, __assign({}, reactCrop, { crop: crop, onChange: handleCropChange, onComplete: function (_, relCrop) { return setRelativeCrop(relCrop); }, style: styles.crop, aspect: aspect !== null && aspect !== void 0 ? aspect : reactCrop === null || reactCrop === void 0 ? void 0 : reactCrop.aspect, children: (0, jsx_runtime_1.jsx)("img", { src: image.src, 
+                    // @ts-ignore
+                    css: [styles === null || styles === void 0 ? void 0 : styles.image] }) })), children, (0, jsx_runtime_1.jsx)(FooterComponent, { footerStyle: styles.footer, confirmStyles: compositionStyles.confirm, cancelStyles: compositionStyles.cancel, onConfirmCrop: handleConfirmCrop, onCancelCrop: handleCancelCrop })] }));
 };
 exports.CropPicker = CropPicker;
 exports.CropPicker.styleRegistryName = 'CropPicker';
-exports.CropPicker.elements = ['previewSize', 'cropPreview', 'confirmButton', 'modal'];
-exports.CropPicker.rootElement = 'previewSize';
+exports.CropPicker.elements = ['crop', 'image', 'footer', 'confirm', 'cancel', 'indicator', 'loadingWrapper'];
+exports.CropPicker.rootElement = 'crop';
 exports.CropPicker.withVariantTypes = function (styles) {
     return exports.CropPicker;
 };
 exports.CropPicker.defaultProps = {
-    title: 'Crop Image',
-    confirmButton: 'Confirm Crop',
-    withLoading: false,
+    FooterComponent: CropPickerFooter_1.CropPickerFooter,
 };
 WebStyleRegistry_1.WebStyleRegistry.registerComponent(exports.CropPicker);
 //# sourceMappingURL=index.js.map

package/dist/components/CropPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CropPicker/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CropPicker/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,2CAA8F;AAC9F,+DAA6D;AAC7D,6DAA2D;AAC3D,gCAA8B;AAC9B,0DAAwD;AACxD,kEAAgE;AAGhE,+CAA4C;AAC5C,IAAM,SAAS,GAAsB,OAAO,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAA;AAE1E,2CAAwB;AACxB,0CAAuB;AACvB,0CAAuB;AACvB,gEAA6C;AAEtC,IAAM,UAAU,GAAG,UAAC,KAAsB;IACzC,IAAA,2BAQD,kBAAU,CAAC,YAAY,GACvB,KAAK,CACT,EATC,KAAK,WAAA,EACL,MAAM,YAAA,EACN,SAAS,eAAA,EACT,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,eAAe,qBAIhB,CAAA;IAED,IAAM,MAAM,GAAG,IAAA,2BAAY,EAAC,kBAAU,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;IAChE,IAAM,iBAAiB,GAAG,IAAA,6BAAoB,EAAC,CAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAA;IAE1F,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IAGtB,IAAA,KAAK,GAMH,MAAM,MANH,EACL,IAAI,GAKF,MAAM,KALJ,EACJ,eAAe,GAIb,MAAM,gBAJO,EACf,gBAAgB,GAGd,MAAM,iBAHQ,EAChB,iBAAiB,GAEf,MAAM,kBAFS,EACjB,gBAAgB,GACd,MAAM,iBADQ,CACR;IAEV,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAA;QAAE,OAAO,uBAAC,WAAI,IAAC,KAAK,EAAE,MAAM,CAAC,cAAc,YAAE,uBAAC,qCAAiB,IAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAC,mBAAmB,GAAG,GAAO,CAAA;IAE1J,OAAO,CACL,6DACE,uBAAC,SAAS,eACJ,SAAS,IACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,UAAC,CAAC,EAAE,OAAO,IAAK,OAAA,eAAe,CAAC,OAAO,CAAC,EAAxB,CAAwB,EACpD,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,YAEnC,gCACE,GAAG,EAAE,KAAK,CAAC,GAAG;oBACd,aAAa;oBACb,GAAG,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,GACpB,IACQ,EAEX,QAAQ,EAET,uBAAC,eAAe,IACd,WAAW,EAAE,MAAM,CAAC,MAAM,EAC1B,aAAa,EAAE,iBAAiB,CAAC,OAAO,EACxC,YAAY,EAAE,iBAAiB,CAAC,MAAM,EACtC,aAAa,EAAE,iBAAiB,EAChC,YAAY,EAAE,gBAAgB,GAC9B,IACD,CACJ,CAAA;AACH,CAAC,CAAA;AAzDY,QAAA,UAAU,cAyDtB;AAED,kBAAU,CAAC,iBAAiB,GAAG,YAAY,CAAA;AAC3C,kBAAU,CAAC,QAAQ,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAA;AACrG,kBAAU,CAAC,WAAW,GAAG,MAAM,CAAA;AAC/B,kBAAU,CAAC,gBAAgB,GAAG,UAAsB,MAAS;IAC3D,OAAO,kBAAmF,CAAA;AAC5F,CAAC,CAAA;AAED,kBAAU,CAAC,YAAY,GAAG;IACxB,eAAe,EAAE,mCAAgB;CACN,CAAA;AAE7B,mCAAgB,CAAC,iBAAiB,CAAC,kBAAU,CAAC,CAAA"}

package/dist/components/CropPicker/styles.d.ts

@@ -1,3 +1,3 @@
+import { ActivityIndicatorComposition } from '../ActivityIndicator';
 import { ButtonComposition } from '../Button';
-import { ModalComposition } from '../Modal';
-export type CropPickerComposition = 'cropPreview' | 'previewSize' | `confirmButton${Capitalize<ButtonComposition>}` | `modal${Capitalize<ModalComposition>}`;
+export type CropPickerComposition = 'crop' | 'image' | 'footer' | `indicator${Capitalize<ActivityIndicatorComposition>}` | `confirm${Capitalize<ButtonComposition>}` | `cancel${Capitalize<ButtonComposition>}` | 'loadingWrapper';

package/dist/components/CropPicker/types.d.ts

@@ -1,22 +1,20 @@
 import { StyledProp } from '@codeleap/styles';
-import { FileInputProps, FileInputRef } from '../FileInput';
+import { FileInputRef } from '../FileInput';
+import type { ReactCropProps } from 'react-image-crop';
 import { CropPickerComposition } from './styles';
-import { ReactCropProps } from 'react-image-crop';
-import { ModalProps } from '../Modal';
-import { useCropPicker } from '../../lib';
-import { ButtonProps } from '../Button';
+import React from 'react';
+import { useCropPicker } from './hooks';
 import { RefObject } from 'react';
-export type BaseCropProps = Partial<ReactCropProps>;
-export type CropPickerProps = Partial<FileInputProps> & {
-    style?: StyledProp<CropPickerComposition>;
-    targetCrop?: BaseCropProps;
-    modalProps?: Partial<ModalProps>;
-    title?: string;
-    confirmButton?: string;
+import { CropPickerFooterProps } from './components/CropPickerFooter';
+type NativeCropProps = Omit<ReactCropProps, 'crop' | 'onChange' | 'onComplete' | 'style'>;
+export type CropPickerProps = {
+    FooterComponent?: React.ComponentType<Partial<CropPickerFooterProps>>;
     debugName: string;
+    style?: StyledProp<CropPickerComposition>;
     handle?: ReturnType<typeof useCropPicker>;
-    withLoading?: boolean;
-    confirmButtonProps?: Partial<ButtonProps>;
+    aspect?: number;
+    reactCrop?: NativeCropProps;
+    children?: React.ReactNode;
     ref?: RefObject<FileInputRef | null>;
 };
-export type ImageReading = HTMLImageElement;
+export {};

package/dist/components/CropPicker/utils.d.ts

@@ -0,0 +1,10 @@
+import { Crop } from 'react-image-crop';
+export declare function readImage(file: File | Blob): Promise<HTMLImageElement>;
+export declare function cropImage(image: HTMLImageElement, crop: Crop): Promise<[string, Blob]>;
+export declare const calculateProportionalDimensions: (naturalWidth: number, naturalHeight: number) => {
+    naturalWidth: number;
+    naturalHeight: number;
+    displayWidth: number;
+    displayHeight: number;
+    aspectRatio: number;
+};

package/dist/components/CropPicker/utils.js

@@ -0,0 +1,117 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateProportionalDimensions = void 0;
+exports.readImage = readImage;
+exports.cropImage = cropImage;
+function readImage(file) {
+    return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.onload = function () {
+            var image = new Image();
+            image.onload = function () { return resolve(image); };
+            image.onerror = function () { return reject(new Error('Failed to load image')); };
+            image.src = reader.result;
+        };
+        reader.onerror = function () { return reject(new Error('Failed to read file')); };
+        reader.readAsDataURL(file);
+    });
+}
+function cropImage(image, crop) {
+    return __awaiter(this, void 0, void 0, function () {
+        var canvas, ctx, scaleX, scaleY, blob, croppedImage, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!crop.width || !crop.height) {
+                        throw new Error('Invalid crop dimensions');
+                    }
+                    canvas = document.createElement('canvas');
+                    ctx = canvas.getContext('2d', { willReadFrequently: true });
+                    if (!ctx) {
+                        throw new Error('Could not get canvas 2d context');
+                    }
+                    scaleX = image.naturalWidth / 100;
+                    scaleY = image.naturalHeight / 100;
+                    canvas.width = crop.width * scaleX;
+                    canvas.height = crop.height * scaleY;
+                    ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, new Promise(function (resolve, reject) {
+                            canvas.toBlob(function (blob) { return blob ? resolve(blob) : reject(new Error('Canvas is empty')); }, 'image/png', 1);
+                        })];
+                case 2:
+                    blob = _a.sent();
+                    return [4 /*yield*/, readImage(blob)];
+                case 3:
+                    croppedImage = _a.sent();
+                    return [2 /*return*/, [croppedImage.src, blob]];
+                case 4:
+                    error_1 = _a.sent();
+                    throw new Error("Failed to crop image: ".concat(error_1 instanceof Error ? error_1.message : String(error_1)));
+                case 5: return [2 /*return*/];
+            }
+        });
+    });
+}
+var calculateProportionalDimensions = function (naturalWidth, naturalHeight) {
+    var aspectRatio = naturalWidth / naturalHeight;
+    var maxWidth = 600;
+    var maxHeight = 400;
+    var displayWidth = naturalWidth;
+    var displayHeight = naturalHeight;
+    if (displayHeight > maxHeight) {
+        displayHeight = maxHeight;
+        displayWidth = displayHeight * aspectRatio;
+    }
+    if (displayWidth > maxWidth) {
+        displayWidth = maxWidth;
+        displayHeight = displayWidth / aspectRatio;
+    }
+    return {
+        naturalWidth: naturalWidth,
+        naturalHeight: naturalHeight,
+        displayWidth: Math.round(displayWidth),
+        displayHeight: Math.round(displayHeight),
+        aspectRatio: aspectRatio,
+    };
+};
+exports.calculateProportionalDimensions = calculateProportionalDimensions;
+//# sourceMappingURL=utils.js.map

package/dist/components/CropPicker/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CropPicker/utils.ts"],"names":[],"mappings":"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"}

package/dist/lib/hooks/index.d.ts

@@ -15,6 +15,5 @@ export * from './useWindowFocus';
 export * from './useWindowSize';
 export * from './useKeydown';
 export * from './useRefresh';
-export * from './useCropPicker';
 export * from './useFileInput';
 export * from './useStylesFor';

package/dist/lib/hooks/index.js

@@ -31,7 +31,6 @@ __exportStar(require("./useWindowFocus"), exports);
 __exportStar(require("./useWindowSize"), exports);
 __exportStar(require("./useKeydown"), exports);
 __exportStar(require("./useRefresh"), exports);
-__exportStar(require("./useCropPicker"), exports);
 __exportStar(require("./useFileInput"), exports);
 __exportStar(require("./useStylesFor"), exports);
 //# sourceMappingURL=index.js.map

package/dist/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC;AAClC,6DAA0C;AAC1C,uDAAoC;AACpC,6CAA0B;AAC1B,oDAAiC;AACjC,kDAA+B;AAC/B,uDAAoC;AACpC,kDAA+B;AAC/B,gDAA6B;AAC7B,oDAAiC;AACjC,wDAAqC;AACrC,oDAAiC;AACjC,6DAA0C;AAC1C,mDAAgC;AAChC,kDAA+B;AAC/B,+CAA4B;AAC5B,+CAA4B;AAC5B,kDAA+B;AAC/B,iDAA8B;AAC9B,iDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC;AAClC,6DAA0C;AAC1C,uDAAoC;AACpC,6CAA0B;AAC1B,oDAAiC;AACjC,kDAA+B;AAC/B,uDAAoC;AACpC,kDAA+B;AAC/B,gDAA6B;AAC7B,oDAAiC;AACjC,wDAAqC;AACrC,oDAAiC;AACjC,6DAA0C;AAC1C,mDAAgC;AAChC,kDAA+B;AAC/B,+CAA4B;AAC5B,+CAA4B;AAC5B,iDAA8B;AAC9B,iDAA8B"}