Last active
May 10, 2022 06:55
-
-
Save dsvgit/2f0a34201d1b075fdd42d2a79d5c5fc8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<body> | |
<div> | |
<button class="trigger">I want to drink something!</button> | |
<div class="result"></div> | |
</div> | |
<script> | |
const resultElement = document.querySelector(".result"); | |
const setDrink = (drink) => { | |
if (drink) { | |
resultElement.innerText = `Enjoy your drink, ${drink}`; | |
} else { | |
resultElement.innerText = ``; | |
} | |
}; | |
document.querySelector(".trigger").addEventListener("click", () => { | |
setDrink(null); | |
const coffee = window.confirm("Do you like coffee?"); | |
if (coffee) return setDrink("Coffee"); | |
const tea = window.confirm("Do you like tea?"); | |
if (tea) return setDrink("Tea"); | |
setDrink("Tequila"); | |
}); | |
</script> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const OrderDrink = () => { | |
const [drink, setDrink] = useState(); | |
const modal = useModal(); | |
return ( | |
<div> | |
<button | |
onClick={async () => { | |
setDrink(null); | |
const coffee = await modal.open("Do you like coffee?"); | |
if (coffee) return setDrink("Coffee"); | |
const tea = await modal.open("Do you like tea?"); | |
if (tea) return setDrink("Tea"); | |
return setDrink("Tequila"); | |
}} | |
> | |
I want to drink something! | |
</button> | |
<div>{drink && `${drink} is your drink!`}</div> | |
<ConfirmModal {...modal} /> | |
</div> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const useModal = (initial = {}) => { | |
const state = useMemo(() => ({ resolve: null, data: initial.data }), []); | |
const [opened, setOpened] = useState(initial.opened); | |
const open = useCallback((data) => { | |
setOpened(true); | |
state.data = data; | |
return new Promise((resolve) => { state.resolve = resolve; }); | |
}, []); | |
const close = useCallback((payload) => { | |
setOpened(false); | |
state.resolve(payload); | |
}, []); | |
return { opened, data: state.data, close, open }; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const ConfirmModal = (props) => { | |
if (!props.opened) { | |
return null; | |
} | |
return ( | |
<aside> | |
<div> | |
{props.data} | |
<br /> | |
<button onClick={() => props.close(true)}>yes</button> | |
<button onClick={() => props.close(false)}>no</button> | |
</div> | |
</aside> | |
); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment