Skip to content

ColorBox: typings comments refactoring #33722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vorobey merged 2 commits into from
May 27, 2026
Merged

ColorBox: typings comments refactoring #33722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06a5ca2
ColorBox: typings comments refactoring (#33682)
vorobey May 26, 2026
08f1f9d
retrigger CI
May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/devextreme/js/__internal/ui/calendar/calendar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,6 @@ class Calendar<
const cellElement = this._view._getContouredCell().get(0);
event.target = cellElement;
}
// @ts-expect-error ts-error
this._saveValueChangeEvent(event);
}
this._setDateOption('value', value);
Expand Down
116 changes: 64 additions & 52 deletions packages/devextreme/js/__internal/ui/color_box/m_color_box.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import Color from '@js/color';
import registerComponent from '@js/core/component_registrator';
import type { dxElementWrapper } from '@js/core/renderer';
import $ from '@js/core/renderer';
import type { DeferredObj } from '@js/core/utils/deferred';
import type { Properties } from '@js/ui/color_box';
import type { OptionChanged } from '@ts/core/widget/types';
import Color from '@ts/m_color';
import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';
import type { ValueChangedEvent } from '@ts/ui/editor/editor';

import type { PopupProperties } from '../popup/m_popup';
import type Popup from '../popup/m_popup';
Expand All @@ -29,14 +31,21 @@ export const DX_ICON_COLOR_DISMISS = 'dx-icon-colordismiss';

const colorEditorPrototype = ColorView.prototype;
const colorUtils = {
makeTransparentBackground: colorEditorPrototype._makeTransparentBackground.bind(colorEditorPrototype),
makeTransparentBackground:
colorEditorPrototype._makeTransparentBackground.bind(colorEditorPrototype),
makeRgba: colorEditorPrototype._makeRgba.bind(colorEditorPrototype),
};

