import ClearAdornment from '../../helper/ClearAdornment' ; import React , { useCallback , useMemo , useRef } from 'react' ; import { FormControl , Input , InputLabel } from '@material-ui/core' ; import { publishActions } from '../../../actions' ; import { bindActionCreators } from 'redux' ; import { AppState } from '../../../reducers' ; import { connect } from 'react-redux' ; function TopicInput ( props ) { const inputElement = useRef < HTMLInputElement > ( null ) ; const updateTopic = useCallback ( ( e ) => { props . actions . setTopic ( e . target . value ) ; } , [ ] ) ; const clearTopic = useCallback ( ( ) => { props . actions . setTopic ( '' ) ; inputElement . current ?. focus ( ) ; } , [ ] ) ; const onTopicBlur = useCallback ( ( e ) => { if ( ! e . target . value ) { props . actions . setTopic ( undefined ) ; } } , [ ] ) ; const topicStr = props . manualTopic || '' ; return useMemo ( ( ) => ( < div > < FormControl style = { { width : '100%' } } > < InputLabel htmlFor = "publish-topic" > Topic < /InputLabel> < Input inputRef = { inputElement } id = "publish-topic" value = { topicStr } startAdornment = { < span / > } endAdornment = { < ClearAdornment action = { clearTopic } value = { topicStr } / > } onBlur = { onTopicBlur } onChange = { updateTopic } multiline = { false } placeholder = { props . selectedTopic ?? 'example/topic' } / > < /FormControl> < /div>), [topicStr]); } const mapDispatchToProps = ( dispatch ) => { return { actions : bindActionCreators ( publishActions , dispatch ) , } ; } ; const mapStateToProps = ( state ) => { return { manualTopic : state . publish . manualTopic , selectedTopic : state . tree . get ( 'selectedTopic' ) ?. path ( ) , } ; } ; export default connect ( mapStateToProps , mapDispatchToProps ) ( TopicInput ) ;