brew-js-react 0.6.7 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dialog.d.ts +15 -1
- package/dialog.js +13 -18
- package/dist/brew-js-react.js +41 -52
- package/dist/brew-js-react.js.map +1 -1
- package/dist/brew-js-react.min.js +2 -2
- package/dist/brew-js-react.min.js.map +1 -1
- package/mixins/AnimateMixin.d.ts +6 -0
- package/mixins/AnimateSequenceItemMixin.d.ts +6 -0
- package/mixins/AnimateSequenceMixin.d.ts +7 -0
- package/mixins/FlyoutMixin.d.ts +6 -0
- package/mixins/Mixin.d.ts +16 -13
- package/mixins/Mixin.js +17 -23
- package/mixins/ScrollableMixin.d.ts +7 -1
- package/mixins/StaticAttributeMixin.d.ts +10 -3
- package/package.json +5 -6
- package/view.d.ts +8 -1
- package/view.js +10 -8
package/dialog.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export type DialogBaseProps<T, V = T> = Omit<DialogOptions<T, V | undefined>, 'o
|
|
|
14
14
|
/** @deprecated */
|
|
15
15
|
export type DialogRenderComponentProps<T, V = T> = DialogOptions<T, V | undefined> & DialogContext<V | undefined>;
|
|
16
16
|
|
|
17
|
-
export type DialogControllerOptions =
|
|
17
|
+
export type DialogControllerOptions = Omit<DialogOptions<any>, 'onRender' | 'onCommit' | 'onOpen' | 'onClose' | 'controller'>;
|
|
18
18
|
|
|
19
19
|
export interface DialogControllerAdvancedOptions extends DialogControllerOptions, Pick<DialogOptions<any>, 'onClose' | 'onOpen' | 'preventLeave' | 'preventNavigation'> {
|
|
20
20
|
/**
|
|
@@ -203,6 +203,20 @@ export function createDialog<P extends DialogOptionsStrict<any, any>>(props: P):
|
|
|
203
203
|
|
|
204
204
|
export function createDialog<P extends DialogOptions<any, any>>(props: P): DialogState<VoidOrOptional<P extends DialogOptions<infer T, infer V> ? T | V : unknown>>;
|
|
205
205
|
|
|
206
|
+
/**
|
|
207
|
+
* Opens a dialog.
|
|
208
|
+
* @param props A dictionary containing options.
|
|
209
|
+
*/
|
|
210
|
+
export function openDialog<T, V>(props: DialogOptionsStrict<T, V>): Promise<DialogResult<VoidOrOptional<T>>>;
|
|
211
|
+
|
|
212
|
+
export function openDialog<T, V>(props: DialogOptions<T, V>): Promise<DialogResult<VoidOrOptional<T | V>>>;
|
|
213
|
+
|
|
214
|
+
export function openDialog<T, V = T>(props: DialogOptions<T, V | undefined>): Promise<DialogResult<VoidOrOptional<T | V>>>;
|
|
215
|
+
|
|
216
|
+
export function openDialog<P extends DialogOptionsStrict<any, any>>(props: P): Promise<DialogResult<VoidOrOptional<P extends DialogOptionsStrict<infer T, any> ? T : unknown>>>;
|
|
217
|
+
|
|
218
|
+
export function openDialog<P extends DialogOptions<any, any>>(props: P): Promise<DialogResult<VoidOrOptional<P extends DialogOptions<infer T, infer V> ? T | V : unknown>>>;
|
|
219
|
+
|
|
206
220
|
/**
|
|
207
221
|
* Renders a dialog declaratively.
|
|
208
222
|
*/
|
package/dialog.js
CHANGED
|
@@ -2,10 +2,10 @@ import { createElement, StrictMode, useEffect, useState } from "react";
|
|
|
2
2
|
import ReactDOM from "react-dom";
|
|
3
3
|
import ReactDOMClient from "@misonou/react-dom-client";
|
|
4
4
|
import { createAsyncScope } from "zeta-dom-react";
|
|
5
|
-
import { always, arrRemove, combineFn, createPrivateStore, defineObservableProperty, either, extend, noop, pick, resolve, setImmediate } from "zeta-dom/util";
|
|
5
|
+
import { always, arrRemove, combineFn, createPrivateStore, defineObservableProperty, either, exclude, extend, noop, pick, resolve, setImmediate } from "zeta-dom/util";
|
|
6
6
|
import { containsOrEquals, removeNode } from "zeta-dom/domUtil";
|
|
7
7
|
import dom from "zeta-dom/dom";
|
|
8
|
-
import {
|
|
8
|
+
import { runAsync, subscribeAsync } from "zeta-dom/domLock";
|
|
9
9
|
import { closeFlyout, isFlyoutOpen, openFlyout } from "brew-js/domAction";
|
|
10
10
|
|
|
11
11
|
const _ = createPrivateStore();
|
|
@@ -40,24 +40,19 @@ function createDialogElement(props, unmountAfterUse) {
|
|
|
40
40
|
return root;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
function
|
|
43
|
+
function showDialog(element, props, container) {
|
|
44
44
|
if (!containsOrEquals(dom.root, element)) {
|
|
45
45
|
element.className = props.className || '';
|
|
46
|
-
(container || props.container || document.body).appendChild(element);
|
|
47
46
|
if (props.modal) {
|
|
48
47
|
element.setAttribute('is-modal', '');
|
|
49
48
|
}
|
|
50
|
-
|
|
51
|
-
dom.retainFocus(dom.activeElement, element);
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
var promise = openFlyout(element, null, pick(props, ['focus', 'closeOnBlur']));
|
|
55
|
-
if (props.preventLeave) {
|
|
56
|
-
preventLeave(element, promise);
|
|
57
|
-
} else if (props.preventNavigation) {
|
|
58
|
-
lock(element, promise);
|
|
49
|
+
(container || props.container || document.body).appendChild(element);
|
|
59
50
|
}
|
|
60
|
-
return
|
|
51
|
+
return openFlyout(element, null, pick(props, ['focus', 'closeOnBlur', 'preventLeave', 'preventNavigation']));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export function openDialog(props) {
|
|
55
|
+
return createDialog(props).open();
|
|
61
56
|
}
|
|
62
57
|
|
|
63
58
|
/**
|
|
@@ -89,7 +84,7 @@ export function createDialog(props) {
|
|
|
89
84
|
content = createElement(props.wrapper, dialogProps, content);
|
|
90
85
|
}
|
|
91
86
|
reactRoot.render(createElement(StrictMode, null, createElement(scope.Provider, null, content)));
|
|
92
|
-
return shared ? { then: noop } :
|
|
87
|
+
return shared ? { then: noop } : showDialog(root, props, container);
|
|
93
88
|
}
|
|
94
89
|
|
|
95
90
|
return {
|
|
@@ -153,7 +148,7 @@ export function createDialogQueue(props) {
|
|
|
153
148
|
childProps = { closeOnBlur: false };
|
|
154
149
|
props = extend({}, props, childProps);
|
|
155
150
|
} else {
|
|
156
|
-
childProps = props &&
|
|
151
|
+
childProps = props && exclude(props, ['onCommit', 'onRender', 'onOpen', 'onClose']);
|
|
157
152
|
}
|
|
158
153
|
_(controller, {
|
|
159
154
|
root: root,
|
|
@@ -161,7 +156,7 @@ export function createDialogQueue(props) {
|
|
|
161
156
|
props: childProps,
|
|
162
157
|
enqueue: function (callback) {
|
|
163
158
|
if (root && !isFlyoutOpen(root)) {
|
|
164
|
-
|
|
159
|
+
showDialog(root, props).then(dismissAll);
|
|
165
160
|
}
|
|
166
161
|
if (queue.length || active.length >= (multiple ? props.concurrent || Infinity : 1)) {
|
|
167
162
|
return new Promise(function (resolve) {
|
|
@@ -189,7 +184,7 @@ export function Dialog(props) {
|
|
|
189
184
|
var opened = isFlyoutOpen(element);
|
|
190
185
|
if (either(opened, _props.isOpen)) {
|
|
191
186
|
if (!opened) {
|
|
192
|
-
|
|
187
|
+
showDialog(element, _props);
|
|
193
188
|
} else {
|
|
194
189
|
closeFlyout(element);
|
|
195
190
|
}
|
package/dist/brew-js-react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! brew-js-react v0.
|
|
1
|
+
/*! brew-js-react v0.7.1 | (c) misonou | https://misonou.github.io */
|
|
2
2
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
3
3
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
4
4
|
module.exports = factory(require("zeta-dom"), require("brew-js"), require("react"), require("react-dom"), require("zeta-dom-react"), require("waterpipe"), require("jquery"));
|
|
@@ -192,6 +192,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
192
192
|
makeTranslation: () => (/* reexport */ makeTranslation),
|
|
193
193
|
matchView: () => (/* reexport */ matchView),
|
|
194
194
|
navigateTo: () => (/* reexport */ navigateTo),
|
|
195
|
+
openDialog: () => (/* reexport */ openDialog),
|
|
195
196
|
redirectTo: () => (/* reexport */ redirectTo),
|
|
196
197
|
registerErrorView: () => (/* reexport */ registerErrorView),
|
|
197
198
|
registerView: () => (/* reexport */ registerView),
|
|
@@ -351,8 +352,6 @@ var reportError = dom.reportError;
|
|
|
351
352
|
;// CONCATENATED MODULE: ./|umd|/zeta-dom/domLock.js
|
|
352
353
|
|
|
353
354
|
var _lib$dom = external_commonjs_zeta_dom_commonjs2_zeta_dom_amd_zeta_dom_root_zeta_.dom,
|
|
354
|
-
lock = _lib$dom.lock,
|
|
355
|
-
preventLeave = _lib$dom.preventLeave,
|
|
356
355
|
runAsync = _lib$dom.runAsync,
|
|
357
356
|
subscribeAsync = _lib$dom.subscribeAsync;
|
|
358
357
|
|
|
@@ -402,24 +401,18 @@ function createDialogElement(props, unmountAfterUse) {
|
|
|
402
401
|
subscribeAsync(root, true);
|
|
403
402
|
return root;
|
|
404
403
|
}
|
|
405
|
-
function
|
|
404
|
+
function showDialog(element, props, container) {
|
|
406
405
|
if (!containsOrEquals(zeta_dom_dom.root, element)) {
|
|
407
406
|
element.className = props.className || '';
|
|
408
|
-
(container || props.container || document.body).appendChild(element);
|
|
409
407
|
if (props.modal) {
|
|
410
408
|
element.setAttribute('is-modal', '');
|
|
411
409
|
}
|
|
412
|
-
|
|
413
|
-
zeta_dom_dom.retainFocus(zeta_dom_dom.activeElement, element);
|
|
414
|
-
});
|
|
415
|
-
}
|
|
416
|
-
var promise = openFlyout(element, null, pick(props, ['focus', 'closeOnBlur']));
|
|
417
|
-
if (props.preventLeave) {
|
|
418
|
-
preventLeave(element, promise);
|
|
419
|
-
} else if (props.preventNavigation) {
|
|
420
|
-
lock(element, promise);
|
|
410
|
+
(container || props.container || document.body).appendChild(element);
|
|
421
411
|
}
|
|
422
|
-
return
|
|
412
|
+
return openFlyout(element, null, pick(props, ['focus', 'closeOnBlur', 'preventLeave', 'preventNavigation']));
|
|
413
|
+
}
|
|
414
|
+
function openDialog(props) {
|
|
415
|
+
return createDialog(props).open();
|
|
423
416
|
}
|
|
424
417
|
|
|
425
418
|
/**
|
|
@@ -452,7 +445,7 @@ function createDialog(props) {
|
|
|
452
445
|
reactRoot.render( /*#__PURE__*/createElement(StrictMode, null, /*#__PURE__*/createElement(scope.Provider, null, content)));
|
|
453
446
|
return shared ? {
|
|
454
447
|
then: noop
|
|
455
|
-
} :
|
|
448
|
+
} : showDialog(root, props, container);
|
|
456
449
|
}
|
|
457
450
|
return {
|
|
458
451
|
root: root,
|
|
@@ -513,7 +506,7 @@ function createDialogQueue(props) {
|
|
|
513
506
|
};
|
|
514
507
|
props = extend({}, props, childProps);
|
|
515
508
|
} else {
|
|
516
|
-
childProps = props &&
|
|
509
|
+
childProps = props && exclude(props, ['onCommit', 'onRender', 'onOpen', 'onClose']);
|
|
517
510
|
}
|
|
518
511
|
_(controller, {
|
|
519
512
|
root: root,
|
|
@@ -521,7 +514,7 @@ function createDialogQueue(props) {
|
|
|
521
514
|
props: childProps,
|
|
522
515
|
enqueue: function enqueue(callback) {
|
|
523
516
|
if (root && !isFlyoutOpen(root)) {
|
|
524
|
-
|
|
517
|
+
showDialog(root, props).then(dismissAll);
|
|
525
518
|
}
|
|
526
519
|
if (queue.length || active.length >= (multiple ? props.concurrent || Infinity : 1)) {
|
|
527
520
|
return new Promise(function (resolve) {
|
|
@@ -552,7 +545,7 @@ function Dialog(props) {
|
|
|
552
545
|
var opened = isFlyoutOpen(element);
|
|
553
546
|
if (either(opened, _props.isOpen)) {
|
|
554
547
|
if (!opened) {
|
|
555
|
-
|
|
548
|
+
showDialog(element, _props);
|
|
556
549
|
} else {
|
|
557
550
|
closeFlyout(element);
|
|
558
551
|
}
|
|
@@ -694,13 +687,15 @@ definePrototype(ErrorBoundary, Component, {
|
|
|
694
687
|
var context = self.props.context;
|
|
695
688
|
if (!context.container) {
|
|
696
689
|
setImmediate(function () {
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
690
|
+
if (!self.errorHandler) {
|
|
691
|
+
extend(self, createAsyncScope(context.container));
|
|
692
|
+
zeta_dom_dom.on(context.container, 'error', function (e) {
|
|
693
|
+
return emitter.emit(e, context, {
|
|
694
|
+
error: e.error
|
|
695
|
+
}, false);
|
|
696
|
+
});
|
|
697
|
+
self.forceUpdate();
|
|
698
|
+
}
|
|
704
699
|
});
|
|
705
700
|
return null;
|
|
706
701
|
}
|
|
@@ -917,7 +912,7 @@ function createViewComponent(factory) {
|
|
|
917
912
|
}
|
|
918
913
|
return function fn(props) {
|
|
919
914
|
var children = promise || factory(props.viewProps);
|
|
920
|
-
if (isThenable(children)) {
|
|
915
|
+
if (promise || isThenable(children)) {
|
|
921
916
|
promise = children;
|
|
922
917
|
catchAsync(promise);
|
|
923
918
|
} else {
|
|
@@ -925,8 +920,8 @@ function createViewComponent(factory) {
|
|
|
925
920
|
return children;
|
|
926
921
|
}
|
|
927
922
|
var component = useAsync(function () {
|
|
928
|
-
|
|
929
|
-
|
|
923
|
+
promise = true;
|
|
924
|
+
return (isThenable(children) || factory()).then(null, function (error) {
|
|
930
925
|
props.onError(error);
|
|
931
926
|
});
|
|
932
927
|
})[0];
|
|
@@ -1330,37 +1325,31 @@ util_define(Mixin, {
|
|
|
1330
1325
|
},
|
|
1331
1326
|
use: function use() {
|
|
1332
1327
|
var args = makeArray(arguments);
|
|
1333
|
-
var ref = args[0];
|
|
1334
1328
|
var props = {};
|
|
1335
|
-
var
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
if (ref && !(ref instanceof Mixin)) {
|
|
1342
|
-
if (typeof ref !== 'function') {
|
|
1343
|
-
refs.push(function (v) {
|
|
1344
|
-
ref.current = v;
|
|
1345
|
-
});
|
|
1346
|
-
} else {
|
|
1347
|
-
refs.push(ref);
|
|
1348
|
-
}
|
|
1329
|
+
var refs = [];
|
|
1330
|
+
var ref = args[0];
|
|
1331
|
+
if (!ref) {
|
|
1332
|
+
args.shift();
|
|
1333
|
+
} else if (typeof ref === 'function') {
|
|
1334
|
+
refs.push(ref);
|
|
1349
1335
|
args.shift();
|
|
1350
|
-
} else if (!ref) {
|
|
1336
|
+
} else if (typeof ref !== 'string' && !(ref instanceof Mixin)) {
|
|
1337
|
+
refs.push(function (w) {
|
|
1338
|
+
ref.current = w;
|
|
1339
|
+
});
|
|
1351
1340
|
args.shift();
|
|
1352
1341
|
}
|
|
1353
|
-
each(
|
|
1354
|
-
|
|
1342
|
+
each(args, function (i, v) {
|
|
1343
|
+
if (v instanceof Mixin) {
|
|
1344
|
+
refs.push(v.getRef());
|
|
1345
|
+
extend(props, v.getCustomAttributes());
|
|
1346
|
+
v.next();
|
|
1347
|
+
}
|
|
1355
1348
|
});
|
|
1356
|
-
extend(props, {
|
|
1349
|
+
return extend(props, {
|
|
1357
1350
|
ref: combineFn(refs),
|
|
1358
1351
|
className: classNames.apply(null, args)
|
|
1359
1352
|
});
|
|
1360
|
-
each(mixins, function (i, v) {
|
|
1361
|
-
v.next();
|
|
1362
|
-
});
|
|
1363
|
-
return props;
|
|
1364
1353
|
}
|
|
1365
1354
|
});
|
|
1366
1355
|
;// CONCATENATED MODULE: ./|umd|/zeta-dom/observe.js
|