export interface ColorBoxProperties extends Omit<Properties,
'onClosed' | 'onOpened'
| 'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput' | 'onKeyDown' | 'onKeyUp' | 'onPaste'
| 'onValueChanged' | 'validationMessagePosition' | 'onContentReady' | 'onDisposing' | 'onOptionChanged' | 'onInitialized'> {
| 'onCopy' | 'onCut'
| 'onEnterKey' | 'onFocusIn'
| 'onFocusOut' | 'onInput'
| 'onKeyDown' | 'onKeyUp' | 'onPaste'
| 'onValueChanged' | 'validationMessagePosition'
| 'onContentReady' | 'onDisposing'
| 'onOptionChanged' | 'onInitialized'> {
buttonsLocation?: string;
}

class ColorBox extends DropDownEditor<ColorBoxProperties> {
Expand All @@ -55,17 +64,19 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
_$colorBoxInputContainer!: dxElementWrapper;

_supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | undefined> {
// @ts-expect-error ts-error
const arrowHandler = function (e) {
const arrowHandler = (e: KeyboardEvent): boolean => {
e.stopPropagation();
if (this.option('opened')) {
const { opened } = this.option();
if (opened) {
e.preventDefault();
return true;
}
return false;
};

const upArrowHandler = function (e) {
if (!this.option('opened')) {
const upArrowHandler = (e: KeyboardEvent): boolean => {
const { opened } = this.option();
if (!opened) {
e.preventDefault();
return false;
}
Expand All @@ -76,12 +87,13 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
return true;
};

const downArrowHandler = function (e) {
if (!this.option('opened') && !e.altKey) {
const downArrowHandler = (e: KeyboardEvent): boolean => {
const { opened } = this.option();
if (!opened && !e.altKey) {
e.preventDefault();
return false;
}
if (!this.option('opened') && e.altKey) {
if (!opened && e.altKey) {
this._validatedOpening();
return false;
}
Expand All @@ -104,18 +116,18 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
editAlphaChannel: false,
applyValueMode: 'useButtons',
keyStep: 1,
// @ts-expect-error ts-error
// @ts-expect-error fieldTemplate is deprecated --- IGNORE ---
fieldTemplate: null,
buttonsLocation: 'bottom after',
};
}

_popupHidingHandler(): void {
super._popupHidingHandler();
const { applyValueMode } = this.option();
const { applyValueMode, value } = this.option();

if (applyValueMode === 'useButtons') {
this._updateColorViewValue(this.option('value'));
this._updateColorViewValue(value);
}
}

Expand Down Expand Up @@ -164,8 +176,8 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
this._colorView = this._createComponent($colorView, ColorView, this._colorViewConfig());
}

_applyNewColor(value): void {
this.option('value', value);
_applyNewColor(newValue: string | null | undefined): void {
this.option('value', newValue);

this._updateNoColorIndicator();

Expand All @@ -184,8 +196,6 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
stylingMode,
} = this.option();

const that = this;

return {
value,
matchValue: value,
Expand All @@ -194,36 +204,38 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
focusStateEnabled,
stylingMode,
target: this._input(),
onEnterKeyPressed({ event }) {
that._colorViewEnterKeyPressed = true;
if (that._colorView.option('value') !== that.option('value')) {
that._saveValueChangeEvent(event);
that._applyNewColor(that._colorView.option('value'));
that.close();
onEnterKeyPressed: (e: ValueChangedEvent<KeyboardEvent>): void => {
const { event } = e;
const { value: optionValue } = this.option();
this._colorViewEnterKeyPressed = true;
if (this._colorView.option('value') !== optionValue) {
this._saveValueChangeEvent(event);
const { value: colorViewValue } = this._colorView.option();
this._applyNewColor(colorViewValue);
this.close();
}
},

onValueChanged({ event, value, previousValue }) {
// @ts-expect-error ts-error
const instantlyMode = that.option('applyValueMode') === 'instantly';
const isOldValue = colorUtils.makeRgba(value) === previousValue;
const changesApplied = instantlyMode || that._colorViewEnterKeyPressed;
const valueCleared = that._shouldSaveEmptyValue;
onValueChanged: ({ event, value: changedValue, previousValue }): void => {
const { applyValueMode: currentValueMode } = this.option();
const isInstantlyMode = currentValueMode === 'instantly';
const isOldValue = colorUtils.makeRgba(changedValue) === previousValue;
const isChangesApplied = isInstantlyMode || this._colorViewEnterKeyPressed;
const isValueCleared = this._shouldSaveEmptyValue;

if (isOldValue || !changesApplied || valueCleared) {
if (isOldValue || !isChangesApplied || isValueCleared) {
return;
}

if (event) {
// @ts-expect-error ts-error
that._saveValueChangeEvent(event);
this._saveValueChangeEvent(event);
}
that._applyNewColor(value);
this._applyNewColor(changedValue);
},
};
}

_enterKeyHandler(e) {
_enterKeyHandler(e: KeyboardEvent): boolean | undefined {
const newValue = this._input().val();
const { value, editAlphaChannel } = this.option();
const oldValue = value && editAlphaChannel ? colorUtils.makeRgba(value) : value;
Expand All @@ -234,17 +246,16 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {

if (color.colorIsInvalid) {
this._input().val(oldValue === null ? undefined : oldValue);
return;
return false;
}
// @ts-expect-error ts-error
if (newValue !== oldValue) {
this._applyColorFromInput(newValue);
this._saveValueChangeEvent(e);
this.option('value', this.option('editAlphaChannel') ? colorUtils.makeRgba(newValue) : newValue);
this.option('value', editAlphaChannel ? colorUtils.makeRgba(newValue) : newValue);
}

if (this._colorView) {
const colorViewValue = this._colorView.option('value');
const { value: colorViewValue } = this._colorView.option();

if (value !== colorViewValue) {
this._saveValueChangeEvent(e);
Expand All @@ -256,9 +267,10 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
return false;
}

_applyButtonHandler(e): void {
_applyButtonHandler(e: ValueChangedEvent): void {
this._saveValueChangeEvent(e.event);
this._applyNewColor(this._colorView.option('value'));
const { value } = this._colorView.option();
this._applyNewColor(value);

super._applyButtonHandler();
}
Expand All @@ -269,7 +281,8 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
super._cancelButtonHandler();
}

_getKeyboardListeners() {
// needed to be typed in widget.ts
_getKeyboardListeners(): any[] {
return super._getKeyboardListeners().concat([this._colorView]);
}

Expand Down Expand Up @@ -328,7 +341,7 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
this._updateNoColorIndicator();
}

_renderValue() {
_renderValue(): DeferredObj<unknown> {
const { value, editAlphaChannel } = this.option();
const shouldConvertToColor = value && editAlphaChannel;
const text = shouldConvertToColor ? colorUtils.makeRgba(value) : value;
Expand All @@ -340,13 +353,12 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {

_resetInputValue(): void {
const $input = this._input();
const value = this.option('value');
// @ts-expect-error ts-error
$input.val(value);
const { value } = this.option();
$input.val(value === null ? undefined : value);
this._updateColorViewValue(value);
}

_updateColorViewValue(value): void {
_updateColorViewValue(value: string | null | undefined): void {
if (this._colorView) {
this._colorView.option({
value,
Expand All @@ -355,7 +367,7 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
}
}

_valueChangeEventHandler(e): void {
_valueChangeEventHandler(e: ValueChangedEvent): void {
let value = this._input().val();

if (value) {
Expand All @@ -366,13 +378,13 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
super._valueChangeEventHandler(e, value);
}

_applyColorFromInput(value) {
const { editAlphaChannel } = this.option();
_applyColorFromInput(value: string): string {
const { editAlphaChannel, value: optionValue } = this.option();
const newColor = new Color(value);

if (newColor.colorIsInvalid) {
this._resetInputValue();
return this.option('value');
return optionValue ?? '';
}

if (editAlphaChannel) {
Expand Down
Loading
Loading