feat: add CElementCover component

Author: woothu

src/CElementCover.js

@@ -0,0 +1,102 @@
+import React, { useEffect, createRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules } from './Shared/helper.js'
+import CSpinner from './CSpinner'
+
+//component - CoreUI / CElementCover
+const CElementCover = props => {
+
+  const {
+    className,
+    cssModule,
+    children,
+    //
+    innerRef,
+    boundaries,
+    opacity,
+    ...attributes
+  } = props
+
+  const [customBoundaries, setCustomBoundaries] = useState({})
+  const ref = createRef(null)
+  innerRef && innerRef(ref)
+
+  const getCustomBoundaries = () => {
+    if (!ref || !ref.current || !boundaries) {
+      return {}
+    }
+    const parent = ref.current.parentElement
+    const parentCoords = parent.getBoundingClientRect()
+    const customBoundaries = {}
+    boundaries.forEach(({sides, query}) => {
+      const element = parent.querySelector(query)
+      if (!element || !sides) {
+        return
+      }
+      const coords = element.getBoundingClientRect()
+      sides.forEach(side => {
+        const sideMargin = Math.abs(coords[side] - parentCoords[side])
+        customBoundaries[side] = sideMargin + 'px'
+      })
+    })
+    return customBoundaries
+  }
+
+  useEffect(() => {
+    setCustomBoundaries(getCustomBoundaries())
+  }, [JSON.stringify(getCustomBoundaries())])
+
+  //render
+  const classes = mapToCssModules(classNames(className), cssModule)
+
+  const containerCoords = {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    ...customBoundaries
+  }
+
+  const coverStyles = {
+    ...containerCoords,
+    position: 'absolute',
+    backgroundColor: `rgb(255,255,255,${opacity})`
+  }
+
+  return (
+    <div 
+      className={classes} 
+      style={coverStyles} 
+      {...attributes} 
+      ref={ref}
+    >
+      { children ||  
+        <div style={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translateX(-50%) translateY(-50%)'
+        }}>       
+          <CSpinner grow size="lg" color="primary"/>
+        </div>
+      }
+    </div>
+  )
+}
+
+CElementCover.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  cssModule: PropTypes.object,
+  //
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+  boundaries: PropTypes.array,
+  opacity: PropTypes.number
+};
+
+CElementCover.defaultProps = {
+  opacity: 0.4
+};
+
+export default CElementCover

src/index.js

@@ -18,6 +18,7 @@ export {default as CCardTitle} from './CCardTitle';
 export {default as CCardSubtitle} from './CCardSubtitle';
 export {default as CCardText} from './CCardText';
 export {default as CCreateElement} from './CCreateElement';
+export {default as CElementCover} from './CElementCover';
 export {default as CRow} from './CRow';
 export {default as CCol} from './CCol';
 export {default as CContainer} from './CContainer';