From 23e45cd2f79c43a5e55133de4f0bd3e83cc21f12 Mon Sep 17 00:00:00 2001 From: roman-simionov Date: Tue, 3 Mar 2020 15:31:21 +0300 Subject: [PATCH 1/4] Move viewModel to class --- js/renovation/button.tsx | 99 ++++++++++++++------------------ js/renovation/icon.tsx | 29 +++------- js/renovation/widget.tsx | 118 ++++++++++++++++++--------------------- package.json | 2 +- 4 files changed, 106 insertions(+), 142 deletions(-) diff --git a/js/renovation/button.tsx b/js/renovation/button.tsx index d150adba50e7..19c78b8b1f22 100644 --- a/js/renovation/button.tsx +++ b/js/renovation/button.tsx @@ -46,80 +46,52 @@ const getAriaLabel = (text, icon) => { return label ? { label } : {}; }; -export const viewModelFunction = (model: Button):ButtonViewModel => { - const props = model.props; - return { - ...props, - aria: getAriaLabel(model.props.text, model.props.icon), - contentRef: model.contentRef, - cssClasses: getCssClasses(props), - elementAttr: { ...props.elementAttr, role: 'button' }, - iconSource: (props.icon || props.type === 'back') ? (props.icon || 'back') : '', - onActive: model.onActive, - onInactive: model.onInactive, - onWidgetClick: model.onWidgetClick, - onWidgetKeyPress: model.onWidgetKeyPress, - submitInputRef: model.submitInputRef, - }; -}; - -declare type ButtonViewModel = { - contentRef: any; - cssClasses: string; - iconSource: string; - onActive: (e: Event) => any; - onInactive: (e: Event) => any; - onWidgetClick: (e: Event) => any; - onWidgetKeyPress: (e: Event, options:any) => void; - submitInputRef: any; -} & ButtonInput; - -export const viewFunction = (viewModel: ButtonViewModel) => { - const renderText = !viewModel.contentRender && viewModel.text; - const isIconLeft = viewModel.iconPosition === 'left'; - const leftIcon = !viewModel.contentRender && isIconLeft; - const rightIcon = !viewModel.contentRender && !isIconLeft; - const icon = !viewModel.contentRender && viewModel.iconSource - && ; +export const viewFunction = (viewModel: Button) => { + const renderText = !viewModel.props.contentRender && viewModel.props.text; + const isIconLeft = viewModel.props.iconPosition === 'left'; + const leftIcon = !viewModel.props.contentRender && isIconLeft; + const rightIcon = !viewModel.props.contentRender && !isIconLeft; + const icon = !viewModel.props.contentRender && viewModel.iconSource + && ; return -
- {viewModel.contentRender && - + {viewModel.props.contentRender && + } {leftIcon && icon} {renderText && - {viewModel.text} + {viewModel.props.text} } {rightIcon && icon} - {viewModel.useSubmitBehavior && - + {viewModel.props.useSubmitBehavior && + }
; @@ -159,7 +131,6 @@ const defaultOptionRules = createDefaultOptionRules([ @Component({ defaultOptionsRules: defaultOptionRules, view: viewFunction, - viewModel: viewModelFunction, }) export default class Button extends JSXComponent { @@ -207,4 +178,20 @@ export default class Button extends JSXComponent { return () => click.off(this.submitInputRef, { namespace }); } + + get aria() { + return getAriaLabel(this.props.text, this.props.icon); + } + + get cssClasses():string { + return getCssClasses(this.props); + } + + get elementAttr() { + return { ...this.props.elementAttr, role: 'button' }; + } + + get iconSource():string { + return (this.props.icon || this.props.type === 'back') ? (this.props.icon || 'back') : ''; + } } diff --git a/js/renovation/icon.tsx b/js/renovation/icon.tsx index 07d5548828fc..d4c9014d98d4 100644 --- a/js/renovation/icon.tsx +++ b/js/renovation/icon.tsx @@ -1,21 +1,7 @@ import { getImageSourceType } from '../core/utils/icon'; import { Component, ComponentBindings, JSXComponent, OneWay, Fragment } from 'devextreme-generator/component_declaration/common'; -type IconViewModel = { - cssClass: string; - props: IconInput; - sourceType: string; -}; - -export const viewModelFunction = (model: Icon): IconViewModel => { - return { - cssClass: model.props.position !== 'left' ? 'dx-icon-right' : '', - props: model.props, - sourceType: getImageSourceType(model.props.source), - }; -}; - -export const viewFunction = ({ sourceType, cssClass, props: { source } }: IconViewModel) => { +export const viewFunction = ({ sourceType, cssClass, props: { source } }: Icon) => { return ( {sourceType === 'dxIcon' && } {sourceType === 'fontIcon' && } @@ -34,14 +20,13 @@ export class IconInput { @Component({ components: [], view: viewFunction, - viewModel: viewModelFunction, }) export default class Icon extends JSXComponent { - // get sourceType() { - // return getImageSourceType(this.props.source); - // } + get sourceType() { + return getImageSourceType(this.props.source); + } - // get cssClass() { - // return this.props.position !== 'left' ? 'dx-icon-right' : ''; - // } + get cssClass() { + return this.props.position !== 'left' ? 'dx-icon-right' : ''; + } } diff --git a/js/renovation/widget.tsx b/js/renovation/widget.tsx index 696195630973..539e5e911e38 100644 --- a/js/renovation/widget.tsx +++ b/js/renovation/widget.tsx @@ -73,72 +73,18 @@ const getCssClasses = (model: Partial & Partial) => { return className.join(' '); }; -export const viewModelFunction = ({ - _active, - _focused, - _hovered, - - props: { - accessKey, - aria, - children, - className, - disabled, - elementAttr, - focusStateEnabled, - height, - hint, - hoverStateEnabled, - rtlEnabled, - tabIndex, - visible, - width, - onContentReady, - onVisibilityChange, - }, - - widgetRef, -}: Widget) => { - const styles = getStyles({ width, height }); - const attrsWithoutClass = getAttributes({ - accessKey: focusStateEnabled && !disabled && accessKey, - elementAttr, - }); - const arias = getAria({ ...aria, disabled, hidden: !visible }); - const cssClasses = getCssClasses({ - _active, _focused, _hovered, className, - disabled, elementAttr, focusStateEnabled, hoverStateEnabled, - onVisibilityChange, rtlEnabled, visible, - }); - - return { - attributes: { ...attrsWithoutClass, ...arias }, - children, - cssClasses, - disabled, - focusStateEnabled, - hoverStateEnabled, - onContentReady, - styles, - tabIndex: focusStateEnabled && !disabled && tabIndex, - title: hint, - visible, - widgetRef, - }; -}; - -export const viewFunction = (viewModel: any) => { +export const viewFunction = (viewModel: Widget) => { return ( ); }; @@ -180,7 +126,6 @@ export class WidgetInput { components: [], name: 'Widget', view: viewFunction, - viewModel: viewModelFunction, }) export default class Widget extends JSXComponent { @@ -259,9 +204,7 @@ export default class Widget extends JSXComponent { @Effect() contentReadyEffect() { - const { onContentReady } = this.props; - - onContentReady?.({}); + this.props.onContentReady?.({}); } @Effect() @@ -351,4 +294,53 @@ export default class Widget extends JSXComponent { return null; } + + get attributes() { + const { + aria, + visible, + focusStateEnabled, + disabled, + accessKey, + elementAttr, + } = this.props; + + const attrsWithoutClass = getAttributes({ + accessKey: focusStateEnabled && !disabled && accessKey, + elementAttr, + }); + const arias = getAria({ ...aria, disabled, hidden: !visible }); + + return { ...attrsWithoutClass, ...arias }; + } + + get styles() { + const { width, height } = this.props; + return getStyles({ width, height }); + } + + get cssClasses() { + const { + className, + disabled, + elementAttr, + focusStateEnabled, + hoverStateEnabled, + onVisibilityChange, + rtlEnabled, + visible, + } = this.props; + + return getCssClasses({ + _active: this._active, _focused: this._focused, _hovered: this._hovered, className, + disabled, elementAttr, focusStateEnabled, hoverStateEnabled, + onVisibilityChange, rtlEnabled, visible, + }); + } + + get tabIndex() { + return this.props.focusStateEnabled && + !this.props.disabled && + this.props.tabIndex; + } } diff --git a/package.json b/package.json index 8919cbec5a8d..24561916f63e 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "cldr-numbers-full": "latest", "cldrjs": "^0.5.0", "del": "^2.2.2", - "devextreme-generator": "^1.0.30", + "devextreme-generator": "^1.0.31", "devextreme-internal-tools": "~1.2.24", "enzyme": "^3.11.0", "enzyme-adapter-preact-pure": "^2.2.0", From 3827bfbd04915243e6c06a91c2f89f185b0373c6 Mon Sep 17 00:00:00 2001 From: roman-simionov Date: Wed, 4 Mar 2020 11:20:49 +0300 Subject: [PATCH 2/4] Update generator version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 24561916f63e..01fb232a75dc 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "cldr-numbers-full": "latest", "cldrjs": "^0.5.0", "del": "^2.2.2", - "devextreme-generator": "^1.0.31", + "devextreme-generator": "^1.0.32", "devextreme-internal-tools": "~1.2.24", "enzyme": "^3.11.0", "enzyme-adapter-preact-pure": "^2.2.0", From 522430627d4e2fe8ded62250e11140da67347730 Mon Sep 17 00:00:00 2001 From: roman-simionov Date: Wed, 4 Mar 2020 12:01:58 +0300 Subject: [PATCH 3/4] fix review remarks --- js/renovation/button.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/js/renovation/button.tsx b/js/renovation/button.tsx index 19c78b8b1f22..4afcbdbfc1f2 100644 --- a/js/renovation/button.tsx +++ b/js/renovation/button.tsx @@ -47,12 +47,13 @@ const getAriaLabel = (text, icon) => { }; export const viewFunction = (viewModel: Button) => { - const renderText = !viewModel.props.contentRender && viewModel.props.text; - const isIconLeft = viewModel.props.iconPosition === 'left'; - const leftIcon = !viewModel.props.contentRender && isIconLeft; - const rightIcon = !viewModel.props.contentRender && !isIconLeft; - const icon = !viewModel.props.contentRender && viewModel.iconSource - && ; + const { contentRender, text, iconPosition } = viewModel.props; + const renderText = !contentRender && text; + const isIconLeft = iconPosition === 'left'; + const leftIcon = !contentRender && isIconLeft; + const rightIcon = !contentRender && !isIconLeft; + const icon = !contentRender && viewModel.iconSource + && ; return { width={viewModel.props.width} >
- {viewModel.props.contentRender && + {contentRender && } {leftIcon && icon} {renderText && - {viewModel.props.text} + {text} } {rightIcon && icon} {viewModel.props.useSubmitBehavior && @@ -191,7 +192,8 @@ export default class Button extends JSXComponent { return { ...this.props.elementAttr, role: 'button' }; } - get iconSource():string { - return (this.props.icon || this.props.type === 'back') ? (this.props.icon || 'back') : ''; + get iconSource(): string { + const { icon, type } = this.props; + return (icon || type === 'back') ? (icon || 'back') : ''; } } From cef9df8966dcd6cc149c14194049202c892d59f4 Mon Sep 17 00:00:00 2001 From: roman-simionov Date: Wed, 4 Mar 2020 13:35:45 +0300 Subject: [PATCH 4/4] fix regression --- js/renovation/button.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/renovation/button.tsx b/js/renovation/button.tsx index 4afcbdbfc1f2..1a0c0a2ecff4 100644 --- a/js/renovation/button.tsx +++ b/js/renovation/button.tsx @@ -47,12 +47,12 @@ const getAriaLabel = (text, icon) => { }; export const viewFunction = (viewModel: Button) => { - const { contentRender, text, iconPosition } = viewModel.props; + const { contentRender, text, iconPosition, icon } = viewModel.props; const renderText = !contentRender && text; const isIconLeft = iconPosition === 'left'; const leftIcon = !contentRender && isIconLeft; const rightIcon = !contentRender && !isIconLeft; - const icon = !contentRender && viewModel.iconSource + const iconComponent = !contentRender && viewModel.iconSource && ; return { parentRef={viewModel.contentRef} /> } - {leftIcon && icon} + {leftIcon && iconComponent} {renderText && {text} } - {rightIcon && icon} + {rightIcon && iconComponent} {viewModel.props.useSubmitBehavior && }