🎹 Pager: Migrate number_box + select_box + rest embedded components (#…

…27848)

packages/devextreme/js/__internal/core/r1/config_context.ts

@@ -0,0 +1,5 @@
+import { createContext } from '@devextreme/runtime/inferno';
+
+export interface ConfigContextValue { rtlEnabled?: boolean }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ConfigContext = createContext<ConfigContextValue | undefined>(undefined) as any;

packages/devextreme/js/__internal/core/r1/config_provider.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
+
+export interface ConfigProviderProps {
+  rtlEnabled?: boolean;
+  children: JSX.Element;
+}
+
+export const ConfigProviderDefaultProps = {};
+export class ConfigProvider extends BaseInfernoComponent<ConfigProviderProps> {
+  public state: any = {};
+
+  render(): JSX.Element {
+    return (
+      this.props.children
+    );
+  }
+}
+ConfigProvider.defaultProps = ConfigProviderDefaultProps;

packages/devextreme/js/__internal/core/r1/dom_component_wrapper.tsx

@@ -5,15 +5,15 @@ import {
   hasTemplate, InfernoComponent, InfernoEffect, renderTemplate,
 } from '@devextreme/runtime/inferno';
 import type { ComponentClass } from '@js/core/dom_component';
-import type { EventCallback } from '@js/renovation/ui/common/event_callback';
 import { getUpdatedOptions } from '@js/renovation/ui/common/utils/get_updated_options';
 import type { DisposeEffectReturn } from '@js/renovation/utils/effect_return';
 import type { RefObject } from 'inferno';
 import { createRef } from 'inferno';
 
 import type DomComponent from '../../../core/dom_component';
 import { extend } from '../../../core/utils/extend';
