move move frontend to progress-test

app/javascript/components/AvatarEditor/PhotoCrop.tsx

@@ -0,0 +1,49 @@
+import React, { FC, useState } from "react";
+import PhotoCropper from "react-avatar-edit";
+
+type Props = {
+  callback: (value: any) => void
+}
+
+const borderStyle: React.CSSProperties = {
+  textAlign: 'center',
+  margin: 'auto',
+  borderStyle: 'dotted',
+  borderWidth: '0.3rem',
+  borderRadius: '0.3rem',
+}
+
+export const PhotoCrop: FC<Props> = ({ callback }) => {
+  const [result, setResult] = useState<any>();
+  const onCrop = (cropped: any) => {
+    setResult(cropped);
+    callback(result);
+  };
+
+  const onClose = () => {
+    setResult(null);
+  };
+
+  const onBeforeFileLoad = (elem: any) => {
+    if (elem.target.files[0].size > 1000000) {
+      elem.target.value = "";
+      alert("A imagem selecionada é grande de mais!")
+    }
+  };
+
+  const dimention = 300;
+
+  return (
+    <PhotoCropper
+      borderStyle={borderStyle}
+      label="Escolha uma imagem"
+      width={dimention}
+      height={dimention}
+      imageWidth={dimention}
+      imageHeight={dimention}
+      onCrop={(e) => onCrop(e)}
+      onClose={() => onClose()}
+      onBeforeFileLoad={onBeforeFileLoad}
+    />
+  );
+};