@plesk/ui-library 3.31.0 → 3.31.2

package/cjs/components/Drawer/Drawer.js

@@ -1,107 +1,80 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _constants = require("../../constants");
-
 var _Overlay = _interopRequireDefault(require("../Overlay"));
-
 var _ClosingConfirmation = require("../ClosingConfirmation");
-
 var _Header = _interopRequireDefault(require("./Header"));
-
 var _ScrollDirection = _interopRequireDefault(require("./ScrollDirection"));
-
 var _Form = _interopRequireDefault(require("../Form"));
-
 var _Heading = _interopRequireDefault(require("../Heading"));
-
 var _Translate = require("../Translate");
-
 var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));
-
 var _DrawerProgress = _interopRequireDefault(require("./DrawerProgress"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 const propTypes = {
   /**
    * Toggles visibility.
    * @since 0.0.65
    */
   isOpen: _propTypes.default.bool,
-
   /**
    * The title of the `Drawer`.
    * @since 0.0.65
    */
   title: _propTypes.default.node.isRequired,
-
   /**
    * The subtitle of the `Drawer`.
    * @since 0.0.65
    */
   subtitle: _propTypes.default.node,
-
   /**
    * Show the minimize button and the inactive close button.
    * @since 1.4.1
    */
   hideButton: _propTypes.default.bool,
-
   /**
    * Show back button in the header. If true the close button is not show.
    * @deprecated Not recommended to use. Use default close button instead.
    * @since 0.0.65
    */
   backButton: _propTypes.default.bool,
-
   /**
    * A slot for `Tabs` component.
    * @since 3.26.0
    */
   tabs: _propTypes.default.node,
-
   /**
    * Overlay placement.
    * @since 0.0.65
    */
   placement: _propTypes.default.oneOf(['left', 'right']),
-
   /**
    * Overlay size.
    * @since 0.0.65
    */
   size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * onClose handler.
    * @since 0.0.65
    */
   onClose: _propTypes.default.func,
-
   /**
    * Whether show or not a confirmation dialog on close.
    * @since 3.21.0
    */
   closingConfirmation: _propTypes.default.bool,
-
   /**
    * Wraps children into [Form](#!/Form) if not empty.<br>
    * **Note:** in case of *element* you should take care of providing additional form props from [Drawer](#!/Drawer) through your custom component. See example below for more details
@@ -109,13 +82,11 @@ const propTypes = {
    * @since 0.0.66
    */
   form: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.element]),
-
   /**
    * Block with an image, placed at the side of the component
    * @since 3.25.0
    */
   sideBanner: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]),
-
   /**
    * Additional properties for the sideBanner
    * @since 3.25.0
@@ -125,19 +96,16 @@ const propTypes = {
      * Values for css background property
      */
     background: _propTypes.default.string,
-
     /**
      * One of: center, flex-start, flex-end
      */
     align: _propTypes.default.oneOf(['center', 'flex-start', 'flex-end'])
   }),
-
   /**
    * Content of the `Drawer`.
    * @since 0.0.65
    */
   children: _propTypes.default.node,
-
   /**
    * Adds [Progress](#!/Progress) into footer.
    * @since 1.11.0
@@ -147,7 +115,6 @@ const propTypes = {
      * A title for the progress.
      */
     title: _propTypes.default.string,
-
     /**
      * An array of [ProgressStep](#!/ProgressStep) props.
      */
@@ -157,34 +124,28 @@ const propTypes = {
       progress: _propTypes.default.number,
       icon: _propTypes.default.string
     })).isRequired,
-
     /**
      * An option that controls drawer closing ability.
      */
     cancelable: _propTypes.default.bool,
-
     /**
      * On overall status event handler.
      * @since 3.8.0
      */
     onStatusChange: _propTypes.default.func,
-
     /**
      * @ignore
      */
     onClose: _propTypes.default.func,
