ImageUpload (first attmpt)

src/components/editors/EditorPanel/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
-import { INode, IFileWithUUID } from '~/redux/types';
+import { INode } from '~/redux/types';
 
 interface IProps {
   data: INode;

src/components/editors/ImageEditor/index.tsx

@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 import { selectUploads } from '~/redux/uploads/selectors';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
+import { ImageUpload } from '~/components/upload/ImageUpload';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -100,7 +101,25 @@ const ImageEditorUnconnected: FC<IProps> = ({ data, setData, uploadUploadFiles,
 
   return (
     <form className={styles.uploads} onDrop={onDrop}>
-      <div>{data.type}</div>
+      {
+        data.files.map(file => (
+          <ImageUpload
+            thumb={file.url}
+          />
+        ))
+      }
+      {
+        temp.map(id => (
+          statuses[id] && (
+            <ImageUpload
+              thumb={statuses[id].preview}
+              progress={statuses[id].progress}
+              is_uploading
+            />
+          )
+        ))
+      }
+
       <input type="file" onChange={onInputChange} accept="image/*" multiple />
     </form>
   );

src/components/input/ArcProgress/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { describeArc } from '~/utils/dom';
+
+interface IProps {
+  size: number;
+  progress: number;
+};
+
+export const ArcProgress: FC<IProps> = ({ size, progress }) => (
+  <svg className={styles.icon} width={size} height={size}>
+    <path
+      d={describeArc(
+        size / 2,
+        size / 2,
+        size / 2 - 2,
+        360 * (1 - progress),
+        360,
+      )}
+    />
+  </svg>
+);

src/components/input/ArcProgress/styles.scss

@@ -0,0 +1,8 @@
+.icon {
+  fill: $red;
+  stroke: none;
+
+  //path {
+  //  transition: d 0.5s;
+  //}
+}

src/components/upload/ImageUpload/index.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import classNames from 'classnames';
+import { ArcProgress } from '~/components/input/ArcProgress';
+
+interface IProps {
+  id?: string;
+  thumb?: string;
+  progress?: number;
+
+  is_uploading?: boolean;
+};
+
+const ImageUpload: FC<IProps> = ({
+  thumb,
+  id,
+  progress,
+  is_uploading,
+}) => {
+  return (
+    <div className={styles.wrap}>
+      <div className={classNames(styles.thumb_wrap, { is_uploading })}>
+        {thumb && <div className={styles.thumb} style={{ background: `url("${thumb}")` }} />}
+        {is_uploading && <div className={styles.progress}><ArcProgress size={72} progress={progress} /></div>}
+      </div>
+    </div>
+  );
+}
+
+export { ImageUpload };

src/components/upload/ImageUpload/styles.scss

@@ -0,0 +1,52 @@
+.wrap {
+  background: lighten($content_bg, 4%);
+  padding-bottom: 100%;
+  border-radius: $radius;
+  position: relative;
+}
+
+.thumb_wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: $radius;
+  overflow: hidden;
+
+  &:global(.is_uploading) {
+    .thumb {
+      filter: blur(16px);
+    }
+  }
+}
+
+.thumb {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  border-radius: $radius;
+  background: no-repeat 50% 50%;
+  background-size: cover;
+}
+
+.progress {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparentize(black, 0.5);
+
+  svg {
+    fill: none;
+    // stroke: white
+    fill: white;
+  }
+}