@plesk/ui-library 3.31.0 → 3.31.2

package/cjs/components/FormField/FormField.js

@@ -1,99 +1,77 @@
 "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 _utils = require("../utils");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _constants = require("../../constants");
-
 var _Section = require("../Section");
-
 var _Hint = _interopRequireDefault(require("../Hint"));
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Link = _interopRequireDefault(require("../Link"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _Popover = _interopRequireDefault(require("../Popover"));
-
 var _Action = _interopRequireDefault(require("../Action"));
-
 var _Translate = _interopRequireDefault(require("../Translate"));
-
 var _Focuser = _interopRequireDefault(require("../Overlay/Focuser"));
-
 var _FormContext = _interopRequireDefault(require("../Form/FormContext"));
-
 var _VerticalContext = _interopRequireDefault(require("../VerticalContext"));
-
 var _ScrollableElementFormContext = _interopRequireDefault(require("../Form/ScrollableElementFormContext"));
-
 var _DisabledContext = _interopRequireDefault(require("../Form/DisabledContext"));
-
 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-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 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 _react.Component {
   constructor(_props) {
+    var _this;
     super(_props);
+    _this = this;
+    /**
+     * Field API provided to field
+     * @param index
+     * @returns {Object}
+     */
     (0, _defineProperty2.default)(this, "getFieldApi", index => {
       if (!this.props.multi) {
         return this.fieldApi;
       }
-
       return {
         getId: () => {
           const id = this.fieldApi.getId();
@@ -105,11 +83,9 @@ class FormField extends _react.Component {
         },
         getValue: def => {
           const values = this.fieldApi.getValue();
-
           if (values instanceof Array && values[index]) {
             return values[index];
           }
-
           return def;
         },
         setValue: value => {
@@ -118,18 +94,15 @@ class FormField extends _react.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.default.createElement("span", {
@@ -140,23 +113,19 @@ class FormField extends _react.Component {
           if (index === 0) {
             return this.fieldApi.getFullDescription();
           }
-
           return null;
         }
       };
     });
     (0, _defineProperty2.default)(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) {
         (0, _utils.scrollIntoView)(target, {
           boundary: scrollableElement
@@ -168,29 +137,42 @@ class FormField extends _react.Component {
         }, 500);
       }
     });
+    /**
+     * Handler for clicks on 'Add more'
+     */
     (0, _defineProperty2.default)(this, "handleAddMore", () => {
       const values = getArrayHelper(this.fieldApi.getValue(), true);
       this.fieldApi.setValue([...values, defaultValue]);
     });
+    /**
+     * Handler for clicks on 'Remove'
+     * @param index
+     */
     (0, _defineProperty2.default)(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));
 
-      (0, _utils.safeInvoke)(this.props.onRemoveRow, index); // Remove errors from component state
+      // Can be used for removing errors from form properties
+      (0, _utils.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 {};
       });
     });
     (0, _defineProperty2.default)(this, "setTargetRef", index => node => {
       this.targetRefs[index] = node;
     });
+    /**
+     * Renders 'Remove' button for each row
+     * @param index
+     * @returns {null|React.ReactElement}
+     */
     (0, _defineProperty2.default)(this, "renderRemoveButton", index => {
       const {
         multi,
@@ -199,11 +181,9 @@ class FormField extends _react.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.default.createElement(_Button.default, {
         className: `${this.props.baseClassName}__remove`,
         icon: isClearable ? 'clean' : 'cross-mark',
@@ -218,23 +198,33 @@ class FormField extends _react.Component {
         ghost: true
       });
     });
+    /**
+     * Renders description for last row
+     * @param index
+     * @returns {null|React.ReactElement}
+     */
     (0, _defineProperty2.default)(this, "renderDescription", index => {
       const {
         baseClassName,
         description,
         multi
       } = this.props;
-
       if (!description || multi && getArrayHelper(this.fieldApi.getValue()).length - 1 > index) {
         return null;
       }
-
       return /*#__PURE__*/_react.default.createElement(_Hint.default, {
         component: "div",
         className: `${baseClassName}__description`
       }, description);
     });
-    (0, _defineProperty2.default)(this, "renderField", (index = 0, renderAddMore = false) => {
+    /**
+     * Renders one field
+     * @param index
+     * @returns {React.ReactElement}
+     */
+    (0, _defineProperty2.default)(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,
@@ -257,24 +247,20 @@ class FormField extends _react.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.default.createElement("div", {
           className: `${baseClassName}__multi`
-        }, innerField, ` `, this.renderRemoveButton(index));
+        }, innerField, ` `, _this.renderRemoveButton(index));
       }
-
       return /*#__PURE__*/_react.default.createElement(_Section.SectionItem, (0, _extends2.default)({
         className: (0, _classnames.default)(baseClassName, {
           [`${baseClassName}--error`]: hasErrors,
@@ -288,7 +274,7 @@ class FormField extends _react.Component {
         key: index,
         vertical: vertical
       }, props), /*#__PURE__*/_react.default.createElement("div", {
-        ref: this.setTargetRef(index)
+        ref: _this.setTargetRef(index)
       }, innerField), hasErrors && Object.keys(fieldErrors).map(key => /*#__PURE__*/_react.default.createElement("span", {
         key: key,
         className: `${baseClassName}__error`
@@ -296,9 +282,9 @@ class FormField extends _react.Component {
         className: `${baseClassName}__error-icon`,
         name: "exclamation-mark-circle-filled",
         size: "12"
-      }), fieldErrors[key])), this.renderDescription(index), renderAddMore && /*#__PURE__*/_react.default.createElement(_Link.default, {
+      }), fieldErrors[key])), _this.renderDescription(index), renderAddMore && /*#__PURE__*/_react.default.createElement(_Link.default, {
         role: "button",
-        onClick: this.handleAddMore,
+        onClick: _this.handleAddMore,
         className: `${baseClassName}__add-more`,
         disabled: disabled
       }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -313,12 +299,11 @@ class FormField extends _react.Component {
       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
@@ -328,11 +313,9 @@ class FormField extends _react.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,
@@ -340,39 +323,33 @@ class FormField extends _react.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);
         }
-
         (0, _utils.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),
@@ -380,7 +357,6 @@ class FormField extends _react.Component {
         if (!this.props.fullDescription) {
           return null;
         }
-
         return /*#__PURE__*/_react.default.createElement(_Popover.default, {
           target: /*#__PURE__*/_react.default.createElement(_Action.default, {
             outerProps: {
@@ -399,7 +375,6 @@ class FormField extends _react.Component {
     };
     this.targetRefs = [];
   }
-
   static getDerivedStateFromProps(props, state) {
     const nextState = {};
     const {
@@ -412,24 +387,19 @@ class FormField extends _react.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);
@@ -438,104 +408,80 @@ class FormField extends _react.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.default.string,
-
   /**
    * Field name.
    * @since 0.0.54
    */
   name: _propTypes.default.string,
-
   /**
    * Field value.
    * @deprecated Use [Form](#!/Form) values.
    * @since 0.0.57
    */
   value: _propTypes.default.any,
-
   /**
    * A callback function, can be executed when the value is changing.
    * @since 0.4.1
    */
   onChange: _propTypes.default.func,
-
   /**
    * Field label.
    * @since 0.0.54
    */
   label: _propTypes.default.any,
-
   /**
    * Field description.
    * @since 0.0.57
    */
   description: _propTypes.default.any,
-
   /**
    * Show long descriptions in popover after clicking on "( i )" icon
    * @since 3.14.0
    */
   fullDescription: _propTypes.default.node,
-
   /**
    * Field errors.
    *  @deprecated Use [Form](#!/Form) errors.
    * @since 0.0.57
    */
   errors: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]),
-
   /**
    * Indicates whether field is required.
    * @since 0.0.54
    */
   required: _propTypes.default.bool,
-
   /**
    * Content of the `FormField`.
    * @since 0.0.54
    */
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.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
@@ -543,12 +489,10 @@ const propTypes = {
   multi: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
     max: _propTypes.default.number.isRequired
   })]),
-
   /**
    * @ignore Disabled state of multiple field.
    */
   disabled: _propTypes.default.bool,
-
   /**
    * Localization messages
    * @since 1.12.0
@@ -557,42 +501,35 @@ const propTypes = {
     addMore: _propTypes.default.node,
     remove: _propTypes.default.node
   }),
-
   /**
    * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
    * @ignore
    * @deprecated
    */
   addMoreValidator: _propTypes.default.func,
-
   /**
    * A callback function, can be executed when the row is removed.
    * @since 1.12.0
    */
   onRemoveRow: _propTypes.default.func,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * @ignore
    */
   baseClassName: _propTypes.default.string,
-
   /**
    * @ignore
    */
   form: _propTypes.default.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.default.bool,
-
   /**
    * @ignore
    */
@@ -622,6 +559,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.
@@ -645,7 +583,6 @@ const FormFieldWrapper = props => {
     disabled: props.disabled === undefined ? disabled : props.disabled
   }));
 };
-
 FormFieldWrapper.displayName = 'FormField';
 FormFieldWrapper.propTypes = propTypes;
 FormFieldWrapper.defaultProps = defaultProps;

package/cjs/components/FormField/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _FormField.default;
   }
 });
-
 var _FormField = _interopRequireDefault(require("./FormField"));