@zohodesk/components/es/RippleEffect/RippleEffect.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import CssProvider from "../Provider/CssProvider";
import style from "./RippleEffect.module.css";
export default function RippleEffect(props) {
  let {
    children,
    isActive,
    isDisabled,
    palette,
    hoverType,
    isNeedEffect,
    needBorder,
    isCopyTextEnabled,
    cssClassPropOfChild
  } = props;
  let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
  let child = React.Children.only(children);
  return /*#__PURE__*/React.cloneElement(child, {
    [cssClassPropOfChild]: `${child.props[cssClassPropOfChild] || ''} ${className}`
  });
}
RippleEffect.defaultProps = defaultProps;
RippleEffect.propTypes = propTypes; // if (__DOCS__) {
//   RippleEffect.docs = {
//     componentGroup: 'RippleEffect',
//     folderName: 'Style Guide'
//   };
// }