import React from "react" ; import { deepMemo } from "../react/ReactUtils" ; import { Block } from "./Block" ; import { UL } from "./UL" ; import makeStyles from "@material-ui/core/styles/makeStyles" ; import createStyles from "@material-ui/core/styles/createStyles" ; import clsx from "clsx" ; import { BlockIDStr } from "./store/BlocksStore" ; import { IBlock } from "./store/IBlock" ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { flexGrow : 1 , } , } ) ) ; interface NotesProps { readonly parent : BlockIDStr ; readonly notes : ReadonlyArray < IBlock > | undefined ; } export const BlockItems = deepMemo ( function NoteItems ( props ) { const classes = useStyles ( ) ; if ( ! props . notes ) { return null ; } return ( < UL className = { clsx ( classes . root , 'NoteItems' ) } > < > { props . notes . map ( ( note ) => { const key = note . id ; return ( < Block key = { key } parent = { props . parent } id = { note . id } / > ) ; } ) } < /> < /UL>); } ) ;