typescript src/popover
(#488)
This commit is contained in:
parent
c3c2f409e7
commit
baebfdb0bb
3 changed files with 107 additions and 87 deletions
|
@ -14,14 +14,22 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { forwardRef, useRef } from "react";
|
||||
import React, { forwardRef, HTMLAttributes } from "react";
|
||||
import { DismissButton, useOverlay } from "@react-aria/overlays";
|
||||
import { FocusScope } from "@react-aria/focus";
|
||||
import classNames from "classnames";
|
||||
import styles from "./Popover.module.css";
|
||||
import { useObjectRef } from "@react-aria/utils";
|
||||
|
||||
export const Popover = forwardRef(
|
||||
import styles from "./Popover.module.css";
|
||||
|
||||
interface Props extends HTMLAttributes<HTMLDivElement> {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
className?: string;
|
||||
children?: JSX.Element;
|
||||
}
|
||||
|
||||
export const Popover = forwardRef<HTMLDivElement, Props>(
|
||||
({ isOpen = true, onClose, className, children, ...rest }, ref) => {
|
||||
const popoverRef = useObjectRef(ref);
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { forwardRef, useRef } from "react";
|
||||
import styles from "./PopoverMenu.module.css";
|
||||
import { useMenuTriggerState } from "@react-stately/menu";
|
||||
import { useMenuTrigger } from "@react-aria/menu";
|
||||
import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
|
||||
import { mergeProps, useObjectRef } from "@react-aria/utils";
|
||||
import classNames from "classnames";
|
||||
import { Popover } from "./Popover";
|
||||
|
||||
export const PopoverMenuTrigger = forwardRef(
|
||||
({ children, placement, className, disableOnState, ...rest }, ref) => {
|
||||
const popoverMenuState = useMenuTriggerState(rest);
|
||||
const buttonRef = useObjectRef(ref);
|
||||
const { menuTriggerProps, menuProps } = useMenuTrigger(
|
||||
{},
|
||||
popoverMenuState,
|
||||
buttonRef
|
||||
);
|
||||
|
||||
const popoverRef = useRef();
|
||||
|
||||
const { overlayProps } = useOverlayPosition({
|
||||
targetRef: buttonRef,
|
||||
overlayRef: popoverRef,
|
||||
placement: placement || "top",
|
||||
offset: 5,
|
||||
isOpen: popoverMenuState.isOpen,
|
||||
});
|
||||
|
||||
if (
|
||||
!Array.isArray(children) ||
|
||||
children.length > 2 ||
|
||||
typeof children[1] !== "function"
|
||||
) {
|
||||
throw new Error(
|
||||
"PopoverMenu must have two props. The first being a button and the second being a render prop."
|
||||
);
|
||||
}
|
||||
|
||||
const [popoverTrigger, popoverMenu] = children;
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.popoverMenuTrigger, className)}>
|
||||
<popoverTrigger.type
|
||||
{...mergeProps(popoverTrigger.props, menuTriggerProps)}
|
||||
on={!disableOnState && popoverMenuState.isOpen}
|
||||
ref={buttonRef}
|
||||
/>
|
||||
{popoverMenuState.isOpen && (
|
||||
<OverlayContainer>
|
||||
<Popover
|
||||
{...overlayProps}
|
||||
isOpen={popoverMenuState.isOpen}
|
||||
onClose={popoverMenuState.close}
|
||||
ref={popoverRef}
|
||||
>
|
||||
{popoverMenu({
|
||||
...menuProps,
|
||||
autoFocus: popoverMenuState.focusStrategy,
|
||||
onClose: popoverMenuState.close,
|
||||
})}
|
||||
</Popover>
|
||||
</OverlayContainer>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
96
src/popover/PopoverMenu.tsx
Normal file
96
src/popover/PopoverMenu.tsx
Normal file
|
@ -0,0 +1,96 @@
|
|||
/*
|
||||
Copyright 2022 Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { forwardRef, useRef } from "react";
|
||||
import { useMenuTriggerState } from "@react-stately/menu";
|
||||
import { useMenuTrigger } from "@react-aria/menu";
|
||||
import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
|
||||
import { mergeProps, useObjectRef } from "@react-aria/utils";
|
||||
import classNames from "classnames";
|
||||
import { MenuTriggerProps } from "@react-types/menu";
|
||||
import { Placement } from "@react-types/overlays";
|
||||
|
||||
import styles from "./PopoverMenu.module.css";
|
||||
import { Popover } from "./Popover";
|
||||
|
||||
interface PopoverMenuTriggerProps extends MenuTriggerProps {
|
||||
children: JSX.Element;
|
||||
placement: Placement;
|
||||
className: string;
|
||||
disableOnState: boolean;
|
||||
[index: string]: unknown;
|
||||
}
|
||||
|
||||
export const PopoverMenuTrigger = forwardRef<
|
||||
HTMLDivElement,
|
||||
PopoverMenuTriggerProps
|
||||
>(({ children, placement, className, disableOnState, ...rest }, ref) => {
|
||||
const popoverMenuState = useMenuTriggerState(rest);
|
||||
const buttonRef = useObjectRef(ref);
|
||||
const { menuTriggerProps, menuProps } = useMenuTrigger(
|
||||
{},
|
||||
popoverMenuState,
|
||||
buttonRef
|
||||
);
|
||||
|
||||
const popoverRef = useRef();
|
||||
|
||||
const { overlayProps } = useOverlayPosition({
|
||||
targetRef: buttonRef,
|
||||
overlayRef: popoverRef,
|
||||
placement: placement || "top",
|
||||
offset: 5,
|
||||
isOpen: popoverMenuState.isOpen,
|
||||
});
|
||||
|
||||
if (
|
||||
!Array.isArray(children) ||
|
||||
children.length > 2 ||
|
||||
typeof children[1] !== "function"
|
||||
) {
|
||||
throw new Error(
|
||||
"PopoverMenu must have two props. The first being a button and the second being a render prop."
|
||||
);
|
||||
}
|
||||
|
||||
const [popoverTrigger, popoverMenu] = children;
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.popoverMenuTrigger, className)}>
|
||||
<popoverTrigger.type
|
||||
{...mergeProps(popoverTrigger.props, menuTriggerProps)}
|
||||
on={!disableOnState && popoverMenuState.isOpen}
|
||||
ref={buttonRef}
|
||||
/>
|
||||
{popoverMenuState.isOpen && (
|
||||
<OverlayContainer>
|
||||
<Popover
|
||||
{...overlayProps}
|
||||
isOpen={popoverMenuState.isOpen}
|
||||
onClose={popoverMenuState.close}
|
||||
ref={popoverRef}
|
||||
>
|
||||
{popoverMenu({
|
||||
...menuProps,
|
||||
autoFocus: popoverMenuState.focusStrategy,
|
||||
onClose: popoverMenuState.close,
|
||||
})}
|
||||
</Popover>
|
||||
</OverlayContainer>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
Loading…
Reference in a new issue