Quick Calculator Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Open calculator button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same Pad component and share the block's state, so a sum started in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

By a small tokenizer and a recursive-descent parser in the file, evaluate, never eval or new Function, so nothing you type can run as code. It reads numbers, plus, minus, times and divide with the usual precedence, a minus in front of a number, and a percent after one: a percent on its own is a hundredth (50% is 0.5), and after a plus or minus it is that share of what came before, so 200 + 10% is 220, the way a pocket calculator does it. A trailing operator is ignored while you type, results are rounded to ten decimals so 0.1 + 0.2 is 0.3, and a result past a quadrillion says it is too large.

Pressing equals on a sum that divides by zero shows Cannot divide by zero in the display and says it in the polite status message, and the sum stays as typed so you can fix it with Backspace; the next key clears the message. While you type, a sum that can't be read yet shows two dashes instead of a result, so nothing flashes an error half-way through a number.

While focus is inside the display or the keypad: the digits, the point (a comma too), plus, minus, the asterisk or x for times, the slash for divide, percent, Enter or equals for equals, Backspace, and C or Delete to clear. Enter is equals there, not a press of the focused key; Space still presses it. Escape closes the dialog as it always does, and nothing is bound outside the dialog.

No. Use result takes the result as whole cents, writes it on the drawn labour line, closes the dialog and says in a polite status message that nothing was saved or sent; it stays quiet and says what it is waiting for until there is a result above zero. The history and the memory stay in the block while the page is open. In your app pass the cents to your form's field in use, validate them there as you would a typed amount, and keep the history somewhere only if people should find it again.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the first key of the keypad and stays inside until it closes, and Escape, Cancel and the close button all return focus to Open calculator. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Every key is a named button, the history button says whether the history is open, and the polite status message speaks an answer, a memory change or a message, never every digit. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.