Skip to content

Commit

Permalink
feat: Adds swap of active overflow drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
Katie George committed Aug 4, 2023
1 parent 565b2e6 commit 9b5d9d5
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 25 deletions.
52 changes: 38 additions & 14 deletions src/app-layout/drawer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,26 @@ export const DrawerTriggersBar = ({
}
};

const getDrawerItems = () => {
if (drawers && drawers.items) {
const activeIndex = drawers.activeDrawerId && drawers.items.map(item => item.id).indexOf(drawers.activeDrawerId);
const lastMainItemIndex = getIndexOfOverflowItem() - 1;

const activeDrawerItem = drawers.items.find(item => item.id === drawers.activeDrawerId);
const lastMainItem = drawers.items.find((item, index) => index === lastMainItemIndex);

if (activeIndex && overflowItemIsActive() && activeDrawerItem && lastMainItem) {
[drawers.items[lastMainItemIndex], drawers.items[activeIndex]] = [
drawers.items[activeIndex],
drawers.items[lastMainItemIndex],
];
}

return drawers.items;
}
return [];
};

return (
<div
className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
Expand All @@ -217,18 +237,18 @@ export const DrawerTriggersBar = ({
{!isMobile && (
<aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'], contentClassName)}>
<>
{drawers?.items?.map((item: DrawerItem, index: number) => {
{getDrawerItems().map((item: DrawerItem, index: number) => {
if (index < getIndexOfOverflowItem()) {
return (
<span
key={index}
className={clsx(
styles['drawer-trigger'],
drawers.activeDrawerId === item.id && styles['drawer-trigger-active']
drawers?.activeDrawerId === item.id && styles['drawer-trigger-active']
)}
onClick={() =>
drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })
}
onClick={() => {
drawers?.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined });
}}
>
<ToggleButton
className={toggleClassName}
Expand All @@ -237,9 +257,11 @@ export const DrawerTriggersBar = ({
iconSvg={item.trigger.iconSvg}
ariaLabel={item.ariaLabels?.triggerButton}
onClick={() =>
drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })
drawers?.onChange({
activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
})
}
ariaExpanded={drawers.activeDrawerId !== undefined}
ariaExpanded={drawers?.activeDrawerId !== undefined}
badge={item.badge}
testId={`awsui-app-layout-trigger-${item.id}`}
/>
Expand All @@ -254,13 +276,15 @@ export const DrawerTriggersBar = ({
<InternalButtonDropdown
expandToViewport={true}
className={clsx(styles['trigger-overflow'])}
items={drawers.items.slice(getIndexOfOverflowItem(), drawers.items.length).map(item => ({
id: item.id,
text: item.ariaLabels?.content || 'Content',
iconName: item.trigger.iconName,
iconSvg: item.trigger.iconSvg,
badge: item.badge,
}))}
items={getDrawerItems()
.slice(getIndexOfOverflowItem(), getDrawerItems().length)
.map(item => ({
id: item.id,
text: item.ariaLabels?.content || 'Content',
iconName: item.trigger.iconName,
iconSvg: item.trigger.iconSvg,
badge: item.badge,
}))}
onItemClick={({ detail }) => {
drawers.onChange({
activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
Expand Down
53 changes: 42 additions & 11 deletions src/app-layout/visual-refresh/drawers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,8 @@ function DesktopTriggers() {
splitPanelPosition,
splitPanelRefs,
splitPanelToggle,
splitPanelReportedHeaderHeight,
splitPanelReportedSize,
tools,
toolsHide,
toolsRefs,
Expand All @@ -206,12 +208,14 @@ function DesktopTriggers() {

const triggersContainerRef = useRef<HTMLDivElement>(null);

const splitPanelHeight =
isSplitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : splitPanelReportedHeaderHeight;
const containerHeight = useContainerHeight(triggersContainerRef) || triggersContainerRef.current?.clientHeight;

const getIndexOfOverflowItem = () => {
if (containerHeight) {
const ITEM_HEIGHT = 48;
const overflowSpot = containerHeight / 1.5;
const overflowSpot = activeDrawerId ? containerHeight / 1.5 : (containerHeight - splitPanelHeight) / 1.5;

const index = Math.floor(overflowSpot / ITEM_HEIGHT);

Expand All @@ -226,7 +230,32 @@ function DesktopTriggers() {
return index - toolsItem - splitPanelItem;
}

return 0;
return -1;
};

const overflowItemIsActive = () => {
if (drawers && getIndexOfOverflowItem() > 0) {
return drawers.items
.slice(getIndexOfOverflowItem(), drawers.items.length)
.map(item => item.id)
.includes(drawers.activeDrawerId);

Check failure on line 241 in src/app-layout/visual-refresh/drawers.tsx

View workflow job for this annotation

GitHub Actions / build / build 

Property 'includes' does not exist on type 'string[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2016' or later.

Check failure on line 241 in src/app-layout/visual-refresh/drawers.tsx

View workflow job for this annotation

GitHub Actions / Test for regressions 

Property 'includes' does not exist on type 'string[]'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2016' or later.
}
};

const getDrawerItems = () => {
if (drawers && drawers.items) {
const activeIndex = activeDrawerId ? drawers.items.map(item => item.id).indexOf(activeDrawerId) : -1;
const lastMainItemIndex = getIndexOfOverflowItem() - 1;

if (activeIndex && activeIndex > 0 && overflowItemIsActive()) {
[drawers.items[lastMainItemIndex], drawers.items[activeIndex]] = [
drawers.items[activeIndex],
drawers.items[lastMainItemIndex],
];
}
return drawers.items;
}
return [];
};

if (activeDrawerId) {
Expand All @@ -238,7 +267,7 @@ function DesktopTriggers() {
}

const overflowItemHasBadge = () => {
const overflowItems = drawers?.items.slice(1, drawers.items.length);
const overflowItems = getDrawerItems().slice(1, getDrawerItems().length);
return (overflowItems && overflowItems.filter(item => item.badge).length > 0) || false;
};

Expand Down Expand Up @@ -275,7 +304,7 @@ function DesktopTriggers() {
/>
)}

{drawers?.items.map((item, index) => {
{getDrawerItems()?.map((item, index) => {
if (index < getIndexOfOverflowItem()) {
return (
<TriggerButton
Expand All @@ -296,7 +325,7 @@ function DesktopTriggers() {
}
})}

{drawers?.items?.length && drawers?.items?.length > getIndexOfOverflowItem() && (
{getDrawerItems() && getDrawerItems().length > getIndexOfOverflowItem() && (
<InternalButtonDropdown
ref={drawersRefs.toggle}
className={clsx(
Expand All @@ -305,12 +334,14 @@ function DesktopTriggers() {
styles['drawers-trigger-overflow'],
overflowItemHasBadge() && styles.badge
)}
items={drawers.items.slice(getIndexOfOverflowItem(), drawers.items.length).map(item => ({
id: item.id,
text: item.ariaLabels?.content || 'Content',
iconName: item.trigger.iconName,
iconSvg: item.trigger.iconSvg,
}))}
items={getDrawerItems()
.slice(getIndexOfOverflowItem(), getDrawerItems().length)
.map(item => ({
id: item.id,
text: item.ariaLabels?.content || 'Content',
iconName: item.trigger.iconName,
iconSvg: item.trigger.iconSvg,
}))}
onItemClick={({ detail }) => {
handleDrawersClick(detail.id);
}}
Expand Down

0 comments on commit 9b5d9d5

Please sign in to comment.