Skip to content

Commit

Permalink
Related #4432, #4602 - For Organization Chart
Browse files Browse the repository at this point in the history 
Refactor Tailwind obj
  • Loading branch information
@ulasturann
ulasturann committed Aug 29, 2023
1 parent 8166336 commit 1570ad0
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 97 deletions.
8 changes: 4 additions & 4 deletions components/lib/orderlist/OrderListControls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,11 +126,11 @@ export const OrderListControls = React.memo((props) => {
}
};

const controlProps = mergeProps(
const controlsProps = mergeProps(
{
className: cx('control')
className: cx('controls')
},
ptm('control')
ptm('controls')
);

const moveUpButtonProps = mergeProps(
Expand Down Expand Up @@ -178,7 +178,7 @@ export const OrderListControls = React.memo((props) => {
);

return (
<div {...controlProps}>
<div {...controlsProps}>
<Button {...moveUpButtonProps}></Button>
<Button {...moveTopButtonProps}></Button>
<Button {...moveDownButtonProps}></Button>
Expand Down
10 changes: 3 additions & 7 deletions components/lib/organizationchart/OrganizationChartBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,16 +70,13 @@ const classes = {
),
nodes: 'p-organizationchart-nodes',
lines: 'p-organizationchart-lines',
lineLeft: ({ index }) => classNames('p-organizationchart-line-left', { 'p-organizationchart-line-top': index !== 0 }),
lineRight: ({ index }) => classNames('p-organizationchart-line-right', { 'p-organizationchart-line-top': index !== nodeChildLength - 1 }),
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: {
__TYPE: 'OrganizationChart',
Expand All @@ -98,7 +95,6 @@ export const OrganizationChartBase = ComponentBase.extend({
},
css: {
classes,
styles,
inlineStyles
styles
}
});
36 changes: 28 additions & 8 deletions components/lib/organizationchart/OrganizationChartNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,14 @@ export const OrganizationChartNode = React.memo((props) => {
});
};

const getNodePTOptions = (lineTop, key) => {
return ptm(key, {
context: {
lineTop
}
});
};

const onNodeClick = (event, node) => {
props.onNodeClick(event, node);
};
Expand All @@ -36,7 +44,7 @@ export const OrganizationChartNode = React.memo((props) => {
const nodesProps = mergeProps(
{
className: cx('nodes'),
style: sx('nodes', { visibility })
style: { visibility }
},
ptm('nodes')
);
Expand Down Expand Up @@ -76,7 +84,7 @@ export const OrganizationChartNode = React.memo((props) => {
const linesProps = mergeProps(
{
className: cx('lines'),
style: sx('lines', { visibility })
style: { visibility }
},
ptm('lines')
);
Expand All @@ -103,14 +111,24 @@ export const OrganizationChartNode = React.memo((props) => {
{node.children &&
node.children.length > 1 &&
node.children.map((_, index) => {
const leftClassName = classNames('p-organizationchart-line-left', { 'p-organizationchart-line-top': index !== 0 });
const rightClassName = classNames('p-organizationchart-line-right', { 'p-organizationchart-line-top': index !== nodeChildLength - 1 });
const lineLeftProps = mergeProps(
{
className: cx('lineLeft', { index })
},
getNodePTOptions(index !== 0, 'lineLeft')
);
const lineRightProps = mergeProps(
{
className: cx('lineRight', { index })
},
getNodePTOptions(index !== nodeChildLength - 1, 'lineRight')
);

return [
<td key={index + '_lineleft'} className={leftClassName}>
<td key={index + '_lineleft'} {...lineLeftProps}>
&nbsp;
</td>,
<td key={index + '_lineright'} className={rightClassName}>
<td key={index + '_lineright'} {...lineRightProps}>
&nbsp;
</td>
];
Expand All @@ -123,7 +141,7 @@ export const OrganizationChartNode = React.memo((props) => {
const linesProps = mergeProps(
{
className: cx('lines'),
style: sx('lines', { visibility })
style: { visibility }
},
ptm('lines')
);
Expand Down Expand Up @@ -217,8 +235,10 @@ export const OrganizationChartNode = React.memo((props) => {
getPTOptions('node')
);

const rowProps = mergeProps(ptm('row'));

return (
<tr>
<tr {...rowProps}>
<td {...cellProps}>
<div {...nodeProps}>
{label}
Expand Down
117 changes: 39 additions & 78 deletions components/lib/passthrough/tailwind/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2445,77 +2445,63 @@ const Tailwind = {
},
item: ({ context }) => ({
className: classNames('relative cursor-pointer overflow-hidden', 'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80', 'transition duration-200', {
'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.selected
})
})
},
picklist: {
root: 'flex',
sourcecontrols: 'flex flex-col justify-center p-5',
sourcemoveupbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
sourcemovetopbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
sourcemovedownbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
sourcemovebottombutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
sourcewrapper: 'grow shrink basis-2/4',
Expand All @@ -2534,139 +2520,114 @@ const Tailwind = {
},
item: ({ context }) => ({
className: classNames('relative cursor-pointer overflow-hidden', 'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80', 'transition duration-200', {
'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.selected,
'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.selected
})
}),
buttons: 'flex flex-col justify-center p-5',
movetotargetbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
movealltotargetbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
movetosourcebutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
movealltosourcebutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
targetcontrols: 'flex flex-col justify-center p-5',
targetmoveupbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
targetmovetopbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
targetmovedownbutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
targetmovebottombutton: {
root: ({ context }) => ({
root: {
className: classNames(
'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
'text-white bg-blue-500 border border-blue-500 rounded-md',
'transition duration-200 ease-in-out',
'justify-center px-0 py-3', // icon only
'mb-2', // orderlist button
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
{
'cursor-default pointer-events-none opacity-60': context.disabled
}
'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
)
}),
},
label: 'flex-initial w-0'
},
targetwrapper: 'grow shrink basis-2/4',
Expand Down

0 comments on commit 1570ad0

Please sign in to comment.