@plesk/ui-library 3.31.0 → 3.31.2

package/cjs/components/Form/Form.js

@@ -1,52 +1,36 @@
 "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 _classnames = _interopRequireDefault(require("classnames"));
-
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
-
 var _constants = require("../../constants");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _FormField = _interopRequireDefault(require("../FormField"));
-
 var _Section = _interopRequireDefault(require("../Section"));
-
 var _Translate = _interopRequireDefault(require("../Translate"));
-
 var _FormContext = _interopRequireDefault(require("./FormContext"));
-
 var _VerticalContext = _interopRequireWildcard(require("../VerticalContext"));
-
 var _DisabledContext = _interopRequireDefault(require("./DisabledContext"));
-
 var _utils2 = 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-2020. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 class Form extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    var _this;
+    super(...arguments);
+    _this = this;
     (0, _defineProperty2.default)(this, "state", {
       values: this.props.values,
       vertical: this.props.vertical || false,
@@ -59,19 +43,18 @@ class Form extends _react.Component {
           if (this.state.values) {
             return (0, _utils.getIn)(this.state.values, name, def);
           }
-
           return def;
         },
         setValue: (name, value) => {
-          this.setState(({
-            values
-          }) => {
+          this.setState(_ref => {
+            let {
+              values
+            } = _ref;
             if (values) {
               return {
                 values: (0, _utils.setIn)(values, name, value)
               };
             }
-
             return null;
           });
           (0, _utils2.safeInvoke)(this.props.onFieldChange, name, value);
@@ -80,7 +63,6 @@ class Form extends _react.Component {
           if (this.props.errors) {
             return (0, _utils.getIn)(this.props.errors, name, {});
           }
-
           return {};
         },
         registerField: (name, field) => {
@@ -100,7 +82,6 @@ class Form extends _react.Component {
                 requiredFields: [...prevState.requiredFields, name]
               };
             }
-
             return {
               requiredFields: prevState.requiredFields.filter(v => v !== name)
             };
@@ -112,7 +93,6 @@ class Form extends _react.Component {
     (0, _defineProperty2.default)(this, "fields", {});
     (0, _defineProperty2.default)(this, "handleSubmit", e => {
       e.preventDefault();
-
       if (this.props.onSubmit && this.state.values) {
         this.props.onSubmit(this.state.values, false);
       }
@@ -121,7 +101,6 @@ class Form extends _react.Component {
       if (e.currentTarget.type === 'submit') {
         return;
       }
-
       if (this.props.onSubmit && this.state.values) {
         this.props.onSubmit(this.state.values, false);
       }
@@ -130,32 +109,31 @@ class Form extends _react.Component {
       if (e.currentTarget.type === 'submit') {
         return;
       }
-
       if (this.props.onSubmit && this.state.values) {
         this.props.onSubmit(this.state.values, true);
       }
     });
-    (0, _defineProperty2.default)(this, "handleResize", ({
-      bounds
-    }) => {
+    (0, _defineProperty2.default)(this, "handleResize", _ref2 => {
+      let {
+        bounds
+      } = _ref2;
       const {
         vertical
       } = this.props;
-
       if (vertical !== undefined) {
         this.setState({
           vertical
         });
         return;
       }
-
       this.setState({
         vertical: bounds.width < _VerticalContext.VERTICAL_BREAKPOINT
       });
     });
-    (0, _defineProperty2.default)(this, "renderForm", ({
-      actionButtons
-    } = {}) => {
+    (0, _defineProperty2.default)(this, "renderForm", function () {
+      let {
+        actionButtons
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       const {
         innerRef,
         baseClassName,
@@ -176,35 +154,38 @@ class Form extends _react.Component {
         render,
         vertical,
         ...props
-      } = this.props;
+      } = _this.props;
       return /*#__PURE__*/_react.default.createElement(_FormContext.default.Provider, {
-        value: this.state.formContext
+        value: _this.state.formContext
       }, /*#__PURE__*/_react.default.createElement(_VerticalContext.default.Provider, {
-        value: this.state.vertical
+        value: _this.state.vertical
       }, /*#__PURE__*/_react.default.createElement(_DisabledContext.default.Provider, {
         value: !!state
       }, /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
-        onResize: this.handleResize,
+        onResize: _this.handleResize,
         innerRef: innerRef,
         bounds: true
-      }, ({
-        measureRef
-      }) => /*#__PURE__*/_react.default.createElement("form", (0, _extends2.default)({
-        ref: measureRef,
-        className: (0, _classnames.default)(baseClassName, {
-          [`${baseClassName}--has-required`]: this.hasRequiredField()
-        }, className),
-        onSubmit: this.handleSubmit
-      }, props), children, actionButtons, /*#__PURE__*/_react.default.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.default.createElement("form", (0, _extends2.default)({
+          ref: measureRef,
+          className: (0, _classnames.default)(baseClassName, {
+            [`${baseClassName}--has-required`]: _this.hasRequiredField()
+          }, className),
+          onSubmit: _this.handleSubmit
+        }, props), children, actionButtons, /*#__PURE__*/_react.default.createElement("input", {
+          type: "image",
+          src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
+          style: {
+            border: 0,
+            height: 0,
+            width: 0,
+            position: 'absolute'
+          }
+        }));
+      }))));
     });
     (0, _defineProperty2.default)(this, "renderActionButtons", () => {
       const {
@@ -232,7 +213,6 @@ class Form extends _react.Component {
       })));
     });
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       values,
@@ -245,82 +225,73 @@ class Form extends _react.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 = (0, _utils.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.default.createElement(_Button.default, (0, _extends2.default)({
       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.default.createElement(_Translate.default, {
         content: "Form.submitButton",
-        fallback: "OK"
+        fallback: "Save"
       })
     }, submitButton));
   }
-
-  renderApplyButton({
-    applyButton,
-    state
-  }) {
+  renderApplyButton(_ref5) {
+    let {
+      applyButton,
+      state
+    } = _ref5;
     if (!applyButton) {
       return null;
     }
-
     return /*#__PURE__*/(0, _react.createElement)(_Button.default, {
       size: 'lg',
       intent: 'primary',
@@ -334,15 +305,14 @@ class Form extends _react.Component {
       ...applyButton
     });
   }
-
-  renderCancelButton({
-    cancelButton,
-    state
-  }) {
+  renderCancelButton(_ref6) {
+    let {
+      cancelButton,
+      state
+    } = _ref6;
     if (!cancelButton) {
       return null;
     }
-
     return /*#__PURE__*/(0, _react.createElement)(_Button.default, {
       size: 'lg',
       state: state === 'cancel' ? 'loading' : undefined,
@@ -354,60 +324,50 @@ class Form extends _react.Component {
       ...cancelButton
     });
   }
-
-  renderAdditionalButtons({
-    additionalButtons
-  }) {
+  renderAdditionalButtons(_ref7) {
+    let {
+      additionalButtons
+    } = _ref7;
     const {
       baseClassName
     } = this.props;
-
     if (Array.isArray(additionalButtons)) {
       return additionalButtons.map(element => {
         if ( /*#__PURE__*/(0, _react.isValidElement)(element)) {
           const props = {
             className: (0, _classnames.default)(element.props.className, `${baseClassName}__additional-button`)
           };
-
           if (element.type === _Button.default) {
             props.size = 'lg';
           }
-
           return /*#__PURE__*/(0, _react.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
  */
-
-
 (0, _defineProperty2.default)(Form, "defaultProps", {
   children: undefined,
   requiredMark: /*#__PURE__*/_react.default.createElement("span", {
@@ -434,14 +394,11 @@ const RefForwardingForm = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const innerRef = (0, _react.useRef)(null);
   (0, _react.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.default.createElement(Form, (0, _extends2.default)({
     innerRef: innerRef

package/cjs/components/Form/Form.stories.js

@@ -1,25 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Basic = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Form = _interopRequireDefault(require("./Form"));
-
 var _FormFieldText = _interopRequireDefault(require("../FormFieldText"));
-
 var _FormFieldPassword = _interopRequireDefault(require("../FormFieldPassword"));
-
 var _FormFieldCheckbox = _interopRequireDefault(require("../FormFieldCheckbox"));
-
 // Copyright 1999-2020. Plesk International GmbH. All rights reserved.
-const Basic = args => /*#__PURE__*/_react.default.createElement(_Form.default, args);
 
+const Basic = args => /*#__PURE__*/_react.default.createElement(_Form.default, args);
 exports.Basic = Basic;
 Basic.args = {
   values: {

package/cjs/components/Form/FormContext.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 const FormContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 FormContext.displayName = 'FormContext';
 var _default = FormContext;

package/cjs/components/Form/ScrollableElementFormContext.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 // Copyright 1999-2019. Plesk International GmbH. All rights reserved.
+
 const ScrollableElementFormContext = /*#__PURE__*/(0, _react.createContext)();
 ScrollableElementFormContext.displayName = 'ScrollableElementFormContext';
 var _default = ScrollableElementFormContext;

package/cjs/components/Form/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +22,5 @@ Object.defineProperty(exports, "setIn", {
     return _utils.setIn;
   }
 });
-
 var _Form = _interopRequireDefault(require("./Form"));
-
 var _utils = require("./utils");

package/cjs/components/Form/utils.js

@@ -4,27 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setIn = exports.getIn = void 0;
-
 // 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.
  *
@@ -37,18 +35,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.
@@ -61,26 +56,19 @@ const getIn = (obj, name, def) => {
  * @example
  * const nextState = setIn(state, 'user[name]', 'John');
  */
-
-
 exports.getIn = getIn;
-
 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;
 };
-
 exports.setIn = setIn;