How to load custom photos in the side panel?
Using customization API you can easily add new section to the side panel to display a set of images from any remote API or your own backend.
You can write another custom panel that will load images from any API:
import { observer } from 'mobx-react-lite';
export const PhotosPanel = observer(({ store }) => {
const [images, setImages] = React.useState([]);
async function loadImages() {
// here we should implement your own API requests
setImages([]);
// wait to emulate network request
await new Promise((resolve) => setTimeout(resolve, 3000));
// for demo images are hard coded
// in real app here will be something like JSON structure
setImages([
{ url: './carlos-lindner-zvZ-HASOA74-unsplash.jpg' },
{ url: './guillaume-de-germain-TQWJ4rQnUHQ-unsplash.jpg' },
]);
}
React.useEffect(() => {
loadImages();
}, []);
return (
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<InputGroup
leftIcon="search"
placeholder="Search..."
onChange={(e) => {
loadImages();
}}
style={{
marginBottom: '20px',
}}
/>
<p>Demo images: </p>
{/* you can create yur own custom component here */}
{/* but we will use built-in grid component */}
<ImagesGrid
images={images}
getPreview={(image) => image.url}
onSelect={async (image, pos, element, event) => {
// image - an item from your array
// pos - relative mouse position on drop. undefined if user just clicked on image
// element - model from your store if images was dropped on an element.
// Can be useful if you want to change some props on existing element instead of creating a new one
// event - will have additional data such as
// elements - list of all elements under the mouse
// page - page where user dropped the image
const { width, height } = await getImageSize(image.url);
store.activePage.addElement({
type: 'image',
src: image.url,
width,
height,
x: pos?.x || 0,
y: pos?.y || 0,
});
}}
rowsNumber={2}
isLoading={!images.length}
loadMore={false}
/>
</div>
);
});
// define the new custom section
const СustomPhotos = {
name: 'photos',
Tab: (props) => (
<SectionTab name="Photos" {...props}>
<MdPhotoLibrary />
</SectionTab>
),
Panel: PhotosPanel,
};