Refactor #1917 - For Galleria

primefaces · Apr 12, 2021 · 68f7d7d · 68f7d7d
1 parent 14486c5
commit 68f7d7d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/galleria/Galleria.d.ts b/src/components/galleria/Galleria.d.ts
@@ -39,6 +39,7 @@ interface GalleriaProps {
     showIndicatorsOnItem?: boolean;
     indicatorsPosition?: PositionType;
     baseZIndex?: number;
+    transitionOptions?: object;
     onItemChange?(e: ItemChangeParams): void;
 }
 

diff --git a/src/components/galleria/Galleria.js b/src/components/galleria/Galleria.js
@@ -5,7 +5,7 @@ import UniqueComponentId from '../utils/UniqueComponentId';
 import { GalleriaItem } from './GalleriaItem';
 import { GalleriaThumbnails } from './GalleriaThumbnails';
 import DomHandler from '../utils/DomHandler';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { Ripple } from '../ripple/Ripple';
 import { Portal } from '../portal/Portal';
 import { ZIndexUtils } from '../utils/ZIndexUtils';
@@ -41,6 +41,7 @@ export class Galleria extends Component {
         showIndicatorsOnItem: false,
         indicatorsPosition: "bottom",
         baseZIndex: 0,
+        transitionOptions: null,
         onItemChange: null
     }
 
@@ -72,6 +73,7 @@ export class Galleria extends Component {
         showIndicatorsOnItem: PropTypes.bool,
         indicatorsPosition: PropTypes.string,
         baseZIndex: PropTypes.number,
+        transitionOptions: PropTypes.object,
         onItemChange: PropTypes.func
     }
 
@@ -266,7 +268,7 @@ export class Galleria extends Component {
 
             const galleriaWrapper = (
                 <div ref={(el) => this.mask = el} className={maskClassName}>
-                    <CSSTransition nodeRef={this.galleriaRef} classNames="p-galleria" in={this.state.visible} timeout={{ enter: 150, exit: 150 }}
+                    <CSSTransition nodeRef={this.galleriaRef} classNames="p-galleria" in={this.state.visible} timeout={{ enter: 150, exit: 150 }} options={this.props.transitionOptions}
                         unmountOnExit onEnter={this.onEnter} onEntering={this.onEntering} onExit={this.onExit} onExited={this.onExited}>
                         {element}
                     </CSSTransition>

diff --git a/src/showcase/galleria/GalleriaDoc.js b/src/showcase/galleria/GalleriaDoc.js
@@ -288,6 +288,12 @@ const responsiveOptions = [
                             <td>0</td>
                             <td>Base zIndex value to use in layering.</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>