fix: fix Dropzone layout (#338)

* test: fix dragZone stories * refactor: use style const * refactor: update dropZone style
zakodium-oss · Nov 14, 2022 · f2c23f8 · f2c23f8
1 parent 225526d
commit f2c23f8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/src/components/drop-zone/DropZone.tsx b/src/components/drop-zone/DropZone.tsx
@@ -12,7 +12,12 @@ export interface DropZoneProps {
   ) => void;
   fileValidator?: <T extends File>(file: T) => FileError | FileError[] | null;
 }
-
+const centerStyle = css`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
 export function DropZoneContainer(
   props: DropZoneProps & {
     children: JSX.Element;
@@ -30,7 +35,11 @@ export function DropZoneContainer(
   );
 }
 
-export function DropZone(props: DropZoneProps) {
+export function DropZone(
+  props: DropZoneProps & {
+    emptyText?: string;
+  },
+) {
   return <DropZoneContent {...props} />;
 }
 
@@ -39,12 +48,14 @@ function DropZoneContent(
     children?: JSX.Element;
     isContainer?: boolean;
     onClick?: MouseEventHandler<HTMLDivElement>;
+    emptyText?: string;
   },
 ) {
   const {
     color = 'black',
     children,
     onDrop,
+    emptyText = 'Drag and drop your files here, or click to select files',
     isContainer = false,
     onClick,
     fileValidator,
@@ -60,7 +71,6 @@ function DropZoneContent(
     validator: fileValidator,
     onDrop: handleOnDrop,
   });
-
   const getPropsOptions = useMemo(() => {
     if (onClick) {
       return { onClick };
@@ -102,14 +112,7 @@ function DropZoneContent(
 
         <div style={{ fontSize: '1.5em' }}>
           {isDragActive ? (
-            <div
-              css={css`
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-              `}
-            >
+            <div css={centerStyle}>
               <FaCloudUploadAlt
                 size={70}
                 css={css`
@@ -120,19 +123,14 @@ function DropZoneContent(
               <p>Drop the files here</p>
             </div>
           ) : isContainer ? null : (
-            <p>Drag and drop your files here, or click to select files</p>
+            <p css={centerStyle}>{emptyText}</p>
           )}
         </div>
       </div>
       <input
         type="file"
         css={css`
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
+          test-align: center;
         `}
         {...getInputProps()}
       />

diff --git a/stories/components/drop-zone.stories.tsx b/stories/components/drop-zone.stories.tsx
@@ -17,7 +17,7 @@ interface DropZoneStoryProps {
 }
 
 function fileValidator(file: File) {
-  if (file.name.length > 20) {
+  if (file?.name?.length > 20) {
     return {
       message: 'File name is larger than 20 characters',
       code: 'name-too-large',
@@ -26,13 +26,19 @@ function fileValidator(file: File) {
   return null;
 }
 
-export function Control({ color }: DropZoneStoryProps) {
+export function Control({
+  color,
+  emptyText,
+}: DropZoneStoryProps & {
+  emptyText?: string;
+}) {
   const [files, setFiles] = useState<FileWithPath[]>([]);
   return (
     <div>
       <DropZone
         fileValidator={fileValidator}
         color={color}
+        emptyText={emptyText}
         onDrop={(files: FileWithPath[]) => {
           setFiles(files);
         }}
@@ -57,6 +63,7 @@ export function Control({ color }: DropZoneStoryProps) {
 
 Control.args = {
   color: 'black',
+  emptyText: 'Drag and drop your files',
 };
 
 export function DropZoneContainerControl({ color }: DropZoneStoryProps) {