From 82d524881a323db8dbbcd4effd17ed06c590be30 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Tue, 22 Oct 2024 12:58:51 +0400 Subject: [PATCH 1/8] move widget to @ts/core/r1 --- .../{pagination => core/r1}/base_props.ts | 0 .../{pagination/common => core/r1}/widget.tsx | 40 +++++++++---------- .../common/base_pagination_props.ts | 2 +- .../js/__internal/pagination/content.tsx | 2 +- .../pagination/editors/common/widget_props.ts | 2 +- 5 files changed, 23 insertions(+), 23 deletions(-) rename packages/devextreme/js/__internal/{pagination => core/r1}/base_props.ts (100%) rename packages/devextreme/js/__internal/{pagination/common => core/r1}/widget.tsx (95%) diff --git a/packages/devextreme/js/__internal/pagination/base_props.ts b/packages/devextreme/js/__internal/core/r1/base_props.ts similarity index 100% rename from packages/devextreme/js/__internal/pagination/base_props.ts rename to packages/devextreme/js/__internal/core/r1/base_props.ts diff --git a/packages/devextreme/js/__internal/pagination/common/widget.tsx b/packages/devextreme/js/__internal/core/r1/widget.tsx similarity index 95% rename from packages/devextreme/js/__internal/pagination/common/widget.tsx rename to packages/devextreme/js/__internal/core/r1/widget.tsx index ac2ce249df88..916c2be3df47 100644 --- a/packages/devextreme/js/__internal/pagination/common/widget.tsx +++ b/packages/devextreme/js/__internal/core/r1/widget.tsx @@ -2,30 +2,32 @@ /* eslint-disable spellcheck/spell-checker */ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /* eslint-disable @typescript-eslint/no-explicit-any */ -import '../../../events/click'; -import '../../../events/hover'; +import '@js/events/click'; +import '@js/events/hover'; import { createReRenderEffect, InfernoEffect, InfernoWrapperComponent, } from '@devextreme/runtime/inferno'; import type { RefObject } from '@devextreme-generator/declarations'; -import { createRef as infernoCreateRef } from 'inferno'; - -import domAdapter from '../../../core/dom_adapter'; -import errors from '../../../core/errors'; -import { extend } from '../../../core/utils/extend'; -import resizeCallbacks from '../../../core/utils/resize_callbacks'; -import { normalizeStyleProp } from '../../../core/utils/style'; -import { isFunction } from '../../../core/utils/type'; +import domAdapter from '@js/core/dom_adapter'; +import errors from '@js/core/errors'; +import { extend } from '@js/core/utils/extend'; +import resizeCallbacks from '@js/core/utils/resize_callbacks'; +import { normalizeStyleProp } from '@js/core/utils/style'; +import { isFunction } from '@js/core/utils/type'; import { dxClick, focus, keyboard, resize, visibility, -} from '../../../events/short'; -import type { ConfigContextValue } from '../../core/r1/config_context'; -import { ConfigContext } from '../../core/r1/config_context'; -import { ConfigProvider } from '../../core/r1/config_provider'; -import type { EffectReturn } from '../../core/r1/utils/effect_return'; -import { combineClasses } from '../../core/r1/utils/render_utils'; -import { resolveRtlEnabled, resolveRtlEnabledDefinition } from '../../core/r1/utils/resolve_rtl'; +} from '@js/events/short'; +import type { ConfigContextValue } from '@ts/core/r1/config_context'; +import { ConfigContext } from '@ts/core/r1/config_context'; +import { ConfigProvider } from '@ts/core/r1/config_provider'; +import type { EffectReturn } from '@ts/core/r1/utils/effect_return'; +import { combineClasses } from '@ts/core/r1/utils/render_utils'; +import { resolveRtlEnabled, resolveRtlEnabledDefinition } from '@ts/core/r1/utils/resolve_rtl'; +import { createRef as infernoCreateRef } from 'inferno'; + +import type { BaseWidgetProps } from './base_props'; +import { BaseWidgetDefaultProps } from './base_props'; import { subscribeToDxActiveEvent, subscribeToDxFocusInEvent, @@ -33,9 +35,7 @@ import { subscribeToDxHoverEndEvent, subscribeToDxHoverStartEvent, subscribeToDxInactiveEvent, -} from '../../core/r1/utils/subscribe_to_event'; -import type { BaseWidgetProps } from '../base_props'; -import { BaseWidgetDefaultProps } from '../base_props'; +} from './utils/subscribe_to_event'; const DEFAULT_FEEDBACK_HIDE_TIMEOUT = 400; const DEFAULT_FEEDBACK_SHOW_TIMEOUT = 30; diff --git a/packages/devextreme/js/__internal/pagination/common/base_pagination_props.ts b/packages/devextreme/js/__internal/pagination/common/base_pagination_props.ts index 187d0835c0e8..7e2b48c1b369 100644 --- a/packages/devextreme/js/__internal/pagination/common/base_pagination_props.ts +++ b/packages/devextreme/js/__internal/pagination/common/base_pagination_props.ts @@ -1,9 +1,9 @@ import type { DisplayMode } from '@js/common'; import type { PageSize } from '@js/ui/pagination_types'; +import { BaseWidgetDefaultProps, type BaseWidgetProps } from '@ts/core/r1/base_props'; import messageLocalization from '../../../localization/message'; import type { EventCallback } from '../../core/r1/event_callback'; -import { BaseWidgetDefaultProps, type BaseWidgetProps } from '../base_props'; export interface BasePaginationProps extends BaseWidgetProps { isGridCompatibilityMode?: boolean; diff --git a/packages/devextreme/js/__internal/pagination/content.tsx b/packages/devextreme/js/__internal/pagination/content.tsx index db14ff329a8c..49321e3f32fc 100644 --- a/packages/devextreme/js/__internal/pagination/content.tsx +++ b/packages/devextreme/js/__internal/pagination/content.tsx @@ -3,6 +3,7 @@ import { InfernoComponent, InfernoEffect } from '@devextreme/runtime/inferno'; import type { RefObject } from '@devextreme-generator/declarations'; import type { DisplayMode } from '@js/common'; +import { Widget } from '@ts/core/r1/widget'; import { createRef as infernoCreateRef } from 'inferno'; import { registerKeyboardAction } from '../../ui/shared/accessibility'; @@ -21,7 +22,6 @@ import { KeyboardActionContext } from './common/keyboard_action_context'; import { PaginationConfigProvider } from './common/pagination_config_provider'; import type { PaginationProps } from './common/pagination_props'; import { PaginationDefaultProps } from './common/pagination_props'; -import { Widget } from './common/widget'; import { InfoText } from './info'; import { PageSizeSelector } from './page_size/selector'; import { PageIndexSelector } from './pages/page_index_selector'; diff --git a/packages/devextreme/js/__internal/pagination/editors/common/widget_props.ts b/packages/devextreme/js/__internal/pagination/editors/common/widget_props.ts index eef15999cb51..9e144d4b1a0b 100644 --- a/packages/devextreme/js/__internal/pagination/editors/common/widget_props.ts +++ b/packages/devextreme/js/__internal/pagination/editors/common/widget_props.ts @@ -1,6 +1,6 @@ +import { BaseWidgetDefaultProps } from '@ts/core/r1/base_props'; import type { RefObject } from 'inferno'; -import { BaseWidgetDefaultProps } from '../../base_props'; import type { BaseWidgetProps } from './base_widget_props'; const DEFAULT_FEEDBACK_HIDE_TIMEOUT = 400; From 9601a40987cc3d2a2318042ae02443d470d7d2b2 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Fri, 25 Oct 2024 03:02:30 +0400 Subject: [PATCH 2/8] fix rest attr in widget --- .../js/__internal/core/r1/widget.tsx | 27 +++++++------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/packages/devextreme/js/__internal/core/r1/widget.tsx b/packages/devextreme/js/__internal/core/r1/widget.tsx index 916c2be3df47..19483058fa83 100644 --- a/packages/devextreme/js/__internal/core/r1/widget.tsx +++ b/packages/devextreme/js/__internal/core/r1/widget.tsx @@ -540,24 +540,15 @@ export class Widget extends InfernoWrapperComponent { } getAttributesCore(props: Record): Record { - const { - height, - width, - activeStateEnabled, - hoverStateEnabled, - focusStateEnabled, - _feedbackHideTimeout, - _feedbackShowTimeout, - addWidgetClass, - rootElementRef, - rtlEnabled, - aria, - hint, - cssText, - classes, - name, - ...result - } = props; + const result = { ...props }; + + [ + '_feedbackHideTimeout', '_feedbackShowTimeout', 'accessKey', 'activeStateEnabled', 'activeStateUnit', 'addWidgetClass', 'aria', 'children', 'className', 'classes', 'cssText', 'disabled', 'focusStateEnabled', 'height', 'hint', 'hoverStateEnabled', 'name', 'onActive', 'onClick', 'onDimensionChanged', 'onFocusIn', 'onFocusOut', 'onHoverEnd', 'onHoverStart', 'onInactive', 'onKeyDown', 'onRootElementRendered', 'onVisibilityChange', 'rootElementRef', 'rtlEnabled', 'tabIndex', 'visible', 'width', + ].forEach((exclude) => { + // eslint-disable-next-line @typescript-eslint/no-dynamic-delete + delete result[exclude]; + }); + return result; } From 33f58aa8f250064cfd10f729299b91efa2a403c5 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Fri, 25 Oct 2024 11:02:19 +0400 Subject: [PATCH 3/8] set focusStateEnabled to pagination to true --- .../js/__internal/pagination/common/pagination_props.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devextreme/js/__internal/pagination/common/pagination_props.ts b/packages/devextreme/js/__internal/pagination/common/pagination_props.ts index cc997a5390b8..fa31ae2af2fe 100644 --- a/packages/devextreme/js/__internal/pagination/common/pagination_props.ts +++ b/packages/devextreme/js/__internal/pagination/common/pagination_props.ts @@ -17,4 +17,5 @@ export const PaginationDefaultProps: PaginationProps = { pageIndex: 1, pageIndexChangedInternal: () => { }, pageSizeChangedInternal: () => { }, + focusStateEnabled: true, }; From b435e80903207271f51ae7ee8672d329ec9caa6d Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Fri, 25 Oct 2024 11:02:38 +0400 Subject: [PATCH 4/8] fix rest attrs in widget --- packages/devextreme/js/__internal/core/r1/widget.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/devextreme/js/__internal/core/r1/widget.tsx b/packages/devextreme/js/__internal/core/r1/widget.tsx index 19483058fa83..d0ab6e1929a6 100644 --- a/packages/devextreme/js/__internal/core/r1/widget.tsx +++ b/packages/devextreme/js/__internal/core/r1/widget.tsx @@ -534,12 +534,14 @@ export class Widget extends InfernoWrapperComponent { const props = { ...extend({}, accessKey && { accessKey }) as Record, ...getAria({ ...aria, disabled, hidden: !visible }), - ...extend({}, this.props) as Record, + ...extend({}, this.getRestAttributes( + this.props as Record, + )) as Record, }; - return this.getAttributesCore(props); + return props; } - getAttributesCore(props: Record): Record { + getRestAttributes(props: Record): Record { const result = { ...props }; [ From a82beaab16e0ba18980976a9b1d92c62fcec3019 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Fri, 25 Oct 2024 11:45:04 +0400 Subject: [PATCH 5/8] revert focusedStateEnabled: true in pagination --- e2e/testcafe-devextreme/tests/pagination/baseProperties.ts | 6 +++++- .../js/__internal/pagination/common/pagination_props.ts | 1 - 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts b/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts index bc5d792d1824..48a596549353 100644 --- a/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts +++ b/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts @@ -53,6 +53,7 @@ test('Pagination hint, disabled and accessKey properties', async (t) => { disabled: true, accessKey: 'F', itemCount: 50, + focusStateEnabled: true, })); test('Pagination tabindex and state properties', async (t) => { @@ -90,9 +91,11 @@ test('Pagination tabindex and state properties', async (t) => { tabIndex: 7, })); -test('Pagination focus method without focusStateEnabled', async (t) => { +test('Pagination focus method & accessKey propery without focusStateEnabled', async (t) => { const pagination = new Pagination('#container'); await t + .expect(pagination.element.getAttribute('accesskey')) + .eql('') .expect(pagination.getPageSize(0).element.focused) .notOk(); @@ -105,6 +108,7 @@ test('Pagination focus method without focusStateEnabled', async (t) => { .ok(); }).before(async () => createWidget('dxPagination', { focusStateEnabled: false, + accessKey: 'F', itemCount: 50, })); diff --git a/packages/devextreme/js/__internal/pagination/common/pagination_props.ts b/packages/devextreme/js/__internal/pagination/common/pagination_props.ts index fa31ae2af2fe..cc997a5390b8 100644 --- a/packages/devextreme/js/__internal/pagination/common/pagination_props.ts +++ b/packages/devextreme/js/__internal/pagination/common/pagination_props.ts @@ -17,5 +17,4 @@ export const PaginationDefaultProps: PaginationProps = { pageIndex: 1, pageIndexChangedInternal: () => { }, pageSizeChangedInternal: () => { }, - focusStateEnabled: true, }; From 207a04eef4b1cea83bc12c7859e8c3f132480548 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Fri, 25 Oct 2024 16:35:38 +0400 Subject: [PATCH 6/8] update pagination tests --- .../tests/pagination/baseProperties.ts | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts b/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts index 48a596549353..5427aed6f945 100644 --- a/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts +++ b/e2e/testcafe-devextreme/tests/pagination/baseProperties.ts @@ -37,25 +37,32 @@ test('Pagination elementAttr property', async (t) => { }, })); -test('Pagination hint, disabled and accessKey properties', async (t) => { +test('Pagination hint and accessKey properties', async (t) => { const pagination = new Pagination('#container'); await t - .expect(pagination.element.getAttribute('aria-disabled')) - .eql('true') - .expect(pagination.element.hasClass('dx-state-disabled')) - .ok() .expect(pagination.element.getAttribute('accesskey')) .eql('F') .expect(pagination.element.getAttribute('title')) .eql('Best Pagination'); }).before(async () => createWidget('dxPagination', { hint: 'Best Pagination', - disabled: true, accessKey: 'F', itemCount: 50, focusStateEnabled: true, })); +test('Pagination disabled property', async (t) => { + const pagination = new Pagination('#container'); + await t + .expect(pagination.element.getAttribute('aria-disabled')) + .eql('true') + .expect(pagination.element.hasClass('dx-state-disabled')) + .ok(); +}).before(async () => createWidget('dxPagination', { + disabled: true, + itemCount: 50, +})); + test('Pagination tabindex and state properties', async (t) => { const pagination = new Pagination('#container'); await t @@ -95,7 +102,7 @@ test('Pagination focus method & accessKey propery without focusStateEnabled', as const pagination = new Pagination('#container'); await t .expect(pagination.element.getAttribute('accesskey')) - .eql('') + .eql(null) .expect(pagination.getPageSize(0).element.focused) .notOk(); From b3ced96e6f392460106a2aed24c1aa1a6579cf02 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Fri, 25 Oct 2024 17:01:56 +0400 Subject: [PATCH 7/8] fix widget activate --- packages/devextreme/js/__internal/core/r1/widget.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/devextreme/js/__internal/core/r1/widget.tsx b/packages/devextreme/js/__internal/core/r1/widget.tsx index d0ab6e1929a6..52b1cf9d11d0 100644 --- a/packages/devextreme/js/__internal/core/r1/widget.tsx +++ b/packages/devextreme/js/__internal/core/r1/widget.tsx @@ -619,11 +619,15 @@ export class Widget extends InfernoWrapperComponent { } activate(): void { - this.state.active = true; + this.setState({ + active: true, + }); } deactivate(): void { - this.state.active = false; + this.setState({ + active: false, + }); } render(): JSX.Element { From e5097acdde72a41e02082aeb9e5ab0020ca6a7a4 Mon Sep 17 00:00:00 2001 From: Roman Semenov Date: Fri, 25 Oct 2024 19:47:20 +0400 Subject: [PATCH 8/8] fix knockout --- .../js/integration/knockout/component_registrator.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/devextreme/js/integration/knockout/component_registrator.js b/packages/devextreme/js/integration/knockout/component_registrator.js index b0cd82024004..c39a2816a2a6 100644 --- a/packages/devextreme/js/integration/knockout/component_registrator.js +++ b/packages/devextreme/js/integration/knockout/component_registrator.js @@ -7,6 +7,7 @@ import registerComponentCallbacks from '../../core/component_registrator_callbac import Widget from '../../ui/widget/ui.widget'; import VizWidget from '../../__internal/viz/core/m_base_widget'; import ComponentWrapper from '../../renovation/component_wrapper/common/component'; +import { ComponentWrapper as ComponentWrapperMigrated } from '../../__internal/core/r1/component_wrapper'; import Draggable from '../../ui/draggable'; import ScrollView from '../../ui/scroll_view'; import { KoTemplate } from './template'; @@ -212,7 +213,7 @@ if(ko) { return { controlsDescendantBindings: componentClass.subclassOf(Widget) || componentClass.subclassOf(VizWidget) || - (componentClass.subclassOf(ComponentWrapper) && !(component instanceof ScrollView)) || component instanceof Draggable + ((componentClass.subclassOf(ComponentWrapper) || componentClass.subclassOf(ComponentWrapperMigrated)) && !(component instanceof ScrollView)) || component instanceof Draggable }; } };