path: root/src/client/views/collections/collectionSchema/CollectionSchemaCells.tsx

import React = require("react");
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import { extname } from "path";
import DatePicker from "react-datepicker";
import { CellInfo } from "react-table";
import { DateField } from "../../../../fields/DateField";
import { Doc, DocListCast, Field, Opt } from "../../../../fields/Doc";
import { Id } from "../../../../fields/FieldSymbols";
import { List } from "../../../../fields/List";
import { SchemaHeaderField } from "../../../../fields/SchemaHeaderField";
import { ComputedField } from "../../../../fields/ScriptField";
import { BoolCast, Cast, DateCast, FieldValue, StrCast } from "../../../../fields/Types";
import { ImageField } from "../../../../fields/URLField";
import { emptyFunction, Utils } from "../../../../Utils";
import { Docs } from "../../../documents/Documents";
import { DocumentType } from "../../../documents/DocumentTypes";
import { DocumentManager } from "../../../util/DocumentManager";
import { DragManager } from "../../../util/DragManager";
import { KeyCodes } from "../../../util/KeyCodes";
import { CompileScript } from "../../../util/Scripting";
import { SearchUtil } from "../../../util/SearchUtil";
import { SnappingManager } from "../../../util/SnappingManager";
import { undoBatch } from "../../../util/UndoManager";
import '../../../views/DocumentDecorations.scss';
import { EditableView } from "../../EditableView";
import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss';
import { DocumentIconContainer } from "../../nodes/DocumentIcon";
import { OverlayView } from "../../OverlayView";
import { CollectionView } from "../CollectionView";
import "./CollectionSchemaView.scss";

// intialize cell properties
export interface CellProps {
    row: number;
    col: number;
    rowProps: CellInfo;
    // currently unused
    CollectionView: Opt<CollectionView>;
    // currently unused
    ContainingCollection: Opt<CollectionView>;
    Document: Doc;
    // column name
    fieldKey: string;
    // currently unused
    renderDepth: number;
    // called when a button is pressed on the node itself
    addDocTab: (document: Doc, where: string) => boolean;
    pinToPres: (document: Doc) => void;
    moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined,
        addDocument: (document: Doc | Doc[]) => boolean) => boolean;
    isFocused: boolean;
    changeFocusedCellByIndex: (row: number, col: number) => void;
    // set whether the cell is in the isEditing mode
    setIsEditing: (isEditing: boolean) => void;
    isEditable: boolean;
    setPreviewDoc: (doc: Doc) => void;
    setComputed: (script: string, doc: Doc, field: string, row: number, col: number) => boolean;
    getField: (row: number, col?: number) => void;
    // currnetly unused
    showDoc: (doc: Doc | undefined, dataDoc?: any, screenX?: number, screenY?: number) => void;
}

@observer
export class CollectionSchemaCell extends React.Component<CellProps> {
    // return a field key that is corrected for whether it COMMENT
    public static resolvedFieldKey(column: string, rowDoc: Doc) {
        const fieldKey = column;
        if (fieldKey.startsWith("*")) {
            const rootKey = fieldKey.substring(1);
            const allKeys = [...Array.from(Object.keys(rowDoc)), ...Array.from(Object.keys(Doc.GetProto(rowDoc)))];
            const matchedKeys = allKeys.filter(key => key.includes(rootKey));
            if (matchedKeys.length) return matchedKeys[0];
        }
        return fieldKey;
    }
    @observable protected _isEditing: boolean = false;
    protected _focusRef = React.createRef<HTMLDivElement>();
    protected _rowDoc = this.props.rowProps.original;
    // Gets the serialized data in proto form of the base proto that this document's proto inherits from
    protected _rowDataDoc = Doc.GetProto(this.props.rowProps.original);
    // methods for dragging and dropping
    protected _dropDisposer?: DragManager.DragDropDisposer;
    @observable contents: string = "";

    componentDidMount() { document.addEventListener("keydown", this.onKeyDown); }
    componentWillUnmount() { document.removeEventListener("keydown", this.onKeyDown); }

    @action
    onKeyDown = (e: KeyboardEvent): void => {
        // If a cell is editable and clicked, hitting enter shoudl allow the user to edit it
        if (this.props.isFocused && this.props.isEditable && e.keyCode === KeyCodes.ENTER) {
            document.removeEventListener("keydown", this.onKeyDown);
            this._isEditing = true;
            this.props.setIsEditing(true);
        }
    }

