1
0
Fork 0
forked from OpenNeo/impress

Open the pose picker to Styles if there's an Alt Style applied

This commit is contained in:
Emi Matchu 2024-01-30 06:04:35 -08:00
parent 8e5939e408
commit 741d52175b

View file

@ -87,11 +87,25 @@ function PosePicker({
const poseInfos = posesQuery.poseInfos; const poseInfos = posesQuery.poseInfos;
const altStyles = altStylesQuery.data ?? []; const altStyles = altStylesQuery.data ?? [];
const [isOpen, setIsOpen] = React.useState(false);
const [tabIndex, setTabIndex] = React.useState(0);
const [styleId, setStyleId] = React.useState(null); const [styleId, setStyleId] = React.useState(null);
const altStyle = altStyles.find((s) => s.id === styleId); const altStyle = altStyles.find((s) => s.id === styleId);
const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" }); const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
React.useEffect(() => {
// While the popover is open, don't change which tab is open.
if (isOpen) {
return;
}
// Otherwise, set the tab to Styles if we're wearing an Alt Style, or
// Expressions if we're not.
setTabIndex(altStyle != null ? 1 : 0);
}, [altStyle, isOpen]);
// Resize the Popover when we toggle support mode, because it probably will // Resize the Popover when we toggle support mode, because it probably will
// affect the content size. // affect the content size.
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
@ -166,13 +180,19 @@ function PosePicker({
<Popover <Popover
placement={placement} placement={placement}
returnFocusOnClose returnFocusOnClose
onOpen={onLockFocus} onOpen={() => {
onClose={onUnlockFocus} setIsOpen(true);
onLockFocus();
}}
onClose={() => {
setIsOpen(false);
onUnlockFocus();
}}
initialFocusRef={initialFocusRef} initialFocusRef={initialFocusRef}
isLazy isLazy
lazyBehavior="keepMounted" lazyBehavior="keepMounted"
> >
{({ isOpen }) => ( {() => (
<> <>
<PopoverTrigger> <PopoverTrigger>
<PosePickerButton <PosePickerButton
@ -192,6 +212,8 @@ function PosePicker({
flexDirection={{ base: "column", md: "column-reverse" }} flexDirection={{ base: "column", md: "column-reverse" }}
paddingY="2" paddingY="2"
gap="2" gap="2"
index={tabIndex}
onChange={setTabIndex}
// HACK: To only apply `initialFocusRef` to the selected input // HACK: To only apply `initialFocusRef` to the selected input
// in the *active* tab, we just use `isLazy` to only *render* // in the *active* tab, we just use `isLazy` to only *render*
// the active tab. We could also watch the tab state and set // the active tab. We could also watch the tab state and set