From 533c11ba71b79296c3743a49d25e3fbff4b56654 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 12 Apr 2021 14:33:14 +0300
Subject: [PATCH] Refactor #1951 - For Password

---
 src/components/password/Password.d.ts |  2 ++
 src/components/password/Password.js   | 12 ++++++++++--
 src/showcase/password/PasswordDoc.js  | 25 +++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
index 248df5463b..e1d63bb382 100644
--- a/src/components/password/Password.d.ts
+++ b/src/components/password/Password.d.ts
@@ -42,6 +42,8 @@ interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttr
     panelClassName?: string;
     transitionOptions?: object;
     onInput?(event: React.FormEvent<HTMLInputElement>, validatePattern: boolean): void;
+    onShow?(): void;
+    onHide?(): void;
 }
 
 export class Password extends React.Component<PasswordProps, any> { }
diff --git a/src/components/password/Password.js b/src/components/password/Password.js
index b9fd9e715e..02133a089b 100644
--- a/src/components/password/Password.js
+++ b/src/components/password/Password.js
@@ -39,7 +39,9 @@ export class Password extends Component {
         panelStyle: null,
         panelClassName: null,
         transitionOptions: null,
-        onInput: null
+        onInput: null,
+        onShow: null,
+        onHide: null
     };
 
     static propTypes = {
@@ -67,7 +69,9 @@ export class Password extends Component {
         panelStyle: PropTypes.object,
         panelClassName: PropTypes.string,
         transitionOptions: PropTypes.object,
-        onInput: PropTypes.func
+        onInput: PropTypes.func,
+        onShow: PropTypes.func,
+        onHide: PropTypes.func
     };
 
     constructor(props) {
@@ -204,6 +208,8 @@ export class Password extends Component {
     onOverlayEntered() {
         this.bindScrollListener();
         this.bindResizeListener();
+
+        this.props.onShow && this.props.onShow();
     }
 
     onOverlayExit() {
@@ -213,6 +219,8 @@ export class Password extends Component {
 
     onOverlayExited() {
         ZIndexUtils.clear(this.overlayRef.current);
+
+        this.props.onHide && this.props.onHide();
     }
 
     onFocus(event) {
diff --git a/src/showcase/password/PasswordDoc.js b/src/showcase/password/PasswordDoc.js
index 22e79c35ba..83a6e105db 100644
--- a/src/showcase/password/PasswordDoc.js
+++ b/src/showcase/password/PasswordDoc.js
@@ -356,6 +356,31 @@ import {Password} from 'primereact/password';
                             </table>
                         </div>
 
+                        <h5>Events</h5>
+                        <div className="doc-tablewrapper">
+                            <table className="doc-table">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Parameters</th>
+                                    <th>Description</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>onShow</td>
+                                        <td>-</td>
+                                        <td>Callback to invoke when overlay becomes visible.</td>
+                                    </tr>
+                                    <tr>
+                                        <td>onHide</td>
+                                        <td>-</td>
+                                        <td>Callback to invoke when overlay becomes hidden.</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
                         <h5>Styling</h5>
                         <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
                         <div className="doc-tablewrapper">