refactor: clean components with fade functionality

Author: woothu

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.4.0",
+    "@coreui/utils": "1.2.4",
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "perfect-scrollbar": "^1.5.0",

src/CAlert.js

@@ -56,7 +56,6 @@ const CAlert = props => {
   return (
     <CFade
       {...alertTransition}
-      tag="div"
       className={classes}
       in={Boolean(isOpen)}
       role="alert"

src/CCollapse.js

@@ -1,33 +1,28 @@
-import React, {useState} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {
-  omit,
-  pick,
-  TransitionTimeouts,
-  TransitionPropTypeKeys,
-  TransitionStatuses
-} from './Shared/helper.js';
-import {Transition} from 'react-transition-group';
+import React, {useState} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { pickByKeys } from '@coreui/utils/src'
+import { TransitionPropTypeKeys } from './Shared/helper.js'
+import { Transition } from 'react-transition-group'
 
 const transitionStatusToClassHash = {
-  [TransitionStatuses.ENTERING]: 'collapsing',
-  [TransitionStatuses.ENTERED]: 'collapse show',
-  [TransitionStatuses.EXITING]: 'collapsing',
-  [TransitionStatuses.EXITED]: 'collapse',
+  entering: 'collapsing',
+  entered: 'collapse show',
+  exiting: 'collapsing',
+  exited: 'collapse'
 };
 
-const getTransitionClass = status=>{
-  return transitionStatusToClassHash[status] || 'collapse';
+const getTransitionClass = status => {
+  return transitionStatusToClassHash[status] || 'collapse'
 }
 
-const getHeight = node=>{
+const getHeight = node => {
   return node.scrollHeight;
 }
 
 //component - CoreUI / CCollapse
 
-const CCollapse = props=>{
+const CCollapse = props => {
 
   const {
     children,
@@ -36,7 +31,7 @@ const CCollapse = props=>{
     innerRef,
     show,
     navbar,
-    ...otherProps
+    ...rest
   } = props;
 
   const [height, setHeight] = useState(null);
@@ -68,9 +63,11 @@ const CCollapse = props=>{
   }
 
   //render
-
-  const transitionProps = pick(otherProps, TransitionPropTypeKeys);
-  const childProps = omit(otherProps, TransitionPropTypeKeys);
+  const transitionProps = pickByKeys(rest, TransitionPropTypeKeys)
+  const childPropKeys = Object.keys(rest).filter(attr => {
+    return !TransitionPropTypeKeys.includes(attr)
+  })
+  const childProps = pickByKeys(rest, childPropKeys)
 
   return (
     <Transition
@@ -83,13 +80,13 @@ const CCollapse = props=>{
       onExited={onExited}
     >
       {(status) => {
-        let collapseClass = getTransitionClass(status);
+        let collapseClass = getTransitionClass(status)
         const classes = classNames(
           className,
           collapseClass,
           navbar && 'navbar-collapse'
         );
-        const style = height === null ? null : { height };
+        const style = height === null ? null : { height }
         return (
           <div
             {...childProps}
@@ -99,11 +96,10 @@ const CCollapse = props=>{
           >
             {children}
           </div>
-        );
+        )
       }}
     </Transition>
-  );
-
+  )
 }
 
 CCollapse.propTypes = {
@@ -125,7 +121,7 @@ CCollapse.defaultProps = {
   appear: false,
   enter: true,
   exit: true,
-  timeout: TransitionTimeouts.Collapse,
+  timeout: 350,
 };
 
-export default CCollapse;
+export default CCollapse

src/CFade.js

@@ -1,12 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { omit, pick, TransitionPropTypeKeys, TransitionTimeouts, tagPropType} from './Shared/helper.js';
-import {Transition} from 'react-transition-group';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { pickByKeys } from '@coreui/utils/src'
+import { TransitionPropTypeKeys, tagPropType } from './Shared/helper.js'
+import { Transition } from 'react-transition-group'
 
 //component - CoreUI / CFade
-
-const CFade = props=>{
+const CFade = props => {
 
   const {
     tag: Tag,
@@ -16,32 +16,33 @@ const CFade = props=>{
     innerRef,
     baseClass,
     baseClassActive,
-    ...attributes
-  } = props;
+    ...rest
+  } = props
 
   //render
-
-  const transitionProps = pick(attributes, TransitionPropTypeKeys);
-  const childProps = omit(attributes, TransitionPropTypeKeys);
+  const transitionProps = pickByKeys(rest, TransitionPropTypeKeys)
+  const childPropKeys = Object.keys(rest).filter(key => {
+    return !TransitionPropTypeKeys.includes(key)
+  })
+  const childProps = pickByKeys(rest, childPropKeys)
 
   return (
     <Transition {...transitionProps}>
       {(status) => {
-        const isActive = status === 'entered';
+        const isActive = status === 'entered'
         const classes = classNames(
           className,
           baseClass,
           isActive && baseClassActive
-        );
+        )
         return (
           <Tag className={classes} {...childProps} ref={innerRef}>
             {children}
           </Tag>
-        );
+        )
       }}
     </Transition>
-  );
-
+  )
 }
 
 CFade.propTypes = {
@@ -64,11 +65,11 @@ CFade.defaultProps = {
   //
   baseClass: 'fade',
   baseClassActive: 'show',
-  timeout: TransitionTimeouts.Fade,
+  timeout: 150,
   appear: true,
   enter: true,
   exit: true,
-  in: true,
+  in: true
 };
 
-export default CFade;
+export default CFade

src/CTabPane.js

@@ -39,7 +39,6 @@ const CTabPane = props => {
 
   return (
     <CFade
-      tag="div"
       in={isActive}
       baseClass={context && context.fade ? 'fade' : ''}
       className={classes} 

src/CToast.js

@@ -93,7 +93,6 @@ const CToast = props => {
     <Context.Provider value={{ close }}>
       {
         state && <CFade
-          tag={'div'}
           className={classes}   
           role="alert"
           aria-live="assertive"

src/Shared/helper.js

@@ -1,33 +1,4 @@
-import PropTypes from 'prop-types';
-
-
-/* eslint key-spacing: ["error", { afterColon: true, align: "value" }] */
-// These are all setup to match what is in the bootstrap _variables.scss
-// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
-export const TransitionTimeouts = {
-  Fade:     150, // $transition-fade
-  Collapse: 350, // $transition-collapse
-  Modal:    300, // $modal-transition
-  Carousel: 600, // $carousel-transition
-};
-
-export const PopperPlacements = [
-  'auto-start',
-  'auto',
-  'auto-end',
-  'top-start',
-  'top',
-  'top-end',
-  'right-start',
-  'right',
-  'right-end',
-  'bottom-end',
-  'bottom',
-  'bottom-start',
-  'left-end',
-  'left',
-  'left-start',
-];
+import PropTypes from 'prop-types'
 
 // Duplicated Transition.propType keys to ensure that Reactstrap builds
 // for distribution properly exclude these keys for nested child HTML attributes
@@ -45,16 +16,9 @@ export const TransitionPropTypeKeys = [
   'onEntered',
   'onExit',
   'onExiting',
-  'onExited',
+  'onExited'
 ];
 
-export const TransitionStatuses = {
-  ENTERING: 'entering',
-  ENTERED:  'entered',
-  EXITING:  'exiting',
-  EXITED:   'exited',
-};
-
 export const canUseDOM = !!(
   typeof window !== 'undefined' &&
   window.document &&
@@ -68,7 +32,7 @@ export const targetPropType = PropTypes.oneOfType([
   PropTypes.shape({ current: PropTypes.any }),
 ]);
 
-const tagPropType = PropTypes.oneOfType([
+export const tagPropType = PropTypes.oneOfType([
   PropTypes.func,
   PropTypes.string,
   PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
@@ -79,30 +43,6 @@ const tagPropType = PropTypes.oneOfType([
   ]))
 ]);
 
-export function omit(obj, omitKeys) {
-  const result = {};
-  Object.keys(obj).forEach(key => {
-    if (omitKeys.indexOf(key) === -1) {
-      result[key] = obj[key];
-    }
-  });
-  return result;
-}
-
-export function pick(obj, keys) {
-  const pickKeys = Array.isArray(keys) ? keys : [keys];
-  let length = pickKeys.length;
-  let key;
-  const result = {};
-
-  while (length > 0) {
-    length -= 1;
-    key = pickKeys[length];
-    result[key] = obj[key];
-  }
-  return result;
-}
-
 
 export function DOMElement(props, propName, componentName) {
   if (!(props[propName] instanceof Element)) {
@@ -116,7 +56,7 @@ export function DOMElement(props, propName, componentName) {
   }
 }
 
-function deprecated(propType, explanation) {
+export function deprecated(propType, explanation) {
   return function validate(props, propName, componentName, ...rest) {
     if (props[propName] !== null && typeof props[propName] !== 'undefined') {
       console.error(
@@ -125,6 +65,4 @@ function deprecated(propType, explanation) {
     }
     return propType(props, propName, componentName, ...rest);
   }
-}
-
-export { tagPropType, deprecated }
+}