Some user events trigger react dom changes. These need to be wrapped in
act() to avoid a warning printed to the console. To be save, we wrap
all instances.
This saves the selected hub in localStorage. This will "remember" the
state between app launches and also synchronize the state between
various users of the component. Both of these should mean fewer clicks
required by the user.
Since we are using the react-i18n babel loader plugin, useI18n can only
be used once per file. Also we have to remember to add the istanbul
ignore next comment each time we use it. By moving this to a common
file, it can be easily copied and pasted when a new submodule is
created and we don't have to remember the rules when calling it.
This adds a button to call the ServiceWorkerRegistration.update()
function. This button will be hidden if there is already an update
pending.
This also adds a button to restart the app to apply the update. This
is nice in case users accidentally close the notification that asks
to restart.
The about button is moved to the new app group in the setting menu.
This makes the scrollbar flashing less noticeable, but there is still
a bit of a flash in dark mode due to the fact that we are still
injecting the class in the load event in that case.
Previously, the docs iframe was removed from the DOM when the docs
were hidden. This caused the docs to always go back to the main page
when shown.
This fixes it by using CSS to hide the docs instead of removing them
from the DOM. However, this comes with its own complications regarding
maintaining the scroll position.
This prevents the navbar buttons from gaining focus when clicked.
This way it prevents losing focus from the editor or terminal.
It also prevents the settings button from being highlighted after
the settings menu is closed.
Fixes:
index.js:1 Warning: Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
This grabs the docs via the @pybricks/ide-docs package and copies them
to the build directory with copy-webpack-plugin.
The service worker automatically picks up these files for precache
since they go through webpack.
This fixes a crash caused by react-dropzone due to the fact that button
elements aren't compatible with whatever react-dropzone is looking for.
TypeError: rootRef.current.isEqualNode is not a function
(anonymous function)
node_modules/react-dropzone/dist/es/index.js:473
470 |
471 | var onKeyDownCb = useCallback(function (event) {
472 | // Ignore keyboard events bubbling up the DOM tree
> 473 | if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
| ^ 474 | return;
475 | }
476 |
Wrapping it in a div element solves the problem.
Also disable tabIndex on the dropzone to prevent the button from being
focused twice when tabbing through the buttons.
David Lechner
Laurens Valk
David Lechner