Added disabling of dice buttons when dice is loading
This commit is contained in:
parent
d808a2790e
commit
1140247a3e
@ -3,13 +3,14 @@ import { IconButton } from "theme-ui";
|
|||||||
|
|
||||||
import Count from "./DiceButtonCount";
|
import Count from "./DiceButtonCount";
|
||||||
|
|
||||||
function DiceButton({ title, children, count, onClick }) {
|
function DiceButton({ title, children, count, onClick, disabled }) {
|
||||||
return (
|
return (
|
||||||
<IconButton
|
<IconButton
|
||||||
title={title}
|
title={title}
|
||||||
aria-label={title}
|
aria-label={title}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
sx={{ position: "relative" }}
|
sx={{ position: "relative" }}
|
||||||
|
disabled={disabled}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
{count && <Count>{count}</Count>}
|
{count && <Count>{count}</Count>}
|
||||||
|
@ -29,6 +29,7 @@ function DiceButtons({
|
|||||||
onDiceTraySizeChange,
|
onDiceTraySizeChange,
|
||||||
shareDice,
|
shareDice,
|
||||||
onShareDiceChange,
|
onShareDiceChange,
|
||||||
|
loading,
|
||||||
}) {
|
}) {
|
||||||
const [currentDiceStyle, setCurrentDiceStyle] = useSetting("dice.style");
|
const [currentDiceStyle, setCurrentDiceStyle] = useSetting("dice.style");
|
||||||
const [currentDice, setCurrentDice] = useState(
|
const [currentDice, setCurrentDice] = useState(
|
||||||
@ -134,10 +135,11 @@ function DiceButtons({
|
|||||||
<SelectDiceButton
|
<SelectDiceButton
|
||||||
onDiceChange={handleDiceChange}
|
onDiceChange={handleDiceChange}
|
||||||
currentDice={currentDice}
|
currentDice={currentDice}
|
||||||
|
disabled={loading}
|
||||||
/>
|
/>
|
||||||
<Divider />
|
<Divider />
|
||||||
{buttons.map((button) => (
|
{buttons.map((button) => (
|
||||||
<DiceButton {...button} />
|
<DiceButton disabled={loading} {...button} />
|
||||||
))}
|
))}
|
||||||
<Divider />
|
<Divider />
|
||||||
<IconButton
|
<IconButton
|
||||||
@ -160,6 +162,7 @@ function DiceButtons({
|
|||||||
diceTraySize === "single" ? "double" : "single"
|
diceTraySize === "single" ? "double" : "single"
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
disabled={loading}
|
||||||
>
|
>
|
||||||
<ExpandMoreDiceTrayIcon />
|
<ExpandMoreDiceTrayIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@ -168,6 +171,7 @@ function DiceButtons({
|
|||||||
aria-label={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
|
aria-label={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
|
||||||
title={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
|
title={shareDice ? "Hide Dice Rolls" : "Share Dice Rolls"}
|
||||||
onClick={() => onShareDiceChange(!shareDice)}
|
onClick={() => onShareDiceChange(!shareDice)}
|
||||||
|
disabled={loading}
|
||||||
>
|
>
|
||||||
{shareDice ? <ShareDiceOnIcon /> : <ShareDiceOffIcon />}
|
{shareDice ? <ShareDiceOnIcon /> : <ShareDiceOffIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
@ -336,6 +336,7 @@ function DiceTrayOverlay({
|
|||||||
diceTraySize={diceTraySize}
|
diceTraySize={diceTraySize}
|
||||||
shareDice={shareDice}
|
shareDice={shareDice}
|
||||||
onShareDiceChange={onShareDiceChage}
|
onShareDiceChange={onShareDiceChage}
|
||||||
|
loading={isLoading}
|
||||||
/>
|
/>
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<Box
|
<Box
|
||||||
|
@ -4,7 +4,7 @@ import { IconButton } from "theme-ui";
|
|||||||
import SelectDiceIcon from "../../icons/SelectDiceIcon";
|
import SelectDiceIcon from "../../icons/SelectDiceIcon";
|
||||||
import SelectDiceModal from "../../modals/SelectDiceModal";
|
import SelectDiceModal from "../../modals/SelectDiceModal";
|
||||||
|
|
||||||
function SelectDiceButton({ onDiceChange, currentDice }) {
|
function SelectDiceButton({ onDiceChange, currentDice, disabled }) {
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
|
||||||
function openModal() {
|
function openModal() {
|
||||||
@ -25,6 +25,7 @@ function SelectDiceButton({ onDiceChange, currentDice }) {
|
|||||||
aria-label="Select Dice Style"
|
aria-label="Select Dice Style"
|
||||||
title="Select Dice Style"
|
title="Select Dice Style"
|
||||||
onClick={openModal}
|
onClick={openModal}
|
||||||
|
disabled={disabled}
|
||||||
>
|
>
|
||||||
<SelectDiceIcon />
|
<SelectDiceIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
Loading…
Reference in New Issue
Block a user