-
-
Notifications
You must be signed in to change notification settings - Fork 300
/
PasswordWithMessage.tsx
59 lines (56 loc) · 1.41 KB
/
PasswordWithMessage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React, { forwardRef, ReactElement } from "react";
import {
FieldMessageContainerExtension,
FormMessageContainer,
} from "../FormMessageContainer";
import { Password, PasswordProps } from "./Password";
/**
* @remarks \@since 2.5.0
*/
export type PasswordWithMessageProps =
FieldMessageContainerExtension<PasswordProps>;
/**
* This component is a simple wrapper for the `Password` and `FormMessage`
* components that should be used along with the `useTextField` hook to
* conditionally show help and error messages with a `Password`.
*
* Simple example:
*
* ```ts
* const [value, fieldProps] = useTextField({
* id: "field-id",
* required: true,
* minLength: 10,
* });
*
* return (
* <PasswordWithMessage
* label="Label"
* placeholder="Placeholder"
* {...fieldProps}
* />
* );
* ```
*
* Note: Unline the `TextFieldWithMessage` and `TextAreaWithMessage`, the error
* icon will do nothing for this component unless the `disableVisibility` prop
* is enabled.
*
* @remarks \@since 2.5.0
*/
export const PasswordWithMessage = forwardRef<
HTMLInputElement,
PasswordWithMessageProps
>(function PasswordWithMessage(
{ messageProps, messageContainerProps, ...props },
ref
): ReactElement {
return (
<FormMessageContainer
{...messageContainerProps}
messageProps={messageProps}
>
<Password {...props} ref={ref} />
</FormMessageContainer>
);
});