Skip to content

Commit

Permalink
chore: Merge support into master (#3022)
Browse files Browse the repository at this point in the history
Co-authored-by: @NicholasBoll <[email protected]>
Co-authored-by: manuel.carrera <[email protected]>
  • Loading branch information
3 people authored Nov 4, 2024
2 parents bc611c1 + fff14ce commit cd71a0e
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 14 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [v11.1.20](https://github.com/Workday/canvas-kit/releases/tag/v11.1.20) (2024-11-04)

### Components

- fix: Add flex gap to overflow list calculations ([#3021](https://github.com/Workday/canvas-kit/pull/3021)) ([@NicholasBoll](https://github.com/NicholasBoll))


## [v11.1.19](https://github.com/Workday/canvas-kit/releases/tag/v11.1.19) (2024-10-28)

### Components
Expand Down
40 changes: 34 additions & 6 deletions modules/react/collection/lib/useOverflowListModel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import {Item} from './useBaseListModel';

export function getHiddenIds(
containerWidth: number,
containerGap: number,
overflowTargetWidth: number,
itemWidthCache: Record<string, number>,
selectedIds: string[] | 'all',
items?: Item<any>[]
items: Item<any>[]
): string[] {
/** Allows us to prioritize showing the selected item */
let selectedKey: undefined | string;
Expand All @@ -18,17 +19,22 @@ export function getHiddenIds(
/** Tally ids that won't fit inside the container. These will be used by components to hide
* elements that won't fit in the container */
const hiddenIds: string[] = [];
/** Track if gap should be calculated since gap doesn't apply to the width of the first item, only
* consecutive items */
let shouldAddGap = false;

if (selectedIds !== 'all' && selectedIds.length) {
if (items?.length) {
if (items.length) {
// If selectedIds[0] is not in items, use the first id from items
selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
} else {
selectedKey = selectedIds[0];
}
}

if (
Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
Object.keys(itemWidthCache).reduce(
(sum, key, index) => sum + itemWidthCache[key] + (index > 0 ? containerGap : 0),
0
) <= containerWidth
) {
// All items fit, return empty array
return [];
Expand All @@ -39,14 +45,16 @@ export function getHiddenIds(
} else {
// at least the selected item and overflow target fit. Update our itemWidth with the sum
itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
shouldAddGap = true;
}
} else {
itemWidth += overflowTargetWidth;
}

for (const key in itemWidthCache) {
if (key !== selectedKey) {
itemWidth += itemWidthCache[key];
itemWidth += itemWidthCache[key] + (shouldAddGap ? containerGap : 0);
shouldAddGap = true;
if (itemWidth > containerWidth) {
hiddenIds.push(key);
}
Expand Down Expand Up @@ -75,6 +83,7 @@ export const useOverflowListModel = createModelHook({
const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
const [containerWidth, setContainerWidth] = React.useState(0);
const [containerGap, setContainerGap] = React.useState(0);
const containerWidthRef = React.useRef(0);
const itemWidthCacheRef = React.useRef(itemWidthCache);
const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
Expand All @@ -96,6 +105,7 @@ export const useOverflowListModel = createModelHook({
hiddenIds: internalHiddenIds,
itemWidthCache,
containerWidth,
containerGap,
overflowTargetWidth,
};

Expand All @@ -105,6 +115,7 @@ export const useOverflowListModel = createModelHook({
const {selectedIds} = model.selection.select(data.id, state);
const ids = getHiddenIds(
containerWidthRef.current,
containerGap,
overflowTargetWidthRef.current,
itemWidthCacheRef.current,
selectedIds,
Expand All @@ -120,6 +131,21 @@ export const useOverflowListModel = createModelHook({

const ids = getHiddenIds(
containerWidthRef.current,
containerGap,
overflowTargetWidthRef.current,
itemWidthCacheRef.current,
state.selectedIds,
config.items
);

setHiddenIds(ids);
},
setContainerGap(data: {size: number}) {
setContainerGap(data.size);

const ids = getHiddenIds(
containerWidthRef.current,
data.size,
overflowTargetWidthRef.current,
itemWidthCacheRef.current,
state.selectedIds,
Expand All @@ -142,6 +168,7 @@ export const useOverflowListModel = createModelHook({

const ids = getHiddenIds(
containerWidthRef.current,
containerGap,
overflowTargetWidthRef.current,
itemWidthCacheRef.current,
state.selectedIds,
Expand All @@ -158,6 +185,7 @@ export const useOverflowListModel = createModelHook({

const ids = getHiddenIds(
containerWidthRef.current,
containerGap,
overflowTargetWidthRef.current,
itemWidthCacheRef.current,
state.selectedIds !== 'all'
Expand Down
64 changes: 56 additions & 8 deletions modules/react/collection/spec/useOverflowModel.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,89 @@ describe('useOverflowModel', () => {
describe('getHiddenIds', () => {
const itemWidthCache = {
first: 100,
second: 100,
third: 100,
fourth: 100,
second: 150,
third: 200,
fourth: 250,
};
const overflowTargetWidth = 100;

const io = [
[
{
containerWidth: 100,
gap: 0,
selected: 'first',
hiddenIds: ['first', 'second', 'third', 'fourth'],
},
{
containerWidth: 199,
gap: 0,
selected: 'first',
hiddenIds: ['first', 'second', 'third', 'fourth'],
},
{
containerWidth: 200,
gap: 0,
selected: 'first',
hiddenIds: ['second', 'third', 'fourth'],
},
{containerWidth: 400, selected: 'first', hiddenIds: []},
{containerWidth: 399, selected: 'first', hiddenIds: ['third', 'fourth']},
{containerWidth: 700, gap: 0, selected: 'first', hiddenIds: []},
{containerWidth: 350, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
{containerWidth: 549, gap: 0, selected: 'first', hiddenIds: ['third', 'fourth']},
{containerWidth: 550, gap: 0, selected: 'first', hiddenIds: ['fourth']},
{
containerWidth: 250,
gap: 0,
selected: 'second',
hiddenIds: ['first', 'third', 'fourth'],
},
// gap
{
containerWidth: 100,
gap: 10,
selected: 'first',
hiddenIds: ['first', 'second', 'third', 'fourth'],
},
{
containerWidth: 199,
gap: 10,
selected: 'first',
hiddenIds: ['first', 'second', 'third', 'fourth'],
},
{
containerWidth: 200,
gap: 10,
selected: 'first',
hiddenIds: ['second', 'third', 'fourth'],
},
{containerWidth: 729, gap: 10, selected: 'first', hiddenIds: ['fourth']},
{containerWidth: 730, gap: 10, selected: 'first', hiddenIds: []},
{containerWidth: 360, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
{containerWidth: 559, gap: 10, selected: 'first', hiddenIds: ['third', 'fourth']},
{containerWidth: 570, gap: 10, selected: 'first', hiddenIds: ['fourth']},
{
containerWidth: 250,
gap: 10,
selected: 'second',
hiddenIds: ['first', 'third', 'fourth'],
},
].forEach(({containerWidth, hiddenIds, selected}) => {
].forEach(({containerWidth, hiddenIds, gap, selected}) => {
it(`when containerWidth is ${containerWidth} and selected is '${selected}' should contain hiddenIds [${hiddenIds.join(
', '
)}] `, () => {
expect(
getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, [selected])
getHiddenIds(
containerWidth,
gap,
overflowTargetWidth,
itemWidthCache,
[selected],
[
{id: 'first', value: 'first', index: 0, textValue: 'first'},
{id: 'second', value: 'second', index: 1, textValue: 'second'},
{id: 'third', value: 'third', index: 2, textValue: 'third'},
{id: 'fourth', value: 'fourth', index: 3, textValue: 'fourth'},
]
)
).toEqual(hiddenIds);
});
});
Expand Down

0 comments on commit cd71a0e

Please sign in to comment.