Open the pose picker to Styles if there's an Alt Style applied
This commit is contained in:
parent
8e5939e408
commit
741d52175b
1 changed files with 25 additions and 3 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue