New source found from dndbeyond.com
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
import React from "react";
|
||||
import { PureComponent, PropsWithChildren } from "react";
|
||||
|
||||
import { ThemeButton } from "../ThemeButton";
|
||||
|
||||
//Eventually remove and use character-components/Button/RemoveButton with theme override when needed
|
||||
|
||||
interface Props {
|
||||
interface Props extends PropsWithChildren {
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
@@ -17,7 +17,7 @@ interface Props {
|
||||
enableConfirm?: boolean;
|
||||
isInteractive?: boolean;
|
||||
}
|
||||
export default class RemoveButton extends React.PureComponent<Props, {}> {
|
||||
export default class RemoveButton extends PureComponent<Props, {}> {
|
||||
static defaultProps = {
|
||||
size: "small",
|
||||
style: "outline",
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from "react";
|
||||
import { PureComponent, MouseEvent, PropsWithChildren } from "react";
|
||||
|
||||
import { Button } from "@dndbeyond/character-components/es";
|
||||
|
||||
interface Props {
|
||||
onClick?: ((evt: React.MouseEvent<HTMLButtonElement>) => void) | (() => void);
|
||||
interface Props extends PropsWithChildren {
|
||||
onClick?: ((evt: MouseEvent<HTMLButtonElement>) => void) | (() => void);
|
||||
className: string;
|
||||
disabled?: boolean;
|
||||
styledDisabled?: boolean;
|
||||
@@ -17,7 +17,7 @@ interface Props {
|
||||
confirmDuration?: number;
|
||||
isInteractive?: boolean;
|
||||
}
|
||||
export default class ThemeButton extends React.PureComponent<Props, {}> {
|
||||
export default class ThemeButton extends PureComponent<Props, {}> {
|
||||
static defaultProps = {
|
||||
className: "",
|
||||
style: "filled",
|
||||
|
||||
-137
@@ -1,137 +0,0 @@
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import List from "@mui/material/List";
|
||||
import ListSubheader from "@mui/material/ListSubheader";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Popover from "@mui/material/Popover";
|
||||
import React from "react";
|
||||
|
||||
import { GroupedMenuOption } from "@dndbeyond/character-rules-engine/es";
|
||||
|
||||
import { ThemeButton } from "..";
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
groupedOptions: Array<GroupedMenuOption>;
|
||||
className?: string;
|
||||
size?: string;
|
||||
buttonStyle?: string;
|
||||
showSingleOption?: boolean;
|
||||
onSelect: (containerDefinitionKey: string) => void;
|
||||
containerEl?: HTMLElement;
|
||||
}
|
||||
|
||||
export const ThemeButtonWithMenu: React.FC<Props> = ({
|
||||
className,
|
||||
children,
|
||||
groupedOptions,
|
||||
size = "small",
|
||||
buttonStyle = "filled",
|
||||
onSelect,
|
||||
showSingleOption = false,
|
||||
containerEl,
|
||||
}) => {
|
||||
const singleOption =
|
||||
groupedOptions.length === 1 &&
|
||||
groupedOptions[0].options?.length === 1 &&
|
||||
!showSingleOption;
|
||||
|
||||
const classNames = [className, "ct-theme-button-with-menu"];
|
||||
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (!singleOption) {
|
||||
setAnchorEl(event.currentTarget);
|
||||
} else if (singleOption) {
|
||||
onSelect(groupedOptions[0].options[0]?.value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = (value?: string) => {
|
||||
if (value) {
|
||||
onSelect(value);
|
||||
}
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={classNames.join(" ")}>
|
||||
<ThemeButton
|
||||
size={size}
|
||||
style={buttonStyle}
|
||||
onClick={(evt: React.MouseEvent<HTMLButtonElement>) => {
|
||||
handleClick(evt);
|
||||
}}
|
||||
data-testid={`theme-button-with-menu-${children?.toString()}`
|
||||
.toLowerCase()
|
||||
.replace(/\s/g, "-")}
|
||||
>
|
||||
{children}{" "}
|
||||
{!singleOption && (
|
||||
<KeyboardArrowDownIcon sx={{ width: 8, height: 8 }} />
|
||||
)}
|
||||
</ThemeButton>
|
||||
{!singleOption && (
|
||||
<Popover
|
||||
anchorEl={anchorEl}
|
||||
container={containerEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={(evt: any) => {
|
||||
evt.stopPropagation();
|
||||
evt.nativeEvent?.stopImmediatePropagation();
|
||||
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<List
|
||||
sx={{ bgcolor: "background.default" }}
|
||||
onClick={(evt) => {
|
||||
evt.nativeEvent?.stopImmediatePropagation();
|
||||
evt.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{groupedOptions.map((groupedOption) => (
|
||||
<React.Fragment key={groupedOption.label}>
|
||||
<ListSubheader
|
||||
sx={{
|
||||
lineHeight: "32px",
|
||||
textTransform: "uppercase",
|
||||
fontWeight: 700,
|
||||
fontSize: "12px",
|
||||
bgcolor: "background.default",
|
||||
}}
|
||||
data-testid={`theme-button-with-menu-subheader-${groupedOption.label}`
|
||||
.toLowerCase()
|
||||
.replace(/\s/g, "-")}
|
||||
>
|
||||
{groupedOption.label}
|
||||
</ListSubheader>
|
||||
{groupedOption.options.map((option) => {
|
||||
return (
|
||||
<MenuItem
|
||||
sx={{ bgcolor: "background.default" }}
|
||||
key={option.value}
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation();
|
||||
evt.nativeEvent?.stopImmediatePropagation();
|
||||
handleClose(option.value);
|
||||
}}
|
||||
data-testid={`theme-button-with-menu-item-${option.label}`
|
||||
.toLowerCase()
|
||||
.replace(/\s/g, "-")}
|
||||
>
|
||||
{option.label}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</List>
|
||||
</Popover>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeButtonWithMenu;
|
||||
@@ -1,4 +0,0 @@
|
||||
import { ThemeButtonWithMenu } from "./ThemeButtonWithMenu";
|
||||
|
||||
export default ThemeButtonWithMenu;
|
||||
export { ThemeButtonWithMenu };
|
||||
Reference in New Issue
Block a user