@nozzlegear/react-win-dialog/dist/index.js

An attempt to recreate the Dialog element from WinJS.

import * as React from "react";
import * as ReactDOM from "react-dom";
import Classes from "classnames";
export function Dialog(props) {
  var _a, _b;
  const ignore = () => {
  };
  const overlayPreventsScrolling = props.overlayPreventsScrolling !== false;
  let modal = /* @__PURE__ */ React.createElement(React.Fragment, null);
  const defaultOverflow = React.useMemo(() => {
    return document.body.style.overflow;
  }, []);
  React.useEffect(() => {
    if (overlayPreventsScrolling) {
      if (props.open) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = defaultOverflow || "";
      }
    }
    return () => {
      if (overlayPreventsScrolling) {
        document.body.style.overflow = defaultOverflow || "";
      }
    };
  }, [props.open]);
  if (props.open) {
    const buttons = [];
    const animate = false;
    const loading = (_a = props.loading) != null ? _a : false;
    const loadingHidesButtons = (_b = props.loadingHidesButtons) != null ? _b : true;
    const LoadingIndicator = () => {
      if (props.loading !== true) {
        return /* @__PURE__ */ React.createElement(React.Fragment, null);
      }
      let indicator;
      if (props.loadingComponent === null || props.loadingComponent === void 0) {
        indicator = /* @__PURE__ */ React.createElement("progress", {
          className: "react-win-dialog-loading-bar"
        });
      } else if (typeof props.loadingComponent === "function") {
        indicator = props.loadingComponent();
      } else {
        indicator = props.loadingComponent;
      }
      return /* @__PURE__ */ React.createElement("div", {
        className: "react-win-dialog-loading-container"
      }, indicator);
    };
    if (loading === false || loadingHidesButtons === false) {
      if (typeof props.secondaryText === "string") {
        buttons.push(/* @__PURE__ */ React.createElement("button", {
          key: `secondary-button`,
          type: `button`,
          className: `btn react-win-dialog-secondary-command`,
          onClick: props.onSecondaryClick || ignore
        }, props.secondaryText));
      }
      if (typeof props.primaryText === "string") {
        buttons.push(/* @__PURE__ */ React.createElement("button", {
          key: `primary-button`,
          type: `button`,
          className: Classes(`btn react-win-dialog-primary-command primary`, { danger: props.danger }),
          onClick: props.onPrimaryClick || ignore
        }, props.primaryText));
      }
    }
    const body = /* @__PURE__ */ React.createElement("div", {
      id: props.id,
      key: `react-win-dialog-container`,
      className: Classes(`react-win-dialog-container`, props.className),
      style: props.containerStyle
    }, /* @__PURE__ */ React.createElement("div", {
      className: Classes("react-win-dialog", { danger: props.danger || false }),
      style: props.dialogStyle
    }, /* @__PURE__ */ React.createElement("p", {
      className: "react-win-dialog-title"
    }, props.title), /* @__PURE__ */ React.createElement("div", {
      className: "react-win-dialog-content"
    }, props.children, /* @__PURE__ */ React.createElement(LoadingIndicator, null)), /* @__PURE__ */ React.createElement("div", {
      className: "react-win-dialog-footer"
    }, buttons)));
    modal = /* @__PURE__ */ React.createElement("div", null, body);
  }
  const modalContainer = /* @__PURE__ */ React.createElement("div", {
    className: Classes(`react-win-dialog-overlay`, { open: props.open }),
    style: props.overlayStyle
  }, modal);
  return ReactDOM.createPortal(modalContainer, document.body);
}
//# sourceMappingURL=index.js.map