diff --git a/src/button/Button.jsx b/src/button/Button.tsx similarity index 74% rename from src/button/Button.jsx rename to src/button/Button.tsx index aabc3093..cbaf715f 100644 --- a/src/button/Button.jsx +++ b/src/button/Button.tsx @@ -13,9 +13,12 @@ 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 } from "react"; +import { PressEvent } from "@react-types/shared"; import classNames from "classnames"; +import { useButton } from "@react-aria/button"; +import { mergeProps, useObjectRef } from "@react-aria/utils"; + import styles from "./Button.module.css"; import { ReactComponent as MicIcon } from "../icons/Mic.svg"; import { ReactComponent as MuteMicIcon } from "../icons/MuteMic.svg"; @@ -26,10 +29,21 @@ import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg"; import { ReactComponent as SettingsIcon } from "../icons/Settings.svg"; import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg"; import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg"; -import { useButton } from "@react-aria/button"; -import { mergeProps, useObjectRef } from "@react-aria/utils"; import { TooltipTrigger } from "../Tooltip"; +export type ButtonVariant = + | "default" + | "toolbar" + | "toolbarSecondary" + | "icon" + | "secondary" + | "copy" + | "secondaryCopy" + | "iconCopy" + | "secondaryHangup" + | "dropdown" + | "link"; + export const variantToClassName = { default: [styles.button], toolbar: [styles.toolbarButton], @@ -44,11 +58,24 @@ export const variantToClassName = { link: [styles.linkButton], }; -export const sizeToClassName = { +export type ButtonSize = "lg"; + +export const sizeToClassName: { lg: string[] } = { lg: [styles.lg], }; - -export const Button = forwardRef( +interface Props { + variant: ButtonVariant; + size: ButtonSize; + on: () => void; + off: () => void; + iconStyle: string; + className: string; + children: Element[]; + onPress: (e: PressEvent) => void; + onPressStart: (e: PressEvent) => void; + [index: string]: unknown; +} +export const Button = forwardRef( ( { variant = "default", @@ -64,7 +91,7 @@ export const Button = forwardRef( }, ref ) => { - const buttonRef = useObjectRef(ref); + const buttonRef = useObjectRef(ref); const { buttonProps } = useButton( { onPress, onPressStart, ...rest }, buttonRef @@ -75,7 +102,7 @@ export const Button = forwardRef( let filteredButtonProps = buttonProps; if (rest.type === "submit" && !rest.onPress) { - const { onKeyDown, onKeyUp, ...filtered } = buttonProps; + const { ...filtered } = buttonProps; filteredButtonProps = filtered; } @@ -101,7 +128,13 @@ export const Button = forwardRef( } ); -export function MicButton({ muted, ...rest }) { +export function MicButton({ + muted, + ...rest +}: { + muted: boolean; + [index: string]: unknown; +}) { return (