From 1570ad03e61b1ba2508622a550f7485e9f5b03fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ula=C5=9F=20Turan?= Date: Tue, 29 Aug 2023 13:42:56 +0300 Subject: [PATCH] Related #4432, #4602 - For Organization Chart Refactor Tailwind obj --- components/lib/orderlist/OrderListControls.js | 8 +- .../OrganizationChartBase.js | 10 +- .../OrganizationChartNode.js | 36 ++++-- components/lib/passthrough/tailwind/index.js | 117 ++++++------------ 4 files changed, 74 insertions(+), 97 deletions(-) diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js index f9d1e471be..d84976fcb5 100644 --- a/components/lib/orderlist/OrderListControls.js +++ b/components/lib/orderlist/OrderListControls.js @@ -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( @@ -178,7 +178,7 @@ export const OrderListControls = React.memo((props) => { ); return ( -
+
diff --git a/components/lib/organizationchart/OrganizationChartBase.js b/components/lib/organizationchart/OrganizationChartBase.js index 29d1a08b92..b44ef9b6ff 100644 --- a/components/lib/organizationchart/OrganizationChartBase.js +++ b/components/lib/organizationchart/OrganizationChartBase.js @@ -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', @@ -98,7 +95,6 @@ export const OrganizationChartBase = ComponentBase.extend({ }, css: { classes, - styles, - inlineStyles + styles } }); diff --git a/components/lib/organizationchart/OrganizationChartNode.js b/components/lib/organizationchart/OrganizationChartNode.js index f4b9ea4c73..67f9c853a1 100644 --- a/components/lib/organizationchart/OrganizationChartNode.js +++ b/components/lib/organizationchart/OrganizationChartNode.js @@ -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); }; @@ -36,7 +44,7 @@ export const OrganizationChartNode = React.memo((props) => { const nodesProps = mergeProps( { className: cx('nodes'), - style: sx('nodes', { visibility }) + style: { visibility } }, ptm('nodes') ); @@ -76,7 +84,7 @@ export const OrganizationChartNode = React.memo((props) => { const linesProps = mergeProps( { className: cx('lines'), - style: sx('lines', { visibility }) + style: { visibility } }, ptm('lines') ); @@ -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 [ - +   , - +   ]; @@ -123,7 +141,7 @@ export const OrganizationChartNode = React.memo((props) => { const linesProps = mergeProps( { className: cx('lines'), - style: sx('lines', { visibility }) + style: { visibility } }, ptm('lines') ); @@ -217,8 +235,10 @@ export const OrganizationChartNode = React.memo((props) => { getPTOptions('node') ); + const rowProps = mergeProps(ptm('row')); + return ( - +
{label} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 2c6fe031e8..f172b8bf31 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -2445,9 +2445,7 @@ 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 }) }) }, @@ -2455,67 +2453,55 @@ const Tailwind = { 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', @@ -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',