Refactor #1917 - For Calendar

primefaces · Apr 12, 2021 · f5cdda6 · f5cdda6
1 parent f858ed9
commit f5cdda6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
@@ -95,6 +95,7 @@ interface CalendarProps {
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     ariaLabelledBy?: string;
+    transitionOptions?: object;
     dateTemplate?(e: DateTemplateParams): React.ReactNode;
     headerTemplate?(): React.ReactNode;
     footerTemplate?(): React.ReactNode;

diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
@@ -79,6 +79,7 @@ export class Calendar extends Component {
         dateTemplate: null,
         headerTemplate: null,
         footerTemplate: null,
+        transitionOptions: null,
         onFocus: null,
         onBlur: null,
         onInput: null,
@@ -153,6 +154,7 @@ export class Calendar extends Component {
         dateTemplate: PropTypes.func,
         headerTemplate: PropTypes.func,
         footerTemplate: PropTypes.func,
+        transitionOptions: PropTypes.object,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
         onInput: PropTypes.func,
@@ -1526,7 +1528,7 @@ export class Calendar extends Component {
 
     onOverlayEnter() {
         if (this.props.autoZIndex) {
-            ZIndexUtils.set(this.props.touchUI ? 'modal': 'overlay', this.overlayRef.current, this.props.baseZIndex);
+            ZIndexUtils.set(this.props.touchUI ? 'modal' : 'overlay', this.overlayRef.current, this.props.baseZIndex);
         }
         this.alignOverlay();
     }
@@ -3014,7 +3016,8 @@ export class Calendar extends Component {
                 {input}
                 {button}
                 <CalendarPanel ref={this.overlayRef} className={panelClassName} style={this.props.panelStyle} appendTo={this.props.appendTo} inline={this.props.inline} onClick={this.onPanelClick}
-                    in={this.props.inline || this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}>
+                    in={this.props.inline || this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}
+                    transitionOptions={this.props.transitionOptions}>
                     {datePicker}
                     {timePicker}
                     {buttonBar}

diff --git a/src/components/calendar/CalendarPanel.js b/src/components/calendar/CalendarPanel.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { Portal } from '../portal/Portal';
 
 class CalendarPanelComponent extends Component {
@@ -19,7 +19,7 @@ class CalendarPanelComponent extends Component {
 
     renderElement() {
         return (
-            <CSSTransition nodeRef={this.props.forwardRef} classNames="p-connected-overlay" in={this.props.in} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.props.forwardRef} classNames="p-connected-overlay" in={this.props.in} timeout={{ enter: 120, exit: 100 }} options={this.props.transitionOptions}
                 unmountOnExit onEnter={this.props.onEnter} onEntered={this.props.onEntered} onExit={this.props.onExit} onExited={this.props.onExited}>
                 <div ref={this.props.forwardRef} className={this.props.className} style={this.props.style} onClick={this.props.onClick}>
                     {this.props.children}

diff --git a/src/showcase/calendar/CalendarDoc.js b/src/showcase/calendar/CalendarDoc.js
@@ -1015,6 +1015,12 @@ dateTemplate(date) {
                                         <td>null</td>
                                         <td>Function that gets a date information and returns the cell content in datepicker.</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>