[No QA] [TS migration] Migrate 'cropOrRotateImage' lib to TypeScript

src/libs/cropOrRotateImage/index.native.js → src/libs/cropOrRotateImage/index.native.ts

@@ -1,16 +1,12 @@
 import RNImageManipulator from '@oguzhnatly/react-native-image-manipulator';
 import RNFetchBlob from 'react-native-blob-util';
+import {CropOrRotateImage} from './types';
 
 /**
  * Crops and rotates the image on ios/android
- *
- * @param {String} uri
- * @param {Array<Object>} actions
- * @param {Object} options
- * @returns {Promise<Object>} Returns cropped and rotated image
  */
-function cropOrRotateImage(uri, actions, options = {}) {
- return new Promise((resolve) => {
+const cropOrRotateImage: CropOrRotateImage = (uri, actions, options) =>
+ new Promise((resolve) => {
  RNImageManipulator.manipulate(uri, actions, options).then((result) => {
  RNFetchBlob.fs.stat(result.uri.replace('file://', '')).then(({size}) => {
  resolve({
@@ -22,6 +18,5 @@ function cropOrRotateImage(uri, actions, options = {}) {
  });
  });
  });
-}
 
 export default cropOrRotateImage;

src/libs/cropOrRotateImage/index.js → src/libs/cropOrRotateImage/index.ts

@@ -1,14 +1,14 @@
-import _ from 'underscore';
+import {CropOptions, CropOrRotateImage, CropOrRotateImageOptions, FileWithUri} from './types';
+
+type SizeFromAngle = {
+ width: number;
+ height: number;
+};
 
 /**
  * Calculates a size of canvas after rotation
- *
- * @param {Number} width
- * @param {Number} height
- * @param {Number} angle
- * @returns {Object} Returns width and height of new canvas
  */
-function sizeFromAngle(width, height, angle) {
+function sizeFromAngle(width: number, height: number, angle: number): SizeFromAngle {
  const radians = (angle * Math.PI) / 180;
  let sine = Math.cos(radians);
  let cosine = Math.sin(radians);
@@ -23,12 +23,8 @@ function sizeFromAngle(width, height, angle) {
 
 /**
  * Creates a new rotated canvas
- *
- * @param {Object} canvas
- * @param {Number} degrees
- * @returns {Object}
  */
-function rotateCanvas(canvas, degrees) {
+function rotateCanvas(canvas: HTMLCanvasElement, degrees: number): HTMLCanvasElement {
  const {width, height} = sizeFromAngle(canvas.width, canvas.height, degrees);
 
  // We have to create a new canvas because it is not possible to change already drawn
@@ -38,28 +34,24 @@ function rotateCanvas(canvas, degrees) {
  result.height = height;
 
  const context = result.getContext('2d');
+ if (context) {
+ // In order to rotate image along its center we have to apply next transformation
+ context.translate(result.width / 2, result.height / 2);
 
- // In order to rotate image along its center we have to apply next transformation
- context.translate(result.width / 2, result.height / 2);
-
- const radians = (degrees * Math.PI) / 180;
- context.rotate(radians);
-
- context.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
+ const radians = (degrees * Math.PI) / 180;
+ context.rotate(radians);
 
+ context.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
+ }
  return result;
 }
 
 /**
  * Creates new cropped canvas and returns it
- *
- * @param {Object} canvas
- * @param {Object} options
- * @returns {Object}
  */
-function cropCanvas(canvas, options) {
+function cropCanvas(canvas: HTMLCanvasElement, options: CropOptions) {
  let {originX = 0, originY = 0, width = 0, height = 0} = options;
- const clamp = (value, max) => Math.max(0, Math.min(max, value));
+ const clamp = (value: number, max: number) => Math.max(0, Math.min(max, value));
 
  width = clamp(width, canvas.width);
  height = clamp(height, canvas.height);
@@ -74,20 +66,18 @@ function cropCanvas(canvas, options) {
  result.height = height;
 
  const context = result.getContext('2d');
- context.drawImage(canvas, originX, originY, width, height, 0, 0, width, height);
+ context?.drawImage(canvas, originX, originY, width, height, 0, 0, width, height);
 
  return result;
 }
 
-/**
- * @param {Object} canvas
- * @param {Object} options
- * @returns {Promise<File>}
- */
-function convertCanvasToFile(canvas, options = {}) {
+function convertCanvasToFile(canvas: HTMLCanvasElement, options: CropOrRotateImageOptions): Promise<FileWithUri> {
  return new Promise((resolve) => {
  canvas.toBlob((blob) => {
- const file = new File([blob], options.name || 'fileName.jpeg', {type: options.type || 'image/jpeg'});
+ if (!blob) {
+ return;
+ }
+ const file = new File([blob], options.name || 'fileName.jpeg', {type: options.type || 'image/jpeg'}) as FileWithUri;
  file.uri = URL.createObjectURL(file);
  resolve(file);
  });
@@ -96,11 +86,8 @@ function convertCanvasToFile(canvas, options = {}) {
 
 /**
  * Loads image from specified url
- *
- * @param {String} uri
- * @returns {Promise<Object>}
  */
-function loadImageAsync(uri) {
+function loadImageAsync(uri: string): Promise<HTMLCanvasElement> {
  return new Promise((resolve, reject) => {
  const imageSource = new Image();
  imageSource.crossOrigin = 'anonymous';
@@ -110,7 +97,7 @@ function loadImageAsync(uri) {
  canvas.height = imageSource.naturalHeight;
 
  const context = canvas.getContext('2d');
- context.drawImage(imageSource, 0, 0, imageSource.naturalWidth, imageSource.naturalHeight);
+ context?.drawImage(imageSource, 0, 0, imageSource.naturalWidth, imageSource.naturalHeight);
 
  resolve(canvas);
  };
@@ -121,30 +108,20 @@ function loadImageAsync(uri) {
 
 /**
  * Crops and rotates the image on web
- *
- * @param {String} uri
- * @param {Object} actions
- * @param {Object} options
- * @returns {Promise<Object>} Returns cropped and rotated image
  */
-function cropOrRotateImage(uri, actions, options) {
- return loadImageAsync(uri).then((originalCanvas) => {
- const resultCanvas = _.reduce(
- actions,
- (canvas, action) => {
- if ('crop' in action) {
- return cropCanvas(canvas, action.crop);
- }
- if ('rotate' in action) {
- return rotateCanvas(canvas, action.rotate);
- }
- return canvas;
- },
- originalCanvas,
- );
 
+const cropOrRotateImage: CropOrRotateImage = (uri, actions, options) =>
+ loadImageAsync(uri).then((originalCanvas) => {
+ const resultCanvas = actions.reduce((canvas, action) => {
+ if (action.crop) {
+ return cropCanvas(canvas, action.crop);
+ }
+ if (action.rotate) {
+ return rotateCanvas(canvas, action.rotate);
+ }
+ return canvas;
+ }, originalCanvas);
  return convertCanvasToFile(resultCanvas, options);
  });
-}
 
 export default cropOrRotateImage;

src/libs/cropOrRotateImage/types.ts

@@ -0,0 +1,29 @@
+import {RNImageManipulatorResult} from '@oguzhnatly/react-native-image-manipulator';
+
+type CropOrRotateImageOptions = {
+ type: string;
+ name: string;
+ compress: number;
+};
+
+type CropOptions = {
+ originX: number;
+ originY: number;
+ width: number;
+ height: number;
+};
+
+type Action = {
+ crop?: CropOptions;
+ rotate?: number;
+};
+
+type FileWithUri = File & {
+ uri: string;
+};
+
+type CustomRNImageManipulatorResult = RNImageManipulatorResult & {size: number; type: string; name: string};
+
+type CropOrRotateImage = (uri: string, actions: Action[], options: CropOrRotateImageOptions) => Promise<FileWithUri | CustomRNImageManipulatorResult>;
+
+export type {CropOrRotateImage, CropOptions, Action, FileWithUri, CropOrRotateImageOptions};