Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/MaxwellCohen/react-vite-test-command.
Something went wrong. Try again.
7.0 kB · 210 lines
JSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211import "./App.css";import { useState } from "react";
function App() { const [closeReturnValue, setCloseReturnValue] = useState(""); const [requestCloseReturnValue, setRequestCloseReturnValue] = useState(""); const [blockRequestClose, setBlockRequestClose] = useState(false); const [requestCloseLog, setRequestCloseLog] = useState([]); const [customCommand, setCustomCommand] = useState("");
function logRequestClose(message) { setRequestCloseLog((prev) => [...prev.slice(-4), message]); }
return ( <div className="app"> <h1>Command attribute examples</h1> <p className="intro"> Buttons use <code>commandFor</code> to target an element by id and{" "} <code>command</code> to run a built-in or custom action. </p>
<section className="demo-section"> <h2>Popover</h2> <p className="hint"> Target: <code>#demo-popover</code> (<code>popover="auto"</code>) </p> <div className="button-row"> <button type="button" commandFor="demo-popover" command="show-popover"> show-popover </button> <button type="button" commandFor="demo-popover" command="hide-popover"> hide-popover </button> <button type="button" commandFor="demo-popover" command="toggle-popover" > toggle-popover </button> </div> <div id="demo-popover" popover="auto" className="demo-popover"> <p>Popover content</p> <button type="button" commandFor="demo-popover" command="hide-popover"> hide-popover (inside) </button> </div> </section>
<section className="demo-section"> <h2>Dialog: show-modal</h2> <p className="hint"> Opens <code>#dialog-show-modal</code> as a modal ( <code>HTMLDialogElement.showModal()</code>). </p> <button type="button" commandFor="dialog-show-modal" command="show-modal" > show-modal </button> <dialog id="dialog-show-modal" className="demo-dialog"> <p>Modal dialog opened with <code>show-modal</code>.</p> <button type="button" commandFor="dialog-show-modal" command="close"> close </button> </dialog> </section>
<section className="demo-section"> <h2>Dialog: close</h2> <p className="hint"> Closes immediately (<code>HTMLDialogElement.close()</code>). With{" "} <code>value</code> on the button, that string becomes the dialog's{" "} <code>returnValue</code>. </p> <button type="button" commandFor="dialog-close" command="show-modal"> Open dialog </button> <dialog id="dialog-close" className="demo-dialog" onClose={(e) => setCloseReturnValue(e.currentTarget.returnValue)} > <p>Choose how to close:</p> <div className="button-row"> <button type="button" commandFor="dialog-close" command="close" value="confirmed" > close (value="confirmed") </button> <button type="button" commandFor="dialog-close" command="close" value="dismissed" > close (value="dismissed") </button> </div> </dialog> <p className="result"> Last <code>returnValue</code>:{" "} <code>{closeReturnValue || "(none yet)"}</code> </p> </section>
<section className="demo-section"> <h2>Dialog: request-close</h2> <p className="hint"> Fires <code>cancel</code> then <code>close</code> ( <code>HTMLDialogElement.requestClose()</code>). Call{" "} <code>preventDefault()</code> on <code>cancel</code> to keep the dialog open. </p> <label className="checkbox-row"> <input type="checkbox" checked={blockRequestClose} onChange={(e) => setBlockRequestClose(e.target.checked)} /> Block close on <code>cancel</code> </label> <button type="button" commandFor="dialog-request-close" command="show-modal"> Open dialog </button> <dialog id="dialog-request-close" className="demo-dialog" onCancel={(e) => { logRequestClose( blockRequestClose ? "cancel (default prevented — dialog stays open)" : "cancel (allowed — dialog will close)", ); if (blockRequestClose) { e.preventDefault(); } }} onClose={(e) => { setRequestCloseReturnValue(e.currentTarget.returnValue); logRequestClose( `close (returnValue: ${e.currentTarget.returnValue || "empty"})`, ); }} > <p>Try request-close with or without blocking:</p> <button type="button" commandFor="dialog-request-close" command="request-close" value="requested" > request-close (value="requested") </button> </dialog> <p className="result"> Last <code>returnValue</code>:{" "} <code>{requestCloseReturnValue || "(none yet)"}</code> </p> {requestCloseLog.length > 0 && ( <ul className="event-log"> {requestCloseLog.map((entry, i) => ( <li key={`${entry}-${i}`}>{entry}</li> ))} </ul> )} </section>
<section className="demo-section"> <h2>Custom invoker command</h2> <p className="hint"> Names starting with <code>--</code> are author-defined. The target receives a <code>command</code> event; handle it in{" "} <code>onCommand</code> (no browser default behavior). </p> <div className="button-row"> <button type="button" commandFor="custom-target" command="--highlight" > --highlight </button> <button type="button" commandFor="custom-target" command="--reset"> --reset </button> </div> <div id="custom-target" className={`custom-target${customCommand === "--highlight" ? " custom-target--highlight" : ""}`} onCommand={(e) => setCustomCommand(e.command)} > <p>Command target</p> <p className="result"> Last <code>event.command</code>:{" "} <code>{customCommand || "(none yet)"}</code> </p> </div> </section> </div> );}
export default App;