1 files changed, 70 insertions, 0 deletions
diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx
new file mode 100644
index 000000000..a5d21cc8e
--- /dev/null
+++ b/src/client/views/nodes/importBox/ImportElementBox.tsx
@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import { ViewBoxBaseComponent } from "../../DocComponent";
+import { FieldView, FieldViewProps } from "../FieldView";
+import { computed } from "mobx";
+import { Id } from "../../../../fields/FieldSymbols";
+import React from "react";
+import { EditableView } from "../../EditableView";
+import { DocListCast } from "../../../../fields/Doc";
+import { StrCast } from "../../../../fields/Types";
+
+
+@observer
+export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(ImportElementBox, fieldKey);
+    }
+
+    private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _titleRef: React.RefObject<EditableView> = React.createRef();
+
+    @computed importBoxVoew() {
+        return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox;
+    }
+    
+    @computed get indexInPres() {
+        return DocListCast(this.presBox?.[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc);
+    }
+    
+    @computed get presBox() {
+        return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc;
+    }
+
+    // @computed get selectedArray() {
+    //     return this.presBoxView?.selectedArray;
+    // }
+
+@computed get mainItem() {
+    const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres;
+    //const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false;
+  //  const activeItem: Doc = this.rootDoc;
+
+    return(
+        <div
+            className = {`presItem-container`}
+            // key={this.props.Document[Id] + this.indexInPres}
+            style = {{backgroundColor: 'pink'}}
+            
+        >
+            <div
+                ref = {this._dragRef}
+                className = {`presItem-slide ${isCurrent ? 'active' : ''}`}
+                style = {{
+                    backgroundColor: 'green'
+                }}>
+                    <div
+                        className="presItem-number"
+                        title = "select without navigation"
+                    
+                    >
+                         {/* <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> */}
+
+                    </div>
+            </div>
+
+        </div>
+    )
+}
+
+}
+\ No newline at end of file