cx 22.8.3 → 22.9.0

package/src/widgets/overlay/MsgBox.js

@@ -1,116 +1,116 @@
-import { Widget } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { Window } from "./Window";
-import { Button } from "../Button";
-import { Localization } from "../../ui/Localization";
-import { FlexRow } from "../FlexBox";
-import { registerAlertImpl } from "./alerts";
-import { isString } from "../../util/isString";
-
-export class MsgBox {
-   static alert(options) {
-      if (isString(options))
-         options = {
-            message: options,
-         };
-
-      return new Promise(function (resolve) {
-         let callback = (e, instance) => {
-            if (options.callback && options.callback() === false) return;
-            instance.parentOptions.dismiss();
-            resolve();
-         };
-
-         let w = Widget.create(
-            <cx>
-               <Window
-                  title={options.title}
-                  header={options.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={options.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {options.message || options.items || options.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                  >
-                     <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
-                        {options.okText || "OK"}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>
-         );
-
-         w.open(options.store);
-      });
-   }
-
-   static yesNo(options) {
-      if (isString(options))
-         options = {
-            message: options,
-         };
-
-      return new Promise(function (resolve, reject) {
-         let callback = (option) => (e, instance) => {
-            if (options.callback && options.callback(option) === false) return;
-            instance.parentOptions.dismiss();
-            if (option == "yes") resolve(option);
-            else resolve(option);
-         };
-         let w = Widget.create(
-            <cx>
-               <Window
-                  title={options.title}
-                  header={options.header}
-                  mod="alert"
-                  modal
-                  center
-                  resizable={false}
-                  closable={false}
-                  style={options.style || "max-width: 90vw"}
-                  dismissOnPopState
-               >
-                  {options.message || options.items || options.children}
-                  <FlexRow
-                     putInto="footer"
-                     direction={MsgBox.prototype.footerDirection}
-                     justify={MsgBox.prototype.footerJustify}
-                     hspacing="small"
-                  >
-                     <Button mod={options.yesButtonMod || MsgBox.prototype.buttonMod} onClick={callback("yes")}>
-                        {options.yesText || MsgBox.prototype.yesText}
-                     </Button>
-                     <Button mod={options.noButtonMod || MsgBox.prototype.buttonMod} onClick={callback("no")}>
-                        {options.noText || MsgBox.prototype.noText}
-                     </Button>
-                  </FlexRow>
-               </Window>
-            </cx>
-         );
-
-         w.open(options.store);
-      });
-   }
-}
-
-MsgBox.prototype.buttonMod = null;
-MsgBox.prototype.footerDirection = "row";
-MsgBox.prototype.footerJustify = "center";
-MsgBox.prototype.yesText = "Yes";
-MsgBox.prototype.noText = "No";
-Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
-
-export function enableMsgBoxAlerts() {
-   registerAlertImpl({
-      yesNo: MsgBox.yesNo.bind(MsgBox),
-      alert: MsgBox.alert.bind(MsgBox),
-   });
-}
+import { Widget } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { Window } from "./Window";
+import { Button } from "../Button";
+import { Localization } from "../../ui/Localization";
+import { FlexRow } from "../FlexBox";
+import { registerAlertImpl } from "./alerts";
+import { isString } from "../../util/isString";
+
+export class MsgBox {
+   static alert(options) {
+      if (isString(options))
+         options = {
+            message: options,
+         };
+
+      return new Promise(function (resolve) {
+         let callback = (e, instance) => {
+            if (options.callback && options.callback() === false) return;
+            instance.parentOptions.dismiss();
+            resolve();
+         };
+
+         let w = Widget.create(
+            <cx>
+               <Window
+                  title={options.title}
+                  header={options.header}
+                  mod="alert"
+                  modal
+                  center
+                  resizable={false}
+                  closable={false}
+                  style={options.style || "max-width: 90vw"}
+                  dismissOnPopState
+               >
+                  {options.message || options.items || options.children}
+                  <FlexRow
+                     putInto="footer"
+                     direction={MsgBox.prototype.footerDirection}
+                     justify={MsgBox.prototype.footerJustify}
+                  >
+                     <Button mod={MsgBox.prototype.buttonMod} onClick={callback}>
+                        {options.okText || "OK"}
+                     </Button>
+                  </FlexRow>
+               </Window>
+            </cx>
+         );
+
+         w.open(options.store);
+      });
+   }
+
+   static yesNo(options) {
+      if (isString(options))
+         options = {
+            message: options,
+         };
+
+      return new Promise(function (resolve, reject) {
+         let callback = (option) => (e, instance) => {
+            if (options.callback && options.callback(option) === false) return;
+            instance.parentOptions.dismiss();
+            if (option == "yes") resolve(option);
+            else resolve(option);
+         };
+         let w = Widget.create(
+            <cx>
+               <Window
+                  title={options.title}
+                  header={options.header}
+                  mod="alert"
+                  modal
+                  center
+                  resizable={false}
+                  closable={false}
+                  style={options.style || "max-width: 90vw"}
+                  dismissOnPopState
+               >
+                  {options.message || options.items || options.children}
+                  <FlexRow
+                     putInto="footer"
+                     direction={MsgBox.prototype.footerDirection}
+                     justify={MsgBox.prototype.footerJustify}
+                     hspacing="small"
+                  >
+                     <Button mod={options.yesButtonMod || MsgBox.prototype.buttonMod} onClick={callback("yes")}>
+                        {options.yesText || MsgBox.prototype.yesText}
+                     </Button>
+                     <Button mod={options.noButtonMod || MsgBox.prototype.buttonMod} onClick={callback("no")}>
+                        {options.noText || MsgBox.prototype.noText}
+                     </Button>
+                  </FlexRow>
+               </Window>
+            </cx>
+         );
+
+         w.open(options.store);
+      });
+   }
+}
+
+MsgBox.prototype.buttonMod = null;
+MsgBox.prototype.footerDirection = "row";
+MsgBox.prototype.footerJustify = "center";
+MsgBox.prototype.yesText = "Yes";
+MsgBox.prototype.noText = "No";
+Localization.registerPrototype("cx/widgets/MsgBox", MsgBox);
+
+export function enableMsgBoxAlerts() {
+   registerAlertImpl({
+      yesNo: MsgBox.yesNo.bind(MsgBox),
+      alert: MsgBox.alert.bind(MsgBox),
+   });
+}

package/src/widgets/overlay/Overlay.d.ts

@@ -1,69 +1,69 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-
-export interface OverlayProps extends Cx.StyledContainerProps {
-   /** Set to `true` to enable resizing. */
-   resizable?: Cx.BooleanProp;
-
-   /** Set to `true` to enable dragging the overlay. */
-   draggable?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
-   baseClass?: string;
-
-   resizeWidth?: number;
-
-   /** Set to `true` to initially place the overlay in the center of the page. */
-   center?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
-   centerX?: boolean;
-
-   /** Set to `true` to initially place the overlay in the center of the page vertically. */
-   centerY?: boolean;
-
-   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
-   modal?: boolean;
-
-   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
-   backdrop?: boolean;
-
-   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
-    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
-   inline?: boolean;
-
-   /** Set to `true` to automatically focus the top level overlay element. */
-   autoFocus?: boolean;
-
-   /** Set to `true` to automatically focus the first focusable child in the overlay. */
-   autoFocusFirstChild?: boolean;
-
-   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
-   animate?: boolean;
-
-   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
-   destroyDelay?: number;
-
-   /** Automatically dismiss overlay if it loses focus. */
-   dismissOnFocusOut?: boolean;
-
-   /** Set to true to make the top level overlay element focusable. */
-   focusable?: boolean;
-
-   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
-   dismissOnPopState?: boolean;
-
-   /** A callback function which fires while the overlay is being moved around. */
-   onMove?(e: Event, instance: Instance, component: any);
-
-   /** A callback function which fires while the overlay is being resized. */
-   onResize?(e: Event, instance: Instance, component: any);
-
-   /** zIndex */
-   zIndex?: Cx.NumberProp;
-
-   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
-   closeOnEscape?: boolean;
-}
-
-export class Overlay extends Cx.Widget<OverlayProps> {}
+import * as Cx from "../../core";
+import { Instance } from "../../ui/Instance";
+
+export interface OverlayProps extends Cx.StyledContainerProps {
+   /** Set to `true` to enable resizing. */
+   resizable?: Cx.BooleanProp;
+
+   /** Set to `true` to enable dragging the overlay. */
+   draggable?: Cx.BooleanProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `overlay`. */
+   baseClass?: string;
+
+   resizeWidth?: number;
+
+   /** Set to `true` to initially place the overlay in the center of the page. */
+   center?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page horizontally. */
+   centerX?: boolean;
+
+   /** Set to `true` to initially place the overlay in the center of the page vertically. */
+   centerY?: boolean;
+
+   /** Set to `true` to add a modal backdrop which masks mouse events for the rest of the page. */
+   modal?: boolean;
+
+   /** Set to `true` to add a modal backdrop which will dismiss the window when clicked. */
+   backdrop?: boolean;
+
+   /** Set to `true` to force the element to be rendered inline, instead of being appended to the body element.
+    * Inline overlays have z-index set to a very high value, to ensure they are displayed on top of the other content. */
+   inline?: boolean;
+
+   /** Set to `true` to automatically focus the top level overlay element. */
+   autoFocus?: boolean;
+
+   /** Set to `true` to automatically focus the first focusable child in the overlay. */
+   autoFocusFirstChild?: boolean;
+
+   /** Set to `true` to append the set animate state after the initial render. Appended CSS class may be used to add show/hide animations. */
+   animate?: boolean;
+
+   /** Number of milliseconds to wait, before removing the element from the DOM. Used in combination with the animate property. */
+   destroyDelay?: number;
+
+   /** Automatically dismiss overlay if it loses focus. */
+   dismissOnFocusOut?: boolean;
+
+   /** Set to true to make the top level overlay element focusable. */
+   focusable?: boolean;
+
+   /** Set to `true` to dismiss the window if the user presses the back button in the browser. */
+   dismissOnPopState?: boolean;
+
+   /** A callback function which fires while the overlay is being moved around. */
+   onMove?(e: Event, instance: Instance, component: any);
+
+   /** A callback function which fires while the overlay is being resized. */
+   onResize?(e: Event, instance: Instance, component: any);
+
+   /** zIndex */
+   zIndex?: Cx.NumberProp;
+
+   /** Set to `true` to make the window automatically close if Esc is pressed on the keyboard. Default value is false.*/
+   closeOnEscape?: boolean;
+}
+
+export class Overlay extends Cx.Widget<OverlayProps> {}