@s-ui/react-atom-input/lib/Password/index.js

> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["onChange", "shape", "pwShowLabel", "pwHideLabel", "value", "defaultValue"];
import { forwardRef, useState } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import useControlledState from '@s-ui/react-hooks/lib/useControlledState';
import { INPUT_SHAPES } from '../config.js';
import Input from '../Input/index.js';
import { BASE_CLASS_PASSWORD, BASE_CLASS_PASSWORD_TOGGLE_BUTTON, PASSWORD, TEXT } from './config.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Password = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
  var onChange = _ref.onChange,
    shape = _ref.shape,
    pwShowLabel = _ref.pwShowLabel,
    pwHideLabel = _ref.pwHideLabel,
    value = _ref.value,
    _ref$defaultValue = _ref.defaultValue,
    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(PASSWORD),
    type = _useState[0],
    setType = _useState[1];
  var _useControlledState = useControlledState(value, defaultValue),
    innerValue = _useControlledState[0],
    setInnerValue = _useControlledState[1];
  var toggle = function toggle() {
    var inputType = type === PASSWORD ? TEXT : PASSWORD;
    setType(inputType);
  };
  var handleChange = function handleChange(ev, _ref2) {
    var value = _ref2.value;
    setInnerValue(value);
    typeof onChange === 'function' && onChange(ev, {
      value: value
    });
  };
  return /*#__PURE__*/_jsxs("div", {
    className: cx(BASE_CLASS_PASSWORD, shape && BASE_CLASS_PASSWORD + "-shape-" + shape),
    children: [/*#__PURE__*/_jsx(Input, _extends({
      ref: forwardedRef,
      shape: shape
    }, props, {
      onChange: handleChange,
      value: innerValue,
      type: type,
      noBorder: true
    })), /*#__PURE__*/_jsx("button", {
      onClick: toggle,
      type: "button",
      className: cx(BASE_CLASS_PASSWORD_TOGGLE_BUTTON, shape && BASE_CLASS_PASSWORD_TOGGLE_BUTTON + "-shape-" + shape),
      children: type === PASSWORD ? pwShowLabel : pwHideLabel
    })]
  });
});
export default Password;