RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/Tree_View/ItemSelectionAndCustomization/ below:

Selection and Customization - React Tree View

import React, { useCallback, useRef, useState } from 'react'; import TreeView, { type TreeViewTypes } from 'devextreme-react/tree-view'; import List from 'devextreme-react/list'; import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box'; import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box'; import { employees, showCheckboxesModeLabel, selectionModeLabel } from './data.ts'; const showCheckBoxesModes: TreeViewTypes.TreeViewCheckBoxMode[] = ['normal', 'selectAll', 'none']; const selectionModes: TreeViewTypes.SingleOrMultiple[] = ['multiple', 'single']; const renderTreeViewItem = (item: { fullName: any; position: any; }) => `${item.fullName} (${item.position})`; const renderListItem = (item: { prefix: any; fullName: any; position: any; }) => `${item.prefix} ${item.fullName} (${item.position})`; const App = () => { const treeViewRef = useRef(null); const [selectedEmployees, setSelectedEmployees] = useState([]); const [selectNodesRecursive, setSelectNodesRecursive] = useState(true); const [selectByClick, setSelectByClick] = useState(false); const [showCheckBoxesMode, setShowCheckBoxesMode] = useState(showCheckBoxesModes[0]); const [selectionMode, setSelectionMode] = useState(selectionModes[0]); const [isSelectionModeDisabled, setIsSelectionModeDisabled] = useState(false); const [isRecursiveDisabled, setIsRecursiveDisabled] = useState(false); const syncSelection = useCallback((treeView) => { const syncSelectedEmployees = treeView.getSelectedNodes() .map((node) => node.itemData); setSelectedEmployees(syncSelectedEmployees); }, [setSelectedEmployees]); const treeViewSelectionChanged = useCallback((e: TreeViewTypes.SelectionChangedEvent) => { syncSelection(e.component); }, [syncSelection]); const treeViewContentReady = useCallback((e: TreeViewTypes.ContentReadyEvent) => { syncSelection(e.component); }, [syncSelection]); const showCheckBoxesModeValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { const value = e.value; setShowCheckBoxesMode(value); if (value === 'selectAll') { setSelectionMode('multiple'); setIsRecursiveDisabled(false); } setIsSelectionModeDisabled(value === 'selectAll'); }, [setShowCheckBoxesMode, setSelectionMode, setIsRecursiveDisabled, setIsSelectionModeDisabled]); const selectionModeValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { const value = e.value; setSelectionMode(value); if (value === 'single') { setSelectNodesRecursive(false); treeViewRef.current.instance().unselectAll(); } setIsRecursiveDisabled(value === 'single'); }, [setSelectionMode, setSelectNodesRecursive, setIsRecursiveDisabled]); const selectNodesRecursiveValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => { setSelectNodesRecursive(e.value); }, [setSelectNodesRecursive]); const selectByClickValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => { setSelectByClick(e.value); }, [setSelectByClick]); return ( <div> <div className="form"> <h4>Employees</h4> <TreeView id="treeview" ref={treeViewRef} width={340} height={320} items={employees} selectNodesRecursive={selectNodesRecursive} selectByClick={selectByClick} showCheckBoxesMode={showCheckBoxesMode} selectionMode={selectionMode} onSelectionChanged={treeViewSelectionChanged} onContentReady={treeViewContentReady} itemRender={renderTreeViewItem} /> {' '} <div className="selected-container">Selected employees <List id="selected-employees" width={400} height={200} showScrollbar="always" items={selectedEmployees} itemRender={renderListItem} /> </div> </div> <div className="options"> <div className="caption">Options</div> <div className="options-container"> <div className="option"> <span>Show Check Boxes Mode:</span> <div className="editor-container"> <SelectBox items={showCheckBoxesModes} value={showCheckBoxesMode} inputAttr={showCheckboxesModeLabel} onValueChanged={showCheckBoxesModeValueChanged} /> </div> </div> <div className="option"> <span>Selection Mode:</span> <div className="editor-container"> <SelectBox items={selectionModes} value={selectionMode} inputAttr={selectionModeLabel} disabled={isSelectionModeDisabled} onValueChanged={selectionModeValueChanged} /> </div> </div> <div className="option"> <div className="caption-placeholder"> </div> <div className="editor-container"> <CheckBox text="Select Nodes Recursive" value={selectNodesRecursive} disabled={isRecursiveDisabled} onValueChanged={selectNodesRecursiveValueChanged} /> </div> </div> <div className="option"> <div className="caption-placeholder"> </div> <div className="editor-container"> <CheckBox text="Select By Click" value={selectByClick} onValueChanged={selectByClickValueChanged} /> </div> </div> </div> </div> </div> ); }; export default App;

