import quip from "quip-apps-api" ; import React from "react" ; import { connect } from "react-redux" ; import { setFocusedEvent , setSelectedEvent } from "../actions" ; import { EventRecord } from "../model" ; const { RichTextBox , ColorMap } = quip . apps . ui ; type Props = { eventRecord : EventRecord ; focused : boolean ; isMoving : boolean ; color : keyof typeof ColorMap ; setFocusedEvent : Function ; setSelectedEvent : Function ; titleRecord : quip . apps . RichTextRecord ; week : Array < Date > | undefined | null ; } ; class EventRichTextBox extends React . Component < Props , null > { blurTimeout : number | undefined | null ; focusTimeout : number | undefined | null ; componentDidMount ( ) { if ( this . props . focused ) { this . focusTimeout = window . setTimeout ( ( ) => { this . props . titleRecord . focus ( ) ; } , 0 ) ; } } componentDidUpdate ( prevProps , prevState ) { if ( this . props . focused && ! prevProps . focused ) { this . props . titleRecord . focus ( ) ; } } componentWillUnmount ( ) { if ( this . focusTimeout ) { window . clearTimeout ( this . focusTimeout ) ; this . focusTimeout = null ; } if ( this . blurTimeout ) { window . clearTimeout ( this . blurTimeout ) ; this . blurTimeout = null ; } if ( this . props . focused ) { this . props . setFocusedEvent ( null ) ; } } onMouseDown = e => { const { eventRecord , setFocusedEvent , week } = this . props ; setFocusedEvent ( eventRecord , week && week [ 0 ] . getTime ( ) ) ; } ; onBlur = ( ) => { if ( this . blurTimeout ) { window . clearTimeout ( this . blurTimeout ) ; this . blurTimeout = null ; } this . blurTimeout = window . setTimeout ( ( ) => { if ( this . props . focused ) { this . props . setFocusedEvent ( null ) ; } } , 0 ) ; } ; render ( ) { const { color , focused , titleRecord , week , isMoving } = this . props ; let key = `rtb-${ titleRecord . id ( ) }` ; if ( week ) { key = `-${ key }-${ color }-${ week [ 0 ] . getTime ( ) }` ; } var extraRichTextBoxProps = { } ; if ( quip . apps . isApiVersionAtLeast ( "0.1.039" ) ) { extraRichTextBoxProps . allowedInlineStyles = [ quip . apps . RichTextRecord . InlineStyle . ITALIC , quip . apps . RichTextRecord . InlineStyle . STRIKETHROUGH , quip . apps . RichTextRecord . InlineStyle . UNDERLINE , quip . apps . RichTextRecord . InlineStyle . CODE , ] ; } return < div onMouseDown = { this . onMouseDown } style = { { cursor : "text" , wordBreak : "break-word" , } } > < RichTextBox allowedStyles = { [ quip . apps . RichTextRecord . Style . TEXT_PLAIN ] } color = { color } disableSelection = { ! focused } key = { key } onBlur = { this . onBlur } readOnly = { ! focused || isMoving } record = { titleRecord } useDocumentTheme = { false } width = "100%" { ... extraRichTextBoxProps } /> < /div>; } } const mapStateToProps = ( state , ownProps ) => { const eventRecord = ownProps . eventRecord ; let focused = false ; if ( state . focusedEvent && state . focusedEvent . id ( ) === eventRecord . id ( ) ) { if ( ownProps . week && state . focusedEventTimestamp ) { if ( ownProps . week [ 0 ] . getTime ( ) == state . focusedEventTimestamp ) { focused = true ; } } else { focused = true ; } } return { focused , titleRecord : eventRecord . get ( "title" ) , } ; } ; export default connect ( mapStateToProps , { setFocusedEvent , setSelectedEvent , } ) ( EventRichTextBox ) ;