@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Card/CardButton.js

@@ -1,18 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
 import Icon from '../Icon';
-
-const CardButton = ({
-  icon,
-  ...props
-}) => /*#__PURE__*/React.createElement(Button, _extends({
-  icon: Icon.create(icon)
-}, props));
-
+const CardButton = _ref => {
+  let {
+    icon,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    icon: Icon.create(icon)
+  }, props));
+};
 CardButton.propTypes = {
   /**
    * @ignore

package/esm/components/Card/PreviewPanel.js

@@ -2,17 +2,18 @@ import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import React, { useState, useEffect } from 'react';
 import ContentLoader from '../ContentLoader';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import { loadImage } from './helpers';
 import noImage from './images/no-image.svg';
-
-const determineSource = ({
-  image,
-  background
-}) => {
+const determineSource = _ref => {
+  let {
+    image,
+    background
+  } = _ref;
   if (image) {
     return {
       url: image,
@@ -24,29 +25,28 @@ const determineSource = ({
       type: 'background'
     };
   }
-
   return {
     url: noImage,
     type: 'noImage'
   };
 };
+
 /**
  * `PreviewPanel` component is used for displaying website preview.
  * @since 0.3.0
  */
-
-
-const PreviewPanel = ({
-  background,
-  image,
-  padding = 0,
-  alt,
-  children,
-  className,
-  baseClassName = `${CLS_PREFIX}preview-panel`,
-  html,
-  ...props
-}) => {
+const PreviewPanel = _ref2 => {
+  let {
+    background,
+    image,
+    padding = 0,
+    alt,
+    children,
+    className,
+    baseClassName = `${CLS_PREFIX}preview-panel`,
+    html,
+    ...props
+  } = _ref2;
   const source = determineSource({
     image,
     background
@@ -54,16 +54,13 @@ const PreviewPanel = ({
   const [status, setStatus] = useState(source.type === 'noImage' ? 'success' : 'loading');
   useEffect(() => {
     let applyStatus = setStatus;
-
     const cleanup = () => {
       applyStatus = () => {};
     };
-
     if (source.type === 'noImage') {
       applyStatus('success');
       return cleanup;
     }
-
     setStatus('loading');
     loadImage(source.url, {
       onSuccess: () => applyStatus('success'),
@@ -71,82 +68,65 @@ const PreviewPanel = ({
     });
     return cleanup;
   }, [source.type, source.url]);
-
   const renderLoader = () => {
     if (status === 'loading') {
       return /*#__PURE__*/React.createElement("div", {
         className: `${baseClassName}__loader`
       }, /*#__PURE__*/React.createElement(ContentLoader, null));
     }
-
     return null;
   };
-
   const renderBackground = () => {
     if (source.type !== 'background') {
       return null;
     }
-
     let src;
-
     switch (status) {
       case 'success':
         src = source.url;
         break;
-
       case 'failure':
         src = noImage;
         break;
-
       default:
         return null;
     }
-
     return {
-      style: { ...props.style,
+      style: {
+        ...props.style,
         backgroundImage: `url("${src}")`
       }
     };
   };
-
   const renderImage = () => {
     if (source.type !== 'image' && source.type !== 'noImage') {
       return null;
     }
-
     let src;
-
     switch (status) {
       case 'success':
         src = source.url;
         break;
-
       case 'failure':
         src = noImage;
         break;
     }
-
     const imageProps = {};
-
     if (status !== 'loading') {
       imageProps.src = src;
-
       if (alt) {
         imageProps.alt = alt;
       }
     }
-
     if (padding) {
       imageProps.style = {
         padding: `${padding instanceof Array ? padding.join('px ') : padding}px`
       };
     }
-
     return /*#__PURE__*/React.createElement("img", _extends({
       className: `${baseClassName}__image`
     }, imageProps));
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(baseClassName, {
       [`${baseClassName}--background`]: source.type === 'background'
@@ -159,5 +139,4 @@ const PreviewPanel = ({
     className: `${baseClassName}__content-inner`
   }, children)));
 };
-
 export default PreviewPanel;

package/esm/components/Card/helpers.js

@@ -1,12 +1,13 @@
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
-const loadImage = (src, {
-  onSuccess,
-  onFailure
-}) => {
+
+const loadImage = (src, _ref) => {
+  let {
+    onSuccess,
+    onFailure
+  } = _ref;
   const image = new Image();
   image.onload = onSuccess;
   image.onerror = onFailure;
   image.src = src;
 };
-
 export { loadImage };

package/esm/components/Card/index.js

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

package/esm/components/CardList/CardList.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import React, { Component, cloneElement, Children } from 'react';
 import { safeInvoke } from '../utils';
 import PropTypes from 'prop-types';
@@ -20,17 +21,16 @@ export const VIEW_TILE = 'tile';
 export const VIEW_RESPONSIVE = 'responsive';
 export const VIEW_EXTENDED = 'extended';
 export const VIEW_ROW = 'row';
+
 /**
  * @deprecated `CardList` was used for displaying list of objects presented in various data formats
  * including images and other interface components.
  * Now it is deprecated and [List should be used](#!/List) instead.
  * @since 0.0.54
  */
-
 class CardList extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       page: this.props.defaultPage,
       totalItems: this.props.totalItems || this.props.items.length,
@@ -38,25 +38,21 @@ class CardList extends Component {
       items: this.props.items,
       view: this.props.view
     });
-
     _defineProperty(this, "selectAll", () => {
       const {
         items
       } = this.state;
       this.select(items.map(this.getItemKey));
     });
-
     _defineProperty(this, "selectNone", () => {
       this.select([]);
     });
-
     _defineProperty(this, "getItemKey", item => {
       const {
         itemKey
       } = this.props;
       return item[itemKey];
     });
-
     _defineProperty(this, "renderItem", item => {
       const {
         baseClassName,
@@ -73,28 +69,24 @@ class CardList extends Component {
         selection: onSelectionChange ? this.itemSelection(item) : null
       });
     });
-
     _defineProperty(this, "previousView", null);
-
-    _defineProperty(this, "handleResize", ({
-      bounds: {
-        width
-      }
-    }) => {
+    _defineProperty(this, "handleResize", _ref => {
+      let {
+        bounds: {
+          width
+        }
+      } = _ref;
       const view = width > 584 ? this.previousView : VIEW_RESPONSIVE;
-
       if (view === VIEW_RESPONSIVE && !this.previousView) {
         this.previousView = this.state.view;
       } else if (view !== VIEW_RESPONSIVE) {
         this.previousView = null;
       }
-
       if (view && view !== this.state.view) {
         this.changeView(view);
       }
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       items,
@@ -105,29 +97,23 @@ class CardList extends Component {
       prevTotalItems
     } = state;
     const nextState = {};
-
     if (items !== prevItems) {
       nextState.items = items;
     }
-
     if (totalItems !== prevTotalItems) {
       nextState.totalItems = totalItems || items.length;
     }
-
     nextState.prevItems = items;
     nextState.prevTotalItems = totalItems || items.length;
     return nextState;
   }
-
   componentDidMount() {
     this.fetchItems();
   }
-
   componentDidUpdate(prevProps) {
     const {
       view
     } = this.props;
-
     if (view !== prevProps.view && this.state.view !== VIEW_RESPONSIVE) {
       this.fetchItems({
         page: 1,
@@ -135,7 +121,6 @@ class CardList extends Component {
       });
     }
   }
-
   totalPages() {
     const {
       totalItems,
@@ -143,11 +128,11 @@ class CardList extends Component {
     } = this.state;
     return Math.ceil(totalItems / pageSize);
   }
-
-  fetchItems({
-    page = this.state.page,
-    view = this.state.view
-  } = {}) {
+  fetchItems() {
+    let {
+      page = this.state.page,
+      view = this.state.view
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
       onItemsFetch
     } = this.props;
@@ -162,7 +147,6 @@ class CardList extends Component {
       pageSize
     });
   }
-
   loadMore() {
     const {
       onItemsFetch
@@ -180,14 +164,12 @@ class CardList extends Component {
       pageSize: 10
     });
   }
-
   isTile() {
     const {
       view
     } = this.state;
     return view === VIEW_TILE || view === VIEW_RESPONSIVE;
   }
-
   renderPagination() {
     const {
       baseClassName
@@ -197,11 +179,9 @@ class CardList extends Component {
       view
     } = this.state;
     const totalPages = this.totalPages();
-
     if (totalPages < 2) {
       return null;
     }
-
     if (view === VIEW_RESPONSIVE && page < totalPages) {
       return /*#__PURE__*/React.createElement("div", {
         className: `${baseClassName}__pagination`
@@ -212,7 +192,6 @@ class CardList extends Component {
         fallback: 'Load more'
       })));
     }
-
     return /*#__PURE__*/React.createElement(Pagination, {
       className: `${baseClassName}__pagination`,
       total: totalPages,
@@ -222,7 +201,6 @@ class CardList extends Component {
       })
     });
   }
-
   changeView(view) {
     const {
       onViewChange
@@ -233,14 +211,12 @@ class CardList extends Component {
     });
     safeInvoke(onViewChange, view);
   }
-
   select(keys) {
     const {
       onSelectionChange
     } = this.props;
     onSelectionChange(keys);
   }
-
   itemSelection(item) {
     const key = this.getItemKey(item);
     const {
@@ -248,25 +224,23 @@ class CardList extends Component {
     } = this.props;
     return {
       isSelected: selection.indexOf(key) > -1,
-      onSelectionChange: ({
-        isSelected
-      }) => {
+      onSelectionChange: _ref2 => {
+        let {
+          isSelected
+        } = _ref2;
         const keys = isSelected ? [...selection, key] : selection.filter(k => k !== key);
         this.select(keys);
       }
     };
   }
-
   renderLoader() {
     const {
       baseClassName,
       loading
     } = this.props;
-
     if (!loading) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__content-blocker`
     }, /*#__PURE__*/React.createElement("div", {
@@ -275,7 +249,6 @@ class CardList extends Component {
       className: `${baseClassName}__loader-spinner`
     })));
   }
-
   render() {
     const {
       baseClassName,
@@ -297,7 +270,6 @@ class CardList extends Component {
       ...props
     } = this.props;
     let content = this.state.items.map(this.renderItem);
-
     if (this.isTile()) {
       content = /*#__PURE__*/React.createElement(Grid, {
         minColumnWidth: 400,
@@ -306,90 +278,82 @@ class CardList extends Component {
         key: child.props.key
       }, child)));
     }
-
     return /*#__PURE__*/React.createElement(Measure, {
       bounds: true,
       onResize: this.handleResize
-    }, ({
-      measureRef
-    }) => /*#__PURE__*/React.createElement("div", _extends({
-      ref: measureRef,
-      className: classNames(baseClassName, className)
-    }, props), /*#__PURE__*/React.createElement(CardListToolbar, {
-      selection: onSelectionChange && this.state.totalItems > 1 ? { ...selectionButton,
-        total: this.state.totalItems,
-        onSelectAll: this.selectAll,
-        onSelectNone: this.selectNone,
-        checked: this.state.items.length === selection.length
-      } : null,
-      onViewChange: viewSwitcher ? view => this.changeView(view) : null,
-      currentView: this.state.view,
-      groups: toolbarGroups
-    }), this.state.items.length > 0 && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__list ${baseClassName}__list--${this.state.view}`
-    }, content), this.state.items.length === 0 && !loading && /*#__PURE__*/React.createElement(Translate, {
-      content: "CardList.notFound",
-      fallback: "No items found."
-    }), this.renderPagination(), this.renderLoader()));
+    }, _ref3 => {
+      let {
+        measureRef
+      } = _ref3;
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: measureRef,
+        className: classNames(baseClassName, className)
+      }, props), /*#__PURE__*/React.createElement(CardListToolbar, {
+        selection: onSelectionChange && this.state.totalItems > 1 ? {
+          ...selectionButton,
+          total: this.state.totalItems,
+          onSelectAll: this.selectAll,
+          onSelectNone: this.selectNone,
+          checked: this.state.items.length === selection.length
+        } : null,
+        onViewChange: viewSwitcher ? view => this.changeView(view) : null,
+        currentView: this.state.view,
+        groups: toolbarGroups
+      }), this.state.items.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: `${baseClassName}__list ${baseClassName}__list--${this.state.view}`
+      }, content), this.state.items.length === 0 && !loading && /*#__PURE__*/React.createElement(Translate, {
+        content: "CardList.notFound",
+        fallback: "No items found."
+      }), this.renderPagination(), this.renderLoader());
+    });
   }
-
 }
-
 CardList.propTypes = {
   /**
    * Array of data items for rendering.
    * @since 0.0.68
    */
   items: PropTypes.array.isRequired,
-
   /**
    * Callback for fetching items.
    * @since 0.0.68
    */
   onItemsFetch: PropTypes.func,
-
   /**
    * Total items. Equal items.length by default.
    * @since 0.0.68
    */
   totalItems: PropTypes.number,
-
   /**
    * Default page number.
    * @since 1.0.1
    */
   defaultPage: PropTypes.number,
-
   /**
    * View mode.
    * @since 0.0.54
    */
   view: PropTypes.oneOf([VIEW_EXTENDED, VIEW_TILE, VIEW_ROW, VIEW_RESPONSIVE]),
-
   /**
    * View change callback.
    * @since 0.0.54
    */
   onViewChange: PropTypes.func,
-
   /**
    * View switcher config.
    * @since 0.0.59
    */
   viewSwitcher: PropTypes.bool,
-
   /**
    * Array of keys of selected cards.
    * @since 0.0.59
    */
   selection: PropTypes.array,
-
   /**
    * Selection change handler for list. Checkboxes will only be rendered if this prop is defined.
    * @since 0.0.59
    */
   onSelectionChange: PropTypes.func,
-
   /**
    * Config for selection button in the toolbar.
    * @since 0.0.59
@@ -399,42 +363,35 @@ CardList.propTypes = {
      * See [Badge](#!/Badge) for all props.
      */
     badge: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
     /**
      * Array of additional [MenuItems](#!/MenuItem).
      */
     menuItems: PropTypes.arrayOf(PropTypes.element)
   }),
-
   /**
    * Toolbar groups for the toolbar.
    * @since 0.0.59
    */
   toolbarGroups: PropTypes.arrayOf(PropTypes.element),
-
   /**
    * Unique key.
    * @since 0.0.59
    */
   itemKey: PropTypes.string.isRequired,
-
   /**
    * Render function for item.
    * @since 0.0.59
    */
   itemRender: PropTypes.func.isRequired,
-
   /**
    * Indicate the loading state of the list.
    * @since 0.0.68
    */
   loading: PropTypes.bool,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */