Refactor #1917 - For Sidebar

primefaces · Apr 12, 2021 · 99772ff · 99772ff
1 parent 31472e7
commit 99772ff
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/sidebar/Sidebar.d.ts b/src/components/sidebar/Sidebar.d.ts
@@ -19,6 +19,7 @@ interface SidebarProps {
     closeOnEscape?: boolean;
     icons?: TemplateType;
     modal?: boolean;
+    transitionOptions?: object;
     onShow?(): void;
     onHide(): void;
 }

diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { Ripple } from '../ripple/Ripple';
 import { ZIndexUtils } from '../utils/ZIndexUtils';
 
@@ -24,6 +24,7 @@ export class Sidebar extends Component {
         closeOnEscape: true,
         icons: null,
         modal: true,
+        transitionOptions: null,
         onShow: null,
         onHide: null
     };
@@ -43,6 +44,7 @@ export class Sidebar extends Component {
         closeOnEscape: PropTypes.bool,
         icons: PropTypes.any,
         modal: PropTypes.bool,
+        transitionOptions: PropTypes.object,
         onShow: PropTypes.func,
         onHide: PropTypes.func.isRequired
     };
@@ -229,7 +231,7 @@ export class Sidebar extends Component {
         };
 
         return (
-            <CSSTransition nodeRef={this.sidebarRef} classNames="p-sidebar" in={this.props.visible} timeout={transitionTimeout}
+            <CSSTransition nodeRef={this.sidebarRef} classNames="p-sidebar" in={this.props.visible} timeout={transitionTimeout} options={this.props.transitionOptions}
                 unmountOnExit onEnter={this.onEnter} onEntered={this.onEntered} onExit={this.onExit} onExited={this.onExited}>
                 <div ref={this.sidebarRef} id={this.props.id} className={className} style={this.props.style} role="complementary">
                     <div className="p-sidebar-icons">

diff --git a/src/showcase/sidebar/SidebarDoc.js b/src/showcase/sidebar/SidebarDoc.js
@@ -430,6 +430,12 @@ import { Sidebar } from 'primereact/sidebar';
                                         <td>true</td>
                                         <td>Specifies if pressing escape key should hide the sidebar.</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>