aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/importBox/ImportElementBox.tsx
diff options
context:
space:
mode:
authorJames Hu <51237606+jameshu111@users.noreply.github.com>2023-07-26 12:15:46 -0400
committerJames Hu <51237606+jameshu111@users.noreply.github.com>2023-07-26 12:15:46 -0400
commit4a8cf5ee3fd6f01ff2d28ccc0a456e9782bd261b (patch)
treea1a4ac7200a38f55227fff941d8d7246cb85eebf /src/client/views/nodes/importBox/ImportElementBox.tsx
parent7c1017f15b9c0ad09d3e0185e310733ab7c10c09 (diff)
parentc87024c06941920f1df689d54d82cc309891e3d2 (diff)
Merge branch 'master' into james-azure-image
Diffstat (limited to 'src/client/views/nodes/importBox/ImportElementBox.tsx')
-rw-r--r--src/client/views/nodes/importBox/ImportElementBox.tsx70
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