    @action
    isEditingCallback = (isEditing: boolean): void => {
        // a general method that takes a boolean that determines whether the cell should be in
        // is-editing mode
        // remove the event listener if it's there
        document.removeEventListener("keydown", this.onKeyDown);
        // it's not already in is-editing mode, re-add the event listener
        isEditing && document.addEventListener("keydown", this.onKeyDown);
        this._isEditing = isEditing;
        this.props.setIsEditing(isEditing);
        this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
    }

    @action
    onPointerDown = async (e: React.PointerEvent): Promise<void> => {
        // pan to the cell
        this.onItemDown(e);
        // focus on it
        this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
        this.props.setPreviewDoc(this.props.rowProps.original);

        let url: string;
        if (url = StrCast(this.props.rowProps.row.href)) {
            // opens up the the doc in a new window, blurring the old one
            try {
                new URL(url);
                const temp = window.open(url)!;
                temp.blur();
                window.focus();
            } catch { }
        }

        const doc = Cast(this._rowDoc[this.renderFieldKey], Doc, null);
        doc && this.props.setPreviewDoc(doc);
    }

    @undoBatch
    applyToDoc = (doc: Doc, row: number, col: number, run: (args?: { [name: string]: any }) => any) => {
        // apply a specified change to the cell
        const res = run({ this: doc, $r: row, $c: col, $: (r: number = 0, c: number = 0) => this.props.getField(r + row, c + col) });
        if (!res.success) return false;
        // change what is rendered to this new changed cell content
        doc[this.renderFieldKey] = res.result;
        return true;
        // return whether the change was successful
    }

    private drop = (e: Event, de: DragManager.DropEvent) => {
        // if the drag has data at its completion
        if (de.complete.docDragData) {
            // if only one doc was dragged
            if (de.complete.docDragData.draggedDocuments.length === 1) {
                // update the renderFieldKey
                this._rowDataDoc[this.renderFieldKey] = de.complete.docDragData.draggedDocuments[0];
            }
            else {
                // create schema document reflecting the new column arrangement
                const coll = Docs.Create.SchemaDocument([new SchemaHeaderField("title", "#f1efeb")], de.complete.docDragData.draggedDocuments, {});
                this._rowDataDoc[this.renderFieldKey] = coll;
            }
            e.stopPropagation();
        }
    }

