Refactor #1917 - For Password

primefaces · Apr 12, 2021 · 9deb60e · 9deb60e
1 parent 8dc6139
commit 9deb60e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
@@ -40,6 +40,7 @@ interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttr
     inputClassName?: string;
     panelStyle?: object;
     panelClassName?: string;
+    transitionOptions?: object;
     onInput?(event: React.FormEvent<HTMLInputElement>, validatePattern: boolean): void;
 }
 

diff --git a/src/components/password/Password.js b/src/components/password/Password.js
@@ -4,7 +4,7 @@ import DomHandler from '../utils/DomHandler';
 import { tip } from '../tooltip/Tooltip';
 import { InputText } from '../inputtext/InputText';
 import ObjectUtils from '../utils/ObjectUtils';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { classNames } from '../utils/ClassNames';
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import { localeOption } from '../api/Locale';
@@ -38,6 +38,7 @@ export class Password extends Component {
         inputClassName: null,
         panelStyle: null,
         panelClassName: null,
+        transitionOptions: null,
         onInput: null
     };
 
@@ -65,6 +66,7 @@ export class Password extends Component {
         inputClassName: PropTypes.string,
         panelStyle: PropTypes.object,
         panelClassName: PropTypes.string,
+        transitionOptions: PropTypes.object,
         onInput: PropTypes.func
     };
 
@@ -451,7 +453,7 @@ export class Password extends Component {
         );
 
         const panel = (
-            <CSSTransition nodeRef={this.overlayRef} classNames="p-connected-overlay" in={this.state.overlayVisible} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.overlayRef} classNames="p-connected-overlay" in={this.state.overlayVisible} timeout={{ enter: 120, exit: 100 }} options={this.props.transitionOptions}
                 unmountOnExit onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}>
                 <div ref={this.overlayRef} className={panelClassName} style={this.props.panelStyle} onClick={this.onPanelClick}>
                     {header}

diff --git a/src/showcase/password/PasswordDoc.js b/src/showcase/password/PasswordDoc.js
@@ -346,6 +346,12 @@ import {Password} from 'primereact/password';
                                         <td>null</td>
                                         <td>Inline style of the overlay panel element.</td>
                                     </tr>
+                                    <tr>
+                                        <td>transitionOptions</td>
+                                        <td>object</td>
+                                        <td>null</td>
+                                        <td>The properties of <a href="https://reactcommunity.org/react-transition-group/css-transition" rel="noopener noreferrer" target="_blank">CSSTransition</a> can be customized, except for "nodeRef" and "in" properties.</td>
+                                    </tr>
                                 </tbody>
                             </table>
                         </div>