@prom-ui/core 0.0.120 → 0.0.130

package/InputField/cjs/index.development.js

@@ -3,18 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
 var Input = require('@prom-ui/core/Input');
 var Button = require('@prom-ui/core/Button');
 var Icon = require('@prom-ui/core/Icon');
+var BodyProvider = require('@prom-ui/core/BodyProvider');
 var EyeOpen = require('@prom-ui/icons/EyeOpen');
 var EyeClose = require('@prom-ui/icons/EyeClose');
 var Spinner = require('@prom-ui/core/Spinner');
 var Ok = require('@prom-ui/icons/Ok');
 var Cancel = require('@prom-ui/icons/Cancel');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -34,7 +32,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -72,12 +69,17 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 }
 
 var AfterTogglePassword = function (_a) {
   var inputType = _a.inputType,
-      onChange = _a.onChange;
-
+    onChange = _a.onChange;
+  var t = BodyProvider.useBodyLocale().t;
   if (inputType === 'text') {
     return React__namespace.createElement(Button.Button, {
       type: 'button',
@@ -87,10 +89,10 @@ var AfterTogglePassword = function (_a) {
       onClick: function () {
         return onChange('password');
       },
-      title: '\u0421\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C',
+      title: t(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\u0421\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C"], ["\u0421\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C"]))),
       tabIndex: -1,
-      "data-qaid": 'inputFieldHidePassword',
-      "data-testid": 'inputFieldHidePassword'
+      "data-qaid": 'input_field_hide_password',
+      "data-testid": 'input_field_hide_password'
     }, React__namespace.createElement(Icon.Icon, {
       "icon-as": EyeOpen.SvgEyeOpen,
       "icon-color": 'black-700',
@@ -101,7 +103,6 @@ var AfterTogglePassword = function (_a) {
       }
     }));
   }
-
   return React__namespace.createElement(Button.Button, {
     type: 'button',
     "button-height": '1-1',
@@ -110,10 +111,10 @@ var AfterTogglePassword = function (_a) {
     onClick: function () {
       return onChange('text');
     },
-    title: '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C',
+    title: t(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C"], ["\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C"]))),
     tabIndex: -1,
-    "data-qaid": 'inputFieldShowPassword',
-    "data-testid": 'inputFieldShowPassword'
+    "data-qaid": 'input_field_show_password',
+    "data-testid": 'input_field_show_password'
   }, React__namespace.createElement(Icon.Icon, {
     "icon-as": EyeClose.SvgEyeClose,
     "icon-color": 'black-600',
@@ -124,14 +125,15 @@ var AfterTogglePassword = function (_a) {
     }
   }));
 };
+var templateObject_1$1, templateObject_2;
 
 var AfterLoading = function () {
   return React__namespace.createElement(Spinner.Spinner, {
     "spinner-color": 'violet-500',
     width: 16,
     height: 16,
-    "data-qaid": 'inputFieldLoading',
-    "data-testid": 'inputFieldLoading'
+    "data-qaid": 'input_field_loading',
+    "data-testid": 'input_field_loading'
   });
 };
 
@@ -140,8 +142,8 @@ var AfterCorrectValue = function () {
     "icon-as": Ok.SvgOk,
     "icon-color": 'green-800',
     "icon-events": 'none',
-    "data-qaid": 'inputFieldCorrectValue',
-    "data-testid": 'inputFieldCorrectValue',
+    "data-qaid": 'input_field_correct_value',
+    "data-testid": 'input_field_correct_value',
     style: {
       width: 16,
       height: 16
@@ -150,15 +152,16 @@ var AfterCorrectValue = function () {
 };
 
 var AfterClearValue = function (props) {
+  var t = BodyProvider.useBodyLocale().t;
   return React__namespace.createElement(Button.Button, __assign({
     type: 'button',
     "button-height": '1-1',
     "button-width": '1-1',
     "button-padding": 'none',
-    title: '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C',
+    title: t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C"], ["\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C"]))),
     tabIndex: -1,
-    "data-qaid": 'inputFieldClearValue',
-    "data-testid": 'inputFieldClearValue'
+    "data-qaid": 'input_field_clear_value',
+    "data-testid": 'input_field_clear_value'
   }, props), React__namespace.createElement(Icon.Icon, {
     "icon-as": Cancel.SvgCancel,
     "icon-color": 'black-600',
@@ -169,14 +172,25 @@ var AfterClearValue = function (props) {
     }
   }));
 };
+var templateObject_1;
+
+var css = {"root":"InputField__root___UnXum","input":"InputField__input___1Wl0O","beforeAndAfter":"InputField__beforeAndAfter___cUXq3","before":"InputField__before___-TbcG InputField__beforeAndAfter___cUXq3","after":"InputField__after___QmiGS InputField__beforeAndAfter___cUXq3","error":"InputField__error___7Fcq2","label":"InputField__label___uV711","labelRequired":"InputField__labelRequired___cxqrg"};
 
+var ErrorText = function (_a) {
+  var children = _a.children;
+  return React__namespace.createElement("div", {
+    className: css.error,
+    "data-qaid": 'input_field_error',
+    "data-testid": 'input_field_error'
+  }, children);
+};
+
+// https://github.com/ant-design/ant-design/blob/master/components/input/Input.tsx:36
 function resolveOnChange(target, e, onChange, targetValue) {
   if (!onChange) {
     return;
   }
-
   var event = e;
-
   if (e.type === 'click') {
     // Clone a new target for event.
     // Avoid the following usage, the setQuery method gets the original value.
@@ -188,8 +202,8 @@ function resolveOnChange(target, e, onChange, targetValue) {
     //         setQuery((prevStatus) => e.target.value);
     //     }}
     // />
-    var currentTarget = target.cloneNode(true); // Click clear button
-
+    var currentTarget = target.cloneNode(true);
+    // Click clear button
     event = Object.create(e, {
       target: {
         value: currentTarget
@@ -201,9 +215,8 @@ function resolveOnChange(target, e, onChange, targetValue) {
     currentTarget.value = '';
     onChange(event);
     return;
-  } // Trigger by composition event, this means we need force change the input value
-
-
+  }
+  // Trigger by composition event, this means we need force change the input value
   if (targetValue !== undefined) {
     event = Object.create(e, {
       target: {
@@ -217,18 +230,15 @@ function resolveOnChange(target, e, onChange, targetValue) {
     onChange(event);
     return;
   }
-
   onChange(event);
 }
 function valueToString(value) {
   if (Number.isInteger(value)) {
     return "".concat(value);
   }
-
   if (!value) {
     return '';
   }
-
   return "".concat(value);
 }
 function isNotEmptyArray(arr) {
@@ -241,11 +251,9 @@ var useForwardRef = function (ref, initialValue) {
   if (initialValue === void 0) {
     initialValue = null;
   }
-
   var targetRef = React__namespace.useRef(initialValue);
   React__namespace.useEffect(function () {
     if (!ref) return;
-
     if (typeof ref === 'function') {
       ref(targetRef.current);
     } else {
@@ -255,36 +263,31 @@ var useForwardRef = function (ref, initialValue) {
   return targetRef;
 };
 
-var css = {"root":"InputField__root___UnXum","input":"InputField__input___1Wl0O","beforeAndAfter":"InputField__beforeAndAfter___cUXq3","before":"InputField__before___-TbcG InputField__beforeAndAfter___cUXq3","after":"InputField__after___QmiGS InputField__beforeAndAfter___cUXq3","error":"InputField__error___7Fcq2"};
-
 var InputField = React__namespace.forwardRef(function (_a, ref) {
   var addonBefore = _a.addonBefore,
-      addonAfter = _a.addonAfter,
-      _b = _a.addonBeforeWidth,
-      addonBeforeWidth = _b === void 0 ? 40 : _b,
-      _c = _a.addonAfterWidth,
-      addonAfterWidth = _c === void 0 ? 40 : _c,
-      _d = _a.error,
-      error = _d === void 0 ? false : _d,
-      props = __rest(_a, ["addonBefore", "addonAfter", "addonBeforeWidth", "addonAfterWidth", "error"]);
-
+    addonAfter = _a.addonAfter,
+    _b = _a.addonBeforeWidth,
+    addonBeforeWidth = _b === void 0 ? 40 : _b,
+    _c = _a.addonAfterWidth,
+    addonAfterWidth = _c === void 0 ? 40 : _c,
+    _d = _a.error,
+    error = _d === void 0 ? false : _d,
+    label = _a.label,
+    isLabelRequired = _a.isLabelRequired,
+    props = __rest(_a, ["addonBefore", "addonAfter", "addonBeforeWidth", "addonAfterWidth", "error", "label", "isLabelRequired"]);
   var isMounted = React__namespace.useRef(false);
   var isSkipOnFocus = React__namespace.useRef(false);
   var isSkipOnBlur = React__namespace.useRef(false);
   var inputRef = useForwardRef(ref, null);
-
   var _e = React__namespace.useState(props.type),
-      localType = _e[0],
-      setLocalType = _e[1];
-
+    localType = _e[0],
+    setLocalType = _e[1];
   var _f = React__namespace.useState(getIsValueEmpty(props.value || props.defaultValue)),
-      isValueEmpty = _f[0],
-      setIsValueEmpty = _f[1];
-
+    isValueEmpty = _f[0],
+    setIsValueEmpty = _f[1];
   React__namespace.useEffect(function () {
     if (isMounted.current) {
       var nextIsValueEmpty = getIsValueEmpty(props.value);
-
       if (nextIsValueEmpty !== isValueEmpty) {
         setIsValueEmpty(nextIsValueEmpty);
       }
@@ -293,7 +296,6 @@ var InputField = React__namespace.forwardRef(function (_a, ref) {
     }
   }, [props.value]);
   var currentAddonAfter = null;
-
   if (props.type === 'password' && addonAfter === 'togglePassword') {
     currentAddonAfter = React__namespace.createElement(AfterTogglePassword, {
       inputType: localType,
@@ -305,17 +307,14 @@ var InputField = React__namespace.forwardRef(function (_a, ref) {
     currentAddonAfter = isValueEmpty ? null : React__namespace.createElement(AfterClearValue, {
       onClick: function (e) {
         var _a;
-
         if (!getIsValueEmpty(props.value) && !props.onChange) {
           (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
           return;
         }
-
         if (inputRef.current) {
           setIsValueEmpty(true);
           inputRef.current.focus();
           resolveOnChange(inputRef.current, e, props.onChange);
-
           if (getIsValueEmpty(props.value)) {
             inputRef.current.value = '';
           }
@@ -345,19 +344,33 @@ var InputField = React__namespace.forwardRef(function (_a, ref) {
   } else {
     currentAddonAfter = addonAfter;
   }
-
+  var isLabel = !!label;
   var isBefore = !!addonBefore;
   var isAfter = !!currentAddonAfter;
   var isError = isNotEmptyArray(error) || !!error;
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("div", {
-    className: classNames__default["default"](css.root, props.className),
-    style: props.style
+  return React__namespace.createElement("div", {
+    className: props.className,
+    style: props.style,
+    "data-qaid": props['data-qaid'] || 'input_field',
+    "data-testid": props['data-testid'] || 'input_field'
+  }, isLabel && React__namespace.createElement("div", {
+    className: css.label
+  }, React__namespace.createElement("label", {
+    "data-qaid": 'input_field_label',
+    "data-testid": 'input_field_label',
+    htmlFor: props.id
+  }, label), !!isLabelRequired && React__namespace.createElement(React__namespace.Fragment, null, "\u00A0", React__namespace.createElement("span", {
+    className: css.labelRequired,
+    "data-qaid": 'input_field_label_required',
+    "data-testid": 'input_field_label_required'
+  }, "*"))), React__namespace.createElement("div", {
+    className: css.root
   }, React__namespace.createElement(Input.Input, __assign({
     ref: inputRef,
-    "input-theme": isError ? 'red' : 'white',
-    "data-qaid": 'inputField',
-    "data-testid": 'inputField'
+    "input-theme": isError ? 'red' : 'white'
   }, props, {
+    "data-qaid": 'input_field_textbox',
+    "data-testid": 'input_field_textbox',
     style: {
       paddingLeft: isBefore ? addonBeforeWidth : undefined,
       paddingRight: isAfter ? addonAfterWidth : undefined
@@ -368,14 +381,12 @@ var InputField = React__namespace.forwardRef(function (_a, ref) {
       if (!isSkipOnFocus.current && props.onFocus) {
         props.onFocus(e);
       }
-
       isSkipOnFocus.current = false;
     },
     onBlur: function (e) {
       if (!isSkipOnBlur.current && props.onBlur) {
         props.onBlur(e);
       }
-
       isSkipOnBlur.current = false;
     },
     onChange: function (e) {
@@ -393,18 +404,12 @@ var InputField = React__namespace.forwardRef(function (_a, ref) {
       width: addonAfterWidth
     }
   }, currentAddonAfter)), isError && (Array.isArray(error) ? error.map(function (errorItem) {
-    return React__namespace.createElement("div", {
-      className: css.error,
-      key: errorItem,
-      "data-qaid": 'inputFieldError',
-      "data-testid": 'inputFieldError'
+    return React__namespace.createElement(ErrorText, {
+      key: errorItem
     }, errorItem);
-  }) : error === true ? null : React__namespace.createElement("div", {
-    className: css.error,
-    "data-qaid": 'inputFieldError',
-    "data-testid": 'inputFieldError'
-  }, error)));
+  }) : error === true ? null : React__namespace.createElement(ErrorText, null, error)));
 });
+InputField.displayName = 'InputField';
 
 exports.InputField = InputField;