Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import React, { useEffect, useRef } from "react";
import { getCityFromTimeZone } from "./ClocksHelpers";
export function EditClocksPanel({
clockZones,
canAddClock,
onShowAddClock,
onEditClock,
onRemoveClock,
onClose,
}) {
const backButtonRef = useRef(null);
// Focus the back button when the panel opens. Double-rAF so this fires
// one frame after closeContextMenu's blur, which is scheduled in the
// same event handler when opening from the context menu.
useEffect(() => {
let outerId = 0;
let innerId = 0;
outerId = requestAnimationFrame(() => {
innerId = requestAnimationFrame(() => {
backButtonRef.current?.focus?.();
});
});
return () => {
cancelAnimationFrame(outerId);
cancelAnimationFrame(innerId);
};
}, []);
return (
<section
className="clocks-panel clocks-edit-panel"
aria-labelledby="clocks-edit-title"
onKeyDown={e => {
if (e.key === "Escape") {
onClose();
}
}}
>
<div className="clocks-edit-header">
<div className="clocks-edit-title-group">
<moz-button
className="clocks-edit-back-button"
type="icon ghost"
size="small"
iconSrc="chrome://global/skin/icons/arrow-left.svg"
data-l10n-id="newtab-clock-widget-button-back"
onClick={onClose}
ref={backButtonRef}
/>
<h3
id="clocks-edit-title"
className="clocks-edit-title"
data-l10n-id="newtab-clock-widget-label-your-clocks"
/>
</div>
{canAddClock && (
<moz-button
className="clocks-edit-add-button"
type="icon primary"
size="small"
iconSrc="chrome://global/skin/icons/plus.svg"
data-l10n-id="newtab-clock-widget-button-add"
onClick={onShowAddClock}
/>
)}
</div>
<ul className="clocks-edit-list">
{clockZones.map((clock, i) => (
<li
className="clocks-edit-item"
key={`${clock.timeZone}-${i}`}
tabIndex={0}
>
<div className="clocks-edit-top-row">
<span className="clocks-edit-city">
{clock.city || getCityFromTimeZone(clock.timeZone)}
</span>
<div className="clocks-edit-item-actions">
<moz-button
className="clocks-edit-item-button clocks-edit-item-edit-button"
type="icon ghost"
size="small"
iconSrc="chrome://global/skin/icons/edit-outline.svg"
data-l10n-id="newtab-clock-widget-button-edit-clock"
onClick={() => onEditClock(i)}
/>
{clockZones.length > 1 && (
<moz-button
className="clocks-edit-item-button clocks-edit-item-remove-button"
type="icon ghost"
size="small"
iconSrc="chrome://global/skin/icons/delete.svg"
data-l10n-id="newtab-clock-widget-button-remove-clock"
onClick={() => onRemoveClock(i)}
/>
)}
</div>
</div>
<span
aria-hidden={!clock.label}
className="clocks-edit-subtitle"
data-l10n-id={
clock.label
? "newtab-clock-widget-label-nickname-with-value"
: undefined
}
data-l10n-args={
clock.label
? JSON.stringify({
nickname: clock.label,
})
: undefined
}
>
{clock.label ? null : " "}
</span>
</li>
))}
</ul>
</section>
);
}