Skip to content

Commit bd8d378

Browse files
KoolADE85KoolADE85
authored
Merge pull request #3658 from plotly/chore/lint
Chore: lint the datepickers
2 parents 343c8c4 + 9c5a17e commit bd8d378

File tree

2 files changed

+261
-259
lines changed

2 files changed

+261
-259
lines changed

‎components/dash-core-components/src/fragments/DatePickerRange.tsx‎

Lines changed: 147 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -329,157 +329,158 @@ const DatePickerRange = ({
329329
);
330330

331331
return (
332-
<ResizeDetector
333-
onResize={handleResize}
334-
targets={[containerRef]}
335-
>
336-
<div className="dash-datepicker" ref={containerRef}>
337-
<Popover.Root
338-
open={!disabled && isCalendarOpen}
339-
onOpenChange={disabled ? undefined : setIsCalendarOpen}
340-
>
341-
<Popover.Trigger asChild disabled={disabled}>
342-
<div
343-
id={accessibleId + '-wrapper'}
344-
className={classNames}
345-
style={style}
346-
aria-labelledby={`${accessibleId} ${accessibleId}-end-date ${start_date_id} ${end_date_id}`}
347-
aria-haspopup="dialog"
348-
aria-expanded={isCalendarOpen}
349-
aria-disabled={disabled}
350-
onClick={e => {
351-
e.preventDefault();
352-
if (!isCalendarOpen && !disabled) {
353-
setIsCalendarOpen(true);
354-
}
355-
}}
356-
>
357-
<AutosizeInput
358-
ref={startAutosizeRef}
359-
inputRef={node => {
360-
startInputRef.current = node;
361-
}}
362-
type="text"
363-
id={start_date_id || accessibleId}
364-
inputClassName="dash-datepicker-input dash-datepicker-start-date"
365-
value={startInputValue}
366-
onChange={e => setStartInputValue(e.target?.value)}
367-
onKeyDown={handleStartInputKeyDown}
368-
onFocus={() => {
369-
if (isCalendarOpen) {
370-
sendStartInputAsDate();
332+
<ResizeDetector onResize={handleResize} targets={[containerRef]}>
333+
<div className="dash-datepicker" ref={containerRef}>
334+
<Popover.Root
335+
open={!disabled && isCalendarOpen}
336+
onOpenChange={disabled ? undefined : setIsCalendarOpen}
337+
>
338+
<Popover.Trigger asChild disabled={disabled}>
339+
<div
340+
id={accessibleId + '-wrapper'}
341+
className={classNames}
342+
style={style}
343+
aria-labelledby={`${accessibleId} ${accessibleId}-end-date ${start_date_id} ${end_date_id}`}
344+
aria-haspopup="dialog"
345+
aria-expanded={isCalendarOpen}
346+
aria-disabled={disabled}
347+
onClick={e => {
348+
e.preventDefault();
349+
if (!isCalendarOpen && !disabled) {
350+
setIsCalendarOpen(true);
371351
}
372352
}}
373-
placeholder={start_date_placeholder_text}
374-
disabled={disabled}
375-
dir={direction}
376-
aria-label={start_date_placeholder_text}
377-
/>
378-
<ArrowIcon className="dash-datepicker-range-arrow" />
379-
<AutosizeInput
380-
ref={endAutosizeRef}
381-
inputRef={node => {
382-
endInputRef.current = node;
383-
}}
384-
type="text"
385-
id={end_date_id || accessibleId + '-end-date'}
386-
inputClassName="dash-datepicker-input dash-datepicker-end-date"
387-
value={endInputValue}
388-
onChange={e => setEndInputValue(e.target?.value)}
389-
onKeyDown={handleEndInputKeyDown}
390-
onFocus={() => {
391-
if (isCalendarOpen) {
392-
sendEndInputAsDate();
353+
>
354+
<AutosizeInput
355+
ref={startAutosizeRef}
356+
inputRef={node => {
357+
startInputRef.current = node;
358+
}}
359+
type="text"
360+
id={start_date_id || accessibleId}
361+
inputClassName="dash-datepicker-input dash-datepicker-start-date"
362+
value={startInputValue}
363+
onChange={e =>
364+
setStartInputValue(e.target?.value)
393365
}
394-
}}
395-
placeholder={end_date_placeholder_text}
396-
disabled={disabled}
397-
dir={direction}
398-
aria-label={end_date_placeholder_text}
399-
/>
400-
{clearable && !disabled && (
401-
<a
402-
className="dash-datepicker-clear"
403-
onClick={clearSelection}
404-
aria-label="Clear Dates"
405-
>
406-
<Cross1Icon />
407-
</a>
408-
)}
409-
<CaretDownIcon className="dash-datepicker-caret-icon" />
410-
</div>
411-
</Popover.Trigger>
412-
413-
<Popover.Portal
414-
container={hasPortal ? undefined : containerRef.current}
415-
>
416-
<Popover.Content
417-
className={`dash-datepicker-content${
418-
hasPortal ? ' dash-datepicker-portal' : ''
419-
}${
420-
with_full_screen_portal
421-
? ' dash-datepicker-fullscreen'
422-
: ''
423-
}`}
424-
style={portalStyle}
425-
align={hasPortal ? 'center' : 'start'}
426-
sideOffset={hasPortal ? 0 : 5}
427-
avoidCollisions={!hasPortal}
428-
onInteractOutside={
429-
with_full_screen_portal
430-
? e => e.preventDefault()
431-
: undefined
432-
}
433-
onOpenAutoFocus={e => e.preventDefault()}
434-
onCloseAutoFocus={e => {
435-
e.preventDefault();
436-
// Only focus if focus is not already on one of the inputs
437-
const inputs: (Element | null)[] = [
438-
startInputRef.current,
439-
endInputRef.current,
440-
];
441-
if (inputs.includes(document.activeElement)) {
442-
return;
366+
onKeyDown={handleStartInputKeyDown}
367+
onFocus={() => {
368+
if (isCalendarOpen) {
369+
sendStartInputAsDate();
370+
}
371+
}}
372+
placeholder={start_date_placeholder_text}
373+
disabled={disabled}
374+
dir={direction}
375+
aria-label={start_date_placeholder_text}
376+
/>
377+
<ArrowIcon className="dash-datepicker-range-arrow" />
378+
<AutosizeInput
379+
ref={endAutosizeRef}
380+
inputRef={node => {
381+
endInputRef.current = node;
382+
}}
383+
type="text"
384+
id={end_date_id || accessibleId + '-end-date'}
385+
inputClassName="dash-datepicker-input dash-datepicker-end-date"
386+
value={endInputValue}
387+
onChange={e =>
388+
setEndInputValue(e.target?.value)
389+
}
390+
onKeyDown={handleEndInputKeyDown}
391+
onFocus={() => {
392+
if (isCalendarOpen) {
393+
sendEndInputAsDate();
394+
}
395+
}}
396+
placeholder={end_date_placeholder_text}
397+
disabled={disabled}
398+
dir={direction}
399+
aria-label={end_date_placeholder_text}
400+
/>
401+
{clearable && !disabled && (
402+
<a
403+
className="dash-datepicker-clear"
404+
onClick={clearSelection}
405+
aria-label="Clear Dates"
406+
>
407+
<Cross1Icon />
408+
</a>
409+
)}
410+
<CaretDownIcon className="dash-datepicker-caret-icon" />
411+
</div>
412+
</Popover.Trigger>
413+
414+
<Popover.Portal
415+
container={hasPortal ? undefined : containerRef.current}
416+
>
417+
<Popover.Content
418+
className={`dash-datepicker-content${
419+
hasPortal ? ' dash-datepicker-portal' : ''
420+
}${
421+
with_full_screen_portal
422+
? ' dash-datepicker-fullscreen'
423+
: ''
424+
}`}
425+
style={portalStyle}
426+
align={hasPortal ? 'center' : 'start'}
427+
sideOffset={hasPortal ? 0 : 5}
428+
avoidCollisions={!hasPortal}
429+
onInteractOutside={
430+
with_full_screen_portal
431+
? e => e.preventDefault()
432+
: undefined
443433
}
434+
onOpenAutoFocus={e => e.preventDefault()}
435+
onCloseAutoFocus={e => {
436+
e.preventDefault();
437+
// Only focus if focus is not already on one of the inputs
438+
const inputs: (Element | null)[] = [
439+
startInputRef.current,
440+
endInputRef.current,
441+
];
442+
if (inputs.includes(document.activeElement)) {
443+
return;
444+
}
444445

445-
// Keeps focus on the component when the calendar closes
446-
if (!startInputValue) {
447-
startInputRef.current?.focus();
448-
} else {
449-
endInputRef.current?.focus();
450-
}
451-
}}
452-
>
453-
{with_full_screen_portal && (
454-
<button
455-
className="dash-datepicker-close-button"
456-
onClick={() => setIsCalendarOpen(false)}
457-
aria-label="Close calendar"
458-
>
459-
<Cross1Icon />
460-
</button>
461-
)}
462-
<Calendar
463-
ref={calendarRef}
464-
initialVisibleDate={initialCalendarDate}
465-
selectionStart={internalStartDate}
466-
selectionEnd={internalEndDate}
467-
minDateAllowed={minDate}
468-
maxDateAllowed={maxDate}
469-
disabledDates={disabledDates}
470-
firstDayOfWeek={first_day_of_week}
471-
showOutsideDays={show_outside_days}
472-
monthFormat={month_format}
473-
numberOfMonthsShown={number_of_months_shown}
474-
calendarOrientation={calendar_orientation}
475-
daySize={day_size}
476-
direction={direction}
477-
onSelectionChange={handleSelectionChange}
478-
/>
479-
</Popover.Content>
480-
</Popover.Portal>
481-
</Popover.Root>
482-
</div>
446+
// Keeps focus on the component when the calendar closes
447+
if (!startInputValue) {
448+
startInputRef.current?.focus();
449+
} else {
450+
endInputRef.current?.focus();
451+
}
452+
}}
453+
>
454+
{with_full_screen_portal && (
455+
<button
456+
className="dash-datepicker-close-button"
457+
onClick={() => setIsCalendarOpen(false)}
458+
aria-label="Close calendar"
459+
>
460+
<Cross1Icon />
461+
</button>
462+
)}
463+
<Calendar
464+
ref={calendarRef}
465+
initialVisibleDate={initialCalendarDate}
466+
selectionStart={internalStartDate}
467+
selectionEnd={internalEndDate}
468+
minDateAllowed={minDate}
469+
maxDateAllowed={maxDate}
470+
disabledDates={disabledDates}
471+
firstDayOfWeek={first_day_of_week}
472+
showOutsideDays={show_outside_days}
473+
monthFormat={month_format}
474+
numberOfMonthsShown={number_of_months_shown}
475+
calendarOrientation={calendar_orientation}
476+
daySize={day_size}
477+
direction={direction}
478+
onSelectionChange={handleSelectionChange}
479+
/>
480+
</Popover.Content>
481+
</Popover.Portal>
482+
</Popover.Root>
483+
</div>
483484
</ResizeDetector>
484485
);
485486
};

0 commit comments

Comments
 (0)