import React, { useCallback, useRef, useState } from 'react'; import TreeView from 'devextreme-react/tree-view'; import List from 'devextreme-react/list'; import SelectBox from 'devextreme-react/select-box'; import CheckBox from 'devextreme-react/check-box'; import { employees, showCheckboxesModeLabel, selectionModeLabel } from './data.js'; const showCheckBoxesModes = ['normal', 'selectAll', 'none']; const selectionModes = ['multiple', 'single']; const renderTreeViewItem = (item) => `${item.fullName} (${item.position})`; const renderListItem = (item) => `${item.prefix} ${item.fullName} (${item.position})`; const App = () => { const treeViewRef = useRef(null); const [selectedEmployees, setSelectedEmployees] = useState([]); const [selectNodesRecursive, setSelectNodesRecursive] = useState(true); const [selectByClick, setSelectByClick] = useState(false); const [showCheckBoxesMode, setShowCheckBoxesMode] = useState(showCheckBoxesModes[0]); const [selectionMode, setSelectionMode] = useState(selectionModes[0]); const [isSelectionModeDisabled, setIsSelectionModeDisabled] = useState(false); const [isRecursiveDisabled, setIsRecursiveDisabled] = useState(false); const syncSelection = useCallback( (treeView) => { const syncSelectedEmployees = treeView.getSelectedNodes().map((node) => node.itemData); setSelectedEmployees(syncSelectedEmployees); }, [setSelectedEmployees], ); const treeViewSelectionChanged = useCallback( (e) => { syncSelection(e.component); }, [syncSelection], ); const treeViewContentReady = useCallback( (e) => { syncSelection(e.component); }, [syncSelection], ); const showCheckBoxesModeValueChanged = useCallback( (e) => { const value = e.value; setShowCheckBoxesMode(value); if (value === 'selectAll') { setSelectionMode('multiple'); setIsRecursiveDisabled(false); } setIsSelectionModeDisabled(value === 'selectAll'); }, [setShowCheckBoxesMode, setSelectionMode, setIsRecursiveDisabled, setIsSelectionModeDisabled], ); const selectionModeValueChanged = useCallback( (e) => { const value = e.value; setSelectionMode(value); if (value === 'single') { setSelectNodesRecursive(false); treeViewRef.current.instance().unselectAll(); } setIsRecursiveDisabled(value === 'single'); }, [setSelectionMode, setSelectNodesRecursive, setIsRecursiveDisabled], ); const selectNodesRecursiveValueChanged = useCallback( (e) => { setSelectNodesRecursive(e.value); }, [setSelectNodesRecursive], ); const selectByClickValueChanged = useCallback( (e) => { setSelectByClick(e.value); }, [setSelectByClick], ); return ( <div> <div className="form"> <h4>Employees</h4> <TreeView id="treeview" ref={treeViewRef} width={340} height={320} items={employees} selectNodesRecursive={selectNodesRecursive} selectByClick={selectByClick} showCheckBoxesMode={showCheckBoxesMode} selectionMode={selectionMode} onSelectionChanged={treeViewSelectionChanged} onContentReady={treeViewContentReady} itemRender={renderTreeViewItem} />{' '} <div className="selected-container"> Selected employees <List id="selected-employees" width={400} height={200} showScrollbar="always" items={selectedEmployees} itemRender={renderListItem} /> </div> </div> <div className="options"> <div className="caption">Options</div> <div className="options-container"> <div className="option"> <span>Show Check Boxes Mode:</span> <div className="editor-container"> <SelectBox items={showCheckBoxesModes} value={showCheckBoxesMode} inputAttr={showCheckboxesModeLabel} onValueChanged={showCheckBoxesModeValueChanged} /> </div> </div> <div className="option"> <span>Selection Mode:</span> <div className="editor-container"> <SelectBox items={selectionModes} value={selectionMode} inputAttr={selectionModeLabel} disabled={isSelectionModeDisabled} onValueChanged={selectionModeValueChanged} /> </div> </div> <div className="option"> <div className="caption-placeholder"> </div> <div className="editor-container"> <CheckBox text="Select Nodes Recursive" value={selectNodesRecursive} disabled={isRecursiveDisabled} onValueChanged={selectNodesRecursiveValueChanged} /> </div> </div> <div className="option"> <div className="caption-placeholder"> </div> <div className="editor-container"> <CheckBox text="Select By Click" value={selectByClick} onValueChanged={selectByClickValueChanged} /> </div> </div> </div> </div> </div> ); }; export default App;

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

