Thumbnail Table Block for React

So the block carries no photos. Each is a few paths in a 160 by 120 box, filled in three greys and outlined in the foreground, kept in SCENES. For real files, put an img with alt="" in the same button (its name already says "Preview oak-chair.png") and an img with a real alt in the dialog.

Previous and Next step through the files and wrap round at the ends, so neither is ever disabled and focus stays on the one you pressed. While the dialog is up the horizontal arrow keys do the same; in a right-to-left layout the arrows swap so they still point the way they move. The line in the dialog reads the new position out loud ("File 4 of 6: autumn-fair-poster.png").

That is the preview's part. On load the dialog is drawn in place as a native non-modal dialog over the table, so nothing is trapped; the table behind it is unseen and unfocusable until you close it with the close button or Escape. Pressing any thumbnail opens the real dialog with the library's focus trap, Escape and focus handling, on the same state. In your app keep only the real Dialog.

To the thumbnail that opened it, even if you stepped to other files meanwhile. The libraries each restore focus a little differently for a dialog with no trigger of its own, so the block moves it after the dialog has gone and checks that it arrived.

The table drops the Kind and Dimensions columns and folds the kind under each file's name. The dialog docks to the bottom of the stage, the drawing is a little shorter and the facts become one sentence. The buttons stay in a row at the foot.

The six files are typed in ITEMS, with sizes and dates that are examples, and nothing is uploaded, fetched or saved. To wire it, load your files into ITEMS (keep a name, a kind, a size and a date) and swap Scene for your image.