Popover Mode - React Action Sheet

import React, { useCallback, useState } from 'react'; import ActionSheet, { type ActionSheetTypes } from 'devextreme-react/action-sheet'; import List, { type ListTypes } from 'devextreme-react/list'; import notify from 'devextreme/ui/notify'; import RenderContactItem from './ContactItem.tsx'; import { actionSheetItems, contacts } from './data.ts'; const App = () => { const [isActionSheetVisible, setIsActionSheetVisible] = useState(false); const [actionSheetTarget, setActionSheetTarget] = useState<HTMLElement | string>(''); const onListItemClick = useCallback((e: ListTypes.ItemClickEvent): void => { setIsActionSheetVisible(true); setActionSheetTarget(e.itemElement); }, []); const onActionSheetItemClick = useCallback((e: ActionSheetTypes.ItemClickEvent): void => { setIsActionSheetVisible(false); notify(`The "${e.itemData.text}" button is clicked.`); }, []); const onVisibleChange = useCallback((isVisible: boolean): void => { if (isVisible !== isActionSheetVisible) { setIsActionSheetVisible(isVisible); } }, [isActionSheetVisible]); return ( <div className="app-container"> <List id="list" items={contacts} itemRender={RenderContactItem} onItemClick={onListItemClick} /> <ActionSheet title="Choose action" usePopover={true} visible={isActionSheetVisible} target={actionSheetTarget} items={actionSheetItems} onItemClick={onActionSheetItemClick} onVisibleChange={onVisibleChange} /> </div> ); }; export default App;

import React, { useCallback, useState } from 'react'; import ActionSheet from 'devextreme-react/action-sheet'; import List from 'devextreme-react/list'; import notify from 'devextreme/ui/notify'; import RenderContactItem from './ContactItem.js'; import { actionSheetItems, contacts } from './data.js'; const App = () => { const [isActionSheetVisible, setIsActionSheetVisible] = useState(false); const [actionSheetTarget, setActionSheetTarget] = useState(''); const onListItemClick = useCallback((e) => { setIsActionSheetVisible(true); setActionSheetTarget(e.itemElement); }, []); const onActionSheetItemClick = useCallback((e) => { setIsActionSheetVisible(false); notify(`The "${e.itemData.text}" button is clicked.`); }, []); const onVisibleChange = useCallback( (isVisible) => { if (isVisible !== isActionSheetVisible) { setIsActionSheetVisible(isVisible); } }, [isActionSheetVisible], ); return ( <div className="app-container"> <List id="list" items={contacts} itemRender={RenderContactItem} onItemClick={onListItemClick} /> <ActionSheet title="Choose action" usePopover={true} visible={isActionSheetVisible} target={actionSheetTarget} items={actionSheetItems} onItemClick={onActionSheetItemClick} onVisibleChange={onVisibleChange} /> </div> ); }; export default App;

import React from 'react'; interface ContactItemProps { name: string; phone: string; email: string; } export default function RenderContactItem({ name, phone, email }: ContactItemProps) { return ( <div> <div>{name}</div> <div>{phone}</div> <div>{email}</div> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const actionSheetItems = [ { text: 'Call' }, { text: 'Send message' }, { text: 'Edit' }, { text: 'Delete' }, ]; export const contacts = [ { name: 'Barbara J. Coggins', phone: '512-964-2757', email: 'BarbaraJCoggins@rhyta.com', category: 'Family', }, { name: 'Leslie S. Alcantara', phone: '360-684-1334', email: 'LeslieSAlcantara@teleworm.us', category: 'Friends', }, { name: 'Chad S. Miles', phone: '520-573-7903', email: 'ChadSMiles@rhyta.com', category: 'Work', }, { name: 'Michael A. Blevins', phone: '530-480-1961', email: 'MichaelABlevins@armyspy.com', category: 'Work', }, { name: 'Jane K. Hernandez', phone: '404-781-0805', email: 'JaneKHernandez@teleworm.us', category: 'Friends', }, { name: 'Kim D. Thomas', phone: '603-583-9043', email: 'KimDThomas@teleworm.us', category: 'Work', }, { name: 'Donald L. Jordan', phone: '772-766-2842', email: 'DonaldLJordan@dayrep.com', category: 'Family', }, { name: 'Nicole A. Rios', phone: '213-812-8400', email: 'NicoleARios@armyspy.com', category: 'Friends', }, { name: 'Barbara M. Roberts', phone: '614-365-7945', email: 'BarbaraMRoberts@armyspy.com', category: 'Friends', }, ];

import React from 'react'; export default function RenderContactItem({ name, phone, email }) { return ( <div> <div>{name}</div> <div>{phone}</div> <div>{email}</div> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const actionSheetItems = [ { text: 'Call' }, { text: 'Send message' }, { text: 'Edit' }, { text: 'Delete' }, ]; export const contacts = [ { name: 'Barbara J. Coggins', phone: '512-964-2757', email: 'BarbaraJCoggins@rhyta.com', category: 'Family', }, { name: 'Leslie S. Alcantara', phone: '360-684-1334', email: 'LeslieSAlcantara@teleworm.us', category: 'Friends', }, { name: 'Chad S. Miles', phone: '520-573-7903', email: 'ChadSMiles@rhyta.com', category: 'Work', }, { name: 'Michael A. Blevins', phone: '530-480-1961', email: 'MichaelABlevins@armyspy.com', category: 'Work', }, { name: 'Jane K. Hernandez', phone: '404-781-0805', email: 'JaneKHernandez@teleworm.us', category: 'Friends', }, { name: 'Kim D. Thomas', phone: '603-583-9043', email: 'KimDThomas@teleworm.us', category: 'Work', }, { name: 'Donald L. Jordan', phone: '772-766-2842', email: 'DonaldLJordan@dayrep.com', category: 'Family', }, { name: 'Nicole A. Rios', phone: '213-812-8400', email: 'NicoleARios@armyspy.com', category: 'Friends', }, { name: 'Barbara M. Roberts', phone: '614-365-7945', email: 'BarbaraMRoberts@armyspy.com', category: 'Friends', }, ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#list, #app, .demo-container, .app-container { height: 100%; }

React Action Sheet - Popover Mode