@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
27 lines (26 loc) • 1.39 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef, useState } from 'react';
import { TextInput } from 'react-native-paper';
/**
* Component that renders textfield with a visibility toggle. The toggle changes the
* input from hidden to visible.
*
* @param {TextInputProps} props - all props will be passed to the underlying TextField component
*
* @category Component
*/
export const PasswordTextField = forwardRef((props, ref) => {
const otherProps = __rest(props, []);
const [showPassword, setShowPassword] = useState(false);
return (React.createElement(TextInput, Object.assign({ ref: ref, testID: "blui-password-text-field", secureTextEntry: !showPassword, mode: "flat", label: "Password", right: React.createElement(TextInput.Icon, { testID: "blui-password-text-field-toggle-button", icon: showPassword ? 'eye' : 'eye-off', onPress: () => setShowPassword(!showPassword) }) }, otherProps)));
});