fix: remove possibility of inheriting advanced transition options

- clear files: add omitByProps function
- change toast css import

Author: woothu

package.json

@@ -40,8 +40,8 @@
   "dependencies": {
     "@popperjs/core": "~2.4.0",
     "@coreui/icons": "^1.0.1",
-    "@coreui/icons-react": "^1.0.0-alpha.5",
-    "@coreui/utils": "1.2.4",
+    "@coreui/icons-react": "^1.0.0-beta.1",
+    "@coreui/utils": "~1.3.1",
     "classnames": "~2.2.6",
     "core-js": "~3.6.5",
     "perfect-scrollbar": "~1.5.0",
@@ -62,7 +62,7 @@
     "eslint": "^7.0.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-react": "^7.20.0",
-    "nwb": "^0.24.6",
+    "nwb": "^0.25.2",
     "sinon": "^9.0.2"
   },
   "repository": {

src/alert/CAlert.js

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import CFade from '../fade/CFade'
+import { omitByKeys } from '@coreui/utils/src'
+import { CFadeProps } from '../utils/helper.js'
 import CButtonClose from '../button/CButtonClose'
 
 //component - CoreUI / CAlert
@@ -53,13 +55,15 @@ const CAlert = props => {
     return () => clearTimeout(timeout.current)
   }, [isOpen])
 
