Subscribing to Events

quip.apps.EventType​

enum {
    BLUR
    FOCUS
    CONTAINER_SIZE_UPDATE
    USER_PREFERENCE_UPDATE
    SITE_PREFERENCE_UPDATE
    DOCUMENT_MEMBERS_LOADED
    DOCUMENT_EDITABLE_CHANGED
    ONLINE_STATUS_CHANGED
    THREAD_MEMBERSHIP_CHANGED
}

BLUR​

Event when the user switches focus away from this app instance in the document.

FOCUS​

Event when the user switches focus to this app instance in the document.

CONTAINER_SIZE_UPDATE​

Triggers when the container size for this app instance changes.

USER_PREFERENCE_UPDATE​

Triggers when the UserPreferences for the viewing user are updated.

SITE_PREFERENCE_UPDATE​

Triggers when the SitePreferences for the viewing user's site are updated.

DOCUMENT_MEMBERS_LOADED​

Triggers when the list of document members for the current document have been loaded and are available for querying.

DOCUMENT_EDITABLE_CHANGED​

Event when the editable status of the document has changed.

ONLINE_STATUS_CHANGED​

Event when the user's client's online status has changed.

THREAD_MEMBERSHIP_CHANGED​

Event when the users' thread membership has changed.

quip.apps.addEventListener​

Subscribes a listener function to the given event type.

type​

required

quip.apps.EventType

The event type to subscribe to.

callback​

required

Function() => void

Whenever the event of the specified type happens, this function will be invoked.

quip.apps.removeEventListener​

Removes a previously registered listener (if it exists).

type​

required

quip.apps.EventType

The event type that the listener is listening for.

callback​

required

Function() => void

The function instance to unsubscribe.

Example​

class FocusComponent extends React.Component<{}, {focused: false}> {
    state = {
        focused: false,
    }

    componentDidMount() {
        quip.apps.addEventListener(quip.apps.EventType.FOCUS, this.onFocus);
        quip.apps.addEventListener(quip.apps.EventType.BLUR, this.onBlur);
    }

    componentWillUnmount() {
        quip.apps.removeEventListener(quip.apps.EventType.FOCUS, this.onFocus);
        quip.apps.removeEventListener(quip.apps.EventType.BLUR, this.onBlur);
    }

    onFocus = () => this.setState({ focused: true })

    onBlur = () => this.setState({ focused: false })

    render() {
        return <div>focused {this.state.focused}</div>;
    }
}

class FocusComponent extends React.Component {
    state = {
        focused: false,
    }

    componentDidMount() {
        quip.apps.addEventListener(quip.apps.EventType.FOCUS, this.onFocus);
        quip.apps.addEventListener(quip.apps.EventType.BLUR, this.onBlur);
    }

    componentWillUnmount() {
        quip.apps.removeEventListener(quip.apps.EventType.FOCUS, this.onFocus);
        quip.apps.removeEventListener(quip.apps.EventType.BLUR, this.onBlur);
    }

    onFocus = () => this.setState({ focused: true })

    onBlur = () => this.setState({ focused: false })

    render() {
        return <div>focused {this.state.focused}</div>;
    }
}