@codeleap/web 6.1.2 → 6.3.0

package/dist/lib/hooks/useCropPicker.js

@@ -1,216 +0,0 @@
-"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 };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.readImage = readImage;
-exports.cropImage = cropImage;
-exports.useCropPicker = useCropPicker;
-var hooks_1 = require("@codeleap/hooks");
-function readImage(file) {
-    var reader = new FileReader();
-    return new Promise(function (resolve) {
-        reader.onload = function () {
-            var image = new Image();
-            image.onload = function () { return resolve(image); };
-            image.src = reader.result;
-        };
-        reader.readAsDataURL(file);
-    });
-}
-function cropImage(image, crop, type) {
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d', { alpha: true });
-    if (!ctx)
-        throw new Error('No 2d context');
-    canvas.width = image.naturalWidth * (crop.width / 100);
-    canvas.height = image.naturalHeight * (crop.height / 100);
-    var x = image.naturalWidth * (crop.x / 100);
-    var y = image.naturalHeight * (crop.y / 100);
-    ctx.drawImage(image, x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
-    return new Promise(function (resolve, reject) {
-        canvas.toBlob(function (blob) {
-            if (!blob) {
-                reject(new Error('Canvas is empty'));
-                return;
-            }
-            readImage(blob).then(function (cropped) {
-                resolve([cropped.src, blob]);
-            }).catch(reject);
-        }, "image/".concat(type));
-    });
-}
-function useCropPicker(_a) {
-    var _this = this;
-    var onFileSelect = _a.onFileSelect, ref = _a.ref, aspect = _a.aspect, minW = _a.minWidth, minH = _a.minHeight;
-    var _b = (0, hooks_1.useBooleanToggle)(false), visible = _b[0], toggle = _b[1];
-    var _c = (0, hooks_1.useState)(null), image = _c[0], setImage = _c[1];
-    var _d = (0, hooks_1.useState)(), crop = _d[0], setCrop = _d[1];
-    var _e = (0, hooks_1.useState)(), relativeCrop = _e[0], setRelativeCrop = _e[1];
-    var _f = (0, hooks_1.useState)(false), isLoading = _f[0], setIsLoading = _f[1];
-    var croppedPromise = (0, hooks_1.usePromise)({});
-    var onCancel = function () { return croppedPromise.resolve([]); };
-    var onResolved = function (files) {
-        var _a;
-        (_a = croppedPromise.resolve) === null || _a === void 0 ? void 0 : _a.call(croppedPromise, files);
-        onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(files);
-    };
-    var cleanup = function () {
-        toggle();
-        setRelativeCrop(null);
-        setCrop(undefined);
-        setTimeout(function () { return setImage(null); }, 500);
-    };
-    var onConfirmCrop = function () {
-        var args_1 = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args_1[_i] = arguments[_i];
-        }
-        return __awaiter(_this, __spreadArray([], args_1, true), void 0, function (imageType) {
-            var _a, preview, croppedFile;
-            if (imageType === void 0) { imageType = 'jpeg'; }
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        setIsLoading(true);
-                        return [4 /*yield*/, cropImage(image, relativeCrop, imageType)];
-                    case 1:
-                        _a = _b.sent(), preview = _a[0], croppedFile = _a[1];
-                        onResolved([
-                            {
-                                file: new File([croppedFile], 'cropped.jpg'),
-                                preview: preview,
-                            },
-                        ]);
-                        setIsLoading(false);
-                        setTimeout(function () { return cleanup(); });
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    var onFilesReturned = function (event) { return __awaiter(_this, void 0, void 0, function () {
-        var file, imageData, naturalWidth, naturalHeight, imageAspect, v, initialCrop;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    file = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
-                    return [4 /*yield*/, readImage(file)];
-                case 1:
-                    imageData = _c.sent();
-                    naturalWidth = imageData.naturalWidth, naturalHeight = imageData.naturalHeight;
-                    imageAspect = naturalWidth / naturalHeight;
-                    v = imageAspect >= aspect
-                        ? {
-                            width: ((naturalHeight * aspect) / naturalWidth) * 100,
-                            height: 100,
-                        }
-                        : {
-                            width: 100,
-                            height: (naturalWidth / aspect / naturalHeight) * 100,
-                        };
-                    initialCrop = __assign(__assign({}, v), { x: (100 - v.width) / 2, y: (100 - v.height) / 2, unit: '%' });
-                    setCrop(initialCrop);
-                    setRelativeCrop(initialCrop);
-                    setImage(imageData);
-                    setTimeout(function () { return toggle(); });
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var onClose = function () {
-        onCancel();
-        setTimeout(function () { return cleanup(); });
-    };
-    var fileInputRef = (0, hooks_1.useRef)(null);
-    (0, hooks_1.useImperativeHandle)(ref, function () { return ({
-        openFilePicker: function () {
-            fileInputRef.current.openFilePicker();
-            return croppedPromise._await();
-        },
-        clear: function () {
-            fileInputRef.current.clear();
-            return croppedPromise._await();
-        },
-    }); });
-    var minWidth = (minW !== null && minW !== void 0 ? minW : 100) * aspect;
-    var minHeight = minH !== null && minH !== void 0 ? minH : 100;
-    var handleCropChange = (0, hooks_1.useCallback)(function (newCrop) {
-        setCrop(__assign(__assign({}, newCrop), { width: newCrop.width < minWidth ? minWidth : newCrop.width, height: newCrop.height < minHeight ? minHeight : newCrop.height }));
-    }, [crop]);
-    return {
-        onCancel: onCancel,
-        onResolved: onResolved,
-        cleanup: cleanup,
-        onConfirmCrop: onConfirmCrop,
-        onFilesReturned: onFilesReturned,
-        onClose: onClose,
-        fileInputRef: fileInputRef,
-        visible: visible,
-        toggle: toggle,
-        image: image,
-        setImage: setImage,
-        crop: crop,
-        setCrop: setCrop,
-        relativeCrop: relativeCrop,
-        setRelativeCrop: setRelativeCrop,
-        isLoading: isLoading,
-        croppedPromise: croppedPromise,
-        handleCropChange: handleCropChange,
-    };
-}
-//# sourceMappingURL=useCropPicker.js.map

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

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

package/src/lib/hooks/useCropPicker.ts

@@ -1,192 +0,0 @@
-import {
-  useBooleanToggle,
-  useCallback,
-  useImperativeHandle,
-  usePromise,
-  useRef,
-  useState,
-} from '@codeleap/hooks'
-import { WebInputFile } from '@codeleap/types'
-import { ImageReading } from '../../components/CropPicker'
-import { FileInputProps, FileInputRef } from '../../components/FileInput'
-import { Crop, ReactCropProps } from 'react-image-crop'
-
-export type UseCropPickerProps = Partial<ReactCropProps> & {
-  onFileSelect: FileInputProps['onFileSelect']
-  ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
-}
-
-type ImageType = 'png' | 'jpeg' | 'webp'
-
-export function readImage(file: File | Blob): Promise<ImageReading> {
-  const reader = new FileReader()
-  return new Promise<ImageReading>((resolve) => {
-    reader.onload = () => {
-      const image = new Image()
-      image.onload = () => resolve(image)
-      image.src = reader.result as string
-    }
-    reader.readAsDataURL(file)
-  })
-}
-
-export function cropImage(image: ImageReading, crop: Crop, type: ImageType): Promise<[string, Blob]> {
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d', { alpha: true })
-
-  if (!ctx) throw new Error('No 2d context')
-
-  canvas.width = image.naturalWidth * (crop.width / 100)
-  canvas.height = image.naturalHeight * (crop.height / 100)
-
-  const x = image.naturalWidth * (crop.x / 100)
-  const y = image.naturalHeight * (crop.y / 100)
-
-  ctx.drawImage(
-    image,
-    x,
-    y,
-    canvas.width,
-    canvas.height,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-  )
-
-  return new Promise<[string, Blob]>((resolve, reject) => {
-    canvas.toBlob(blob => {
-      if (!blob) {
-        reject(new Error('Canvas is empty'))
-        return
-      }
-      readImage(blob).then(cropped => {
-        resolve([cropped.src, blob])
-      }).catch(reject)
-    }, `image/${type}`)
-  })
-}
-
-export function useCropPicker({
-  onFileSelect,
-  ref,
-  aspect,
-  minWidth: minW,
-  minHeight: minH,
-}: UseCropPickerProps) {
-  const [visible, toggle] = useBooleanToggle(false)
-  const [image, setImage] = useState<ImageReading>(null)
-  const [crop, setCrop] = useState<Crop>()
-  const [relativeCrop, setRelativeCrop] = useState<Crop>()
-  const [isLoading, setIsLoading] = useState(false)
-  const croppedPromise = usePromise<WebInputFile[]>({})
-
-  const onCancel = () => croppedPromise.resolve([])
-
-  const onResolved = (files: WebInputFile[]) => {
-    croppedPromise.resolve?.(files)
-    onFileSelect?.(files)
-  }
-
-  const cleanup = () => {
-    toggle()
-    setRelativeCrop(null)
-    setCrop(undefined)
-    setTimeout(() => setImage(null), 500)
-  }
-
-  const onConfirmCrop = async (imageType: ImageType = 'jpeg') => {
-    setIsLoading(true)
-    const [preview, croppedFile] = await cropImage(image, relativeCrop, imageType)
-    onResolved([
-      {
-        file: new File([croppedFile], 'cropped.jpg'),
-        preview,
-      },
-    ])
-    setIsLoading(false)
-    setTimeout(() => cleanup())
-  }
-
-  const onFilesReturned = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const file = event?.target?.files?.[0]
-    const imageData = await readImage(file)
-    const { naturalWidth, naturalHeight } = imageData
-    const imageAspect = naturalWidth / naturalHeight
-    const v =
-        imageAspect >= aspect
-          ? {
-            width: ((naturalHeight * aspect) / naturalWidth) * 100,
-            height: 100,
-          }
-          : {
-            width: 100,
-            height: (naturalWidth / aspect / naturalHeight) * 100,
-          }
-    const initialCrop: Crop = {
-      ...v,
-      x: (100 - v.width) / 2,
-      y: (100 - v.height) / 2,
-      unit: '%',
-    }
-    setCrop(initialCrop)
-    setRelativeCrop(initialCrop)
-    setImage(imageData)
-    setTimeout(() => toggle())
-  }
-
-  const onClose = () => {
-    onCancel()
-    setTimeout(() => cleanup())
-  }
-
-  const fileInputRef = useRef<FileInputRef>(null)
-
-  useImperativeHandle(ref, () => ({
-    openFilePicker: () => {
-      fileInputRef.current.openFilePicker()
-      return croppedPromise._await()
-    },
-    clear: () => {
-      fileInputRef.current.clear()
-      return croppedPromise._await()
-    },
-  }))
-
-  const minWidth = (minW ?? 100) * aspect
-  const minHeight = minH ?? 100
-
-  const handleCropChange = useCallback(
-    (newCrop: Crop) => {
-      setCrop({
-        ...newCrop,
-        width: newCrop.width < minWidth ? minWidth : newCrop.width,
-        height: newCrop.height < minHeight ? minHeight : newCrop.height,
-      })
-    },
-    [crop],
-  )
-
-  return {
-    onCancel,
-    onResolved,
-    cleanup,
-    onConfirmCrop,
-    onFilesReturned,
-    onClose,
-    fileInputRef,
-    visible,
-    toggle,
-    image,
-    setImage,
-    crop,
-    setCrop,
-    relativeCrop,
-    setRelativeCrop,
-    isLoading,
-    croppedPromise,
-    handleCropChange,
-  }
-}