From 967ec83b261a47da3b79c868fd85d54ce45366d1 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad <91639107+GoodDayForSurf@users.noreply.github.com> Date: Thu, 9 Nov 2023 13:01:44 +0400 Subject: [PATCH 1/3] Convert react DialogsAndNotifications Demos to TS (#2910) * Convert react DialogsAndNotifications Demos to TS * popup overview. rework from class component * DialogsAndNotificationsOverview fix * Fix generateJS --------- Co-authored-by: alexander.polosatov Co-authored-by: ivanblinov2k17 --- .../React/{App.js => App.tsx} | 4 +- .../React/House.js | 78 -- .../React/House.tsx | 93 +++ .../React/{data.js => data.ts} | 0 .../React/index.html | 2 +- .../React/index.tsx} | 2 +- .../ReactJs/App.js | 99 +++ .../ReactJs/House.js | 72 ++ .../ReactJs/data.js | 227 ++++++ .../ReactJs/description.md | 1 + .../ReactJs/index.html | 44 ++ .../ReactJs/index.js | 5 + .../ReactJs/styles.css | 137 ++++ .../Overview/React/{App.js => App.tsx} | 0 .../LoadIndicator/Overview/React/index.html | 2 +- .../Overview/React/index.tsx} | 2 +- .../LoadIndicator/Overview/ReactJs/App.js | 59 ++ .../LoadIndicator/Overview/ReactJs/index.html | 44 ++ .../LoadIndicator/Overview/ReactJs/index.js | 5 + .../LoadIndicator/Overview/ReactJs/styles.css | 37 + .../Overview/React/{App.js => App.tsx} | 34 +- .../Overview/React/{data.js => data.ts} | 0 .../Demos/LoadPanel/Overview/React/index.html | 2 +- .../Overview/React/index.tsx} | 2 +- .../Demos/LoadPanel/Overview/ReactJs/App.js | 124 ++++ .../Demos/LoadPanel/Overview/ReactJs/data.js | 13 + .../LoadPanel/Overview/ReactJs/index.html | 44 ++ .../Demos/LoadPanel/Overview/ReactJs/index.js | 5 + .../LoadPanel/Overview/ReactJs/styles.css | 43 ++ .../Overview/React/{App.js => App.tsx} | 4 +- .../Demos/Popover/Overview/React/index.html | 2 +- .../Overview/React/index.tsx} | 2 +- JSDemos/Demos/Popover/Overview/ReactJs/App.js | 102 +++ .../Demos/Popover/Overview/ReactJs/index.html | 44 ++ .../Demos/Popover/Overview/ReactJs/index.js | 5 + .../Demos/Popover/Overview/ReactJs/styles.css | 14 + .../Popup/Overview/React/{App.js => App.tsx} | 9 +- .../Popup/Overview/React/EmployeeItem.js | 25 - .../Popup/Overview/React/EmployeeItem.tsx | 25 + .../Popup/Overview/React/{data.js => data.ts} | 0 JSDemos/Demos/Popup/Overview/React/index.html | 2 +- JSDemos/Demos/Popup/Overview/React/index.js | 9 - JSDemos/Demos/Popup/Overview/React/index.tsx | 9 + JSDemos/Demos/Popup/Overview/ReactJs/App.js | 149 ++++ .../Popup/Overview/ReactJs/EmployeeItem.js | 27 + JSDemos/Demos/Popup/Overview/ReactJs/data.js | 54 ++ .../Popup/Overview/ReactJs/description.md | 44 ++ .../Demos/Popup/Overview/ReactJs/index.html | 44 ++ JSDemos/Demos/Popup/Overview/ReactJs/index.js | 5 + .../Demos/Popup/Overview/ReactJs/styles.css | 32 + .../Popup/Scrolling/React/{App.js => App.tsx} | 0 .../Demos/Popup/Scrolling/React/index.html | 2 +- JSDemos/Demos/Popup/Scrolling/React/index.js | 9 - JSDemos/Demos/Popup/Scrolling/React/index.tsx | 9 + JSDemos/Demos/Popup/Scrolling/ReactJs/App.js | 142 ++++ .../Demos/Popup/Scrolling/ReactJs/index.html | 44 ++ .../Demos/Popup/Scrolling/ReactJs/index.js | 5 + .../Demos/Popup/Scrolling/ReactJs/styles.css | 40 ++ .../Overview/React/{App.js => App.tsx} | 4 +- .../ProgressBar/Overview/React/index.html | 2 +- .../Demos/ProgressBar/Overview/React/index.js | 9 - .../ProgressBar/Overview/React/index.tsx | 9 + .../Demos/ProgressBar/Overview/ReactJs/App.js | 61 ++ .../ProgressBar/Overview/ReactJs/index.html | 44 ++ .../ProgressBar/Overview/ReactJs/index.js | 5 + .../ProgressBar/Overview/ReactJs/styles.css | 17 + .../Toast/Overview/React/{App.js => App.tsx} | 10 +- .../React/{ProductItem.js => ProductItem.tsx} | 7 +- .../Toast/Overview/React/{data.js => data.ts} | 0 JSDemos/Demos/Toast/Overview/React/index.html | 2 +- JSDemos/Demos/Toast/Overview/React/index.js | 9 - JSDemos/Demos/Toast/Overview/React/index.tsx | 9 + JSDemos/Demos/Toast/Overview/ReactJs/App.js | 53 ++ .../Toast/Overview/ReactJs/ProductItem.js | 24 + JSDemos/Demos/Toast/Overview/ReactJs/data.js | 42 ++ .../Demos/Toast/Overview/ReactJs/index.html | 44 ++ JSDemos/Demos/Toast/Overview/ReactJs/index.js | 5 + .../Demos/Toast/Overview/ReactJs/styles.css | 29 + .../Toast/Stack/React/{App.js => App.tsx} | 16 +- .../Toast/Stack/React/{data.js => data.ts} | 0 JSDemos/Demos/Toast/Stack/React/index.html | 2 +- JSDemos/Demos/Toast/Stack/React/index.js | 9 - JSDemos/Demos/Toast/Stack/React/index.tsx | 9 + JSDemos/Demos/Toast/Stack/ReactJs/App.js | 155 ++++ JSDemos/Demos/Toast/Stack/ReactJs/data.js | 29 + JSDemos/Demos/Toast/Stack/ReactJs/index.html | 44 ++ JSDemos/Demos/Toast/Stack/ReactJs/index.js | 5 + JSDemos/Demos/Toast/Stack/ReactJs/styles.css | 17 + .../Overview/React/{App.js => App.tsx} | 4 +- .../Demos/Tooltip/Overview/React/index.html | 2 +- JSDemos/Demos/Tooltip/Overview/React/index.js | 9 - .../Demos/Tooltip/Overview/React/index.tsx | 9 + JSDemos/Demos/Tooltip/Overview/ReactJs/App.js | 96 +++ .../Demos/Tooltip/Overview/ReactJs/index.html | 44 ++ .../Demos/Tooltip/Overview/ReactJs/index.js | 5 + .../Demos/Tooltip/Overview/ReactJs/styles.css | 12 + typestat.json | 674 +----------------- 97 files changed, 2681 insertions(+), 883 deletions(-) rename JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/{App.js => App.tsx} (97%) delete mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.js create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.tsx rename JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/{data.js => data.ts} (100%) rename JSDemos/Demos/{LoadPanel/Overview/React/index.js => Common/DialogsAndNotificationsOverview/React/index.tsx} (81%) create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/App.js create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/House.js create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/data.js create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/description.md create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.html create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.js create mode 100644 JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/styles.css rename JSDemos/Demos/LoadIndicator/Overview/React/{App.js => App.tsx} (100%) rename JSDemos/Demos/{Popover/Overview/React/index.js => LoadIndicator/Overview/React/index.tsx} (81%) create mode 100644 JSDemos/Demos/LoadIndicator/Overview/ReactJs/App.js create mode 100644 JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.html create mode 100644 JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.js create mode 100644 JSDemos/Demos/LoadIndicator/Overview/ReactJs/styles.css rename JSDemos/Demos/LoadPanel/Overview/React/{App.js => App.tsx} (77%) rename JSDemos/Demos/LoadPanel/Overview/React/{data.js => data.ts} (100%) rename JSDemos/Demos/{Common/DialogsAndNotificationsOverview/React/index.js => LoadPanel/Overview/React/index.tsx} (81%) create mode 100644 JSDemos/Demos/LoadPanel/Overview/ReactJs/App.js create mode 100644 JSDemos/Demos/LoadPanel/Overview/ReactJs/data.js create mode 100644 JSDemos/Demos/LoadPanel/Overview/ReactJs/index.html create mode 100644 JSDemos/Demos/LoadPanel/Overview/ReactJs/index.js create mode 100644 JSDemos/Demos/LoadPanel/Overview/ReactJs/styles.css rename JSDemos/Demos/Popover/Overview/React/{App.js => App.tsx} (96%) rename JSDemos/Demos/{LoadIndicator/Overview/React/index.js => Popover/Overview/React/index.tsx} (81%) create mode 100644 JSDemos/Demos/Popover/Overview/ReactJs/App.js create mode 100644 JSDemos/Demos/Popover/Overview/ReactJs/index.html create mode 100644 JSDemos/Demos/Popover/Overview/ReactJs/index.js create mode 100644 JSDemos/Demos/Popover/Overview/ReactJs/styles.css rename JSDemos/Demos/Popup/Overview/React/{App.js => App.tsx} (90%) delete mode 100644 JSDemos/Demos/Popup/Overview/React/EmployeeItem.js create mode 100644 JSDemos/Demos/Popup/Overview/React/EmployeeItem.tsx rename JSDemos/Demos/Popup/Overview/React/{data.js => data.ts} (100%) delete mode 100644 JSDemos/Demos/Popup/Overview/React/index.js create mode 100644 JSDemos/Demos/Popup/Overview/React/index.tsx create mode 100644 JSDemos/Demos/Popup/Overview/ReactJs/App.js create mode 100644 JSDemos/Demos/Popup/Overview/ReactJs/EmployeeItem.js create mode 100644 JSDemos/Demos/Popup/Overview/ReactJs/data.js create mode 100644 JSDemos/Demos/Popup/Overview/ReactJs/description.md create mode 100644 JSDemos/Demos/Popup/Overview/ReactJs/index.html create mode 100644 JSDemos/Demos/Popup/Overview/ReactJs/index.js create mode 100644 JSDemos/Demos/Popup/Overview/ReactJs/styles.css rename JSDemos/Demos/Popup/Scrolling/React/{App.js => App.tsx} (100%) delete mode 100644 JSDemos/Demos/Popup/Scrolling/React/index.js create mode 100644 JSDemos/Demos/Popup/Scrolling/React/index.tsx create mode 100644 JSDemos/Demos/Popup/Scrolling/ReactJs/App.js create mode 100644 JSDemos/Demos/Popup/Scrolling/ReactJs/index.html create mode 100644 JSDemos/Demos/Popup/Scrolling/ReactJs/index.js create mode 100644 JSDemos/Demos/Popup/Scrolling/ReactJs/styles.css rename JSDemos/Demos/ProgressBar/Overview/React/{App.js => App.tsx} (94%) delete mode 100644 JSDemos/Demos/ProgressBar/Overview/React/index.js create mode 100644 JSDemos/Demos/ProgressBar/Overview/React/index.tsx create mode 100644 JSDemos/Demos/ProgressBar/Overview/ReactJs/App.js create mode 100644 JSDemos/Demos/ProgressBar/Overview/ReactJs/index.html create mode 100644 JSDemos/Demos/ProgressBar/Overview/ReactJs/index.js create mode 100644 JSDemos/Demos/ProgressBar/Overview/ReactJs/styles.css rename JSDemos/Demos/Toast/Overview/React/{App.js => App.tsx} (79%) rename JSDemos/Demos/Toast/Overview/React/{ProductItem.js => ProductItem.tsx} (62%) rename JSDemos/Demos/Toast/Overview/React/{data.js => data.ts} (100%) delete mode 100644 JSDemos/Demos/Toast/Overview/React/index.js create mode 100644 JSDemos/Demos/Toast/Overview/React/index.tsx create mode 100644 JSDemos/Demos/Toast/Overview/ReactJs/App.js create mode 100644 JSDemos/Demos/Toast/Overview/ReactJs/ProductItem.js create mode 100644 JSDemos/Demos/Toast/Overview/ReactJs/data.js create mode 100644 JSDemos/Demos/Toast/Overview/ReactJs/index.html create mode 100644 JSDemos/Demos/Toast/Overview/ReactJs/index.js create mode 100644 JSDemos/Demos/Toast/Overview/ReactJs/styles.css rename JSDemos/Demos/Toast/Stack/React/{App.js => App.tsx} (91%) rename JSDemos/Demos/Toast/Stack/React/{data.js => data.ts} (100%) delete mode 100644 JSDemos/Demos/Toast/Stack/React/index.js create mode 100644 JSDemos/Demos/Toast/Stack/React/index.tsx create mode 100644 JSDemos/Demos/Toast/Stack/ReactJs/App.js create mode 100644 JSDemos/Demos/Toast/Stack/ReactJs/data.js create mode 100644 JSDemos/Demos/Toast/Stack/ReactJs/index.html create mode 100644 JSDemos/Demos/Toast/Stack/ReactJs/index.js create mode 100644 JSDemos/Demos/Toast/Stack/ReactJs/styles.css rename JSDemos/Demos/Tooltip/Overview/React/{App.js => App.tsx} (93%) delete mode 100644 JSDemos/Demos/Tooltip/Overview/React/index.js create mode 100644 JSDemos/Demos/Tooltip/Overview/React/index.tsx create mode 100644 JSDemos/Demos/Tooltip/Overview/ReactJs/App.js create mode 100644 JSDemos/Demos/Tooltip/Overview/ReactJs/index.html create mode 100644 JSDemos/Demos/Tooltip/Overview/ReactJs/index.js create mode 100644 JSDemos/Demos/Tooltip/Overview/ReactJs/styles.css diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/App.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/App.tsx similarity index 97% rename from JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/App.js rename to JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/App.tsx index 006716e29f2..d3ea4cdbd35 100644 --- a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/App.js +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/App.tsx @@ -2,8 +2,8 @@ import React from 'react'; import notify from 'devextreme/ui/notify'; import Button from 'devextreme-react/button'; import Popup from 'devextreme-react/popup'; -import { housesSource } from './data.js'; -import House from './House.js'; +import { housesSource } from './data.ts'; +import { House } from './House.tsx'; const ADD_TO_FAVORITES = 'Add to Favorites'; const REMOVE_FROM_FAVORITES = 'Remove from Favorites'; diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.js deleted file mode 100644 index b112a934f2d..00000000000 --- a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; - -import Popover from 'devextreme-react/popover'; - -const formatCurrency = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD', - minimumFractionDigits: 0, - maximumFractionDigits: 2, -}).format; - -const position = { - offset: '0, 2', - at: 'bottom', - my: 'top', - collision: 'fit flip', -}; - -class House extends React.PureComponent { - constructor(props) { - super(props); - - this.show = this.show.bind(this); - this.renderAgentDetails = this.renderAgentDetails.bind(this); - } - - render() { - const { house } = this.props; - return ( -
-
- - {house.Address} - -
-
-
{house.Address}
-
{formatCurrency(house.Price)}
-
-
- Listing agent - Listing agent -
-
-
-
- -
-
- ); - } - - renderAgentDetails() { - const agent = this.props.house.Agent; - return ( -
- {agent.Name} -
-
{agent.Name}
-
Tel: {agent.Phone}
-
-
- ); - } - - show() { - this.props.show(this.props.house); - } -} - -export default House; diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.tsx b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.tsx new file mode 100644 index 00000000000..d6df5ad57b9 --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/House.tsx @@ -0,0 +1,93 @@ +import React from 'react'; + +import Popover, { IPositionProps } from 'devextreme-react/popover'; + +const formatCurrency = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: 0, + maximumFractionDigits: 2, +}).format; + +const position: IPositionProps = { + offset: '0, 2', + at: 'bottom', + my: 'top', + collision: 'fit flip', +}; + +interface HouseProps { + house: { + 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; + Image: string; + Agent: { + Name: string; + Picture: string; + Phone: string; + } + }; + show: any; + key: string; +} + +export function House(props: HouseProps) { + const renderAgentDetails = React.useCallback(() => { + const agent = props.house.Agent; + return ( +
+ {agent.Name} +
+
{agent.Name}
+
Tel: {agent.Phone}
+
+
+ ); + }, [props.house.Agent]); + + const show = React.useCallback(() => { + props.show(props.house); + }, [props]); + + return ( +
+
+ + {props.house.Address} + +
+
+
{props.house.Address}
+
{formatCurrency(props.house.Price)}
+
+
+ Listing agent + Listing agent +
+
+
+
+ +
+
+ ); +} + diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/data.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/data.ts similarity index 100% rename from JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/data.js rename to JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/data.ts diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.html b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.html index fb33a47d3fb..7aef756bcb4 100644 --- a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.html +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.html @@ -12,7 +12,7 @@ diff --git a/JSDemos/Demos/LoadPanel/Overview/React/index.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.tsx similarity index 81% rename from JSDemos/Demos/LoadPanel/Overview/React/index.js rename to JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/LoadPanel/Overview/React/index.js +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/App.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/App.js new file mode 100644 index 00000000000..f632466684e --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/App.js @@ -0,0 +1,99 @@ +import React from 'react'; +import notify from 'devextreme/ui/notify'; +import Button from 'devextreme-react/button'; +import Popup from 'devextreme-react/popup'; +import { housesSource } from './data.js'; +import { House } from './House.js'; + +const ADD_TO_FAVORITES = 'Add to Favorites'; +const REMOVE_FROM_FAVORITES = 'Remove from Favorites'; +const formatCurrency = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: 0, + maximumFractionDigits: 2, +}).format; +const favButtonAttrs = { + class: 'favorites', +}; +export default function App() { + const [currentHouse, setCurrentHouse] = React.useState(housesSource[0]); + const [popupVisible, setPopupVisible] = React.useState(false); + const renderPopup = React.useCallback( + () => ( +
+
{formatCurrency(currentHouse.Price)}
+
+ {currentHouse.Address}, {currentHouse.City}, {currentHouse.State} +
+
+ ), + [currentHouse], + ); + const showHouse = React.useCallback( + (house) => { + setCurrentHouse(house); + setPopupVisible(true); + }, + [setCurrentHouse, setPopupVisible], + ); + const handlePopupHidden = React.useCallback(() => { + setPopupVisible(false); + }, [setPopupVisible]); + const changeFavoriteState = React.useCallback(() => { + const updatedHouse = { ...currentHouse }; + updatedHouse.Favorite = !updatedHouse.Favorite; + setCurrentHouse(updatedHouse); + notify( + { + message: `This item has been ${ + updatedHouse.Favorite ? 'added to' : 'removed from' + } the Favorites list!`, + width: 450, + }, + updatedHouse.Favorite ? 'success' : 'error', + 2000, + ); + }, [currentHouse, setCurrentHouse]); + return ( +
+ {housesSource.map((h) => ( + + ))} + +
+ ); +} diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/House.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/House.js new file mode 100644 index 00000000000..64860d9647f --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/House.js @@ -0,0 +1,72 @@ +import React from 'react'; +import Popover from 'devextreme-react/popover'; + +const formatCurrency = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: 0, + maximumFractionDigits: 2, +}).format; +const position = { + offset: '0, 2', + at: 'bottom', + my: 'top', + collision: 'fit flip', +}; +export function House(props) { + const renderAgentDetails = React.useCallback(() => { + const agent = props.house.Agent; + return ( +
+ {agent.Name} +
+
{agent.Name}
+
Tel: {agent.Phone}
+
+
+ ); + }, [props.house.Agent]); + const show = React.useCallback(() => { + props.show(props.house); + }, [props]); + return ( +
+
+ {props.house.Address} + +
+
+
{props.house.Address}
+
{formatCurrency(props.house.Price)}
+
+
+ Listing agent + Listing agent +
+
+
+
+ +
+
+ ); +} diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/data.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/data.js new file mode 100644 index 00000000000..a8d7f286495 --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/data.js @@ -0,0 +1,227 @@ +export const housesSource = [ + { + ID: '1', + Favorite: false, + Address: '652 Avonwick Gate', + City: 'Toronto', + State: 'ON', + ZipCode: 'M3A25', + Beds: '4', + Baths: '4', + HouseSize: 7500, + LotSize: '0.8', + Price: 780000, + Coordinates: '43.7507639, -79.3184378', + Features: + 'Dishwasher, Disposal, Separate laundry room, 3/4 bath downstairs, Formal dining room, Downstairs family room, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Hardwood flooring in kitchen, Kitchen island, Solid surface countertops in kitchen, Entry foyer, Front living room, Ceiling fan in master bedroom, Master bedroom separate from other, Mirrored door closet in master bedroom, 2nd bedroom: 11x13, 3rd bedroom: 11x14, 4th Bedroom: 18x13, Alarm system owned, Built-in microwave, Carpet, Ceiling fan(s), Convection oven, Double built-in gas ovens, Gas cooktop, Gas stove, Marble/Stone floors', + YearBuilt: '2008', + Type: '0', + Status: '1', + Image: '../../../../images/gallery/1.jpg', + Agent: { + Name: 'John Heart', + Phone: '(213) 555-9392', + Picture: '../../../../images/employees/01.png', + }, + }, + { + ID: '2', + Favorite: false, + Address: '82649 Topeka St', + City: 'Riverbank', + State: 'CA', + ZipCode: '95360', + Beds: '5', + Baths: '3', + HouseSize: 12500, + LotSize: '1.2', + Price: 1750000, + Coordinates: '37.7369999,-120.9430488', + Features: + 'Dishwasher, Disposal, Separate laundry room, Full bath downstairs, Formal dining room, Downstairs family room, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Kitchen custom cabinets, Kitchen island, Pantry, Walk-in pantry, Entry foyer, Formal living room, Rear living room, Vaulted ceiling in living room, Balcony in master bedroom, Master bedroom separate from other, Master bedroom upstairs, Sitting room in master bedroom, Walk-in closet in master bedroom, 2nd bedroom: 13X20, 3rd bedroom: 13X17, 4th Bedroom: 13X18, 5th Bedroom: 14X16, Alarm system owned, Blinds, Built-in electric oven, Built-in microwave, Carpet, Ceiling fan(s), Gas cooktop, Intercom system, Marble/Stone floors, Water conditioner owned, Water filtering system, Window Coverings Throughout', + YearBuilt: '2009', + Type: '0', + Status: '0', + Image: '../../../../images/gallery/2.jpg', + Agent: { + Name: 'Olivia Peyton', + Phone: '(310) 555-2728', + Picture: '../../../../images/employees/09.png', + }, + }, + { + ID: '3', + Favorite: false, + Address: '328 S Kerema Ave', + City: 'Milford', + State: 'CT', + ZipCode: '06465', + Beds: '4', + Baths: '2', + HouseSize: 8356, + LotSize: '0.04', + Price: 350000, + Coordinates: '41.1957999,-73.1022988', + Features: + 'Dishwasher, Disposal, Refrigerator, Separate laundry room, Washer/Dryer on 2nd floor, Full bath downstairs, Formal dining room, Downstairs family room, Separate family room, Wet bar in family room, Breakfast nook (eating area), Garden window in kitchen, Granite countertops in kitchen, Kitchen island, Marble/Stone flooring in kitchen, Pantry, Formal living room, Front living room, Master bedroom separate from other, Master bedroom upstairs, Sitting room in master bedroom, Walk-in closet in master bedroom, 2nd bedroom: 16x12, 3rd bedroom: 13x16, 4th Bedroom: 18x12, Alarm system owned, Built-in microwave, Carpet, Ceiling fan(s), Double built-in electric ovens, Gas cooktop, Marble/Stone floors', + YearBuilt: '2010', + Type: '0', + Status: '0', + Image: '../../../../images/gallery/3.jpg', + Agent: { + Name: 'Robert Reagan', + Phone: '(818) 555-2387', + Picture: '../../../../images/employees/03.png', + }, + }, + { + ID: '4', + Favorite: false, + Address: '5119 Beryl Dr', + City: 'San Antonio', + State: 'TX', + ZipCode: '78212', + Beds: '4', + Baths: '2', + HouseSize: 7980, + LotSize: '0.7', + Price: 455000, + Coordinates: '29.4972699,-98.5366788', + Features: + 'Dishwasher, Disposal, Refrigerator, Separate laundry room, Full bath downstairs, Living/Dining room combo, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Kitchen custom cabinets, Kitchen island, Recessed lighting in kitchen, Tile flooring in kitchen, Walk-in pantry, Formal living room, Front living room, Ceiling fan in master bedroom, Master bedroom downstairs, Walk-in closet in master bedroom, 2nd bedroom: 15x13, 3rd bedroom: 12x12, 4th Bedroom: 14x12, Alarm system owned, Blinds, Built-in microwave, Carpet, Ceiling fan(s), Central vacuum, Convection oven, Double built-in electric ovens, Electric cooktop, Intercom system, Tile floors', + YearBuilt: '2007', + Type: '0', + Status: '1', + Image: '../../../../images/gallery/4.jpg', + Agent: { + Name: 'Greta Sims', + Phone: '(818) 555-6546', + Picture: '../../../../images/employees/04.png', + }, + }, + { + ID: '5', + Favorite: false, + Address: '61207 16th St N', + City: 'Moorhead', + State: 'MN', + ZipCode: '56564', + Beds: '5', + Baths: '4', + HouseSize: 14250, + LotSize: '1.1', + Price: 1700000, + Coordinates: '46.88933,-96.7522388', + Features: + 'Dishwasher, Disposal, Separate laundry room, Washer/Dryer on 1st floor, Full bath downstairs, Formal dining room, Downstairs family room, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Kitchen custom cabinets, Kitchen island, Formal living room, Rear living room, Sunken living room, Vaulted ceiling in living room, Balcony in master bedroom, Ceiling fan in master bedroom, Master bedroom separate from other, Master bedroom upstairs, Walk-in closet in master bedroom, 2nd bedroom: 16X17, 3rd bedroom: 14X16, 4th Bedroom: 13X13, 5th Bedroom: 12X12, Blinds, Built-in microwave, Carpet, Ceiling fan(s), Central vacuum, Double built-in electric ovens, Gas cooktop, Marble/Stone floors, Pot shelves, Water conditioner owned, Water filtering system, Window Coverings Throughout', + YearBuilt: '2010', + Type: '0', + Status: '0', + Image: '../../../../images/gallery/5.jpg', + Agent: { + Name: 'John Heart', + Phone: '(213) 555-9392', + Picture: '../../../../images/employees/01.png', + }, + }, + { + ID: '6', + Favorite: false, + Address: '8512 Tanglewood Cir', + City: 'Reform', + State: 'AL', + ZipCode: '35487', + Beds: '3', + Baths: '2', + HouseSize: 5600, + LotSize: '0.2', + Price: 250000, + Coordinates: '33.3794,-87.9785788', + Features: + 'Dishwasher, Disposal, Refrigerator, Separate laundry room, Full bath downstairs, Formal dining room, Built-in bookcases in family room, Downstairs family room, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Granite countertops in kitchen, Kitchen custom cabinets, Kitchen island, Marble/Stone flooring in kitchen, Pantry, Formal living room, Front living room, Ceiling fan in master bedroom, Master bedroom downstairs, Master bedroom separate from other, Sitting room in master bedroom, Walk-in closet in master bedroom, 2nd bedroom: 11X15, 3rd bedroom: 11X14, Alarm system owned, Blinds, Built-in microwave, Carpet, Ceiling fan(s), Double built-in electric ovens, Drapes, Electric cooktop, Marble/Stone floors, Window Coverings Throughout, Wine refrigerator', + YearBuilt: '2011', + Type: '0', + Status: '0', + Image: '../../../../images/gallery/6.jpg', + Agent: { + Name: 'Olivia Peyton', + Phone: '(310) 555-2728', + Picture: '../../../../images/employees/09.png', + }, + }, + { + ID: '7', + Favorite: false, + Address: '7121 Bailey St', + City: 'Worcester', + State: 'MA', + ZipCode: '01605', + Beds: '4', + Baths: '3', + HouseSize: 6900, + LotSize: '2.1', + Price: 555000, + Coordinates: '42.2797,-71.8746388', + Features: + 'Dishwasher, Disposal, Refrigerator, Separate laundry room, Washer/Dryer on 1st floor, Full bath downstairs, Formal dining room, Downstairs family room, Separate family room, Breakfast Bar/Counter, Breakfast nook (eating area), Kitchen island, Recessed lighting in kitchen, Tile countertops in kitchen, Walk-in pantry, Entry foyer, Formal living room, Front living room, Dressing room in master bedroom, Master bedroom separate from other, Master bedroom upstairs, Walk-in closet in master bedroom, 2nd bedroom: 14x16, 3rd bedroom: 12x13, 4th Bedroom: 13x14, Carpet, Double built-in electric ovens, Drywall, Gas cooktop, Manmade wood or laminate floors, Marble/Stone floors, Water conditioner loope', + YearBuilt: '2008', + Type: '0', + Status: '1', + Image: '../../../../images/gallery/7.jpg', + Agent: { + Name: 'Robert Reagan', + Phone: '(818) 555-2387', + Picture: '../../../../images/employees/03.png', + }, + }, + { + ID: '8', + Favorite: false, + Address: '620201 Plymouth Rd', + City: 'Detroit', + State: 'MI', + ZipCode: ' 48224', + Beds: '4', + Baths: '4', + HouseSize: 7840, + LotSize: '0.33', + Price: 610000, + Coordinates: '42.3716299,-83.2572188', + Features: + 'Dishwasher, Disposal, Refrigerator, Separate laundry room, Full bath downstairs, Formal dining room, 2+ family rooms, Separate family room, Breakfast nook (eating area), Granite countertops in kitchen, Kitchen custom cabinets, Kitchen island, Walk-in pantry, Entry foyer, Formal living room, Rear living room, Vaulted ceiling in living room, Ceiling fan in master bedroom, Master bedroom downstairs, Walk-in closet in master bedroom, 2nd bedroom: 12x15, 3rd bedroom: 12x15, 4th Bedroom: 12x15, Blinds, Built-in microwave, Carpet, Ceiling fan(s), Electric cooktop, Shutters, Skylight(s), Water conditioner owned, Water filtering system, Window coverings partial', + YearBuilt: '2010', + Type: '0', + Status: '0', + Image: '../../../../images/gallery/8.jpg', + Agent: { + Name: 'Greta Sims', + Phone: '(818) 555-6546', + Picture: '../../../../images/employees/04.png', + }, + }, + { + ID: '9', + Favorite: false, + Address: '1198 Theresa Cir', + City: 'Whitinsville', + State: 'MA', + ZipCode: '01582', + Beds: '4', + Baths: '3', + HouseSize: 4990, + LotSize: '0.8', + Price: 320000, + Coordinates: '42.1072,-71.6928888', + Features: + 'Dishwasher, Disposal, Refrigerator, Separate laundry room, Washer/Dryer on 1st floor, 1/2 bath downstairs, Formal dining room, 2+ family rooms, Built-in bookcases in family room, Breakfast Bar/Counter, Granite countertops in kitchen, Kitchen island, Tile flooring in kitchen, Walk-in pantry, Entry foyer, Formal living room, Built-in bookcases in master bedroom, Built-in entertainment center in master bedroom, Ceiling fan in master bedroom, Dressing room in master bedroom, Walk-in closet in master bedroom, 2nd bedroom: 13x12, 3rd bedroom: 12x12, 4th Bedroom: 13x12, Alarm system rented, Blinds, Built-in microwave, Carpet, Ceiling fan(s), Double built-in gas ovens, Tile floors, Window Coverings Throughout', + YearBuilt: '2011', + Type: '0', + Status: '0', + Image: '../../../../images/gallery/9.jpg', + Agent: { + Name: 'John Heart', + Phone: '(213) 555-9392', + Picture: '../../../../images/employees/01.png', + }, + }, +]; diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/description.md b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/description.md new file mode 100644 index 00000000000..b2a186f05a4 --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/description.md @@ -0,0 +1 @@ +DevExtreme Dialog and Notification React components include several popup components used to interact with an app. This demo shows two of them: Popup and Popover. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/). diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.html b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.html new file mode 100644 index 00000000000..4d0ee54d8eb --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.js b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/styles.css b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/styles.css new file mode 100644 index 00000000000..c2acc4d32a2 --- /dev/null +++ b/JSDemos/Demos/Common/DialogsAndNotificationsOverview/ReactJs/styles.css @@ -0,0 +1,137 @@ +.large-text { + font-size: 24px; + color: #ff6a50; +} + +.opacity { + opacity: 0.5; +} + +.images { + font-size: 0; +} + +.images > div { + display: inline-block; + width: 33.3%; + vertical-align: top; +} + +.images .item-content { + position: relative; + margin: 5px; + color: #fff; + cursor: pointer; +} + +.images .item-content > img { + width: 100%; +} + +.item-content .item-options { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.images .item-content:hover > .item-options { + box-shadow: inset 0 0 0 2px #f05b41; +} + +.item-content .item-options > div { + position: absolute; + bottom: 0; + width: 100%; + height: 64px; + padding-top: 4px; + background-color: rgba(19, 32, 51, 0.8); + z-index: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-left: 2px solid transparent; + border-right: 2px solid transparent; +} + +.images .item-content:hover > .item-options > div { + border-bottom: 2px solid #f05b41; + border-left: 2px solid #f05b41; + border-right: 2px solid #f05b41; +} + +.item-content .item-options .address, +.item-content .item-options .price { + max-width: 70%; + padding-left: 8px; +} + +.item-content .item-options .address { + font-size: 14px; +} + +.item-content .item-options .agent { + font-size: 12px; + width: 60px; + position: absolute; + right: -2px; + top: 0; + bottom: 0; + text-align: center; + border-left: 1px solid rgba(255, 255, 255, 0.4); + line-height: 13px; +} + +.item-content .item-options .agent > div:hover { + color: #f05b41; +} + +.item-content .item-options .agent img { + display: block; + width: 13px; + height: 16px; + margin: 8px auto 2px; +} + +.agent-details > img, +.agent-details > div { + display: inline-block; + vertical-align: top; + line-height: 26px; +} + +.agent-details > img { + width: 40px; + margin-right: 10px; +} + +.agent-details .phone { + font-size: 18px; +} + +.popup-property-details { + overflow: hidden; + position: relative; +} + +.popup-property-details .images { + width: 700px; +} + +.popup-property-details img { + height: 205px; + margin: 10px 10px 10px 0; +} + +.dx-button.favorites { + background-color: #f05b41; + color: #fff; + position: absolute; + top: 5px; + right: 0; +} + +.dx-button.favorites .dx-icon { + color: #fff; +} diff --git a/JSDemos/Demos/LoadIndicator/Overview/React/App.js b/JSDemos/Demos/LoadIndicator/Overview/React/App.tsx similarity index 100% rename from JSDemos/Demos/LoadIndicator/Overview/React/App.js rename to JSDemos/Demos/LoadIndicator/Overview/React/App.tsx diff --git a/JSDemos/Demos/LoadIndicator/Overview/React/index.html b/JSDemos/Demos/LoadIndicator/Overview/React/index.html index fb33a47d3fb..7aef756bcb4 100644 --- a/JSDemos/Demos/LoadIndicator/Overview/React/index.html +++ b/JSDemos/Demos/LoadIndicator/Overview/React/index.html @@ -12,7 +12,7 @@ diff --git a/JSDemos/Demos/Popover/Overview/React/index.js b/JSDemos/Demos/LoadIndicator/Overview/React/index.tsx similarity index 81% rename from JSDemos/Demos/Popover/Overview/React/index.js rename to JSDemos/Demos/LoadIndicator/Overview/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Popover/Overview/React/index.js +++ b/JSDemos/Demos/LoadIndicator/Overview/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/LoadIndicator/Overview/ReactJs/App.js b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/App.js new file mode 100644 index 00000000000..d7021aacb64 --- /dev/null +++ b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/App.js @@ -0,0 +1,59 @@ +import React from 'react'; +import { Button } from 'devextreme-react/button'; +import { LoadIndicator } from 'devextreme-react/load-indicator'; + +export default function App() { + const [loadIndicatorVisible, setLoadIndicatorVisible] = React.useState(false); + const [buttonText, setButtonText] = React.useState('Send'); + const handleClick = React.useCallback(() => { + setLoadIndicatorVisible(true); + setButtonText('Sending'); + setTimeout(() => { + setLoadIndicatorVisible(false); + setButtonText('Send'); + }, 2000); + }, [setLoadIndicatorVisible, setButtonText]); + return ( +
+
Custom size
+
+ + + +
+
Custom image
+ + + +
Using with other widgets
+ + +
+ ); +} diff --git a/JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.html b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.html new file mode 100644 index 00000000000..4d0ee54d8eb --- /dev/null +++ b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.js b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/LoadIndicator/Overview/ReactJs/styles.css b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/styles.css new file mode 100644 index 00000000000..ec582d756e7 --- /dev/null +++ b/JSDemos/Demos/LoadIndicator/Overview/ReactJs/styles.css @@ -0,0 +1,37 @@ +.form { + padding: 10px 0 0 10px; +} + +.label { + margin-bottom: 10px; + font-size: 16px; +} + +.label:not(:first-child) { + margin-top: 30px; +} + +#small-indicator, +#medium-indicator, +#large-indicator { + vertical-align: middle; + margin-right: 10px; +} + +#button, +#button .dx-button-content { + padding: 0; +} + +#button .button-indicator { + height: 32px; + width: 32px; + display: inline-block; + vertical-align: middle; + margin-right: 5px; +} + +.indicators { + display: flex; + align-items: center; +} diff --git a/JSDemos/Demos/LoadPanel/Overview/React/App.js b/JSDemos/Demos/LoadPanel/Overview/React/App.tsx similarity index 77% rename from JSDemos/Demos/LoadPanel/Overview/React/App.js rename to JSDemos/Demos/LoadPanel/Overview/React/App.tsx index 18d4e66bb7b..82d74718db6 100644 --- a/JSDemos/Demos/LoadPanel/Overview/React/App.js +++ b/JSDemos/Demos/LoadPanel/Overview/React/App.tsx @@ -1,45 +1,45 @@ import React from 'react'; import { Button } from 'devextreme-react/button'; -import { CheckBox } from 'devextreme-react/check-box'; +import { CheckBox, ICheckBoxOptions } from 'devextreme-react/check-box'; import { LoadPanel } from 'devextreme-react/load-panel'; -import { employee } from './data.js'; +import { employee } from './data.ts'; const position = { of: '#employee' }; - +const defaultEmployeeInfo: Partial = {}; export default function App() { - const [employeeInfo, setEmployeeInfo] = React.useState({}); + const [employeeInfo, setEmployeeInfo] = React.useState(defaultEmployeeInfo); const [loadPanelVisible, setLoadPanelVisible] = React.useState(false); const [showIndicator, setShowIndicator] = React.useState(true); const [shading, setShading] = React.useState(true); const [showPane, setShowPane] = React.useState(true); const [hideOnOutsideClick, setHideOnOutsideClick] = React.useState(false); + const hideLoadPanel = React.useCallback(() => { + setLoadPanelVisible(false); + setEmployeeInfo(employee); + }, [setLoadPanelVisible, setEmployeeInfo]); + const onClick = React.useCallback(() => { setEmployeeInfo({}); setLoadPanelVisible(true); setTimeout(hideLoadPanel, 3000); }, [setEmployeeInfo, setLoadPanelVisible]); - const hideLoadPanel = React.useCallback(() => { - setLoadPanelVisible(false); - setEmployeeInfo(employee); - }, [setLoadPanelVisible, setEmployeeInfo]); - - const onShowIndicatorChange = React.useCallback((e) => { + const onShowIndicatorChange = React.useCallback((e: { value: any; }) => { setShowIndicator(e.value); - }, [setShowIndicator]); + }, [setShowIndicator]) as ICheckBoxOptions['onValueChanged']; - const onShadingChange = React.useCallback((e) => { + const onShadingChange = React.useCallback((e: { value: any; }) => { setShading(e.value); - }, [setShading]); + }, [setShading]) as ICheckBoxOptions['onValueChanged']; - const onShowPaneChange = React.useCallback((e) => { + const onShowPaneChange = React.useCallback((e: { value: any; }) => { setShowPane(e.value); - }, [setShowPane]); + }, [setShowPane]) as ICheckBoxOptions['onValueChanged']; - const onHideOnOutsideClickChange = React.useCallback((e) => { + const onHideOnOutsideClickChange = React.useCallback((e: { value: any; }) => { setHideOnOutsideClick(e.value); - }, [setHideOnOutsideClick]); + }, [setHideOnOutsideClick]) as ICheckBoxOptions['onValueChanged']; return ( diff --git a/JSDemos/Demos/LoadPanel/Overview/React/data.js b/JSDemos/Demos/LoadPanel/Overview/React/data.ts similarity index 100% rename from JSDemos/Demos/LoadPanel/Overview/React/data.js rename to JSDemos/Demos/LoadPanel/Overview/React/data.ts diff --git a/JSDemos/Demos/LoadPanel/Overview/React/index.html b/JSDemos/Demos/LoadPanel/Overview/React/index.html index fb33a47d3fb..7aef756bcb4 100644 --- a/JSDemos/Demos/LoadPanel/Overview/React/index.html +++ b/JSDemos/Demos/LoadPanel/Overview/React/index.html @@ -12,7 +12,7 @@ diff --git a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.js b/JSDemos/Demos/LoadPanel/Overview/React/index.tsx similarity index 81% rename from JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.js rename to JSDemos/Demos/LoadPanel/Overview/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Common/DialogsAndNotificationsOverview/React/index.js +++ b/JSDemos/Demos/LoadPanel/Overview/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/LoadPanel/Overview/ReactJs/App.js b/JSDemos/Demos/LoadPanel/Overview/ReactJs/App.js new file mode 100644 index 00000000000..60fbb8c3595 --- /dev/null +++ b/JSDemos/Demos/LoadPanel/Overview/ReactJs/App.js @@ -0,0 +1,124 @@ +import React from 'react'; +import { Button } from 'devextreme-react/button'; +import { CheckBox } from 'devextreme-react/check-box'; +import { LoadPanel } from 'devextreme-react/load-panel'; +import { employee } from './data.js'; + +const position = { of: '#employee' }; +const defaultEmployeeInfo = {}; +export default function App() { + const [employeeInfo, setEmployeeInfo] = React.useState(defaultEmployeeInfo); + const [loadPanelVisible, setLoadPanelVisible] = React.useState(false); + const [showIndicator, setShowIndicator] = React.useState(true); + const [shading, setShading] = React.useState(true); + const [showPane, setShowPane] = React.useState(true); + const [hideOnOutsideClick, setHideOnOutsideClick] = React.useState(false); + const hideLoadPanel = React.useCallback(() => { + setLoadPanelVisible(false); + setEmployeeInfo(employee); + }, [setLoadPanelVisible, setEmployeeInfo]); + const onClick = React.useCallback(() => { + setEmployeeInfo({}); + setLoadPanelVisible(true); + setTimeout(hideLoadPanel, 3000); + }, [setEmployeeInfo, setLoadPanelVisible]); + const onShowIndicatorChange = React.useCallback( + (e) => { + setShowIndicator(e.value); + }, + [setShowIndicator], + ); + const onShadingChange = React.useCallback( + (e) => { + setShading(e.value); + }, + [setShading], + ); + const onShowPaneChange = React.useCallback( + (e) => { + setShowPane(e.value); + }, + [setShowPane], + ); + const onHideOnOutsideClickChange = React.useCallback( + (e) => { + setHideOnOutsideClick(e.value); + }, + [setHideOnOutsideClick], + ); + return ( + +
John Heart
+   + +
+

