-
Notifications
You must be signed in to change notification settings - Fork 601
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
143 changed files
with
14,404 additions
and
13,790 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 0 additions & 4 deletions
4
apps/demos/Demos/DropDownBox/MultipleSelection/Angular/description.md
This file was deleted.
Oops, something went wrong.
4 changes: 0 additions & 4 deletions
4
apps/demos/Demos/DropDownBox/MultipleSelection/React/description.md
This file was deleted.
Oops, something went wrong.
4 changes: 0 additions & 4 deletions
4
apps/demos/Demos/DropDownBox/MultipleSelection/ReactJs/description.md
This file was deleted.
Oops, something went wrong.
4 changes: 0 additions & 4 deletions
4
apps/demos/Demos/DropDownBox/MultipleSelection/Vue/description.md
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
4 changes: 0 additions & 4 deletions
4
apps/demos/Demos/DropDownBox/MultipleSelection/jQuery/description.md
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_button.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} | ||
} |
Oops, something went wrong.