From 611eabd77239a6952f39a06a1d3440d8fd03be5b Mon Sep 17 00:00:00 2001 From: habubey Date: Wed, 30 Nov 2022 15:27:06 +0300 Subject: [PATCH] Add new Doc OrganizationChart --- .../doc/organizationchart/advanceddoc.js | 309 ++++++ components/doc/organizationchart/apidoc.js | 197 ++++ components/doc/organizationchart/basicdoc.js | 136 +++ components/doc/organizationchart/importdoc.js | 17 + components/doc/organizationchart/index.js | 931 ------------------ pages/organizationchart/index.js | 167 +--- 6 files changed, 696 insertions(+), 1061 deletions(-) create mode 100644 components/doc/organizationchart/advanceddoc.js create mode 100644 components/doc/organizationchart/apidoc.js create mode 100644 components/doc/organizationchart/basicdoc.js create mode 100644 components/doc/organizationchart/importdoc.js delete mode 100644 components/doc/organizationchart/index.js diff --git a/components/doc/organizationchart/advanceddoc.js b/components/doc/organizationchart/advanceddoc.js new file mode 100644 index 0000000000..632c4068f4 --- /dev/null +++ b/components/doc/organizationchart/advanceddoc.js @@ -0,0 +1,309 @@ +import { useState } from 'react'; +import { OrganizationChart } from '../../lib/organizationchart/OrganizationChart'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function AdvancedDoc(props) { + const [selection, setSelection] = useState([]); + const data = [ + { + label: 'CEO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Walter White', avatar: 'walter.jpg' }, + children: [ + { + label: 'CFO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Saul Goodman', avatar: 'saul.jpg' }, + children: [ + { + label: 'Tax', + className: 'department-cfo' + }, + { + label: 'Legal', + className: 'department-cfo' + } + ] + }, + { + label: 'COO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Mike E.', avatar: 'mike.jpg' }, + children: [ + { + label: 'Operations', + className: 'department-coo' + } + ] + }, + { + label: 'CTO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Jesse Pinkman', avatar: 'jesse.jpg' }, + children: [ + { + label: 'Development', + className: 'department-cto', + expanded: true, + children: [ + { + label: 'Analysis', + className: 'department-cto' + }, + { + label: 'Front End', + className: 'department-cto' + }, + { + label: 'Back End', + className: 'department-cto' + } + ] + }, + { + label: 'QA', + className: 'department-cto' + }, + { + label: 'R&D', + className: 'department-cto' + } + ] + } + ] + } + ]; + + const nodeTemplate = (node) => { + if (node.type === 'person') { + return ( +
+
{node.label}
+
+ {node.data.avatar} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} style={{ width: '32px' }} /> +
{node.data.name}
+
+
+ ); + } + + return node.label; + }; + + const code = { + basic: ` + setSelection(event.data)} className="company"> + `, + javascript: ` +import { useState } from 'react'; +import { OrganizationChart } from 'primereact/organizationchart'; + +export default function AdvancedDoc() { + const [selection, setSelection] = useState([]); + const data = [{ + label: 'CEO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Walter White', 'avatar': 'walter.jpg' }, + children: [ + { + label: 'CFO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' }, + children: [{ + label: 'Tax', + className: 'department-cfo' + }, + { + label: 'Legal', + className: 'department-cfo' + }], + }, + { + label: 'COO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Mike E.', 'avatar': 'mike.jpg' }, + children: [{ + label: 'Operations', + className: 'department-coo' + }] + }, + { + label: 'CTO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' }, + children: [{ + label: 'Development', + className: 'department-cto', + expanded: true, + children: [{ + label: 'Analysis', + className: 'department-cto' + }, + { + label: 'Front End', + className: 'department-cto' + }, + { + label: 'Back End', + className: 'department-cto' + }] + }, + { + label: 'QA', + className: 'department-cto' + }, + { + label: 'R&D', + className: 'department-cto' + }] + } + ] + }]; + + const nodeTemplate = (node) => { + if (node.type === "person") { + return ( +
+
{node.label}
+
+ {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> +
{node.data.name}
+
+
+ ); + } + + return node.label; + } + + return ( + setSelection(event.data)} className="company"> + ) +} + `, + typescript: ` +import { useState } from 'react'; +import { OrganizationChart } from 'primereact/organizationchart'; + +export default function AdvancedDoc() { + const [selection, setSelection] = useState([]); + const data = [{ + label: 'CEO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Walter White', 'avatar': 'walter.jpg' }, + children: [ + { + label: 'CFO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' }, + children: [{ + label: 'Tax', + className: 'department-cfo' + }, + { + label: 'Legal', + className: 'department-cfo' + }], + }, + { + label: 'COO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Mike E.', 'avatar': 'mike.jpg' }, + children: [{ + label: 'Operations', + className: 'department-coo' + }] + }, + { + label: 'CTO', + type: 'person', + className: 'p-person', + expanded: true, + data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' }, + children: [{ + label: 'Development', + className: 'department-cto', + expanded: true, + children: [{ + label: 'Analysis', + className: 'department-cto' + }, + { + label: 'Front End', + className: 'department-cto' + }, + { + label: 'Back End', + className: 'department-cto' + }] + }, + { + label: 'QA', + className: 'department-cto' + }, + { + label: 'R&D', + className: 'department-cto' + }] + } + ] + }]; + + const nodeTemplate = (node) => { + if (node.type === "person") { + return ( +
+
{node.label}
+
+ {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> +
{node.data.name}
+
+
+ ); + } + + return node.label; + } + + return ( + setSelection(event.data)} className="company"> + ) +} + ` + }; + + return ( + <> + +

Label of the treenode is displayed inside the node content by default and templating enables further customization.

+ +
+ setSelection(event.data)} className="company"> +
+ + + ); +} diff --git a/components/doc/organizationchart/apidoc.js b/components/doc/organizationchart/apidoc.js new file mode 100644 index 0000000000..724efb48e5 --- /dev/null +++ b/components/doc/organizationchart/apidoc.js @@ -0,0 +1,197 @@ +import Link from 'next/link'; +import { CodeHighlight } from '../common/codehighlight'; +import { DevelopmentSection } from '../common/developmentsection'; +import { DocSectionText } from '../common/docsectiontext'; +import { DocSubSection } from '../common/docsubsection'; + +export function ApiDoc(props) { + return ( + <> + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of nested TreeNodes.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
selectionModestringnullDefines the selection mode, valid values "single" and "multiple".
selectionanynullA single treenode instance or an array to refer to the selections.
nodeTemplatefunctionnullTemplate function that gets a node as a parameter and returns a content.
+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameParametersDescription
onNodeSelect + event.originalEvent: browser event
+ event.node: Selected node instance. + 		Callback to invoke when a node is selected.
onNodeUnselect + event.originalEvent: browser event
+ event.node: Unselected node instance. + 		Callback to invoke when a node is unselected.
onSelectionChange + event.originalEvent: browser event
+ event.data: New selection. + 		Callback to invoke when node selection changes.
+
+ + + +

Following is the list of structural style classes.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-organizationchartContainer element.
p-organizationchart-tableTable container of a node.
p-organizationchart-linesConnector lines container.
p-organizationchart-nodesContained of node children.
p-organizationchart-line-rightRight side line of a node connector.
p-organizationchart-line-leftLeft side line of a node connector.
p-organizationchart-line-topTop side line of a node connector.
+
+ + + + +

Screen Reader

+

+ Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for + high level of reader support in the upcoming versions. +

+ +

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus through the focusable elements within the chart.
+ enter + Toggles the expanded state of a node.
+ space + Toggles the expanded state of a node.
+
+ + + + ); +} diff --git a/components/doc/organizationchart/basicdoc.js b/components/doc/organizationchart/basicdoc.js new file mode 100644 index 0000000000..6b4e83887f --- /dev/null +++ b/components/doc/organizationchart/basicdoc.js @@ -0,0 +1,136 @@ +import { OrganizationChart } from '../../lib/organizationchart/OrganizationChart'; +import { DocSectionCode } from '../common/docsectioncode'; +import { DocSectionText } from '../common/docsectiontext'; + +export function BasicDoc(props) { + const data = [ + { + label: 'F.C Barcelona', + expanded: true, + children: [ + { + label: 'F.C Barcelona', + expanded: true, + children: [ + { + label: 'Chelsea FC' + }, + { + label: 'F.C. Barcelona' + } + ] + }, + { + label: 'Real Madrid', + expanded: true, + children: [ + { + label: 'Bayern Munich' + }, + { + label: 'Real Madrid' + } + ] + } + ] + } + ]; + + const code = { + basic: ` + + `, + javascript: ` +import { OrganizationChart } from 'primereact/organizationchart'; + +export default function BasicDoc() { + const data = [{ + label: 'F.C Barcelona', + expanded: true, + children: [ + { + label: 'F.C Barcelona', + expanded: true, + children: [ + { + label: 'Chelsea FC' + }, + { + label: 'F.C. Barcelona' + } + ] + }, + { + label: 'Real Madrid', + expanded: true, + children: [ + { + label: 'Bayern Munich' + }, + { + label: 'Real Madrid' + } + ] + } + ] + }]; + + return ( + + ) +} + `, + typescript: ` +import { OrganizationChart } from 'primereact/organizationchart'; + +export default function BasicDoc() { + const data = [{ + label: 'F.C Barcelona', + expanded: true, + children: [ + { + label: 'F.C Barcelona', + expanded: true, + children: [ + { + label: 'Chelsea FC' + }, + { + label: 'F.C. Barcelona' + } + ] + }, + { + label: 'Real Madrid', + expanded: true, + children: [ + { + label: 'Bayern Munich' + }, + { + label: 'Real Madrid' + } + ] + } + ] + }]; + + return ( + + ) +} + ` + }; + + return ( + <> + +

OrganizationChart requires a model of TreeNode as its value.

+ +
+ +
+ + + ); +} diff --git a/components/doc/organizationchart/importdoc.js b/components/doc/organizationchart/importdoc.js new file mode 100644 index 0000000000..f575f02400 --- /dev/null +++ b/components/doc/organizationchart/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionText } from '../common/docsectiontext'; +import { DocSectionCode } from '../common/docsectioncode'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { OrganizationChart } from 'primereact/organizationchart'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/organizationchart/index.js b/components/doc/organizationchart/index.js deleted file mode 100644 index ec6f003c87..0000000000 --- a/components/doc/organizationchart/index.js +++ /dev/null @@ -1,931 +0,0 @@ -import React, { memo } from 'react'; -import { TabView, TabPanel } from '../../lib/tabview/TabView'; -import { useLiveEditorTabs } from '../common/liveeditor'; -import { CodeHighlight } from '../common/codehighlight'; -import { DevelopmentSection } from '../common/developmentsection'; - -const OrganizationChartDoc = memo(() => { - const sources = { - class: { - tabName: 'Class Source', - content: ` -import React, { Component } from 'react'; -import { OrganizationChart } from 'primereact/organizationchart'; -import './OrganizationChartDemo.css'; - -export class OrganizationChartDemo extends Component { - - constructor(props) { - super(props); - - this.state = { - selection: [] - }; - - this.data1 = [{ - label: 'CEO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Walter White', 'avatar': 'walter.jpg' }, - children: [ - { - label: 'CFO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' }, - children: [{ - label: 'Tax', - className: 'department-cfo' - }, - { - label: 'Legal', - className: 'department-cfo' - }], - }, - { - label: 'COO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Mike E.', 'avatar': 'mike.jpg' }, - children: [{ - label: 'Operations', - className: 'department-coo' - }] - }, - { - label: 'CTO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' }, - children: [{ - label: 'Development', - className: 'department-cto', - expanded: true, - children: [{ - label: 'Analysis', - className: 'department-cto' - }, - { - label: 'Front End', - className: 'department-cto' - }, - { - label: 'Back End', - className: 'department-cto' - }] - }, - { - label: 'QA', - className: 'department-cto' - }, - { - label: 'R&D', - className: 'department-cto' - }] - } - ] - }]; - - this.data2 = [{ - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'Chelsea FC' - }, - { - label: 'F.C. Barcelona' - } - ] - }, - { - label: 'Real Madrid', - expanded: true, - children: [ - { - label: 'Bayern Munich' - }, - { - label: 'Real Madrid' - } - ] - } - ] - }]; - - this.nodeTemplate = this.nodeTemplate.bind(this); - } - - nodeTemplate(node) { - if (node.type === "person") { - return ( -
-
{node.label}
-
- {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> -
{node.data.name}
-
-
- ); - } - - return node.label; - } - - render() { - return ( -
-
-
Advanced
- this.setState({ selection: event.data })} className="company"> - -
Basic
- -
-
- ) - } -} - ` - }, - hooks: { - tabName: 'Hooks Source', - content: ` -import React, { useState } from 'react'; -import { OrganizationChart } from 'primereact/organizationchart'; -import './OrganizationChartDemo.css'; - -const OrganizationChartDemo = () => { - const [selection, setSelection] = useState([]); - const data1 = [{ - label: 'CEO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Walter White', 'avatar': 'walter.jpg' }, - children: [ - { - label: 'CFO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' }, - children: [{ - label: 'Tax', - className: 'department-cfo' - }, - { - label: 'Legal', - className: 'department-cfo' - }], - }, - { - label: 'COO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Mike E.', 'avatar': 'mike.jpg' }, - children: [{ - label: 'Operations', - className: 'department-coo' - }] - }, - { - label: 'CTO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' }, - children: [{ - label: 'Development', - className: 'department-cto', - expanded: true, - children: [{ - label: 'Analysis', - className: 'department-cto' - }, - { - label: 'Front End', - className: 'department-cto' - }, - { - label: 'Back End', - className: 'department-cto' - }] - }, - { - label: 'QA', - className: 'department-cto' - }, - { - label: 'R&D', - className: 'department-cto' - }] - } - ] - }]; - - const data2 = [{ - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'Chelsea FC' - }, - { - label: 'F.C. Barcelona' - } - ] - }, - { - label: 'Real Madrid', - expanded: true, - children: [ - { - label: 'Bayern Munich' - }, - { - label: 'Real Madrid' - } - ] - } - ] - }]; - - const nodeTemplate = (node) => { - if (node.type === "person") { - return ( -
-
{node.label}
-
- {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> -
{node.data.name}
-
-
- ); - } - - return node.label; - } - - return ( -
-
-
Advanced
- setSelection(event.data)} className="company"> - -
Basic
- -
-
- ) -} - ` - }, - ts: { - tabName: 'TS Source', - content: ` -import React, { useState } from 'react'; -import { OrganizationChart } from 'primereact/organizationchart'; -import './OrganizationChartDemo.css'; - -const OrganizationChartDemo = () => { - const [selection, setSelection] = useState([]); - const data1 = [{ - label: 'CEO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Walter White', 'avatar': 'walter.jpg' }, - children: [ - { - label: 'CFO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' }, - children: [{ - label: 'Tax', - className: 'department-cfo' - }, - { - label: 'Legal', - className: 'department-cfo' - }], - }, - { - label: 'COO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Mike E.', 'avatar': 'mike.jpg' }, - children: [{ - label: 'Operations', - className: 'department-coo' - }] - }, - { - label: 'CTO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' }, - children: [{ - label: 'Development', - className: 'department-cto', - expanded: true, - children: [{ - label: 'Analysis', - className: 'department-cto' - }, - { - label: 'Front End', - className: 'department-cto' - }, - { - label: 'Back End', - className: 'department-cto' - }] - }, - { - label: 'QA', - className: 'department-cto' - }, - { - label: 'R&D', - className: 'department-cto' - }] - } - ] - }]; - - const data2 = [{ - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'Chelsea FC' - }, - { - label: 'F.C. Barcelona' - } - ] - }, - { - label: 'Real Madrid', - expanded: true, - children: [ - { - label: 'Bayern Munich' - }, - { - label: 'Real Madrid' - } - ] - } - ] - }]; - - const nodeTemplate = (node) => { - if (node.type === "person") { - return ( -
-
{node.label}
-
- {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> -
{node.data.name}
-
-
- ); - } - - return node.label; - } - - return ( -
-
-
Advanced
- setSelection(event.data)} className="company"> - -
Basic
- -
-
- ) -} - ` - }, - browser: { - tabName: 'Browser Source', - imports: ` - - - - `, - content: ` -const { useState } = React; -const { OrganizationChart } = primereact.organizationchart; - -const OrganizationChartDemo = () => { - const [selection, setSelection] = useState([]); - const data1 = [{ - label: 'CEO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Walter White', 'avatar': 'walter.jpg' }, - children: [ - { - label: 'CFO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Saul Goodman', 'avatar': 'saul.jpg' }, - children: [{ - label: 'Tax', - className: 'department-cfo' - }, - { - label: 'Legal', - className: 'department-cfo' - }], - }, - { - label: 'COO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Mike E.', 'avatar': 'mike.jpg' }, - children: [{ - label: 'Operations', - className: 'department-coo' - }] - }, - { - label: 'CTO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Jesse Pinkman', 'avatar': 'jesse.jpg' }, - children: [{ - label: 'Development', - className: 'department-cto', - expanded: true, - children: [{ - label: 'Analysis', - className: 'department-cto' - }, - { - label: 'Front End', - className: 'department-cto' - }, - { - label: 'Back End', - className: 'department-cto' - }] - }, - { - label: 'QA', - className: 'department-cto' - }, - { - label: 'R&D', - className: 'department-cto' - }] - } - ] - }]; - - const data2 = [{ - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'Chelsea FC' - }, - { - label: 'F.C. Barcelona' - } - ] - }, - { - label: 'Real Madrid', - expanded: true, - children: [ - { - label: 'Bayern Munich' - }, - { - label: 'Real Madrid' - } - ] - } - ] - }]; - - const nodeTemplate = (node) => { - if (node.type === "person") { - return ( -
-
{node.label}
-
- {node.data.avatar} e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} style={{ width: '32px' }} /> -
{node.data.name}
-
-
- ); - } - - return node.label; - } - - return ( -
-
-
Advanced
- setSelection(event.data)} className="company"> - -
Basic
- -
-
- ) -} - ` - } - }; - - const extFiles = { - 'demo/OrganizationChartDemo.css': { - content: ` -.organizationchart-demo .card { - overflow-x: auto; -} - -.organizationchart-demo .p-organizationchart .p-person { - padding: 0; - border: 0 none; -} - -.organizationchart-demo .p-organizationchart .node-header, .organizationchart-demo .p-organizationchart .node-content { - padding: .5em .7rem; -} - -.organizationchart-demo .p-organizationchart .node-header { - background-color: #495ebb; - color: #ffffff; -} - -.organizationchart-demo .p-organizationchart .node-content { - text-align: center; - border: 1px solid #495ebb; -} - -.organizationchart-demo .p-organizationchart .node-content img { - border-radius: 50%; -} - -.organizationchart-demo .p-organizationchart .department-cfo { - background-color: #7247bc; - color: #ffffff; -} - -.organizationchart-demo .p-organizationchart .department-coo { - background-color: #a534b6; - color: #ffffff; -} - -.organizationchart-demo .p-organizationchart .department-cto { - background-color: #e9286f; - color: #ffffff; -} - ` - } - }; - - return ( -
- - -
Import via Module
- - {` -import { OrganizationChart } from 'primereact/organizationchart'; -`} - - -
Import via CDN
- - {` - - -`} - - -
Getting Started
-

OrganizationChart requires a model of TreeNode as its value.

- - {` -export const OrganizationChartDemo = () => { - - const data = [{ - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'Chelsea FC' - }, - { - label: 'F.C. Barcelona' - } - ] - }, - { - label: 'Real Madrid', - expanded: true, - children: [ - { - label: 'Bayern Munich' - }, - { - label: 'Real Madrid' - } - ] - } - ] - }]; - - return ( - - ) -} -`} - - -
Templating
-

Label of the treenode is displayed inside the node content by default and templating enables further customization.

- - - {` - -`} - - - - {` - -const nodeTemplate = (node) => { - if (node.type === "person") { - return ( -
-
{node.label}
-
- {node.data.avatar} -
{node.data.name}
-
-
- ); - } - - if (node.type === "department") { - return node.label; - } -} -`} - - -
Expand/Collapse State
-

In order to display a treenode as expanded by default, set "expanded" property as true in your model.

- -
Selection
-

- OrganizationChart supports two selection methods; single or multiple. Selection is enabled by setting selectionMode property to the corresponding mode, defining selection property along with{' '} - selectionChange callback. -

- - {` - setSelectedNode(event.data)}> -`} - - -
Properties
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
idstringnullUnique identifier of the element.
valuearraynullAn array of nested TreeNodes.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
selectionModestringnullDefines the selection mode, valid values "single" and "multiple".
selectionanynullA single treenode instance or an array to refer to the selections.
nodeTemplatefunctionnullTemplate function that gets a node as a parameter and returns a content.
-
- -
Events
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
onNodeSelect - event.originalEvent: browser event
- event.node: Selected node instance. - 		Callback to invoke when a node is selected.
onNodeUnselect - event.originalEvent: browser event
- event.node: Unselected node instance. - 		Callback to invoke when a node is unselected.
onSelectionChange - event.originalEvent: browser event
- event.data: New selection. - 		Callback to invoke when node selection changes.
-
- -
Styling
-

Following is the list of structural style classes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameElement
p-organizationchartContainer element.
p-organizationchart-tableTable container of a node.
p-organizationchart-linesConnector lines container.
p-organizationchart-nodesContained of node children.
p-organizationchart-line-rightRight side line of a node connector.
p-organizationchart-line-leftLeft side line of a node connector.
p-organizationchart-line-topTop side line of a node connector.
-
- -
Accessibility
- -
Screen Reader
-

- Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget - for high level of reader support in the upcoming versions. -

- -
Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus through the focusable elements within the chart.
- enter - Toggles the expanded state of a node.
- space - Toggles the expanded state of a node.
-
- - -
Dependencies
-

None.

- - - {useLiveEditorTabs({ name: 'OrganizationChartDemo', sources: sources, extFiles: extFiles })} - -
- ); -}); - -export default OrganizationChartDoc; diff --git a/pages/organizationchart/index.js b/pages/organizationchart/index.js index 0e22252746..c85b3bde38 100644 --- a/pages/organizationchart/index.js +++ b/pages/organizationchart/index.js @@ -1,140 +1,54 @@ -import React, { useState } from 'react'; -import { OrganizationChart } from '../../components/lib/organizationchart/OrganizationChart'; -import OrganizationChartDoc from '../../components/doc/organizationchart'; -import { DocActions } from '../../components/doc/common/docactions'; import Head from 'next/head'; -import getConfig from 'next/config'; +import { DocSectionNav } from '../../components/doc/common/docsectionnav'; +import { DocSections } from '../../components/doc/common/docsections'; +import { DocActions } from '../../components/doc/common/docactions'; +import { ImportDoc } from '../../components/doc/organizationchart/importdoc'; +import { ApiDoc } from '../../components/doc/organizationchart/apidoc'; +import { AdvancedDoc } from '../../components/doc/organizationchart/advanceddoc'; +import { BasicDoc } from '../../components/doc/organizationchart/basicdoc'; const OrganizationChartDemo = () => { - const [selection, setSelection] = useState([]); - const contextPath = getConfig().publicRuntimeConfig.contextPath; - const data1 = [ + const docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + { + id: 'advanced', + label: 'Advanced', + component: AdvancedDoc + }, { - label: 'CEO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Walter White', avatar: 'walter.jpg' }, + id: 'api', + label: 'API', + component: ApiDoc, children: [ { - label: 'CFO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Saul Goodman', avatar: 'saul.jpg' }, - children: [ - { - label: 'Tax', - className: 'department-cfo' - }, - { - label: 'Legal', - className: 'department-cfo' - } - ] + id: 'properties', + label: 'Properties' }, { - label: 'COO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Mike E.', avatar: 'mike.jpg' }, - children: [ - { - label: 'Operations', - className: 'department-coo' - } - ] + id: 'events', + label: 'Events' }, { - label: 'CTO', - type: 'person', - className: 'p-person', - expanded: true, - data: { name: 'Jesse Pinkman', avatar: 'jesse.jpg' }, - children: [ - { - label: 'Development', - className: 'department-cto', - expanded: true, - children: [ - { - label: 'Analysis', - className: 'department-cto' - }, - { - label: 'Front End', - className: 'department-cto' - }, - { - label: 'Back End', - className: 'department-cto' - } - ] - }, - { - label: 'QA', - className: 'department-cto' - }, - { - label: 'R&D', - className: 'department-cto' - } - ] - } - ] - } - ]; - - const data2 = [ - { - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'F.C Barcelona', - expanded: true, - children: [ - { - label: 'Chelsea FC' - }, - { - label: 'F.C. Barcelona' - } - ] + id: 'styling', + label: 'Styling' }, { - label: 'Real Madrid', - expanded: true, - children: [ - { - label: 'Bayern Munich' - }, - { - label: 'Real Madrid' - } - ] + id: 'accessibility', + label: 'Accessibility' } ] } ]; - const nodeTemplate = (node) => { - if (node.type === 'person') { - return ( -
-
{node.label}
-
- {node.data.avatar} (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} style={{ width: '32px' }} /> -
{node.data.name}
-
-
- ); - } - - return node.label; - }; - return (
@@ -150,17 +64,10 @@ const OrganizationChartDemo = () => {
-
-
-
Advanced
- setSelection(event.data)} className="company"> - -
Basic
- -
+
+ +
- -
); };