    protected dropRef = (ele: HTMLElement | null) => {
        // if the drop disposer is not undefined, run its function
        this._dropDisposer?.();
        // if ele is not null, give ele a non-undefined drop disposer
        ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this)));
    }

    returnHighlights(contents: string, positions?: number[]) {
        if (positions) {
            const results = [];
            StrCast(this.props.Document._searchString);
            const length = StrCast(this.props.Document._searchString).length;
            const color = contents ? "black" : "grey";

            results.push(<span key="-1" style={{ color }}>{contents?.slice(0, positions[0])}</span>);
            positions.forEach((num, cur) => {
                results.push(<span key={"start" + cur} style={{ backgroundColor: "#FFFF00", color }}>{contents?.slice(num, num + length)}</span>);
                let end = 0;
                cur === positions.length - 1 ? end = contents.length : end = positions[cur + 1];
                results.push(<span key={"end" + cur} style={{ color }}>{contents?.slice(num + length, end)}</span>);
            }
            );
            return results;
        }
        return <span style={{ color: contents ? "black" : "grey" }}>{contents ? contents?.valueOf() : "undefined"}</span>;
    }

    @computed get renderFieldKey() {
        // gets the resolved field key of this cell
        return CollectionSchemaCell.resolvedFieldKey(this.props.rowProps.column.id!, this.props.rowProps.original);
    }

    onItemDown = async (e: React.PointerEvent) => {
        // if the document is a document used to change UI for search results in schema view
        if (this.props.Document._searchDoc) {
            const aliasdoc = await SearchUtil.GetAliasesOfDocument(this._rowDataDoc);
            const targetContext = aliasdoc.length <= 0 ? undefined : Cast(aliasdoc[0].context, Doc, null);
            // Jump to the this document
            DocumentManager.Instance.jumpToDocument(this._rowDoc, false, emptyFunction, targetContext,
                undefined, undefined, undefined, () => this.props.setPreviewDoc(this._rowDoc));
        }
    }

    renderCellWithType(type: string | undefined) {
        const dragRef: React.RefObject<HTMLDivElement> = React.createRef();

        // the column
        const fieldKey = this.renderFieldKey;
        // the exact cell
        const field = this._rowDoc[fieldKey];

        const onPointerEnter = (e: React.PointerEvent): void => {
            // e.buttons === 1 means the left moue pointer is down
            if (e.buttons === 1 && SnappingManager.GetIsDragging() && (type === "document" || type === undefined)) {
                dragRef.current!.className = "collectionSchemaView-cellContainer doc-drag-over";
            }
        };
        const onPointerLeave = (e: React.PointerEvent): void => {
            // change the class name to indicate that the cell is no longer being dragged
            dragRef.current!.className = "collectionSchemaView-cellContainer";
        };

        let contents = Field.toString(field as Field);
        // display 2 hyphens instead of a blank box for empty cells
        contents = contents === "" ? "--" : contents;

        // classname reflects the tatus of the cell
        let className = "collectionSchemaView-cellWrapper";
        if (this._isEditing) className += " editing";
        if (this.props.isFocused && this.props.isEditable) className += " focused";
        if (this.props.isFocused && !this.props.isEditable) className += " inactive";

        const positions = [];
        if (StrCast(this.props.Document._searchString).toLowerCase() !== "") {
            // term is ...promise pending... if the field is a Promise, otherwise it is the cell's contents
            let term = (field instanceof Promise) ? "...promise pending..." : contents.toLowerCase();
            const search = StrCast(this.props.Document._searchString).toLowerCase();
            let start = term.indexOf(search);
            let tally = 0;
            // if search is found in term
            if (start !== -1) {
                positions.push(start);
            }
            // if search is found in term, continue finding all instances of search in term
            while (start < contents?.length && start !== -1) {
                term = term.slice(start + search.length + 1);
                tally += start + search.length + 1;
                start = term.indexOf(search);
                positions.push(tally + start);
            }
            // remove the last position
            if (positions.length > 1) {
                positions.pop();
            }
        }
        const placeholder = type === "number" ? "0" : contents === "" ? "--" : "undefined";
        return (
            <div className="collectionSchemaView-cellContainer" style={{ cursor: field instanceof Doc ? "grab" : "auto" }}
                ref={dragRef} onPointerDown={this.onPointerDown} onClick={action(e => this._isEditing = true)} onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>
                <div className={className} ref={this._focusRef} tabIndex={-1}>
                    <div className="collectionSchemaView-cellContents" ref={type === undefined || type === "document" ? this.dropRef : null}>
                        {!this.props.Document._searchDoc ?
                            <EditableView
                                editing={this._isEditing}
                                isEditingCallback={this.isEditingCallback}
                                display={"inline"}
                                contents={contents}
                                height={"auto"}
                                maxHeight={Number(MAX_ROW_HEIGHT)}
                                placeholder={placeholder}
                                GetValue={() => {
                                    const cfield = ComputedField.WithoutComputed(() => FieldValue(field));
                                    const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined;
                                    const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1];
                                    return cscript ? (cfinalScript?.endsWith(";") ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : cfinalScript) :
                                        Field.IsField(cfield) ? Field.toScriptString(cfield) : "";
                                }}
                                SetValue={action((value: string) => {
                                    // sets what is displayed after the user makes an input
                                    let retVal = false;
                                    if (value.startsWith(":=") || value.startsWith("=:=")) {
                                        // decides how to compute a value when given either of the above strings
                                        const script = value.substring(value.startsWith("=:=") ? 3 : 2);
                                        retVal = this.props.setComputed(script, value.startsWith(":=") ? this._rowDataDoc : this._rowDoc, this.renderFieldKey, this.props.row, this.props.col);
                                    } else {
                                        // check if the input is a number
                                        let inputIsNum = true;
                                        for (const s of value) {
                                            if (isNaN(parseInt(s)) && !(s === ".") && !(s === ",")) {
                                                inputIsNum = false;
                                            }
                                        }
                                        // check if the input is a boolean
                                        const inputIsBool: boolean = value === "false" || value === "true";
                                        // what to do in the case 
                                        if (!inputIsNum && !inputIsBool && !value.startsWith("=")) {
                                            // if it's not a number, it's a string, and should be processed as such
                                            // strips the string of quotes when it is edited to prevent quotes form being added to the text automatically 
                                            // after each edit
                                            let valueSansQuotes = value;
                                            if (this._isEditing) {
                                                const vsqLength = valueSansQuotes.length;
                                                // get rid of outer quotes
                                                valueSansQuotes = valueSansQuotes.substring(value.startsWith("\"") ? 1 : 0,
                                                    valueSansQuotes.charAt(vsqLength - 1) === "\"" ? vsqLength - 1 : vsqLength);
                                            }
                                            let inputAsString = '"';
                                            // escape any quotes in the string
                                            for (const i of valueSansQuotes) {
                                                if (i === '"') {
                                                    inputAsString += '\\"';
                                                } else {
                                                    inputAsString += i;
                                                }
                                            }
                                            // add a closing quote
                                            inputAsString += '"';
                                            //two options here: we can strip off outer quotes or we can figure out what's going on with the script
                                            const script = CompileScript(inputAsString, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
                                            const changeMade = inputAsString.length !== value.length || inputAsString.length - 2 !== value.length;
                                            // change it if a change is made, otherwise, just compile using the old cell conetnts
                                            script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run));
                                            // handle numbers and expressions
                                        } else if (inputIsNum || value.startsWith("=")) {
                                            //TODO: make accept numbers
                                            const inputscript = value.substring(value.startsWith("=") ? 1 : 0);
                                            // if commas are not stripped, the parser only considers the numbers after the last comma
                                            let inputSansCommas = "";
                                            for (const s of inputscript) {
                                                if (!(s === ",")) {
                                                    inputSansCommas += s;
                                                }
                                            }
                                            const script = CompileScript(inputSansCommas, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
                                            const changeMade = value.length - 2 !== value.length;
                                            script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run));
                                            // handle booleans
                                        } else if (inputIsBool) {
                                            const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
                                            const changeMade = value.length - 2 !== value.length;
                                            script.compiled && (retVal = this.applyToDoc(changeMade ? this._rowDoc : this._rowDataDoc, this.props.row, this.props.col, script.run));
                                        }
                                    }
                                    if (retVal) {
                                        this._isEditing = false; // need to set this here. otherwise, the assignment of the field will invalidate & cause render() to be called with the wrong value for 'editing'
                                        this.props.setIsEditing(false);
                                    }
                                    return retVal;
                                })}
                                OnFillDown={async (value: string) => {
                                    // computes all of the value preceded by :=
                                    const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } });
                                    script.compiled && DocListCast(this.props.Document[this.props.fieldKey]).
                                        forEach((doc, i) => value.startsWith(":=") ?
                                            this.props.setComputed(value.substring(2), Doc.GetProto(doc), this.renderFieldKey, i, this.props.col) :
                                            this.applyToDoc(Doc.GetProto(doc), i, this.props.col, script.run));
                                }}
                            />
                            :
                            this.returnHighlights(contents, positions)
                        }
                    </div >
                </div>
            </div>
        );
    }

    render() { return this.renderCellWithType(undefined); }
}

