Skip to main content
Version: 1.x.x

Showing Dialogs

quip.apps.showBackdrop

Function(onDismiss?: () => void) => void

Displays a backdrop over the document canvas that dims the document and app in order to allow the developer to render some UI that appears like a dialog. Takes an optional onDismiss callback that will be called when the backdrop is dismissed, e.g. through a user click.

quip.apps.dismissBackdrop

Function(skipCallback?: boolean = false) => void

Manually requests that the backdrop be dismissed. Allows the developer to pass skipCallback, which would avoid calling the onDismiss callback registered when showing the backdrop.

Example


interface MyDialogProps {
onDismiss: () => void;
}

class MyDialogComponent extends React.Component<MyDialogProps> {

private contanerRef = react.createRef<HTMLDivElement>();

componentDidMount() {
quip.apps.showBackdrop(this.props.onDismiss);
if (this.contanerRef.current) {
quip.apps.addDetachedNode(this.contanerRef.current);
}
}

componentWillUnmount() {
quip.apps.dismissBackdrop();
if (this.contanerRef.current) {
quip.apps.removeDetachedNode(this.contanerRef.current);
}
}

render() {
const dimensions = quip.apps.getCurrentDimensions();
const style: React.CSSProperties = {
position: "absolute",
width: dimensions.width,
height: dimensions.height,
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: quip.apps.ui.ColorMap.BLUE.VALUE_LIGHT,
color: quip.apps.ui.ColorMap.BLUE.VALUE,
zIndex: 301,
};
return <div ref={this.containerRef} style={style}>
{this.props.children}
</div>;
}
}

interface MyComponentProps {}

interface MyComponentState {
showDialog: boolean
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {

private textRef = React.createRef<HTMLDivElement>();

handleSubmit = (e: Event) => {
if (textRef.current) {
const value = this.textRef.current.value;
if (value.length > 0) {
this.setState({showDialog: true});
}
}
}

onDialogDismiss = () => {
this.setState({showDialog: false});
}

render() {
let dialog;
if (this.state.showDialog) {
dialog = <MyDialogComponent
onDismiss={this.onDialogDismiss}>
<span>Dialog!</span>
</MyDialogComponent>;
}
return <div>
<input ref={this.textRef} type="text"></input>
<button onClick={this.handleSubmit}>Submit</button>
{dialog}
</div>;
}
}

quip.apps.initialize({
initializationCallback: (root, params) => {
ReactDOM.render(<MyComponent />, root);
},
});