feat(core): drag & drop

Author: Kunduin

package.json

@@ -93,7 +93,7 @@
     }
   },
   "lint-staged": {
-    "{stories,src}/**/*.css": "stylelint --syntax css",
+    "{stories,src}/**/*.css": "stylelint",
     "{stories,src}/**/*.{ts,tsx}": [
       "tslint --project tsconfig.json -c tslint.json --fix",
       "prettier --write",

src/FileState.tsx

@@ -0,0 +1,5 @@
+export const UPLOADING = "uploading";
+export const WAITING = "waiting";
+export const CANCELED = "canceled";
+export const RESOLVED = "resolved";
+export const ERROR = "error";

src/ReactUploaderSkeleton.tsx

@@ -1,14 +1,95 @@
-import React from "react";
+import React, { createRef, RefObject } from "react";
+import * as FileState from "./FileState";
 
 interface IReactUploaderSkeletonProps {
-  anyText: string;
+  anyText?: string;
+  onClick?: () => void;
+}
+
+interface IUploaderFileData {
+  id: number | string;
+  state: string;
+  url?: string;
+  fileData?: File;
+}
+
+interface IReactUploaderSkeletonState {
+  currentFiles: IUploaderFileData[];
 }
 
 class ReactUploaderSkeleton extends React.Component<
-  IReactUploaderSkeletonProps
+  IReactUploaderSkeletonProps,
+  IReactUploaderSkeletonState
 > {
+  public static defaultProps = {};
+
+  public readonly state: IReactUploaderSkeletonState = {
+    currentFiles: []
+  };
+
+  private fileInputRef: RefObject<HTMLInputElement>;
+
+  constructor(props: IReactUploaderSkeletonProps) {
+    super(props);
+    this.fileInputRef = createRef<HTMLInputElement>();
+  }
+
+  public onUploaderClick = () => {
+    const { current } = this.fileInputRef;
+    if (current) {
+      current.click();
+    }
+  };
+
+  public onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.target;
+    if (files) {
+      for (const fileIndex in files) {
+        const currentFile = files[fileIndex];
+        if (currentFile && /image\/.+/.test(currentFile.type)) {
+          const fileReader = new FileReader();
+          fileReader.addEventListener("load", () => {
+            this.setState(({ currentFiles }) => ({
+              currentFiles: [
+                ...currentFiles,
+                {
+                  url: fileReader.result as string,
+                  id: currentFile.name,
+                  state: FileState.WAITING,
+                  fileData: currentFile
+                }
+              ]
+            }));
+          });
+          fileReader.readAsDataURL(files[fileIndex]);
+        }
+      }
+    }
+  };
+
   public render() {
-    return <div>{this.props.anyText}</div>;
+    const { currentFiles } = this.state;
+    return (
+      <div onClick={this.onUploaderClick} className="rus">
+        {this.props.anyText}
+
+        {currentFiles.map(file => (
+          <div key={file.id}>
+            {file.fileData && file.fileData.name}
+
+            <img alt={file.fileData && file.fileData.name} src={file.url} />
+          </div>
+        ))}
+
+        <input
+          className="rus_input"
+          ref={this.fileInputRef}
+          onChange={this.onFileChange}
+          type="file"
+          multiple={true}
+        />
+      </div>
+    );
   }
 }
 

src/index.ts

@@ -1,3 +1,2 @@
-import ReactUploaderSkeleton from "./ReactUploaderSkeleton";
-
-export default ReactUploaderSkeleton;
+import "./styles.css";
+export { default as ReactUploaderSkeleton } from "./ReactUploaderSkeleton";

src/styles.css

@@ -0,0 +1,22 @@
+.rus {
+  --theme-color: hsl(262, 25%, 76%);
+  --theme-background: hsl(262, 25%, 95%);
+
+  position: relative;
+  padding: 10px;
+  background-color: var(--theme-background);
+  border: 2px dashed var(--theme-color);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.rus_input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  visibility: hidden;
+  opacity: 0;
+}