@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/FormField/FormField.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, useContext } from 'react';
 import { scrollIntoView, safeInvoke } from '../utils';
 import PropTypes from 'prop-types';
@@ -22,46 +23,46 @@ import VerticalContext from '../VerticalContext';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DisabledContext from '../Form/DisabledContext';
 const defaultValue = undefined;
+
 /**
  * Simple helper to handle situations when we expecting only array
  * @param value
  * @param nonEmpty
  * @returns {Array}
  */
-
-const getArrayHelper = (value, nonEmpty = false) => {
+const getArrayHelper = function (value) {
+  let nonEmpty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   if (Array.isArray(value) && value.length > 0) {
     return value;
   }
-
   const result = [];
-
   if (nonEmpty) {
     result.push(undefined);
   }
-
   return result;
 };
-
 const isControlled = props => props.value !== undefined;
-
 const isEmpty = value => {
   return !value && value !== 0 || Array.isArray(value) && value.length === 0 || !Array.isArray(value) && typeof value === 'object' && Object.values(value).filter(t => Boolean(t)).length === 0;
 };
+
 /**
  * @since 0.0.54
  */
-
-
 class FormField extends Component {
   constructor(_props) {
+    var _this;
     super(_props);
-
+    _this = this;
+    /**
+     * Field API provided to field
+     * @param index
+     * @returns {Object}
+     */
     _defineProperty(this, "getFieldApi", index => {
       if (!this.props.multi) {
         return this.fieldApi;
       }
-
       return {
         getId: () => {
           const id = this.fieldApi.getId();
@@ -73,11 +74,9 @@ class FormField extends Component {
         },
         getValue: def => {
           const values = this.fieldApi.getValue();
-
           if (values instanceof Array && values[index]) {
             return values[index];
           }
-
           return def;
         },
         setValue: value => {
@@ -86,18 +85,15 @@ class FormField extends Component {
         },
         getErrors: () => {
           const errors = this.fieldApi.getErrors();
-
           if (errors instanceof Array && errors[index]) {
             return errors[index];
           }
-
           return {};
         },
         getRequiredMark: () => {
           if (index === 0) {
             return this.fieldApi.getRequiredMark();
           }
-
           return null;
         },
         getSeparator: () => /*#__PURE__*/React.createElement("span", {
@@ -108,24 +104,19 @@ class FormField extends Component {
           if (index === 0) {
             return this.fieldApi.getFullDescription();
           }
-
           return null;
         }
       };
     });
-
     _defineProperty(this, "focus", errors => {
       let index = 0;
-
       if (Array.isArray(errors)) {
         index = errors.findIndex(v => Boolean(v));
       }
-
       const {
         scrollableElement
       } = this.props;
       const target = this.targetRefs[index];
-
       if (target) {
         scrollIntoView(target, {
           boundary: scrollableElement
@@ -137,33 +128,42 @@ class FormField extends Component {
         }, 500);
       }
     });
-
+    /**
+     * Handler for clicks on 'Add more'
+     */
     _defineProperty(this, "handleAddMore", () => {
       const values = getArrayHelper(this.fieldApi.getValue(), true);
       this.fieldApi.setValue([...values, defaultValue]);
     });
-
+    /**
+     * Handler for clicks on 'Remove'
+     * @param index
+     */
     _defineProperty(this, "handleRemove", index => {
       const values = getArrayHelper(this.fieldApi.getValue());
-      this.fieldApi.setValue(values.filter((value, valueIndex) => valueIndex !== index)); // Can be used for removing errors from form properties
+      this.fieldApi.setValue(values.filter((value, valueIndex) => valueIndex !== index));
 
-      safeInvoke(this.props.onRemoveRow, index); // Remove errors from component state
+      // Can be used for removing errors from form properties
+      safeInvoke(this.props.onRemoveRow, index);
 
+      // Remove errors from component state
       this.setState(prevState => {
         if (prevState.errors && prevState.errors.filter) {
           return {
             errors: prevState.errors.filter((error, errorIndex) => errorIndex !== index)
           };
         }
-
         return {};
       });
     });
-
     _defineProperty(this, "setTargetRef", index => node => {
       this.targetRefs[index] = node;
     });
-
+    /**
+     * Renders 'Remove' button for each row
+     * @param index
+     * @returns {null|React.ReactElement}
+     */
     _defineProperty(this, "renderRemoveButton", index => {
       const {
         multi,
@@ -172,11 +172,9 @@ class FormField extends Component {
       } = this.props;
       const value = getArrayHelper(this.fieldApi.getValue());
       const isClearable = multi && value.length === 1 && !isEmpty(value[0]);
-
       if (!multi || value.length < 1 || value.length === 1 && isEmpty(value[0])) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(Button, {
         className: `${this.props.baseClassName}__remove`,
         icon: isClearable ? 'clean' : 'cross-mark',
@@ -191,25 +189,33 @@ class FormField extends Component {
         ghost: true
       });
     });
-
+    /**
+     * Renders description for last row
+     * @param index
+     * @returns {null|React.ReactElement}
+     */
     _defineProperty(this, "renderDescription", index => {
       const {
         baseClassName,
         description,
         multi
       } = this.props;
-
       if (!description || multi && getArrayHelper(this.fieldApi.getValue()).length - 1 > index) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(Hint, {
         component: "div",
         className: `${baseClassName}__description`
       }, description);
     });
-
-    _defineProperty(this, "renderField", (index = 0, renderAddMore = false) => {
+    /**
+     * Renders one field
+     * @param index
+     * @returns {React.ReactElement}
+     */
+    _defineProperty(this, "renderField", function () {
+      let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      let renderAddMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       const {
         baseClassName,
         className,
@@ -232,24 +238,20 @@ class FormField extends Component {
         scrollableElement,
         fullDescription,
         ...props
-      } = this.props;
-      const fieldApi = this.getFieldApi(index);
+      } = _this.props;
+      const fieldApi = _this.getFieldApi(index);
       const fieldErrors = fieldApi.getErrors();
       const hasErrors = fieldErrors && Object.keys(fieldErrors).length > 0;
       let label = formFieldLabel;
-
       if (label && index) {
         label = '';
       }
-
       let innerField = typeof children === 'function' ? children(fieldApi) : children;
-
       if (multi) {
         innerField = /*#__PURE__*/React.createElement("div", {
           className: `${baseClassName}__multi`
-        }, innerField, ` `, this.renderRemoveButton(index));
+        }, innerField, ` `, _this.renderRemoveButton(index));
       }
-
       return /*#__PURE__*/React.createElement(SectionItem, _extends({
         className: classNames(baseClassName, {
           [`${baseClassName}--error`]: hasErrors,
@@ -263,7 +265,7 @@ class FormField extends Component {
         key: index,
         vertical: vertical
       }, props), /*#__PURE__*/React.createElement("div", {
-        ref: this.setTargetRef(index)
+        ref: _this.setTargetRef(index)
       }, innerField), hasErrors && Object.keys(fieldErrors).map(key => /*#__PURE__*/React.createElement("span", {
         key: key,
         className: `${baseClassName}__error`
@@ -271,9 +273,9 @@ class FormField extends Component {
         className: `${baseClassName}__error-icon`,
         name: "exclamation-mark-circle-filled",
         size: "12"
-      }), fieldErrors[key])), this.renderDescription(index), renderAddMore && /*#__PURE__*/React.createElement(Link, {
+      }), fieldErrors[key])), _this.renderDescription(index), renderAddMore && /*#__PURE__*/React.createElement(Link, {
         role: "button",
-        onClick: this.handleAddMore,
+        onClick: _this.handleAddMore,
         className: `${baseClassName}__add-more`,
         disabled: disabled
       }, /*#__PURE__*/React.createElement(Translate, {
@@ -283,18 +285,16 @@ class FormField extends Component {
         translators: locale
       })));
     });
-
     const {
       value: _value,
       multi: _multi
     } = this.props;
     let valueInState = _value;
-
     if (_multi && !valueInState) {
       valueInState = [defaultValue];
-    } // eslint-disable-next-line react/state-in-constructor
-
+    }
 
+    // eslint-disable-next-line react/state-in-constructor
     this.state = {
       value: valueInState,
       errors: this.props.errors
@@ -304,11 +304,9 @@ class FormField extends Component {
         if (this.props.id) {
           return this.props.id;
         }
-
         if (this.props.name) {
           return this.props.name.replace(/[[\]]+/g, '-').replace(/-+$/, '');
         }
-
         return null;
       },
       getName: () => this.props.name,
@@ -316,39 +314,33 @@ class FormField extends Component {
         if (this.props.form) {
           return this.props.form.getValues();
         }
-
         return null;
       },
       getValue: def => {
         if (this.props.form && this.props.name) {
           return this.props.form.getValue(this.props.name, def);
         }
-
         return this.state.value || def;
       },
       setValue: value => {
         this.setState({
           value
         });
-
         if (this.props.form && this.props.name) {
           this.props.form.setValue(this.props.name, value);
         }
-
         safeInvoke(this.props.onChange, value);
       },
       getErrors: () => {
         if (this.props.form && this.props.name) {
           return this.props.form.getErrors(this.props.name);
         }
-
         return this.state.errors;
       },
       getRequiredMark: () => {
         if (this.props.form) {
           return this.props.form.getRequiredMark();
         }
-
         return null;
       },
       isDisabled: () => Boolean(this.props.disabled),
@@ -356,7 +348,6 @@ class FormField extends Component {
         if (!this.props.fullDescription) {
           return null;
         }
-
         return /*#__PURE__*/React.createElement(Popover, {
           target: /*#__PURE__*/React.createElement(Action, {
             outerProps: {
@@ -375,7 +366,6 @@ class FormField extends Component {
     };
     this.targetRefs = [];
   }
-
   static getDerivedStateFromProps(props, state) {
     const nextState = {};
     const {
@@ -388,24 +378,19 @@ class FormField extends Component {
       prevErrors,
       prevRequired
     } = state;
-
     if (isControlled(props)) {
       nextState.value = props.value;
     }
-
     if (errors !== prevErrors) {
       nextState.errors = errors;
     }
-
     if (form && required !== prevRequired) {
       form.setRequiredField(name, required);
     }
-
     nextState.prevErrors = errors;
     nextState.prevRequired = required;
     return nextState;
   }
-
   componentDidMount() {
     if (this.props.form) {
       this.props.form.setRequiredField(this.props.name, this.props.required);
@@ -414,104 +399,80 @@ class FormField extends Component {
       });
     }
   }
-
   componentWillUnmount() {
     if (this.props.form) {
       this.props.form.setRequiredField(this.props.name, false);
       this.props.form.unregisterField(this.props.name);
     }
-
     clearTimeout(this.focusTimer);
   }
-  /**
-   * Field API provided to field
-   * @param index
-   * @returns {Object}
-   */
-
-
   render() {
     if (!this.props.multi) {
       return this.renderField();
     }
-
     const max = this.props.multi.max || Infinity;
     let index = 0;
     const count = (this.fieldApi.getValue() || []).length || 1;
     const lines = [];
-
     do {
       lines.push(this.renderField(index++, count === index && count < max));
     } while (index < count);
-
     return lines;
   }
-
 }
-
 const propTypes = {
   /**
    * Field ID.
    * @since 0.0.59
    */
   id: PropTypes.string,
-
   /**
    * Field name.
    * @since 0.0.54
    */
   name: PropTypes.string,
-
   /**
    * Field value.
    * @deprecated Use [Form](#!/Form) values.
    * @since 0.0.57
    */
   value: PropTypes.any,
-
   /**
    * A callback function, can be executed when the value is changing.
    * @since 0.4.1
    */
   onChange: PropTypes.func,
-
   /**
    * Field label.
    * @since 0.0.54
    */
   label: PropTypes.any,
-
   /**
    * Field description.
    * @since 0.0.57
    */
   description: PropTypes.any,
-
   /**
    * Show long descriptions in popover after clicking on "( i )" icon
    * @since 3.14.0
    */
   fullDescription: PropTypes.node,
-
   /**
    * Field errors.
    *  @deprecated Use [Form](#!/Form) errors.
    * @since 0.0.57
    */
   errors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-
   /**
    * Indicates whether field is required.
    * @since 0.0.54
    */
   required: PropTypes.bool,
-
   /**
    * Content of the `FormField`.
    * @since 0.0.54
    */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
   /**
    * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
    * @since 1.12.0
@@ -519,12 +480,10 @@ const propTypes = {
   multi: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     max: PropTypes.number.isRequired
   })]),
-
   /**
    * @ignore Disabled state of multiple field.
    */
   disabled: PropTypes.bool,
-
   /**
    * Localization messages
    * @since 1.12.0
@@ -533,42 +492,35 @@ const propTypes = {
     addMore: PropTypes.node,
     remove: PropTypes.node
   }),
-
   /**
    * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
    * @ignore
    * @deprecated
    */
   addMoreValidator: PropTypes.func,
-
   /**
    * A callback function, can be executed when the row is removed.
    * @since 1.12.0
    */
   onRemoveRow: PropTypes.func,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */
   baseClassName: PropTypes.string,
-
   /**
    * @ignore
    */
   form: PropTypes.object,
-
   /**
    * Vertical or horizontal field view.
    * If it is not defined explicitly, the vertical mode will use from Form or Section components.
    * @since 3.13.0
    */
   vertical: PropTypes.bool,
-
   /**
    * @ignore
    */
@@ -598,6 +550,7 @@ const defaultProps = {
 };
 FormField.propTypes = propTypes;
 FormField.defaultProps = defaultProps;
+
 /**
  * `FormField` component is used for showing of parameter values in Form or
  * for entering of user data with any form elements.
@@ -621,7 +574,6 @@ const FormFieldWrapper = props => {
     disabled: props.disabled === undefined ? disabled : props.disabled
   }));
 };
-
 FormFieldWrapper.displayName = 'FormField';
 FormFieldWrapper.propTypes = propTypes;
 FormFieldWrapper.defaultProps = defaultProps;

package/esm/components/FormField/index.js

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

package/esm/components/FormFieldCheckbox/FormFieldCheckbox.js

@@ -1,101 +1,98 @@
 import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Checkbox from '../Checkbox';
 import FormField from '../FormField';
-
 /**
  * `FormFieldCheckbox` component component is used for turning an option on or off
  * and selecting or deselecting an item.
  * @since 0.0.58
  */
-const FormFieldCheckbox = ({
-  baseClassName,
-  className,
-  label,
-  required,
-  checkedValue,
-  uncheckedValue,
-  autoFocus,
-  multi,
-  ...props
-}) => /*#__PURE__*/React.createElement(FormField, _extends({
-  className: classNames(baseClassName, className),
-  label: null,
-  required: required
-}, props), ({
-  getId,
-  getName,
-  getValue,
-  setValue,
-  getRequiredMark,
-  getFullDescription,
-  isDisabled
-}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("input", {
-  type: "hidden",
-  name: getName(),
-  value: uncheckedValue
-}), /*#__PURE__*/React.createElement(Checkbox, {
-  checked: getValue() === checkedValue,
-  onChange: checked => setValue(checked ? checkedValue : uncheckedValue),
-  inputProps: {
-    id: getId(),
-    name: getName(),
-    value: checkedValue,
-    autoFocus
-  },
-  disabled: isDisabled(),
-  rightAddon: /*#__PURE__*/React.createElement(React.Fragment, null, getFullDescription(), required ? getRequiredMark() : null)
-}, label)));
-
+const FormFieldCheckbox = _ref => {
+  let {
+    baseClassName,
+    className,
+    label,
+    required,
+    checkedValue,
+    uncheckedValue,
+    autoFocus,
+    multi,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement(FormField, _extends({
+    className: classNames(baseClassName, className),
+    label: null,
+    required: required
+  }, props), _ref2 => {
+    let {
+      getId,
+      getName,
+      getValue,
+      setValue,
+      getRequiredMark,
+      getFullDescription,
+      isDisabled
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("input", {
+      type: "hidden",
+      name: getName(),
+      value: uncheckedValue
+    }), /*#__PURE__*/React.createElement(Checkbox, {
+      checked: getValue() === checkedValue,
+      onChange: checked => setValue(checked ? checkedValue : uncheckedValue),
+      inputProps: {
+        id: getId(),
+        name: getName(),
+        value: checkedValue,
+        autoFocus
+      },
+      disabled: isDisabled(),
+      rightAddon: /*#__PURE__*/React.createElement(React.Fragment, null, getFullDescription(), required ? getRequiredMark() : null)
+    }, label));
+  });
+};
 FormFieldCheckbox.propTypes = {
   /**
    * Disabled state of field.
    * @since 0.1.0
    */
   disabled: PropTypes.bool,
-
   /**
    * Custom checked value. Default is boolean true.
    * @since 0.0.59
    */
   checkedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /**
    * Custom unchecked value. Default is boolean false.
    * @since 0.0.59
    */
   uncheckedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /**
    * The browser will automatically focus on the component upon rendering the screen
    * @since 1.9.0
    */
   autoFocus: PropTypes.bool,
-
   /**
    * @ignore Field cannot be multiple
    */
   multi: PropTypes.bool,
-
   /**
    * @ignore
    */
   label: PropTypes.any,
-
   /**
    * @ignore
    */
   required: PropTypes.bool,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */