@plesk/ui-library 3.31.0 → 3.31.2

package/esm/components/Form/Form.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, { createElement, Component, cloneElement, isValidElement, useRef, forwardRef, useImperativeHandle } from 'react';
 import { getIn, setIn } from './utils';
 import classNames from 'classnames';
@@ -16,11 +17,11 @@ import FormContext from './FormContext';
 import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import DisabledContext from './DisabledContext';
 import { safeInvoke } from '../utils';
-
 class Form extends Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    var _this;
+    super(...arguments);
+    _this = this;
     _defineProperty(this, "state", {
       values: this.props.values,
       vertical: this.props.vertical || false,
@@ -33,19 +34,18 @@ class Form extends Component {
           if (this.state.values) {
             return getIn(this.state.values, name, def);
           }
-
           return def;
         },
         setValue: (name, value) => {
-          this.setState(({
-            values
-          }) => {
+          this.setState(_ref => {
+            let {
+              values
+            } = _ref;
             if (values) {
               return {
                 values: setIn(values, name, value)
               };
             }
-
             return null;
           });
           safeInvoke(this.props.onFieldChange, name, value);
@@ -54,7 +54,6 @@ class Form extends Component {
           if (this.props.errors) {
             return getIn(this.props.errors, name, {});
           }
-
           return {};
         },
         registerField: (name, field) => {
@@ -74,7 +73,6 @@ class Form extends Component {
                 requiredFields: [...prevState.requiredFields, name]
               };
             }
-
             return {
               requiredFields: prevState.requiredFields.filter(v => v !== name)
             };
@@ -83,59 +81,50 @@ class Form extends Component {
         getRequiredMark: () => this.props.requiredMark
       }
     });
-
     _defineProperty(this, "fields", {});
-
     _defineProperty(this, "handleSubmit", e => {
       e.preventDefault();
-
       if (this.props.onSubmit && this.state.values) {
         this.props.onSubmit(this.state.values, false);
       }
     });
-
     _defineProperty(this, "handleSubmitClick", e => {
       if (e.currentTarget.type === 'submit') {
         return;
       }
-
       if (this.props.onSubmit && this.state.values) {
         this.props.onSubmit(this.state.values, false);
       }
     });
-
     _defineProperty(this, "handleApplyClick", e => {
       if (e.currentTarget.type === 'submit') {
         return;
       }
-
       if (this.props.onSubmit && this.state.values) {
         this.props.onSubmit(this.state.values, true);
       }
     });
-
-    _defineProperty(this, "handleResize", ({
-      bounds
-    }) => {
+    _defineProperty(this, "handleResize", _ref2 => {
+      let {
+        bounds
+      } = _ref2;
       const {
         vertical
       } = this.props;
-
       if (vertical !== undefined) {
         this.setState({
           vertical
         });
         return;
       }
-
       this.setState({
         vertical: bounds.width < VERTICAL_BREAKPOINT
       });
     });
-
-    _defineProperty(this, "renderForm", ({
-      actionButtons
-    } = {}) => {
+    _defineProperty(this, "renderForm", function () {
+      let {
+        actionButtons
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         innerRef,
         baseClassName,
@@ -156,37 +145,39 @@ class Form extends Component {
         render,
         vertical,
         ...props
-      } = this.props;
+      } = _this.props;
       return /*#__PURE__*/React.createElement(FormContext.Provider, {
-        value: this.state.formContext
+        value: _this.state.formContext
       }, /*#__PURE__*/React.createElement(VerticalContext.Provider, {
-        value: this.state.vertical
+        value: _this.state.vertical
       }, /*#__PURE__*/React.createElement(DisabledContext.Provider, {
         value: !!state
       }, /*#__PURE__*/React.createElement(Measure, {
-        onResize: this.handleResize,
+        onResize: _this.handleResize,
         innerRef: innerRef,
         bounds: true
-      }, ({
-        measureRef
-      }) => /*#__PURE__*/React.createElement("form", _extends({
-        ref: measureRef,
-        className: classNames(baseClassName, {
-          [`${baseClassName}--has-required`]: this.hasRequiredField()
-        }, className),
-        onSubmit: this.handleSubmit
-      }, props), children, actionButtons, /*#__PURE__*/React.createElement("input", {
-        type: "image",
-        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
-        style: {
-          border: 0,
-          height: 0,
-          width: 0,
-          position: 'absolute'
-        }
-      }))))));
+      }, _ref3 => {
+        let {
+          measureRef
+        } = _ref3;
+        return /*#__PURE__*/React.createElement("form", _extends({
+          ref: measureRef,
+          className: classNames(baseClassName, {
+            [`${baseClassName}--has-required`]: _this.hasRequiredField()
+          }, className),
+          onSubmit: _this.handleSubmit
+        }, props), children, actionButtons, /*#__PURE__*/React.createElement("input", {
+          type: "image",
+          src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
+          style: {
+            border: 0,
+            height: 0,
+            width: 0,
+            position: 'absolute'
+          }
+        }));
+      }))));
     });
-
     _defineProperty(this, "renderActionButtons", () => {
       const {
         submitButton,
@@ -213,7 +204,6 @@ class Form extends Component {
       })));
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       values,
@@ -226,82 +216,73 @@ class Form extends Component {
       prevRequiredMark
     } = state;
     const nextState = {};
-
     if (values !== prevValues) {
       nextState.values = values;
     }
-
     if (values !== prevValues || errors !== prevErrors || requiredMark !== prevRequiredMark) {
-      nextState.formContext = { ...state.formContext
+      nextState.formContext = {
+        ...state.formContext
       };
     }
-
     nextState.prevValues = values;
     nextState.prevErrors = errors;
     nextState.prevRequiredMark = requiredMark;
     return nextState;
   }
-
   componentDidUpdate(prevProps) {
     const {
       errors
     } = this.props;
-
     if (errors !== prevProps.errors) {
       let field;
       let fieldErrors;
       Object.keys(this.fields).every(name => {
         const foundError = getIn(errors, name);
-
         if (foundError && typeof foundError === 'object' && Object.keys(foundError).length > 0) {
           field = this.fields[name];
           fieldErrors = foundError;
           return false;
         }
-
         return true;
       });
-
       if (field) {
         field.focus(fieldErrors);
       }
     }
   }
-
   hasRequiredField() {
     return this.props.requiredMark && this.state.requiredFields.length > 0;
   }
-
-  renderSubmitButton({
-    submitButton,
-    state
-  }) {
+  renderSubmitButton(_ref4) {
+    let {
+      submitButton,
+      state
+    } = _ref4;
     if (!submitButton) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(Button, _extends({
       size: "lg",
       intent: "primary",
       state: state === 'submit' ? 'loading' : undefined,
       disabled: !!state,
-      onClick: this.handleSubmitClick // eslint-disable-next-line react/no-children-prop
+      onClick: this.handleSubmitClick
+      // eslint-disable-next-line react/no-children-prop
       ,
       children: /*#__PURE__*/React.createElement(Translate, {
         content: "Form.submitButton",
-        fallback: "OK"
+        fallback: "Save"
       })
     }, submitButton));
   }
-
-  renderApplyButton({
-    applyButton,
-    state
-  }) {
+  renderApplyButton(_ref5) {
+    let {
+      applyButton,
+      state
+    } = _ref5;
     if (!applyButton) {
       return null;
     }
-
     return /*#__PURE__*/createElement(Button, {
       size: 'lg',
       intent: 'primary',
@@ -315,15 +296,14 @@ class Form extends Component {
       ...applyButton
     });
   }
-
-  renderCancelButton({
-    cancelButton,
-    state
-  }) {
+  renderCancelButton(_ref6) {
+    let {
+      cancelButton,
+      state
+    } = _ref6;
     if (!cancelButton) {
       return null;
     }
-
     return /*#__PURE__*/createElement(Button, {
       size: 'lg',
       state: state === 'cancel' ? 'loading' : undefined,
@@ -335,60 +315,50 @@ class Form extends Component {
       ...cancelButton
     });
   }
-
-  renderAdditionalButtons({
-    additionalButtons
-  }) {
+  renderAdditionalButtons(_ref7) {
+    let {
+      additionalButtons
+    } = _ref7;
     const {
       baseClassName
     } = this.props;
-
     if (Array.isArray(additionalButtons)) {
       return additionalButtons.map(element => {
         if ( /*#__PURE__*/isValidElement(element)) {
           const props = {
             className: classNames(element.props.className, `${baseClassName}__additional-button`)
           };
-
           if (element.type === Button) {
             props.size = 'lg';
           }
-
           return /*#__PURE__*/cloneElement(element, props);
         }
-
         return element;
       });
     }
-
     return null;
   }
-
   render() {
     const {
       render
     } = this.props;
-
     if (typeof render === 'function') {
       return render({
         renderForm: this.renderForm,
         renderActionButtons: this.renderActionButtons
       });
     }
-
     return this.renderForm({
       actionButtons: this.renderActionButtons()
     });
   }
-
 }
+
 /**
  * `Form` component is used for entering and submitting of user data.
  * [More details about designing of forms.](#!/Good%20Forms)
  * @since 0.0.54
  */
-
-
 _defineProperty(Form, "defaultProps", {
   children: undefined,
   requiredMark: /*#__PURE__*/React.createElement("span", {
@@ -411,19 +381,15 @@ _defineProperty(Form, "defaultProps", {
   render: undefined,
   innerRef: undefined
 });
-
 const RefForwardingForm = /*#__PURE__*/forwardRef((props, ref) => {
   const innerRef = useRef(null);
   useImperativeHandle(ref, () => ({
     submit() {
-      var _innerRef$current;
-
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.dispatchEvent(new Event('submit', {
+      innerRef.current?.dispatchEvent(new Event('submit', {
         cancelable: true,
         bubbles: true
       }));
     }
-
   }));
   return /*#__PURE__*/React.createElement(Form, _extends({
     innerRef: innerRef

package/esm/components/Form/Form.stories.js

@@ -1,4 +1,5 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
+
 import React from 'react';
 import Form from './Form';
 import FormFieldText from '../FormFieldText';

package/esm/components/Form/FormContext.js

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

package/esm/components/Form/ScrollableElementFormContext.js

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

package/esm/components/Form/index.js

@@ -1,3 +1,4 @@
 // Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+
 export { default } from './Form';
 export { getIn, setIn } from './utils';

package/esm/components/Form/utils.js

@@ -1,23 +1,22 @@
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-const nameToPath = name => name.replace(/]/g, '').split('[');
 
+const nameToPath = name => name.replace(/]/g, '').split('[');
 const fixObj = (obj, key) => {
   if (isNaN(key) && (Array.isArray(obj) || typeof obj !== 'object' || obj === null)) {
     return {};
   }
-
   if (!isNaN(key) && !Array.isArray(obj)) {
     return [];
   }
-
   if (isNaN(key)) {
-    return { ...obj
+    return {
+      ...obj
     };
-  } // @ts-ignore
-
-
+  }
+  // @ts-ignore
   return [...obj];
 };
+
 /**
  * Deeply get a value from an object via its path.
  *
@@ -30,18 +29,15 @@ const fixObj = (obj, key) => {
  * const name = getIn(state, 'user[name]', 'Anonymous');
  *
  */
-
-
 const getIn = (obj, name, def) => {
   const path = nameToPath(name);
   let val;
-
   try {
     val = path.reduce((curr, key) => curr[key], obj);
   } catch {}
-
   return val === undefined ? def : val;
 };
+
 /**
  * Deeply set a value from in object via it's path.
  * Does not mutate an original object.
@@ -54,24 +50,18 @@ const getIn = (obj, name, def) => {
  * @example
  * const nextState = setIn(state, 'user[name]', 'John');
  */
-
-
 const setIn = (obj, name, val) => {
   const path = nameToPath(name);
   const next = fixObj(obj, path[0]);
   let key;
   let curr = next;
-
   while ((key = path.shift()) && path.length) {
     curr[key] = fixObj(curr[key], path[0]);
     curr = curr[key];
   }
-
   if (key) {
     curr[key] = val;
   }
-
   return next;
 };
-
 export { getIn, setIn };