-import { ConfigContext } from '../../../renovation/common/config_context';
+import { ConfigContext } from './config_context';
+import type { EventCallback } from './event_callback';
 
 interface ComponentProps {
   className?: string;
@@ -55,11 +55,11 @@ export class DomComponentWrapper extends InfernoComponent<DomComponentWrapperPro
   }
 
   getConfig(): any {
-    const { id } = (ConfigContext as any);
+    const { id } = ConfigContext;
     if (this.context[id]) {
       return this.context[id];
     }
-    return (ConfigContext as any).defaultValue;
+    return ConfigContext.defaultValue;
   }
 
   render(): JSX.Element {

packages/devextreme/js/__internal/core/r1/event_callback.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-type-alias
+export type EventCallback<T = undefined> = T extends undefined ? () => void : (value: T) => void;
+
+export class WorkaroundForVue {
+  // TODO: empty class as a WA for https://github.com/DevExpress/devextreme-renovation/issues/725
+  public dummy = '';
+}

packages/devextreme/js/__internal/core/r1/utils/effect_return.ts

@@ -0,0 +1,2 @@
+export type DisposeEffectReturn = (() => void);
+export type EffectReturn = DisposeEffectReturn | undefined;

packages/devextreme/js/__internal/core/r1/utils/get_computed_style.ts

@@ -0,0 +1,7 @@
+import { getWindow } from '../../../../core/utils/window';
+
+export default function getElementComputedStyle(el: Element | undefined | null):
+CSSStyleDeclaration | null {
+  const window = getWindow();
+  return el ? window.getComputedStyle?.(el) : null;
+}

packages/devextreme/js/__internal/core/r1/utils/render_utils.ts

@@ -0,0 +1,5 @@
+export const combineClasses = (
+  classesMap: { [key: string]: boolean },
+): string => Object.keys(classesMap)
+  .filter((cssClass) => !!cssClass && classesMap[cssClass])
+  .join(' ');

packages/devextreme/js/__internal/core/r1/utils/resolve_rtl.ts

@@ -0,0 +1,24 @@
+import globalConfig from '../../../../core/config';
+import { isDefined } from '../../../../core/utils/type';
+import type { ConfigContextValue } from '../config_context';
+
+export function resolveRtlEnabled(rtlProp?: boolean, config?: ConfigContextValue):
+boolean | undefined {
+  if (rtlProp !== undefined) {
+    return rtlProp;
+  }
+  if (config?.rtlEnabled !== undefined) {
+    return config.rtlEnabled;
+  }
+  return globalConfig().rtlEnabled;
+}
+
+export function resolveRtlEnabledDefinition(rtlProp?: boolean, config?: ConfigContextValue):
+boolean {
+  const isPropDefined = isDefined(rtlProp);
+  const onlyGlobalDefined = isDefined(globalConfig().rtlEnabled)
+  && !isPropDefined && !isDefined(config?.rtlEnabled);
+  return (isPropDefined
+  && (rtlProp !== config?.rtlEnabled))
+  || onlyGlobalDefined;
+}

packages/devextreme/js/__internal/core/r1/utils/subscribe_to_event copy.ts

@@ -0,0 +1,49 @@
+import * as clickEvent from '../../../../events/click';
+import eventsEngine from '../../../../events/core/events_engine';
+import scrollEvents from '../../../../events/gesture/emitter.gesture.scroll';
+import pointerEvents from '../../../../events/pointer';
+import { addNamespace } from '../../../../events/utils/index';
+import type { EffectReturn } from './effect_return';
+
+export function subscribeToEvent(eventName: string) {
+  return (
+    element: HTMLElement | Document | undefined | null,
+    handler: unknown,
+    eventData?: unknown,
+    namespace?: string,
+  ): EffectReturn => {
+    const event = namespace ? addNamespace(eventName, namespace) : eventName;
+    if (handler) {
+      eventsEngine.on(element, event, eventData, handler);
+      return (): void => {
+        eventsEngine.off(element, event, handler);
+      };
+    }
+    return undefined;
+  };
+}
+export const subscribeToClickEvent = subscribeToEvent(clickEvent.name);
+
+export const subscribeToScrollEvent = subscribeToEvent(scrollEvents.scroll);
+export const subscribeToScrollInitEvent = subscribeToEvent(scrollEvents.init);
+export const subscribeToDXScrollStartEvent = subscribeToEvent(scrollEvents.start);
+export const subscribeToDXScrollMoveEvent = subscribeToEvent(scrollEvents.move);
+export const subscribeToDXScrollEndEvent = subscribeToEvent(scrollEvents.end);
+export const subscribeToDXScrollStopEvent = subscribeToEvent(scrollEvents.stop);
+export const subscribeToDXScrollCancelEvent = subscribeToEvent(scrollEvents.cancel);
+
+export const subscribeToDXPointerDownEvent = subscribeToEvent(pointerEvents.down);
+export const subscribeToDXPointerUpEvent = subscribeToEvent(pointerEvents.up);
+export const subscribeToDXPointerMoveEvent = subscribeToEvent(pointerEvents.move);
+
+export const subscribeToMouseEnterEvent = subscribeToEvent('mouseenter');
+export const subscribeToMouseLeaveEvent = subscribeToEvent('mouseleave');
+
+export const subscribeToKeyDownEvent = subscribeToEvent('keydown');
+
+export const subscribeToDxActiveEvent = subscribeToEvent('dxactive');
+export const subscribeToDxInactiveEvent = subscribeToEvent('dxinactive');
+export const subscribeToDxHoverStartEvent = subscribeToEvent('dxhoverstart');
+export const subscribeToDxHoverEndEvent = subscribeToEvent('dxhoverend');
+export const subscribeToDxFocusInEvent = subscribeToEvent('focusin');
+export const subscribeToDxFocusOutEvent = subscribeToEvent('focusout');

packages/devextreme/js/__internal/core/r1/utils/subscribe_to_event.ts

@@ -0,0 +1,49 @@
+import * as clickEvent from '../../../../events/click';
+import eventsEngine from '../../../../events/core/events_engine';
+import scrollEvents from '../../../../events/gesture/emitter.gesture.scroll';
+import pointerEvents from '../../../../events/pointer';
+import { addNamespace } from '../../../../events/utils/index';
+import type { EffectReturn } from './effect_return';
+
+export function subscribeToEvent(eventName: string) {
+  return (
+    element: HTMLElement | Document | undefined | null,
+    handler: unknown,
+    eventData?: unknown,
+    namespace?: string,
+  ): EffectReturn => {
+    const event = namespace ? addNamespace(eventName, namespace) : eventName;
+    if (handler) {
+      eventsEngine.on(element, event, eventData, handler);
+      return (): void => {
+        eventsEngine.off(element, event, handler);
+      };
+    }
+    return undefined;
+  };
+}
+export const subscribeToClickEvent = subscribeToEvent(clickEvent.name);
+
+export const subscribeToScrollEvent = subscribeToEvent(scrollEvents.scroll);
+export const subscribeToScrollInitEvent = subscribeToEvent(scrollEvents.init);
+export const subscribeToDXScrollStartEvent = subscribeToEvent(scrollEvents.start);
+export const subscribeToDXScrollMoveEvent = subscribeToEvent(scrollEvents.move);
+export const subscribeToDXScrollEndEvent = subscribeToEvent(scrollEvents.end);
+export const subscribeToDXScrollStopEvent = subscribeToEvent(scrollEvents.stop);
+export const subscribeToDXScrollCancelEvent = subscribeToEvent(scrollEvents.cancel);
+
+export const subscribeToDXPointerDownEvent = subscribeToEvent(pointerEvents.down);
+export const subscribeToDXPointerUpEvent = subscribeToEvent(pointerEvents.up);
+export const subscribeToDXPointerMoveEvent = subscribeToEvent(pointerEvents.move);
+
+export const subscribeToMouseEnterEvent = subscribeToEvent('mouseenter');
+export const subscribeToMouseLeaveEvent = subscribeToEvent('mouseleave');
+
+export const subscribeToKeyDownEvent = subscribeToEvent('keydown');
+
+export const subscribeToDxActiveEvent = subscribeToEvent('dxactive');
+export const subscribeToDxInactiveEvent = subscribeToEvent('dxinactive');
+export const subscribeToDxHoverStartEvent = subscribeToEvent('dxhoverstart');
+export const subscribeToDxHoverEndEvent = subscribeToEvent('dxhoverend');
+export const subscribeToDxFocusInEvent = subscribeToEvent('focusin');
+export const subscribeToDxFocusOutEvent = subscribeToEvent('focusout');

packages/devextreme/js/__internal/core/r1/utils/type_conversion.ts

@@ -0,0 +1,3 @@
+export function toNumber(attribute: string | undefined): number {
+  return attribute ? Number(attribute.replace('px', '')) : 0;
+}

packages/devextreme/js/__internal/grids/grid_core/pager/m_pager.ts

@@ -3,6 +3,7 @@ import { hasWindow } from '@js/core/utils/window';
 import messageLocalization from '@js/localization/message';
 import Pager from '@js/ui/pager';
 
+import type { PagerProps } from '../../../pager/common/pager_props';
 import modules from '../m_modules';
 
 const PAGER_CLASS = 'pager';
@@ -83,7 +84,7 @@ export class PagerView extends modules.View {
     const pagerOptions = that.option('pager') ?? {};
     const dataController = that.getController('data');
     const keyboardController = that.getController('keyboardNavigation');
-    const options: any = {
+    const options: PagerProps = {
       maxPagesCount: MAX_PAGES_COUNT,
       pageIndex: getPageIndex(dataController),
       pageCount: dataController.pageCount(),
@@ -97,6 +98,7 @@ export class PagerView extends modules.View {
       pageSizes: that.getPageSizes(),
       totalCount: dataController.totalCount(),
       hasKnownLastPage: dataController.hasKnownLastPage(),
+      rtlEnabled: that.option('rtlEnabled'),
       pageIndexChanged(pageIndex) {
         if (dataController.pageIndex() !== pageIndex - 1) {
           dataController.pageIndex(pageIndex - 1);
@@ -106,8 +108,6 @@ export class PagerView extends modules.View {
         dataController.pageSize(pageSize);
       },
       onKeyDown: (e) => keyboardController && keyboardController.executeAction('onKeyDown', e),
-      useLegacyKeyboardNavigation: this.option('useLegacyKeyboardNavigation'),
-      useKeyboard: this.option('keyboardNavigation.enabled'),
     };
 
     if (isDefined(pagerOptions.infoText)) {

packages/devextreme/js/__internal/pager/base_props.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface BaseWidgetProps {
+  className?: string;
+  accessKey?: string;
+  activeStateEnabled?: boolean;
+  disabled?: boolean;
+  focusStateEnabled?: boolean;
+  height?: string | number | (() => (string | number));
+  hint?: string;
+  hoverStateEnabled?: boolean;
+  onClick?: (e: any) => void;
+  onKeyDown?: (e: any) => any;
+  rtlEnabled?: boolean;
+  tabIndex?: number;
+  visible?: boolean;
+  width?: string | number | (() => (string | number));
+}
+
+export const BaseWidgetDefaultProps: BaseWidgetProps = {
+  className: '',
+  activeStateEnabled: false,
+  disabled: false,
+  focusStateEnabled: false,
+  hoverStateEnabled: false,
+  tabIndex: 0,
+  visible: true,
+};

packages/devextreme/js/__internal/pager/common/base_pager_props.ts

@@ -0,0 +1,42 @@
+import type { PagerDisplayMode } from '@js/common/grids';
+
+import messageLocalization from '../../../localization/message';
+import type { EventCallback } from '../../core/r1/event_callback';
+
+export interface BasePagerProps {
+  gridCompatibility?: boolean;
+  className?: string;
+  showInfo?: boolean;
+  infoText?: string;
+  lightModeEnabled?: boolean;
+  displayMode?: PagerDisplayMode;
+  maxPagesCount: number;
+  pageCount: number;
+  pagesCountText?: string;
+  visible?: boolean;
+  hasKnownLastPage?: boolean;
+  pagesNavigatorVisible?: boolean | 'auto';
+  showPageSizes?: boolean;
+  pageSizes: (number | 'all')[];
+  rtlEnabled?: boolean;
+  showNavigationButtons?: boolean;
+  totalCount?: number;
+  label?: string;
+  onKeyDown?: EventCallback<Event>;
+}
+
+export const BasePagerDefaultProps: BasePagerProps = {
+  gridCompatibility: true,
+  showInfo: false,
+  displayMode: 'adaptive',
+  maxPagesCount: 10,
+  pageCount: 10,
+  visible: true,
+  hasKnownLastPage: true,
+  pagesNavigatorVisible: 'auto',
+  showPageSizes: true,
+  pageSizes: [5, 10],
+  showNavigationButtons: false,
+  totalCount: 0,
+  label: messageLocalization.format('dxPager-ariaLabel'),
+};

packages/devextreme/js/renovation/ui/pager/common/keyboard_action_context.ts → packages/devextreme/js/__internal/pager/common/keyboard_action_context.ts

@@ -1,6 +1,7 @@
-import { createContext } from '@devextreme-generator/declarations';
-import { DisposeEffectReturn } from '../../../utils/effect_return';
-import { EventCallback } from '../../common/event_callback';
+import { createContext } from '@devextreme/runtime/inferno';
+
+import type { EventCallback } from '../../core/r1/event_callback';
+import type { DisposeEffectReturn } from '../../core/r1/utils/effect_return';
 
 export interface KeyboardActionContextType {
   registerKeyboardAction: (el: HTMLElement, handler: EventCallback) => DisposeEffectReturn;