fix: wrapping and alignment

oclif · Oct 3, 2024 · bbe9e90 · bbe9e90
1 parent 36415d9
commit bbe9e90
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 35 deletions.
diff --git a/examples/overflow.ts b/examples/overflow.ts
@@ -60,22 +60,6 @@ printTable({
   titleOptions: {bold: true},
 })
 
-// I would expect this for wrapping on align-center:
-//
-// Wrap (aligned center)
-// ┌───────┬─────────┬─────┬───────────────────────────────────────────────────────────────────────────┐
-// │  Id   │  Name   │ Age │                                Description                                │
-// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤
-// │ 36329 │  Alice  │ 20  │  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod  │
-// │       │         │     │            tempor incididunt ut labore et dolore magna aliqua.            │
-// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤
-// │ 49032 │   Bob   │ 21  │  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod  │
-// │       │         │     │            tempor incididunt ut labore et dolore magna aliqua.            │
-// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤
-// │ 51786 │ Charlie │ 22  │  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod  │
-// │       │         │     │            tempor incididunt ut labore et dolore magna aliqua.            │
-// └───────┴─────────┴─────┴───────────────────────────────────────────────────────────────────────────┘
-
 printTable({
   columns: ['id', 'name', 'age', 'description'],
   data,
@@ -100,22 +84,6 @@ printTable({
   titleOptions: {bold: true},
 })
 
-// Similar for align-right:
-//
-// Wrap (aligned right)
-// ┌───────┬─────────┬─────┬───────────────────────────────────────────────────────────────────────────┐
-// │    Id │    Name │ Age │                                                               Description │
-// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤
-// │ 36329 │   Alice │  20 │   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │
-// │       │         │     │                       tempor incididunt ut labore et dolore magna aliqua. │
-// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤
-// │ 49032 │     Bob │  21 │   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │
-// │       │         │     │                       tempor incididunt ut labore et dolore magna aliqua. │
-// ├───────┼─────────┼─────┼───────────────────────────────────────────────────────────────────────────┤
-// │ 51786 │ Charlie │  22 │   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod │
-// │       │         │     │                       tempor incididunt ut labore et dolore magna aliqua. │
-// └───────┴─────────┴─────┴───────────────────────────────────────────────────────────────────────────┘
-
 printTable({
   columns: ['id', 'name', 'age', 'description'],
   data,

diff --git a/src/table.tsx b/src/table.tsx
@@ -128,7 +128,7 @@ function formatTextWithMargins({
   const valueWithNoZeroWidthChars = String(value).replaceAll('', ' ')
   const spaceForText = width - padding * 2
 
-  if (stripAnsi(valueWithNoZeroWidthChars).length < spaceForText) {
+  if (stripAnsi(valueWithNoZeroWidthChars).length <= spaceForText) {
     const spaces = width - stripAnsi(valueWithNoZeroWidthChars).length
     return {
       text: valueWithNoZeroWidthChars,
@@ -139,12 +139,28 @@ function formatTextWithMargins({
   if (overflow === 'wrap') {
     const wrappedText = wrapAnsi(valueWithNoZeroWidthChars, spaceForText, {hard: true, trim: true, wordWrap: true})
     const {marginLeft, marginRight} = calculateMargins(width - determineWidthOfWrappedText(stripAnsi(wrappedText)))
-    const text = wrappedText.replaceAll('\n', `${' '.repeat(marginRight)}\n${' '.repeat(marginLeft)}`)
+
+    const lines = wrappedText.split('\n').map((line, idx) => {
+      const lineMargins = calculateMargins(spaceForText - stripAnsi(line).length)
+      if (idx === 0) {
+        return `${line}${' '.repeat(lineMargins.marginRight)}`
+      }
+
+      if (horizontalAlignment === 'left') {
+        return `${' '.repeat(marginLeft)}${line}${' '.repeat(lineMargins.marginRight)}`
+      }
+
+      if (horizontalAlignment === 'right') {
+        return `${' '.repeat(lineMargins.marginLeft + marginLeft)}${line}${' '.repeat(marginRight)}`
+      }
+
+      return `${' '.repeat(lineMargins.marginLeft + marginLeft)}${line}${' '.repeat(lineMargins.marginRight)}`
+    })
 
     return {
       marginLeft,
       marginRight,
-      text,
+      text: lines.join('\n'),
     }
   }
 
@@ -289,6 +305,7 @@ function row<T extends Record<string, unknown>>(config: RowConfig): (props: RowP
         value,
         width,
       })
+      // console.log(text, {marginLeft, marginRight}, text.match(/ +$/)?.[0]?.length)
 
       const alignItems =
         verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end'