From 415bb63103d01befa083d2f671d78b08e3ad9b17 Mon Sep 17 00:00:00 2001 From: nevermore Date: Thu, 4 Jan 2024 14:22:02 +0800 Subject: [PATCH] feat:CascadeSelect support scroll in container --- components/lib/cascadeselect/CascadeSelect.js | 9 +++- .../lib/cascadeselect/CascadeSelectBase.js | 11 ++--- .../lib/cascadeselect/CascadeSelectSub.js | 46 +++++++++++++------ components/lib/passthrough/tailwind/index.js | 7 ++- 4 files changed, 47 insertions(+), 26 deletions(-) diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js index 767fbd0ff2..9f3e08b552 100644 --- a/components/lib/cascadeselect/CascadeSelect.js +++ b/components/lib/cascadeselect/CascadeSelect.js @@ -241,11 +241,16 @@ export const CascadeSelect = React.memo( overflow: ${props.scrollHeight ? 'auto' : ''}; } + .p-cascadeselect-panel[${selector}] .p-cascadeselect-sublist-wrapper { + position:relative; + left:0 !important; + } + .p-cascadeselect-panel[${selector}] .p-cascadeselect-sublist { - position: relative; + overflow: hidden !important; } - .p-cascadeselect-panel[${selector}] .p-cascadeselect-item-active > .p-cascadeselect-sublist { + .p-cascadeselect-panel[${selector}] .p-cascadeselect-item-active .p-cascadeselect-sublist { left: 0; box-shadow: none; border-radius: 0; diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js index 6f9ef652fa..b52e63bbe4 100644 --- a/components/lib/cascadeselect/CascadeSelectBase.js +++ b/components/lib/cascadeselect/CascadeSelectBase.js @@ -24,6 +24,7 @@ const classes = { 'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled', 'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false }), + sublistWrapper: 'p-cascadeselect-sublist-wrapper', sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist', item: ({ option, isGroup, isSelected }) => classNames('p-cascadeselect-item', { @@ -77,12 +78,6 @@ const styles = ` min-width: 100%; } - .p-cascadeselect-panel { - position: absolute; - top: 0; - left: 0; - } - .p-cascadeselect-item { cursor: pointer; font-weight: normal; @@ -115,7 +110,7 @@ const styles = ` width: 1%; } - .p-cascadeselect-sublist { + .p-cascadeselect-sublist-wrapper { position: absolute; min-width: 100%; z-index: 1; @@ -126,7 +121,7 @@ const styles = ` overflow: visible; } - .p-cascadeselect-item-active > .p-cascadeselect-sublist { + .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper { display: block; left: 100%; top: 0; diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js index 7dc45c32b6..296723bc90 100644 --- a/components/lib/cascadeselect/CascadeSelectSub.js +++ b/components/lib/cascadeselect/CascadeSelectSub.js @@ -18,14 +18,14 @@ export const CascadeSelectSub = React.memo((props) => { }; const position = () => { - const parentItem = elementRef.current.parentElement; + const parentItem = elementRef.current.parentElement.parentElement; const containerOffset = DomHandler.getOffset(parentItem); const viewport = DomHandler.getViewport(); const sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(element); const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]); if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) { - elementRef.current.style.left = '-100%'; + elementRef.current.parentElement.style.left = '-100%'; } }; @@ -268,16 +268,34 @@ export const CascadeSelectSub = React.memo((props) => { return props.options ? props.options.map(createOption) : null; }; - const submenu = createMenu(); - const listProps = mergeProps( - { - ref: elementRef, - className: cx(props.level === 0 ? 'list' : 'sublist', { context }), - role: 'listbox', - 'aria-orientation': 'horizontal' - }, - props.level === 0 ? getPTOptions('list') : getPTOptions('sublist') - ); - - return ; + const createList = () => { + const listProps = mergeProps( + { + ref: elementRef, + className: cx(props.level === 0 ? 'list' : 'sublist', { context }), + role: 'listbox', + 'aria-orientation': 'horizontal' + }, + props.level === 0 ? getPTOptions('list') : getPTOptions('sublist') + ); + const submenu = createMenu(); + + return ; + }; + + const createElement = () => { + const list = createList(); + const listWrapperProps = mergeProps( + { + className: cx('sublistWrapper') + }, + getPTOptions('sublistWrapper') + ); + + return props.level === 0 ? list :
{list}
; + }; + + const element = createElement(); + + return element; }); diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index e6a70fdbc1..a5aa149795 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -849,10 +849,13 @@ const Tailwind = { dropdownButton: { className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6') }, - panel: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md', + panel: 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md', list: 'm-0 sm:p-0 list-none', + sublistWrapper: { + className: classNames('block absolute left-full top-0', 'min-w-full z-10') + }, sublist: { - className: classNames('block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md') + className: classNames('py-3 bg-white dark:bg-gray-900 border-0 shadow-md') }, item: ({ state }) => ({ className: classNames('cursor-pointer font-normal whitespace-nowrap', 'm-0 border-0 bg-transparent transition-shadow rounded-none', {