@vnmfify/core/dialog/dialog.js

```shell npm i @vnmfify/core -S ```

import _isEmpty from "lodash/isEmpty";
var _excluded = ["id", "className", "defaultOpen", "open", "children", "backdrop", "onClose", "onConfirm", "onCancel"],
    _excluded2 = ["selector", "title", "message", "messageAlign", "confirm", "cancel"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { useUncontrolled } from "@vnmfify/hooks";
import classNames from "classnames";
import * as React from "react";
import { Children, cloneElement, isValidElement, useCallback, useContext, useMemo } from "react";
import Backdrop from "../backdrop";
import { createButton } from "../button";
import ButtonContext from "../button/button.context";
import Popup, { usePopupBackdrop } from "../popup";
import { prefixClassname } from "../styles";
import { getElementSelector, matchSelector, prependPageSelector, usePrependPageSelector } from "../utils/dom/element";
import { useObject, useToRef } from "../utils/state";
import { isElementOf } from "../utils/validate";
import DialogActions from "./dialog-actions";
import DialogContent from "./dialog-content";
import DialogHeader from "./dialog-header";
import { useDialogCancel, useDialogOpen } from "./dialog.imperative";

function useDialogChildren(nodes) {
  return useMemo(() => {
    var __children__ = {
      header: undefined,
      content: undefined,
      actions: undefined
    };

    if (nodes === undefined) {
      return __children__;
    }

    Children.forEach(nodes, node => {
      if (! /*#__PURE__*/isValidElement(node)) {
        return;
      }

      var {
        header,
        content,
        actions
      } = __children__;

      if (header !== undefined && content !== undefined && actions !== undefined) {
        return;
      }

      var element = node;

      if (isElementOf(element, Backdrop)) {
        __children__.backdrop = element;
      } else if (element.type === DialogHeader) {
        __children__.header = element;
      } else if (element.type === DialogContent) {
        __children__.content = element;
      } else if (element.type === DialogActions) {
        __children__.actions = element;
      }
    });
    return __children__;
  }, [nodes]);
}

function renderDialogHeader(header, props) {
  if (! /*#__PURE__*/isValidElement(header)) {
    return header;
  }

  return /*#__PURE__*/cloneElement(header, props);
}

function renderDialogContent(content, props) {
  if (! /*#__PURE__*/isValidElement(content)) {
    return content;
  }

  return /*#__PURE__*/cloneElement(content, props);
}

function Dialog(props) {
  var _useObject = useObject(props),
      {
    object: {
      id,
      className,
      defaultOpen,
      open: openProp,
      children,
      backdrop: backdropOptions,
      onClose,
      onConfirm,
      onCancel
    },
    setObject
  } = _useObject,
      restProps = _objectWithoutProperties(_useObject.object, _excluded);

  var rootSelectorRef = useToRef(usePrependPageSelector(getElementSelector(id)));
  var {
    value: open = false,
    setValue: setOpen
  } = useUncontrolled({
    defaultValue: defaultOpen,
    value: openProp
  });
  var onCancelRef = useToRef(onCancel);
  var {
    onClick
  } = useContext(ButtonContext);
  var {
    backdrop: backdropElement,
    header,
    content,
    actions
  } = useDialogChildren(children);
  var backdrop = usePopupBackdrop(backdropElement, backdropOptions);
  var hasHeader = header !== undefined;
  var hasContent = content !== undefined;

  var handleClick = (event, btnProps) => {
    onClick === null || onClick === void 0 ? void 0 : onClick(event, btnProps);
    var {
      className
    } = btnProps;

    if (className !== null && className !== void 0 && className.includes(prefixClassname("dialog__confirm"))) {
      onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
    }

    if (className !== null && className !== void 0 && className.includes(prefixClassname("dialog__cancel"))) {
      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
    }

    setOpen(false);
  };

  var handleClose = useCallback(opened => {
    onClose === null || onClose === void 0 ? void 0 : onClose(opened);
    setOpen(false);
  }, [onClose, setOpen]);
  useDialogOpen(_ref => {
    var {
      selector,
      title,
      message,
      messageAlign,
      confirm,
      cancel
    } = _ref,
        restOptions = _objectWithoutProperties(_ref, _excluded2);

    if (matchSelector(prependPageSelector(selector), rootSelectorRef.current)) {
      var _children = [];
      var _actions = [];

      if (title) {
        _children.push( /*#__PURE__*/React.createElement(DialogHeader, {
          key: 0,
          children: title
        }));
      }

      if (message) {
        _children.push( /*#__PURE__*/React.createElement(DialogContent, {
          key: 1,
          align: messageAlign,
          children: message
        }));
      }

      if (cancel) {
        _actions.push(createButton(cancel, {
          key: 1
        }));
      }

      if (confirm) {
        _actions.push(createButton(confirm, {
          key: 0
        }));
      }

      if (!_isEmpty(_actions)) {
        _children.push( /*#__PURE__*/React.createElement(DialogActions, {
          key: 2,
          children: _actions
        }));
      }

      setObject(_objectSpread({
        children: _children
      }, restOptions));
      setOpen(true);
    }
  });
  useDialogCancel(selector => {
    if (matchSelector(prependPageSelector(selector), rootSelectorRef.current)) {
      var _onCancelRef$current;

      (_onCancelRef$current = onCancelRef.current) === null || _onCancelRef$current === void 0 ? void 0 : _onCancelRef$current.call(onCancelRef);
      setOpen(false);
    }
  });
  return /*#__PURE__*/React.createElement(ButtonContext.Provider, {
    value: {
      onClick: handleClick
    }
  }, /*#__PURE__*/React.createElement(Popup, _objectSpread({
    id: id,
    open: open,
    className: classNames(prefixClassname("dialog"), className),
    transaction: prefixClassname("dialog-bounce"),
    transactionTimeout: 100,
    onClose: handleClose
  }, restProps), backdrop, renderDialogHeader(header, {
    isolated: hasHeader && !hasContent
  }), renderDialogContent(content, {
    isolated: !hasHeader && hasContent
  }), actions));
}

export default Dialog;
//# sourceMappingURL=dialog.js.map