Refactor #1917 - For ColorPicker

primefaces · Apr 12, 2021 · 88d526e · 88d526e
1 parent 77c5238
commit 88d526e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
@@ -29,6 +29,7 @@ interface ColorPickerProps {
     inputId?: string;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
+    transitionOptions?: object;
     onChange?(e: ChangeParams): void;
 }
 

diff --git a/src/components/colorpicker/ColorPicker.js b/src/components/colorpicker/ColorPicker.js
@@ -26,6 +26,7 @@ export class ColorPicker extends Component {
         inputId: null,
         tooltip: null,
         tooltipOptions: null,
+        transitionOptions: null,
         onChange: null
     }
 
@@ -44,6 +45,7 @@ export class ColorPicker extends Component {
         inputId: PropTypes.string,
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
+        transitionOptions: PropTypes.object,
         onChange: PropTypes.func
     }
 
@@ -697,7 +699,8 @@ export class ColorPicker extends Component {
             <div ref={(el) => this.container = el} id={this.props.id} style={this.props.style} className={containerClassName}>
                 {input}
                 <ColorPickerPanel ref={this.overlayRef} appendTo={this.props.appendTo} inline={this.props.inline} disabled={this.props.disabled} 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}>
                     {content}
                 </ColorPickerPanel>
             </div>

diff --git a/src/components/colorpicker/ColorPickerPanel.js b/src/components/colorpicker/ColorPickerPanel.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { Portal } from '../portal/Portal';
 
 class ColorPickerPanelComponent extends Component {
@@ -27,7 +27,7 @@ class ColorPickerPanelComponent extends Component {
         });
 
         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={className} onClick={this.props.onClick}>
                     {this.props.children}

diff --git a/src/showcase/colorpicker/ColorPickerDoc.js b/src/showcase/colorpicker/ColorPickerDoc.js
@@ -232,6 +232,12 @@ import {ColorPicker} from 'primereact/colorpicker';
                                         <td>null</td>
                                         <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</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>