+ Birth date: {employeeInfo.Birth_Date} +

+ +

+ Address: +
+ {employeeInfo.City} +
+ {employeeInfo.Zipcode} + {employeeInfo.Address} +

+ +

+ Phone: {employeeInfo.Mobile_Phone} +
+ Email: {employeeInfo.Email} +

+
+ +
+
Options
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + ); +} diff --git a/JSDemos/Demos/LoadPanel/Overview/ReactJs/data.js b/JSDemos/Demos/LoadPanel/Overview/ReactJs/data.js new file mode 100644 index 00000000000..2ead599ba48 --- /dev/null +++ b/JSDemos/Demos/LoadPanel/Overview/ReactJs/data.js @@ -0,0 +1,13 @@ +export const employee = { + Full_Name: 'John Heart', + Title: 'CEO', + Birth_Date: '03/16/1964', + Prefix: 'Mr.', + Address: '351 S Hill St.', + City: 'Los Angeles', + Zipcode: 90013, + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Home_Phone: '(213) 555-9208', + Mobile_Phone: '(213) 555-9392', +}; diff --git a/JSDemos/Demos/LoadPanel/Overview/ReactJs/index.html b/JSDemos/Demos/LoadPanel/Overview/ReactJs/index.html new file mode 100644 index 00000000000..4d0ee54d8eb --- /dev/null +++ b/JSDemos/Demos/LoadPanel/Overview/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/LoadPanel/Overview/ReactJs/index.js b/JSDemos/Demos/LoadPanel/Overview/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/LoadPanel/Overview/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/LoadPanel/Overview/ReactJs/styles.css b/JSDemos/Demos/LoadPanel/Overview/ReactJs/styles.css new file mode 100644 index 00000000000..1099edba56b --- /dev/null +++ b/JSDemos/Demos/LoadPanel/Overview/ReactJs/styles.css @@ -0,0 +1,43 @@ +.header { + font-size: 34px; + display: inline-block; + vertical-align: middle; + padding: 10px; + margin: 0; +} + +#employee { + margin: 20px 0; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-top: 1px solid lightgray; + border-bottom: 1px solid lightgray; +} + +#employee > p { + padding: 10px 20px; + margin: 0; +} + +.address { + height: 60px; +} + +.options { + padding: 20px; + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; +} + +.caption { + font-size: 18px; + font-weight: 500; +} + +.option { + margin-top: 10px; +} diff --git a/JSDemos/Demos/Popover/Overview/React/App.js b/JSDemos/Demos/Popover/Overview/React/App.tsx similarity index 96% rename from JSDemos/Demos/Popover/Overview/React/App.js rename to JSDemos/Demos/Popover/Overview/React/App.tsx index cffd23a2979..83e04a6dc9a 100644 --- a/JSDemos/Demos/Popover/Overview/React/App.js +++ b/JSDemos/Demos/Popover/Overview/React/App.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { Popover } from 'devextreme-react/popover'; +import { IPopoverOptions, Popover } from 'devextreme-react/popover'; -const animationConfig = { +const animationConfig: IPopoverOptions['animation'] = { show: { type: 'pop', from: { diff --git a/JSDemos/Demos/Popover/Overview/React/index.html b/JSDemos/Demos/Popover/Overview/React/index.html index fb33a47d3fb..7aef756bcb4 100644 --- a/JSDemos/Demos/Popover/Overview/React/index.html +++ b/JSDemos/Demos/Popover/Overview/React/index.html @@ -12,7 +12,7 @@ diff --git a/JSDemos/Demos/LoadIndicator/Overview/React/index.js b/JSDemos/Demos/Popover/Overview/React/index.tsx similarity index 81% rename from JSDemos/Demos/LoadIndicator/Overview/React/index.js rename to JSDemos/Demos/Popover/Overview/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/LoadIndicator/Overview/React/index.js +++ b/JSDemos/Demos/Popover/Overview/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Popover/Overview/ReactJs/App.js b/JSDemos/Demos/Popover/Overview/ReactJs/App.js new file mode 100644 index 00000000000..d756d2939ae --- /dev/null +++ b/JSDemos/Demos/Popover/Overview/ReactJs/App.js @@ -0,0 +1,102 @@ +import React from 'react'; +import { Popover } from 'devextreme-react/popover'; + +const animationConfig = { + show: { + type: 'pop', + from: { + scale: 0, + }, + to: { + scale: 1, + }, + }, + hide: { + type: 'fade', + from: 1, + to: 0, + }, +}; +export default function App() { + return ( +
+
+
Default mode
+
+

