intelicoreact 1.1.12 → 1.1.13

package/dist/Molecular/InputAddress/InputAddress.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +9,7 @@ exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactFeather = require("react-feather");
 
@@ -21,14 +19,6 @@ var _Input = _interopRequireDefault(require("../../Atomic/FormElements/Input/Inp
 
 require("./InputAddress.scss");
 
-var _utils = require("../../Functions/utils");
-
-var _Spinner = _interopRequireDefault(require("../../Atomic/Layout/Spinner/Spinner"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
 var throttleTimeout = null;
 
 var InputAddress = function InputAddress(_ref) {
@@ -44,26 +34,29 @@ var InputAddress = function InputAddress(_ref) {
       throttle = _ref$throttle === void 0 ? 300 : _ref$throttle,
       _ref$loader = _ref.loader,
       loader = _ref$loader === void 0 ? '' : _ref$loader,
+      error = _ref.error,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$getListItems = _ref.getListItems,
       getListItems = _ref$getListItems === void 0 ? function () {} : _ref$getListItems;
   var inputRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      query = _useState2[0],
-      setQuery = _useState2[1];
+      isValueInited = _useState2[0],
+      setIsValueInited = _useState2[1];
 
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      listItems = _useState4[0],
-      setListItems = _useState4[1];
+      query = _useState4[0],
+      setQuery = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(false),
+  var _useState5 = (0, _react.useState)([]),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isThrottled = _useState6[0],
-      setIsThrottled = _useState6[1];
+      listItems = _useState6[0],
+      setListItems = _useState6[1];
 
   var _useState7 = (0, _react.useState)(null),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
@@ -91,7 +84,9 @@ var InputAddress = function InputAddress(_ref) {
     if (!(query !== null && query !== void 0 && query.length)) return null;
     clearTimeout(throttleTimeout);
     throttleTimeout = setTimeout(function () {
-      return setListItems(getListItems);
+      var _getListItems;
+
+      return (_getListItems = getListItems(query)) === null || _getListItems === void 0 ? void 0 : _getListItems.then(setListItems);
     }, throttle);
   };
 
@@ -145,7 +140,6 @@ var InputAddress = function InputAddress(_ref) {
       setQueryAsItem(null, listItems[hightlightedIndex]);
       setHightlightedIndex(null);
       inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
-      return;
     } //up 38
     //down 40
 
@@ -168,11 +162,17 @@ var InputAddress = function InputAddress(_ref) {
   (0, _react.useEffect)(function () {
     if (!isListVisible) setListItems([]);
   }, [isListVisible]);
+  (0, _react.useEffect)(function () {
+    if (value !== query && !isValueInited) {
+      setQuery(value);
+      setIsValueInited(true);
+    }
+  }, [value]);
 
   var renderInput = function renderInput() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: (0, _classnames.default)('input-address__input-wrapper')
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    }, /*#__PURE__*/React.createElement(_Input.default, {
       ref: inputRef,
       testId: "inputAddress--input--key-".concat(testId || fieldKey),
       className: (0, _classnames.default)('input-address__input', className),
@@ -187,24 +187,26 @@ var InputAddress = function InputAddress(_ref) {
         }, 50);
       },
       onKeyDown: onKeyDown
-    }), isClearable && /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-address__clear-query"
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
+    }), isClearable && /*#__PURE__*/React.createElement("div", {
+      className: (0, _classnames.default)('input-address__clear-query', {
+        'input-address__clear-query--input-focused': isFocused
+      })
+    }, /*#__PURE__*/React.createElement(_reactFeather.X, {
       onClick: onClearClick
     })));
   };
 
   var renderLoader = function renderLoader() {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "input-address__list--loader"
     }, loader || 'Loading...');
   };
 
   var renderList = function renderList() {
     var renderListItem = function renderListItem(item, i) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("input-address__list--item", {
-          "input-address__list--item-hightlighted": i === hightlightedIndex
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _classnames.default)('input-address__list--item', {
+          'input-address__list--item-hightlighted': i === hightlightedIndex
         }),
         onClick: function onClick(e) {
           return setQueryAsItem(e, item);
@@ -212,13 +214,15 @@ var InputAddress = function InputAddress(_ref) {
       }, item);
     };
 
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "input-address__list"
     }, !(listItems !== null && listItems !== void 0 && listItems.length) ? renderLoader() : listItems === null || listItems === void 0 ? void 0 : listItems.map(renderListItem));
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "input-address"
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)('input-address', {
+      'input-address--error': error
+    })
   }, renderInput(), isListVisible && renderList());
 };
 

package/dist/Molecular/InputAddress/InputAddress.scss

@@ -2,6 +2,10 @@
   position: relative;
   width: 100%;
 
+  &--error .input__wrap {
+    border-color: #FA564C!important;
+  }
+
   &__clear-query {
     visibility: hidden;
     position: absolute;
@@ -12,7 +16,8 @@
     cursor: pointer;
   }
 
-  &__input-wrapper:hover &__clear-query {
+  &__input-wrapper:hover &__clear-query,
+  &__clear-query--input-focused {
     visibility: visible;
   }
 
@@ -21,7 +26,7 @@
     position: absolute;
     margin-top: 8px;
     width: 100%;
-    max-height: 100px;
+    max-height: 40px;
     overflow-y: auto;
     z-index: 999;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "",
   "main": "dist/index.js",
   "files": [