Content · Components

ContentPictureDrawer

One picture the drawer offers (from the host's picture library).

Public export

typescript

import { ContentPictureDrawer } from '@happyvertical/smrt-content/svelte';

Import path: @happyvertical/smrt-content/svelte
Props: 16
Props described: 16 of 16
Bindable state: 0
Callback events: 7
Verified release: 0.57.40

Props

NameTypeRequiredDescription

picturesContentPicture[]NoThe library's pictures (loaded by the host).

loadingbooleanNoPictures are loading.

errorstring | nullNoA plain-language load or upload problem, or null.

hasMorebooleanNoMore pictures can be loaded with `onLoadMore`: the drawer asks for them as the list scrolls near its end, or as keyboard focus nears the end.

uploadingbooleanNoAn upload is in progress.

inStoryIdsstring[]NoAsset ids of pictures already in the story.

mainPictureIdstring | nullNoId of the current main picture.

mainPictureModeContentMainPictureModeNoHow the main picture was decided (see `resolveBodyMainPicture`).

querystringNoThe search text (when the host searches; see `onSearch`).

onSearch(query: string) => voidNoThe host searches its library for this text (it should wait for typing to pause and start its paging again). Without it the drawer filters the pictures it was given.

onInsert(pictures: ContentPicture[]) => voidNoInsert these pictures at the cursor, in order.

onUpload(files: File[]) => voidNoUpload these files (then insert them).

onLoadMore() => voidNoLoad the next page of pictures into the gallery.

onUseAsMain(picture: ContentPicture) => voidNoMake this picture the main picture.

onClearMainChoice() => voidNoClear the choice: the first picture in the story is the main picture.

onClose() => voidNoClose the drawer.

Bindable state

This component has no bindable public state.

Callback events

onSearch(query: string) => void
onInsert(pictures: ContentPicture[]) => void
onUpload(files: File[]) => void
onLoadMore() => void
onUseAsMain(picture: ContentPicture) => void
onClearMainChoice() => void
onClose() => void

Public export

Props

Bindable state

Callback events

Examples and explanation