[Docs] TextInput password visibility example

[rluders]

Summary

Add an example for TextInput component to toggle password visibility. It should be possible once #758 gets merged.

Context

Improve documentation examples to display new features and common use cases of the components.

[tulup-conner]

I like the idea, but I can't find it on flowbite.com. @zoltanszogyenyi am I missing this somewhere? All Flowbite libraries definitely should have this

[theogravity]

Also looking for this.

[nawafinity]

@rluders

I think this is possible and relatively simple once you explore the TextInput code. Here’s an example I created:

I built a custom component that returns a TextInput and extended its props. This way, the user of this component can't override certain key properties, such as the input type.

To achieve the desired functionality, I also applied some Flowbite utilities. Below is a working example of the PasswordInput component that allows toggling between password visibility using icons:

import { getTheme, TextInput, TextInputProps } from "flowbite-react";
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/16/solid";
import classNames from "classnames";
import React, { MouseEventHandler, forwardRef } from "react";

export type PasswordInputProps = TextInputProps;

const svgIconTheme = (visibility: boolean, callback: MouseEventHandler) => {
    const Icon = visibility ? EyeSlashIcon : EyeIcon;
    const className = 'text-congress-blue-900';
    return (
        <Icon
            className={classNames(getTheme().textInput.field.icon.svg, 'cursor-pointer', visibility && className)}
            onClick={callback}
        />
    );
};

const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
    (props, ref): JSX.Element => {
        const { type, ...otherProps } = props;
        const [passwordVisibility, setPasswordVisibility] = React.useState(false);

        function togglePasswordVisibility() {
            setPasswordVisibility(!passwordVisibility);
        }

        return (
            <TextInput
                ref={ref}
                type={passwordVisibility ? 'text' : 'password'}
                {...otherProps}
                icon={() => svgIconTheme(passwordVisibility, togglePasswordVisibility)}
                theme={{
                    field: {
                        icon: {
                            base: getTheme().textInput.field.icon.base.replace('pointer-events-none', ''),
                        }
                    }
                }}
            />
        );
    }
);

PasswordInput.displayName = 'PasswordInput'; // Needed when using forwardRef

export default PasswordInput;