Drag & Drop - React Tab Panel

import React, { useCallback, useState } from 'react'; import Button from 'devextreme-react/button'; import Sortable, { type SortableTypes } from 'devextreme-react/sortable'; import TabPanel, { type TabPanelTypes } from 'devextreme-react/tab-panel'; import service from './data.ts'; import EmployeeTemplate from './EmployeeTemplate.tsx'; const allEmployees = service.getEmployees(); function App() { const [employees, setEmployees] = useState(allEmployees.slice(0, 3)); const [selectedItem, setSelectedItem] = useState(allEmployees[0]); const addButtonHandler = useCallback(() => { const newItem = allEmployees .filter((employee) => employees.indexOf(employee) === -1)[0]; setEmployees([...employees, newItem]); setSelectedItem(newItem); }, [employees, setEmployees, setSelectedItem]); function disableButton() { return employees.length === allEmployees.length; } const closeButtonHandler = useCallback((item) => { const newEmployees = [...employees]; const index = newEmployees.indexOf(item); newEmployees.splice(index, 1); setEmployees(newEmployees); if (index >= newEmployees.length && index > 0) { setSelectedItem(newEmployees[index - 1]); } }, [employees, setEmployees, setSelectedItem]); const renderTitle = useCallback((data) => ( <React.Fragment> <span> {data.FirstName} {data.LastName} </span> {employees.length >= 2 && <i className="dx-icon dx-icon-close" onClick={() => { closeButtonHandler(data); }} />} </React.Fragment> ), [employees, closeButtonHandler]); const onSelectionChanged = useCallback((args: TabPanelTypes.SelectionChangedEvent) => { setSelectedItem(args.addedItems[0]); }, [setSelectedItem]); const onTabDragStart = useCallback((e: SortableTypes.DragStartEvent) => { e.itemData = e.fromData[e.fromIndex]; }, []); const onTabDrop = useCallback((e: SortableTypes.ReorderEvent) => { const newEmployees = [...employees]; newEmployees.splice(e.fromIndex, 1); newEmployees.splice(e.toIndex, 0, e.itemData); setEmployees(newEmployees); }, [employees, setEmployees]); return ( <React.Fragment> <div id="container"> <Button disabled={disableButton()} text="Add Tab" icon="add" type="default" onClick={addButtonHandler} /> </div> <Sortable filter=".dx-tab" data={employees} itemOrientation="horizontal" dragDirection="horizontal" onDragStart={onTabDragStart} onReorder={onTabDrop} > <TabPanel dataSource={employees} height={410} itemTitleRender={renderTitle} deferRendering={false} showNavButtons={true} selectedItem={selectedItem} repaintChangesOnly={true} onSelectionChanged={onSelectionChanged} itemComponent={EmployeeTemplate} /> </Sortable> </React.Fragment> ); } export default App;

import React, { useCallback, useState } from 'react'; import Button from 'devextreme-react/button'; import Sortable from 'devextreme-react/sortable'; import TabPanel from 'devextreme-react/tab-panel'; import service from './data.js'; import EmployeeTemplate from './EmployeeTemplate.js'; const allEmployees = service.getEmployees(); function App() { const [employees, setEmployees] = useState(allEmployees.slice(0, 3)); const [selectedItem, setSelectedItem] = useState(allEmployees[0]); const addButtonHandler = useCallback(() => { const newItem = allEmployees.filter((employee) => employees.indexOf(employee) === -1)[0]; setEmployees([...employees, newItem]); setSelectedItem(newItem); }, [employees, setEmployees, setSelectedItem]); function disableButton() { return employees.length === allEmployees.length; } const closeButtonHandler = useCallback( (item) => { const newEmployees = [...employees]; const index = newEmployees.indexOf(item); newEmployees.splice(index, 1); setEmployees(newEmployees); if (index >= newEmployees.length && index > 0) { setSelectedItem(newEmployees[index - 1]); } }, [employees, setEmployees, setSelectedItem], ); const renderTitle = useCallback( (data) => ( <React.Fragment> <span> {data.FirstName} {data.LastName} </span> {employees.length >= 2 && ( <i className="dx-icon dx-icon-close" onClick={() => { closeButtonHandler(data); }} /> )} </React.Fragment> ), [employees, closeButtonHandler], ); const onSelectionChanged = useCallback( (args) => { setSelectedItem(args.addedItems[0]); }, [setSelectedItem], ); const onTabDragStart = useCallback((e) => { e.itemData = e.fromData[e.fromIndex]; }, []); const onTabDrop = useCallback( (e) => { const newEmployees = [...employees]; newEmployees.splice(e.fromIndex, 1); newEmployees.splice(e.toIndex, 0, e.itemData); setEmployees(newEmployees); }, [employees, setEmployees], ); return ( <React.Fragment> <div id="container"> <Button disabled={disableButton()} text="Add Tab" icon="add" type="default" onClick={addButtonHandler} /> </div> <Sortable filter=".dx-tab" data={employees} itemOrientation="horizontal" dragDirection="horizontal" onDragStart={onTabDragStart} onReorder={onTabDrop} > <TabPanel dataSource={employees} height={410} itemTitleRender={renderTitle} deferRendering={false} showNavButtons={true} selectedItem={selectedItem} repaintChangesOnly={true} onSelectionChanged={onSelectionChanged} itemComponent={EmployeeTemplate} /> </Sortable> </React.Fragment> ); } export default App;

