Renovation: render or remove Ink Ripple on useInkRipple change

js/renovation/button.tsx

@@ -4,7 +4,6 @@ import noop from './utils/noop';
 import themes from '../ui/themes';
 import { click } from '../events/short';
 import { getImageSourceType } from '../core/utils/icon';
-import { initConfig, showWave, hideWave } from '../ui/widget/utils.ink_ripple';
 import {
     Component,
     ComponentBindings,
@@ -17,6 +16,7 @@ import {
     Template,
 } from 'devextreme-generator/component_declaration/common';
 import Icon from './icon';
+import InkRipple from './ink-ripple';
 import Widget, { WidgetInput } from './widget';
 
 const defaultClassNames = ['dx-button'];
@@ -30,7 +30,7 @@ const getInkRippleConfig = ({ text, icon, type }: ButtonInput) => {
         waveSizeCoefficient: 1,
     } : {};
 
-    return initConfig(config);
+    return config;
 };
 
 const getCssClasses = (model: ButtonInput) => {
@@ -103,6 +103,9 @@ export const viewFunction = (viewModel: Button) => {
             {viewModel.props.useSubmitBehavior &&
                 <input ref={viewModel.submitInputRef as any} type="submit" tabIndex={-1} className="dx-button-submit-input"/>
             }
+            {viewModel.props.useInkRipple &&
+                <InkRipple config={viewModel.inkRippleConfig} ref={viewModel.inkRippleRef}/>
+            }
         </div>
     </Widget>;
 };
@@ -141,6 +144,7 @@ const defaultOptionRules = createDefaultOptionRules<ButtonInput>([{
 
 export default class Button extends JSXComponent<ButtonInput> {
     @Ref() contentRef!: HTMLDivElement;
+    @Ref() inkRippleRef!: InkRipple;
     @Ref() submitInputRef!: HTMLInputElement;
     @Ref() widgetRef!: Widget;
 
@@ -161,16 +165,14 @@ export default class Button extends JSXComponent<ButtonInput> {
 
     onActive(event: Event) {
         const { useInkRipple } = this.props;
-        const config = getInkRippleConfig(this.props);
 
-        useInkRipple && showWave(config, { element: this.contentRef, event });
+        useInkRipple && this.inkRippleRef.showWave({ element: this.contentRef, event });
     }
 
     onInactive(event: Event) {
         const { useInkRipple } = this.props;
-        const config = getInkRippleConfig(this.props);
 
-        useInkRipple && hideWave(config, { element: this.contentRef, event });
+        useInkRipple && this.inkRippleRef.hideWave({ element: this.contentRef, event });
     }
 
     onWidgetClick(event: Event) {
@@ -221,4 +223,8 @@ export default class Button extends JSXComponent<ButtonInput> {
 
         return (icon || type === 'back') ? (icon || 'back') : '';
     }
+
+    get inkRippleConfig() {
+        return getInkRippleConfig(this.props);
+    }
 }

js/renovation/ink-ripple.tsx

@@ -0,0 +1,34 @@
+import { Component, ComponentBindings, JSXComponent, OneWay, Method } from 'devextreme-generator/component_declaration/common';
+import { initConfig, showWave, hideWave } from '../ui/widget/utils.ink_ripple';
+
+// TODO: remake old ink ripple in new JSX component
+export const viewFunction = (viewModel) => {
+    return <div className="dx-inkripple" />;
+};
+
+@ComponentBindings()
+export class InkRippleInput {
+    @OneWay() config?: any = {};
+}
+
+// tslint:disable-next-line: max-classes-per-file
+@Component({
+    defaultOptionRules: null,
+    view: viewFunction,
+})
+export default class InkRipple extends JSXComponent<InkRippleInput> {
+    @Method()
+    hideWave(event) {
+        hideWave(this.getConfig, event);
+    }
+
+    @Method()
+    showWave(event) {
+        showWave(this.getConfig, event);
+    }
+
+    get getConfig() {
+        const { config } = this.props;
+        return initConfig(config);
+    }
+}

testing/tests/Renovation/button.tests.js

@@ -363,8 +363,7 @@ QUnit.module('inkRipple', {}, () => {
         $element.trigger('dxclick');
     });
 
-    // NOTE: deprecated behavior
-    QUnit.skip('widget should works correctly when the useInkRipple option is changed at runtime', function(assert) {
+    QUnit.test('widget should works correctly when the useInkRipple option is changed at runtime', function(assert) {
         const clock = sinon.useFakeTimers();
         const $inkButton = $('#inkButton').Button({
             text: 'test',