diff --git a/package.json b/package.json index cd24993..a936527 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@patternfly/react-core": "^4.157.3", "@patternfly/react-table": "^4.26.6", "@patternfly/react-tokens": "^4.11.2", + "@patternfly/react-icons": "^4.11.17", "@rollup/plugin-commonjs": "^18.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^11.2.1", diff --git a/src/components/StatusIcon/StatusIcon.tsx b/src/components/StatusIcon/StatusIcon.tsx index 0b87e2f..bf1badb 100644 --- a/src/components/StatusIcon/StatusIcon.tsx +++ b/src/components/StatusIcon/StatusIcon.tsx @@ -8,7 +8,7 @@ import { QuestionCircleIcon, PauseCircleIcon, } from '@patternfly/react-icons'; -import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon'; +import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon'; import { global_disabled_color_200 as disabledColor, global_success_color_100 as successColor, diff --git a/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx b/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx new file mode 100644 index 0000000..5eae84f --- /dev/null +++ b/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import { + Button, + FormGroup, + FormGroupProps, + InputGroup, + TextInput, + TextInputProps, +} from '@patternfly/react-core'; +import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'; +import { IValidatedFormField, getFormGroupProps, getTextInputProps } from '../..'; + +interface IValidatedPasswordInputProps + extends Pick { + /** A field returned from useFormField() or useFormState().fields. */ + field: IValidatedFormField | IValidatedFormField; + /** Any extra props for the PatternFly FormGroup */ + formGroupProps?: Partial; + /** Any extra props for the PatternFly TextInput */ + inputProps?: Partial; + showPasswordAriaLabel?: string; + hidePasswordAriaLabel?: string; +} + +export const ValidatedPasswordInput: React.FunctionComponent = ({ + field, + label, + fieldId, + isRequired, + formGroupProps = {}, + inputProps = {}, + showPasswordAriaLabel = `Show ${label}`, + hidePasswordAriaLabel = `Hide ${label}`, +}: IValidatedPasswordInputProps) => { + const [isValueVisible, toggleValueVisible] = React.useReducer((isVisible) => !isVisible, false); + return ( + )} + {...formGroupProps} + > + + )} + /> + + + + ); +}; diff --git a/src/components/ValidatedTextInput/ValidatedTextInput.tsx b/src/components/ValidatedTextInput/ValidatedTextInput.tsx index b431933..fddbd13 100644 --- a/src/components/ValidatedTextInput/ValidatedTextInput.tsx +++ b/src/components/ValidatedTextInput/ValidatedTextInput.tsx @@ -17,7 +17,7 @@ import { interface IValidatedTextInputProps extends Pick, Pick { - /** A field returned from useFormField() or useFormState().fields.* */ + /** A field returned from useFormField() or useFormState().fields. */ field: IValidatedFormField | IValidatedFormField; /** Either a TextInput or TextArea from @patternfly/react-core. Defaults to TextInput */ component?: typeof TextInput | typeof TextArea; diff --git a/src/components/ValidatedTextInput/index.ts b/src/components/ValidatedTextInput/index.ts index eafba7d..7fd8775 100644 --- a/src/components/ValidatedTextInput/index.ts +++ b/src/components/ValidatedTextInput/index.ts @@ -1 +1,2 @@ export * from './ValidatedTextInput'; +export * from './ValidatedPasswordInput';