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
- Typescript
- Javascript
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);
},
});
class MyDialogComponent extends React.Component {
static propTypes = {
children: PropTypes.element.isRequired,
onDismiss: PropTypes.func,
};
contanerRef = react.createRef();
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 = {
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>;
}
}
class MyComponent extends React.Component {
state = {
showDialog: false
}
textRef = React.createRef();
handleSubmit = (e) => {
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);
},
});