Skip to content

Commit

Permalink
Merge branch '24_1' into ci/pnpm
Browse files Browse the repository at this point in the history
  • Loading branch information
pomahtri committed Jun 13, 2024
2 parents 12d67d1 + 2b9a655 commit 4ee1e05
Show file tree
Hide file tree
Showing 143 changed files with 14,404 additions and 13,790 deletions.
7 changes: 1 addition & 6 deletions .github/workflows/demos_visual_tests_frameworks.yml
Original file line number Diff line number Diff line change
Expand Up @@ -439,15 +439,10 @@ jobs:
CI_ENV: true # The `ignore` field in the visualtestrc.json should be disabled when running test locally
run: pnpx nx test-testcafe

- name: Get screenshots artifacts name
if: ${{ failure() }}
id: screenshotname
run: echo "value=$(echo "${{ matrix.CONSTEL }}" | grep -oP "^\w+")" >> $GITHUB_OUTPUT

- name: Copy screenshots artifacts
if: ${{ failure() }}
uses: actions/upload-artifact@v3
with:
name: screenshots-${{ steps.screenshotname.outputs.value }}-${{ matrix.THEME }}
name: screenshots
path: ${{ github.workspace }}/apps/demos/testing/artifacts/compared-screenshots/**/*
if-no-files-found: ignore

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

8 changes: 8 additions & 0 deletions apps/demos/Demos/DropDownBox/MultipleSelection/description.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
DropDownBox is an advanced editor whose drop-down window can include other components.

DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).

If the UI component embedded into the DropDownBox component's drop-down window allows multiple selection, synchronize the component's value with the state of selected items as demonstrated in the following demo: [Single Selection](/Demos/WidgetsGallery/Demo/DropDownBox/SingleSelection/).
<!--split-->

This demo uses the DataGrid's **selection**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode) and TreeView's [selectionMode](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#selectionMode) properties to enable multiple selection.

This file was deleted.

6 changes: 5 additions & 1 deletion apps/demos/Demos/DropDownBox/SingleSelection/description.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
The DropDownBox component consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in single selection mode.
DropDownBox is an advanced editor whose drop-down window can include other components.

DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).

To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
<!--split-->

In this demo, TreeView and the DataGrid components in single-selection mode are embedded into the DropDownBox window.

The following instructions show how to synchronize the DropDownBox with an embedded DevExtreme component:

1. **Specify data sources**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const createData = (count, innerCount) => {
return result;
};

