packageDocumentation module import * as React from "react" ; import { DateFormatter , RelativePosition , SpecialKey , TimeDisplay } from "@itwin/appui-abstract" ; import { BodyText , CommonProps , Popup } from "@itwin/core-react" ; import { UiComponents } from "../UiComponents" ; import { DatePicker } from "./DatePicker" ; import { DateField } from "./DateField" ; import { TimeField , TimeSpec } from "./TimeField" ; import "./DatePickerPopupButton.scss" ; alpha export interface DatePickerPopupButtonProps extends CommonProps { /** Date to be shown as the selected date. */ selected : Date ; /** If true show the date (and optionally time) edit field next to button */ displayEditField ? : boolean ; timeDisplay ? : TimeDisplay ; /** Function called when Date changes. */ onDateChange ? : ( day : Date ) => void ; /** Optional tooltip */ buttonToolTip ? : string ; dateFormatter ? : DateFormatter ; /** User defined class name for edit field. */ fieldClassName ? : string ; /** User defined style for edit field. */ fieldStyle ? : React . CSSProperties ; } alpha export function DatePickerPopupButton ( { displayEditField , timeDisplay , selected , onDateChange , dateFormatter , buttonToolTip , fieldStyle , fieldClassName , style } ) { const [ workingDate , setWorkingDate ] = React . useState ( new Date ( selected . getTime ( ) ) ) ; const [ isSettingsOpen , setIsSettingsOpen ] = React . useState ( false ) ; const timeLabelRef = React . useRef ( UiComponents . translate ( "datepicker.time" ) ) ; const toolTipLabelRef = React . useRef ( UiComponents . translate ( "datepicker.selectDate" ) ) ; const toolTipLabel = React . useMemo ( ( ) => buttonToolTip ? buttonToolTip : toolTipLabelRef . current , [ buttonToolTip ] ) ; React . useEffect ( ( ) => { const newWorkingDate = new Date ( selected . getTime ( ) ) ; setWorkingDate ( newWorkingDate ) ; } , [ selected ] ) ; const buttonRef = React . useRef < HTMLButtonElement > ( null ) ; const togglePopupDisplay = React . useCallback ( ( event ) => { event . preventDefault ( ) ; setShowFocusOutline ( false ) ; setIsSettingsOpen ( ( prev ) => ! prev ) ; } , [ setIsSettingsOpen ] ) ; const handleCloseSetting = React . useCallback ( ( ) => { setIsSettingsOpen ( false ) ; } , [ setIsSettingsOpen ] ) ; const handleOnDateChanged = ( day ) => { const newWorkingDate = new Date ( day . getTime ( ) ) ; newWorkingDate . setHours ( workingDate . getHours ( ) , workingDate . getMinutes ( ) , workingDate . getSeconds ( ) ) ; onDateChange && onDateChange ( newWorkingDate ) ; ! timeDisplay && setIsSettingsOpen ( false ) ; } ; const handleOnTimeChanged = ( time ) => { const newWorkingDate = new Date ( workingDate . getTime ( ) ) ; newWorkingDate . setHours ( time . hours , time . minutes , time . seconds ) ; setWorkingDate ( newWorkingDate ) ; onDateChange && onDateChange ( newWorkingDate ) ; } ; const [ showFocusOutline , setShowFocusOutline ] = React . useState ( false ) ; const handlePopupKeyDown = React . useCallback ( ( event ) => { if ( event . key === SpecialKey . Space ) { setShowFocusOutline ( true ) ; setIsSettingsOpen ( true ) ; } } , [ ] ) ; const timeSpec = { hours : workingDate . getHours ( ) , minutes : workingDate . getMinutes ( ) , seconds : workingDate . getSeconds ( ) } ; return ( < > < button title = { toolTipLabel } style = { style } className = "components-date-picker-calendar-popup-button" onKeyDown = { handlePopupKeyDown } data - testid = "components-date-picker-calendar-popup-button" onPointerDown = { togglePopupDisplay } ref = { buttonRef } > < div className = "datepicker-button" > < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 16 16" > < path d = "M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z" / > < /svg> < /div> < /button> < Popup isOpen = { isSettingsOpen } position = { RelativePosition . BottomLeft } onClose = { handleCloseSetting } target = { buttonRef . current } closeOnEnter = { false } moveFocus = { showFocusOutline } closeOnNestedPopupOutsideClick > < div className = "components-date-picker-calendar-popup-panel" data - testid = "components-date-picker-calendar-popup-panel" > < DatePicker selected = { workingDate } onDateChange = { handleOnDateChanged } showFocusOutline = { showFocusOutline } / > { timeDisplay && < div className = "time-container" > < BodyText className = "time-label" > { timeLabelRef . current } < /BodyText> < TimeField time = { timeSpec } timeDisplay = { timeDisplay } onTimeChange = { handleOnTimeChanged } / > < /div>} < /div> < /Popup> { ! ! displayEditField && < DateField style = { fieldStyle } className = { fieldClassName } initialDate = { workingDate } timeDisplay = { timeDisplay } dateFormatter = { dateFormatter } onDateChange = { handleOnDateChanged } / > } < />); }