import React from 'react' ; import unique from 'unique-selector' ; import { AllFdEvents , FdEventType } from '../utils/FdEvents' ; import styles from './ContextULCheckCount.module.scss' ; export interface Props { target : HTMLElement ; selector : string ; onBack ? : ( ) => void ; onMouseDown : ( event : AllFdEvents ) => void ; } export default function ContextULCheckCount ( props ) { const parent = props . target . parentNode ; const selector = parent ? `${ unique ( parent ) } > ${ props . target . nodeName }` : props . selector ; const count = parent ? document . querySelectorAll ( selector ) . length : 1 ; function handleBack ( e ) { e . preventDefault ( ) ; if ( props . onBack ) { props . onBack ( ) ; } } function handleCountEqualsThis ( ) { props . onMouseDown ( { type : FdEventType . COUNT_EQUALS , target : selector , value : count , } ) ; } function handleCountEquals ( ) { const value = prompt ( 'Count equals...' ) ; if ( value ) { props . onMouseDown ( { type : FdEventType . COUNT_EQUALS , target : selector , value : parseInt ( value , 10 ) , } ) ; } } function handleCountGreater ( ) { const value = prompt ( 'Count greater than...' ) ; if ( value ) { props . onMouseDown ( { type : FdEventType . COUNT_GREATER_THAN , target : selector , value : parseInt ( value , 10 ) , } ) ; } } function handleCountLess ( ) { const value = prompt ( 'Count greater less...' ) ; if ( value ) { props . onMouseDown ( { type : FdEventType . COUNT_LESS_THAN , target : selector , value : parseInt ( value , 10 ) , } ) ; } } return ( < ul > < li className = { styles . clickable } onMouseDown = { handleBack } > < h2 > & lt ; Count < /h2> < /li> < li className = { `${ styles . li } separator` } > < i > { selector } < /i> < span > ( { count } ) < /span> < /li> < li className = { styles . clickable } onMouseDown = { handleCountEqualsThis } > Equals { count } < /li> < li className = { styles . clickable } onMouseDown = { handleCountEquals } > Equals ... < /li> < li className = { styles . clickable } onMouseDown = { handleCountGreater } > Greater than ... < /li> < li className = { styles . clickable } onMouseDown = { handleCountLess } > Less than ... < /li> < /ul>); }