diff --git a/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts b/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts index 84fbc4e594cf..dbb818bafa44 100644 --- a/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts +++ b/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts @@ -2,9 +2,11 @@ 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 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'; @@ -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 { +| 'onCopy' | 'onCut' +| 'onEnterKey' | 'onFocusIn' +| 'onFocusOut' | 'onInput' +| 'onKeyDown' | 'onKeyUp' | 'onPaste' +| 'onValueChanged' | 'validationMessagePosition' +| 'onContentReady' | 'onDisposing' +| 'onOptionChanged' | 'onInitialized'> { + buttonsLocation?: string; } class ColorBox extends DropDownEditor { @@ -55,17 +64,19 @@ class ColorBox extends DropDownEditor { _$colorBoxInputContainer!: dxElementWrapper; _supportedKeys(): Record 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; } @@ -76,12 +87,13 @@ class ColorBox extends DropDownEditor { 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; } @@ -104,7 +116,6 @@ class ColorBox extends DropDownEditor { editAlphaChannel: false, applyValueMode: 'useButtons', keyStep: 1, - // @ts-expect-error ts-error fieldTemplate: null, buttonsLocation: 'bottom after', }; @@ -112,10 +123,10 @@ class ColorBox extends DropDownEditor { _popupHidingHandler(): void { super._popupHidingHandler(); - const { applyValueMode } = this.option(); + const { applyValueMode, value } = this.option(); if (applyValueMode === 'useButtons') { - this._updateColorViewValue(this.option('value')); + this._updateColorViewValue(value); } } @@ -164,8 +175,8 @@ class ColorBox extends DropDownEditor { 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(); @@ -184,8 +195,6 @@ class ColorBox extends DropDownEditor { stylingMode, } = this.option(); - const that = this; - return { value, matchValue: value, @@ -194,36 +203,37 @@ class ColorBox extends DropDownEditor { 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: ({ event }: ValueChangedEvent): void => { + const { value: optionValue } = this.option(); + this._colorViewEnterKeyPressed = true; + if (this._colorView.option('value') !== optionValue) { + this._saveValueChangeEvent(event as ValueChangedEvent | undefined); + 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 instantlyMode = currentValueMode === 'instantly'; + const isOldValue = colorUtils.makeRgba(changedValue) === previousValue; + const changesApplied = instantlyMode || this._colorViewEnterKeyPressed; + const valueCleared = this._shouldSaveEmptyValue; if (isOldValue || !changesApplied || valueCleared) { return; } if (event) { - // @ts-expect-error ts-error - that._saveValueChangeEvent(event); + this._saveValueChangeEvent(event as unknown as ValueChangedEvent); } - 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; @@ -234,31 +244,32 @@ class ColorBox extends DropDownEditor { 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); + // TODO: _saveValueChangeEvent should accept DxEvent, not ValueChangedEvent + this._saveValueChangeEvent(e as unknown as ValueChangedEvent); + 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); + this._saveValueChangeEvent(e as unknown as ValueChangedEvent); this.option('value', colorViewValue); } } this.close(); return false; - } + }; _applyButtonHandler(e): void { this._saveValueChangeEvent(e.event); - this._applyNewColor(this._colorView.option('value')); + const { value } = this._colorView.option(); + this._applyNewColor(value); super._applyButtonHandler(); } @@ -269,7 +280,7 @@ class ColorBox extends DropDownEditor { super._cancelButtonHandler(); } - _getKeyboardListeners() { + _getKeyboardListeners():any[] { return super._getKeyboardListeners().concat([this._colorView]); } @@ -328,7 +339,7 @@ class ColorBox extends DropDownEditor { this._updateNoColorIndicator(); } - _renderValue() { + _renderValue(): DeferredObj { const { value, editAlphaChannel } = this.option(); const shouldConvertToColor = value && editAlphaChannel; const text = shouldConvertToColor ? colorUtils.makeRgba(value) : value; @@ -340,9 +351,8 @@ class ColorBox extends DropDownEditor { _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); } @@ -366,13 +376,13 @@ class ColorBox extends DropDownEditor { 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 as string; } if (editAlphaChannel) { diff --git a/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts b/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts index 85529011b12d..7da32303011b 100644 --- a/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts +++ b/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts @@ -138,22 +138,20 @@ class ColorView extends Editor { _onEnterKeyPressedAction?: (event: Record) => void; _supportedKeys(): SupportedKeys { - const isRTL = this.option('rtlEnabled'); + const { rtlEnabled: isRTL } = this.option(); - const that = this; - const getHorizontalPaletteStep = function (e) { - let step = 100 / that._paletteWidth; + const getHorizontalPaletteStep = (e) => { + let step = 100 / this._paletteWidth; if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 1 ? step : 1; return Math.round(step); }; - const updateHorizontalPaletteValue = function (step) { - let value = that._currentColor.hsv.s + step; + const updateHorizontalPaletteValue = (step) => { + let value = this._currentColor.hsv.s + step; if (value > 100) { value = 100; @@ -161,22 +159,21 @@ class ColorView extends Editor { value = 0; } - that._currentColor.hsv.s = value; + this._currentColor.hsv.s = value; updatePaletteValue(); }; - const getVerticalPaletteStep = function (e) { - let step = 100 / that._paletteHeight; + const getVerticalPaletteStep = (e) => { + let step = 100 / this._paletteHeight; if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 1 ? step : 1; return Math.round(step); }; - const updateVerticalPaletteValue = function (step) { - let value = that._currentColor.hsv.v + step; + const updateVerticalPaletteValue = (step) => { + let value = this._currentColor.hsv.v + step; if (value > 100) { value = 100; @@ -184,51 +181,51 @@ class ColorView extends Editor { value = 0; } - that._currentColor.hsv.v = value; + this._currentColor.hsv.v = value; updatePaletteValue(); }; - function updatePaletteValue(): void { - that._placePaletteHandle(); - that._updateColorFromHsv( - that._currentColor.hsv.h, - that._currentColor.hsv.s, - that._currentColor.hsv.v, + const updatePaletteValue = (): void => { + this._placePaletteHandle(); + this._updateColorFromHsv( + this._currentColor.hsv.h, + this._currentColor.hsv.s, + this._currentColor.hsv.v, ); - } - const getHueScaleStep = function (e) { - let step = 360 / (that._hueScaleWrapperHeight - that._hueScaleHandleHeight); + }; + const getHueScaleStep = (e): number => { + let step = 360 / (this._hueScaleWrapperHeight - this._hueScaleHandleHeight); if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 1 ? step : 1; return step; }; - const updateHueScaleValue = function (step) { - that._currentColor.hsv.h += step; - that._placeHueScaleHandle(); - const handleLocation = locate(that._$hueScaleHandle); - that._updateColorHue(handleLocation.top + that._hueScaleHandleHeight / 2); + const updateHueScaleValue = (step) => { + this._currentColor.hsv.h += step; + this._placeHueScaleHandle(); + const handleLocation = locate(this._$hueScaleHandle); + this._updateColorHue(handleLocation.top + this._hueScaleHandleHeight / 2); }; - const getAlphaScaleStep = function (e) { - let step = 1 / that._alphaChannelScaleWorkWidth; + const getAlphaScaleStep = (e) => { + let step = 1 / this._alphaChannelScaleWorkWidth; if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 0.01 ? step : 0.01; step = isRTL ? -step : step; return step; }; - const updateAlphaScaleValue = function (step) { - that._currentColor.a += step; - that._placeAlphaChannelHandle(); - const handleLocation = locate(that._$alphaChannelHandle); - that._calculateColorTransparencyByScaleWidth(handleLocation.left + that._alphaChannelHandleWidth / 2); + const updateAlphaScaleValue = (step) => { + this._currentColor.a += step; + this._placeAlphaChannelHandle(); + const handleLocation = locate(this._$alphaChannelHandle); + this._calculateColorTransparencyByScaleWidth( + handleLocation.left + this._alphaChannelHandleWidth / 2, + ); }; return { @@ -266,8 +263,9 @@ class ColorView extends Editor { rightArrow(e): void { e.preventDefault(); e.stopPropagation(); + const { editAlphaChannel } = this.option(); if (isCommandKeyPressed(e)) { - if (isRTL ? this._currentColor.a < 1 : this._currentColor.a > 0 && this.option('editAlphaChannel')) { + if (isRTL ? this._currentColor.a < 1 : this._currentColor.a > 0 && editAlphaChannel) { this._saveValueChangeEvent(e); updateAlphaScaleValue(-getAlphaScaleStep(e)); } @@ -279,8 +277,9 @@ class ColorView extends Editor { leftArrow(e): void { e.preventDefault(); e.stopPropagation(); + const { editAlphaChannel } = this.option(); if (isCommandKeyPressed(e)) { - if (isRTL ? this._currentColor.a > 0 : this._currentColor.a < 1 && this.option('editAlphaChannel')) { + if (isRTL ? this._currentColor.a > 0 : this._currentColor.a < 1 && editAlphaChannel) { this._saveValueChangeEvent(e); updateAlphaScaleValue(getAlphaScaleStep(e)); } @@ -289,7 +288,7 @@ class ColorView extends Editor { updateHorizontalPaletteValue(-getHorizontalPaletteStep(e)); } }, - enter(e): void { + enter: (e): void => { this._fireEnterKeyPressed(e); }, }; @@ -330,15 +329,16 @@ class ColorView extends Editor { this._onEnterKeyPressedAction = this._createActionByOption('onEnterKeyPressed'); } - _fireEnterKeyPressed(e) { + _fireEnterKeyPressed = (e): void => { if (!this._onEnterKeyPressedAction) return; this._onEnterKeyPressedAction({ event: e, }); - } + }; _initColorAndOpacity(): void { - this._setCurrentColor(this.option('value')); + const { value } = this.option(); + this._setCurrentColor(value); } _setCurrentColor(value): void { @@ -366,7 +366,7 @@ class ColorView extends Editor { if (!newColor.colorIsInvalid) { const { matchValue } = this.option(); - const isBaseColorChanged = this._makeRgba(matchValue !== this._makeRgba(newColor)); + const isBaseColorChanged = matchValue !== this._makeRgba(newColor); if (isBaseColorChanged) { if (this._$baseColor) { this._makeTransparentBackground(this._$baseColor, newColor); @@ -415,11 +415,11 @@ class ColorView extends Editor { this._renderHtmlRows(); } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - _renderHtmlRows(updatedOption?): void { + _renderHtmlRows(): void { + const { editAlphaChannel } = this.option(); const $renderedRows = this._$colorPickerContainer.find(`.${COLOR_VIEW_ROW_CLASS}`); const renderedRowsCount = $renderedRows.length; - const rowCount = this.option('editAlphaChannel') ? 2 : 1; + const rowCount = editAlphaChannel ? 2 : 1; let delta = renderedRowsCount - rowCount; if (delta > 0) { @@ -427,10 +427,9 @@ class ColorView extends Editor { } if (delta < 0) { delta = Math.abs(delta); - const rows = []; + const rows: dxElementWrapper[] = []; let i; for (i = 0; i < delta; i++) { - // @ts-expect-error rows.push($('
').addClass(COLOR_VIEW_ROW_CLASS)); } @@ -439,7 +438,6 @@ class ColorView extends Editor { $renderedRows.eq(0).after(rows[i]); } } else { - // @ts-expect-error ts-error this._$colorPickerContainer.append(rows); } } @@ -466,11 +464,11 @@ class ColorView extends Editor { this._paletteWidth = getWidth(this._$palette); this._renderPaletteHandle(); - // @ts-expect-error ts-error this._$palette.append([$paletteGradientWhite, $paletteGradientBlack]); } _renderPaletteHandle(): void { + const { target } = this.option(); this._$paletteHandle = $('
') .addClass(COLOR_VIEW_PALETTE_HANDLE_CLASS) .appendTo(this._$palette); @@ -482,15 +480,13 @@ class ColorView extends Editor { }; this.setAria(handleAria, this._$paletteHandle); - this.setAria('activedescendant', ariaId, this.option('target')); + this.setAria('activedescendant', ariaId, target); this._createComponent(this._$paletteHandle, Draggable, { contentTemplate: null, boundary: this._$palette, allowMoveByClick: true, - boundOffset: function () { - return -this._paletteHandleHeight / 2; - }.bind(this), + boundOffset: () => -this._paletteHandleHeight / 2, onDragMove: ({ event }) => { const paletteHandlePosition = locate(this._$paletteHandle); this._updateByDrag = true; @@ -511,8 +507,14 @@ class ColorView extends Editor { _placePaletteHandle(): void { move(this._$paletteHandle, { - left: Math.round(this._paletteWidth * this._currentColor.hsv.s / 100 - this._paletteHandleWidth / 2), - top: Math.round(this._paletteHeight - (this._paletteHeight * this._currentColor.hsv.v / 100) - this._paletteHandleHeight / 2), + left: Math.round( + (this._paletteWidth * this._currentColor.hsv.s) / 100 - this._paletteHandleWidth / 2, + ), + top: Math.round( + this._paletteHeight + - ((this._paletteHeight * this._currentColor.hsv.v) / 100) + - this._paletteHandleHeight / 2, + ), }); } @@ -535,7 +537,11 @@ class ColorView extends Editor { } _renderHueScale(): void { - const $hueScaleCell = this._renderHtmlCellInsideRow(0, this._$colorPickerContainer, COLOR_VIEW_HUE_SCALE_CELL_CLASS); + const $hueScaleCell = this._renderHtmlCellInsideRow( + 0, + this._$colorPickerContainer, + COLOR_VIEW_HUE_SCALE_CELL_CLASS, + ); this._$hueScaleWrapper = $('
') .addClass(COLOR_VIEW_HUE_SCALE_WRAPPER_CLASS) @@ -552,21 +558,22 @@ class ColorView extends Editor { } _renderHueScaleHandle(): void { - this._$hueScaleHandle = $('
') - .addClass(COLOR_VIEW_HUE_SCALE_HANDLE_CLASS) - // @ts-expect-error ts-error - .appendTo(this._$hueScaleWrapper); - this._createComponent(this._$hueScaleHandle, Draggable, { - contentTemplate: null, - boundary: this._$hueScaleWrapper, - allowMoveByClick: true, - dragDirection: 'vertical', - onDragMove: ({ event }) => { - this._updateByDrag = true; - this._saveValueChangeEvent(event); - this._updateColorHue(locate(this._$hueScaleHandle).top + this._hueScaleHandleHeight / 2); - }, - }); + if (this._$hueScaleWrapper !== undefined) { + this._$hueScaleHandle = $('
') + .addClass(COLOR_VIEW_HUE_SCALE_HANDLE_CLASS) + .appendTo(this._$hueScaleWrapper); + this._createComponent(this._$hueScaleHandle, Draggable, { + contentTemplate: null, + boundary: this._$hueScaleWrapper, + allowMoveByClick: true, + dragDirection: 'vertical', + onDragMove: ({ event }) => { + this._updateByDrag = true; + this._saveValueChangeEvent(event); + this._updateColorHue(locate(this._$hueScaleHandle).top + this._hueScaleHandleHeight / 2); + }, + }); + } this._hueScaleHandleHeight = getHeight(this._$hueScaleHandle); @@ -588,8 +595,11 @@ class ColorView extends Editor { move(this._$hueScaleHandle, { top: Math.round(top) }); } - _updateColorHue(handlePosition): void { - let hue = 360 - Math.round((handlePosition - this._hueScaleHandleHeight / 2) * 360 / (this._hueScaleWrapperHeight - this._hueScaleHandleHeight)); + _updateColorHue(handlePosition: number): void { + let hue = 360 - Math.round( + ((handlePosition - this._hueScaleHandleHeight / 2) * 360) + / (this._hueScaleWrapperHeight - this._hueScaleHandleHeight), + ); const saturation = this._currentColor.hsv.s; const value = this._currentColor.hsv.v; @@ -620,6 +630,7 @@ class ColorView extends Editor { } _renderColorsPreview(): void { + const { matchValue } = this.option(); const $colorsPreviewContainer = $('
') .addClass(COLOR_VIEW_COLOR_PREVIEW_CONTAINER_CLASS) .appendTo(this._$controlsContainer); @@ -631,15 +642,15 @@ class ColorView extends Editor { this._$currentColor = $('
').addClass([COLOR_VIEW_COLOR_PREVIEW, COLOR_VIEW_COLOR_PREVIEW_COLOR_NEW].join(' ')); this._$baseColor = $('
').addClass([COLOR_VIEW_COLOR_PREVIEW, COLOR_VIEW_COLOR_PREVIEW_COLOR_CURRENT].join(' ')); - this._makeTransparentBackground(this._$baseColor, this.option('matchValue')); + this._makeTransparentBackground(this._$baseColor, matchValue); this._makeTransparentBackground(this._$currentColor, this._currentColor); - // @ts-expect-error $colorsPreviewContainerInner.append([this._$baseColor, this._$currentColor]); } _renderAlphaChannelElements() { - if (this.option('editAlphaChannel')) { + const { editAlphaChannel } = this.option(); + if (editAlphaChannel) { this._$colorPickerContainer .find(`.${COLOR_VIEW_ROW_CLASS}`) .eq(1) @@ -678,16 +689,12 @@ class ColorView extends Editor { }), ]; - // @ts-expect-error ts-error this._$controlsContainer.append(this._rgbInputsWithLabels); this._rgbInputs = [ - // @ts-expect-error ts-error - this._rgbInputsWithLabels[0].find('.dx-numberbox').dxNumberBox('instance'), - // @ts-expect-error ts-error - this._rgbInputsWithLabels[1].find('.dx-numberbox').dxNumberBox('instance'), - // @ts-expect-error ts-error - this._rgbInputsWithLabels[2].find('.dx-numberbox').dxNumberBox('instance'), + NumberBox.getInstance(this._rgbInputsWithLabels[0].find('.dx-numberbox')), + NumberBox.getInstance(this._rgbInputsWithLabels[1].find('.dx-numberbox')), + NumberBox.getInstance(this._rgbInputsWithLabels[2].find('.dx-numberbox')), ]; } @@ -703,24 +710,24 @@ class ColorView extends Editor { e.preventDefault(); }); - const { editorType } = options; + const { editorType: EditorConstructor } = options; + const { stylingMode } = this.option(); const editorOptions = extend({ value: options.value, onValueChanged: options.onValueChanged, onKeyboardHandled: (opts) => this._keyboardHandler(opts), }, { - stylingMode: this.option('stylingMode'), + stylingMode, }); - if (editorType === NumberBox) { + if (EditorConstructor === NumberBox) { editorOptions.min = options.min || 0; editorOptions.max = options.max || 255; editorOptions.step = options.step || 1; } - // eslint-disable-next-line new-cap - const editor = new editorType($editor, editorOptions); + const editor = new EditorConstructor($editor, editorOptions); editor.registerKeyHandler('enter', (e) => { this._fireEnterKeyPressed(e); @@ -760,7 +767,11 @@ class ColorView extends Editor { } _renderAlphaChannelScale(): void { - const $alphaChannelScaleCell = this._renderHtmlCellInsideRow(1, this._$colorPickerContainer, COLOR_VIEW_ALPHA_CHANNEL_CELL_CLASS); + const $alphaChannelScaleCell = this._renderHtmlCellInsideRow( + 1, + this._$colorPickerContainer, + COLOR_VIEW_ALPHA_CHANNEL_CELL_CLASS, + ); const $alphaChannelBorder = $('
') .addClass(COLOR_VIEW_ALPHA_CHANNEL_BORDER_CLASS) .appendTo($alphaChannelScaleCell); @@ -777,9 +788,9 @@ class ColorView extends Editor { } _makeCSSLinearGradient($el): void { + const { rtlEnabled } = this.option(); const color = this._currentColor; const colorAsRgb = `${color.r},${color.g},${color.b}`; - const rtlEnabled = this.option('rtlEnabled'); const startColor = `rgba(${colorAsRgb}, ${rtlEnabled ? '1' : '0'})`; const finishColor = `rgba(${colorAsRgb}, ${rtlEnabled ? '0' : '1'})`; const backgroundImage = `linear-gradient(-90deg, ${startColor}, ${finishColor})`; @@ -788,32 +799,31 @@ class ColorView extends Editor { } _renderAlphaChannelInput(): void { - const that = this; + // const that = this; const $alphaChannelInputCell = this._renderHtmlCellInsideRow(1, this._$colorPickerContainer); - that._alphaChannelInput = this._renderEditorWithLabel({ + const editorWithLabel = this._renderEditorWithLabel({ editorType: NumberBox, value: this._currentColor.a, max: 1, step: 0.1, - onValueChanged(args) { + onValueChanged: (args) => { let { value } = args; - value = that._currentColor.isValidAlpha(value) ? value : that._currentColor.a; - args.event && that._saveValueChangeEvent(args.event); - that._updateColorTransparency(value); - that._placeAlphaChannelHandle(); + value = this._currentColor.isValidAlpha(value) ? value : this._currentColor.a; + args.event && this._saveValueChangeEvent(args.event); + this._updateColorTransparency(value); + this._placeAlphaChannelHandle(); }, labelClass: COLOR_VIEW_ALPHA_CHANNEL_LABEL_CLASS, labelText: 'Alpha', labelAriaText: messageLocalization.format('dxColorView-ariaAlpha'), }) - .appendTo($alphaChannelInputCell) - .find('.dx-numberbox') - // @ts-expect-error ts-error - .dxNumberBox('instance'); + .appendTo($alphaChannelInputCell); + + this._alphaChannelInput = NumberBox.getInstance(editorWithLabel.find('.dx-numberbox')); } - _updateColorTransparency(transparency): void { + _updateColorTransparency(transparency: number): void { this._currentColor.a = transparency; this.applyColor(); } @@ -844,16 +854,16 @@ class ColorView extends Editor { } _calculateColorTransparencyByScaleWidth(handlePosition) { - let transparency = (handlePosition - this._alphaChannelHandleWidth / 2) / this._alphaChannelScaleWorkWidth; - const rtlEnabled = this.option('rtlEnabled'); + let transparency = (handlePosition - this._alphaChannelHandleWidth / 2) + / this._alphaChannelScaleWorkWidth; + const { rtlEnabled } = this.option(); transparency = rtlEnabled ? transparency : 1 - transparency; if (handlePosition >= (this._alphaChannelScaleWorkWidth + this._alphaChannelHandleWidth / 2)) { transparency = rtlEnabled ? 1 : 0; } else if (transparency < 1) { - // @ts-expect-error ts-error - transparency = transparency.toFixed(2); + transparency = parseFloat(transparency.toFixed(2)); } const previousTransparency = this._alphaChannelInput.option('value'); @@ -869,6 +879,7 @@ class ColorView extends Editor { _placeAlphaChannelHandle(): void { let left = this._alphaChannelScaleWorkWidth * (1 - this._currentColor.a); + const { rtlEnabled } = this.option(); if (left < 0) { left = 0; @@ -878,13 +889,14 @@ class ColorView extends Editor { } move(this._$alphaChannelHandle, { - left: this.option('rtlEnabled') ? this._alphaChannelScaleWorkWidth - left : left, + left: rtlEnabled ? this._alphaChannelScaleWorkWidth - left : left, }); } applyColor(): void { - const previousValue = this.option('value'); - const colorValue = this.option('editAlphaChannel') ? this._makeRgba(this._currentColor) : this._currentColor.toHex(); + const { value: previousValue, editAlphaChannel } = this.option(); + const colorValue = editAlphaChannel + ? this._makeRgba(this._currentColor) : this._currentColor.toHex(); this._makeTransparentBackground(this._$currentColor, this._currentColor); if (colorValue === previousValue) { @@ -929,17 +941,17 @@ class ColorView extends Editor { } _validateRgb(): number[] { - let r = this._rgbInputs[0].option('value'); - let g = this._rgbInputs[1].option('value'); - let b = this._rgbInputs[2].option('value'); + let { value: r } = this._rgbInputs[0].option(); + let { value: g } = this._rgbInputs[1].option(); + let { value: b } = this._rgbInputs[2].option(); if (!this._currentColor.isValidRGB(r, g, b)) { r = this._currentColor.r; g = this._currentColor.g; b = this._currentColor.b; } - // @ts-expect-error ts-error - return [r, g, b]; + + return [r ?? 0, g ?? 0, b ?? 0]; } _refreshMarkup(): void { @@ -954,6 +966,7 @@ class ColorView extends Editor { } _updateColorParamsAndColorPreview(): void { + const { editAlphaChannel } = this.option(); this._suppressEditorsValueUpdating = true; this._hexInput.option('value', this._currentColor.toHex().replace('#', '')); this._rgbInputs[0].option('value', this._currentColor.r); @@ -961,7 +974,7 @@ class ColorView extends Editor { this._rgbInputs[2].option('value', this._currentColor.b); this._suppressEditorsValueUpdating = false; - if (this.option('editAlphaChannel')) { + if (editAlphaChannel && this._$alphaChannelScale) { this._makeCSSLinearGradient.call(this, this._$alphaChannelScale); this._alphaChannelInput.option('value', this._currentColor.a); } @@ -988,7 +1001,7 @@ class ColorView extends Editor { break; case 'editAlphaChannel': if (this._$colorPickerContainer) { - this._renderHtmlRows('editAlphaChannel'); + this._renderHtmlRows(); this._renderAlphaChannelElements(); } break; diff --git a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts index b807587be029..31a054e4a33a 100644 --- a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts +++ b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts @@ -384,7 +384,6 @@ class FileUploader extends Editor { return; } - // @ts-expect-error dxElementWrapper should be extdened const fileName = this._$fileInput.val().replace(/^.*\\/, ''); // @ts-expect-error dxElementWrapper should be extdened const files = this._$fileInput.prop('files'); diff --git a/packages/devextreme/js/__internal/ui/m_select_box.ts b/packages/devextreme/js/__internal/ui/m_select_box.ts index 984c40761828..c876a2d63fb8 100644 --- a/packages/devextreme/js/__internal/ui/m_select_box.ts +++ b/packages/devextreme/js/__internal/ui/m_select_box.ts @@ -561,7 +561,6 @@ class SelectBox< const value = this._displayGetter(initialSelectedItem); const displayValue = value ? String(value) : ''; const inputText = this._searchValue(); - // @ts-expect-error ts-error return displayValue === inputText; } diff --git a/packages/devextreme/js/__internal/ui/m_tag_box.ts b/packages/devextreme/js/__internal/ui/m_tag_box.ts index f3f6526c8c94..89df1d7a2b6b 100644 --- a/packages/devextreme/js/__internal/ui/m_tag_box.ts +++ b/packages/devextreme/js/__internal/ui/m_tag_box.ts @@ -496,7 +496,6 @@ class TagBox< this._getSubmitElement() .empty() - // @ts-expect-error ts-error .append($options); } diff --git a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts index 381113fb4b45..3d0c5e71ea53 100644 --- a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts +++ b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts @@ -494,7 +494,6 @@ class TextEditorBase< this.option({ text: textValue }); - // @ts-expect-error @ts-error const inputElementValue = this._input().val() as string | undefined; // fallback to empty string is required to support WebKit native date picker in some basic @@ -894,8 +893,7 @@ class TextEditorBase< } _toggleEmptinessEventHandler(): void { - // @ts-expect-error dxElementWrapper.val() typification - const text = this._input().val() as string; + const text = this._input().val(); const isEmpty = (text === '' || text === null) && this._isValueValid(); diff --git a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts index 47caada3f653..2fb29f7fe3c6 100644 --- a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts +++ b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts @@ -265,7 +265,6 @@ export default class MaskStrategy { // eslint-disable-next-line no-restricted-globals this._dragTimer = setTimeout(() => { - // @ts-expect-error dxElementWrapper.val() const value = this.editor._convertToValue(this._editorInput().val()); this._editorOption('value', value); @@ -309,7 +308,6 @@ export default class MaskStrategy { if (this._isAutoFill()) { this.editor._maskKeyHandler(event, () => { this.editor._handleChain({ - // @ts-expect-error dxElementWrapper.val() text: inputVal, start: 0, length: inputVal.length, diff --git a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts index f11e696c7008..289bdf641bc1 100644 --- a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts +++ b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts @@ -242,8 +242,7 @@ class TextEditorMask< _changeHandler(e: DxEvent): void { const $input = this._input(); - // @ts-expect-error dxElementWrapper.val() should return string - const inputValue = $input.val() as string; + const inputValue = $input.val(); if (inputValue === this._changedValue) { return; @@ -721,8 +720,7 @@ class TextEditorMask< this._validateMask(); super._optionChanged(args); - // @ts-expect-error dxElementWrapper.val() should return string - this._changedValue = this._input().val() as string; + this._changedValue = this._input().val(); break; case 'maskInvalidMessage': break; diff --git a/packages/devextreme/js/core/renderer.d.ts b/packages/devextreme/js/core/renderer.d.ts index 4e7e938930c1..23e32f048815 100644 --- a/packages/devextreme/js/core/renderer.d.ts +++ b/packages/devextreme/js/core/renderer.d.ts @@ -12,6 +12,7 @@ export interface dxElementWrapper { after(element: Element | dxElementWrapper): this; append(element: Element | dxElementWrapper | string): this; + append(element: Element[] | dxElementWrapper[] | string[]): this; appendTo(element: Element | dxElementWrapper): this; @@ -122,6 +123,7 @@ export interface dxElementWrapper { trim(): this; + val(): string; val(value?: string | string[] | number): this; wrap(wrappingElement: this | Element | string): this; diff --git a/packages/devextreme/js/ui/color_box.d.ts b/packages/devextreme/js/ui/color_box.d.ts index 9f63261053ec..de0d627b5642 100644 --- a/packages/devextreme/js/ui/color_box.d.ts +++ b/packages/devextreme/js/ui/color_box.d.ts @@ -199,7 +199,7 @@ export interface dxColorBoxOptions extends dxDropDownEditorOptions { * @public * @deprecated dxDropDownEditorOptions.fieldAddons */ - fieldTemplate?: template | ((value: string, fieldElement: DxElement) => string | UserDefinedElement); + fieldTemplate?: template | ((value: string, fieldElement: DxElement) => string | UserDefinedElement) | null; /** * @docid * @default 1 diff --git a/packages/devextreme/playground/index.ts b/packages/devextreme/playground/index.ts deleted file mode 100644 index 68ff30f0d976..000000000000 --- a/packages/devextreme/playground/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -import '../js/__internal/integration/jquery'; -import '../js/ui/card_view'; -import $ from 'jquery'; -import { setupThemeSelector } from './themeSelector.ts'; - -const customers = [ - { ID: 1, Company: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797' }, - { ID: 2, Company: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232' }, - { ID: 3, Company: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073' }, - { ID: 4, Company: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292' }, - { ID: 5, Company: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500' }, - { ID: 6, Company: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500' }, - { ID: 7, Company: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741' }, - { ID: 8, Company: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929' }, - { ID: 9, Company: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000' }, - { ID: 10, Company: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800' }, - { ID: 11, Company: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000' }, - { ID: 12, Company: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937' }, -]; - -window.addEventListener('load', () => - setupThemeSelector('theme-selector') - .catch((err) => console.error('Theme loading failed:', err)) - .then(() => { - $('#widget-container').dxCardView({ - dataSource: customers, - keyExpr: 'ID', - cardsPerRow: 'auto', - cardMinWidth: 320, - columns: ['Company', 'Address', 'City', 'State', 'Zipcode', 'Phone'], - }); - })); \ No newline at end of file