editor refactoring

src/components/containers/Scroll/index.tsx

@@ -14,12 +14,7 @@ interface IProps {
   onScrollStop?: MouseEventHandler;
 }
 
-export const Scroll = ({
+const Scroll = ({ children, className = '', onRef = null, ...props }: IProps) => {
-  children,
-  className = '',
-  onRef = null,
-  ...props
-}: IProps) => {
   const [ref, setRef] = useState(null);
 
   useEffect(() => {
@@ -43,3 +38,5 @@ export const Scroll = ({
     </Scrollbars>
   );
 };
+
+export { Scroll };

src/components/editors/ImageEditor/index.tsx

@@ -1,12 +1,10 @@
-import React, { FC, ChangeEventHandler, DragEventHandler, useCallback } from 'react';
+import React, { FC, ChangeEventHandler, DragEventHandler, useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { INode } from '~/redux/types';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import { IUploadStatus } from '~/redux/uploads/reducer';
-import { moveArrItem } from '~/utils/fn';
-import assocPath from 'ramda/es/assocPath';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
@@ -16,14 +14,17 @@ const mapDispatchToProps = {
 type IProps = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
     data: INode;
-    pending_files: IUploadStatus[];
-
     setData: (val: INode) => void;
-    onFileMove: (from: number, to: number) => void;
+    temp: string[];
-    onInputChange: ChangeEventHandler<HTMLInputElement>;
+    setTemp: (val: string[]) => void;
   };
 
-const ImageEditorUnconnected: FC<IProps> = ({ data, setData, pending_files }) => {
+const ImageEditorUnconnected: FC<IProps> = ({ data, setData, temp, statuses }) => {
+  const pending_files = useMemo(() => temp.filter(id => !!statuses[id]).map(id => statuses[id]), [
+    temp,
+    statuses,
+  ]);
+
   return <ImageGrid data={data} setData={setData} locked={pending_files} />;
 };
 

src/components/editors/ImageGrid/index.tsx

@@ -12,8 +12,6 @@ interface IProps {
   data: INode;
   setData: (val: INode) => void;
   locked: IUploadStatus[];
-  // items: IFile[];
-  // onFileMove: (o: number, n: number) => void;
 }
 
 const SortableItem = SortableElement(({ children }) => (

src/components/input/InputText/index.tsx

@@ -1,9 +1,4 @@
-import React, {
+import React, { FC, ChangeEvent, useCallback, useState, useEffect } from 'react';
-  FC,
-  ChangeEvent,
-  useCallback,
-  useState, useEffect,
-} from 'react';
 import classNames from 'classnames';
 import * as styles from '~/styles/inputs.scss';
 import { Icon } from '~/components/input/Icon';
@@ -28,7 +23,7 @@ const InputText: FC<IInputTextProps> = ({
 
   const onInput = useCallback(
     ({ target }: ChangeEvent<HTMLInputElement>) => handler(target.value),
-    [handler],
+    [handler]
   );
 
   const onFocus = useCallback(() => setFocused(true), []);
@@ -39,18 +34,15 @@ const InputText: FC<IInputTextProps> = ({
   }, [inner_ref, onRef]);
 
   return (
-    <div className={classNames(
+    <div
-      styles.input_text_wrapper,
+      className={classNames(styles.input_text_wrapper, wrapperClassName, {
-      wrapperClassName,
-      {
         [styles.required]: required,
         [styles.focused]: focused,
         [styles.has_status]: !!status || !!error,
         [styles.has_value]: !!value,
         [styles.has_error]: !!error,
         [styles.has_loader]: is_loading,
-      },
+      })}
-    )}
     >
       <div className={styles.input}>
         <input
@@ -79,12 +71,16 @@ const InputText: FC<IInputTextProps> = ({
           <LoaderCircle size={20} />
         </div>
       </div>
-      {
+      {title && (
-        title && <div className={styles.title}><span>{title}</span></div>
+        <div className={styles.title}>
-      }
+          <span>{title}</span>
-      {
+        </div>
-        error && <div className={styles.error}><span>{error}</span></div>
+      )}
-      }
+      {error && (
+        <div className={styles.error}>
+          <span>{error}</span>
+        </div>
+      )}
     </div>
   );
 };

src/containers/dialogs/EditorDialog/index.tsx

@@ -67,11 +67,7 @@ const EditorDialogUnconnected: FC<IProps> = ({ onRequestClose, editor, statuses,
     <form onSubmit={onSubmit} className={styles.form}>
       <ScrollDialog buttons={buttons} width={860} onClose={onRequestClose}>
         <div className={styles.editor}>
-          <ImageEditor
+          <ImageEditor data={data} setData={setData} temp={temp} setTemp={setTemp} />
-            data={data}
-            pending_files={temp.filter(id => !!statuses[id]).map(id => statuses[id])}
-            setData={setData}
-          />
         </div>
       </ScrollDialog>
     </form>