Disable ripple effect on single component

render() {
    const {
      className,
      children,
      hover,
      zoom,
      waves,
      tag: Tag,
      ...attributes
    } = this.props;

View.propTypes = {
  ...,
  waves: PropTypes.bool
};

const classes = classNames(
      'view',
      ...
      this.props.waves ? 'Ripple-parent': false,
      className
);

 return (
      <Tag {...attributes} className={classes} onMouseDown={ this.handleClick.bind(this) } onTouchStart={ this.handleClick.bind(this) } >
        {this.props.children}
        {this.props.waves && <Waves cursorPos={ this.state.cursorPos } />}
      </Tag>

Krisha Orge (Ryxie) commented 7 years ago

Hello Kuba! Thanks for the quick reply! I tried to follow your instruction, but I got this error instead: "Warning: Received true for a non-boolean attribute waves." Sorry for the noob question, but do I need to recompile the package first to reflect the changes from that file to my project? As of now, I'm setting "is-reppling" visibility to hidden in my CSS to disable the waves. It works, but it also affects the other components with waves effect, so I still have to work on your solution. Best Regards, Krisha

---

Jakub Strebeyko staff commented 7 years ago

Hi Krisha, I wasn't able to recreate the error, but it seems there are some inelegant workarounds for this error until what is wrong is figured out – one of them is passing a (indeed Boolean) prop like this: <View waves={waves ? 1 : 0}>, should get rid of the error message for now. And yes, your React code requires compilation every time – only then it will be understandable by the browser. I think the best way to go about this is to have a custom webpack configuration watching for changes in specified directory, recompiling whenever something gets changed. There are plenty boilerplate/example webpack.config.js files out there to check out. Well, in case the error message is still appearing, there is a more brute solution, that instead of focusing on making waves effect optional on , you can disable it there totally – just get rid of: 1. import Waves from './Waves'; 2. handleClick(e) method; 3. Ripple-parent in const classes = …; 4. event trigger bindings in render() (onMouseDown=…, onTouchStart=…) pointing at the method deleted in point 2. and the <Waves> component there altogether. This way what we end up is a wave-less <View> component, no need for disabling the is-reppling completely. Hope it helps! Best, Kuba

---

Bartłomiej Malanowski staff pro premium commented 6 years ago

MDB Angular is a separated product. You can find its docs and support here: https://mdbootstrap.com/angular

---