Skip to content

Commit 73e220b

Browse files
sjbursjbur
committed
feat: add changes to showicon logic
1 parent 6cc7304 commit 73e220b

2 files changed

Lines changed: 42 additions & 38 deletions

File tree

‎packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -223,11 +223,11 @@ export class AppointmentForm {
223223
const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode);
224224
const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode);
225225

226-
const mainGroup = this.createMainFormGroup(showMainGroupIcons);
226+
const mainGroup = this.createMainFormGroup();
227227

228228
this._recurrenceForm = new RecurrenceForm(this.scheduler);
229229
const recurrenceGroup = this._recurrenceForm
230-
.createRecurrenceFormGroup(showRecurrenceGroupIcons);
230+
.createRecurrenceFormGroup();
231231

232232
const items = [mainGroup, recurrenceGroup];
233233

@@ -325,23 +325,23 @@ export class AppointmentForm {
325325
return this.scheduler.createComponent(element, dxForm, formOptions) as dxForm;
326326
}
327327

328-
private createMainFormGroup(showIcon: boolean): GroupItem {
328+
private createMainFormGroup(): GroupItem {
329329
return {
330330
name: MAIN_GROUP_NAME,
331331
itemType: 'group',
332332
colSpan: 1,
333333
cssClass: CLASSES.mainGroup,
334334
items: [
335-
this.createSubjectGroup(showIcon),
336-
this.createDateRangeGroup(showIcon),
337-
this.createRepeatGroup(showIcon),
338-
this.createResourcesGroup(showIcon),
339-
this.createDescriptionGroup(showIcon),
335+
this.createSubjectGroup(),
336+
this.createDateRangeGroup(),
337+
this.createRepeatGroup(),
338+
this.createResourcesGroup(),
339+
this.createDescriptionGroup(),
340340
],
341341
} as GroupItem;
342342
}
343343

344-
private createSubjectGroup(showIcon: boolean): GroupItem {
344+
private createSubjectGroup(): GroupItem {
345345
const { textExpr } = this.scheduler.getDataAccessors().expr;
346346

347347
return {
@@ -356,11 +356,10 @@ export class AppointmentForm {
356356
colSpan: 1,
357357
cssClass: CLASSES.formIcon,
358358
template: createFormIconTemplate('isnotblank'),
359-
visible: showIcon,
360359
},
361360
{
362361
name: SUBJECT_EDITOR_NAME,
363-
colSpan: showIcon ? 1 : 2,
362+
colSpan: 1,
364363
itemType: 'simple',
365364
cssClass: CLASSES.textEditor,
366365
dataField: textExpr,
@@ -373,7 +372,7 @@ export class AppointmentForm {
373372
} as GroupItem;
374373
}
375374

376-
private createDateRangeGroup(showIcon: boolean): GroupItem {
375+
private createDateRangeGroup(): GroupItem {
377376
return {
378377
name: DATE_GROUP_NAME,
379378
itemType: 'group',
@@ -386,10 +385,9 @@ export class AppointmentForm {
386385
colSpan: 1,
387386
cssClass: CLASSES.formIcon,
388387
template: createFormIconTemplate('clock'),
389-
visible: showIcon,
390388
},
391389
{
392-
colSpan: showIcon ? 1 : 2,
390+
colSpan: 1,
393391
name: DATE_OPTIONS_GROUP_NAME,
394392
itemType: 'group',
395393
items: [
@@ -652,7 +650,7 @@ export class AppointmentForm {
652650
} as GroupItem;
653651
}
654652

655-
private createRepeatGroup(showIcon: boolean): GroupItem {
653+
private createRepeatGroup(): GroupItem {
656654
const { recurrenceRuleExpr } = this.scheduler.getDataAccessors().expr;
657655

658656
return {
@@ -667,11 +665,10 @@ export class AppointmentForm {
667665
colSpan: 1,
668666
cssClass: CLASSES.formIcon,
669667
template: createFormIconTemplate('repeat'),
670-
visible: showIcon,
671668
},
672669
{
673670
name: REPEAT_EDITOR_NAME,
674-
colSpan: showIcon ? 1 : 2,
671+
colSpan: 1,
675672
itemType: 'simple',
676673
cssClass: CLASSES.repeatEditor,
677674
label: {
@@ -707,7 +704,7 @@ export class AppointmentForm {
707704
} as GroupItem;
708705
}
709706

710-
private createDescriptionGroup(showIcon: boolean): GroupItem {
707+
private createDescriptionGroup(): GroupItem {
711708
const { descriptionExpr } = this.scheduler.getDataAccessors().expr;
712709

713710
return {
@@ -722,12 +719,11 @@ export class AppointmentForm {
722719
colSpan: 1,
723720
cssClass: CLASSES.formIcon,
724721
template: createFormIconTemplate('description'),
725-
visible: showIcon,
726722
},
727723
{
728724
name: DESCRIPTION_EDITOR_NAME,
729725
dataField: descriptionExpr,
730-
colSpan: showIcon ? 1 : 2,
726+
colSpan: 1,
731727
itemType: 'simple',
732728
cssClass: CLASSES.descriptionEditor,
733729
label: {
@@ -742,7 +738,7 @@ export class AppointmentForm {
742738
} as GroupItem;
743739
}
744740

745-
private createResourcesGroup(showIcon: boolean): GroupItem {
741+
private createResourcesGroup(): GroupItem {
746742
const resourcesLoaders: ResourceLoader[] = Object.values(this.scheduler.getResourceById());
747743

748744
let resourcesItems: FormItem[] = resourcesLoaders.map((resourceLoader) => {
@@ -783,12 +779,11 @@ export class AppointmentForm {
783779
colSpan: 1,
784780
cssClass: `${CLASSES.formIcon} ${CLASSES.defaultResourceIcon}`,
785781
template: createFormIconTemplate('addcircleoutline'),
786-
visible: showIcon,
787782
},
788783
{
789784
name: RESOURCE_EDITORS_GROUP_NAME,
790785
itemType: 'group',
791-
colSpan: showIcon ? 1 : 2,
786+
colSpan: 1,
792787
items: resourcesItems,
793788
},
794789
],
@@ -811,9 +806,8 @@ export class AppointmentForm {
811806
name: `${dataField}Icon`,
812807
cssClass: CLASSES.formIcon,
813808
template: createFormIconTemplate(icon),
814-
visible: showIcon,
815809
},
816-
{ ...item, colSpan: showIcon ? 1 : 2 },
810+
{ ...item },
817811
],
818812
} as GroupItem;
819813
});
@@ -851,6 +845,19 @@ export class AppointmentForm {
851845

852846
if (item.itemType === 'group') {
853847
const groupItem = item as GroupItem;
848+
849+
if (itemClasses.includes(CLASSES.groupWithIcon)) {
850+
groupItem.items?.forEach((child) => {
851+
const childClasses = (child.cssClass ?? '').split(' ');
852+
853+
if (childClasses.includes(CLASSES.formIcon)) {
854+
(child as SimpleItem).visible = showIcon;
855+
} else {
856+
(child as SimpleItem).colSpan = showIcon ? 1 : 2;
857+
}
858+
});
859+
}
860+
854861
groupItem.items?.forEach((child) => {
855862
this.setStylingModeToEditors(child, showIcon);
856863
});

‎packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -182,21 +182,21 @@ export class RecurrenceForm {
182182
this._readOnly = value;
183183
}
184184

185-
createRecurrenceFormGroup(showIcon: boolean): GroupItem {
185+
createRecurrenceFormGroup(): GroupItem {
186186
return {
187187
name: RECURRENCE_GROUP_NAME,
188188
itemType: 'group',
189189
cssClass: `${CLASSES.recurrenceGroup} ${CLASSES.recurrenceHidden}`,
190190
colSpan: 1,
191191
items: [
192-
this.createRecurrenceStartDateGroup(showIcon),
193-
this.createRecurrenceSettingsGroup(showIcon),
194-
this.createRecurrenceEndGroup(showIcon),
192+
this.createRecurrenceStartDateGroup(),
193+
this.createRecurrenceSettingsGroup(),
194+
this.createRecurrenceEndGroup(),
195195
],
196196
} as GroupItem;
197197
}
198198

199-
private createRecurrenceStartDateGroup(showIcon: boolean): GroupItem {
199+
private createRecurrenceStartDateGroup(): GroupItem {
200200
return {
201201
name: GROUP_NAMES.recurrenceStartDateGroup,
202202
itemType: 'group',
@@ -209,14 +209,13 @@ export class RecurrenceForm {
209209
colSpan: 1,
210210
cssClass: CLASSES.formIcon,
211211
template: createFormIconTemplate('clock'),
212-
visible: showIcon,
213212
},
214213
extend(
215214
true,
216215
getStartDateCommonConfig(this.scheduler.getFirstDayOfWeek()),
217216
{
218217
name: EDITOR_NAMES.recurrenceStartDateEditor,
219-
colSpan: showIcon ? 1 : 2,
218+
colSpan: 1,
220219
cssClass: CLASSES.recurrenceStartDateEditor,
221220
label: {
222221
text: messageLocalization.format('dxScheduler-editorLabelStartDate'),
@@ -235,7 +234,7 @@ export class RecurrenceForm {
235234
} as GroupItem;
236235
}
237236

238-
private createRecurrenceSettingsGroup(showIcon: boolean): GroupItem {
237+
private createRecurrenceSettingsGroup(): GroupItem {
239238
return {
240239
itemType: 'group',
241240
name: GROUP_NAMES.recurrenceRuleGroup,
@@ -248,12 +247,11 @@ export class RecurrenceForm {
248247
colSpan: 1,
249248
cssClass: CLASSES.formIcon,
250249
template: createFormIconTemplate('repeat'),
251-
visible: showIcon,
252250
},
253251
{
254252
itemType: 'group',
255253
name: GROUP_NAMES.recurrencePatternGroup,
256-
colSpan: showIcon ? 1 : 2,
254+
colSpan: 1,
257255
colCount: 1,
258256
colCountByScreen: { xs: 1 },
259257
items: [
@@ -437,7 +435,7 @@ export class RecurrenceForm {
437435
} as GroupItem;
438436
}
439437

440-
private createRecurrenceEndGroup(showIcon: boolean): GroupItem {
438+
private createRecurrenceEndGroup(): GroupItem {
441439
return {
442440
name: GROUP_NAMES.recurrenceEndGroup,
443441
itemType: 'group',
@@ -450,12 +448,11 @@ export class RecurrenceForm {
450448
colSpan: 1,
451449
cssClass: CLASSES.formIcon,
452450
template: createFormIconTemplate('description'),
453-
visible: showIcon,
454451
},
455452
{
456453
itemType: 'group',
457454
name: EDITOR_NAMES.recurrenceEndEditor,
458-
colSpan: showIcon ? 1 : 2,
455+
colSpan: 1,
459456
colCount: 2,
460457
colCountByScreen: { xs: 2 },
461458
label: {

0 commit comments

Comments
 (0)