Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import React, { useState } from 'react';
import { Story } from '@storybook/react';
import { AnnotationProps } from '../components/VirtualWalkthrough/Annotation';
import AnnotationEditPane from '../components/VirtualWalkthrough/AnnotationEditPane';
export default {
title: 'AnnotationEditPane',
component: AnnotationEditPane,
};
const SAMPLE_IMAGE =
'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><rect width="120" height="120" fill="%234f8a5b"/></svg>';
// Drives the pane with local state so the fields are editable in the story.
const Template: Story<Partial<React.ComponentProps<typeof AnnotationEditPane>> & { initialImageUrls?: string[] }> = ({
initialImageUrls,
...args
}) => {
const [annotation, setAnnotation] = useState<AnnotationProps>({
position: [0, 0, 0],
title: 'Mangrove nursery',
bodyText: 'Seedlings raised here are transplanted along the coastline.',
label: 'Restoration site',
imageUrls: initialImageUrls,
});
return (
<AnnotationEditPane
visible
{...args}
annotation={annotation}
onUpdate={(updates) => setAnnotation((prev) => ({ ...prev, ...updates }))}
/>
);
};
export const Default = Template.bind({});
Default.args = {};
export const WithImageUpload = Template.bind({});
WithImageUpload.args = {
maxImages: 3,
onImagesChange: (files: File[]) => {
// eslint-disable-next-line no-console
console.log('annotation images changed', files);
},
};
export const WithExistingImages = Template.bind({});
WithExistingImages.args = {
maxImages: 3,
initialImageUrls: [SAMPLE_IMAGE],
onImagesChange: (files: File[]) => {
// eslint-disable-next-line no-console
console.log('annotation images changed', files);
},
};
|