ImageRecord
quip.apps.ImageRecord is a special type of quip.apps.Record that corresponds to an image rendered within the app. The developer can create and delete ImageRecord objects and can render them within their app by using the React component: <quip.apps.ui.Image/>.
Special Properties
{
// Required. Specifies the sizes (widths, in pixels) that Quip should save
// thumbnails for the uploaded image file.
Image_requestedThumbnailWidths: "array"
}
Example
- Typescript
- Javascript
class CaptionedImageRecord extends quip.apps.Record {
static getProperties = () => ({
image: quip.apps.ImageRecord,
caption: quip.apps.RichTextRecord,
})
static getDefaultProperties = () => ({
image: {},
caption: { RichText_placeholderText: "Add a caption" },
})
public getImage = () => this.get("image") as quip.apps.ImageRecord
public getCaption = () => this.get("caption") as quip.apps.RichTextRecord
}
quip.apps.registerClass(CaptionedImageRecord, "captioned-image");
class RootRecord extends quip.apps.RootRecord {
static getProperties = () => ({
captionedImage: CaptionedImageRecord,
})
static getDefaultProperties = () => ({
captionedImage: {},
})
public getCaptionedImage = () => this.get("captionedImage") as CaptionedImageRecord;
}
quip.apps.registerClass(RootRecord, "root");
class ImageWithCaption extends React.Component {
render() {
const record = quip.apps.getRootRecord();
const captionedImage = record.getCaptionedImage();
return (
<div>
<quip.apps.ui.Image
record={captionedImage.getImage()}
width={200}
/>
<quip.apps.ui.RichTextBox
record={captionedImage.getCaption()}
allowImages={false}
/>
</div>
);
}
}
quip.apps.initialize({
initializationCallback: (root, params) => {
ReactDOM.render(<ImageWithCaption />, root);
},
});
class CaptionedImageRecord extends quip.apps.Record {
static getProperties = () => ({
image: quip.apps.ImageRecord,
caption: quip.apps.RichTextRecord,
})
static getDefaultProperties = () => ({
image: {},
caption: { RichText_placeholderText: "Add a caption" },
})
}
quip.apps.registerClass(CaptionedImageRecord, "captioned-image");
class RootRecord extends quip.apps.RootRecord {
static getProperties = () => ({
captionedImage: CaptionedImageRecord,
})
static getDefaultProperties = () => ({
captionedImage: {},
})
}
quip.apps.registerClass(RootRecord, "root");
class ImageWithCaption extends React.Component {
render() {
const record = quip.apps.getRootRecord();
const captionedImage = record.get("captionedImage");
return (
<div>
<quip.apps.ui.Image
record={captionedImage.get("image")}
width={200}
/>
<quip.apps.ui.RichTextBox
record={captionedImage.get("caption")}
allowImages={false}
/>
</div>
);
}
}
quip.apps.initialize({
initializationCallback: (root, params) => {
ReactDOM.render(<ImageWithCaption />, root);
},
});