+ Google AdWords Strategy (details) +

+ + Make final decision on whether we are going to increase our Google AdWord spend based on + our 2013 marketing plan. + +
+
+
+
With title
+
+

+ Rollout of New Website and Marketing Brochures ( + details) +

+ + The designs for new brochures and website have been approved. Launch date is set for Feb + 28. + +
+
+
+
With animation
+
+

+ Create 2012 Sales Report (details) +

+ + 2012 Sales Report has to be completed so we can determine if major changes are required + to sales strategy. + +
+
+
+
With overlay
+
+

+ Website Re-Design Plan (more) +

+ + The changes in our brochure designs for 2013 require us to update key areas of our + website. + +
+
+
+ ); +} diff --git a/JSDemos/Demos/Popover/Overview/ReactJs/index.html b/JSDemos/Demos/Popover/Overview/ReactJs/index.html new file mode 100644 index 00000000000..4d0ee54d8eb --- /dev/null +++ b/JSDemos/Demos/Popover/Overview/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Popover/Overview/ReactJs/index.js b/JSDemos/Demos/Popover/Overview/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Popover/Overview/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Popover/Overview/ReactJs/styles.css b/JSDemos/Demos/Popover/Overview/ReactJs/styles.css new file mode 100644 index 00000000000..6a6c677c4ed --- /dev/null +++ b/JSDemos/Demos/Popover/Overview/ReactJs/styles.css @@ -0,0 +1,14 @@ +.form a { + cursor: pointer; + white-space: nowrap; + border-bottom: 1px dashed; + text-decoration: none; +} + +.form p { + margin: 0; +} + +#link4 { + border-bottom-style: solid; +} diff --git a/JSDemos/Demos/Popup/Overview/React/App.js b/JSDemos/Demos/Popup/Overview/React/App.tsx similarity index 90% rename from JSDemos/Demos/Popup/Overview/React/App.js rename to JSDemos/Demos/Popup/Overview/React/App.tsx index 59a62cea503..da1e131be0c 100644 --- a/JSDemos/Demos/Popup/Overview/React/App.js +++ b/JSDemos/Demos/Popup/Overview/React/App.tsx @@ -1,15 +1,16 @@ import React from 'react'; import { Popup, Position, ToolbarItem } from 'devextreme-react/popup'; import notify from 'devextreme/ui/notify'; -import { EmployeeItem } from './EmployeeItem.js'; -import { employees } from './data.js'; +import { EmployeeItem, EmployeeItemProps } from './EmployeeItem.tsx'; +import { employees } from './data.ts'; +const defaultCurrentEmployee: Partial = {}; export default function App() { - const [currentEmployee, setCurrentEmployee] = React.useState({}); + const [currentEmployee, setCurrentEmployee] = React.useState(defaultCurrentEmployee); const [popupVisible, setPopupVisible] = React.useState(false); const [positionOf, setPositionOf] = React.useState(''); - const showInfo = React.useCallback((employee) => { + const showInfo = React.useCallback((employee: EmployeeItemProps['employee']) => { setCurrentEmployee(employee); setPositionOf(`#image${employee.ID}`); setPopupVisible(true); diff --git a/JSDemos/Demos/Popup/Overview/React/EmployeeItem.js b/JSDemos/Demos/Popup/Overview/React/EmployeeItem.js deleted file mode 100644 index ececf4a9b79..00000000000 --- a/JSDemos/Demos/Popup/Overview/React/EmployeeItem.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import { Button } from 'devextreme-react/button'; - -export class EmployeeItem extends React.Component { - constructor(props) { - super(props); - - this.showInfo = () => this.props.showInfo(props.employee); - } - - render() { - return ( - - {`${this.props.employee.FirstName}
- {this.props.employee.FirstName} {this.props.employee.LastName}
-