From 061d7bf8ffc869de5340c1437cbb3d9e73b6d71e Mon Sep 17 00:00:00 2001 From: Alber EE <122263897+Alber-Writer@users.noreply.github.com> Date: Thu, 7 Nov 2024 22:41:08 +0100 Subject: [PATCH] adjust tabsbar text-width methods --- .../tabsbar/business/balance-space.ts | 6 +- .../tabsbar/business/calc-text-width.ts | 26 ++++++- .../tabsbar/business/tabsbar.business.ts | 16 ++--- .../tabsbar/tabsbar-shape.tsx | 68 ++++++++++++------- 4 files changed, 77 insertions(+), 39 deletions(-) diff --git a/src/common/components/mock-components/front-rich-components/tabsbar/business/balance-space.ts b/src/common/components/mock-components/front-rich-components/tabsbar/business/balance-space.ts index 8de0a60c..8e683166 100644 --- a/src/common/components/mock-components/front-rich-components/tabsbar/business/balance-space.ts +++ b/src/common/components/mock-components/front-rich-components/tabsbar/business/balance-space.ts @@ -16,7 +16,7 @@ export const balanceSpacePerItem = ( const lastItemSize: number = index > 0 ? newList[index - 1] : 0; - // Once the maximum possible size of the item is reached, apply this size directly. + // A) Once the maximum possible size of the item is reached, apply this size directly. if (maxItemSize.value) { totalSpaceUsed.add(maxItemSize.value); return [...newList, lastItemSize]; @@ -27,7 +27,7 @@ export const balanceSpacePerItem = ( const timesToApply = arr.length - index; const virtualTotalsSum = totalSpaceUsed.value + current * timesToApply; - /** First "Bigger" tab behaviour: If the virtual-sum of next items using this size + /** B) First "Bigger" tab behaviour: If the virtual-sum of next items using this size * doesn't fit within available space, calc maxItemSize */ if (virtualTotalsSum >= availableSpace) { const remainder = @@ -40,7 +40,7 @@ export const balanceSpacePerItem = ( return [...newList, maxItemSize.value]; } - //"Normal" behaviour: Apply this new size to current + // C) "Normal" behaviour: Apply proposed new size to current totalSpaceUsed.add(current); return [...newList, current]; }, []); diff --git a/src/common/components/mock-components/front-rich-components/tabsbar/business/calc-text-width.ts b/src/common/components/mock-components/front-rich-components/tabsbar/business/calc-text-width.ts index ae08f45e..91535f05 100644 --- a/src/common/components/mock-components/front-rich-components/tabsbar/business/calc-text-width.ts +++ b/src/common/components/mock-components/front-rich-components/tabsbar/business/calc-text-width.ts @@ -3,6 +3,28 @@ export const calcTextWidth = ( fontSize: number, _fontfamily: string ) => { - const charAverageWidth = fontSize * 0.5; - return inputText.length * charAverageWidth + charAverageWidth / 2; + const REGX_DEFS = { + LOWERCASE_BIG: /[mwoq]/, + LOWERCASE: /[a-z0-9]/, + UPPERCASE_BIG: /[MWOQ]/, + UPPERCASE: /[A-Z]/, + MARKS: /[.,;:!?'"(){}\[\]\-]/, + SPACE: /\s/, + DEFAULT: 'default', + }; + + const calcLength = [...inputText].reduce((sum, current) => { + const testChar = (regx: RegExp) => regx.test(current); + const addLength = (value: number) => sum + fontSize * value; + + if (testChar(REGX_DEFS.LOWERCASE_BIG)) return addLength(0.85); + if (testChar(REGX_DEFS.LOWERCASE)) return addLength(0.5); + if (testChar(REGX_DEFS.SPACE)) return addLength(0.2); + if (testChar(REGX_DEFS.UPPERCASE_BIG)) return addLength(0.95); + if (testChar(REGX_DEFS.UPPERCASE)) return addLength(0.7); + if (testChar(REGX_DEFS.MARKS)) return addLength(0.3); + return addLength(0.5); + }, 0); + + return calcLength; }; diff --git a/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.ts b/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.ts index be06ca95..da48e9ea 100644 --- a/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.ts +++ b/src/common/components/mock-components/front-rich-components/tabsbar/business/tabsbar.business.ts @@ -19,9 +19,9 @@ export const adjustTabWidths = (args: { const containerWidthWithoutTabGaps = containerWidth - (tabs.length - 1) * tabsGap; - //Create info Object with originalPositions and desired width + //Create info List with originalPositions and desired width interface OriginalTabInfo { - initialTabPosition: number; + originalTabPosition: number; desiredWidth: number; } const arrangeTabsInfo = tabs.reduce( @@ -32,7 +32,7 @@ export const adjustTabWidths = (args: { return [ ...acc, { - initialTabPosition: index, + originalTabPosition: index, desiredWidth, }, ]; @@ -40,7 +40,7 @@ export const adjustTabWidths = (args: { [] ); - // This order is neccessary to build layer by layer the new sizes + // This order is necessary to build layer by layer the new sizes const ascendentTabList = arrangeTabsInfo.sort( (a, b) => a.desiredWidth - b.desiredWidth ); @@ -56,18 +56,18 @@ export const adjustTabWidths = (args: { const reassembledData = ascendentTabList.reduce( (accList: number[], current, index) => { const newList = [...accList]; - newList[current.initialTabPosition] = adjustedSizeList[index]; + newList[current.originalTabPosition] = adjustedSizeList[index]; return newList; }, [] ); - // Calc item offset position + // Calc item offset position (mixed with external variable to avoid adding to reducer() extra complexity) let sumOfXposition = 0; const relativeTabPosition = reassembledData.reduce( - (acc: number[], el, index) => { + (acc: number[], currentTab, index) => { const currentElementXPos = index ? sumOfXposition : 0; - sumOfXposition += el + tabsGap; + sumOfXposition += currentTab + tabsGap; return [...acc, currentElementXPos]; }, [] diff --git a/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx b/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx index b562c563..f560557e 100644 --- a/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx +++ b/src/common/components/mock-components/front-rich-components/tabsbar/tabsbar-shape.tsx @@ -8,6 +8,7 @@ import { splitCSVContentIntoRows, } from '@/common/utils/active-element-selector.utils'; import { useGroupShapeProps } from '../../mock-components.utils'; +import { adjustTabWidths } from './business/tabsbar.business'; const tabsBarShapeSizeRestrictions: ShapeSizeRestrictions = { minWidth: 450, @@ -47,11 +48,21 @@ export const TabsBarShape = forwardRef((props, ref) => { const tabLabels = headers.map(header => header.text); // Calculate tab dimensions and margin - const tabWidth = 106; // Width of each tab + const minTabWidth = 40; // Min-width of each tab, without xPadding const tabHeight = 30; // Tab height const tabMargin = 10; // Horizontal margin between tabs + const tabXPadding = 20; + const tabFont = { fontSize: 14, fontFamily: 'Arial' }; const bodyHeight = restrictedHeight - tabHeight - 10; // Height of the tabs bar body - const totalTabsWidth = tabLabels.length * (tabWidth + tabMargin) + tabWidth; // Total width required plus one additional tab + + const tabAdjustedWidths = adjustTabWidths({ + tabs: tabLabels, + containerWidth: restrictedWidth - tabMargin * 2, //left and right tabList margin + minTabWidth, + tabXPadding, + tabsGap: tabMargin, + font: tabFont, + }); const activeTab = otherProps?.activeElement ?? 0; @@ -68,36 +79,41 @@ export const TabsBarShape = forwardRef((props, ref) => { {/* Map through headerRow to create tabs */} - {tabLabels.map((header, index) => ( - - - - - ))} + {tabLabels.map((header, index) => { + const { widthList: newWidthList, relativeTabPosition: xPosList } = + tabAdjustedWidths; + + return ( + + + + + ); + })} ); });