@observer
export class CollectionSchemaNumberCell extends CollectionSchemaCell { render() { return this.renderCellWithType("number"); } }

@observer
export class CollectionSchemaBooleanCell extends CollectionSchemaCell { render() { return this.renderCellWithType("boolean"); } }

@observer
export class CollectionSchemaStringCell extends CollectionSchemaCell { render() { return this.renderCellWithType("string"); } }

@observer
export class CollectionSchemaDateCell extends CollectionSchemaCell {
    @computed get _date(): Opt<DateField> {
        // if the cell is a date field, cast then contents to a date. Otherrwwise, make the contents undefined.
        return this._rowDoc[this.renderFieldKey] instanceof DateField ? DateCast(this._rowDoc[this.renderFieldKey]) : undefined;
    }

    @action
    handleChange = (date: any) => {
        // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } });
        // if (script.compiled) {
        //     this.applyToDoc(this._document, this.props.row, this.props.col, script.run);
        // } else {
        // ^ DateCast is always undefined for some reason, but that is what the field should be set to
        this._rowDoc[this.renderFieldKey] = new DateField(date as Date);
        //}
    }

    render() {
        return !this.props.isFocused ? <span onPointerDown={this.onPointerDown}>{this._date ? Field.toString(this._date as Field) : "--"}</span> :
            <DatePicker
                selected={this._date?.date || new Date}
                onSelect={date => this.handleChange(date)}
                onChange={date => this.handleChange(date)}
            />;
    }
}

