diff --git a/apps/demos/Demos/Autocomplete/Overview/React/App.tsx b/apps/demos/Demos/Autocomplete/Overview/React/App.tsx index 95303a369d3e..2dd9efadbd36 100644 --- a/apps/demos/Demos/Autocomplete/Overview/React/App.tsx +++ b/apps/demos/Demos/Autocomplete/Overview/React/App.tsx @@ -1,11 +1,12 @@ import React, { useCallback, useState } from 'react'; import { CustomStore } from 'devextreme-react/common/data'; +import type { LoadOptions } from 'devextreme-react/common/data'; import { Autocomplete, type AutocompleteTypes } from 'devextreme-react/autocomplete'; import 'whatwg-fetch'; import { names, surnames, positions } from './data.ts'; import AspNetData from 'devextreme-aspnet-data-nojquery'; -function isNotEmpty(value: string) { +function isNotEmpty(value: string): boolean { return value !== undefined && value !== null && value !== ''; } @@ -20,51 +21,51 @@ const states = AspNetData.createStore({ const clientsStore = new CustomStore({ key: 'Value', useDefaultSearch: true, - load: (loadOptions) => { + load: (loadOptions: LoadOptions) => { let params = '?'; - ['skip', 'take', 'filter'].forEach((option) => { + ['skip', 'take', 'filter'].forEach((option: string): void => { if (option in loadOptions && isNotEmpty(loadOptions[option])) { params += `${option}=${JSON.stringify(loadOptions[option])}&`; } }); params = params.slice(0, -1); return fetch(`https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/CustomersLookup${params}`) - .then((response) => response.json()) + .then((response: Response) => response.json()) .then((data) => ({ data: data.data, })) - .catch(() => { + .catch((): never => { throw new Error('Data Loading Error'); }); }, }); -const renderState = (data) => ( +const renderState = (data: { Name: string, Short: string }) => ( {data.Name} ({data.Short}) ); function App() { - const [firstName, setFirstName] = useState(''); - const [lastName, setLastName] = useState(''); + const [firstName, setFirstName] = useState(''); + const [lastName, setLastName] = useState(''); - const [state, setState] = useState(''); - const [currentClient, setCurrentClient] = useState(''); + const [state, setState] = useState(''); + const [currentClient, setCurrentClient] = useState(''); - const handleFirstNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { + const handleFirstNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => { setFirstName(e.value); }, []); - const handleLastNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { + const handleLastNameChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => { setLastName(e.value); }, []); - const handleStateChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { + const handleStateChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => { setState(e.value); }, []); - const handleCurrentClientChange = useCallback((e: AutocompleteTypes.ValueChangedEvent) => { + const handleCurrentClientChange = useCallback((e: AutocompleteTypes.ValueChangedEvent): void => { setCurrentClient(e.value); }, []); diff --git a/apps/demos/Demos/Autocomplete/Overview/React/data.ts b/apps/demos/Demos/Autocomplete/Overview/React/data.ts index 7bb847319569..808404d66cd7 100644 --- a/apps/demos/Demos/Autocomplete/Overview/React/data.ts +++ b/apps/demos/Demos/Autocomplete/Overview/React/data.ts @@ -1,8 +1,8 @@ -export const names = ['James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Charles', 'Joseph', 'Thomas', 'Christopher', 'Daniel', 'Paul', 'Mark', 'Donald', 'George', 'Kenneth', 'Steven', 'Edward', 'Brian', 'Ronald', 'Anthony', 'Kevin', 'Jason', 'Jeff', 'Mary', 'Patricia', 'Linda', 'Barbara', 'Elizabeth', 'Jennifer', 'Maria', 'Susan', 'Margaret', 'Dorothy', 'Lisa', 'Nancy', 'Karen', 'Betty', 'Helen', 'Sandra', 'Donna', 'Carol', 'Ruth', 'Sharon', 'Michelle', 'Laura', 'Sarah', 'Kimberly', 'Deborah']; +export const names: string[] = ['James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Charles', 'Joseph', 'Thomas', 'Christopher', 'Daniel', 'Paul', 'Mark', 'Donald', 'George', 'Kenneth', 'Steven', 'Edward', 'Brian', 'Ronald', 'Anthony', 'Kevin', 'Jason', 'Jeff', 'Mary', 'Patricia', 'Linda', 'Barbara', 'Elizabeth', 'Jennifer', 'Maria', 'Susan', 'Margaret', 'Dorothy', 'Lisa', 'Nancy', 'Karen', 'Betty', 'Helen', 'Sandra', 'Donna', 'Carol', 'Ruth', 'Sharon', 'Michelle', 'Laura', 'Sarah', 'Kimberly', 'Deborah']; -export const surnames = ['Anderson', 'Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor', 'Thomas', 'Jackson', 'White', 'Harris', 'Martin', 'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Lee', +export const surnames: string[] = ['Anderson', 'Smith', 'Johnson', 'Williams', 'Jones', 'Brown', 'Davis', 'Miller', 'Wilson', 'Moore', 'Taylor', 'Thomas', 'Jackson', 'White', 'Harris', 'Martin', 'Thompson', 'Garcia', 'Martinez', 'Robinson', 'Clark', 'Rodriguez', 'Lewis', 'Lee', 'Walker', 'Hall', 'Allen', 'Young', 'Hernandez', 'King', 'Wright', 'Lopez', 'Hill', 'Scott', 'Green', 'Adams', 'Baker', 'Gonzalez', 'Nelson', 'Carter', 'Mitchell', 'Perez', 'Roberts', 'Turner', 'Phillips', 'Campbell', 'Parker', 'Evans', 'Edwards', 'Collins', ]; -export const positions = ['CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager']; +export const positions: string[] = ['CEO', 'COO', 'CTO', 'CMO', 'HR Manager', 'IT Manager', 'Controller', 'Sales Manager', 'Support Manager']; diff --git a/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx b/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx index 6a585300b402..d42118b938e5 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx +++ b/apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx @@ -1,55 +1,58 @@ import React, { useCallback, useRef, useState } from 'react'; import CheckBox from 'devextreme-react/check-box'; +import type { CheckBoxTypes } from 'devextreme-react/check-box'; import SelectBox from 'devextreme-react/select-box'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; import Button from 'devextreme-react/button'; -import Calendar, { type CalendarTypes } from 'devextreme-react/calendar'; +import Calendar from 'devextreme-react/calendar'; +import type { CalendarTypes, CalendarRef } from 'devextreme-react/calendar'; const selectionModes = ['single', 'multiple', 'range']; const selectionModeLabel = { 'aria-label': 'Selection Mode' }; -const isWeekend = (date) => { +const isWeekend = (date: Date): boolean => { const day = date.getDay(); return day === 0 || day === 6; }; -const isDateDisabled = ({ view, date }) => view === 'month' && isWeekend(date); +const isDateDisabled = ({ view, date }: CalendarTypes.DisabledDate): boolean => view === 'month' && isWeekend(date); const now = new Date().getTime(); const msInDay = 1000 * 60 * 60 * 24; const initialValue = [now, now + msInDay]; export default function App() { - const calendar = useRef(null); - const [selectWeekOnClick, setSelectWeekOnClick] = useState(true); + const calendar = useRef(null); + const [selectWeekOnClick, setSelectWeekOnClick] = useState(true); const [selectionMode, setSelectionMode] = useState('multiple'); - const [minDateValue, setMinDateValue] = useState(null); - const [maxDateValue, setMaxDateValue] = useState(null); - const [weekendDisabled, setWeekendDisabled] = useState(null); + const [minDateValue, setMinDateValue] = useState(null); + const [maxDateValue, setMaxDateValue] = useState(null); + const [weekendDisabled, setWeekendDisabled] = useState(null); - const onSelectWeekOnClickChange = useCallback(({ value }) => { + const onSelectWeekOnClickChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => { setSelectWeekOnClick(value); }, [setSelectWeekOnClick]); - const onSelectionModeChange = useCallback(({ value }) => { + const onSelectionModeChange = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => { setSelectionMode(value); }, [setSelectionMode]); - const onMinDateChange = useCallback(({ value }) => { + const onMinDateChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => { setMinDateValue( value ? new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 3) : null, ); }, [setMinDateValue]); - const onMaxDateChange = useCallback(({ value }) => { + const onMaxDateChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => { setMaxDateValue( value ? new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 3) : null, ); }, [setMaxDateValue]); - const onDisableWeekendChange = useCallback(({ value }) => { + const onDisableWeekendChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => { setWeekendDisabled(value); }, [setWeekendDisabled]); const onClearButtonClick = useCallback(() => { - calendar.current.instance().clear(); + calendar.current?.instance().clear(); }, []); return ( diff --git a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js index a9361c1adbe4..cc003867aaea 100644 --- a/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js +++ b/apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js @@ -52,7 +52,7 @@ export default function App() { [setWeekendDisabled], ); const onClearButtonClick = useCallback(() => { - calendar.current.instance().clear(); + calendar.current?.instance().clear(); }, []); return (
diff --git a/apps/demos/Demos/Calendar/Overview/React/App.tsx b/apps/demos/Demos/Calendar/Overview/React/App.tsx index 295ab433aaa9..5a9345ec219d 100644 --- a/apps/demos/Demos/Calendar/Overview/React/App.tsx +++ b/apps/demos/Demos/Calendar/Overview/React/App.tsx @@ -1,13 +1,16 @@ import React, { useCallback, useState } from 'react'; import CheckBox from 'devextreme-react/check-box'; +import type { CheckBoxTypes } from 'devextreme-react/check-box'; import SelectBox from 'devextreme-react/select-box'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; import DateBox from 'devextreme-react/date-box'; -import Calendar, { type CalendarTypes } from 'devextreme-react/calendar'; +import Calendar from 'devextreme-react/calendar'; +import type { CalendarTypes } from 'devextreme-react/calendar'; import CustomCell from './CustomCell.tsx'; -const zoomLevels = ['month', 'year', 'decade', 'century']; -const weekNumberRules = ['auto', 'firstDay', 'firstFourDays', 'fullWeek']; -const weekDays = [ +const zoomLevels: CalendarTypes.CalendarZoomLevel[] = ['month', 'year', 'decade', 'century']; +const weekNumberRules: CalendarTypes.WeekNumberRule[] = ['auto', 'firstDay', 'firstFourDays', 'fullWeek']; +const weekDays: { id: number, text: string }[] = [ { id: 0, text: 'Sunday' }, { id: 1, text: 'Monday' }, { id: 2, text: 'Tuesday' }, @@ -24,66 +27,66 @@ const ruleLabel = { 'aria-label': 'Week Number Rule' }; export default function App() { const [zoomLevel, setZoomLevel] = useState('month'); - const [currentValue, setCurrentValue] = useState(new Date()); - const [useCellTemplate, setUseCellTemplate] = useState(null); - const [disabled, setDisabled] = useState(false); - const [showWeekNumbers, setShowWeekNumbers] = useState(false); + const [currentValue, setCurrentValue] = useState(new Date()); + const [useCellTemplate, setUseCellTemplate] = useState(null); + const [disabled, setDisabled] = useState(false); + const [showWeekNumbers, setShowWeekNumbers] = useState(false); const [firstDay, setFirstDay] = useState(0); const [weekNumberRule, setWeekNumberRule] = useState('auto'); const onCurrentValueChange = useCallback( - ({ value }) => { + ({ value }: { value?: Date }): void => { setCurrentValue(value); }, - [setCurrentValue], + [], ); const onDisabledChange = useCallback( - ({ value }) => { + ({ value }: CheckBoxTypes.ValueChangedEvent): void => { setDisabled(value); }, - [setDisabled], + [], ); const onZoomLevelChange = useCallback( - ({ value }) => { + ({ value }: Partial): void => { setZoomLevel(value); }, - [setZoomLevel], + [], ); const onFirstDayChange = useCallback( - ({ value }) => { + ({ value }: SelectBoxTypes.ValueChangedEvent): void => { setFirstDay(value); }, - [setFirstDay], + [], ); const onWeekNumberRuleChange = useCallback( - ({ value }) => { + ({ value }: SelectBoxTypes.ValueChangedEvent): void => { setWeekNumberRule(value); }, - [setWeekNumberRule], + [], ); const onShowWeekNumbersChange = useCallback( - ({ value }) => { + ({ value }: CheckBoxTypes.ValueChangedEvent): void => { setShowWeekNumbers(value); }, [setShowWeekNumbers], ); const onUseCellTemplateChange = useCallback( - ({ value }) => { + ({ value }: CheckBoxTypes.ValueChangedEvent): void => { setUseCellTemplate(!!value); }, [setUseCellTemplate], ); const onOptionChange = useCallback( - (e: { name: string }) => { + (e: CalendarTypes.OptionChangedEvent): void => { if (e.name === 'zoomLevel') { - onZoomLevelChange(e); + onZoomLevelChange({ value: e.value }); } }, [onZoomLevelChange], diff --git a/apps/demos/Demos/Calendar/Overview/React/CustomCell.tsx b/apps/demos/Demos/Calendar/Overview/React/CustomCell.tsx index 03823d42927e..1623e73ea7bd 100644 --- a/apps/demos/Demos/Calendar/Overview/React/CustomCell.tsx +++ b/apps/demos/Demos/Calendar/Overview/React/CustomCell.tsx @@ -1,21 +1,22 @@ import React from 'react'; +import type { CalendarTypes } from 'devextreme-react/calendar'; -export function isWeekend(date: Date) { +export function isWeekend(date: Date): boolean { const day = date.getDay(); return day === 0 || day === 6; } -const holidays = [ +const holidays: number[][] = [ [1, 0], [4, 6], [25, 11], ]; -export function isHoliday(date: Date) { - return holidays.some((item) => date.getDate() === item[0] && date.getMonth() === item[1]); +export function isHoliday(date: Date): boolean { + return holidays.some((item: number[]): boolean => date.getDate() === item[0] && date.getMonth() === item[1]); } -function getCellCssClass({ date, view }) { +function getCellCssClass({ date, view }: CalendarTypes.CellTemplateData): string { let cssClass = ''; if (view === 'month') { @@ -35,7 +36,11 @@ function getCellCssClass({ date, view }) { return cssClass; } -function CustomCell({ data: cell }) { +interface CustomCellProps { + data: CalendarTypes.CellTemplateData; +} + +function CustomCell({ data: cell }: CustomCellProps) { const { text } = cell; const className = getCellCssClass(cell); diff --git a/apps/demos/Demos/Calendar/Overview/ReactJs/App.js b/apps/demos/Demos/Calendar/Overview/ReactJs/App.js index 65077034880c..9a4c6746d585 100644 --- a/apps/demos/Demos/Calendar/Overview/ReactJs/App.js +++ b/apps/demos/Demos/Calendar/Overview/ReactJs/App.js @@ -28,36 +28,21 @@ export default function App() { const [showWeekNumbers, setShowWeekNumbers] = useState(false); const [firstDay, setFirstDay] = useState(0); const [weekNumberRule, setWeekNumberRule] = useState('auto'); - const onCurrentValueChange = useCallback( - ({ value }) => { - setCurrentValue(value); - }, - [setCurrentValue], - ); - const onDisabledChange = useCallback( - ({ value }) => { - setDisabled(value); - }, - [setDisabled], - ); - const onZoomLevelChange = useCallback( - ({ value }) => { - setZoomLevel(value); - }, - [setZoomLevel], - ); - const onFirstDayChange = useCallback( - ({ value }) => { - setFirstDay(value); - }, - [setFirstDay], - ); - const onWeekNumberRuleChange = useCallback( - ({ value }) => { - setWeekNumberRule(value); - }, - [setWeekNumberRule], - ); + const onCurrentValueChange = useCallback(({ value }) => { + setCurrentValue(value); + }, []); + const onDisabledChange = useCallback(({ value }) => { + setDisabled(value); + }, []); + const onZoomLevelChange = useCallback(({ value }) => { + setZoomLevel(value); + }, []); + const onFirstDayChange = useCallback(({ value }) => { + setFirstDay(value); + }, []); + const onWeekNumberRuleChange = useCallback(({ value }) => { + setWeekNumberRule(value); + }, []); const onShowWeekNumbersChange = useCallback( ({ value }) => { setShowWeekNumbers(value); @@ -73,7 +58,7 @@ export default function App() { const onOptionChange = useCallback( (e) => { if (e.name === 'zoomLevel') { - onZoomLevelChange(e); + onZoomLevelChange({ value: e.value }); } }, [onZoomLevelChange], diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx index d3e2725d0d7f..218e72ccd1bd 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/App.tsx @@ -19,11 +19,14 @@ loadMessages({ export default function App() { const { - alerts, insertMessage, fetchAIResponse, regenerateLastAIResponse, + alerts, + insertMessage, + fetchAIResponse, + regenerateLastAIResponse, } = useApi(); const [typingUsers, setTypingUsers] = useState([]); - const [isProcessing, setIsProcessing] = useState(false); + const [isProcessing, setIsProcessing] = useState(false); const processAIRequest = useCallback(async (message: ChatTypes.Message): Promise => { setIsProcessing(true); diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx index d026b3f7b59c..93ce0a70a082 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx @@ -1,4 +1,5 @@ -import React, { useCallback, useState, FC } from 'react'; +import React, { useCallback, useState } from 'react'; +import type { FC } from 'react'; import { Button, type ButtonTypes } from 'devextreme-react/button'; import { unified } from 'unified'; import remarkParse from 'remark-parse'; @@ -10,15 +11,13 @@ import HTMLReactParser from 'html-react-parser'; import { REGENERATION_TEXT } from './data.ts'; function convertToHtml(value: string): string { - const result = unified() + return unified() .use(remarkParse) .use(remarkRehype) .use(rehypeMinifyWhitespace) .use(rehypeStringify) .processSync(value) .toString(); - - return result; } interface MessageProps { @@ -26,8 +25,8 @@ interface MessageProps { onRegenerateButtonClick: ButtonTypes.Properties['onClick']; } -const Message: FC = ({ text, onRegenerateButtonClick }) => { - const [icon, setIcon] = useState('copy'); +const Message: FC = ({ text, onRegenerateButtonClick }: MessageProps) => { + const [icon, setIcon] = useState('copy'); const onCopyButtonClick = useCallback(() => { navigator.clipboard?.writeText(text); @@ -43,7 +42,7 @@ const Message: FC = ({ text, onRegenerateButtonClick }) => { } return ( - + <>
{HTMLReactParser(convertToHtml(text))}
@@ -61,7 +60,7 @@ const Message: FC = ({ text, onRegenerateButtonClick }) => { onClick={onRegenerateButtonClick} />
- + ); }; diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts index 5a879bad285b..d9a1a4edd8c1 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts @@ -1,4 +1,4 @@ -import { ChatTypes } from 'devextreme-react/chat'; +import type { ChatTypes } from 'devextreme-react/chat'; export const AzureOpenAIConfig = { dangerouslyAllowBrowser: true, diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts index f25525f43746..c26f59d4c269 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts @@ -118,7 +118,7 @@ export const useApi = () => { updateLastMessageContent(aiResponse); } catch { - updateLastMessageContent(messageHistory.at(-1).content); + updateLastMessageContent(messageHistory.at(-1)?.content); alertLimitReached(); } }, [alertLimitReached, updateLastMessageContent]); diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js index 9e7a5f3e1e84..aeb268e6b474 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js @@ -9,14 +9,13 @@ import HTMLReactParser from 'html-react-parser'; import { REGENERATION_TEXT } from './data.js'; function convertToHtml(value) { - const result = unified() + return unified() .use(remarkParse) .use(remarkRehype) .use(rehypeMinifyWhitespace) .use(rehypeStringify) .processSync(value) .toString(); - return result; } const Message = ({ text, onRegenerateButtonClick }) => { const [icon, setIcon] = useState('copy'); @@ -31,7 +30,7 @@ const Message = ({ text, onRegenerateButtonClick }) => { return {REGENERATION_TEXT}; } return ( - + <>
{HTMLReactParser(convertToHtml(text))}
- + ); }; export default Message; diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js index 93daf4fe8ce2..c27de6f0451e 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js @@ -99,7 +99,7 @@ export const useApi = () => { const aiResponse = await getAIResponse(messageHistory.slice(0, -1)); updateLastMessageContent(aiResponse); } catch { - updateLastMessageContent(messageHistory.at(-1).content); + updateLastMessageContent(messageHistory.at(-1)?.content); alertLimitReached(); } }, [alertLimitReached, updateLastMessageContent]); diff --git a/apps/demos/Demos/Chat/Customization/React/App.tsx b/apps/demos/Demos/Chat/Customization/React/App.tsx index 56108dc288f7..b6c6f324be79 100644 --- a/apps/demos/Demos/Chat/Customization/React/App.tsx +++ b/apps/demos/Demos/Chat/Customization/React/App.tsx @@ -2,6 +2,7 @@ import React, { useState, useCallback } from 'react'; import Chat, { type ChatTypes } from 'devextreme-react/chat'; import SelectBox from 'devextreme-react/select-box'; import CheckBox from 'devextreme-react/check-box'; +import type { Format } from 'devextreme-react/common/core/localization'; import { currentUser, @@ -14,20 +15,20 @@ import { export default function App() { const [messages, setMessages] = useState(initialMessages); - const [showAvatar, setShowAvatar] = useState(true); - const [showUsername, setShowUsername] = useState(true); - const [showDayHeaders, setDayHeaders] = useState(true); - const [dayHeaderFormat, setDayHeaderFormat] = useState(headerFormats[0]); - const [showMessageTimestamp, setMessageTimestamp] = useState(true); - const [messageTimestampFormat, setMessageTimestampFormat] = useState(messageTimestamps[0]); - const [isDisabled, setDisabled] = useState(false); + const [showAvatar, setShowAvatar] = useState(true); + const [showUsername, setShowUsername] = useState(true); + const [showDayHeaders, setDayHeaders] = useState(true); + const [dayHeaderFormat, setDayHeaderFormat] = useState(headerFormats[0]); + const [showMessageTimestamp, setMessageTimestamp] = useState(true); + const [messageTimestampFormat, setMessageTimestampFormat] = useState(messageTimestamps[0]); + const [isDisabled, setDisabled] = useState(false); - const onMessageEntered = useCallback(({ message }: ChatTypes.MessageEnteredEvent) => { + const onMessageEntered = useCallback(({ message }: ChatTypes.MessageEnteredEvent): void => { setMessages((prevMessages) => [...prevMessages, message]); }, []); return ( - + <>
- + ); } diff --git a/apps/demos/Demos/Chat/Customization/React/data.ts b/apps/demos/Demos/Chat/Customization/React/data.ts index de004f28c98f..135624888d08 100644 --- a/apps/demos/Demos/Chat/Customization/React/data.ts +++ b/apps/demos/Demos/Chat/Customization/React/data.ts @@ -1,6 +1,7 @@ -import { ChatTypes } from 'devextreme-react/chat'; +import type { ChatTypes } from 'devextreme-react/chat'; +import type { Format } from 'devextreme-react/common/core/localization'; -function getTimestamp(date, offsetMinutes = 0) { +function getTimestamp(date: Date, offsetMinutes = 0) { return date.getTime() + offsetMinutes * 60000; } @@ -18,7 +19,7 @@ export const supportAgent: ChatTypes.User = { avatarUrl: '../../../../images/petersmith.png', }; -export const messages = [ +export const messages: ChatTypes.Message[] = [ { timestamp: getTimestamp(date, -9), author: supportAgent, @@ -51,7 +52,7 @@ export const messages = [ }, ]; -export const dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; -export const messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; +export const dayHeaderFormats: Format[] = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; +export const messageTimestampFormats: Format[] = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; export const messageTimestampLabel = { 'aria-label': 'Message Timestamp Format' }; export const dayHeaderLabel = { 'aria-label': 'Day Header Format' }; diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/App.js b/apps/demos/Demos/Chat/Customization/ReactJs/App.js index 92f10777d681..87449b3b249b 100644 --- a/apps/demos/Demos/Chat/Customization/ReactJs/App.js +++ b/apps/demos/Demos/Chat/Customization/ReactJs/App.js @@ -24,7 +24,7 @@ export default function App() { setMessages((prevMessages) => [...prevMessages, message]); }, []); return ( - + <>
- + ); } diff --git a/apps/demos/Demos/Chat/FileAttachments/React/App.tsx b/apps/demos/Demos/Chat/FileAttachments/React/App.tsx index f71b7f8ac0a2..aebe110e523b 100644 --- a/apps/demos/Demos/Chat/FileAttachments/React/App.tsx +++ b/apps/demos/Demos/Chat/FileAttachments/React/App.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useRef } from 'react'; -import Chat, { FileUploaderOptions, type ChatTypes } from 'devextreme-react/chat'; -import { type FileUploaderTypes } from 'devextreme-react/file-uploader'; +import Chat, { FileUploaderOptions } from 'devextreme-react/chat'; +import type { ChatTypes } from 'devextreme-react/chat'; +import type { FileUploaderTypes } from 'devextreme-react/file-uploader'; import { Guid } from 'devextreme-react/common'; import { CustomStore, DataSource } from 'devextreme-react/common/data'; @@ -11,7 +12,7 @@ const store: ChatTypes.Message[] = [...initialMessages]; const customStore = new CustomStore({ key: 'id', load: async () => store, - insert: async (message) => { + insert: async (message: ChatTypes.Message) => { store.push(message); return message; }, @@ -23,7 +24,7 @@ const dataSource = new DataSource({ }); export default function App() { - const uploadedFilesMapRef = useRef(new Map()); + const uploadedFilesMapRef = useRef>(new Map()); function getFileUrl(filename: string): string | undefined { return uploadedFilesMapRef.current.get(filename); @@ -38,7 +39,7 @@ export default function App() { const onMessageEntered = useCallback(( { message }: ChatTypes.MessageEnteredEvent, ): void => { - const attachmentsWithUrls = message.attachments?.map((attachment: ChatTypes.Attachment) => ({ + const attachmentsWithUrls = message.attachments?.map((attachment: ChatTypes.Attachment): ChatTypes.Attachment => ({ ...attachment, url: getFileUrl(attachment.name), })); @@ -72,10 +73,10 @@ export default function App() { document.body.removeChild(link); }, []); - const uploadFile = useCallback((): void => {}, []); + const uploadFile = useCallback(() => {}, []); return ( - + <>
- + ); } diff --git a/apps/demos/Demos/Chat/FileAttachments/React/data.ts b/apps/demos/Demos/Chat/FileAttachments/React/data.ts index 0841c5c76eab..1b37df081260 100644 --- a/apps/demos/Demos/Chat/FileAttachments/React/data.ts +++ b/apps/demos/Demos/Chat/FileAttachments/React/data.ts @@ -1,4 +1,4 @@ -import { ChatTypes } from 'devextreme-react/chat'; +import type { ChatTypes } from 'devextreme-react/chat'; import { Guid } from 'devextreme-react/common'; function getTimestamp(date: Date, offsetMinutes = 0) { diff --git a/apps/demos/Demos/Chat/FileAttachments/ReactJs/App.js b/apps/demos/Demos/Chat/FileAttachments/ReactJs/App.js index 6853ac26171d..c4623abfb17e 100644 --- a/apps/demos/Demos/Chat/FileAttachments/ReactJs/App.js +++ b/apps/demos/Demos/Chat/FileAttachments/ReactJs/App.js @@ -58,7 +58,7 @@ export default function App() { }, []); const uploadFile = useCallback(() => {}, []); return ( - + <>
- + ); } diff --git a/apps/demos/Demos/Chat/MessageEditing/React/App.tsx b/apps/demos/Demos/Chat/MessageEditing/React/App.tsx index 19c364899cc1..dedae614a3aa 100644 --- a/apps/demos/Demos/Chat/MessageEditing/React/App.tsx +++ b/apps/demos/Demos/Chat/MessageEditing/React/App.tsx @@ -1,6 +1,8 @@ import React, { useState, useCallback } from 'react'; -import { Chat, Editing, type ChatTypes } from 'devextreme-react/chat'; +import { Chat, Editing } from 'devextreme-react/chat'; +import type { ChatTypes, ChatRef } from 'devextreme-react/chat'; import { SelectBox } from 'devextreme-react/select-box'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; import { Guid } from 'devextreme-react/common'; import { CustomStore, DataSource } from 'devextreme-react/common/data'; @@ -15,11 +17,11 @@ import { const editingStrategy = { enabled: true, disabled: false, - custom: ({ component, message }) => { + custom: ({ component, message }: { component: ReturnType, message: ChatTypes.Message }): boolean => { const { items, user } = component.option(); - const userId = user.id; + const userId = user?.id; - const lastNotDeletedMessage = items.findLast((item) => item.author?.id === userId && !item.isDeleted); + const lastNotDeletedMessage = items?.findLast((item: ChatTypes.Message): boolean => item.author?.id === userId && !item.isDeleted); return message.id === lastNotDeletedMessage?.id; }, @@ -29,8 +31,8 @@ const store: ChatTypes.Message[] = [...initialMessages]; const customStore = new CustomStore({ key: 'id', - load: async () => store, - insert: async (message) => { + load: async (): Promise => store, + insert: async (message: ChatTypes.Message): Promise => { store.push(message); return message; }, @@ -41,13 +43,15 @@ const dataSource = new DataSource({ paginate: false, }); +type EditingStrategy = NonNullable['allowUpdating']; + export default function App() { - const [allowUpdating, setAllowUpdating] = useState(true); - const [allowDeleting, setAllowDeleting] = useState(true); + const [allowUpdating, setAllowUpdating] = useState(true); + const [allowDeleting, setAllowDeleting] = useState(true); const onMessageEntered = useCallback(( { message }: ChatTypes.MessageEnteredEvent, - ) => { + ): void => { const newMessage = { id: new Guid().toString(), ...message, @@ -62,7 +66,7 @@ export default function App() { const onMessageDeleted = useCallback(( { message }: ChatTypes.MessageDeletedEvent, - ) => { + ): void => { dataSource.store().push([{ type: 'update', key: message.id, @@ -72,7 +76,7 @@ export default function App() { const onMessageUpdated = useCallback(( { message, text }: ChatTypes.MessageUpdatedEvent, - ) => { + ): void => { dataSource.store().push([{ type: 'update', key: message.id, @@ -80,18 +84,18 @@ export default function App() { }]); }, []); - const handleAllowUpdatingChange = useCallback((e) => { + const handleAllowUpdatingChange = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => { const strategy = editingStrategy[e.value]; setAllowUpdating(() => strategy); }, []); - const handleAllowDeletingChange = useCallback((e) => { + const handleAllowDeletingChange = useCallback((e: SelectBoxTypes.ValueChangedEvent): void => { const strategy = editingStrategy[e.value]; setAllowDeleting(() => strategy); }, []); return ( - + <>
- + ); } diff --git a/apps/demos/Demos/Chat/MessageEditing/React/data.ts b/apps/demos/Demos/Chat/MessageEditing/React/data.ts index e7df96d54785..8de93b3252b4 100644 --- a/apps/demos/Demos/Chat/MessageEditing/React/data.ts +++ b/apps/demos/Demos/Chat/MessageEditing/React/data.ts @@ -1,7 +1,7 @@ -import { type ChatTypes } from 'devextreme-react/chat'; +import type { ChatTypes } from 'devextreme-react/chat'; import { Guid } from 'devextreme-react/common'; -function getTimestamp(date, offsetMinutes = 0): number { +function getTimestamp(date: Date, offsetMinutes = 0): number { return date.getTime() + offsetMinutes * 60000; } @@ -19,7 +19,7 @@ export const supportAgent: ChatTypes.User = { avatarUrl: '../../../../images/petersmith.png', }; -export const messages = [ +export const messages: ChatTypes.Message[] = [ { id: new Guid().toString(), timestamp: getTimestamp(date, -9), @@ -56,7 +56,7 @@ export const messages = [ export const allowEditingLabel = { 'aria-label': 'Allow Editing' }; export const allowDeletingLabel = { 'aria-label': 'Allow Deleting' }; -export const editingOptions = [ +export const editingOptions: { text: string, key: string }[] = [ { text: 'Enabled', key: 'enabled' }, { text: 'Disabled', key: 'disabled' }, { text: 'Only the last message (custom)', key: 'custom' }, diff --git a/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js b/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js index fda8ee1718ea..111acf392f1b 100644 --- a/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js +++ b/apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js @@ -16,8 +16,8 @@ const editingStrategy = { disabled: false, custom: ({ component, message }) => { const { items, user } = component.option(); - const userId = user.id; - const lastNotDeletedMessage = items.findLast( + const userId = user?.id; + const lastNotDeletedMessage = items?.findLast( (item) => item.author?.id === userId && !item.isDeleted, ); return message.id === lastNotDeletedMessage?.id; @@ -79,7 +79,7 @@ export default function App() { setAllowDeleting(() => strategy); }, []); return ( - + <>
- + ); } diff --git a/apps/demos/Demos/Chat/Overview/React/App.tsx b/apps/demos/Demos/Chat/Overview/React/App.tsx index 924358cdd9b8..cecaef997cc3 100644 --- a/apps/demos/Demos/Chat/Overview/React/App.tsx +++ b/apps/demos/Demos/Chat/Overview/React/App.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; -import Chat, { type ChatTypes } from 'devextreme-react/chat'; +import Chat from 'devextreme-react/chat'; +import type { ChatTypes } from 'devextreme-react/chat'; import { currentUser, supportAgent, initialMessages } from './data.ts'; export default function App() { @@ -8,19 +9,19 @@ export default function App() { const [supportChatTypingUsers, setSupportChatTypingUsers] = useState([]); const [messages, setMessages] = useState(initialMessages); - function onMessageEntered({ message }: ChatTypes.MessageEnteredEvent) { - setMessages((prevMessages) => [...prevMessages, message]); + function onMessageEntered({ message }: ChatTypes.MessageEnteredEvent): void { + setMessages((prevMessages: ChatTypes.Message[]): ChatTypes.Message[] => [...prevMessages, message]); } - function typingStart({ user }: ChatTypes.TypingStartEvent) { - if (user.id === currentUser.id) { + function typingStart({ user }: ChatTypes.TypingStartEvent): void { + if (user?.id === currentUser.id) { setSupportChatTypingUsers([currentUser]); } else { setUserChatTypingUsers([supportAgent]); } } - function typingEnd({ user }: ChatTypes.TypingEndEvent) { + function typingEnd({ user }: ChatTypes.TypingEndEvent): void { if (user.id === currentUser.id) { setSupportChatTypingUsers([]); } else { @@ -29,7 +30,7 @@ export default function App() { } return ( - + <> - + ); } diff --git a/apps/demos/Demos/Chat/Overview/React/data.ts b/apps/demos/Demos/Chat/Overview/React/data.ts index 7d233683b19f..42d8ccd2fab9 100644 --- a/apps/demos/Demos/Chat/Overview/React/data.ts +++ b/apps/demos/Demos/Chat/Overview/React/data.ts @@ -1,9 +1,9 @@ -import { ChatTypes } from 'devextreme-react/chat'; +import type { ChatTypes } from 'devextreme-react/chat'; const date = new Date(); date.setHours(0, 0, 0, 0); -function getTimestamp(date, offsetMinutes = 0) { +function getTimestamp(date: Date, offsetMinutes = 0): number { return date.getTime() + offsetMinutes * 60000; } @@ -18,7 +18,7 @@ export const supportAgent: ChatTypes.User = { avatarUrl: '../../../../images/petersmith.png', }; -export const initialMessages = [ +export const initialMessages: ChatTypes.Message[] = [ { timestamp: getTimestamp(date, -9), author: supportAgent, diff --git a/apps/demos/Demos/Chat/Overview/ReactJs/App.js b/apps/demos/Demos/Chat/Overview/ReactJs/App.js index e0daa4d07d52..addada990aca 100644 --- a/apps/demos/Demos/Chat/Overview/ReactJs/App.js +++ b/apps/demos/Demos/Chat/Overview/ReactJs/App.js @@ -10,7 +10,7 @@ export default function App() { setMessages((prevMessages) => [...prevMessages, message]); } function typingStart({ user }) { - if (user.id === currentUser.id) { + if (user?.id === currentUser.id) { setSupportChatTypingUsers([currentUser]); } else { setUserChatTypingUsers([supportAgent]); @@ -24,7 +24,7 @@ export default function App() { } } return ( - + <> - + ); } diff --git a/apps/demos/Demos/CheckBox/Overview/React/App.tsx b/apps/demos/Demos/CheckBox/Overview/React/App.tsx index 7ee403b7f405..dcea3959d34a 100644 --- a/apps/demos/Demos/CheckBox/Overview/React/App.tsx +++ b/apps/demos/Demos/CheckBox/Overview/React/App.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useState } from 'react'; -import { CheckBox, type CheckBoxTypes } from 'devextreme-react/check-box'; +import { CheckBox } from 'devextreme-react/check-box'; +import type { CheckBoxTypes } from 'devextreme-react/check-box'; const checkedLabel = { 'aria-label': 'Checked' }; const uncheckedLabel = { 'aria-label': 'Unchecked' }; @@ -10,9 +11,9 @@ const disabledLabel = { 'aria-label': 'Disabled' }; const customSizeLabel = { 'aria-label': 'Custom size' }; function App() { - const [checkBoxValue, setCheckBoxValue] = useState(null); + const [checkBoxValue, setCheckBoxValue] = useState(null); - const onValueChanged = useCallback((args: CheckBoxTypes.ValueChangedEvent) => { + const onValueChanged = useCallback((args: CheckBoxTypes.ValueChangedEvent): void => { setCheckBoxValue(args.value); }, []); diff --git a/apps/demos/Demos/ColorBox/Overview/React/App.tsx b/apps/demos/Demos/ColorBox/Overview/React/App.tsx index ddb0d29cd395..a7822635c243 100644 --- a/apps/demos/Demos/ColorBox/Overview/React/App.tsx +++ b/apps/demos/Demos/ColorBox/Overview/React/App.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useState } from 'react'; -import ColorBox, { type ColorBoxTypes } from 'devextreme-react/color-box'; +import ColorBox from 'devextreme-react/color-box'; +import type { ColorBoxTypes } from 'devextreme-react/color-box'; const defaultModeLabel = { 'aria-label': 'Default mode' }; const alphaChannelLabel = { 'aria-label': 'With alpha channel editing' }; @@ -9,9 +10,9 @@ const disabledLabel = { 'aria-label': 'Disabled' }; const eventHandlingLabel = { 'aria-label': 'Event Handling' }; function App() { - const [color, setColor] = useState('#f05b41'); + const [color, setColor] = useState('#f05b41'); - const handleColorChange = useCallback(({ value }: ColorBoxTypes.ValueChangedEvent) => { + const handleColorChange = useCallback(({ value }: ColorBoxTypes.ValueChangedEvent): void => { setColor(value); }, []); diff --git a/apps/demos/Demos/Common/CustomTextEditorButtons/React/App.tsx b/apps/demos/Demos/Common/CustomTextEditorButtons/React/App.tsx index 978779ecf5fc..bd570b17f590 100644 --- a/apps/demos/Demos/Common/CustomTextEditorButtons/React/App.tsx +++ b/apps/demos/Demos/Common/CustomTextEditorButtons/React/App.tsx @@ -1,9 +1,12 @@ import React, { useCallback, useMemo, useState } from 'react'; -import { TextBox, Button as TextBoxButton, type TextBoxTypes } from 'devextreme-react/text-box'; -import { NumberBox, Button as NumberBoxButton, type NumberBoxTypes } from 'devextreme-react/number-box'; -import { DateBox, Button as DateBoxButton, type DateBoxTypes } from 'devextreme-react/date-box'; -import { type ButtonTypes } from 'devextreme-react/button'; +import { TextBox, Button as TextBoxButton } from 'devextreme-react/text-box'; +import type { TextBoxTypes } from 'devextreme-react/text-box'; +import { NumberBox, Button as NumberBoxButton } from 'devextreme-react/number-box'; +import type { NumberBoxTypes } from 'devextreme-react/number-box'; +import { DateBox, Button as DateBoxButton } from 'devextreme-react/date-box'; +import type { DateBoxTypes } from 'devextreme-react/date-box'; +import type { ButtonTypes } from 'devextreme-react/button'; const millisecondsInDay = 24 * 60 * 60 * 1000; const currencyLabel = { 'aria-label': 'Multi Currency' }; @@ -12,94 +15,94 @@ const passwordLabel = { 'aria-label': 'Password' }; function App() { const [passwordMode, setPasswordMode] = useState('password'); - const [currencyFormat, setCurrencyFormat] = useState('$ #.##'); - const [currencyValue, setCurrencyValue] = useState(14500.55); - const [dateValue, setDateValue] = useState(new Date().getTime()); + const [currencyFormat, setCurrencyFormat] = useState('$ #.##'); + const [currencyValue, setCurrencyValue] = useState(14500.55); + const [dateValue, setDateValue] = useState(new Date().getTime()); const passwordButton = useMemo( - () => ({ + (): ButtonTypes.Properties => ({ icon: 'eyeopen', stylingMode: 'text', - onClick: () => { + onClick: (): void => { setPasswordMode((prevPasswordMode: string) => (prevPasswordMode === 'text' ? 'password' : 'text')); }, }), - [setPasswordMode], + [], ); const currencyButton = useMemo( - () => ({ + (): ButtonTypes.Properties => ({ text: '€', stylingMode: 'text', width: 32, elementAttr: { class: 'currency', }, - onClick: (e) => { + onClick: (e: ButtonTypes.ClickEvent): void => { if (e.component.option('text') === '$') { e.component.option('text', '€'); setCurrencyFormat('$ #.##'); - setCurrencyValue((prevCurrencyValue: number) => prevCurrencyValue / 0.836); + setCurrencyValue((prevCurrencyValue: number): number => prevCurrencyValue / 0.836); } else { e.component.option('text', '$'); setCurrencyFormat('€ #.##'); - setCurrencyValue((prevCurrencyValue: number) => prevCurrencyValue * 0.836); + setCurrencyValue((prevCurrencyValue: number): number => prevCurrencyValue * 0.836); } }, }), - [setCurrencyFormat, setCurrencyValue], + [], ); const todayButton = useMemo( - () => ({ + (): ButtonTypes.Properties => ({ text: 'Today', stylingMode: 'text', - onClick: () => { + onClick: (): void => { setDateValue(new Date().getTime()); }, }), - [setDateValue], + [], ); const prevDateButton = useMemo( - () => ({ + (): ButtonTypes.Properties => ({ icon: 'spinprev', stylingMode: 'text', - onClick: () => { - setDateValue((prevDateValue: number) => prevDateValue - millisecondsInDay); + onClick: (): void => { + setDateValue((prevDateValue: number): number => prevDateValue - millisecondsInDay); }, }), - [setDateValue], + [], ); const nextDateButton = useMemo( - () => ({ + (): ButtonTypes.Properties => ({ icon: 'spinnext', stylingMode: 'text', - onClick: () => { - setDateValue((prevDateValue: number) => prevDateValue + millisecondsInDay); + onClick: (): void => { + setDateValue((prevDateValue: number): number => prevDateValue + millisecondsInDay); }, }), - [setDateValue], + [], ); const onDateChanged = useCallback( - (e: DateBoxTypes.ValueChangedEvent) => { + (e: DateBoxTypes.ValueChangedEvent): void => { setDateValue(e.value); }, - [setDateValue], + [], ); const changeCurrency = useCallback( - (data: NumberBoxTypes.ValueChangedEvent) => { + (data: NumberBoxTypes.ValueChangedEvent): void => { setCurrencyValue(data.value); }, - [setCurrencyValue], + [], ); return ( - + <>
Password TextBox
@@ -169,7 +172,7 @@ function App() {
- + ); } diff --git a/apps/demos/Demos/Common/CustomTextEditorButtons/ReactJs/App.js b/apps/demos/Demos/Common/CustomTextEditorButtons/ReactJs/App.js index 77c03ab0def0..b3d905209b9d 100644 --- a/apps/demos/Demos/Common/CustomTextEditorButtons/ReactJs/App.js +++ b/apps/demos/Demos/Common/CustomTextEditorButtons/ReactJs/App.js @@ -20,7 +20,7 @@ function App() { setPasswordMode((prevPasswordMode) => (prevPasswordMode === 'text' ? 'password' : 'text')); }, }), - [setPasswordMode], + [], ); const currencyButton = useMemo( () => ({ @@ -42,7 +42,7 @@ function App() { } }, }), - [setCurrencyFormat, setCurrencyValue], + [], ); const todayButton = useMemo( () => ({ @@ -52,7 +52,7 @@ function App() { setDateValue(new Date().getTime()); }, }), - [setDateValue], + [], ); const prevDateButton = useMemo( () => ({ @@ -62,7 +62,7 @@ function App() { setDateValue((prevDateValue) => prevDateValue - millisecondsInDay); }, }), - [setDateValue], + [], ); const nextDateButton = useMemo( () => ({ @@ -72,22 +72,16 @@ function App() { setDateValue((prevDateValue) => prevDateValue + millisecondsInDay); }, }), - [setDateValue], - ); - const onDateChanged = useCallback( - (e) => { - setDateValue(e.value); - }, - [setDateValue], - ); - const changeCurrency = useCallback( - (data) => { - setCurrencyValue(data.value); - }, - [setCurrencyValue], + [], ); + const onDateChanged = useCallback((e) => { + setDateValue(e.value); + }, []); + const changeCurrency = useCallback((data) => { + setCurrencyValue(data.value); + }, []); return ( - + <>
Password TextBox
@@ -157,7 +151,7 @@ function App() {
- + ); } export default App; diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/React/App.tsx b/apps/demos/Demos/Common/EditorAppearanceVariants/React/App.tsx index e1b7ec1f45d9..7a0284dff814 100644 --- a/apps/demos/Demos/Common/EditorAppearanceVariants/React/App.tsx +++ b/apps/demos/Demos/Common/EditorAppearanceVariants/React/App.tsx @@ -1,15 +1,17 @@ import React, { useCallback, useState } from 'react'; -import { EditorStyle, LabelMode } from 'devextreme-react/common'; +import type { EditorStyle, LabelMode } from 'devextreme-react/common'; import notify from 'devextreme/ui/notify'; import { SelectBox } from 'devextreme-react/select-box'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; import { TextBox } from 'devextreme-react/text-box'; import { DateBox } from 'devextreme-react/date-box'; import { DateRangeBox } from 'devextreme-react/date-range-box'; import { TextArea } from 'devextreme-react/text-area'; -import { Button, type ButtonTypes } from 'devextreme-react/button'; +import { Button } from 'devextreme-react/button'; +import type { ButtonTypes } from 'devextreme-react/button'; import { Validator, RequiredRule } from 'devextreme-react/validator'; import { @@ -31,7 +33,7 @@ const phoneRules = { X: /[02-9]/, }; -function validateClick({ validationGroup }: ButtonTypes.ClickEvent) { +function validateClick({ validationGroup }: ButtonTypes.ClickEvent): void { const result = validationGroup.validate(); if (result.isValid) { notify('The task was saved successfully.', 'success'); @@ -42,23 +44,25 @@ function validateClick({ validationGroup }: ButtonTypes.ClickEvent) { export default function App() { const defaultStylingMode = 'outlined'; + const [stylingMode, setStylingMode] = useState(defaultStylingMode); const [labelMode, setLabelMode] = useState('static'); + const changeStylingMode = useCallback( - ({ value }) => { + ({ value }: SelectBoxTypes.ValueChangedEvent): void => { setStylingMode(value); }, - [setStylingMode], + [], ); const labelModeChange = useCallback( - ({ value }) => { + ({ value }: SelectBoxTypes.ValueChangedEvent): void => { setLabelMode(value); }, - [setLabelMode], + [], ); return ( - + <>
Options
@@ -191,6 +195,6 @@ export default function App() { type="default" id="validate" /> - + ); } diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/React/data.ts b/apps/demos/Demos/Common/EditorAppearanceVariants/React/data.ts index 1b3a5f300a52..d0dd83023d14 100644 --- a/apps/demos/Demos/Common/EditorAppearanceVariants/React/data.ts +++ b/apps/demos/Demos/Common/EditorAppearanceVariants/React/data.ts @@ -1,6 +1,8 @@ -export const states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY']; -export const stylingModes = ['outlined', 'filled', 'underlined']; -export const labelModes = ['static', 'floating', 'hidden', 'outside']; +import type { EditorStyle, LabelMode } from 'devextreme-react/common'; + +export const states: string[] = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY']; +export const stylingModes: EditorStyle[] = ['outlined', 'filled', 'underlined']; +export const labelModes: LabelMode[] = ['static', 'floating', 'hidden', 'outside']; export const notesLabel = { 'aria-label': 'Notes' }; export const birthDateLabel = { 'aria-label': 'Birth Date' }; export const hireDateLabel = { 'aria-label': 'Hire Date' }; diff --git a/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/App.js b/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/App.js index 82df0a5ef85a..1f5d7487d83f 100644 --- a/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/App.js +++ b/apps/demos/Demos/Common/EditorAppearanceVariants/ReactJs/App.js @@ -37,20 +37,14 @@ export default function App() { const defaultStylingMode = 'outlined'; const [stylingMode, setStylingMode] = useState(defaultStylingMode); const [labelMode, setLabelMode] = useState('static'); - const changeStylingMode = useCallback( - ({ value }) => { - setStylingMode(value); - }, - [setStylingMode], - ); - const labelModeChange = useCallback( - ({ value }) => { - setLabelMode(value); - }, - [setLabelMode], - ); + const changeStylingMode = useCallback(({ value }) => { + setStylingMode(value); + }, []); + const labelModeChange = useCallback(({ value }) => { + setLabelMode(value); + }, []); return ( - + <>
Options
@@ -183,6 +177,6 @@ export default function App() { type="default" id="validate" /> - + ); } diff --git a/apps/demos/Demos/Common/EditorsOverview/React/App.tsx b/apps/demos/Demos/Common/EditorsOverview/React/App.tsx index 4a12a9d5903e..88ac202fc159 100644 --- a/apps/demos/Demos/Common/EditorsOverview/React/App.tsx +++ b/apps/demos/Demos/Common/EditorsOverview/React/App.tsx @@ -1,10 +1,15 @@ import React, { useCallback, useState } from 'react'; -import ColorBox, { type ColorBoxTypes } from 'devextreme-react/color-box'; -import NumberBox, { type NumberBoxTypes } from 'devextreme-react/number-box'; -import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box'; -import Switch, { type SwitchTypes } from 'devextreme-react/switch'; -import TextBox, { type TextBoxTypes } from 'devextreme-react/text-box'; +import ColorBox from 'devextreme-react/color-box'; +import type { ColorBoxTypes } from 'devextreme-react/color-box'; +import NumberBox from 'devextreme-react/number-box'; +import type { NumberBoxTypes } from 'devextreme-react/number-box'; +import SelectBox from 'devextreme-react/select-box'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; +import Switch from 'devextreme-react/switch'; +import type { SwitchTypes } from 'devextreme-react/switch'; +import TextBox from 'devextreme-react/text-box'; +import type { TextBoxTypes } from 'devextreme-react/text-box'; import Logo from './Logo.tsx'; @@ -15,7 +20,7 @@ const titleLabel = { 'aria-label': 'Title' }; const transformLabel = { 'aria-label': 'Transform' }; const noFlipTransform = 'scaleX(1)'; -const transformations = [ +const transformations: { key: string, items: { name: string, value: string }[] }[] = [ { key: 'Flip', items: [ @@ -36,41 +41,41 @@ const transformations = [ ]; function App() { - const [text, setText] = useState('UI Superhero'); - const [width, setWidth] = useState(370); - const [height, setHeight] = useState(260); - const [color, setColor] = useState('#f05b41'); - const [transform, setTransform] = useState(noFlipTransform); - const [border, setBorder] = useState(false); + const [text, setText] = useState('UI Superhero'); + const [width, setWidth] = useState(370); + const [height, setHeight] = useState(260); + const [color, setColor] = useState('#f05b41'); + const [transform, setTransform] = useState(noFlipTransform); + const [border, setBorder] = useState(false); - const handleTextChange = useCallback((e: TextBoxTypes.ValueChangedEvent) => { - setText(e.value); + const handleTextChange = useCallback(({ value }: TextBoxTypes.ValueChangedEvent): void => { + setText(value); }, []); - const handleColorChange = useCallback((e: ColorBoxTypes.ValueChangedEvent) => { - setColor(e.value); + const handleColorChange = useCallback(({ value }: ColorBoxTypes.ValueChangedEvent): void => { + setColor(value); }, []); - const handleHeightChange = useCallback((e: NumberBoxTypes.ValueChangedEvent) => { - setWidth((e.value * 37) / 26); - setHeight(e.value); + const handleHeightChange = useCallback(({ value }: NumberBoxTypes.ValueChangedEvent): void => { + setWidth((value * 37) / 26); + setHeight(value); }, []); - const handleWidthChange = useCallback((e: NumberBoxTypes.ValueChangedEvent) => { - setWidth(e.value); - setHeight((e.value * 26) / 37); + const handleWidthChange = useCallback(({ value }: NumberBoxTypes.ValueChangedEvent): void => { + setWidth(value); + setHeight((value * 26) / 37); }, []); - const handleTransformChange = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { - setTransform(e.value); + const handleTransformChange = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent): void => { + setTransform(value); }, []); - const handleBorderChange = useCallback((e: SwitchTypes.ValueChangedEvent) => { - setBorder(e.value); + const handleBorderChange = useCallback(({ value }: SwitchTypes.ValueChangedEvent): void => { + setBorder(value); }, []); return ( - + <>
@@ -163,7 +168,7 @@ function App() { transform={transform} border={border} /> - + ); } diff --git a/apps/demos/Demos/Common/EditorsOverview/React/Logo.tsx b/apps/demos/Demos/Common/EditorsOverview/React/Logo.tsx index 767ce8fd7e26..9c43a86d3c55 100644 --- a/apps/demos/Demos/Common/EditorsOverview/React/Logo.tsx +++ b/apps/demos/Demos/Common/EditorsOverview/React/Logo.tsx @@ -9,185 +9,191 @@ interface LogoProps { border: boolean; } -class Logo extends React.PureComponent { - render() { - const { props } = this; - return ( +function Logo(props: LogoProps) { + const { + text, + width, + height, + color, + transform, + border, + } = props; + + return ( +
-
- - - - - - - - - + - - - - - - -
-
- {props.text} -
+ + + + + + + + + + + + + +
+
+ {text}
- ); - } +
+ ); } export default Logo; diff --git a/apps/demos/Demos/Common/EditorsOverview/ReactJs/App.js b/apps/demos/Demos/Common/EditorsOverview/ReactJs/App.js index 1a7785282082..ff70d120db72 100644 --- a/apps/demos/Demos/Common/EditorsOverview/ReactJs/App.js +++ b/apps/demos/Demos/Common/EditorsOverview/ReactJs/App.js @@ -38,28 +38,28 @@ function App() { const [color, setColor] = useState('#f05b41'); const [transform, setTransform] = useState(noFlipTransform); const [border, setBorder] = useState(false); - const handleTextChange = useCallback((e) => { - setText(e.value); + const handleTextChange = useCallback(({ value }) => { + setText(value); }, []); - const handleColorChange = useCallback((e) => { - setColor(e.value); + const handleColorChange = useCallback(({ value }) => { + setColor(value); }, []); - const handleHeightChange = useCallback((e) => { - setWidth((e.value * 37) / 26); - setHeight(e.value); + const handleHeightChange = useCallback(({ value }) => { + setWidth((value * 37) / 26); + setHeight(value); }, []); - const handleWidthChange = useCallback((e) => { - setWidth(e.value); - setHeight((e.value * 26) / 37); + const handleWidthChange = useCallback(({ value }) => { + setWidth(value); + setHeight((value * 26) / 37); }, []); - const handleTransformChange = useCallback((e) => { - setTransform(e.value); + const handleTransformChange = useCallback(({ value }) => { + setTransform(value); }, []); - const handleBorderChange = useCallback((e) => { - setBorder(e.value); + const handleBorderChange = useCallback(({ value }) => { + setBorder(value); }, []); return ( - + <>
@@ -152,7 +152,7 @@ function App() { transform={transform} border={border} /> - + ); } export default App; diff --git a/apps/demos/Demos/Common/EditorsOverview/ReactJs/Logo.js b/apps/demos/Demos/Common/EditorsOverview/ReactJs/Logo.js index 263f14662db0..37d92fb81f7c 100644 --- a/apps/demos/Demos/Common/EditorsOverview/ReactJs/Logo.js +++ b/apps/demos/Demos/Common/EditorsOverview/ReactJs/Logo.js @@ -1,183 +1,183 @@ import React from 'react'; -class Logo extends React.PureComponent { - render() { - const { props } = this; - return ( +function Logo(props) { + const { + text, width, height, color, transform, border, + } = props; + return ( +
-
- - - - - + - - - - - - - - - - -
-
- {props.text} -
+ + + + + + + + + + + + + +
+
+ {text}
- ); - } +
+ ); } export default Logo; diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx index fb2aaa83b81d..fd53c233ab28 100644 --- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx +++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/App.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useState } from 'react'; import { NumberBox } from 'devextreme-react/number-box'; -import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box'; +import { SelectBox } from 'devextreme-react/select-box'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; import { Switch } from 'devextreme-react/switch'; import { TextBox } from 'devextreme-react/text-box'; import { Autocomplete } from 'devextreme-react/autocomplete'; @@ -18,15 +19,15 @@ import { autocompleteLabel, } from './data.ts'; -const languages = ['Arabic: Right-to-Left direction', 'English: Left-to-Right direction']; -const tagBoxDefaultValue = [europeanUnion[0].id]; +const languages: string[] = ['Arabic: Right-to-Left direction', 'English: Left-to-Right direction']; +const tagBoxDefaultValue: number[] = [europeanUnion[0].id]; function App() { - const [rtlEnabled, setRtlEnabled] = useState(false); - const [displayExpr, setDisplayExpr] = useState('nameEn'); - const [textValue, setTextValue] = useState('text'); + const [rtlEnabled, setRtlEnabled] = useState(false); + const [displayExpr, setDisplayExpr] = useState('nameEn'); + const [textValue, setTextValue] = useState('text'); - const onLanguageChanged = useCallback((args: SelectBoxTypes.ValueChangedEvent) => { + const onLanguageChanged = useCallback((args: SelectBoxTypes.ValueChangedEvent): void => { const isRTL = args.value === languages[0]; setDisplayExpr(isRTL ? 'nameAr' : 'nameEn'); diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/data.ts b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/data.ts index e141d7406927..b4c322d95e7e 100644 --- a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/data.ts +++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/data.ts @@ -1,4 +1,6 @@ -export const europeanUnion = [{ +import type { EuropeanUnionCountries } from './types.ts'; + +export const europeanUnion: EuropeanUnionCountries[] = [{ id: 1, nameAr: 'النمسا', nameEn: 'Austria', diff --git a/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/types.ts b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/types.ts new file mode 100644 index 000000000000..1bc6db523e2d --- /dev/null +++ b/apps/demos/Demos/Common/EditorsRightToLeftSupport/React/types.ts @@ -0,0 +1,5 @@ +export type EuropeanUnionCountries = { + id: number, + nameAr: string, + nameEn: string, +}; diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx index 114ea1387338..bab79a36c7bc 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/App.tsx @@ -3,6 +3,7 @@ import notify from 'devextreme/ui/notify'; import Button from 'devextreme-react/button'; import Popup from 'devextreme-react/popup'; import { housesSource } from './data.ts'; +import type { HouseType } from './types.ts'; import { House } from './House.tsx'; const ADD_TO_FAVORITES = 'Add to Favorites'; @@ -20,13 +21,13 @@ const favButtonAttrs = { }; export default function App() { - const [houses, setHouses] = useState(housesSource); + const [houses, setHouses] = useState(housesSource); const [currentHouse, setCurrentHouse] = useState(housesSource[0]); - const [popupVisible, setPopupVisible] = useState(false); + const [popupVisible, setPopupVisible] = useState(false); const changeFavoriteState = useCallback(() => { const updatedHouses = [...houses]; - const updatedCurrentHouse = updatedHouses.find((house) => house === currentHouse); + const updatedCurrentHouse = updatedHouses.find((house: HouseType): boolean => house === currentHouse); updatedCurrentHouse.Favorite = !updatedCurrentHouse.Favorite; setHouses(updatedHouses); @@ -36,7 +37,7 @@ export default function App() { }, updatedCurrentHouse.Favorite ? 'success' : 'error', 2000); - }, [houses, currentHouse, setHouses]); + }, [houses, currentHouse]); const renderPopup = useCallback(() => (
@@ -58,22 +59,22 @@ export default function App() {
), [currentHouse, changeFavoriteState]); - const showHouse = useCallback((house) => { + const showHouse = useCallback((house: HouseType): void => { setCurrentHouse(house); setPopupVisible(true); - }, [setCurrentHouse, setPopupVisible]); + }, []); const handlePopupHidden = useCallback(() => { setPopupVisible(false); - }, [setPopupVisible]); + }, []); return (
{ - houses.map((h) => ) } void; } export function House(props: HouseProps) { diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/data.ts b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/data.ts index 6f0084f5cfd0..df4b5c42b8c2 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/data.ts +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/data.ts @@ -1,4 +1,6 @@ -export const housesSource = [{ +import type { HouseType } from './types.ts'; + +export const housesSource: HouseType[] = [{ ID: '1', Favorite: false, Address: '652 Avonwick Gate', diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/types.ts b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/types.ts new file mode 100644 index 000000000000..ed1cf6849aa0 --- /dev/null +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/React/types.ts @@ -0,0 +1,24 @@ +export type HouseType = { + ID: string; + Favorite: boolean; + Address: string; + City: string; + State: string; + ZipCode: string; + Beds: string; + Baths: string; + HouseSize: number; + LotSize: string; + Price: number; + Coordinates: string; + Features: string; + YearBuilt: string; + Type: string; + Status: string; + Image: string; + Agent: { + Name: string; + Phone: string; + Picture: string; + }; +}; diff --git a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js index 1e176f320036..2047bd8c506b 100644 --- a/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js +++ b/apps/demos/Demos/Common/PopupAndNotificationsOverview/ReactJs/App.js @@ -35,7 +35,7 @@ export default function App() { updatedCurrentHouse.Favorite ? 'success' : 'error', 2000, ); - }, [houses, currentHouse, setHouses]); + }, [houses, currentHouse]); const renderPopup = useCallback( () => (
@@ -66,23 +66,20 @@ export default function App() { ), [currentHouse, changeFavoriteState], ); - const showHouse = useCallback( - (house) => { - setCurrentHouse(house); - setPopupVisible(true); - }, - [setCurrentHouse, setPopupVisible], - ); + const showHouse = useCallback((house) => { + setCurrentHouse(house); + setPopupVisible(true); + }, []); const handlePopupHidden = useCallback(() => { setPopupVisible(false); - }, [setPopupVisible]); + }, []); return (
- {houses.map((h) => ( + {houses.map((house) => ( ))} (new Date(1981, 3, 27)); const now = new Date(); const firstWorkDay2017 = new Date(2017, 0, 3); const min = new Date(1900, 0, 1); const dateClear = new Date(2015, 11, 1, 6); - const disabledDates = service.getFederalHolidays(); + const disabledDates = federalHolidays; const diffInDay = useMemo( - () => + (): string => `${Math.floor( Math.abs((new Date().getTime() - value.getTime()) / (24 * 60 * 60 * 1000)), )} days`, [value], ); - const onValueChanged = useCallback((e: DateBoxTypes.ValueChangedEvent) => { + const onValueChanged = useCallback((e: DateBoxTypes.ValueChangedEvent): void => { setValue(e.value); }, []); diff --git a/apps/demos/Demos/DateBox/Overview/React/data.ts b/apps/demos/Demos/DateBox/Overview/React/data.ts index dcc94a4d6bd3..2412382450c3 100644 --- a/apps/demos/Demos/DateBox/Overview/React/data.ts +++ b/apps/demos/Demos/DateBox/Overview/React/data.ts @@ -1,4 +1,4 @@ -const federalHolidays = [ +export const federalHolidays: Date[] = [ new Date(2017, 0, 1), new Date(2017, 0, 2), new Date(2017, 0, 16), @@ -11,9 +11,3 @@ const federalHolidays = [ new Date(2017, 10, 23), new Date(2017, 11, 25), ]; - -export default { - getFederalHolidays() { - return federalHolidays; - }, -}; diff --git a/apps/demos/Demos/DateBox/Overview/ReactJs/App.js b/apps/demos/Demos/DateBox/Overview/ReactJs/App.js index 43fcb1dea6df..4a8861f2e833 100644 --- a/apps/demos/Demos/DateBox/Overview/ReactJs/App.js +++ b/apps/demos/Demos/DateBox/Overview/ReactJs/App.js @@ -1,6 +1,6 @@ import React, { useCallback, useMemo, useState } from 'react'; import DateBox from 'devextreme-react/date-box'; -import service from './data.js'; +import { federalHolidays } from './data.js'; const dateTimeLabel = { 'aria-label': 'Date Time' }; const dateLabel = { 'aria-label': 'Date' }; @@ -16,7 +16,7 @@ function App() { const firstWorkDay2017 = new Date(2017, 0, 3); const min = new Date(1900, 0, 1); const dateClear = new Date(2015, 11, 1, 6); - const disabledDates = service.getFederalHolidays(); + const disabledDates = federalHolidays; const diffInDay = useMemo( () => `${Math.floor( diff --git a/apps/demos/Demos/DateBox/Overview/ReactJs/data.js b/apps/demos/Demos/DateBox/Overview/ReactJs/data.js index 4df8804adab1..484d2efe2142 100644 --- a/apps/demos/Demos/DateBox/Overview/ReactJs/data.js +++ b/apps/demos/Demos/DateBox/Overview/ReactJs/data.js @@ -1,4 +1,4 @@ -const federalHolidays = [ +export const federalHolidays = [ new Date(2017, 0, 1), new Date(2017, 0, 2), new Date(2017, 0, 16), @@ -11,8 +11,3 @@ const federalHolidays = [ new Date(2017, 10, 23), new Date(2017, 11, 25), ]; -export default { - getFederalHolidays() { - return federalHolidays; - }, -}; diff --git a/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx b/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx index 6a6186dffc63..4e8e838f875d 100644 --- a/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx +++ b/apps/demos/Demos/DateRangeBox/Formatting/React/App.tsx @@ -1,12 +1,13 @@ import React from 'react'; import DateRangeBox from 'devextreme-react/date-range-box'; +import type { DateRangeBoxTypes } from 'devextreme-react/date-range-box'; const msInDay = 1000 * 60 * 60 * 24; const now = new Date(); const startDate = new Date(now.getTime() - msInDay * 3); const endDate = new Date(now.getTime() + msInDay * 3); -const commonSettings = { +const commonSettings: DateRangeBoxTypes.Properties = { showClearButton: true, useMaskBehavior: true, openOnFieldClick: false, diff --git a/apps/demos/Demos/DateRangeBox/Overview/React/App.tsx b/apps/demos/Demos/DateRangeBox/Overview/React/App.tsx index 05fae88a1776..b3340acc6632 100644 --- a/apps/demos/Demos/DateRangeBox/Overview/React/App.tsx +++ b/apps/demos/Demos/DateRangeBox/Overview/React/App.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useState } from 'react'; import DateRangeBox from 'devextreme-react/date-range-box'; +import type { DateRangeBoxTypes } from 'devextreme-react/date-range-box'; const msInDay = 1000 * 60 * 60 * 24; const now = new Date(); @@ -11,17 +12,17 @@ const initialValue: [Date, Date] = [ const min = new Date(now.setDate(1)); const max = new Date(now.setDate(lastDay)); -function convertRangeToDays([startDate, endDate]: [Date, Date]) { +function convertRangeToDays([startDate, endDate]: [Date, Date]): number { const diffInDay = Math.floor(Math.abs((endDate.valueOf() - startDate.valueOf()) / msInDay)); return diffInDay + 1; } export default function App() { - const [selectedDays, setSelectedDays] = useState(convertRangeToDays(initialValue)); + const [selectedDays, setSelectedDays] = useState(convertRangeToDays(initialValue)); const onCurrentValueChange = useCallback( - ({ value: [startDate, endDate] }) => { + ({ value: [startDate, endDate] }: DateRangeBoxTypes.ValueChangedEvent): void => { let daysCount = 0; if (startDate && endDate) { @@ -30,7 +31,7 @@ export default function App() { setSelectedDays(daysCount); }, - [setSelectedDays], + [], ); return ( diff --git a/apps/demos/Demos/DateRangeBox/Overview/ReactJs/App.js b/apps/demos/Demos/DateRangeBox/Overview/ReactJs/App.js index d7c77795b41a..3cdbd491c234 100644 --- a/apps/demos/Demos/DateRangeBox/Overview/ReactJs/App.js +++ b/apps/demos/Demos/DateRangeBox/Overview/ReactJs/App.js @@ -13,16 +13,13 @@ function convertRangeToDays([startDate, endDate]) { } export default function App() { const [selectedDays, setSelectedDays] = useState(convertRangeToDays(initialValue)); - const onCurrentValueChange = useCallback( - ({ value: [startDate, endDate] }) => { - let daysCount = 0; - if (startDate && endDate) { - daysCount = convertRangeToDays([startDate, endDate]); - } - setSelectedDays(daysCount); - }, - [setSelectedDays], - ); + const onCurrentValueChange = useCallback(({ value: [startDate, endDate] }) => { + let daysCount = 0; + if (startDate && endDate) { + daysCount = convertRangeToDays([startDate, endDate]); + } + setSelectedDays(daysCount); + }, []); return (
diff --git a/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx b/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx index 59137e33ae82..21ecddeba9a9 100644 --- a/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx +++ b/apps/demos/Demos/DropDownBox/MultipleSelection/React/App.tsx @@ -1,20 +1,22 @@ import React, { useCallback, useRef, useState } from 'react'; -import DropDownBox, { type DropDownBoxTypes } from 'devextreme-react/drop-down-box'; -import TreeView, { TreeViewRef } from 'devextreme-react/tree-view'; +import DropDownBox from 'devextreme-react/drop-down-box'; +import type { DropDownBoxTypes } from 'devextreme-react/drop-down-box'; +import TreeView from 'devextreme-react/tree-view'; +import type { TreeViewRef } from 'devextreme-react/tree-view'; import DataGrid, { Selection, Paging, FilterRow, Scrolling, - type DataGridTypes, } from 'devextreme-react/data-grid'; +import type { DataGridTypes } from 'devextreme-react/data-grid'; import { CustomStore } from 'devextreme-react/common/data'; import 'whatwg-fetch'; const gridColumns = ['CompanyName', 'City', 'Phone']; const ownerLabel = { 'aria-label': 'Owner' }; -const makeAsyncDataSource = (jsonFile: string) => +const makeAsyncDataSource = (jsonFile: string): CustomStore => new CustomStore({ loadMode: 'raw', key: 'ID', @@ -27,12 +29,12 @@ const treeDataSource = makeAsyncDataSource('treeProducts.json'); const gridDataSource = makeAsyncDataSource('customers.json'); function App() { - const [treeBoxValue, setTreeBoxValue] = useState(['1_1']); - const [gridBoxValue, setGridBoxValue] = useState([3]); - const treeViewRef = useRef(); + const [treeBoxValue, setTreeBoxValue] = useState(['1_1']); + const [gridBoxValue, setGridBoxValue] = useState([3]); + const treeViewRef = useRef(null); const syncTreeViewSelection = useCallback( - (e: DropDownBoxTypes.ValueChangedEvent | any) => { + (e): void => { const treeView = (e.component.selectItem && e.component) || (treeViewRef.current?.instance()); @@ -41,7 +43,7 @@ function App() { treeView.unselectAll(); } else { const values = e.value || treeBoxValue; - values?.forEach((value) => { + values?.forEach((value): void => { treeView.selectItem(value); }); } @@ -54,18 +56,18 @@ function App() { [treeBoxValue], ); - const syncDataGridSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent) => { + const syncDataGridSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent): void => { setGridBoxValue(e.value || []); }, []); const treeViewItemSelectionChanged = useCallback( - (e: { component: { getSelectedNodeKeys: () => any } }) => { + (e: { component: { getSelectedNodeKeys: () => any } }): void => { setTreeBoxValue(e.component.getSelectedNodeKeys()); }, [], ); - const dataGridOnSelectionChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => { + const dataGridOnSelectionChanged = useCallback((e: DataGridTypes.SelectionChangedEvent): void => { setGridBoxValue((e.selectedRowKeys.length && e.selectedRowKeys) || []); }, []); diff --git a/apps/demos/Demos/DropDownBox/MultipleSelection/ReactJs/App.js b/apps/demos/Demos/DropDownBox/MultipleSelection/ReactJs/App.js index 27927c8c928d..f20f08ecef81 100644 --- a/apps/demos/Demos/DropDownBox/MultipleSelection/ReactJs/App.js +++ b/apps/demos/Demos/DropDownBox/MultipleSelection/ReactJs/App.js @@ -22,7 +22,7 @@ const gridDataSource = makeAsyncDataSource('customers.json'); function App() { const [treeBoxValue, setTreeBoxValue] = useState(['1_1']); const [gridBoxValue, setGridBoxValue] = useState([3]); - const treeViewRef = useRef(); + const treeViewRef = useRef(null); const syncTreeViewSelection = useCallback( (e) => { const treeView = (e.component.selectItem && e.component) || treeViewRef.current?.instance(); diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/React/App.tsx b/apps/demos/Demos/DropDownBox/SingleSelection/React/App.tsx index 191ad20da1b2..c13227354eb0 100644 --- a/apps/demos/Demos/DropDownBox/SingleSelection/React/App.tsx +++ b/apps/demos/Demos/DropDownBox/SingleSelection/React/App.tsx @@ -1,52 +1,57 @@ import React, { useCallback, useRef, useState } from 'react'; -import DropDownBox, { type DropDownBoxTypes } from 'devextreme-react/drop-down-box'; -import TreeView, { type TreeViewTypes } from 'devextreme-react/tree-view'; +import DropDownBox from 'devextreme-react/drop-down-box'; +import type { DropDownBoxTypes } from 'devextreme-react/drop-down-box'; +import TreeView from 'devextreme-react/tree-view'; +import type { TreeViewTypes, TreeViewRef } from 'devextreme-react/tree-view'; import DataGrid, { - Selection, Paging, FilterRow, Scrolling, + Selection, + Paging, + FilterRow, + Scrolling, } from 'devextreme-react/data-grid'; import { CustomStore } from 'devextreme-react/common/data'; import 'whatwg-fetch'; -const gridColumns = ['CompanyName', 'City', 'Phone']; +const gridColumns: string[] = ['CompanyName', 'City', 'Phone']; const ownerLabel = { 'aria-label': 'Owner' }; -const makeAsyncDataSource = (jsonFile: string) => +const makeAsyncDataSource = (jsonFile: string): CustomStore => new CustomStore({ loadMode: 'raw', key: 'ID', load() { - return fetch(`../../../../data/${jsonFile}`).then((response) => response.json()); + return fetch(`../../../../data/${jsonFile}`).then((response: Response) => response.json()); }, }); const treeDataSource = makeAsyncDataSource('treeProducts.json'); const gridDataSource = makeAsyncDataSource('customers.json'); -const gridBoxDisplayExpr = (item: { CompanyName: any; Phone: any }) => +const gridBoxDisplayExpr = (item: { CompanyName: any; Phone: any }): string => item && `${item.CompanyName} <${item.Phone}>`; function App() { - const treeViewRef = useRef(null); - const [treeBoxValue, setTreeBoxValue] = useState('1_1'); - const [gridBoxValue, setGridBoxValue] = useState([3]); - const [isGridBoxOpened, setIsGridBoxOpened] = useState(false); - const [isTreeBoxOpened, setIsTreeBoxOpened] = useState(false); + const treeViewRef = useRef(null); + const [treeBoxValue, setTreeBoxValue] = useState('1_1'); + const [gridBoxValue, setGridBoxValue] = useState([3]); + const [isGridBoxOpened, setIsGridBoxOpened] = useState(false); + const [isTreeBoxOpened, setIsTreeBoxOpened] = useState(false); const treeViewItemSelectionChanged = useCallback( - (e: { component: { getSelectedNodeKeys: () => any } }) => { + (e: { component: { getSelectedNodeKeys: () => any } }): void => { const selectedKeys = e.component.getSelectedNodeKeys(); setTreeBoxValue(selectedKeys.length > 0 ? selectedKeys[0] : null); }, [], ); - const dataGridOnSelectionChanged = useCallback((e: { selectedRowKeys: any }) => { + const dataGridOnSelectionChanged = useCallback((e: { selectedRowKeys: any }): void => { setGridBoxValue(e.selectedRowKeys); setIsGridBoxOpened(false); }, []); const treeViewOnContentReady = useCallback( - (e: TreeViewTypes.ContentReadyEvent) => { + (e: TreeViewTypes.ContentReadyEvent): void => { e.component.selectItem(treeBoxValue); }, [treeBoxValue], @@ -93,7 +98,7 @@ function App() { [gridBoxValue, dataGridOnSelectionChanged], ); - const syncTreeViewSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent) => { + const syncTreeViewSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent): void => { setTreeBoxValue(e.value); if (!treeViewRef.current) return; @@ -106,17 +111,17 @@ function App() { setIsTreeBoxOpened(false); }, []); - const syncDataGridSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent) => { + const syncDataGridSelection = useCallback((e: DropDownBoxTypes.ValueChangedEvent): void => { setGridBoxValue(e.value); }, []); - const onGridBoxOpened = useCallback((e: DropDownBoxTypes.OptionChangedEvent) => { + const onGridBoxOpened = useCallback((e: DropDownBoxTypes.OptionChangedEvent): void => { if (e.name === 'opened') { setIsGridBoxOpened(e.value); } }, []); - const onTreeBoxOpened = useCallback((e: DropDownBoxTypes.OptionChangedEvent) => { + const onTreeBoxOpened = useCallback((e: DropDownBoxTypes.OptionChangedEvent): void => { if (e.name === 'opened') { setIsTreeBoxOpened(e.value); } diff --git a/apps/demos/Demos/DropDownButton/Overview/React/App.tsx b/apps/demos/Demos/DropDownButton/Overview/React/App.tsx index 809ba74a0707..6f3e1cf92f15 100644 --- a/apps/demos/Demos/DropDownButton/Overview/React/App.tsx +++ b/apps/demos/Demos/DropDownButton/Overview/React/App.tsx @@ -1,52 +1,60 @@ import React, { useCallback, useMemo, useState } from 'react'; -import DropDownButton, { type DropDownButtonTypes } from 'devextreme-react/drop-down-button'; +import DropDownButton from 'devextreme-react/drop-down-button'; +import type { DropDownButtonTypes, DropDownButtonRef } from 'devextreme-react/drop-down-button'; import Toolbar from 'devextreme-react/toolbar'; +import type { ToolbarTypes } from 'devextreme-react/toolbar'; import { Template } from 'devextreme-react/core/template'; -import { type ButtonTypes } from 'devextreme-react/button'; +import type { ButtonTypes } from 'devextreme-react/button'; import notify from 'devextreme/ui/notify'; -import service from './data.ts'; +import { + colors, + downloads, + alignments, + profileSettings, + fontSizes, + lineHeights, +} from './data.ts'; +import type { TextAlign } from './types.ts'; import ColorIcon from './ColorIcon.tsx'; import DropDownButtonTemplate from './DropDownButtonTemplate.tsx'; import 'whatwg-fetch'; -type TextAlign = 'center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start'; - const buttonDropDownOptions = { width: 230 }; -const data = service.getData(); - const itemTemplateRender: React.FC<{ size: number; text: string }> = (item) => (
{item.text}
); -const App: React.FC = () => { +const App = () => { const [alignment, setAlignment] = useState('left'); - const [color, setColor] = useState(null); - const [fontSize, setFontSize] = useState(14); - const [lineHeight, setLineHeight] = useState(1.35); - const [colorPicker, setColorPicker] = useState(null); + const [color, setColor] = useState(null); + const [fontSize, setFontSize] = useState(14); + const [lineHeight, setLineHeight] = useState(1.35); + + type ColorPicker = ReturnType; + const [colorPicker, setColorPicker] = useState(undefined); - const onButtonClick = useCallback((e: ButtonTypes.ClickEvent) => { + const onButtonClick = useCallback((e: ButtonTypes.ClickEvent): void => { notify(`Go to ${e.element.querySelector('.button-title').textContent}'s profile`, 'success', 600); }, []); - const onItemClick = useCallback((e: DropDownButtonTypes.ItemClickEvent) => { + const onItemClick = useCallback((e: DropDownButtonTypes.ItemClickEvent): void => { notify(e.itemData.name || e.itemData, 'success', 600); }, []); - const onColorClick = useCallback((selectedColor) => { + const onColorClick = useCallback((selectedColor: string): void => { setColor(selectedColor); - const squareIcon = colorPicker.element().getElementsByClassName('dx-icon-square')[0]; + const squareIcon = colorPicker?.element().getElementsByClassName('dx-icon-square')[0] as HTMLElement; squareIcon.style.color = selectedColor; - colorPicker.close(); + colorPicker?.close(); }, [colorPicker]); - const onInitialized = useCallback((e: DropDownButtonTypes.InitializedEvent) => { + const onInitialized = useCallback((e: DropDownButtonTypes.InitializedEvent): void => { setColorPicker(e.component); - }, [setColorPicker]); + }, []); - const toolbarItems = useMemo(() => [ + const toolbarItems = useMemo((): ToolbarTypes.Item[] => [ { location: 'before', widget: 'dxDropDownButton', @@ -57,17 +65,17 @@ const App: React.FC = () => { width: 125, stylingMode: 'text', useSelectMode: true, - onSelectionChanged: (e): void => { + onSelectionChanged: (e: DropDownButtonTypes.SelectionChangedEvent): void => { setAlignment(e.item.name.toLowerCase()); }, - items: data.alignments, + items: alignments, }, }, { location: 'before', widget: 'dxDropDownButton', options: { - items: data.colors, + items: colors, icon: 'square', stylingMode: 'text', dropDownOptions: { width: 'auto' }, @@ -83,7 +91,7 @@ const App: React.FC = () => { displayExpr: 'text', keyExpr: 'size', useSelectMode: true, - items: data.fontSizes, + items: fontSizes, selectedItemKey: 14, onSelectionChanged: (e: DropDownButtonTypes.SelectionChangedEvent): void => { setFontSize(e.item.size); @@ -100,14 +108,14 @@ const App: React.FC = () => { displayExpr: 'text', keyExpr: 'lineHeight', useSelectMode: true, - items: data.lineHeights, + items: lineHeights, selectedItemKey: 1.35, onSelectionChanged: (e: DropDownButtonTypes.SelectionChangedEvent): void => { setLineHeight(e.item.lineHeight); }, }, }, - ], [setAlignment, setFontSize, setLineHeight, onInitialized]); + ], [onInitialized]); return (
@@ -122,7 +130,7 @@ const App: React.FC = () => { text="Download Trial" icon="save" dropDownOptions={buttonDropDownOptions} - items={data.downloads} + items={downloads} onItemClick={onItemClick} />
@@ -137,7 +145,7 @@ const App: React.FC = () => { id="custom-template" splitButton={true} useSelectMode={false} - items={data.profileSettings} + items={profileSettings} displayExpr="name" keyExpr="id" onButtonClick={onButtonClick} @@ -155,7 +163,7 @@ const App: React.FC = () => {