fix: CProgress: rewrite component similar to Vue version

Author: woothu

package.json

@@ -47,7 +47,6 @@
     "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",

src/CProgress.js

@@ -1,126 +1,85 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import toNumber from 'lodash.tonumber';
-import {tagPropType, mapToCssModules} from './Shared/helper.js';
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
+import CProgressBar from './CProgressBar'
 
+export const Context = React.createContext({})
 //component - CoreUI / CProgress
 
-const CProgress = props=>{
+const CProgress = props => {
 
   const {
-    tag: Tag,
     children,
     className,
     cssModule,
     //
     innerRef,
-    barClassName,
-    barProps,
-    height,
-    value,
-    max,
-    animated,
-    striped,
+    size,
     color,
-    bar,
-    multi,
+    striped,
+    animated,
+    precision,
     showPercentage,
     showValue,
-    precision,
-    size,
+    max,
+    value,
     ...attributes
-  } = props;
+  } = props
 
-  let valueNumber = toNumber(value);
-  let percent = (valueNumber / toNumber(max)) * 100;
-
-  // render
+  const inheritedProps = {
+    color,
+    striped,
+    animated,
+    precision,
+    showPercentage,
+    showValue,
+    max,
+    value
+  }
 
   const progressClasses = mapToCssModules(classNames(
-    className,
-    size ? 'progress-'+size : null,
-    'progress'
-  ), cssModule);
-
-  const progressBarClasses = mapToCssModules(classNames(
-    'progress-bar',
-    bar ? className || barClassName : barClassName,
-    animated ? 'progress-bar-animated' : null,
-    color ? `bg-${color}` : null,
-    striped || animated ? 'progress-bar-striped' : null
-  ), cssModule);
+    'progress', 
+    size && 'progress-' + size,
+    className
+  ), cssModule)
 
-  if (precision)
-    percent = percent.toPrecision(precision);
-  if (precision)
-    valueNumber = valueNumber.toPrecision(precision);
-
-  const ProgressBar = multi ? children : (
-    <div
-      className={progressBarClasses}
-      style={{ width: `${percent}%` }}
-      role="progressbar"
-      aria-valuenow={value}
-      aria-valuemin="0"
-      aria-valuemax={max}
-      {...barProps}
+  // render
+  return (
+    <div 
+      className={progressClasses} 
+      {...attributes} 
+      ref={innerRef}
     >
-      {showPercentage?percent+'%': showValue?value: children}
+      <Context.Provider value={{ inheritedProps }}>
+        { children || <CProgressBar/>}
+      </Context.Provider>
     </div>
-  );
-
-  if (bar) {
-    return ProgressBar;
-  }
-
-  let style;
-  if (height)
-    style = {height};
-  else
-    style = {};
-
-  return (
-    <Tag {...attributes} style={style} className={progressClasses} ref={innerRef}>
-      {ProgressBar}
-    </Tag>
-  );
+  )
 
 }
 
 CProgress.propTypes = {
-  tag: tagPropType,
   children: PropTypes.node,
   className: PropTypes.string,
   cssModule: PropTypes.object,
   //
   innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
-  barClassName: PropTypes.string,
-  barProps: PropTypes.object,
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  bar: PropTypes.bool,
-  multi: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  max: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
+  size: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
+  max: PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
   animated: PropTypes.bool,
   striped: PropTypes.bool,
   color: PropTypes.string,
   precision: PropTypes.number,
   showPercentage: PropTypes.bool,
-  showValue: PropTypes.bool,
-  size: PropTypes.string
+  showValue: PropTypes.bool
 };
 
 CProgress.defaultProps = {
-  tag: 'div',
   value: 0,
   max: 100,
+  precision: 0
 };
 
-export default CProgress;
+export default CProgress

src/CProgressBar.js

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import {  mapToCssModules } from './Shared/helper.js'
+import { Context } from './CProgress'
+//component - CoreUI / CProgressBar
+
+const CProgressBar = directProps => {
+
+  const { inheritedProps } = useContext(Context)
+  const props = {...inheritedProps, ...directProps }
+
+  const {
+    children,
+    className,
+    cssModule,
+    //
+    innerRef,
+    color,
+    striped,
+    animated,
+    precision,
+    showPercentage,
+    showValue,
+    max,
+    value,
+    ...attributes
+  } = props
+
+  // render
+  const progressBarClasses = mapToCssModules(classNames(
+    'progress-bar',
+    animated && 'progress-bar-animated',
+    striped || animated && 'progress-bar-striped',
+    color && `bg-${color}`,
+    className
+  ), cssModule)
+
+  const valLabel = Number(value).toFixed(precision)
+  const percentLabel = Number((value / max) * 100).toFixed(precision) + '%'
+
+  return (
+    <div
+      className={progressBarClasses}
+      style={{ width: `${(value / max) * 100}%` }}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin="0"
+      aria-valuemax={max}
+      {...attributes}
+      ref={innerRef}
+    >
+      { showPercentage ? percentLabel : showValue ? valLabel : children }
+    </div>
+  )
+}
+
+CProgressBar.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  cssModule: PropTypes.object,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+  value: PropTypes.number,
+  max: PropTypes.number,
+  animated: PropTypes.bool,
+  striped: PropTypes.bool,
+  color: PropTypes.string,
+  precision: PropTypes.number,
+  showPercentage: PropTypes.bool,
+  showValue: PropTypes.bool
+};
+
+export default CProgressBar

src/index.js

@@ -34,6 +34,7 @@ export {default as CTabPane} from './CTabPane';
 export {default as CTabContent} from './CTabContent';
 export {default as CPopover} from './CPopover';
 export {default as CProgress} from './CProgress';
+export {default as CProgressBar} from './CProgressBar';
 // export {default as CPortal} from './CPortal';
 export {default as CDropdown} from './CDropdown';
 export {default as CDropdownDivider} from './CDropdownDivider';