Commit 26c4f7e1 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Convert `SidebarPanel` to TS

parent 106caf60
import { Panel } from '@hypothesis/frontend-shared'; import { Panel } from '@hypothesis/frontend-shared';
import type { ComponentChildren } from 'preact';
import { useCallback, useEffect, useRef } from 'preact/hooks'; import { useCallback, useEffect, useRef } from 'preact/hooks';
import scrollIntoView from 'scroll-into-view'; import scrollIntoView from 'scroll-into-view';
import type { PanelName } from '../../types/sidebar';
import { useSidebarStore } from '../store'; import { useSidebarStore } from '../store';
import Slider from './Slider'; import Slider from './Slider';
/** export type SidebarPanelProps = {
* @typedef {import("../../types/sidebar").PanelName} PanelName children: ComponentChildren;
*/ /** An optional icon name for display next to the panel's title */
icon?: string;
/** /**
* @typedef SidebarPanelProps * A string identifying this panel. Only one `panelName` may be active at any
* @prop {import("preact").ComponentChildren} children * time. Multiple panels with the same `panelName` would be "in sync", opening
* @prop {string} [icon] - An optional icon name for display next to the panel's title * and closing together.
* @prop {PanelName} panelName - */
* A string identifying this panel. Only one `panelName` may be active at any time. panelName: PanelName;
* Multiple panels with the same `panelName` would be "in sync", opening and closing together. title: string;
* @prop {string} title - The panel's title /** Optional callback to invoke when this panel's active status changes */
* @prop {(active: boolean) => void} [onActiveChanged] - onActiveChanged?: (active: boolean) => void;
* Optional callback to invoke when this panel's active status changes };
*/
/** /**
* Base component for a sidebar panel. Only one sidebar panel * Base component for a sidebar panel. Only one sidebar panel
* (as defined by the panel's `panelName`) is active (visible) at one time. * (as defined by the panel's `panelName`) is active (visible) at one time.
*
* @param {SidebarPanelProps} props
*/ */
export default function SidebarPanel({ export default function SidebarPanel({
children, children,
...@@ -34,11 +33,11 @@ export default function SidebarPanel({ ...@@ -34,11 +33,11 @@ export default function SidebarPanel({
panelName, panelName,
title, title,
onActiveChanged, onActiveChanged,
}) { }: SidebarPanelProps) {
const store = useSidebarStore(); const store = useSidebarStore();
const panelIsActive = store.isSidebarPanelOpen(panelName); const panelIsActive = store.isSidebarPanelOpen(panelName);
const panelElement = useRef(/** @type {HTMLDivElement|null}*/ (null)); const panelElement = useRef<HTMLDivElement | null>(null);
const panelWasActive = useRef(panelIsActive); const panelWasActive = useRef(panelIsActive);
// Scroll the panel into view if it has just been opened // Scroll the panel into view if it has just been opened
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment