Add tab block to compose

lib/js/src/compose/helpers/idgen.ts

@@ -0,0 +1,4 @@
+export function generateUID (): string {
+  let uid = Math.random().toString(36).substring(2) + (new Date()).getTime().toString(36)
+  return `tempID-${uid}`
+}

lib/js/src/compose/types/page-block/base.ts

@@ -1,5 +1,6 @@
 import { merge } from 'lodash'
 import { Apply } from '../../../cast'
+import { generateUID } from '../../helpers/idgen'
 
 interface PageBlockStyleVariants {
   [_: string]: string;
@@ -19,6 +20,11 @@ interface PageBlockStyle {
   border?: PageBlockStyleBorder;
 }
 
+interface PageBlockMeta {
+  tabbed?: boolean;
+  tempID?: string;
+}
+
 export type PageBlockInput = PageBlock | Partial<PageBlock>
 
 const defaultXYWH = [0, 2000, 3, 3]
@@ -34,6 +40,11 @@ export class PageBlock {
 
   public options = {}
 
+  public meta: PageBlockMeta = {
+    tabbed: false,
+    tempID: undefined,
+  }
+
   public style: PageBlockStyle = {
     variants: {
       headerText: 'dark',
@@ -48,6 +59,7 @@ export class PageBlock {
 
   constructor (i?: PageBlockInput) {
     this.apply(i)
+    this.setTempID()
   }
 
   apply (i?: PageBlockInput): void {
@@ -75,12 +87,29 @@ export class PageBlock {
     if (i.style) {
       this.style = merge({}, this.style, i.style)
     }
+
+    if (i.meta) {
+      this.meta = merge({}, this.meta, i.meta)
+    }
   }
 
   // Returns Page Block configuration errors
   validate (): Array<string> {
     return []
   }
+
+  setTempID (): void {
+    this.meta.tempID = this.meta.tempID || generateUID()
+  }
+
+  clone(): PageBlockInput {
+    const clone = new PageBlock()
+    clone.kind = this.kind
+    clone.title = this.title
+    clone.style = merge({}, this.style)
+    clone.options = merge({}, this.options)
+    return clone
+  }
 }
 
 export const Registry = new Map<string, typeof PageBlock>()

lib/js/src/compose/types/page-block/calendar/page-block.ts

@@ -35,6 +35,7 @@ class CalendarOptions {
   public feeds: Array<Feed> = []
   public header: Partial<CalendarOptionsHeader> = {}
   public locale = 'en-gb'
+  public tabbed = false
   public refreshRate = 0
   public showRefresh = false
   public magnifyOption = ''
@@ -75,6 +76,7 @@ export class PageBlockCalendar extends PageBlock {
     )
 
     this.options.locale = o.locale || 'en-gb'
+    this.options.tabbed = o.tabbed || false
   }
 
   /**

lib/js/src/compose/types/page-block/chart.ts

@@ -17,14 +17,14 @@ interface Options {
 }
 
 const defaults: Readonly<Options> = Object.freeze({
-  chartID: '',
+  chartID: NoID,
   refreshRate: 0,
   showRefresh: false,
   magnifyOption: '',
   drillDown: {
     enabled: false,
-    blockID: ''
-  }
+    blockID: '',
+  },
 })
 
 export class PageBlockChart extends PageBlock {

lib/js/src/compose/types/page-block/index.ts

@@ -15,10 +15,11 @@ export { PageBlockComment } from './comment'
 export { PageBlockReport } from './report'
 export { PageBlockProgress } from './progress'
 export { PageBlockNylas } from './nylas'
-export { PageBlockGeometry } from './geometry'
 export { PageBlockNavigation } from './navigation'
+export { PageBlockTab } from './tabs'
+export { PageBlockGeometry } from './geometry'
 
-export function PageBlockMaker<T extends PageBlock> (i: { kind: string }): T {
+export function PageBlockMaker<T extends PageBlock>(i: { kind: string }): T {
   const PageBlockTemp = Registry.get(i.kind)
   if (PageBlockTemp === undefined) {
     throw new Error(`unknown block kind '${i.kind}'`)

lib/js/src/compose/types/page-block/progress.ts

@@ -103,7 +103,7 @@ export class PageBlockProgress extends PageBlock {
     }
 
     if (o.display) {
-      this.options.display = { ...this.options.display, ...o.display }
+      this.options.display = o.display
     }
   }
 

lib/js/src/compose/types/page-block/record-revisions.ts

@@ -16,6 +16,7 @@ interface Options {
 
   // referenced fields (records, users) we want to expand
   expRefFields: string[];
+
   refreshRate: number;
   showRefresh: boolean;
   magnifyOption: string;

lib/js/src/compose/types/page-block/tabs.ts

@@ -0,0 +1,53 @@
+import { PageBlock, PageBlockInput, Registry } from './base'
+
+const kind = 'Tabs'
+
+interface Style {
+  appearance: string;
+  alignment: string;
+  fillJustify: string;
+}
+
+interface Tab {
+  blockID: string;
+  title: string;
+}
+
+interface Options {
+  style: Style;
+  tabs: Tab[];
+}
+
+const defaults: Readonly<Options> = Object.freeze({
+  style: {
+    appearance: 'tabs',
+    alignment: 'left',
+    fillJustify: 'none',
+  },
+  tabs: [],
+})
+
+export class PageBlockTab extends PageBlock {
+  readonly kind = kind
+
+  options: Options = { ...defaults }
+
+  constructor (i?: PageBlockInput) {
+    super(i)
+    this.applyOptions(i?.options as Partial<Options>)
+  }
+
+  applyOptions (o?: Partial<Options>): void {
+    if (!o) return
+
+    if (o.tabs) {
+      this.options.tabs = o.tabs
+    }
+
+    if (o.style) {
+      this.options.style = o.style
+    }
+  }
+}
+
+Registry.set(kind, PageBlockTab)