import React from 'react' ; import { deepMemo } from "../../react/ReactUtils" ; import createStyles from '@material-ui/core/styles/createStyles' ; import makeStyles from '@material-ui/core/styles/makeStyles' ; import grey from '@material-ui/core/colors/grey' ; const useStyles = makeStyles ( ( theme ) => createStyles ( { root : { width : '5px' , minWidth : '5px' , maxWidth : '5px' , cursor : 'col-resize' , backgroundColor : theme . palette . background . paper , minHeight : 0 , '&:hover' : { backgroundColor : grey [ 500 ] , } , } , } ) ) ; interface IProps { readonly onMouseDown : ( ) => void ; } export const DockSplitter = deepMemo ( function DockSplitter ( props ) { const classes = useStyles ( ) ; return ( < div draggable = { false } className = { classes . root } onMouseDown = { ( ) => props . onMouseDown ( ) } > < /div>); } ) ;