@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Dialog/Dialog.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
-import React, { isValidElement, useEffect, useState } from 'react';
+import React, { isValidElement, cloneElement, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
@@ -14,35 +14,34 @@ import Heading from '../Heading';
 import Text from '../Text';
 import Translate, { isLikeText } from '../Translate';
 import { safeInvoke } from '../utils';
-
 const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/isValidElement(value);
+
 /**
  * `Dialog` is a modal window that asks users to make a decision or enter additional information.
  * @since 0.0.68
  */
-
-
-const Dialog = ({
-  baseClassName,
-  className,
-  children,
-  actions,
-  isOpen,
-  banner,
-  image,
-  title,
-  subtitle,
-  cancelTitle,
-  cancelButton,
-  buttons,
-  form,
-  size,
-  closable,
-  onClose,
-  closingConfirmation,
-  canClose,
-  ...props
-}) => {
+const Dialog = _ref => {
+  let {
+    baseClassName,
+    className,
+    children,
+    actions,
+    isOpen,
+    banner,
+    image,
+    title,
+    subtitle,
+    cancelTitle,
+    cancelButton,
+    buttons,
+    form,
+    size,
+    closable,
+    onClose,
+    closingConfirmation,
+    canClose,
+    ...props
+  } = _ref;
   const [isVisible, setIsVisible] = useState(isOpen);
   const {
     onCloseWithConfirmation,
@@ -57,16 +56,13 @@ const Dialog = ({
   useEffect(() => {
     setIsVisible(isOpen);
   }, [isOpen]);
-
   const renderImage = (image, block) => {
     const classPrefix = `${baseClassName}__${block}`;
-
     if ( /*#__PURE__*/isValidElement(image)) {
       return /*#__PURE__*/React.createElement("div", {
         className: classPrefix
       }, image);
     }
-
     if (typeof image === 'string') {
       return /*#__PURE__*/React.createElement("div", {
         className: classPrefix
@@ -75,23 +71,20 @@ const Dialog = ({
         src: image
       }));
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: classPrefix
     }, /*#__PURE__*/React.createElement("img", _extends({
       className: `${classPrefix}-inner`
     }, image)));
   };
-
-  const getCancelButtonProps = () => {
+  const getCancelButtonProps = function () {
+    let formProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : form;
     if (!closable) {
       return false;
     }
-
-    if (cancelButton === false || form && form.cancelButton === false) {
+    if (cancelButton === false || formProps && formProps.cancelButton === false) {
       return false;
     }
-
     let props = {
       onClick: onCloseWithConfirmation,
       children: cancelTitle || /*#__PURE__*/React.createElement(Translate, {
@@ -99,54 +92,52 @@ const Dialog = ({
         fallback: "Cancel"
       })
     };
-
-    if (form && isProps(form.cancelButton)) {
-      props = { ...props,
-        ...form.cancelButton
+    if (formProps && isProps(formProps.cancelButton)) {
+      props = {
+        ...props,
+        ...formProps.cancelButton
       };
     }
-
     if (isProps(cancelButton)) {
-      props = { ...props,
+      props = {
+        ...props,
         ...cancelButton
       };
     }
-
     return props;
   };
-
   const renderButtons = () => {
     if (form) {
       return null;
     }
-
     let cancel;
     const cancelButtonProps = getCancelButtonProps();
-
     if (cancelButtonProps) {
       cancel = /*#__PURE__*/React.createElement(Button, cancelButtonProps);
     }
-
     if (buttons || cancel) {
       return /*#__PURE__*/React.createElement("div", {
         className: `${baseClassName}__buttons`
       }, buttons, cancel);
     }
-
     return null;
   };
-
   let childrenElement;
-
   if (form) {
-    form.cancelButton = getCancelButtonProps();
-    form.footerClassName = classNames(form.footerClassName, `${baseClassName}__form-footer`);
-    form.applyButton = form.applyButton || false;
-    childrenElement = /*#__PURE__*/React.createElement(Form, form, children);
+    if ( /*#__PURE__*/isValidElement(form)) {
+      childrenElement = /*#__PURE__*/cloneElement(form, {
+        cancelButton: getCancelButtonProps(form.props),
+        footerClassName: classNames(form.props.footerClassName, `${baseClassName}__form-footer`)
+      });
+    } else if (typeof form === 'object') {
+      form.cancelButton = getCancelButtonProps();
+      form.footerClassName = classNames(form.footerClassName, `${baseClassName}__form-footer`);
+      form.applyButton = form.applyButton || false;
+      childrenElement = /*#__PURE__*/React.createElement(Form, form, children);
+    }
   } else {
     childrenElement = children;
   }
-
   return /*#__PURE__*/React.createElement(Overlay, _extends({
     className: classNames(baseClassName, className),
     isOpen: isVisible,
@@ -184,26 +175,22 @@ const Dialog = ({
     className: `${baseClassName}__content`
   }, image && renderImage(image, 'image'), childrenElement, renderButtons()), closingConfirmationDialog);
 };
-
 Dialog.propTypes = {
   /**
    * Toggles visibility.
    * @since 0.0.68
    */
   isOpen: PropTypes.bool,
-
   /**
    * Banner. Renders in front of content as wide as dialog.
    * @since 0.0.68
    */
   banner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Block with an image, placed at the side of the component
    * @since 3.25.0
    */
   sideBanner: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Additional properties for the sideBanner
    * @since 3.25.0
@@ -213,103 +200,86 @@ Dialog.propTypes = {
      * Values for css background property
      */
     background: PropTypes.string,
-
     /**
      * One of: center, flex-start, flex-end
      */
     align: PropTypes.oneOf(['center', 'flex-start', 'flex-end'])
   }),
-
   /**
    * Image. Renders into content.
    * @since 0.0.68
    */
   image: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
-
   /**
    * Title
    * @since 0.0.68
    */
   title: PropTypes.node,
-
   /**
    * The subtitle of the `Dialog`.
    * @since 4.0.0
    */
   subtitle: PropTypes.node,
-
   /**
    * Title of "cancel" button
    * @since 0.0.68
    * @deprecated Use `cancelButton` instead.
    */
   cancelTitle: PropTypes.node,
-
   /**
    * Cancel button visibility or custom configuration. It accepts all props of the `Button` component.
    * @since 3.13.0
    */
   cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-
   /**
    * Buttons except "cancel" button
    * @since 0.0.68
    */
   buttons: PropTypes.node,
-
   /**
    * Actions which will be shown in Dialog header
    * @since 1.2.0
    */
   actions: PropTypes.node,
-
   /**
    * Wraps children into [Form](#!/Form) if not empty.
    * @since 0.0.68
    */
-  form: PropTypes.object,
-
+  form: PropTypes.oneOfType([PropTypes.object, PropTypes.element]),
   /**
    * Dialog width
    * @since 0.0.68
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * If the value is false, the dialog cannot be closed and the Close button is hidden.
    * @since 1.2.0
    */
   closable: PropTypes.bool,
-
   /**
    * Disable close dialog button
    * @since 4.0.0
    */
   canClose: PropTypes.bool,
-
   /**
    * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
    * @since 0.0.68
    */
   onClose: PropTypes.func,
-
   /**
    * Whether show or not a confirmation dialog on close.
    * @since 3.21.0
    */
   closingConfirmation: PropTypes.bool,
-
   /**
    * Content of the `DialogWindow`.
    * @since 0.0.68
    */
   children: PropTypes.node,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */

package/esm/components/Dialog/Dialog.stories.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 import React, { useState } from 'react';
 import Button from '../Button';
 import Dialog from './Dialog';
@@ -21,7 +22,8 @@ Basic.args = {
   subtitle: 'Subtitle'
 };
 export const WithSideBanner = args => /*#__PURE__*/React.createElement(Basic, args);
-WithSideBanner.args = { ...Basic.args,
+WithSideBanner.args = {
+  ...Basic.args,
   size: 'xs',
   sideBanner: /*#__PURE__*/React.createElement("img", {
     src: image

package/esm/components/Dialog/index.js

@@ -1,2 +1,3 @@
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
 export { default } from './Dialog';

package/esm/components/DistractionFreeModeContext/DistractionFreeModeContext.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import { createContext } from 'react';
 const DistractionFreeModeContext = /*#__PURE__*/createContext(undefined);
 DistractionFreeModeContext.displayName = 'DistractionFreeModeContext';

package/esm/components/DistractionFreeModeContext/index.js

@@ -1,2 +1,3 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 export { default } from './DistractionFreeModeContext';