Merge pull request #1 from coreui/dev-refactor-kw

fix: CAlert: component refactor

Author: xidedix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "3.0.0-alpha.5",
+  "version": "3.0.0-alpha.6",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {
@@ -42,26 +42,26 @@
     "link": "npm link && link.sh"
   },
   "dependencies": {
-    "@popperjs/core": "^2.2.1",
+    "@popperjs/core": "^2.3.3",
     "classnames": "^2.2.6",
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "lodash.isfunction": "^3.0.9",
     "lodash.isobject": "^3.0.2",
     "lodash.tonumber": "^4.0.3",
     "prop-types": "^15.7.2",
     "react-onclickout": "^2.0.8",
     "react-perfect-scrollbar": "~1.5.8",
-    "react-popper": "^2.1.0",
+    "react-popper": "^2.2.2",
     "react-transition-group": "^4.3.0",
-    "tippy.js": "^6.1.1"
+    "tippy.js": "^6.2.0"
   },
   "peerDependencies": {
     "@coreui/coreui": "^3.0.0",
-    "@coreui/icons-react": "^1.0.0-alpha.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "@coreui/icons-react": "^1.0.0-alpha.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
-    "mutationobserver-shim": "^0.3.3"
+    "mutationobserver-shim": "^0.3.5"
   },
   "devDependencies": {
     "@coreui/coreui-chartjs": "^2.0.0-beta.0",
@@ -72,7 +72,7 @@
     "eslint": "^6.8.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-react": "^7.19.0",
-    "nwb": "^0.24.3",
+    "nwb": "^0.24.5",
     "react-app-polyfill": "^1.0.6",
     "sinon": "^5.1.1"
   },

src/CAlert.js

@@ -1,107 +1,109 @@
-import React, {useState} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {tagPropType, mapToCssModules} from './Shared/helper.js';
-import CFade from './CFade';
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
+import CFade from './CFade'
 
 //component - CoreUI / CAlert
-
-const CAlert = props=>{
-
+const CAlert = props => {
   let {
-    tag: Tag,
     children,
     className,
     cssModule,
-    custom,
     //
-    toggle,
+    onShowUpdate,
+    closeButton,
     transition,
-    closeAriaLabel,
-    closeClassName,
     color,
     fade,
     show,
-    iconSlot,
-    closeProps,
     ...attributes
-  } = props;
+  } = props
 
   //render
-
   const classes = mapToCssModules(classNames(
     className,
     'alert',
-    `alert-${color}`,
-    { 'alert-dismissible': toggle }
-  ), cssModule);
-
-  const closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule);
-
+    {
+      [`alert-${color}`]: color,
+      'alert-dismissible': closeButton
+    }
+  ), cssModule)
+  
   const alertTransition = {
     ...CFade.defaultProps,
     ...transition,
     baseClass: fade ? transition.baseClass : '',
-    timeout: fade ? transition.timeout : 0,
-  };
+    timeout: fade ? transition.timeout : 0
+  }
+  const [isOpen, setIsOpen] = useState(show)
+  
+  useEffect(() => {
+    setIsOpen(show)
+  }, [show])
 
-  const [isOpen, setIsOpen] = useState(true);
+  let timeout = useRef(null)
 
-  if (!custom){
-    let userToggle = toggle;
-    toggle = ()=>{
-      setIsOpen(!isOpen);
-      if (userToggle)
-        userToggle();
-    };
-    show = isOpen;
-  }
+  useEffect(() => {
+    if (onShowUpdate) {
+      onShowUpdate(isOpen)
+    }
+    clearTimeout(timeout.current)
+    if (typeof isOpen === 'number' && isOpen > 0) {
+      timeout.current = setTimeout(() => {
+        setIsOpen(isOpen - 1)
+      }, 1000)
+    }
+    return () => clearTimeout(timeout)
+  }, [isOpen])
 
   return (
-    <CFade {...attributes} {...alertTransition} tag={Tag} className={classes} in={show} role="alert">
-      {!custom ?
-        <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle} {...closeProps}>
-          <span aria-hidden="true">{iconSlot}</span>
-        </button>
-        : null}
+    <CFade 
+      {...alertTransition} 
+      tag="div"
+      className={classes} 
+      in={Boolean(isOpen)} 
+      role="alert"
+      {...attributes} 
+    >
       {children}
+      {
+        closeButton ?
+          <button 
+            type="button" 
+            className="close"
+            aria-label="Close"
+            onClick={() => setIsOpen(false)} 
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+          : null
+      }
     </CFade>
-  );
-
+  )
 }
-
 CAlert.propTypes = {
-  tag: tagPropType,
   children: PropTypes.node,
   className: PropTypes.string,
   cssModule: PropTypes.object,
-  custom: PropTypes.bool,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-  toggle: PropTypes.func,
-  closeClassName: PropTypes.string,
-  closeProps: PropTypes.object,
-  closeAriaLabel: PropTypes.string,
+  onShowUpdate: PropTypes.func,
+  closeButton: PropTypes.bool,
   color: PropTypes.string,
   fade: PropTypes.bool,
-  show: PropTypes.bool,
+  show: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   transition: PropTypes.shape(CFade.propTypes),
-  iconSlot: PropTypes.node
-};
-
+}
 CAlert.defaultProps = {
   tag: 'div',
   //
-  color: 'success',
   show: true,
-  closeAriaLabel: 'Close',
   fade: true,
   transition: {
     ...CFade.defaultProps,
     unmountOnExit: true,
-  },
-  iconSlot: <React.Fragment>&times;</React.Fragment>
-};
-
+  }
+}
 //export
-export default CAlert;
+export default CAlert

src/CBadge.js

@@ -1,11 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {tagPropType, mapToCssModules} from './Shared/helper.js';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { tagPropType, mapToCssModules } from './Shared/helper.js'
+import CLink from './CLink'
 
 //component - CoreUI / CBadge
 
-const CBadge = props=>{
+const CBadge = props => {
 
   let {
     tag: Tag,
@@ -16,40 +17,43 @@ const CBadge = props=>{
     color,
     shape,
     ...attributes
-  } = props;
+  } = props
 
   // render
 
   const classes = mapToCssModules(classNames(
     className,
     'badge',
-    'badge-' + color,
-    shape ? 'badge-'+shape : false
-  ), cssModule);
-
-  if (attributes.href && Tag === 'span') {
-    Tag = 'a';
+    { 
+      [`badge-${color}`]: color,
+      [`badge-${shape}`]: shape
+    }
+  ), cssModule)
+
+  if (attributes.to || attributes.href) {
+    return (
+      <CLink {...attributes} className={classes} ref={innerRef} />
+    )
   }
 
   return (
-    <Tag {...attributes} className={classes} ref={innerRef} />
-  );
+    <Tag className={classes} {...attributes} ref={innerRef} />
+  )
 
 }
 
 CBadge.propTypes = {
   tag: tagPropType,
-  children: PropTypes.node,
   className: PropTypes.string,
   cssModule: PropTypes.object,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
   color: PropTypes.string,
-  shape: PropTypes.string
-};
+  shape: PropTypes.oneOf(['', 'pill'])
+}
 
 CBadge.defaultProps = {
   tag: 'span'
-};
+}
 
-export default CBadge;
+export default CBadge

src/CProgress.js

@@ -97,7 +97,7 @@ CProgress.propTypes = {
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
   barClassName: PropTypes.string,
   barProps: PropTypes.object,
-  height: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   bar: PropTypes.bool,
   multi: PropTypes.bool,
   value: PropTypes.oneOfType([