Skip to content

Commit

Permalink
Related #4602 - For OrgChart
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulasturann
ulasturann committed Aug 3, 2023
1 parent 5576a37 commit 659bb1a
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 93 deletions.
52 changes: 0 additions & 52 deletions components/lib/organizationchart/OrganizationChart.css
View file

This file was deleted.

11 changes: 6 additions & 5 deletions components/lib/organizationchart/OrganizationChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@ import { classNames, DomHandler, mergeProps } from '../utils/Utils';
import { OrganizationChartBase } from './OrganizationChartBase';
import { OrganizationChartNode } from './OrganizationChartNode';
import { PrimeReactContext } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';

export const OrganizationChart = React.memo(
React.forwardRef((inProps, ref) => {
const context = React.useContext(PrimeReactContext);
const props = OrganizationChartBase.getProps(inProps, context);
const { ptm } = OrganizationChartBase.setMetaData({
const { ptm, cx, sx, isUnstyled } = OrganizationChartBase.setMetaData({
props
});

useHandleStyle(OrganizationChartBase.css.styles, isUnstyled, { name: 'orgchart' });
const elementRef = React.useRef(null);
const root = props.value && props.value.length ? props.value[0] : null;

Expand Down Expand Up @@ -71,22 +74,20 @@ export const OrganizationChart = React.memo(
getElement: () => elementRef.current
}));

const className = classNames('p-organizationchart p-component', props.className);

const rootProps = mergeProps(
{
id: props.id,
ref: elementRef,
style: props.style,
className
className: classNames(props.className, cx('root'))
},
OrganizationChartBase.getOtherProps(props),
ptm('root')
);

return (
<div {...rootProps}>
<OrganizationChartNode node={root} nodeTemplate={props.nodeTemplate} selectionMode={props.selectionMode} onNodeClick={onNodeClick} isSelected={isSelected} togglerIcon={props.togglerIcon} ptm={ptm} />
<OrganizationChartNode node={root} nodeTemplate={props.nodeTemplate} selectionMode={props.selectionMode} onNodeClick={onNodeClick} isSelected={isSelected} togglerIcon={props.togglerIcon} ptm={ptm} cx={cx} sx={sx} />
</div>
);
})
Expand Down
85 changes: 85 additions & 0 deletions components/lib/organizationchart/OrganizationChartBase.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,84 @@
import { ComponentBase } from '../componentbase/ComponentBase';
import { classNames } from '../utils/Utils';

const styles = `
.p-organizationchart-table {
border-spacing: 0;
border-collapse: separate;
margin: 0 auto;
}
.p-organizationchart-table > tbody > tr > td {
text-align: center;
vertical-align: top;
padding: 0 .75rem;
}
.p-organizationchart-node-content {
display: inline-block;
position: relative;
}
.p-organizationchart-node-content .p-node-toggler {
position: absolute;
bottom: -.75rem;
margin-left: -.75rem;
z-index: 2;
left: 50%;
user-select: none;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
text-decoration: none;
}
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
position: relative;
top: .25rem;
}
.p-organizationchart-line-down {
margin: 0 auto;
height: 20px;
width: 1px;
}
.p-organizationchart-line-right {
border-radius: 0px;
}
.p-organizationchart-line-left {
border-radius: 0;
}
.p-organizationchart-selectable-node {
cursor: pointer;
}
`;

const classes = {
root: 'p-organizationchart p-component',
table: 'p-organizationchart-table',
node: ({ nodeProps: props, node, selected }) =>
classNames(
'p-organizationchart-node-content',
{
'p-organizationchart-selectable-node': props.selectionMode && node.selectable !== false,
'p-highlight': selected
},
node.className
),
nodes: 'p-organizationchart-nodes',
lines: 'p-organizationchart-lines',
lineDown: 'p-organizationchart-line-down',
nodeTogglerIcon: 'p-node-toggler-icon',
nodeToggler: 'p-node-toggler'
};

const inlineStyles = {
nodes: ({ visibility }) => ({ visibility }),
lines: ({ visibility }) => ({ visibility })
};

export const OrganizationChartBase = ComponentBase.extend({
defaultProps: {
Expand All @@ -15,5 +95,10 @@ export const OrganizationChartBase = ComponentBase.extend({
onNodeUnselect: null,
togglerIcon: null,
children: undefined
},
css: {
classes,
styles,
inlineStyles
}
});
71 changes: 36 additions & 35 deletions components/lib/organizationchart/OrganizationChartNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ export const OrganizationChartNode = React.memo((props) => {
const colspan = node.children && node.children.length ? node.children.length * 2 : null;
const selected = props.isSelected(node);
const visibility = !leaf && expandedState ? 'inherit' : 'hidden';
const { ptm, cx, sx } = props;

const getPTOptions = (key) => {
return props.ptm(key, {
return ptm(key, {
state: {
expanded: expandedState
},
Expand All @@ -34,16 +35,16 @@ export const OrganizationChartNode = React.memo((props) => {
const createChildNodes = () => {
const nodesProps = mergeProps(
{
className: 'p-organizationchart-nodes',
style: { visibility }
className: cx('nodes'),
style: sx('nodes', { visibility })
},
props.ptm('nodes')
ptm('nodes')
);
const nodeCellProps = mergeProps(
{
colSpan: '2'
},
props.ptm('nodeCell')
ptm('nodeCell')
);

return (
Expand All @@ -52,7 +53,17 @@ export const OrganizationChartNode = React.memo((props) => {
node.children.map((child, index) => {
return (
<td key={index} {...nodeCellProps}>
<OrganizationChartNode node={child} nodeTemplate={props.nodeTemplate} selectionMode={props.selectionMode} onNodeClick={props.onNodeClick} isSelected={props.isSelected} togglerIcon={props.togglerIcon} ptm={props.ptm} />
<OrganizationChartNode
node={child}
nodeTemplate={props.nodeTemplate}
selectionMode={props.selectionMode}
onNodeClick={props.onNodeClick}
isSelected={props.isSelected}
togglerIcon={props.togglerIcon}
ptm={ptm}
cx={cx}
sx={sx}
/>
</td>
);
})}
Expand All @@ -64,22 +75,22 @@ export const OrganizationChartNode = React.memo((props) => {
const nodeChildLength = node.children && node.children.length;
const linesProps = mergeProps(
{
className: 'p-organizationchart-lines',
style: { visibility }
className: cx('lines'),
style: sx('lines', { visibility })
},
props.ptm('lines')
ptm('lines')
);
const lineCellProps = mergeProps(
{
colSpan: colspan
},
props.ptm('lineCell')
ptm('lineCell')
);
const lineDownProps = mergeProps(
{
className: 'p-organizationchart-line-down'
className: cx('lineDown')
},
props.ptm('lineDown')
ptm('lineDown')
);

return (
Expand Down Expand Up @@ -111,24 +122,24 @@ export const OrganizationChartNode = React.memo((props) => {
const createLinesDown = () => {
const linesProps = mergeProps(
{
className: 'p-organizationchart-lines',
style: { visibility }
className: cx('lines'),
style: sx('lines', { visibility })
},
props.ptm('lines')
ptm('lines')
);

const lineCellProps = mergeProps(
{
colSpan: colspan
},
props.ptm('lineCell')
ptm('lineCell')
);

const lineDownProps = mergeProps(
{
className: 'p-organizationchart-line-down'
className: cx('lineDown')
},
props.ptm('lineDown')
ptm('lineDown')
);

return (
Expand All @@ -142,13 +153,11 @@ export const OrganizationChartNode = React.memo((props) => {

const createToggler = () => {
if (!leaf) {
const iconClassName = 'p-node-toggler-icon';

const nodeTogglerIconProps = mergeProps(
{
className: iconClassName
className: cx('nodeTogglerIcon')
},
props.ptm('nodeTogglerIcon')
ptm('nodeTogglerIcon')
);

let icon;
Expand All @@ -163,7 +172,7 @@ export const OrganizationChartNode = React.memo((props) => {

const nodeTogglerProps = mergeProps(
{
className: 'p-node-toggler',
className: cx('nodeToggler'),
onClick: (e) => toggleNode(e, node),
href: '#'
},
Expand All @@ -189,27 +198,19 @@ export const OrganizationChartNode = React.memo((props) => {
};

const createNodeContent = () => {
const nodeClassName = classNames(
'p-organizationchart-node-content',
{
'p-organizationchart-selectable-node': props.selectionMode && node.selectable !== false,
'p-highlight': selected
},
node.className
);
const label = createNodeLabel();
const toggler = createToggler();

const cellProps = mergeProps(
{
colSpan: colspan
},
props.ptm('cell')
ptm('cell')
);

const nodeProps = mergeProps(
{
className: nodeClassName,
className: cx('node', { selected, node, nodeProps: props }),
style: node.style,
onClick: (e) => onNodeClick(e, node)
},
Expand All @@ -235,9 +236,9 @@ export const OrganizationChartNode = React.memo((props) => {

const tableProps = mergeProps(
{
className: 'p-organizationchart-table'
className: cx('table')
},
props.ptm('table')
ptm('table')
);

return (
Expand Down
5 changes: 5 additions & 0 deletions components/lib/organizationchart/organizationchart.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,11 @@ export interface OrganizationChartProps extends Omit<React.DetailedHTMLProps<Rea
* @type {OrganizationChartPassThroughOptions}
*/
pt?: OrganizationChartPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}

/**
Expand Down
1 change: 0 additions & 1 deletion styles/primereact.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
@import "../components/lib/datatable/DataTable.css";
@import "../components/lib/toast/Toast.css";
@import "../components/lib/messages/Messages.css";
@import "../components/lib/organizationchart/OrganizationChart.css";
@import "../components/lib/picklist/PickList.css";
@import "../components/lib/tooltip/Tooltip.css";
@import "../components/lib/treetable/TreeTable.css";
Expand Down

0 comments on commit 659bb1a

Please sign in to comment.