in document-json-explorer/src/PageSelector.js [32:74]
function PageSelector(props) {
function pageChange(pageNumber) {
setValue(pageNumber);
if (props.onPageChange) {
props.onPageChange(pageNumber);
}
}
const [value, setValue] = useState(0); // Currently selected tab (page/image)
return (
<Tabs
value={value}
TabIndicatorProps={{
sx: {
left: 0,
},
}}
sx={{ backgroundColor: "lightgray" }}
orientation="vertical"
onChange={(event, newValue) => {
pageChange(newValue);
}}
>
{props.data.pages.map((page, index) => {
let imageData = `data:image/png;base64,${page.image.content}`;
let labelNode = (
<Box>
<img
src={imageData}
style={{ width: `${desiredImageWidth}px` }}
alt="page"
/>
<br />
{page.pageNumber}
</Box>
);
// In a DocAI Document, the image for the document in a page is at image.content
//
return <Tab key={index} label={labelNode} />;
})}
</Tabs>
);
} // PageSelector