@geezee/react-ui/esm/input/password.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useImperativeHandle, useMemo, useRef, useState } from 'react';
import withDefaults from '../utils/with-defaults';
import { defaultProps } from './input-props';
import PasswordIcon from './password-icon';
import Input from './input';

var passwordDefaultProps = _extends(_extends({}, defaultProps), {}, {
  hideToggle: false
});

var InputPassword = React.forwardRef(function (_ref, ref) {
  var hideToggle = _ref.hideToggle,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, ["hideToggle", "children"]);

  var inputRef = useRef(null);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  useImperativeHandle(ref, function () {
    return inputRef.current;
  });

  var iconRightClickHandler = function iconRightClickHandler() {
    setVisible(function (v) {
      return !v;
    });
    /* istanbul ignore next */

    if (inputRef && inputRef.current) {
      inputRef.current.focus();
    }
  };

  var inputProps = useMemo(function () {
    return _extends(_extends({}, props), {}, {
      ref: inputRef,
      iconRightClickable: true,
      onIconRightClick: iconRightClickHandler,
      type: visible ? 'text' : 'password'
    });
  }, [props, iconRightClickHandler, visible, inputRef]);
  var icon = useMemo(function () {
    if (hideToggle) return null;
    return /*#__PURE__*/React.createElement(PasswordIcon, {
      visible: visible
    });
  }, [hideToggle, visible]);
  return /*#__PURE__*/React.createElement(Input, _extends({
    iconRight: icon
  }, inputProps), children);
});
export default withDefaults(InputPassword, passwordDefaultProps);