-
     /**
      * @ignore
      */
     onClosableChange: _propTypes.default.func
   }),
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * @ignore
    */
@@ -208,27 +169,28 @@ const defaultProps = {
   className: null,
   baseClassName: `${_constants.CLS_PREFIX}drawer`
 };
+
 /**
  * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
  * The component is similar to `Dialog` but it is intended to work with more complex forms or lists.
  * @since 0.0.65
  */
-
-const Drawer = ({
-  baseClassName,
-  className,
-  children,
-  title,
-  subtitle,
-  backButton,
-  hideButton,
-  tabs,
-  onClose,
-  form,
-  progress,
-  closingConfirmation,
-  ...props
-}) => {
+const Drawer = _ref => {
+  let {
+    baseClassName,
+    className,
+    children,
+    title,
+    subtitle,
+    backButton,
+    hideButton,
+    tabs,
+    onClose,
+    form,
+    progress,
+    closingConfirmation,
+    ...props
+  } = _ref;
   const scrollableRef = (0, _react.useRef)();
   const [isClosable, setIsClosable] = (0, _react.useState)(true);
   const {
@@ -238,16 +200,15 @@ const Drawer = ({
     onClose,
     closingConfirmation
   });
-
   const takeApart = render => {
     if (progress) {
       progress.onClose = onCloseWithConfirmation;
       progress.onClosableChange = setIsClosable;
-
-      const drawerProgressRender = ({
-        content,
-        footer
-      }) => {
+      const drawerProgressRender = _ref2 => {
+        let {
+          content,
+          footer
+        } = _ref2;
         return render({
           content: /*#__PURE__*/_react.default.createElement("div", {
             className: `${baseClassName}__form`
@@ -255,12 +216,10 @@ const Drawer = ({
           footer
         });
       };
-
       return /*#__PURE__*/_react.default.createElement(_DrawerProgress.default, (0, _extends2.default)({
         render: drawerProgressRender
       }, progress));
     }
-
     if (form) {
       if ( /*#__PURE__*/(0, _react.isValidElement)(form)) {
         return /*#__PURE__*/(0, _react.cloneElement)(form, {
@@ -269,81 +228,87 @@ const Drawer = ({
             onClick: onCloseWithConfirmation,
             ...form.props.cancelButton
           },
-          render: ({
-            renderForm,
-            renderActionButtons
-          }) => render({
-            content: renderForm(),
-            footer: renderActionButtons()
-          })
+          render: _ref3 => {
+            let {
+              renderForm,
+              renderActionButtons
+            } = _ref3;
+            return render({
+              content: renderForm(),
+              footer: renderActionButtons()
+            });
+          }
         });
       }
-
       if (typeof form === 'object') {
         form.className = (0, _classnames.default)(`${baseClassName}__form`, form.className);
-
         if (form.cancelButton !== false) {
           form.cancelButton = {
             onClick: onCloseWithConfirmation,
             ...form.cancelButton
           };
         }
-
         return /*#__PURE__*/_react.default.createElement(_Form.default, (0, _extends2.default)({}, form, {
-          render: ({
-            renderForm,
-            renderActionButtons
-          }) => render({
-            content: renderForm(),
-            footer: renderActionButtons()
-          })
+          render: _ref4 => {
+            let {
+              renderForm,
+              renderActionButtons
+            } = _ref4;
+            return render({
+              content: renderForm(),
+              footer: renderActionButtons()
+            });
+          }
         }), children);
       }
     }
-
     return render({
       content: /*#__PURE__*/_react.default.createElement("div", {
         className: `${baseClassName}__inner-body`
       }, children)
     });
   };
-
   return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({
     className: (0, _classnames.default)(baseClassName, {
       [`${baseClassName}--form`]: form
     }, className),
     onClose: onCloseWithConfirmation,
     canCloseOnBackdropClick: true
-  }, props), takeApart(({
-    content,
-    footer
-  }) => /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.default, {
-    backButton: backButton,
-    hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
-    onClose: onCloseWithConfirmation,
-    tabs: tabs
-  }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
-    level: "2",
-    className: `${baseClassName}__title`
-  }, title) : /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__title`
-  }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__subtitle`
-  }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, ({
-    handleScroll
-  }) => /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__body`,
-    onScroll: handleScroll,
-    ref: scrollableRef
-  }, /*#__PURE__*/_react.default.createElement(_ScrollableElementFormContext.default.Provider, {
-    value: scrollableRef.current
-  }, content))), footer && /*#__PURE__*/_react.default.createElement("footer", {
-    className: `${baseClassName}__footer`
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${baseClassName}__footer-inner`
-  }, footer)))), closingConfirmationDialog);
+  }, props), takeApart(_ref5 => {
+    let {
+      content,
+      footer
+    } = _ref5;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.default, {
+      backButton: backButton,
+      hideButton: typeof hideButton === 'boolean' ? hideButton : Boolean(progress && !isClosable),
+      onClose: onCloseWithConfirmation,
+      tabs: tabs
+    }, (0, _Translate.isLikeText)(title) ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
+      level: "2",
+      className: `${baseClassName}__title`
+    }, title) : /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__title`
+    }, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__subtitle`
+    }, subtitle)), /*#__PURE__*/_react.default.createElement(_ScrollDirection.default, null, _ref6 => {
+      let {
+        handleScroll
+      } = _ref6;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: `${baseClassName}__body`,
+        onScroll: handleScroll,
+        ref: scrollableRef
+      }, /*#__PURE__*/_react.default.createElement(_ScrollableElementFormContext.default.Provider, {
+        value: scrollableRef.current
+      }, content));
+    }), footer && /*#__PURE__*/_react.default.createElement("footer", {
+      className: `${baseClassName}__footer`
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: `${baseClassName}__footer-inner`
+    }, footer)));
+  }), closingConfirmationDialog);
 };