@observer
export class CollectionSchemaDocCell extends CollectionSchemaCell {

    _overlayDisposer?: () => void;

    @computed get _doc() { return FieldValue(Cast(this._rowDoc[this.renderFieldKey], Doc)); }

    @action
    onSetValue = (value: string) => {
        this._doc && (Doc.GetProto(this._doc).title = value);

        const script = CompileScript(value, {
            addReturn: true,
            typecheck: true,
            transformer: DocumentIconContainer.getTransformer()
        });
        // compile the script
        const results = script.compiled && script.run();
        // if the script was compiled and run
        if (results && results.success) {
            this._rowDoc[this.renderFieldKey] = results.result;
            return true;
        }
        return false;
    }

    componentWillUnmount() { this.onBlur(); }

    onBlur = () => { this._overlayDisposer?.(); };
    onFocus = () => {
        this.onBlur();
        this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
    }

    @action
    isEditingCallback = (isEditing: boolean): void => {
        // the isEditingCallback from a general CollectionSchemaCell
        document.removeEventListener("keydown", this.onKeyDown);
        isEditing && document.addEventListener("keydown", this.onKeyDown);
        this._isEditing = isEditing;
        this.props.setIsEditing(isEditing);
        this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
    }

    render() {
        // if there's a doc, render it
        return !this._doc ? this.renderCellWithType("document") :
            <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1}
                onPointerDown={this.onPointerDown}
            >
                <div className="collectionSchemaView-cellContents-document"
                    style={{ padding: "5.9px" }}
                    ref={this.dropRef}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                >
                    <EditableView
                        editing={this._isEditing}
                        isEditingCallback={this.isEditingCallback}
                        display={"inline"}
                        contents={this._doc.title || "--"}
                        height={"auto"}
                        maxHeight={Number(MAX_ROW_HEIGHT)}
                        GetValue={() => StrCast(this._doc?.title)}
                        SetValue={action((value: string) => {
                            this.onSetValue(value);
                            return true;
                        })}
                    />
                </div >
                <div onClick={() => this._doc && this.props.addDocTab(this._doc, "add:right")} className="collectionSchemaView-cellContents-docButton">
                    <FontAwesomeIcon icon="external-link-alt" size="lg" />
                </div>
            </div>;
    }
}

@observer
export class CollectionSchemaImageCell extends CollectionSchemaCell {

    choosePath(url: URL) {
        if (url.protocol === "data") return url.href; // if the url ises the data protocol, just return the href
        if (url.href.indexOf(window.location.origin) === -1) return Utils.CorsProxy(url.href); // otherwise, put it through the cors proxy erver
        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(url.href.toLowerCase())) return url.href;//Why is this here — good question