+  const attrs = omitByKeys(attributes, CFadeProps)
+
   return (
     <CFade
       {...alertTransition}
       className={classes}
       in={Boolean(isOpen)}
       role="alert"
-      {...attributes}
+      {...attrs}
     >
       { children }
       { closeButton && <CButtonClose onClick={() => setIsOpen(false)} />}
@@ -80,8 +84,6 @@ CAlert.propTypes = {
 };
 
 CAlert.defaultProps = {
-  tag: 'div',
-  //
   show: true,
   fade: true
 };

src/collapse/CCollapse.js

@@ -1,7 +1,7 @@
 import React, {useState} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { pickByKeys } from '@coreui/utils/src'
+import { omitByKeys } from '@coreui/utils/src'
 import { TransitionPropTypeKeys } from '../utils/helper.js'
 import { Transition } from 'react-transition-group'
 
@@ -63,15 +63,10 @@ const CCollapse = props => {
   }
 
   //render
-  const transitionProps = pickByKeys(rest, TransitionPropTypeKeys)
-  const childPropKeys = Object.keys(rest).filter(attr => {
-    return !TransitionPropTypeKeys.includes(attr)
-  })
-  const childProps = pickByKeys(rest, childPropKeys)
+  const childProps = omitByKeys(rest, TransitionPropTypeKeys)
 
   return (
     <Transition
-      {...transitionProps}
       in={show}
       onEntering={onEntering}
       onEntered={onEntered}

src/fade/CFade.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { pickByKeys } from '@coreui/utils/src'
+import { pickByKeys, omitByKeys } from '@coreui/utils/src'
 import { TransitionPropTypeKeys, tagPropType } from '../utils/helper.js'
 import { Transition } from 'react-transition-group'
 
@@ -21,10 +21,7 @@ const CFade = props => {
 
   //render
   const transitionProps = pickByKeys(rest, TransitionPropTypeKeys)
-  const childPropKeys = Object.keys(rest).filter(key => {
-    return !TransitionPropTypeKeys.includes(key)
-  })
-  const childProps = pickByKeys(rest, childPropKeys)
+  const childProps = omitByKeys(rest, TransitionPropTypeKeys)
 
   return (
     <Transition {...transitionProps}>

src/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react'
 
 type ChildElement = any
 
-interface CAlert extends CFade {
+interface CAlert {
   children?: ChildElement;
   className?: string;
   innerRef?: object | Function | string;
@@ -247,7 +247,7 @@ interface Transition {
   onExited?: Function;
 }
 
-interface CCollapse extends Transition {
+interface CCollapse {
   children?: ChildElement | Array<ChildElement>;
   className?: string;
   innerRef?: object | Function | string;
@@ -908,14 +908,25 @@ interface CSubheader {
   innerRef?: object | Function | string;
 }
 
+interface CSwitch {
+  className?: string
+  innerRef?: object | Function | string
+  size?: '' | 'lg' | 'sm'
+  color?: string 
+  labelOn?: string 
+  labelOff?: string
+  variant?: '' | '3d' | 'opposite' | 'outline'
+  shape?: '' | 'pill' | 'square'
+}
+
 interface CTabContent {
   children?: ChildElement;
   className?: string;
   innerRef?: object | Function | string;
   fade?: boolean;
 }
 
-interface CTabPane extends CFade {
+interface CTabPane {
   children?: ChildElement;
   className?: string;
   innerRef?: func | string | object;
@@ -928,7 +939,7 @@ interface CTabs {
   onActiveTabChange?: Function;
 }
 
-interface CToast extends CFade {
+interface CToast {
   className?: string;
   children?: ChildElement;
   innerRef?: func | string | object;
@@ -1137,6 +1148,7 @@ export declare const CSidebarNavItem: (props: CSidebarNavItem) => React.SFC<CSid
 export declare const CSidebarNavTitle: (props: CSidebarNavTitle) => React.SFC<CSidebarNavTitle>;
 export declare const CSpinner: (props: CSpinner) => React.SFC<CSpinner>;
 export declare const CSubheader: (props: CSubheader) => React.SFC<CSubheader>;
+export declare const CSwitch: (props: CSwitch) => React.SFC<CSwitch>;
 export declare const CTabContent: (props: CTabContent) => React.SFC<CTabContent>;
 export declare const CTabPane: (props: CTabPane) => React.SFC<CTabPane>;
 export declare const CTabs: (props: CTabs) => React.SFC<CTabs>;

src/tabs/CTabPane.js

@@ -2,6 +2,8 @@ import React, { useState, useContext, createRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import CFade from '../fade/CFade'
+import { omitByKeys } from '@coreui/utils/src'
+import { CFadeProps } from '../utils/helper.js'
 
 import { Context } from './CTabs.js'
 import { Context as FadeContext } from './CTabContent.js'
@@ -38,12 +40,14 @@ const CTabPane = props => {
     className
   )
 
+  const attrs = omitByKeys(attributes, CFadeProps)
+
   return (
     <CFade
       in={isActive}
       baseClass={fade ? 'fade' : ''}
       className={classes} 
-      {...attributes} 
+      {...attrs} 
       innerRef={ref}
     />
   )

src/toast/CToast.module.css renamed to src/toast/CToast.css

@@ -1,6 +1,6 @@
-.fade {
+.toast-fade {
   transition: opacity .5s;
 }
-.slowfade {
+.toast-fade-slow {
   transition: opacity 2s;
 }

src/toast/CToast.js

@@ -2,7 +2,9 @@ import React, { useState, useRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import CFade from '../fade/CFade'
-import style from './CToast.module.css'
+import { omitByKeys } from '@coreui/utils/src'
+import { CFadeProps } from '../utils/helper.js'
+import './CToast.css'
 
 export const Context = React.createContext({})
 
@@ -81,14 +83,13 @@ const CToast = props => {
   }
 
   // render
-  const classes = classNames(
-    'toast', className
-  )
+  const classes = classNames('toast', className)
 
   const fadeClasses = classNames(
-    fade ? style[`${state === 'hiding' ? 'slowfade' : 'fade' }`] : 'show'
+    fade && (state === 'hiding' ? 'toast-fade-slow' : 'toast-fade')
   )
 
+  const attrs = omitByKeys(attributes, CFadeProps)
   return (
     <Context.Provider value={{ close }}>
       {
@@ -97,12 +98,12 @@ const CToast = props => {
           role="alert"
           aria-live="assertive"
           aria-atomic="true"
-          {...attributes}
           in={state === true}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
           baseClass={fadeClasses}
           innerRef={innerRef}
+          {...attrs}
         >
           {children}
         </CFade>

src/utils/helper.js

@@ -19,6 +19,13 @@ export const TransitionPropTypeKeys = [
   'onExited'
 ];
 
+export const CFadeProps = [
+  ...TransitionPropTypeKeys,
+  'baseClass',
+  'baseClassActive',
+  'tag'
+]
+
 export const canUseDOM = !!(
   typeof window !== 'undefined' &&
   window.document &&