export const employees = [{ id: 1, fullName: 'John Heart', prefix: 'Dr.', position: 'CEO', expanded: true, items: [{ id: 2, fullName: 'Samantha Bright', prefix: 'Dr.', position: 'COO', expanded: true, items: [{ id: 3, fullName: 'Kevin Carter', prefix: 'Mr.', position: 'Shipping Manager', }, { id: 14, fullName: 'Victor Norris', prefix: 'Mr.', selected: true, position: 'Shipping Assistant', }], }, { id: 4, fullName: 'Brett Wade', prefix: 'Mr.', position: 'IT Manager', expanded: true, items: [{ id: 5, fullName: 'Amelia Harper', prefix: 'Mrs.', position: 'Network Admin', }, { id: 6, fullName: 'Wally Hobbs', prefix: 'Mr.', position: 'Programmer', }, { id: 7, fullName: 'Brad Jameson', prefix: 'Mr.', position: 'Programmer', }, { id: 8, fullName: 'Violet Bailey', prefix: 'Ms.', position: 'Jr Graphic Designer', }], }, { id: 9, fullName: 'Barb Banks', prefix: 'Mrs.', position: 'Support Manager', expanded: true, items: [{ id: 10, fullName: 'Kelly Rodriguez', prefix: 'Ms.', position: 'Support Assistant', }, { id: 11, fullName: 'James Anderson', prefix: 'Mr.', position: 'Support Assistant', }], }], }]; export const selectionModeLabel = { 'aria-label': 'Selection Mode' }; export const showCheckboxesModeLabel = { 'aria-label': 'Show Checkboxes Mode' };

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

export const employees = [ { id: 1, fullName: 'John Heart', prefix: 'Dr.', position: 'CEO', expanded: true, items: [ { id: 2, fullName: 'Samantha Bright', prefix: 'Dr.', position: 'COO', expanded: true, items: [ { id: 3, fullName: 'Kevin Carter', prefix: 'Mr.', position: 'Shipping Manager', }, { id: 14, fullName: 'Victor Norris', prefix: 'Mr.', selected: true, position: 'Shipping Assistant', }, ], }, { id: 4, fullName: 'Brett Wade', prefix: 'Mr.', position: 'IT Manager', expanded: true, items: [ { id: 5, fullName: 'Amelia Harper', prefix: 'Mrs.', position: 'Network Admin', }, { id: 6, fullName: 'Wally Hobbs', prefix: 'Mr.', position: 'Programmer', }, { id: 7, fullName: 'Brad Jameson', prefix: 'Mr.', position: 'Programmer', }, { id: 8, fullName: 'Violet Bailey', prefix: 'Ms.', position: 'Jr Graphic Designer', }, ], }, { id: 9, fullName: 'Barb Banks', prefix: 'Mrs.', position: 'Support Manager', expanded: true, items: [ { id: 10, fullName: 'Kelly Rodriguez', prefix: 'Ms.', position: 'Support Assistant', }, { id: 11, fullName: 'James Anderson', prefix: 'Mr.', position: 'Support Assistant', }, ], }, ], }, ]; export const selectionModeLabel = { 'aria-label': 'Selection Mode' }; export const showCheckboxesModeLabel = { 'aria-label': 'Show Checkboxes Mode' };

<!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.4/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>

.form > h4 { margin-bottom: 20px; } .form > div, #treeview { display: inline-block; vertical-align: top; } #selected-employees { margin-top: 20px; } .selected-container .dx-list-item-content { padding-left: 0; } .selected-container { padding: 20px; margin-left: 20px; background-color: rgba(191, 191, 191, 0.15); font-size: 115%; font-weight: bold; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; box-sizing: border-box; } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; margin-top: 10px; margin-right: 9px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .options-container { display: flex; justify-content: space-between; align-items: stretch; } .editor-container { height: 100%; display: flex; align-items: center; } .editor-container > * { width: 100%; } .option:last-of-type { margin-right: 0; }

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4