add percent aligment option

src/__tests__/alignment.test.ts

@@ -21,4 +21,10 @@ describe('Alignment', () => {
     const measure = endAlign.measure(itemSize)
     expect(measure).toBe(900)
   })
+
+  test('Measures percent alignment for given number correctly', () => {
+    const percentAlign = Alignment({ align: 0.3, viewSize })
+    const measure = percentAlign.measure(itemSize)
+    expect(measure).toBe(300)
+  })
 })

src/components/alignment.ts

@@ -1,4 +1,4 @@
-export type Alignments = 'start' | 'center' | 'end'
+export type Alignments = 'start' | 'center' | 'end' | number
 
 type Params = {
   viewSize: number
@@ -11,7 +11,7 @@ export type Alignment = {
 
 export function Alignment(params: Params): Alignment {
   const { viewSize, align } = params
-  const alignment = { start, center, end }
+  const alignment = { start, center, end, percent }
 
   function start(n: number): number {
     return n * 0
@@ -25,8 +25,13 @@ export function Alignment(params: Params): Alignment {
     return viewSize - n
   }
 
+  function percent(n: number): number {
+    return viewSize * Number(align)
+  }
+
   function measure(n: number): number {
-    return alignment[align](n)
+    const method = typeof align === 'number' ? 'percent' : align
+    return alignment[method](n)
   }
 
   const self: Alignment = {