Topic: Disable ripple effect on single component
Krisha Orge (Ryxie) free asked 6 years ago
Kumaresan Sd free answered 6 years ago
How can i do this in angular 6?
Bartłomiej Malanowski staff commented 6 years ago
MDB Angular is a separated product. You can find its docs and support here: https://mdbootstrap.com/angular
Jakub Strebeyko staff answered 6 years ago
waves effect
on <View>
optional is a good idea, that is very easy to implement. Let us introduce a waves prop to the node_modules/mdbreact/src/components/View.js
! It will require only few small adjustments:
1. Signal a new prop in the render()
function's this.props
object and PropTypes
:
render() {
const {
className,
children,
hover,
zoom,
waves,
tag: Tag,
...attributes
} = this.props;
View.propTypes = {
...,
waves: PropTypes.bool
};
2. Define props effect in classNames
and render()
's return statement - that way no necessary 'Ripple-parent' CSS class, nor <Waves>
component will be there, if the prop is not passed alongside <View>
:
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>
Doing this should result in having a <View>
component with no waves effect
, unless you render it with waves
props ( as in <View waves>
).
With Best Regards,
Kuba
Krisha Orge (Ryxie) free commented 6 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, KrishaJakub Strebeyko staff commented 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No