intelicoreact 1.8.3 → 1.8.4

package/dist/Molecular/InputAddress/InputAddress.jsx

@@ -0,0 +1,641 @@
+import cn from 'classnames';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, X } from 'react-feather';
+
+import Input from '../../Atomic/FormElements/Input/Input';
+import Spinner from '../../Atomic/Layout/Spinner/Spinner';
+import Hint from '../../Atomic/UI/Hint/Hint';
+import useIsMobile from '../../Functions/useIsMobile/useIsMobile';
+import { compare, getIsOnlyAnObject } from '../../Functions/utils';
+
+import './InputAddress.scss';
+
+const DEFAULT_HINT_MESSAGE
+  = 'Select the correct address from the list of suggestions (must contains house number and street name)';
+
+const RC = 'input-address';
+
+// ? Если равны - true
+function compareValues(val1, val2) {
+  return (
+    typeof val1 === typeof val2
+    && (getIsOnlyAnObject(val1) ? compare(val1, val2) : val1 === val2)
+  );
+}
+
+function throttle(fn, ms) {
+  let id = null;
+  return (...args) => {
+    if (id) clearTimeout(id);
+
+    id = setTimeout(() => {
+      fn(...args);
+    }, ms);
+  };
+}
+
+// Отдает true если value валидное НЕ нулевое число
+function getIsValidNumber(value) {
+  return Boolean(value) && typeof value === 'number' && !Number.isNaN(value)
+}
+
+function InputAddress({
+  label,
+  className = '',
+  isClearable = true,
+  isKeyboardControlled = true,
+  fieldKey = '',
+  testId = '',
+  throttle: throttleTime = 500, // ms
+  additionalThrottleTimeForListingRequest = 0, // ms
+  loader = '',
+  noItemsMessage = '',
+  error,
+  value = '',
+  onChange = () => {},
+  onChangeValueTransformer,
+  disabled,
+  isDisabled,
+
+  getListItems = () => {},
+  clarifyAddressInfo, // ! Не делать дефолтного значения! Это и метод и флаг
+
+  noValidate = false,
+
+  renderSelectedItem,
+  renderListItem,
+  renderHintMessage,
+
+  attributesOfNativeInput,
+}) {
+  const { isMobile } = useIsMobile();
+
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const listOverlayRef = useRef(null);
+  const listWrapperRef = useRef(null);
+  const listHeaderRef = useRef(null);
+  const previousValueRef = useRef(value);
+
+  const [isValueInited, setIsValueInited] = useState(false);
+
+  const [isScrollableList, setIsScrollableList] = useState(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollHeight, setScrollHeight] = useState(1);
+
+  const [innerValue, setInnerValue] = useState(value);
+
+  const [tempInnerValue, setTempInnerValue] = useState(null);
+  const [tempValue, setTempValue] = useState(null);
+
+  const [listItems, setListItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isListLoading, setIsListLoading] = useState(false);
+
+  const [hightlightedIndex, setHightlightedIndex] = useState(null);
+
+  const [isFocused, setIsFocused] = useState(false);
+  const [isListVisible, setIsListVisible] = useState(false);
+
+  const isWrongAddress = useMemo(() => {
+    if (noValidate) return false;
+
+    if (innerValue === '') return false;
+
+    if (
+      !innerValue?.hasOwnProperty('streetNumber')
+      || !innerValue?.streetNumber
+    ) {
+      return true;
+    }
+
+    // eslint-disable-next-line no-prototype-builtins
+    if (!innerValue?.hasOwnProperty('street') || !innerValue?.street?.fullName)
+      return true;
+
+    return false;
+  }, [innerValue]);
+
+  const setItemAsInnerValue = (e, item) => {
+    if (e instanceof Event) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    setTimeout(() => {
+      setInnerValue(item);
+
+      if (isMobile) {
+        setIsListVisible(false);
+      }
+    }, 0);
+  };
+
+  // ? Базовый метод получения списка вариантов адреса
+  const getAddressVariants = useMemo(
+    () => innerValue =>
+      getListItems(innerValue)
+        ?.then(setListItems)
+        .finally(() => setIsListLoading(false)),
+    [getListItems],
+  );
+
+  // ? Метод получения списка вариантов адреса с тротлингом (основным и, если нужно, дополнительным)
+  // ? Без useMemo работать НЕ будет (т.к. на каждом перерендере будет создаваться новая ф-я и будет теряться замкнутая переменная id из throttle)
+  const getAddressVariantsWithThrottling = useMemo(() => {
+    const execute = getIsValidNumber(additionalThrottleTimeForListingRequest)
+      ? throttle(getAddressVariants, additionalThrottleTimeForListingRequest)
+      : getAddressVariants;
+
+    return getIsValidNumber(throttleTime)
+      ? throttle(execute, throttleTime)
+      : execute;
+  }, [
+    getAddressVariants,
+    additionalThrottleTimeForListingRequest,
+    throttleTime,
+  ]);
+
+  // ? Итоговый "получатель" списка вариантов адресов
+  const getAddressVariantsList = () => {
+    if (!innerValue?.length) return null;
+
+    // ? Вообще с учетом надпись "Loading" в списке вариантов включается в этом месте (т.е. сразу при начале набора),
+    // ? то, наверное, можно было НЕ мутить с дополнительным тротлингом )).
+    // ? Наверное, можно было увеличить время первичного тротлинга и, наверное, работало бы так же ))
+    // ? НО, раз уже сделал )) оставлю, может будет в будущем полезно )
+    setIsListLoading(true);
+    getAddressVariantsWithThrottling(innerValue);
+
+    return null;
+  };
+
+  const onClearClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!isMobile) {
+      setIsListVisible(false);
+    }
+
+    setInnerValue('');
+
+    inputRef?.current?.focus();
+    setTimeout(() => setIsFocused(true), 0);
+  };
+
+  const onOverlayClick = (e) => {
+    if (e.target === listOverlayRef?.current) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsListVisible(false);
+      setInnerValue(tempInnerValue);
+      onChange(
+        typeof innerValue === 'string'
+        || !onChangeValueTransformer
+        || typeof onChangeValueTransformer !== 'function'
+          ? innerValue
+          : onChangeValueTransformer(innerValue),
+      );
+    }
+  };
+
+  const onKeyDown = (keyCode) => {
+    if (!isListVisible || !isKeyboardControlled) return false;
+
+    if (keyCode === 13) {
+      // Enter Controller
+      setItemAsInnerValue(null, listItems[hightlightedIndex]);
+      setHightlightedIndex(null);
+      inputRef?.current?.blur();
+    }
+    else {
+      let newHightlightedIndex = null;
+      const listItemsElements = document.getElementsByClassName(
+        'input-address__list--item',
+      );
+
+      const listHeight = listRef?.current?.getBoundingClientRect()?.height;
+      const listScrollTop = listRef?.current?.scrollTop || 0;
+      const lastItemIndex = Number.parseInt(listItems?.length, 10) - 1;
+
+      /** Arrows Controllers */
+      if (keyCode === 40) {
+        // Down Key Controller
+        if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {
+          newHightlightedIndex = 0;
+        }
+        else if (hightlightedIndex + 1 < listItems?.length) {
+          newHightlightedIndex = hightlightedIndex + 1;
+        }
+      }
+      else if (keyCode === 38) {
+        // Up Key Controller
+        if (hightlightedIndex === null || hightlightedIndex === 0) {
+          newHightlightedIndex = lastItemIndex;
+        }
+        else if (hightlightedIndex - 1 >= 0) {
+          newHightlightedIndex = hightlightedIndex - 1;
+        }
+      }
+
+      // Scroll to Element
+      const newHightlightedElement = listItemsElements[newHightlightedIndex];
+      const newHightlightedElementHeight
+        = newHightlightedElement?.getBoundingClientRect()?.height;
+
+      const newHightlightedElementTopInList = newHightlightedElement?.offsetTop;
+
+      if (
+        newHightlightedElementTopInList + newHightlightedElementHeight
+        > listScrollTop + listHeight
+      ) {
+        if (
+          Math.abs(
+            newHightlightedElementTopInList
+            + newHightlightedElementHeight
+            - (listScrollTop + listHeight),
+          ) <= newHightlightedElementHeight
+        ) {
+          listRef?.current?.scrollTo(
+            0,
+            listScrollTop + newHightlightedElementHeight,
+          );
+        }
+        else {
+          listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
+        }
+      }
+      else if (newHightlightedElementTopInList < listScrollTop) {
+        if (
+          Math.abs(newHightlightedElementTopInList - listScrollTop)
+          < newHightlightedElementHeight
+        ) {
+          listRef?.current?.scrollTo(
+            0,
+            listScrollTop - newHightlightedElementHeight,
+          );
+        }
+        else {
+          listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
+        }
+      }
+
+      if (!isMobile) setHightlightedIndex(newHightlightedIndex);
+    }
+  };
+
+  const getHintMessage = () => {
+    if (!renderHintMessage || typeof renderHintMessage !== 'function')
+      return DEFAULT_HINT_MESSAGE;
+
+    return renderHintMessage(innerValue);
+  };
+
+  const getSelectedItemLabel = (value = innerValue) => {
+    if (!value) return '';
+    if (typeof value === 'string') return value;
+    if (typeof renderSelectedItem === 'function') renderSelectedItem(value);
+
+    const label
+      = `${value?.streetNumber || ''} ${value?.street?.fullName || ''}`.trim();
+    return !label && isLoading ? previousValueRef.current : label;
+  };
+
+  const getListItemLabel = (item) => {
+    if (typeof item === 'string') return item;
+
+    if (!renderListItem || typeof renderListItem !== 'function')
+      return item?.fullPrediction;
+
+    return renderListItem(item);
+  };
+
+  const setListHeight = () => {
+    if (listWrapperRef?.current && listHeaderRef?.current && listRef.current) {
+      const listWrapperHeight
+        = listWrapperRef?.current?.getBoundingClientRect()?.height;
+      const listWrapperStyles = getComputedStyle(listWrapperRef?.current);
+
+      const listHeaderHeight
+        = listHeaderRef?.current?.getBoundingClientRect()?.height;
+
+      const listHeight
+        = listWrapperHeight
+          - listHeaderHeight
+          - Number.parseInt(listWrapperStyles.paddingBottom, 10);
+
+      listRef.current.style.maxHeight = `${listHeight}px`;
+    }
+  };
+
+  const resetListHeight = () => {
+    if (listRef.current) {
+      listRef.current.style.maxHeight = `initial`;
+    }
+  };
+
+  // ? Основной блок работы со значениями адреса
+  // ? Не меняйте вызовы setInnerValue и onChange не разобравшись в логике вызовов
+  useEffect(() => {
+    // ? Исключение инициализации - равны только при первом рендере компонента,
+    // ? т.к. рефка и стейт инициализируются верхним value
+    if (!compareValues(innerValue, previousValueRef.current)) {
+      const isObject = getIsOnlyAnObject(innerValue);
+
+      // ? innerValue меняется либо от ручного ввода, либо от выбора из списка
+      // ? Полная информация или нет - напрямую зависит от ответа getListItems
+      const isFullInfo
+        = isObject
+          && 'streetNumber' in innerValue
+          && 'street' in innerValue
+          && 'city' in innerValue
+          && 'state' in innerValue
+          && 'country' in innerValue
+          && 'zipCode' in innerValue;
+
+      // ? Для старого эндпоинта возвращается список с полной информацией, поэтому на проектах ничего не поменяется,
+      // ? если не менять запросник (getListItems), все будет проходить по этой if-ке или по 3-й (для строчных значений)
+      if (isFullInfo) {
+        onChange(innerValue);
+        setIsLoading(false);
+      }
+
+      // ? Неполная информация может быть только в том случае, когда метод getListItems использует уже новый эндпоинт гугл-апи.
+      // ? Предполагается, что при этом в компонент будет прокинута ф-я "уточнятель" (clarifyAddressInfo)
+      if (isObject && !isFullInfo) {
+        if (typeof clarifyAddressInfo === 'function') {
+          setIsLoading(true);
+          // ? Предполагается, что clarifyAddressInfo - асинхронная ф-я, запросник уточнения опции
+          // ? Никаких await-ов НЕ нужно (тем более что в useEffect и нельзя для нового React),
+          // ? промис "выплюнется в пустоту", но НЕ будет отчищен до резолва, а useEffect (и итерация рендера в целом) при этом будет закончен(а)
+          clarifyAddressInfo(innerValue)?.then?.((res) => {
+            if (res) {
+              setInnerValue(res);
+            }
+            else {
+              setInnerValue(previousValueRef.current);
+              setTimeout(() => {
+                inputRef.current.focus();
+                inputRef.current.setSelectionRange(
+                  previousValueRef.current.length,
+                  previousValueRef.current.length,
+                );
+              }, 0);
+            }
+
+            setIsLoading(false);
+            return res;
+          });
+        }
+        // ! Если сверху поменяли эндпоинт и он выдает "облегченный листинг" (айтемы с неполной инфой),
+        // ! и НЕ пробросили clarifyAddressInfo, то на этом кейсе велью инпута будет просто зануляться
+        // ! (getSelectedItemLabel вернет пустую строку если вкинуть innerValue без всей инфы)
+        else {
+          setInnerValue(getSelectedItemLabel(innerValue));
+        }
+      }
+
+      // ? Кейс для строчных значений
+      if (!isObject) {
+        // ? Вызываем верхний onChange если innerValue есть или если нету, но это не после логики уточнения
+        if (innerValue || !isLoading) onChange(innerValue);
+        // ? Если innerValue есть и еще не открыт листинг - открываем
+        if (innerValue && !isListVisible) setIsListVisible(true);
+        // ? Если инпут сфокусирован и значение есть - запрашиваем список вариантов
+        if (isFocused && Boolean(innerValue)) getAddressVariantsList();
+      }
+    }
+  }, [innerValue]);
+
+  useEffect(() => {
+    if (!isFocused && !isMobile) {
+      setIsListVisible(false);
+      setHightlightedIndex(null);
+    }
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (!isListVisible) {
+      setListItems([]);
+      resetListHeight();
+    }
+
+    if (isMobile && isListVisible) {
+      setTempInnerValue(innerValue);
+      setListHeight();
+    }
+  }, [isListVisible]);
+
+  useEffect(() => {
+    // ? учет изменения value сверху (верхние переназначения велью)
+    if (!compareValues(value, innerValue)) setInnerValue(value);
+
+    // ? useEffect должен быть последним, т.к. рефка меняется в рамках текущей итерации
+    previousValueRef.current = value;
+  }, [value]);
+
+  const renderSearchableInput = () => {
+    const inputValue = getSelectedItemLabel();
+
+    return (
+      <div className={cn('input-address__input-wrapper')}>
+        <Input
+          ref={inputRef}
+          testId={`inputAddress--input--key-${testId || fieldKey}`}
+          className={cn('input-address__input', className)}
+          value={inputValue}
+          onChange={setInnerValue}
+          onFocus={(e) => {
+            setIsFocused(true);
+          }}
+          onBlur={() => setIsFocused(false)}
+          onKeyDown={onKeyDown}
+          attributesOfNativeInput={attributesOfNativeInput}
+          disabled={disabled || isDisabled}
+          isDisabled={disabled || isDisabled}
+        />
+        {isWrongAddress && (
+          <div
+            className={cn('input-address__alert', {
+              'input-address__alert--visible': !isFocused,
+            })}
+          >
+            <Hint
+              side="left"
+              hint={getHintMessage()}
+              icon={<AlertTriangle />}
+              handleOpenType="hover"
+            />
+          </div>
+        )}
+        {isClearable && (!isWrongAddress || isFocused) && !(disabled || isDisabled) && (
+          <div
+            className={cn('input-address__clear-query', {
+              'input-address__clear-query--input-focused': isFocused,
+            })}
+          >
+            <X onClick={onClearClick} />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderInput = () => {
+    const inputValue = getSelectedItemLabel(
+      isListVisible ? tempInnerValue : innerValue,
+    );
+
+    return (
+      <div className={cn('input-address__input-wrapper')}>
+        <Input
+          testId={`inputAddress--input--key-${testId || fieldKey}`}
+          className={cn('input-address__input', className)}
+          value={inputValue}
+          onChange={setInnerValue}
+          onFocus={(e) => {
+            setIsListVisible(true);
+            e?.target?.blur();
+            setTimeout(() => inputRef?.current?.focus(), 200);
+          }}
+          disabled={disabled || isDisabled}
+          isDisabled={disabled || isDisabled}
+        />
+      </div>
+    );
+  };
+
+  const renderLoader = () => {
+    return (
+      <div className="input-address__list--loader">
+        {loader || 'Loading...'}
+      </div>
+    );
+  };
+
+  const renderList = () => {
+    const renderListItem = (item, i) => {
+      return (
+        <div
+          key={`input-address__list-item${i}`}
+          className={cn('input-address__list--item', {
+            'input-address__list--item-hightlighted': i === hightlightedIndex,
+          })}
+          onMouseDown={e => setItemAsInnerValue(e, item)}
+        >
+          {getListItemLabel(item)}
+        </div>
+      );
+    };
+    const renderListItemCustom = () => {
+      return (
+        <div
+          key="input-address__list-item--custom"
+          className={cn(
+            'input-address__list--item',
+            'input-address__list--item-custom',
+          )}
+          onMouseDown={e => setItemAsInnerValue(e, getSelectedItemLabel())}
+        >
+          {getSelectedItemLabel()}
+          <AlertTriangle />
+          <span>Choose this only if your address is not listed below</span>
+        </div>
+      );
+    };
+    const renderNoItems = () => {
+      return (
+        <div className="input-address__list--no-items">
+          {isMobile && !innerValue?.length
+            ? 'Please begin entering your address'
+            : noItemsMessage || 'No Items'}
+        </div>
+      );
+    };
+
+    const renderListDesktop = () => {
+      return (
+        <div className="input-address__list-wrapper" ref={listWrapperRef}>
+          <div className="input-address__list" ref={listRef}>
+            {isListLoading
+              ? renderLoader()
+              : listItems?.length
+                ? listItems?.map(renderListItem)
+                : renderNoItems()}
+          </div>
+        </div>
+      );
+    };
+    const renderListMobile = () => {
+      return (
+        <div
+          className="input-address__list-overlay"
+          ref={listOverlayRef}
+          onClick={onOverlayClick}
+        >
+          <div className="input-address__list-wrapper" ref={listWrapperRef}>
+            {isMobile && (
+              <div
+                ref={listHeaderRef}
+                className={cn(`${RC}__list-header`, {
+                  [`${RC}__list-header-with-shadow`]:
+                    isScrollableList && isMobile,
+                  [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0,
+                })}
+              >
+                <div className={cn(`${RC}__list-header-row`)}>
+                  <div className={cn(`${RC}__list-label`)}>
+                    {label || 'Address'}
+                  </div>
+                  <div
+                    className={cn(`${RC}__list-close-icon`)}
+                    onClick={() => setIsListVisible(false)}
+                  >
+                    <X onClick={() => setIsListVisible(false)} />
+                  </div>
+                </div>
+                <div className={cn(`${RC}__list-header-row`)}>
+                  {renderSearchableInput()}
+                </div>
+              </div>
+            )}
+            <div className="input-address__list" ref={listRef}>
+              {isListLoading
+                ? (
+                    renderLoader()
+                  )
+                : (
+                    <>
+                      {getSelectedItemLabel() && renderListItemCustom()}
+                      {listItems?.map(renderListItem)}
+                      {!listItems?.length
+                        && !getSelectedItemLabel()
+                        && renderNoItems()}
+                    </>
+                  )}
+            </div>
+          </div>
+        </div>
+      );
+    };
+
+    return isMobile ? renderListMobile() : renderListDesktop();
+  };
+
+  return (
+    <div
+      className={cn('input-address', {
+        'input-address--error': error || (isWrongAddress && !isFocused),
+        'input-address--disabled': disabled || isDisabled,
+      })}
+    >
+      {isLoading && <Spinner size="small" />}
+      {isMobile ? renderInput() : renderSearchableInput()}
+      {isListVisible && renderList()}
+    </div>
+  );
+}
+
+export default InputAddress;

package/dist/Molecular/InputPassword/InputPassword.d.ts

@@ -0,0 +1,6 @@
+export default InputPassword;
+declare function InputPassword({ field, onChange, testId }: {
+    field?: {} | undefined;
+    onChange?: (() => void) | undefined;
+    testId?: string | undefined;
+}): JSX.Element;

package/dist/Molecular/InputPassword/InputPassword.js

@@ -1 +1 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useRef as n,useState as o}from"react";import i from"classnames";import{Eye as a,EyeOff as s}from"react-feather";import c from"../../Atomic/FormElements/Input/Input";import{setCarretToEnd as l}from"../../Functions/utils";import"./InputPassword.scss";export default function(u){var p,f,y,m=u.field,d=void 0===m?{}:m,b=u.onChange,O=u.testId,h=void 0===O?"input-password":O,v=(p=o(!1),function(t){if(Array.isArray(t))return t}(p)||function(t,r){var e,n,o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var i=[],a=!0,s=!1;try{for(o=o.call(t);!(a=(e=o.next()).done)&&(i.push(e.value),i.length!==r);a=!0);}catch(t){s=!0,n=t}finally{try{a||null==o.return||o.return()}finally{if(s)throw n}}return i}}(p,2)||function(r,e){if(r){if("string"==typeof r)return t(r,2);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(p,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),j=v[0],w=v[1],g=n(null);return e("div",{"data-testid":h,className:"password",ref:g,children:[r(c,(f=function(t){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{},n=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.forEach(function(r){var n;n=e[r],r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n})}return t}({},d),y=y={testId:"inputPassword--input--key-".concat(h||d.key),className:i("input-fin",null==d?void 0:d.key),onChange:void 0===b?function(){}:b,type:j?"text":"password"},Object.getOwnPropertyDescriptors?Object.defineProperties(f,Object.getOwnPropertyDescriptors(y)):(function(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e})(Object(y)).forEach(function(t){Object.defineProperty(f,t,Object.getOwnPropertyDescriptor(y,t))}),f)),e("span",{className:"password-eye-holder",onClick:function(){var t,r=null==g||null==(t=g.current)?void 0:t.querySelector("input");null==r||r.focus(),l(r),w(!j)},children:[" ",j?r(s,{strokeWidth:1,className:"password-icon"}):r(a,{strokeWidth:1,className:"password-icon"})]})]})}
+function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=t.__importDefault(require("classnames")),n=require("react"),o=require("react-feather"),a=t.__importDefault(require("../../Atomic/FormElements/Input/Input")),i=require("../../Functions/utils");require("./InputPassword.scss"),exports.default=function(t){var c,u,l,s=t.field,f=void 0===s?{}:s,p=t.onChange,y=t.testId,d=void 0===y?"input-password":y,b=(c=(0,n.useState)(!1),function(e){if(Array.isArray(e))return e}(c)||function(e,t){var r,n,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var a=[],i=!0,c=!1;try{for(o=o.call(e);!(i=(r=o.next()).done)&&(a.push(r.value),a.length!==t);i=!0);}catch(e){c=!0,n=e}finally{try{i||null==o.return||o.return()}finally{if(c)throw n}}return a}}(c,2)||function(t,r){if(t){if("string"==typeof t)return e(t,2);var n=Object.prototype.toString.call(t).slice(8,-1);if("Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(t,r)}}(c,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),m=b[0],O=b[1],v=(0,n.useRef)(null);return React.createElement("div",{"data-testid":d,className:"password",ref:v},React.createElement(a.default,(u=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),n.forEach(function(t){var n;n=r[t],t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n})}return e}({},f),l=l={testId:"inputPassword--input--key-".concat(d||f.key),className:(0,r.default)("input-fin",null==f?void 0:f.key),onChange:void 0===p?function(){}:p,type:m?"text":"password"},Object.getOwnPropertyDescriptors?Object.defineProperties(u,Object.getOwnPropertyDescriptors(l)):(function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r})(Object(l)).forEach(function(e){Object.defineProperty(u,e,Object.getOwnPropertyDescriptor(l,e))}),u)),React.createElement("span",{className:"password-eye-holder",onClick:function(){var e,t=null==(e=null==v?void 0:v.current)?void 0:e.querySelector("input");null==t||t.focus(),(0,i.setCarretToEnd)(t),O(!m)}}," ",m?React.createElement(o.EyeOff,{strokeWidth:1,className:"password-icon"}):React.createElement(o.Eye,{strokeWidth:1,className:"password-icon"})))};

package/dist/Molecular/InputPassword/InputPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputPassword.js","sourceRoot":"","sources":["../../../src/Molecular/InputPassword/InputPassword.jsx"],"names":[],"mappings":";;;AAAA,oEAA4B;AAE5B,iCAAyC;AACzC,iDAA4C;AAE5C,0FAA0D;AAC1D,iDAAuD;AAEvD,gCAA8B;AAE9B,SAAS,aAAa,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,MAAM,GAAG,gBAAgB,EAAE;IACnF,MAAM,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAElC,MAAM,MAAM,GAAG;QACb,UAAU,EAAE,GAAG,EAAE;;YACf,MAAM,KAAK,GAAG,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;YAC5D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,EAAE,CAAC;YACf,IAAA,sBAAc,EAAC,KAAK,CAAC,CAAC;YACtB,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;QACvB,CAAC;KACF,CAAC;IAEF,OAAO,CACL,4CAAkB,MAAM,EAAE,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,YAAY;QAC9D,oBAAC,eAAK,OACA,KAAK,EACT,MAAM,EAAE,6BAA6B,MAAM,IAAI,KAAK,CAAC,GAAG,EAAE,EAC1D,SAAS,EAAE,IAAA,oBAAE,EAAC,WAAW,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GACxC;QACF,8BACE,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,MAAM,CAAC,UAAU;YAEzB,GAAG;YACH,YAAY;gBACX,CAAC,CAAC,CACE,oBAAC,sBAAM,IAAC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,GAAG,CACrD;gBACH,CAAC,CAAC,CACE,oBAAC,mBAAG,IAAC,WAAW,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,GAAG,CAClD,CACA,CACH,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,aAAa,CAAC"}