import React, { useCallback, useState } from 'react';
import SelectBox from 'devextreme-react/select-box';
import TabPanel from 'devextreme-react/tab-panel';
import TabPanelItem from './TabPanelItem.tsx';
import {
tabsPositionsSelectBoxLabel,
tabsPositions,
stylingModesSelectBoxLabel,
stylingModes,
iconPositionsSelectBoxLabel,
iconPositions,
dataSource,
} from './data.ts';
const App = () => {
const [tabsPosition, setTabsPosition] = useState(tabsPositions[0]);
const [stylingMode, setStylingMode] = useState(stylingModes[0]);
const [iconPosition, setIconPosition] = useState(iconPositions[0]);
const onTabsPositionChanged = useCallback((args) => {
setTabsPosition(args.value);
}, [setTabsPosition]);
const onStylingModeChanged = useCallback((args) => {
setStylingMode(args.value);
}, [setStylingMode]);
const onIconPositionChanged = useCallback((args) => {
setIconPosition(args.value);
}, [setIconPosition]);
return (
<div className="tabpanel-demo">
<div className="widget-container">
<TabPanel
width="100%"
height={418}
animationEnabled={true}
swipeEnabled={true}
dataSource={dataSource}
tabsPosition={tabsPosition}
stylingMode={stylingMode}
iconPosition={iconPosition}
itemComponent={TabPanelItem}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<div className="option-label">Tab position</div>
<SelectBox
inputAttr={tabsPositionsSelectBoxLabel}
items={tabsPositions}
value={tabsPosition}
onValueChanged={onTabsPositionChanged}
/>
</div>
<div className="option">
<div className="option-label">Styling mode</div>
<SelectBox
inputAttr={stylingModesSelectBoxLabel}
items={stylingModes}
value={stylingMode}
onValueChanged={onStylingModeChanged}
/>
</div>
<div className="option">
<div className="option-label">Icon position</div>
<SelectBox
inputAttr={iconPositionsSelectBoxLabel}
items={iconPositions}
value={iconPosition}
onValueChanged={onIconPositionChanged}
/>
</div>
</div>
</div>
);
};
export default App;
import React, { useCallback, useState } from 'react';
import SelectBox from 'devextreme-react/select-box';
import TabPanel from 'devextreme-react/tab-panel';
import TabPanelItem from './TabPanelItem.js';
import {
tabsPositionsSelectBoxLabel,
tabsPositions,
stylingModesSelectBoxLabel,
stylingModes,
iconPositionsSelectBoxLabel,
iconPositions,
dataSource,
} from './data.js';
const App = () => {
const [tabsPosition, setTabsPosition] = useState(tabsPositions[0]);
const [stylingMode, setStylingMode] = useState(stylingModes[0]);
const [iconPosition, setIconPosition] = useState(iconPositions[0]);
const onTabsPositionChanged = useCallback(
(args) => {
setTabsPosition(args.value);
},
[setTabsPosition],
);
const onStylingModeChanged = useCallback(
(args) => {
setStylingMode(args.value);
},
[setStylingMode],
);
const onIconPositionChanged = useCallback(
(args) => {
setIconPosition(args.value);
},
[setIconPosition],
);
return (
<div className="tabpanel-demo">
<div className="widget-container">
<TabPanel
width="100%"
height={418}
animationEnabled={true}
swipeEnabled={true}
dataSource={dataSource}
tabsPosition={tabsPosition}
stylingMode={stylingMode}
iconPosition={iconPosition}
itemComponent={TabPanelItem}
/>
</div>
<div className="options">
<div className="caption">Options</div>
<div className="option">
<div className="option-label">Tab position</div>
<SelectBox
inputAttr={tabsPositionsSelectBoxLabel}
items={tabsPositions}
value={tabsPosition}
onValueChanged={onTabsPositionChanged}
/>
</div>
<div className="option">
<div className="option-label">Styling mode</div>
<SelectBox
inputAttr={stylingModesSelectBoxLabel}
items={stylingModes}
value={stylingMode}
onValueChanged={onStylingModeChanged}
/>
</div>
<div className="option">
<div className="option-label">Icon position</div>
<SelectBox
inputAttr={iconPositionsSelectBoxLabel}
items={iconPositions}
value={iconPosition}
onValueChanged={onIconPositionChanged}
/>
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
import TaskItem from './TaskItem.tsx';
function TabPanelItem({ data }) {
const taskItems = data.tasks.map((task, index) => <TaskItem key={index} prop={task} />);
return (
<div className="tabpanel-item">
{taskItems}
</div>
);
}
export default TabPanelItem;
import React from 'react';
function TaskItem({ prop }) {
return (
<div className={`task-item task-item-priority-${prop.priority}`}>
<span className="task-item-text">
{prop.text}
</span>
<span className="task-item-info">
{`${prop.date} by ${prop.assignedBy}`}
</span>
<i className="task-item-pseudo-button dx-icon dx-icon-overflow"></i>
</div>
);
}
export default TaskItem;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import { Position, TabsIconPosition, TabsStyle } from 'devextreme/common';
export const tabsPositionsSelectBoxLabel = { 'aria-label': 'Tab position' };
export const tabsPositions: Position[] = [
'left',
'top',
'right',
'bottom',
];
export const stylingModesSelectBoxLabel = { 'aria-label': 'Styling mode' };
export const stylingModes: TabsStyle[] = [
'secondary',
'primary',
];
export const iconPositionsSelectBoxLabel = { 'aria-label': 'Icon positions' };
export const iconPositions: TabsIconPosition[] = [
'top',
'start',
'end',
'bottom',
];
const tasks = [
{
status: 'Not Started',
priority: 'high',
text: 'Revenue Projections',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Not Started',
priority: 'high',
text: 'New Brochures',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Not Started',
priority: 'medium',
text: 'Training',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Not Started',
priority: 'medium',
text: 'NDA',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Not Started',
priority: 'low',
text: 'Health Insurance',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Help Needed',
priority: 'low',
text: 'TV Recall',
date: '2023/09/16',
assignedBy: 'Brett Wade',
},
{
status: 'Help Needed',
priority: 'low',
text: 'Recall and Refund Forms',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Help Needed',
priority: 'high',
text: 'Shippers',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Help Needed',
priority: 'medium',
text: 'Hardware Upgrade',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Online Sales',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'In Progress',
priority: 'medium',
text: 'New Website Design',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'In Progress',
priority: 'low',
text: 'Bandwidth Increase',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Support',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'In Progress',
priority: 'low',
text: 'Training Material',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Deferred',
priority: 'medium',
text: 'New Database',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Deferred',
priority: 'high',
text: 'Automation Server',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Retail Sales',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Shipping Labels',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Rejected',
priority: 'high',
text: 'Schedule Meeting with Sales Team',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Confirm Availability for Sales Meeting',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Reschedule Sales Team Meeting',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'Rejected',
priority: 'high',
text: 'Update Database with New Leads',
date: '2023/09/16',
assignedBy: 'Kevin Carter',
},
{
status: 'Rejected',
priority: 'low',
text: 'Send Territory Sales Breakdown',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'Completed',
priority: 'medium',
text: 'Territory Sales Breakdown Report',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'Completed',
priority: 'low',
text: 'Return Merchandise Report',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'Completed',
priority: 'high',
text: 'Staff Productivity Report',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'Completed',
priority: 'medium',
text: 'Review HR Budget Company Wide',
date: '2023/09/16',
assignedBy: 'Mary Stern',
},
];
export const dataSource = [
{
icon: 'description',
title: 'Not Started',
tasks: tasks.filter((item) => item.status === 'Not Started'),
},
{
icon: 'taskhelpneeded',
title: 'Help Needed',
tasks: tasks.filter((item) => item.status === 'Help Needed'),
},
{
icon: 'taskinprogress',
title: 'In Progress',
tasks: tasks.filter((item) => item.status === 'In Progress'),
},
{
icon: 'taskstop',
title: 'Deferred',
tasks: tasks.filter((item) => item.status === 'Deferred'),
},
{
icon: 'taskrejected',
title: 'Rejected',
tasks: tasks.filter((item) => item.status === 'Rejected'),
},
{
icon: 'taskcomplete',
title: 'Completed',
tasks: tasks.filter((item) => item.status === 'Completed'),
},
];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@24.1.7/cjs',
'devextreme-react': 'npm:devextreme-react@24.1.7/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.12/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import TaskItem from './TaskItem.js';
function TabPanelItem({ data }) {
const taskItems = data.tasks.map((task, index) => (
<TaskItem
key={index}
prop={task}
/>
));
return <div className="tabpanel-item">{taskItems}</div>;
}
export default TabPanelItem;
import React from 'react';
function TaskItem({ prop }) {
return (
<div className={`task-item task-item-priority-${prop.priority}`}>
<span className="task-item-text">{prop.text}</span>
<span className="task-item-info">{`${prop.date} by ${prop.assignedBy}`}</span>
<i className="task-item-pseudo-button dx-icon dx-icon-overflow"></i>
</div>
);
}
export default TaskItem;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const tabsPositionsSelectBoxLabel = { 'aria-label': 'Tab position' };
export const tabsPositions = ['left', 'top', 'right', 'bottom'];
export const stylingModesSelectBoxLabel = { 'aria-label': 'Styling mode' };
export const stylingModes = ['secondary', 'primary'];
export const iconPositionsSelectBoxLabel = { 'aria-label': 'Icon positions' };
export const iconPositions = ['top', 'start', 'end', 'bottom'];
const tasks = [
{
status: 'Not Started',
priority: 'high',
text: 'Revenue Projections',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Not Started',
priority: 'high',
text: 'New Brochures',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Not Started',
priority: 'medium',
text: 'Training',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Not Started',
priority: 'medium',
text: 'NDA',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Not Started',
priority: 'low',
text: 'Health Insurance',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Help Needed',
priority: 'low',
text: 'TV Recall',
date: '2023/09/16',
assignedBy: 'Brett Wade',
},
{
status: 'Help Needed',
priority: 'low',
text: 'Recall and Refund Forms',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Help Needed',
priority: 'high',
text: 'Shippers',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Help Needed',
priority: 'medium',
text: 'Hardware Upgrade',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Online Sales',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'In Progress',
priority: 'medium',
text: 'New Website Design',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'In Progress',
priority: 'low',
text: 'Bandwidth Increase',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'In Progress',
priority: 'medium',
text: 'Support',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'In Progress',
priority: 'low',
text: 'Training Material',
date: '2023/09/16',
assignedBy: 'John Heart',
},
{
status: 'Deferred',
priority: 'medium',
text: 'New Database',
date: '2023/09/16',
assignedBy: 'Samantha Bright',
},
{
status: 'Deferred',
priority: 'high',
text: 'Automation Server',
date: '2023/09/16',
assignedBy: 'Arthur Miller',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Retail Sales',
date: '2023/09/16',
assignedBy: 'Robert Reagan',
},
{
status: 'Deferred',
priority: 'medium',
text: 'Shipping Labels',
date: '2023/09/16',
assignedBy: 'Greta Sims',
},
{
status: 'Rejected',
priority: 'high',
text: 'Schedule Meeting with Sales Team',
date: '2023/09/16',
assignedBy: 'Sandra Johnson',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Confirm Availability for Sales Meeting',
date: '2023/09/16',
assignedBy: 'Ed Holmes',
},
{
status: 'Rejected',
priority: 'medium',
text: 'Reschedule Sales Team Meeting',
date: '2023/09/16',
assignedBy: 'Barb Banks',
},
{
status: 'Rejected',
priority: 'high',
text: 'Update Database with New Leads',
date: '2023/09/16',
assignedBy: 'Kevin Carter',
},
{
status: 'Rejected',
priority: 'low',
text: 'Send Territory Sales Breakdown',
date: '2023/09/16',
assignedBy: 'Cindy Stanwick',
},
{
status: 'Completed',
priority: 'medium',
text: 'Territory Sales Breakdown Report',
date: '2023/09/16',
assignedBy: 'Sammy Hill',
},
{
status: 'Completed',
priority: 'low',
text: 'Return Merchandise Report',
date: '2023/09/16',
assignedBy: 'Davey Jones',
},
{
status: 'Completed',
priority: 'high',
text: 'Staff Productivity Report',
date: '2023/09/16',
assignedBy: 'Victor Norris',
},
{
status: 'Completed',
priority: 'medium',
text: 'Review HR Budget Company Wide',
date: '2023/09/16',
assignedBy: 'Mary Stern',
},
];
export const dataSource = [
{
icon: 'description',
title: 'Not Started',
tasks: tasks.filter((item) => item.status === 'Not Started'),
},
{
icon: 'taskhelpneeded',
title: 'Help Needed',
tasks: tasks.filter((item) => item.status === 'Help Needed'),
},
{
icon: 'taskinprogress',
title: 'In Progress',
tasks: tasks.filter((item) => item.status === 'In Progress'),
},
{
icon: 'taskstop',
title: 'Deferred',
tasks: tasks.filter((item) => item.status === 'Deferred'),
},
{
icon: 'taskrejected',
title: 'Rejected',
tasks: tasks.filter((item) => item.status === 'Rejected'),
},
{
icon: 'taskcomplete',
title: 'Completed',
tasks: tasks.filter((item) => item.status === 'Completed'),
},
];
<!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/24.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/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>
.tabpanel-demo {
display: flex;
height: 100%;
}
.widget-container {
display: flex;
justify-content: center;
flex-grow: 1;
min-width: 360px;
padding: 16px 32px;
}
.tabpanel-demo .dx-tabpanel {
background-color: var(--dx-component-color-bg);
}
.dx-theme-material .widget-container {
background-color: rgba(191, 191, 191, 0.15);
}
.dx-tabpanel-tabs-position-left .dx-tabpanel-container,
.dx-tabpanel-tabs-position-right .dx-tabpanel-container {
width: 0;
}
.dx-viewport:not(.dx-theme-generic) .dx-tabpanel {
border-radius: 8px;
overflow: clip;
}
.dx-tabs-vertical {
min-width: 120px;
}
.options {
display: inline-flex;
flex-direction: column;
flex-shrink: 0;
box-sizing: border-box;
width: 272px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-weight: 500;
font-size: 18px;
}
.option {
margin-top: 20px;
}
.tabpanel-item {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
}
.task-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 50px;
padding: 8px 12px 8px 8px;
border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.task-item::before {
content: "";
position: absolute;
top: 8px;
left: 6px;
bottom: 8px;
width: 3px;
border-radius: 4px;
}
.task-item-priority-high::before {
background-color: #e1bee7;
}
.task-item-priority-medium::before {
background-color: #ffe0b2;
}
.task-item-priority-low::before {
background-color: #c8e6c9;
}
.task-item-text,
.task-item-info {
margin: 0;
padding: 0 24px 0 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-item-info {
font-size: 12px;
opacity: 0.6;
}
.task-item-pseudo-button {
position: absolute;
right: 8px;
top: 50%;
font-size: 18px;
transform: translateY(-50%);
cursor: pointer;
opacity: 0.6;
}
.dx-color-scheme-contrast .task-item {
border: 1px solid #fff;
}
.dx-theme-fluent.dx-color-scheme-blue-dark .task-item {
background-color: #1f1f1f;
}