Reckless_Satoshi 2d364297b9 Add depth widget. Fix style book. (#300)
* Add depth widget. Fix style book.

* Fix number of rows to window height
2022-10-23 18:29:39 +00:00

63 lines
1.6 KiB
TypeScript

import React from 'react';
import { Book, Favorites } from '../../models';
import { Paper, useTheme } from '@mui/material';
import BookTable from '../../components/BookTable';
interface BookWidgetProps {
layout: any;
book: Book;
fetchBook: () => void;
fav: Favorites;
setFav: (state: Favorites) => void;
windowSize: { width: number; height: number };
style?: Object;
className?: string;
onMouseDown?: () => void;
onMouseUp?: () => void;
onTouchEnd?: () => void;
}
const BookWidget = React.forwardRef(
(
{
layout,
book,
fetchBook,
fav,
setFav,
windowSize,
style,
className,
onMouseDown,
onMouseUp,
onTouchEnd,
}: BookWidgetProps,
ref,
) => {
const theme = useTheme();
return React.useMemo(() => {
return (
<Paper elevation={3} style={{ width: '100%', height: '100%' }}>
<BookTable
elevation={0}
clickRefresh={() => fetchBook()}
book={book}
fav={fav}
fillContainer={true}
maxWidth={(windowSize.width / 48) * layout.w} // EM units
maxHeight={(layout.h * theme.typography.fontSize * 2.5) / theme.typography.fontSize} // EM units
fullWidth={windowSize.width} // EM units
fullHeight={windowSize.height} // EM units
defaultFullscreen={false}
onCurrencyChange={(e) => setFav({ ...fav, currency: e.target.value })}
onTypeChange={(mouseEvent, val) => setFav({ ...fav, type: val })}
/>
</Paper>
);
}, [book, layout, windowSize, fav]);
},
);
export default BookWidget;