-
 Drawer.propTypes = propTypes;
 Drawer.defaultProps = defaultProps;
 var _default = Drawer;

package/cjs/components/Drawer/Drawer.stories.js

@@ -1,27 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WithSideBanner = exports.WithForm = exports.WithClosingConfirmation = exports.Basic = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Drawer = _interopRequireDefault(require("./Drawer"));
-
 var _placeholder_400x = _interopRequireDefault(require("../../docs/public/placeholders/placeholder_400x400.svg"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+
 const Basic = args => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -33,25 +25,22 @@ const Basic = args => {
     onClose: () => setIsOpen(false)
   })));
 };
-
 exports.Basic = Basic;
 Basic.args = {
   children: 'Drawer content.',
   title: 'Title',
   subtitle: 'Subtitle'
 };
-
 const WithForm = args => /*#__PURE__*/_react.default.createElement(Basic, args);
-
 exports.WithForm = WithForm;
-WithForm.args = { ...Basic.args,
+WithForm.args = {
+  ...Basic.args,
   form: {}
 };
-
 const WithSideBanner = args => /*#__PURE__*/_react.default.createElement(Basic, args);
-
 exports.WithSideBanner = WithSideBanner;
-WithSideBanner.args = { ...Basic.args,
+WithSideBanner.args = {
+  ...Basic.args,
   size: 'xs',
   sideBanner: /*#__PURE__*/_react.default.createElement("img", {
     src: _placeholder_400x.default
@@ -60,10 +49,9 @@ WithSideBanner.args = { ...Basic.args,
     background: 'skyblue'
   }
 };
-
 const WithClosingConfirmation = args => /*#__PURE__*/_react.default.createElement(Basic, args);
-
 exports.WithClosingConfirmation = WithClosingConfirmation;
-WithClosingConfirmation.args = { ...Basic.args,
+WithClosingConfirmation.args = {
+  ...Basic.args,
   closingConfirmation: true
 };

package/cjs/components/Drawer/DrawerProgress.js

@@ -1,35 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Translate = _interopRequireDefault(require("../Translate"));
-
 var _Progress = _interopRequireDefault(require("../Progress"));
-
 var _ProgressStep = _interopRequireWildcard(require("../ProgressStep"));
-
 var _constants = require("../../constants");
-
 var _utils = require("../utils");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 const renderAdditionalButtons = buttons => {
   const buttonProcessing = button => {
     if ( /*#__PURE__*/(0, _react.isValidElement)(button) && button.type === _Button.default) {
@@ -37,16 +25,13 @@ const renderAdditionalButtons = buttons => {
         size: 'lg'
       });
     }
-
     return button;
   };
-
   return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
 };
-
 class DrawerProgress extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     (0, _defineProperty2.default)(this, "state", {
       status: null
     });
@@ -66,7 +51,6 @@ class DrawerProgress extends _react.Component {
         status
       });
       (0, _utils.safeInvoke)(onClosableChange, cancelable || isFinished || isFailed);
-
       if (isFinished) {
         (0, _utils.safeInvoke)(onFinish);
       } else if (isFailed) {
@@ -80,11 +64,9 @@ class DrawerProgress extends _react.Component {
         cancelable
       } = this.props;
       window.clearTimeout(this.closeTimeout);
-
       if (cancelable) {
         (0, _utils.safeInvoke)(onCancel);
       }
-
       (0, _utils.safeInvoke)(onClose);
     });
     (0, _defineProperty2.default)(this, "handleCancel", () => {
@@ -94,15 +76,12 @@ class DrawerProgress extends _react.Component {
         cancelable
       } = this.props;
       window.clearTimeout(this.closeTimeout);
-
       if (cancelable) {
         (0, _utils.safeInvoke)(onCancel);
       }
-
       (0, _utils.safeInvoke)(onClose);
     });
   }
-
   componentDidUpdate(_prevProps, prevState) {
     const {
       autoCloseTimeout,
@@ -111,24 +90,19 @@ class DrawerProgress extends _react.Component {
     const {
       status
     } = this.state;
-
     if (prevState.status !== _ProgressStep.STATUS_DONE && status === _ProgressStep.STATUS_DONE) {
       window.clearTimeout(this.closeTimeout);
-
       if (autoCloseTimeout !== undefined) {
         this.closeTimeout = window.setTimeout(this.handleClose, autoCloseTimeout);
       }
     }
-
     if (prevState.status === _ProgressStep.STATUS_NOT_STARTED && status !== _ProgressStep.STATUS_NOT_STARTED) {
       (0, _utils.safeInvoke)(onStart);
     }
   }
-
   componentWillUnmount() {
     window.clearTimeout(this.closeTimeout);
   }
-
   render() {
     const {
       baseClassName,
@@ -145,7 +119,6 @@ class DrawerProgress extends _react.Component {
     const isFailed = status === _ProgressStep.STATUS_ERROR;
     const canCancel = cancelable && !(isFinished || isFailed);
     const hasFooter = !!(buttons || canCancel);
-
     const content = /*#__PURE__*/_react.default.createElement(_react.Fragment, null, title && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__title`
     }, title), /*#__PURE__*/_react.default.createElement(_Progress.default, {
@@ -154,7 +127,6 @@ class DrawerProgress extends _react.Component {
     }, steps.map((step, index) => /*#__PURE__*/_react.default.createElement(_ProgressStep.default, (0, _extends2.default)({
       key: index.toString()
     }, step)))));
-
     const footer = hasFooter ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__footer`
     }, renderAdditionalButtons(buttons), canCancel && /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -169,9 +141,7 @@ class DrawerProgress extends _react.Component {
       footer
     }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, content, footer);
   }
-
 }
-
 (0, _defineProperty2.default)(DrawerProgress, "defaultProps", {
   baseClassName: `${_constants.CLS_PREFIX}drawer-progress`,
   autoCloseTimeout: 0,