[Example@lint] Change: Run yarn lint --fix

guhungry · Jun 30, 2024 · 4e193fc · 4e193fc
1 parent c338c7c
commit 4e193fc
Show file tree

Hide file tree

Showing 22 changed files with 588 additions and 245 deletions.
diff --git a/example/app/App.styles.ts b/example/app/App.styles.ts
@@ -1,4 +1,4 @@
-import { ImageProps, StyleSheet } from "react-native"
+import {ImageProps, StyleSheet} from 'react-native';
 
 let styles = StyleSheet.create({
   container: {
@@ -31,16 +31,15 @@ let styles = StyleSheet.create({
     paddingTop: 16,
   },
   image: {
-    width: "100%",
+    width: '100%',
     aspectRatio: 1120 / 800,
-    paddingHorizontal: 20
+    paddingHorizontal: 20,
   },
 });
 
-
-export let ImageResultProps : ImageProps = {
+export let ImageResultProps: ImageProps = {
   style: styles.image,
-  resizeMode: "contain"
-}
+  resizeMode: 'contain',
+};
 
-export default styles
+export default styles;
diff --git a/example/app/App.tsx b/example/app/App.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { SafeAreaView, ScrollView, Text, View } from 'react-native'
-import EXAMPLES, { Example } from "./example"
-import styles from "./App.styles"
+import {SafeAreaView, ScrollView, Text, View} from 'react-native';
+import EXAMPLES, {Example} from './example';
+import styles from './App.styles';
 
 export default class App extends React.Component<{}, {}> {
   private renderExample = (example: Example) => {
     return (
-      <View testID={`example-${example.id}`} key={example.title} style={styles.exampleContainer}>
+      <View
+        testID={`example-${example.id}`}
+        key={example.title}
+        style={styles.exampleContainer}>
         <Text style={styles.exampleTitle}>{example.title}</Text>
         <Text style={styles.exampleDescription}>{example.description}</Text>
         <View style={styles.exampleInnerContainer}>{example.render()}</View>
@@ -18,10 +21,10 @@ export default class App extends React.Component<{}, {}> {
     return (
       <SafeAreaView style={styles.container}>
         <ScrollView testID="scrollView" style={styles.container}>
-            <Text testID="examplesTitle" style={styles.sectionTitle}>
-              Examples
-            </Text>
-            { EXAMPLES.map(this.renderExample) }
+          <Text testID="examplesTitle" style={styles.sectionTitle}>
+            Examples
+          </Text>
+          {EXAMPLES.map(this.renderExample)}
         </ScrollView>
       </SafeAreaView>
     );

diff --git a/example/app/example/ExampleBatch.tsx b/example/app/example/ExampleBatch.tsx
@@ -1,42 +1,135 @@
-import * as React from "react"
-import {Image, Text} from "react-native"
-import styles, { ImageResultProps } from "../App.styles"
-import {noop} from "../utils"
-import PhotoManipulator, {FlipMode, PhotoBatchOperations, MimeType, RotationMode} from "react-native-photo-manipulator"
-import {IMAGE, OVERLAY} from "./settings"
+import * as React from 'react';
+import {Image, Text} from 'react-native';
+import styles, {ImageResultProps} from '../App.styles';
+import {noop} from '../utils';
+import PhotoManipulator, {
+  FlipMode,
+  PhotoBatchOperations,
+  MimeType,
+  RotationMode,
+} from 'react-native-photo-manipulator';
+import {IMAGE, OVERLAY} from './settings';
 
 export default React.memo(function ExampleBatch() {
-  const [image, setImage] = React.useState<string|null>(null);
-  const [imagePng, setImagePng] = React.useState<string|null>(null);
+  const [image, setImage] = React.useState<string | null>(null);
+  const [imagePng, setImagePng] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     const operation = async () => {
-      setImage(await PhotoManipulator.batch(IMAGE, operations(), { x: 40, y: 5, width: 600, height: 400 }, { width: 300, height: 200 }, 30))
-      setImagePng(await PhotoManipulator.batch(IMAGE, operations(), { x: 40, y: 5, width: 600, height: 400 }, undefined, undefined, MimeType.PNG))
+      setImage(
+        await PhotoManipulator.batch(
+          IMAGE,
+          operations(),
+          {x: 40, y: 5, width: 600, height: 400},
+          {width: 300, height: 200},
+          30,
+        ),
+      );
+      setImagePng(
+        await PhotoManipulator.batch(
+          IMAGE,
+          operations(),
+          {x: 40, y: 5, width: 600, height: 400},
+          undefined,
+          undefined,
+          MimeType.PNG,
+        ),
+      );
     };
 
     operation().then(noop).catch(console.log);
   }, []);
 
-  return <>
-      { typeof image === "string" ? <Text style={styles.exampleDescription}>Crop & Resize</Text> : null }
-      { typeof image === "string" ? <Image testID="batchResult" {...ImageResultProps} source={{ uri: image}} /> : null }
-      { typeof imagePng === "string" ? <Text style={styles.exampleDescription}>Crop Only</Text> : null }
-      { typeof imagePng === "string" ? <Image testID="batchResultPng" {...ImageResultProps} source={{ uri: imagePng}} /> : null }
+  return (
+    <>
+      {typeof image === 'string' ? (
+        <Text style={styles.exampleDescription}>Crop & Resize</Text>
+      ) : null}
+      {typeof image === 'string' ? (
+        <Image
+          testID="batchResult"
+          {...ImageResultProps}
+          source={{uri: image}}
+        />
+      ) : null}
+      {typeof imagePng === 'string' ? (
+        <Text style={styles.exampleDescription}>Crop Only</Text>
+      ) : null}
+      {typeof imagePng === 'string' ? (
+        <Image
+          testID="batchResultPng"
+          {...ImageResultProps}
+          source={{uri: imagePng}}
+        />
+      ) : null}
     </>
+  );
 
   function operations(): PhotoBatchOperations[] {
     return [
-      { operation: "flip", mode: FlipMode.Horizontal },
-      { operation: "rotate", mode: RotationMode.R180 },
-      { operation: "text", options: { text: "Test Print Text", color: "black", textSize: 30, fontName: "Girassol-Regular", position: { x: 80, y: 30 }, thickness: 4 } },
-      { operation: "text", options: { text: "Test Print Text", color: "white", textSize: 30, fontName: "Girassol-Regular", position: { x: 80, y: 30 } } },
-      { operation: "overlay", overlay: OVERLAY, position: { x: 110, y: 25 } },
-      { operation: "text", options: { text: "Test Print Text 2", color: "blue", textSize: 30, position: { x: 100, y: 80 }, thickness: 4 } },
-      { operation: "text", options: { text: "Test Print Text 2", color: "brown", textSize: 30, position: { x: 100, y: 80 } } },
-      { operation: "text", options: { text: "Test Print Text 3", color: "green", textSize: 30, position: { x: 180, y: 180 } } },
-      { operation: "overlay", overlay: OVERLAY, position: { x: 15, y: 65 } },
-      { operation: "text", options: { text: "Test Print Text 4", color: "orange", textSize: 30, position: { x: 30, y: 300 }, rotation: -40 } },
-    ]
+      {operation: 'flip', mode: FlipMode.Horizontal},
+      {operation: 'rotate', mode: RotationMode.R180},
+      {
+        operation: 'text',
+        options: {
+          text: 'Test Print Text',
+          color: 'black',
+          textSize: 30,
+          fontName: 'Girassol-Regular',
+          position: {x: 80, y: 30},
+          thickness: 4,
+        },
+      },
+      {
+        operation: 'text',
+        options: {
+          text: 'Test Print Text',
+          color: 'white',
+          textSize: 30,
+          fontName: 'Girassol-Regular',
+          position: {x: 80, y: 30},
+        },
+      },
+      {operation: 'overlay', overlay: OVERLAY, position: {x: 110, y: 25}},
+      {
+        operation: 'text',
+        options: {
+          text: 'Test Print Text 2',
+          color: 'blue',
+          textSize: 30,
+          position: {x: 100, y: 80},
+          thickness: 4,
+        },
+      },
+      {
+        operation: 'text',
+        options: {
+          text: 'Test Print Text 2',
+          color: 'brown',
+          textSize: 30,
+          position: {x: 100, y: 80},
+        },
+      },
+      {
+        operation: 'text',
+        options: {
+          text: 'Test Print Text 3',
+          color: 'green',
+          textSize: 30,
+          position: {x: 180, y: 180},
+        },
+      },
+      {operation: 'overlay', overlay: OVERLAY, position: {x: 15, y: 65}},
+      {
+        operation: 'text',
+        options: {
+          text: 'Test Print Text 4',
+          color: 'orange',
+          textSize: 30,
+          position: {x: 30, y: 300},
+          rotation: -40,
+        },
+      },
+    ];
   }
-})
+});
diff --git a/example/app/example/ExampleCrop.tsx b/example/app/example/ExampleCrop.tsx
@@ -1,33 +1,73 @@
-import * as React from "react"
-import { Image, Text } from "react-native"
-import styles, { ImageResultProps } from "../App.styles"
-import { noop } from "../utils"
-import PhotoManipulator from "react-native-photo-manipulator"
-import { IMAGE } from "./settings"
+import * as React from 'react';
+import {Image, Text} from 'react-native';
+import styles, {ImageResultProps} from '../App.styles';
+import {noop} from '../utils';
+import PhotoManipulator from 'react-native-photo-manipulator';
+import {IMAGE} from './settings';
 
 export default React.memo(function ExampleCrop() {
-  const [crop, setCrop] = React.useState<string|null>(null);
-  const [resize, setResize] = React.useState<string|null>(null);
-  const [cropPng, setCropPng] = React.useState<string|null>(null);
+  const [crop, setCrop] = React.useState<string | null>(null);
+  const [resize, setResize] = React.useState<string | null>(null);
+  const [cropPng, setCropPng] = React.useState<string | null>(null);
 
   React.useEffect(() => {
     const operation = async () => {
-      setCrop(await PhotoManipulator.crop(IMAGE, { x: 400, y: 200, width: 300, height: 200 }));
-      setResize(await PhotoManipulator.crop(IMAGE, { x: 400, y: 200, width: 300, height: 200 }, { width: 60, height: 40 }))
-      setCropPng(await PhotoManipulator.crop(IMAGE, { x: 400, y: 200, width: 300, height: 200 }));
+      setCrop(
+        await PhotoManipulator.crop(IMAGE, {
+          x: 400,
+          y: 200,
+          width: 300,
+          height: 200,
+        }),
+      );
+      setResize(
+        await PhotoManipulator.crop(
+          IMAGE,
+          {x: 400, y: 200, width: 300, height: 200},
+          {width: 60, height: 40},
+        ),
+      );
+      setCropPng(
+        await PhotoManipulator.crop(IMAGE, {
+          x: 400,
+          y: 200,
+          width: 300,
+          height: 200,
+        }),
+      );
     };
 
     operation().then(noop).catch(console.log);
   }, []);
 
   return (
     <>
-      { typeof crop === "string" ? <Text style={styles.exampleDescription}>Crop</Text> : null }
-      { typeof crop === "string" ? <Image testID="cropResult" {...ImageResultProps} source={{ uri: crop}} /> : null }
-      { typeof resize === "string" ? <Text style={styles.exampleDescription}>Crop & Resize</Text> : null }
-      { typeof resize === "string" ? <Image testID="cropResizeResult" {...ImageResultProps} source={{ uri: resize}} /> : null }
-      { typeof cropPng === "string" ? <Text style={styles.exampleDescription}>PNG</Text> : null }
-      { typeof cropPng === "string" ? <Image testID="cropPngResult" {...ImageResultProps} source={{ uri: cropPng}} /> : null }
+      {typeof crop === 'string' ? (
+        <Text style={styles.exampleDescription}>Crop</Text>
+      ) : null}
+      {typeof crop === 'string' ? (
+        <Image testID="cropResult" {...ImageResultProps} source={{uri: crop}} />
+      ) : null}
+      {typeof resize === 'string' ? (
+        <Text style={styles.exampleDescription}>Crop & Resize</Text>
+      ) : null}
+      {typeof resize === 'string' ? (
+        <Image
+          testID="cropResizeResult"
+          {...ImageResultProps}
+          source={{uri: resize}}
+        />
+      ) : null}
+      {typeof cropPng === 'string' ? (
+        <Text style={styles.exampleDescription}>PNG</Text>
+      ) : null}
+      {typeof cropPng === 'string' ? (
+        <Image
+          testID="cropPngResult"
+          {...ImageResultProps}
+          source={{uri: cropPng}}
+        />
+      ) : null}
     </>
-  )
-})
+  );
+});