react-native-hide-show-password-input icon indicating copy to clipboard operation
react-native-hide-show-password-input copied to clipboard

invertVisibilityIcon prop addition

Open thegdznet opened this issue 3 years ago • 0 comments

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

As my Mobile PM wanted to have the crossed eye icon when the password is shown, i have introduced new invertVisibilityIcon property (false by default to follow initial behavior).

Feel free to do what You want with this suggestion.

Regards, Guillaume.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js b/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js
index fbe863d..47f7686 100755
--- a/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js
+++ b/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js
@@ -7,16 +7,21 @@ import { TextField } from "react-native-material-textfield";
 const PasswordInputText = ({
   iconSize,
   iconColor,
+  invertVisibilityIcon,
   label,
   style,
   getRef,
   ...rest
 }) => {
-  const [eyeIcon, setEyeIcon] = useState("visibility-off");
+  const getVisibilityIcon = (isPassword) => isPassword ? 
+      ( invertVisibilityIcon ? "visibility-off" : "visibility") :
+      ( invertVisibilityIcon ? "visibility" : "visibility-off") ;
+
+  const [eyeIcon, setEyeIcon] = useState(getVisibilityIcon(false));
   const [isPassword, setIsPassword] = useState(true);
 
   const changePwdType = () => {
-    setEyeIcon(isPassword ? "visibility" : "visibility-off");
+    setEyeIcon(getVisibilityIcon(isPassword));
     setIsPassword((prevState) => !prevState);
   };
 
@@ -53,12 +58,14 @@ const styles = StyleSheet.create({
 
 PasswordInputText.defaultProps = {
   iconSize: 25,
+  invertVisibilityIcon: false,
   label: "Password",
   iconColor: "#222222",
 };
 
 PasswordInputText.propTypes = {
   iconSize: PropTypes.number,
+  invertVisibilityIcon: PropTypes.bool,
   label: PropTypes.string,
   iconColor: PropTypes.string,
 };

This issue body was partially generated by patch-package.

thegdznet avatar Oct 12 '21 14:10 thegdznet