import React from 'react'; import { List } from 'devextreme-react/list'; import service from './data.ts'; function itemRender(data) { return <div>{data.Subject}</div>; } function EmployeeTemplate(props: { data: { ID?: any; FirstName?: any; LastName?: any; Picture?: any; Position?: any; Notes?: any; }; }) { const tasks = service .getTasks() .filter((task: { EmployeeID: any; }) => task.EmployeeID === props.data.ID); const { FirstName, LastName, Picture, Position, Notes, } = props.data; const completedTasks = tasks.filter((task: { Status: string; }) => task.Status === 'Completed'); return ( <React.Fragment> <div className="employeeInfo"> <img alt={`${FirstName} ${LastName}`} className="employeePhoto" src={Picture} /> <p className="employeeNotes"> <b>{`Position: ${Position}`}</b> <br /> {Notes} </p> </div> <div className="caption">{`${FirstName} ${LastName}'s Tasks:`}</div> <div className="task-list"> <List dataSource={tasks} showSelectionControls={true} selectedItems={completedTasks} disabled={true} selectionMode="multiple" itemRender={itemRender} ></List> </div> </React.Fragment> ); } export default EmployeeTemplate;

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

import React from 'react'; import { List } from 'devextreme-react/list'; import service from './data.js'; function itemRender(data) { return <div>{data.Subject}</div>; } function EmployeeTemplate(props) { const tasks = service.getTasks().filter((task) => task.EmployeeID === props.data.ID); const { FirstName, LastName, Picture, Position, Notes, } = props.data; const completedTasks = tasks.filter((task) => task.Status === 'Completed'); return ( <React.Fragment> <div className="employeeInfo"> <img alt={`${FirstName} ${LastName}`} className="employeePhoto" src={Picture} /> <p className="employeeNotes"> <b>{`Position: ${Position}`}</b> <br /> {Notes} </p> </div> <div className="caption">{`${FirstName} ${LastName}'s Tasks:`}</div> <div className="task-list"> <List dataSource={tasks} showSelectionControls={true} selectedItems={completedTasks} disabled={true} selectionMode="multiple" itemRender={itemRender} ></List> </div> </React.Fragment> ); } export default EmployeeTemplate;

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

<!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/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#container { display: flex; justify-content: flex-end; padding-bottom: 10px; } .dx-tabs .dx-tabs-wrapper .dx-item.dx-tab { width: auto; padding-left: 20px; } .dx-sortable-dragging .dx-tab { box-sizing: border-box; text-align: center; } .employeeInfo .employeePhoto { height: 100px; float: left; padding: 10px 20px; } .caption { padding: 0 0 10px 30px; font-size: 14px; font-weight: bold; } .task-list { padding: 0 20px; } .task-list .dx-state-disabled { opacity: 1; } .task-list .dx-state-disabled .dx-list-item { opacity: 1; } .employeeInfo .employeeNotes { min-height: 100px; padding: 20px; text-align: justify; white-space: normal; } .dx-theme-generic .dx-tabs-wrapper .dx-item.dx-tab { max-width: fit-content; padding-left: 14px; padding-right: 9px; line-height: 1.618; } .dx-tabpanel .dx-tab .dx-icon.dx-icon-close { display: inline-block; margin-right: 0; margin-left: 7px; opacity: 0.6; } .dx-theme-generic .dx-tabpanel .dx-tab .dx-icon.dx-icon-close { font-size: 15px; } .dx-theme-material .dx-tabpanel .dx-tab .dx-icon.dx-icon-close { font-size: 18px; } .dx-theme-material .dx-tab-content { flex-direction: row; } .dx-theme-material .employeeNotes { margin: 0; }

React Tab Panel - Drag & Drop