brew-js-react 0.1.0-beta

package/README.md

@@ -0,0 +1,5 @@
+# brew.js for React
+
+Brew.js for React is a utility that allow brew.js features to be used on React App.
+
+See documentation at https://hackmd.io/@misonou/brew-js-react.

package/app.js

@@ -0,0 +1,11 @@
+import brew from "brew-js";
+
+/** @type {Brew.AppInstance<Brew.WithRouter & Brew.WithI18n>} */
+export var app;
+
+brew.install('react', function (app_) {
+    // @ts-ignore: type inference issue
+    app = app_;
+});
+
+brew.defaults.react = true;

package/dialog.d.ts

@@ -0,0 +1,33 @@
+export type DialogCloseCallback<T> = (value?: T) => void;
+
+export interface DialogState<T> {
+    readonly root: HTMLElement;
+    open: () => Promise<T | undefined>;
+    close: DialogCloseCallback<T>;
+}
+
+export interface DialogBaseProps<T> {
+    title?: string;
+    className?: string;
+    showCloseButton?: boolean;
+    modal?: boolean;
+    onCommit?: (value: T | undefined) => void;
+    onOpen?: (root: HTMLElement) => void;
+    onClose?: (root: HTMLElement) => void;
+}
+
+export interface DialogRenderComponentProps<T> extends DialogBaseProps<T> {
+    closeDialog: DialogCloseCallback<T>;
+}
+
+export interface DialogOptions<T> extends DialogBaseProps<T> {
+    onRender: React.FC<DialogRenderComponentProps<T>>;
+}
+
+export interface DialogProps<T> extends React.PropsWithChildren<DialogBaseProps<T>> {
+    isOpen: boolean;
+}
+
+export function createDialog<T = any>(props: DialogOptions<T>): DialogState<T>;
+
+export function Dialog<T>(props: DialogProps<T>): JSX.Element;

package/dialog.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import brew from "brew-js";
+import { always, either, extend, noop } from "./include/zeta-dom/util.js";
+import { containsOrEquals, removeNode } from "./include/zeta-dom/domUtil.js";
+import dom from "./include/zeta-dom/dom.js";
+
+/**
+ * @param {Partial<import("./dialog").DialogOptions<any>>} props
+ */
+export function createDialog(props) {
+    var root = document.createElement('div');
+    var closing = false;
+    var promise;
+
+    function closeDialog(value) {
+        if (!closing) {
+            closing = true;
+            brew.closeFlyout(root, value).then(function () {
+                closing = false;
+                removeNode(root);
+                (props.onClose || noop)(root);
+                if (props.onRender) {
+                    ReactDOM.unmountComponentAtNode(root);
+                }
+            });
+        }
+    }
+
+    return {
+        root: root,
+        close: closeDialog,
+        open: function () {
+            if (promise) {
+                return promise;
+            }
+            root.className = props.className || '';
+            document.body.appendChild(root);
+            dom.retainFocus(dom.activeElement, root);
+            if (props.modal) {
+                root.setAttribute('is-modal', '');
+                dom.setModal(root);
+            }
+            if (props.onRender) {
+                ReactDOM.render(React.createElement(props.onRender, extend({ closeDialog }, props)), root);
+            }
+
+            promise = brew.openFlyout(root);
+            always(promise, function () {
+                promise = null;
+            });
+            promise.then(props.onCommit);
+            (props.onOpen || noop)(root);
+            return promise;
+        }
+    };
+}
+
+/**
+ * @param {import("./dialog").DialogProps} props
+ */
+export function Dialog(props) {
+    const _props = useState(props)[0];
+    const dialog = useState(function () {
+        return createDialog(_props);
+    })[0];
+    extend(_props, props);
+
+    useEffect(function () {
+        var opened = containsOrEquals(dom.root, dialog.root);
+        if (either(opened, _props.isOpen)) {
+            if (!opened) {
+                dialog.open();
+            } else {
+                dialog.close();
+            }
+        }
+    }, [_props.isOpen])
+    useEffect(function () {
+        return dialog.close;
+    }, [dialog]);
+    return ReactDOM.createPortal(props.children, dialog.root);
+}