dxSheduler - Add marker color and List to tooltip (#21152)

js/renovation/ui/scheduler/appointment/appointment.tsx

@@ -174,8 +174,10 @@ AppointmentProps,
   }
 
   onItemClick(): void {
+    const viewModel = { ...this.props.viewModel, color: this.color };
+
     const e = {
-      data: [this.props.viewModel],
+      data: [viewModel],
       target: this.ref.current as HTMLDivElement,
       index: this.props.index,
     };

js/renovation/ui/scheduler/appointment/tooltip/__tests__/appointment_list.test.tsx

@@ -1,5 +1,7 @@
+import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { viewFunction } from '../appointment_list';
+import { viewFunction as ViewFunction } from '../appointment_list';
+import { List } from '../../../../list';
 
 describe('Appointment list', () => {
   const defaultViewModel = {
@@ -34,20 +36,20 @@ describe('Appointment list', () => {
 
   describe('Render', () => {
     const render = (viewModel = {} as any): ShallowWrapper => shallow(
-      viewFunction({
-        ...viewModel,
-        props: {
+      <ViewFunction
+        {...viewModel}
+        props={{
           appointments: [defaultViewModel],
           ...viewModel.props,
-        },
-      }),
+        }}
+      />,
     );
 
-    it('it should have correct render', () => {
+    it('should have correct render', () => {
       const list = render();
 
-      expect(list.is('div'))
-        .toBe(true);
+      expect(list.type())
+        .toBe(List);
     });
   });
 });

js/renovation/ui/scheduler/appointment/tooltip/__tests__/delete_button.test.tsx

@@ -6,7 +6,7 @@ describe('Delete button', () => {
   describe('Render', () => {
     const render = (): ShallowWrapper => shallow(viewFunction());
 
-    it('it should have correct render', () => {
+    it('should have correct render', () => {
       const buttonContainer = render();
       const button = buttonContainer.childAt(0);
 

js/renovation/ui/scheduler/appointment/tooltip/__tests__/item_layout.test.tsx

@@ -11,13 +11,15 @@ describe('Tooltip item', () => {
       viewFunction({
         ...viewModel,
         props: {
-          appointments: [],
+          item: {
+            color: 'color',
+          },
           ...viewModel.props,
         },
       }),
     );
 
-    it('it should have correct default render', () => {
+    it('should have correct default render', () => {
       const item = render();
       const markerBody = item.childAt(0);
       const tooltipItemContent = item.childAt(1);

js/renovation/ui/scheduler/appointment/tooltip/__tests__/marker.test.tsx

@@ -1,12 +1,15 @@
 import { shallow, ShallowWrapper } from 'enzyme';
-import { viewFunction } from '../marker';
+import { Marker, viewFunction } from '../marker';
 
 describe('Tooltip marker', () => {
-  describe('Render', () => {
-    const render = (): ShallowWrapper => shallow(viewFunction());
+  const render = (viewModel): ShallowWrapper => shallow(viewFunction({
+    ...viewModel,
+    props: { ...viewModel.props },
+  }));
 
-    it('it should have correct render', () => {
-      const marker = render();
+  describe('Render', () => {
+    it('should have correct render', () => {
+      const marker = render({});
       const markerBody = marker.childAt(0);
 
       expect(marker.is('div'))
@@ -21,5 +24,33 @@ describe('Tooltip marker', () => {
       expect(markerBody.hasClass('dx-tooltip-appointment-item-marker-body'))
         .toBe(true);
     });
+
+    it('should set color correctly', () => {
+      const marker = render({
+        style: { background: 'appointmentColor' },
+      });
+
+      const childDiv = marker.find('.dx-tooltip-appointment-item-marker-body');
+      expect(childDiv.prop('style'))
+        .toEqual({
+          background: 'appointmentColor',
+        });
+    });
+  });
+
+  describe('Logic', () => {
+    describe('Getters', () => {
+      describe('style', () => {
+        it('should return correct style', () => {
+          const color = 'color';
+
+          const marker = new Marker({});
+          marker.props.color = color;
+
+          expect(marker.style)
+            .toEqual({ background: 'color' });
+        });
+      });
+    });
   });
 });

js/renovation/ui/scheduler/appointment/tooltip/appointment_list.tsx

@@ -6,17 +6,13 @@ import {
 } from '@devextreme-generator/declarations';
 import { TooltipItemLayout } from './item_layout';
 import { AppointmentViewModel } from '../types';
+import { List } from '../../../list';
 
 export const viewFunction = (viewModel: AppointmentList): JSX.Element => (
-  <div>
-    {viewModel.props.appointments.map((item, index) => (
-      <TooltipItemLayout
-        item={item}
-        index={index}
-        key={item.key}
-      />
-    ))}
-  </div>
+  <List
+    itemTemplate={TooltipItemLayout}
+    dataSource={viewModel.props.appointments}
+  />
 );
 
 @ComponentBindings()

js/renovation/ui/scheduler/appointment/tooltip/item_layout.tsx

@@ -6,18 +6,24 @@ import { TooltipItemContent } from './item_content';
 import { AppointmentViewModel } from '../types';
 import { DeleteButton } from './delete_button';
 
-export const viewFunction = (viewModel: TooltipItemLayout): JSX.Element => (
-  <div
-    className="dx-tooltip-appointment-item"
-  >
-    <Marker />
-    <TooltipItemContent
-      text={viewModel.text}
-      formattedDate={viewModel.dateText}
-    />
-    <DeleteButton />
-  </div>
-);
+export const viewFunction = (viewModel: TooltipItemLayout): JSX.Element => {
+  const { color } = viewModel.props.item;
+
+  return (
+    <div
+      className="dx-tooltip-appointment-item"
+    >
+      <Marker
+        color={color}
+      />
+      <TooltipItemContent
+        text={viewModel.text}
+        formattedDate={viewModel.dateText}
+      />
+      <DeleteButton />
+    </div>
+  );
+};
 
 @ComponentBindings()
 export class TooltipItemLayoutProps {

js/renovation/ui/scheduler/appointment/tooltip/marker.tsx

@@ -1,13 +1,14 @@
 import {
-  Component, ComponentBindings, JSXComponent, OneWay,
+  Component, ComponentBindings, CSSAttributes, JSXComponent, OneWay,
 } from '@devextreme-generator/declarations';
 
-export const viewFunction = (): JSX.Element => (
+export const viewFunction = (viewModel: Marker): JSX.Element => (
   <div
     className="dx-tooltip-appointment-item-marker"
   >
     <div
       className="dx-tooltip-appointment-item-marker-body"
+      style={viewModel.style}
     />
   </div>
 );
@@ -22,4 +23,7 @@ export class MarkerProps {
   view: viewFunction,
 })
 export class Marker extends JSXComponent(MarkerProps) {
+  get style(): CSSAttributes {
+    return { background: this.props.color };
+  }
 }

js/renovation/ui/scheduler/appointment/types.ts

@@ -40,6 +40,7 @@ export interface AppointmentViewModel {
   appointment: AppointmentData;
   geometry: AppointmentGeometry;
   info: AppointmentInfo;
+  color?: string;
 }
 
 export interface OverflowIndicatorViewModel {