Updated proptypes check for transitionName property

ryank109 · Dec 20, 2017 · a23d960 · a23d960
1 parent 6ffa411
commit a23d960
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Set of components to handle modal dialog and popups with redux actions.
      - `style` - optional styles to apply on the modal
      - `transitionEnterTimeout` - enter transition time (defaults to 300ms)
      - `transitionExitTimeout` - exit transition time (defaults to 300ms)
-     - `transitionName` - the transition name. Defaults to `modal`. See [Animation](https://github.com/ryank109/react-redux-popup#animation) for more details
+     - `transitionName` - the transition name. Defaults to `modal`. See [Animation](https://github.com/ryank109/react-redux-popup#animation) for more details. This property directly translates to [classNames](https://reactcommunity.org/react-transition-group/#CSSTransition-prop-classNames) property from CSSTransition, so you can also use the object to define specific class names.
 
  - **Popup** - creates a popup on the location specified in `options` argument on `openPopup`.  Clicking outside of the popup should close this popup or with dispatching `closePopup` action.
    - Properties:
@@ -46,7 +46,7 @@ Set of components to handle modal dialog and popups with redux actions.
      - `offset` - the offset distance from the anchored element in pixels
      - `transitionEnterTimeout` - enter transition time (defaults to 100ms)
      - `transitionExitTimeout` - exit transition time (defaults to 100ms)
-     - `transitionName` - the transition name. Defaults to `popup`. See [Animation](https://github.com/ryank109/react-redux-popup#animation) for more details
+     - `transitionName` - the transition name. Defaults to `popup`. See [Animation](https://github.com/ryank109/react-redux-popup#animation) for more details. This property directly translates to [classNames](https://reactcommunity.org/react-transition-group/#CSSTransition-prop-classNames) property from CSSTransition, so you can also use the object to define specific class names
 
  - **Portal** - this component is where the popup and modal will be rendered to.  Or you can define your own portal element and pass that to `Modal` and/or `Popup` components via `getPortalElement` property.
 

diff --git a/src/modal.jsx b/src/modal.jsx
@@ -34,7 +34,17 @@ Modal.propTypes = {
     style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     transitionEnterTimeout: PropTypes.number.isRequired,
     transitionExitTimeout: PropTypes.number.isRequired,
-    transitionName: PropTypes.string.isRequired,
+    transitionName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            appear: PropTypes.string,
+            appearActive: PropTypes.string,
+            enter: PropTypes.string,
+            enterActive: PropTypes.string,
+            exit: PropTypes.string,
+            exitActive: PropTypes.string,
+        }),
+    ]).isRequired,
 };
 
 Modal.defaultProps = {

diff --git a/src/popup.jsx b/src/popup.jsx
@@ -55,7 +55,17 @@ Popup.propTypes = {
     style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
     transitionEnterTimeout: PropTypes.number.isRequired,
     transitionExitTimeout: PropTypes.number.isRequired,
-    transitionName: PropTypes.string.isRequired,
+    transitionName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            appear: PropTypes.string,
+            appearActive: PropTypes.string,
+            enter: PropTypes.string,
+            enterActive: PropTypes.string,
+            exit: PropTypes.string,
+            exitActive: PropTypes.string,
+        }),
+    ]).isRequired,
 };
 
 Popup.defaultProps = {

diff --git a/src/transition-wrapper.jsx b/src/transition-wrapper.jsx
@@ -56,7 +56,17 @@ TransitionWrapper.propTypes = {
     render: PropTypes.func.isRequired,
     transitionEnterTimeout: PropTypes.number.isRequired,
     transitionExitTimeout: PropTypes.number.isRequired,
-    transitionName: PropTypes.string.isRequired,
+    transitionName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            appear: PropTypes.string,
+            appearActive: PropTypes.string,
+            enter: PropTypes.string,
+            enterActive: PropTypes.string,
+            exit: PropTypes.string,
+            exitActive: PropTypes.string,
+        }),
+    ]).isRequired,
 };
 
 TransitionWrapper.defaultProps = {