import * as React from "react" ; import Textarea from "react-textarea-autosize" ; import Modal from "react-modal" ; import CardBadges from "../CardBadges/CardBadges" ; import CardOptions from "./CardOptions" ; import { findCheckboxes } from "../utils" ; import "./CardModal.scss" ; import { Card } from "../../types" ; import { db , dispatch } from "../../model" ; type Props = { card : Card ; cardElement : { getBoundingClientRect : Function ; } ; isOpen : boolean ; toggleCardEditor : Function ; listId : string ; } ; const changeCardText = ( id , text ) => { db . cardsById . update ( id , { text } ) ; } ; const deleteCard = async ( id , listId ) => { db . cardsById . delete ( id ) ; const list = await db . listsById . get ( listId ) ; db . listsById . update ( listId , { cards : list . cards . filter ( x => x !== id ) } ) ; } ; function CardModal ( { card , listId , cardElement , isOpen , toggleCardEditor , } ) { const [ newText , setNewText ] = React . useState ( card . text ) ; const [ isColorPickerOpen , setColorPickerOpen ] = React . useState ( false ) ; const [ isTextareaFocused , setTextareaFocused ] = React . useState ( true ) ; if ( typeof document !== "undefined" ) { Modal . setAppElement ( "#app" ) ; } const handleKeyDown = ( event ) => { if ( event . keyCode === 13 && event . shiftKey === false ) { event . preventDefault ( ) ; submitCard ( ) ; } } ; const submitCard = ( ) => { if ( newText === "" ) { dispatch ( deleteCard ) ( card . id , listId ) ; } else if ( newText !== card . text ) { dispatch ( changeCardText ) ( card . id , newText ) ; } toggleCardEditor ( ) ; } ; const handleChange = event => { setNewText ( event . target . value ) ; } ; const toggleColorPicker = ( ) => { setColorPickerOpen ( ! isColorPickerOpen ) ; } ; const handleRequestClose = ( ) => { if ( ! isColorPickerOpen ) { toggleCardEditor ( ) ; } } ; if ( ! cardElement ) { return null ; } const checkboxes = findCheckboxes ( newText ) ; const boundingRect = cardElement . getBoundingClientRect ( ) ; const isCardNearRightBorder = window . innerWidth - boundingRect . right < boundingRect . left ; const isThinDisplay = window . innerWidth < 550 ; const style = { content : { top : Math . min ( boundingRect . top , window . innerHeight - boundingRect . height - 18 ) , left : isCardNearRightBorder ? null : boundingRect . left , right : isCardNearRightBorder ? window . innerWidth - boundingRect . right : null , flexDirection : isCardNearRightBorder ? "row-reverse" : "row" , } , } ; const mobileStyle = { content : { flexDirection : "column" , top : 3 , left : 3 , right : 3 , } , } ; return ( < Modal closeTimeoutMS = { 150 } isOpen = { isOpen } onRequestClose = { handleRequestClose } contentLabel = "Card editor" overlayClassName = "modal-underlay" className = "modal" style = { isThinDisplay ? mobileStyle : style } includeDefaultStyles = { false } onClick = { handleRequestClose } > < div className = "modal-textarea-wrapper" style = { { minHeight : isThinDisplay ? "none" : boundingRect . height , width : isThinDisplay ? "100%" : boundingRect . width , boxShadow : isTextareaFocused ? "0px 0px 3px 2px rgb(0, 180, 255)" : null , background : card . color , } } > < Textarea autoFocus useCacheForDOMMeasurements value = { newText } onChange = { handleChange } onKeyDown = { handleKeyDown } className = "modal-textarea" spellCheck = { false } onFocus = { ( ) => setTextareaFocused ( true ) } onBlur = { ( ) => setTextareaFocused ( false ) } /> { ( card . date || checkboxes . total > 0 ) && ( < CardBadges date = { card . date } checkboxes = { checkboxes } / > ) } < /div> < CardOptions isColorPickerOpen = { isColorPickerOpen } card = { card } boundingRect = { boundingRect } isCardNearRightBorder = { isCardNearRightBorder } isThinDisplay = { isThinDisplay } toggleColorPicker = { toggleColorPicker } / > < /Modal>); } export default CardModal ;