Skip to content

Commit 7057911

Browse files
ghiscodingghiscoding
authored
fix: LongText Editors should always show and also show gray w/disabled (#2141)
* fix: LongText Editors should always show and also show gray w/disabled
1 parent 9f898e8 commit 7057911

File tree

5 files changed

+33
-16
lines changed

5 files changed

+33
-16
lines changed

‎demos/vanilla/src/examples/example12.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ function checkItemIsEditable(dataContext, columnDef, grid) {
6767
// case 'completed':
6868
// case 'duration':
6969
// case 'title':
70+
// isEditable = !!dataContext?.completed;
7071
// case 'product':
7172
// case 'origin':
7273
// isEditable = dataContext.percentComplete < 50;
@@ -170,7 +171,7 @@ export default class Example12 {
170171
filter: { model: Filters.compoundInputText },
171172
editor: {
172173
model: Editors.longText,
173-
massUpdate: false,
174+
massUpdate: true,
174175
required: true,
175176
alwaysSaveOnEnterKey: true,
176177
maxLength: 12,

‎packages/common/src/editors/__tests__/longTextEditor.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -892,6 +892,17 @@ describe('LongTextEditor', () => {
892892
vi.clearAllMocks();
893893
});
894894

895+
it('should show the DOM element div wrapper in Composite Modal when the "show" method is called', () => {
896+
editor = new LongTextEditor(editorArguments);
897+
const wrapperElm = document.body.querySelector('.slick-large-editor-text.editor-title') as HTMLDivElement;
898+
899+
editor.hide();
900+
expect(wrapperElm.style.display).toBe('none');
901+
902+
editor.show();
903+
expect(wrapperElm.style.display).toBe('block');
904+
});
905+
895906
it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
896907
const activeCellMock = { row: 0, cell: 0 };
897908
vi.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);

‎packages/common/src/editors/longTextEditor.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -189,10 +189,9 @@ export class LongTextEditor implements Editor {
189189
}
190190

191191
show(): void {
192+
this._wrapperElm.style.display = 'block';
192193
const isCompositeEditor = !!this.args?.compositeEditorOptions;
193-
if (!isCompositeEditor) {
194-
this._wrapperElm.style.display = 'block';
195-
} else {
194+
if (isCompositeEditor) {
196195
// when it's a Composite Editor, we'll check if the Editor is editable (by checking onBeforeEditCell) and if not Editable we'll disable the Editor
197196
this.applyInputUsabilityState();
198197
}

‎packages/common/src/styles/_variables.scss‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -485,18 +485,6 @@ $slick-date-editor-input-padding: 0 0 0 2px !default;
485485
$slick-date-editor-focus-border-color: $slick-input-focus-border-color !default;
486486
$slick-date-editor-focus-box-shadow: $slick-input-focus-box-shadow !default;
487487
$slick-date-editor-height: $slick-editor-input-height !default;
488-
$slick-large-editor-background-color: #ffffff !default;
489-
$slick-large-editor-border: 2px solid #a0a0a0 !default;
490-
$slick-large-editor-text-padding: 5px !default;
491-
$slick-large-editor-border-radius: 6px !default;
492-
$slick-large-editor-button-border-radius: 4px !default;
493-
$slick-large-editor-button-text-align: right !default;
494-
$slick-large-editor-footer-spacing: 2px !default;
495-
$slick-large-editor-count-font-size: 11px !default;
496-
$slick-large-editor-count-margin-top: 8px !default;
497-
$slick-large-editor-count-separator-margin: 0 1px !default;
498-
$slick-large-editor-count-color: #313131 !default;
499-
$slick-large-editor-text-color: #333 !default;
500488
$slick-text-editor-border: 1px solid #e2e2e2 !default;
501489
$slick-text-editor-border-radius: $slick-editor-input-border-radius !default;
502490
$slick-text-editor-background: #ffffff !default;
@@ -513,6 +501,19 @@ $slick-text-editor-padding-top: 0 !default;
513501
$slick-text-editor-focus-border-color: $slick-input-focus-border-color !default;
514502
$slick-text-editor-focus-box-shadow: $slick-input-focus-box-shadow !default;
515503
$slick-text-editor-readonly-color: #f0f0f0 !default;
504+
$slick-large-editor-background-color: #ffffff !default;
505+
$slick-large-editor-border: 2px solid #a0a0a0 !default;
506+
$slick-large-editor-disabled: $slick-editor-input-disabled-color !default;
507+
$slick-large-editor-text-padding: 5px !default;
508+
$slick-large-editor-border-radius: 6px !default;
509+
$slick-large-editor-button-border-radius: 4px !default;
510+
$slick-large-editor-button-text-align: right !default;
511+
$slick-large-editor-footer-spacing: 2px !default;
512+
$slick-large-editor-count-font-size: 11px !default;
513+
$slick-large-editor-count-margin-top: 8px !default;
514+
$slick-large-editor-count-separator-margin: 0 1px !default;
515+
$slick-large-editor-count-color: #313131 !default;
516+
$slick-large-editor-text-color: #333 !default;
516517
$slick-slider-editor-border: 1px solid #{$slick-form-control-border-color} !default;
517518
$slick-slider-editor-height: 100% !default;
518519
$slick-slider-editor-runnable-track-padding: 0 6px !default;
@@ -1128,6 +1129,7 @@ $slick-dark-text-color: #d4d4d4 !default;
11281129
--slick-editor-modal-text-color: var(--slick-base-dark-text-color);
11291130
--slick-large-editor-background-color: var(--slick-base-dark-menu-bg-color);
11301131
--slick-large-editor-border: 2px solid #565656;
1132+
--slick-large-editor-disabled: #404040;
11311133
--slick-large-editor-text-color: var(--slick-base-dark-text-color);
11321134
--slick-slider-editor-border: 1px solid #565656;
11331135
--slick-text-editor-border: 1px solid #565656;

‎packages/common/src/styles/slick-editors.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,10 @@
148148
margin: var(--slick-large-editor-count-separator-margin, v.$slick-large-editor-count-separator-margin);
149149
}
150150
}
151+
&.disabled,
152+
&.disabled textarea {
153+
background-color: var(--slick-large-editor-disabled, v.$slick-large-editor-disabled);
154+
}
151155
}
152156

153157
/* Slick Composite Editor Modal */

0 commit comments

Comments
 (0)