Type Declaration

interface MyRecordProps {
    title?: string;
    disabled: boolean;
}

class MyRecord extends quip.apps.Record {
    static getProperties = () => ({
        title: "string",
        disabled: "boolean",
    })

    static getDefaultProperties = () => ({
        disabled: true,
    })

    getData() {
        return {
            id: this.getId(),
            title: this.get("title") as string,
            disabled: this.get("disabled") as boolean,
        }
    }
}

quip.apps.registerClass(MyRecord, "my-record");

class RootRecord extends quip.apps.RootRecord {
    static getProperties = () => ({
        myRecords: quip.apps.RecordList.Type(MyRecord),
    })

    static getDefaultProperties = () => ({
        myRecords: [],
    })

    getMyRecords = () => this.get("myRecords") as RecordList<MyRecord>

    getData() {
        return {
            myRecords: this.getMyRecords().getRecords() as MyRecord[]
        }
    }
}

quip.apps.registerClass(RootRecord, "root-record");

interface MyComponentProps {
    rootRecord: RootRecord;
}

class MyComponent extends React.Component<MyComponentProps> {
    render() {
        const {rootRecord} = this.props;
        const {myRecords} = rootRecord.getData();
        return (
            <div>
                {myRecords.map(({id, title, disabled}) => (
                    <div key={id}>
                        {tutle}
                        {" - "}
                        {disabled ? "disabled" : "active"}
                    </div>
                ))}
            </div>
        );
    }
}

quip.apps.initialize({
    initializationCallback: (root, params) => {
        const rootRecord = quip.apps.getRootRecord() as RootRecord;
        const myRecords = rootRecord.getMyRecords();
        if (params.isCreation) {
            myRecords.add({ title: "Title 2" });
            myRecords.add({ title: "Title 3" });
            myRecords.add({ title: "Title 1" }, 0);
            myRecords.get(0).set("disabled", false);
        }
        ReactDOM.render(<MyComponent rootRecord={rootRecord} />, root);
    },
});