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);
    },
});

Last updated on