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
- Typescript
- Javascript
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>;
}
}