Renovation: refactor actions in button

js/renovation/button.tsx

@@ -135,6 +135,16 @@ export default class Button extends JSXComponent<ButtonInput> {
     @Ref() contentRef!: HTMLDivElement;
     @Ref() submitInputRef!: HTMLInputElement;
 
+    @Effect()
+    contentReadyEffect() {
+        // NOTE: we should trigger this effect on change each
+        //       property upon which onContentReady depends
+        //       (for example, text, icon, etc)
+        const { onContentReady } = this.props;
+
+        onContentReady?.({ element: this.contentRef.parentNode });
+    }
+
     onActive(event: Event) {
         const { useInkRipple } = this.props;
         const config = getInkRippleConfig(this.props);

js/renovation/dist/button.j.jsx

@@ -4,12 +4,23 @@ import registerComponent from '../../core/component_registrator';
 import Widget from '../preact-wrapper/component';
 import { extend } from '../../core/utils/extend';
 import ButtonView from '../button.p';
-import { wrapElement } from '../preact-wrapper/utils';
+import { wrapElement, getInnerActionName } from '../preact-wrapper/utils';
 import { useLayoutEffect } from 'preact/hooks';
 import { getPublicElement } from '../../core/utils/dom';
 
 const TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
 
+const actions = {
+    onClick: {
+        excludeValidators: ['readOnly'],
+        afterExecute: function() {
+            const { useSubmitBehavior } = this.option();
+
+            useSubmitBehavior && setTimeout(() => this._submitInput().click());
+        } },
+    onContentReady: { excludeValidators: ['disabled', 'readOnly'] },
+};
+
 class Button extends Widget {
     getView() {
         return ButtonView;
@@ -42,17 +53,8 @@ class Button extends Widget {
             };
         }
 
-        props.onClick = this._createActionByOption('onClick', {
-            excludeValidators: ['readOnly'],
-            afterExecute: () => {
-                const { useSubmitBehavior } = this.option();
-
-                useSubmitBehavior && setTimeout(() => this._submitInput().click());
-            }
-        });
-
-        props.onContentReady = this._createActionByOption('onContentReady', {
-            excludeValidators: ['disabled', 'readOnly']
+        Object.keys(actions).forEach((name) => {
+            props[name] = this.option(getInnerActionName(name));
         });
 
         return props;
@@ -69,6 +71,22 @@ class Button extends Widget {
             text: '',
         });
     }
+
+    _init() {
+        super._init();
+
+        Object.keys(actions).forEach((name) => {
+            this._addAction(name, actions[name]);
+        });
+    }
+
+    _optionChanged(option) {
+        if(actions[option.name]) {
+            this._addAction(option.name, actions[option.name]);
+        }
+
+        super._optionChanged();
+    }
 }
 
 registerComponent('Button', Button);

js/renovation/preact-wrapper/component.js

@@ -1,6 +1,7 @@
 import Widget from '../../ui/widget/ui.widget';
 import * as Preact from 'preact';
 import { extend } from '../../core/utils/extend';
+import { getInnerActionName } from './utils';
 
 export default class PreactWrapper extends Widget {
     getInstance() {
@@ -51,6 +52,10 @@ export default class PreactWrapper extends Widget {
         this._invalidate();
     }
 
+    _addAction(name, config) {
+        this.option(getInnerActionName(name), this._createActionByOption(name, config));
+    }
+
     _refresh() {
         this._renderComponent();
     }

js/renovation/preact-wrapper/utils.js

@@ -20,3 +20,7 @@ export const wrapElement = ($element, $wrapper) => {
 
     return children;
 };
+
+export const getInnerActionName = (actionName) => {
+    return actionName.charAt(2).toLowerCase() + actionName.substr(3) + 'Action';
+};

js/renovation/widget.tsx

@@ -202,11 +202,6 @@ export default class Widget extends JSXComponent<WidgetInput> {
         return () => dxClick.off(this.widgetRef, { namespace });
     }
 
-    @Effect()
-    contentReadyEffect() {
-        this.props.onContentReady?.({});
-    }
-
     @Effect()
     focusEffect() {
         const { disabled, focusStateEnabled, name } = this.props;