        const ext = extname(url.href);
        return url.href.replace(ext, "_o" + ext);
    }

    render() {
        const field = Cast(this._rowDoc[this.renderFieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
        const alts = DocListCast(this._rowDoc[this.renderFieldKey + "-alternates"]); // retrieve alternate documents that may be rendered as alternate images
        const altpaths = alts.map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url).filter(url => url).map(url => this.choosePath(url)); // access the primary layout data of the alternate documents
        const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
        // If there is a path, follow it; otherwise, follow a link to a default image icon
        const url = paths.length ? paths : [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")];

        const aspect = Doc.NativeAspect(this._rowDoc); // aspect ratio
        let width = Math.min(75, this.props.rowProps.width); // get a with that is no smaller than 75px
        const height = Math.min(75, width / aspect); // get a height either proportional to that or 75 px
        width = height * aspect; // increase the width of the image if necessary to maintain proportionality

        const reference = React.createRef<HTMLDivElement>();
        return <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
            <div className="collectionSchemaView-cellContents" key={this._rowDoc[Id]} ref={reference}>
                <img src={url[0]}
                    width={paths.length ? width : "20px"}
                    height={paths.length ? height : "20px"} />
            </div >
        </div>;
    }
}


@observer
export class CollectionSchemaListCell extends CollectionSchemaCell {
    _overlayDisposer?: () => void;

    @computed get _field() { return this._rowDoc[this.renderFieldKey]; }
    @computed get _optionsList() { return this._field as List<any>; }
    @observable private _opened = false; // whether the list is opened
    @observable private _text = "select an item";
    @observable private _selectedNum = 0; // the index of the list item selected

    @action
    onSetValue = (value: string) => {
        // change if it's a document
        this._optionsList[this._selectedNum] = this._text = value;

        (this._field as List<any>).splice(this._selectedNum, 1, value);
    }

    @action
    onSelected = (element: string, index: number) => {
        // if an item is selected, the private variables should update to reflect this
        this._text = element;
        this._selectedNum = index;
    }

    onFocus = () => {
        this._overlayDisposer?.();
        this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
    }

    render() {
        const link = false;
        const reference = React.createRef<HTMLDivElement>();

        // if the list is not opened, don't display it; otherwise, do. 
        if (this._optionsList?.length) {
            const options = !this._opened ? (null) :
                <div>
                    {this._optionsList.map((element, index) => {
                        const val = Field.toString(element);
                        return <div className="collectionSchemaView-dropdownOption" key={index} style={{ padding: "6px" }} onPointerDown={(e) => this.onSelected(StrCast(element), index)} >
                            {val}
                        </div>;
                    })}
                </div>;

            const plainText = <div style={{ padding: "5.9px" }}>{this._text}</div>;
            const textarea = <div className="collectionSchemaView-cellContents" key={this._rowDoc[Id]} style={{ padding: "5.9px" }} ref={this.dropRef} >
                <EditableView
                    editing={this._isEditing}
                    isEditingCallback={this.isEditingCallback}
                    display={"inline"}
                    contents={this._text}
                    height={"auto"}
                    maxHeight={Number(MAX_ROW_HEIGHT)}
                    GetValue={() => this._text}
                    SetValue={action((value: string) => {
                        // add special for params 
                        this.onSetValue(value);
                        return true;
                    })}
                />
            </div >;

            //☰
            return (
                <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
                    <div className="collectionSchemaView-cellContents" key={this._rowDoc[Id]} ref={reference}>
                        <div className="collectionSchemaView-dropDownWrapper">
                            <button type="button" className="collectionSchemaView-dropdownButton" style={{ right: "length", position: "relative" }}
                                onClick={action(e => this._opened = !this._opened)} >
                                <FontAwesomeIcon icon={this._opened ? "caret-up" : "caret-down"} size="sm" />
                            </button>
                            <div className="collectionSchemaView-dropdownText"> {link ? plainText : textarea} </div>
                        </div>
                        {options}
                    </div >
                </div>
            );
        }
        return this.renderCellWithType("list");
    }
}


@observer
export class CollectionSchemaCheckboxCell extends CollectionSchemaCell {
    @computed get _isChecked() { return BoolCast(this._rowDoc[this.renderFieldKey]); }

    render() {
        const reference = React.createRef<HTMLDivElement>();
        return (
            <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
                <input type="checkbox" checked={this._isChecked} onChange={e => this._rowDoc[this.renderFieldKey] = e.target.checked} />
            </div>
        );
    }
}


@observer
export class CollectionSchemaButtons extends CollectionSchemaCell {
    // the navigation buttons for schema view when it is used for search.
    render() {
        return !this.props.Document._searchDoc || ![DocumentType.PDF, DocumentType.RTF].includes(StrCast(this._rowDoc.type) as DocumentType) ? <></> :
            <div style={{ paddingTop: 8, paddingLeft: 3 }} >
                <button style={{ padding: 2, left: 77 }} onClick={() => Doc.SearchMatchNext(this._rowDoc, true)}>
                    <FontAwesomeIcon icon="arrow-up" size="sm" />
                </button>
                <button style={{ padding: 2 }} onClick={() => Doc.SearchMatchNext(this._rowDoc, false)} >
                    <FontAwesomeIcon icon="arrow-down" size="sm" />
                </button>
            </div>;
    }
}