test('Row fields overlap data fields if dataFieldArea is set to "row" and virtual scrolling is enabled (T1210807)', async (t) => {
test.meta({ unstable: true })('Row fields overlap data fields if dataFieldArea is set to "row" and virtual scrolling is enabled (T1210807)', async (t) => {
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
const pivotGrid = new PivotGrid('#container');
const firstHeaderRow = pivotGrid.getRowsArea(2).getCell(0);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1251,6 +1251,7 @@ export const validatingEditorFactoryExtender = (Base: ModuleType<EditorFactory>)

this._hideFixedGroupCell($cell, overlayOptions);

// @ts-expect-error
// eslint-disable-next-line no-new
new Overlay($overlayElement, overlayOptions);
}
Expand Down
20 changes: 20 additions & 0 deletions packages/devextreme/js/__internal/ui/collection/async.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import CollectionWidgetAsync from '@js/ui/collection/ui.collection_widget.async';
import type { CollectionWidgetOptions, ItemLike } from '@js/ui/collection/ui.collection_widget.base';

import CollectionWidgetEdit from './edit';

declare class Async<
// eslint-disable-next-line @typescript-eslint/no-explicit-any
TProperties extends CollectionWidgetOptions<any, TItem, TKey>,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
TItem extends ItemLike = any,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
TKey = any,
> extends CollectionWidgetEdit<TProperties> {
_renderItemsAsync(): void;
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const TypedCollectionWidget: typeof Async = CollectionWidgetAsync as any;

export default TypedCollectionWidget;
9 changes: 8 additions & 1 deletion packages/devextreme/js/__internal/ui/collection/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ declare class Base<
// eslint-disable-next-line @typescript-eslint/no-explicit-any
TKey = any,
> extends Widget<TProperties> {
_renderedItemsCount: number;

getDataSource(): DataSource<TItem, TKey>;

_renderItems(items: TItem[]): void;
Expand Down Expand Up @@ -61,7 +63,12 @@ declare class Base<
_getIndexByItem(item: TItem): number;
_getIndexByItemData(item: TItem): number;
_getAvailableItems($items?: dxElementWrapper): dxElementWrapper;
_getSummaryItemsSize(dimension: string, items: TItem[], includeMargin: boolean): number;
_itemElements(): dxElementWrapper;
_getSummaryItemsSize(
dimension: string,
items: dxElementWrapper,
includeMargin?: boolean
): number;
_getActiveItem(last?: boolean): dxElementWrapper;
_findItemElementByItem(item: TItem): dxElementWrapper;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Color from '@js/color';
import registerComponent from '@js/core/component_registrator';
import $ from '@js/core/renderer';
import { extend } from '@js/core/utils/extend';
import DropDownEditor from '@js/ui/drop_down_editor/ui.drop_down_editor';
import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';

import ColorView from './m_color_view';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { name as contextMenuEventName } from '@js/events/contextmenu';
import eventsEngine from '@js/events/core/events_engine';
import holdEvent from '@js/events/hold';
import { addNamespace } from '@js/events/utils/index';
import type { Item, Properties } from '@js/ui/context_menu';
import type { Item } from '@js/ui/context_menu';
import type { Properties as OverlayProperties } from '@js/ui/overlay';
import type dxOverlay from '@js/ui/overlay';
import Overlay from '@js/ui/overlay/ui.overlay';
Expand Down Expand Up @@ -78,8 +78,6 @@ class ContextMenu extends MenuBase {

_actions?: any;

_optionsByReference?: Properties;

_showContextMenuEventHandler?: (event: unknown) => any;

getShowEvent(showEventOption: {
Expand Down Expand Up @@ -671,7 +669,6 @@ class ContextMenu extends MenuBase {
}

_initScrollable($container) {
// @ts-expect-error
this._createComponent($container, Scrollable, {
useKeyboard: false,
_onVisibilityChanged: (scrollable) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -661,8 +661,8 @@ class MenuBase extends HierarchicalCollectionWidget<Properties> {
_getElementByItem(itemData) {
let result;

// @ts-expect-error
each(this._itemElements(), (_, itemElement) => {
// @ts-expect-error
if ($(itemElement).data(this._itemDataKey()) !== itemData) {
return true;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { isDate as isDateType, isNumeric, isString } from '@js/core/utils/type';
import { getWindow, hasWindow } from '@js/core/utils/window';
import dateLocalization from '@js/localization/date';
import messageLocalization from '@js/localization/message';
import DropDownEditor from '@js/ui/drop_down_editor/ui.drop_down_editor';
import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';

import Calendar from './m_date_box.strategy.calendar';
import CalendarWithTime from './m_date_box.strategy.calendar_with_time';
Expand Down Expand Up @@ -58,7 +58,6 @@ const STRATEGY_CLASSES = {
List,
};

// @ts-expect-error
const DateBox = DropDownEditor.inherit({

_supportedKeys() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { getHeight, getOuterHeight } from '@js/core/utils/size';
import { isDate } from '@js/core/utils/type';
import { getWindow } from '@js/core/utils/window';
import dateLocalization from '@js/localization/date';
import { getSizeValue } from '@js/ui/drop_down_editor/utils';
import List from '@js/ui/list_light';
import { getSizeValue } from '@ts/ui/drop_down_editor/m_utils';

import DateBoxStrategy from './m_date_box.strategy';
import dateUtils from './m_date_utils';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import eventsEngine from '@js/events/core/events_engine';
import { addNamespace } from '@js/events/utils/index';
import messageLocalization from '@js/localization/message';
import type { Properties } from '@js/ui/date_range_box';
import DropDownButton from '@js/ui/drop_down_editor/ui.drop_down_button';
import Editor from '@js/ui/editor/editor';
import { current, isFluent, isMaterial } from '@js/ui/themes';
import DropDownButton from '@ts/ui/drop_down_editor/m_drop_down_button';
import ClearButton from '@ts/ui/text_box/m_text_editor.clear';
import TextEditorButtonCollection from '@ts/ui/text_box/texteditor_button_collection/m_index';

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import $ from '@js/core/renderer';
import { extend } from '@js/core/utils/extend';
import eventsEngine from '@js/events/core/events_engine';
import messageLocalization from '@js/localization/message';
import Button from '@js/ui/button';

import TextEditorButton from '../text_box/texteditor_button_collection/m_button';

const DROP_DOWN_EDITOR_BUTTON_CLASS = 'dx-dropdowneditor-button';
const DROP_DOWN_EDITOR_BUTTON_VISIBLE = 'dx-dropdowneditor-button-visible';

const BUTTON_MESSAGE = 'dxDropDownEditor-selectLabel';

export default class DropDownButton extends TextEditorButton {
currentTemplate: any;

constructor(name, editor, options) {
super(name, editor, options);

this.currentTemplate = null;
}

_attachEvents(instance): void {
const { editor } = this;

instance.option('onClick', (e) => {
if (editor._shouldCallOpenHandler?.()) {
editor._openHandler(e);
return;
}

!editor.option('openOnFieldClick') && editor._openHandler(e);
});

eventsEngine.on(instance.$element(), 'mousedown', (e) => {
if (editor.$element().is('.dx-state-focused')) {
e.preventDefault();
}
});
}

_create() {
const { editor } = this;
const $element = $('<div>');
const options = this._getOptions();

this._addToContainer($element);

const instance = editor._createComponent($element, Button, extend({}, options, { elementAttr: { 'aria-label': messageLocalization.format(BUTTON_MESSAGE) } }));

this._legacyRender(editor.$element(), $element, options.visible);

return {
$element,
instance,
};
}

_getOptions() {
const { editor } = this;
const visible = this._isVisible();
const isReadOnly = editor.option('readOnly');
const options = {
focusStateEnabled: false,
hoverStateEnabled: false,
activeStateEnabled: false,
useInkRipple: false,
disabled: isReadOnly,
visible,
};

this._addTemplate(options);
return options;
}

_isVisible(): boolean {
const { editor } = this;

return super._isVisible() && editor.option('showDropDownButton');
}

// TODO: get rid of it
_legacyRender($editor, $element, isVisible) {
$editor.toggleClass(DROP_DOWN_EDITOR_BUTTON_VISIBLE, isVisible);

if ($element) {
$element
.removeClass('dx-button')
.removeClass('dx-button-mode-contained')
.addClass(DROP_DOWN_EDITOR_BUTTON_CLASS);
}
}

_isSameTemplate() {
return this.editor.option('dropDownButtonTemplate') === this.currentTemplate;
}

_addTemplate(options): void {
if (!this._isSameTemplate()) {
options.template = this.editor._getTemplateByOption('dropDownButtonTemplate');
this.currentTemplate = this.editor.option('dropDownButtonTemplate');
}
}

// @ts-expect-error
update(): void {
const shouldUpdate = super.update();

if (shouldUpdate) {
const { editor, instance } = this;
const $editor = editor.$element();
const options = this._getOptions();

instance?.option(options);
this._legacyRender($editor, instance?.$element(), options.visible);
}
}
}
Loading

0 comments on commit 4ee1e05

Please sign in to comment.