Renovation: implement Button.template

js/renovation/button.tsx

@@ -16,6 +16,16 @@ const getImageContainerJSX = (source: string, position: string) => {
     }
 };
 
+const CustomRender = ({ text, icon, renderFn, contentRef, children }) => {
+    const result = renderFn({
+        model: { text, icon },
+    });
+    result.props.children?.push?.(children);
+    result.ref = contentRef;
+
+    return result;
+};
+
 const stylingModes = ['outlined', 'text', 'contained'];
 const defaultClassNames = ['dx-button'];
 
@@ -98,33 +108,45 @@ export const viewFunction = (viewModel: ButtonViewModel) => {
         visible={viewModel.visible}
         width={viewModel.width}
     >
-        <div className="dx-button-content" ref={viewModel.contentRef}>
-            {viewModel.contentRender &&
-                <viewModel.contentRender icon={icon} text={viewModel.text} />}
-            {!viewModel.contentRender && isIconLeft && icon}
-            {!viewModel.contentRender && viewModel.text &&
-                <span className="dx-button-text">{viewModel.text}</span>
-            }
-            {!viewModel.contentRender && !isIconLeft && icon}
-            {viewModel.useSubmitBehavior &&
-                <input ref={viewModel.submitInputRef} type="submit" tabIndex={-1} className="dx-button-submit-input"/>
-            }
-        </div>
+        {(viewModel.contentRender &&
+            <CustomRender
+                text={viewModel.text}
+                icon={viewModel.icon}
+                renderFn={viewModel.contentRender}
+                contentRef={viewModel.contentRef}
+            >
+                {viewModel.useSubmitBehavior &&
+                    <input ref={viewModel.submitInputRef} type="submit" tabIndex={-1} className="dx-button-submit-input"/>
+                }
+            </CustomRender>
+        ) || (
+            <div className="dx-button-content" ref={viewModel.contentRef}>
+                {isIconLeft && icon}
+                {viewModel.text &&
+                    <span className="dx-button-text">{viewModel.text}</span>
+                }
+                {!isIconLeft && icon}
+                {viewModel.useSubmitBehavior &&
+                    <input ref={viewModel.submitInputRef} type="submit" tabIndex={-1} className="dx-button-submit-input"/>
+                }
+            </div>
+        )}
     </Widget>;
 };
 
 @ComponentBindings()
 export class ButtonInput extends WidgetInput {
     @OneWay() activeStateEnabled?: boolean = true;
     @OneWay() classNames?: string[];
-    @OneWay() contentRender?: any;
+    @OneWay() contentRender?: ButtonTemplateFn;
     @OneWay() focusStateEnabled?: boolean = true;
     @OneWay() hoverStateEnabled?: boolean = true;
     @OneWay() icon?: string = '';
     @OneWay() iconPosition?: string = 'left';
     @OneWay() onSubmit?: (e: any) => any = (() => undefined);
     @OneWay() pressed?: boolean;
     @OneWay() stylingMode?: 'outlined' | 'text' | 'contained';
+    @OneWay() template?: ButtonTemplate = '';
     @OneWay() text?: string = '';
     @OneWay() type?: string;
     @OneWay() useInkRipple: boolean = false;
@@ -140,7 +162,7 @@ export class ButtonInput extends WidgetInput {
 })
 
 export default class Button extends JSXComponent<ButtonInput> {
-    @Ref() contentRef!: HTMLDivElement;
+    @Ref() contentRef!: HTMLElement;
     @Ref() submitInputRef!: HTMLInputElement;
 
     onActive(event: Event) {
@@ -185,3 +207,10 @@ export default class Button extends JSXComponent<ButtonInput> {
         return () => click.off(this.submitInputRef, { namespace });
     }
 }
+
+declare type ButtonContent = {
+    icon: string,
+    text: string,
+};
+declare type ButtonTemplateFn = (data: ButtonContent, container: any) => any;
+declare type ButtonTemplate = ButtonTemplateFn | string;

js/renovation/dist/button.j.jsx

@@ -1,7 +1,19 @@
+
+import $ from '../../core/renderer';
 import registerComponent from '../../core/component_registrator';
-import Widget from '../preact_wrapper';
+import Widget from '../preact-wrapper/component';
 import { extend } from '../../core/utils/extend';
 import ButtonView from '../button.p';
+import { HTMLToPreact } from '../preact-wrapper/utils';
+import { getPublicElement } from '../../core/utils/dom';
+
+const templateDeclarations = {
+    template: {
+        getContainer: () => $('<div>'),
+        containerClass: 'dx-button-content',
+        wrapperClass: 'dx-template-wrapper',
+    }
+};
 
 class Button extends Widget {
     getView() {
@@ -10,22 +22,44 @@ class Button extends Widget {
 
     getProps(isFirstRender) {
         const props = super.getProps(isFirstRender);
-        if(props.contentRender) {
-            props.contentRender = (data) => {
-                const template = this._getTemplate(props.contentRender);
-
-                return (<div style={{ display: 'none' }} ref={(element) => {
-                    if(element && element.parentElement) {
-                        const parent = element.parentElement;
-                        while(parent.firstChild) {
-                            parent.removeChild(parent.firstChild);
-                        }
-                        template.render({ model: data, container: parent });
-                        parent.appendChild(element);
+
+        Object.keys(templateDeclarations).map((key) => {
+            if(props[key]) {
+                props[`${key}Render`] = (params) => {
+                    const declaration = templateDeclarations[key];
+                    const $container = declaration.getContainer();
+                    $container.addClass(declaration.containerClass);
+                    const data = { container: getPublicElement($container), ...params };
+                    const $template = $(this._getTemplate(props[key]).render(data));
+
+                    if(declaration.wrapperClass && $template.hasClass(declaration.wrapperClass)) {
+                        $template.addClass(declaration.containerClass);
+                        return HTMLToPreact($template.get(0));
                     }
-                }}/>);
+
+                    return HTMLToPreact($container.get(0));
+                };
+            }
+        });
+
+        // TODO: remove after generator fix ('template'->'render' translation)
+        if(props.template) {
+            props.contentRender = (params) => {
+                const declaration = templateDeclarations.template;
+                const $container = declaration.getContainer();
+                $container.addClass(declaration.containerClass);
+                const data = { container: getPublicElement($container), ...params };
+                const $template = $(this._getTemplate(props.template).render(data));
+
+                if(declaration.wrapperClass && $template.hasClass(declaration.wrapperClass)) {
+                    $template.addClass(declaration.containerClass);
+                    return HTMLToPreact($template.get(0));
+                }
+
+                return HTMLToPreact($container.get(0));
             };
         }
+
         props.onClick = this._createActionByOption('onClick', {
             excludeValidators: ['readOnly'],
             afterExecute: () => {
@@ -44,6 +78,7 @@ class Button extends Widget {
             hoverStateEnabled: true,
             icon: '',
             iconPosition: 'left',
+            template: '',
             text: '',
         });
     }

js/renovation/dist/widget.j.jsx

@@ -1,5 +1,5 @@
 import registerComponent from '../../core/component_registrator';
-import WidgetBase from '../preact_wrapper';
+import WidgetBase from '../preact-wrapper/component';
 import { extend } from '../../core/utils/extend';
 import WidgetView from '../widget.p';
 

js/renovation/preact_wrapper.js → js/renovation/preact-wrapper/component.js

@@ -1,6 +1,6 @@
-import Widget from '../ui/widget/ui.widget';
+import Widget from '../../ui/widget/ui.widget';
 import * as Preact from 'preact';
-import { extend } from '../core/utils/extend';
+import { extend } from '../../core/utils/extend';
 
 export default class PreactWrapper extends Widget {
     getInstance() {
@@ -23,15 +23,18 @@ export default class PreactWrapper extends Widget {
 
     getProps(isFirstRender) {
         const options = extend({}, this.option());
+        const attributes = this.$element()[0].attributes;
 
         if(isFirstRender) {
-            const attributes = this.$element()[0].attributes;
             options.elementAttr = extend(Object.keys(attributes).reduce((a, key) => {
                 if(attributes[key].specified) {
                     a[attributes[key].name] = attributes[key].value;
                 }
                 return a;
             }, {}), options.elementAttr);
+        } else {
+            // NOTE: workaround to save container id
+            options.elementAttr = extend({ [attributes.id.name]: attributes.id.value }, options.elementAttr);
         }
 
         return options;

js/renovation/preact-wrapper/utils.js

@@ -0,0 +1,24 @@
+import { h } from 'preact';
+
+export const HTMLToPreact = (node, ...restChildren) => {
+    if(!node) return;
+    // NOTE: nodeType === 3 => text node
+    if(node.nodeType === 3) {
+        return node.wholeText;
+    }
+
+    const tag = node.tagName;
+    const childNodes = node.childNodes;
+
+    const children = [];
+    for(let i = 0; i < childNodes.length; i++) {
+        children.push(HTMLToPreact(childNodes[i]));
+    }
+
+    const attributes = [...node.attributes].reduce((result, attr) => {
+        result[attr.name] = attr.value;
+        return result;
+    }, {});
+
+    return h(tag, attributes, [...children, ...restChildren]);
+};

testing/jest/button.tests.tsx

@@ -210,15 +210,46 @@ describe('Button', () => {
         });
 
         describe('contentRender', () => {
-            it('should render template', () => {
+            const contentRender = ({ model: { text } }) => <div className={'custom-content'}>{`${text}123`}</div>;
+
+            it('should render contentRender', () => {
                 const button = render({
                     text: 'My button',
-                    contentRender: ({ text }) => <div className={'custom-content'}>{text + 123}</div>,
+                    contentRender,
                 });
-                const buttonContentChildren = button.find('.dx-button-content').children();
+                const customRender = button.find('CustomRender');
+
+                expect(customRender.exists()).toBe(true);
+                expect(customRender.exists('.custom-content')).toBe(true);
+
+                expect(customRender.props().text).toBe('My button');
+                expect(customRender.text()).toBe('My button123');
+            });
+
+            it('should rerender contentRender in runtime', () => {
+                const button = mount(<Button text='My button' />);
+
+                expect(button.exists('CustomRender')).toBe(false);
+
+                button.setProps({ contentRender });
+                expect(button.exists('CustomRender')).toBe(true);
+
+                button.setProps({ contentRender: undefined });
+                expect(button.exists('CustomRender')).toBe(false);
+            });
+
+            it('should change properties in runtime', () => {
+                const button = mount(<Button text='My button' contentRender={contentRender} />);
+                let buttonContent = button.find('CustomRender');
+
+                expect(buttonContent.props().text).toBe('My button');
+                expect(buttonContent.text()).toBe('My button123');
+
+                button.setProps({ text: 'New value' });
+                buttonContent = button.find('CustomRender');
 
-                expect(buttonContentChildren.props().text).toBe('My button');
-                expect(buttonContentChildren.render().text()).toBe('My button123');
+                expect(buttonContent.props().text).toBe('New value');
+                expect(buttonContent.text()).toBe('New value123');
             });
         });