remove inlines form react scheduler and pivotgrid demos

apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx

@@ -19,6 +19,9 @@ const App = () => {
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef<DataGridRef>(null);
 
+  const onPopupHiding = useCallback(() => setPopupVisible(false), []);
+  const onPopupShown = useCallback(() => dataGridRef.current?.instance().updateDimensions(), []);
+
   const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
     if (e.area === 'data' && e.cell) {
       const pivotGridDataSource = e.component.getDataSource();
@@ -50,8 +53,8 @@ const App = () => {
         width={600}
         height={400}
         title={popupTitle}
-        onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current?.instance().updateDimensions()}
+        onHiding={onPopupHiding}
+        onShown={onPopupShown}
         showCloseButton={true}
       >
         <DataGrid

apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js

@@ -10,6 +10,8 @@ const App = () => {
   const [drillDownDataSource, setDrillDownDataSource] = useState(undefined);
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef(null);
+  const onPopupHiding = useCallback(() => setPopupVisible(false), []);
+  const onPopupShown = useCallback(() => dataGridRef.current?.instance().updateDimensions(), []);
   const onCellClick = useCallback((e) => {
     if (e.area === 'data' && e.cell) {
       const pivotGridDataSource = e.component.getDataSource();
@@ -39,8 +41,8 @@ const App = () => {
         width={600}
         height={400}
         title={popupTitle}
-        onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current?.instance().updateDimensions()}
+        onHiding={onPopupHiding}
+        onShown={onPopupShown}
         showCloseButton={true}
       >
         <DataGrid

apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { Button } from 'devextreme-react/button';
 import type { ApplyChangesMode } from 'devextreme-react/common/grids';
@@ -22,6 +22,9 @@ const App = () => {
   const [layout, setLayout] = useState<FieldChooserLayout>(0);
   const fieldChooserRef = useRef<PivotGridFieldChooserRef>(null);
 
+  const onApplyChanges = useCallback(() => fieldChooserRef.current?.instance().applyChanges(), []);
+  const onCancelChanges = useCallback(() => fieldChooserRef.current?.instance().cancelChanges(), []);
+
   return (
     <>
       <PivotGrid
@@ -56,11 +59,11 @@ const App = () => {
             <Button
               text="Apply"
               type="default"
-              onClick={() => fieldChooserRef.current?.instance().applyChanges()}
+              onClick={onApplyChanges}
             ></Button>
             <Button
               text="Cancel"
-              onClick={() => fieldChooserRef.current?.instance().cancelChanges()}
+              onClick={onCancelChanges}
             ></Button>
           </div>
         }

apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Button } from 'devextreme-react/button';
 import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
 import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
@@ -14,6 +14,11 @@ const App = () => {
   const [applyChangesMode, setApplyChangesMode] = useState('instantly');
   const [layout, setLayout] = useState(0);
   const fieldChooserRef = useRef(null);
+  const onApplyChanges = useCallback(() => fieldChooserRef.current?.instance().applyChanges(), []);
+  const onCancelChanges = useCallback(
+    () => fieldChooserRef.current?.instance().cancelChanges(),
+    [],
+  );
   return (
     <>
       <PivotGrid
@@ -48,11 +53,11 @@ const App = () => {
             <Button
               text="Apply"
               type="default"
-              onClick={() => fieldChooserRef.current?.instance().applyChanges()}
+              onClick={onApplyChanges}
             ></Button>
             <Button
               text="Cancel"
-              onClick={() => fieldChooserRef.current?.instance().cancelChanges()}
+              onClick={onCancelChanges}
             ></Button>
           </div>
         )}

apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 type ItemTemplateProps = {
   data: {
@@ -7,11 +7,15 @@ type ItemTemplateProps = {
   }
 };
 
-const ItemTemplate = (props: ItemTemplateProps) => (
-  <div>
-    {props.data.color && <div className="item-badge" style={{ backgroundColor: props.data.color }} />}
-    {props.data.text}
-  </div>
-);
+const ItemTemplate = (props: ItemTemplateProps) => {
+  const badgeStyle = useMemo(() => ({ backgroundColor: props.data.color }), [props.data.color]);
+
+  return (
+    <div>
+      {props.data.color && <div className="item-badge" style={badgeStyle} />}
+      {props.data.text}
+    </div>
+  );
+};
 
 export default ItemTemplate;

apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-const ItemTemplate = (props) => (
-  <div>
-    {props.data.color && (
-      <div
-        className="item-badge"
-        style={{ backgroundColor: props.data.color }}
-      />
-    )}
-    {props.data.text}
-  </div>
-);
+const ItemTemplate = (props) => {
+  const badgeStyle = useMemo(() => ({ backgroundColor: props.data.color }), [props.data.color]);
+  return (
+    <div>
+      {props.data.color && (
+        <div
+          className="item-badge"
+          style={badgeStyle}
+        />
+      )}
+      {props.data.text}
+    </div>
+  );
+};
 export default ItemTemplate;

apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx

@@ -16,6 +16,20 @@ const defaultVisible: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 4, 6];
 const views: SchedulerTypes.Properties['views'] = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
 const currentDate = new Date(2021, 3, 26);
 const VALIDATION_MESSAGE = 'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
+const DayCheckBox = ({
+  dayIndex, label, value, onDayToggle,
+}: {
+  dayIndex: SchedulerTypes.DayOfWeek;
+  label: string;
+  value: boolean;
+  onDayToggle: (dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => void;
+}) => {
+  const onValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
+    onDayToggle(dayIndex, e);
+  }, [dayIndex, onDayToggle]);
+
+  return <CheckBox text={label} value={value} onValueChanged={onValueChanged} />;
+};
 
 const App = () => {
   const [visibleDays, setVisibleDays] = useState<SchedulerTypes.DayOfWeek[]>(defaultVisible);
@@ -51,10 +65,11 @@ const App = () => {
         <div className="caption">Visible Week Days</div>
         {dayLabels.map((label, idx) => (
           <div className="option" key={label}>
-            <CheckBox
-              text={label}
+            <DayCheckBox
+              dayIndex={idx as SchedulerTypes.DayOfWeek}
+              label={label}
               value={visibleDays.includes(idx as SchedulerTypes.DayOfWeek)}
-              onValueChanged={(e) => onDayToggle(idx as SchedulerTypes.DayOfWeek, e)}
+              onDayToggle={onDayToggle}
             />
           </div>
         ))}

apps/demos/Demos/Scheduler/HiddenDays/ReactJs/App.js

@@ -15,6 +15,23 @@ const views = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
 const currentDate = new Date(2021, 3, 26);
 const VALIDATION_MESSAGE =
   'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
+const DayCheckBox = ({
+  dayIndex, label, value, onDayToggle,
+}) => {
+  const onValueChanged = useCallback(
+    (e) => {
+      onDayToggle(dayIndex, e);
+    },
+    [dayIndex, onDayToggle],
+  );
+  return (
+    <CheckBox
+      text={label}
+      value={value}
+      onValueChanged={onValueChanged}
+    />
+  );
+};
 const App = () => {
   const [visibleDays, setVisibleDays] = useState(defaultVisible);
   const isInvalid = visibleDays.length === 0;
@@ -46,10 +63,11 @@ const App = () => {
             className="option"
             key={label}
           >
-            <CheckBox
-              text={label}
+            <DayCheckBox
+              dayIndex={idx}
+              label={label}
               value={visibleDays.includes(idx)}
-              onValueChanged={(e) => onDayToggle(idx, e)}
+              onDayToggle={onDayToggle}
             />
           </div>
         ))}

apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx

@@ -13,6 +13,7 @@ const currentDate = new Date(2021, 3, 27);
 const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const typeGroups = ['typeId'];
 const priorityGroups = ['priorityId'];
+const colCountByScreen = { xs: 3 };
 
 type DateCellProps = {
   data: any;
@@ -67,7 +68,7 @@ const App = () => (
           <Item name="dateGroup" />
           <Item name="repeatGroup" />
           <Item name="resourcesGroup">
-            <Item name="priorityIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
+            <Item name="priorityIdGroup" colCount={3} colCountByScreen={colCountByScreen}>
               <Item name="priorityIdIcon" />
               <Item name="priorityIdEditor" />
               <Item name="typeIdEditor" />

apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js

@@ -12,6 +12,7 @@ const currentDate = new Date(2021, 3, 27);
 const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const typeGroups = ['typeId'];
 const priorityGroups = ['priorityId'];
+const colCountByScreen = { xs: 3 };
 const DateCell = ({ data: cellData }) => (
   <>
     <div className="name">{dayOfWeekNames[cellData.date.getDay()]}</div>
@@ -67,7 +68,7 @@ const App = () => (
             <Item
               name="priorityIdGroup"
               colCount={3}
-              colCountByScreen={{ xs: 3 }}
+              colCountByScreen={colCountByScreen}
             >
               <Item name="priorityIdIcon" />
               <Item name="priorityIdEditor" />

apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 type ResourceCellProps = {
   data: { color: string; text: string; data: { avatar: string; age: number; discipline: string; }; };
 };
 
 const ResourceCell = (props: ResourceCellProps) => {
   const { data: { color, text, data: { avatar, age, discipline } } } = props;
+  const backgroundStyle = useMemo(() => ({ background: color }), [color]);
+  const textStyle = useMemo(() => ({ color }), [color]);
 
   return (
     <div className="dx-template-wrapper">
-      <div className="name" style={{ background: color }}>
+      <div className="name" style={backgroundStyle}>
         <h2>{text}</h2>
       </div>
       <div className="avatar" title={text}>
@@ -18,7 +20,7 @@ const ResourceCell = (props: ResourceCellProps) => {
           alt={`${text} photo`}
         />
       </div>
-      <div className="info" style={{ color }}>
+      <div className="info" style={textStyle}>
         Age: {age}
         <br />
         <b>{discipline}</b>

apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 const ResourceCell = (props) => {
   const {
@@ -8,11 +8,13 @@ const ResourceCell = (props) => {
       data: { avatar, age, discipline },
     },
   } = props;
+  const backgroundStyle = useMemo(() => ({ background: color }), [color]);
+  const textStyle = useMemo(() => ({ color }), [color]);
   return (
     <div className="dx-template-wrapper">
       <div
         className="name"
-        style={{ background: color }}
+        style={backgroundStyle}
       >
         <h2>{text}</h2>
       </div>
@@ -27,7 +29,7 @@ const ResourceCell = (props) => {
       </div>
       <div
         className="info"
-        style={{ color }}
+        style={textStyle}
       >
         Age: {age}
         <br />

apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx

@@ -25,6 +25,7 @@ const overlappingRuleItems = [
   { value: 'sameResource', text: 'Different Resources' },
   { value: 'allResources', text: 'Never' },
 ];
+const formElementAttr = { class: 'hide-informer', id: 'form' };
 
 function getNextDay(date: Date): Date {
   const next = new Date(date);
@@ -90,12 +91,21 @@ const assigneeIdEditorOptions = {
   tagTemplate: 'tagTemplate',
 };
 
-const tagTemplate = (itemData: Assignee) => (
-  <div className="dx-tag-content" style={{ backgroundColor: itemData.color, borderColor: itemData.color }}>
-    {itemData.text}
-    <div className="dx-tag-remove-button"></div>
-  </div>
-);
+const TagTemplate = ({ itemData }: { itemData: Assignee }) => {
+  const tagStyle = useMemo(() => ({
+    backgroundColor: itemData.color,
+    borderColor: itemData.color,
+  }), [itemData.color]);
+
+  return (
+    <div className="dx-tag-content" style={tagStyle}>
+      {itemData.text}
+      <div className="dx-tag-remove-button"></div>
+    </div>
+  );
+};
+
+const tagTemplate = (itemData: Assignee) => <TagTemplate itemData={itemData} />;
 
 const conflictInformerRender = () => (
   <div className="conflict-informer">This time slot conflicts with another appointment.</div>
@@ -107,6 +117,10 @@ const App = () => {
   const showConflictErrorRef = useRef(false);
   const overlappingRuleRef = useRef('sameResource');
 
+  const onOverlappingRuleChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+    overlappingRuleRef.current = e.value;
+  }, []);
+
   const setConflictError = useCallback((show: boolean) => {
     showConflictErrorRef.current = show;
     formRef.current?.option('elementAttr.class', show ? '' : 'hide-informer');
@@ -226,7 +240,7 @@ const App = () => {
             labelMode="hidden"
             onInitialized={onFormInitialized}
             customizeItem={customizeItem}
-            elementAttr={{ class: 'hide-informer', id: 'form' }}
+            elementAttr={formElementAttr}
           >
             <Item
               name="conflictInformer"
@@ -260,7 +274,7 @@ const App = () => {
             valueExpr="value"
             displayExpr="text"
             defaultValue="sameResource"
-            onValueChanged={(e: SelectBoxTypes.ValueChangedEvent) => { overlappingRuleRef.current = e.value; }}
+            onValueChanged={onOverlappingRuleChanged}
           />
         </div>
       </div>