release(logcat): v0.2.0

liriliri · Oct 29, 2024 · c259cae · c259cae
1 parent 618ddc0
commit c259cae
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 21 deletions.
diff --git a/src/logcat/README.md b/src/logcat/README.md
@@ -46,6 +46,7 @@ logcatp.append({
 * entries(IEntry[]): Log entries.
 * filter(IFilter): Log filter.
 * maxNum(number): Max entry number, zero means infinite.
+* view('standard' | 'compact'): Log formatting.
 * wrapLongLines(boolean): Wrap long lines.
 
 ## Api

diff --git a/src/logcat/index.ts b/src/logcat/index.ts
@@ -20,6 +20,8 @@ export interface IOptions extends IComponentOptions {
   filter?: IFilter
   /** Log entries. */
   entries?: IEntry[]
+  /** Log formatting. */
+  view?: 'standard' | 'compact'
   /** Wrap long lines. */
   wrapLongLines?: boolean
 }
@@ -47,6 +49,10 @@ interface IEntry extends IBaseEntry {
   date: string | Date
 }
 
+interface IInnerEntry extends IBaseEntry {
+  date: Date
+}
+
 /**
  * Android logcat viewer.
  *
@@ -67,13 +73,14 @@ export default class Logcat extends Component<IOptions> {
   private render: types.AnyFn
   private entries: Array<{
     container: HTMLElement
-    entry: IBaseEntry & { date: Date }
+    entry: IInnerEntry
   }> = []
   constructor(container: HTMLElement, options: IOptions = {}) {
     super(container, { compName: 'logcat' })
 
     this.initOptions(options, {
       maxNum: 0,
+      view: 'standard',
       entries: [],
       wrapLongLines: false,
     })
@@ -98,15 +105,13 @@ export default class Logcat extends Component<IOptions> {
   /** Append entry. */
   append(entry: IEntry) {
     const { c, entries } = this
-    const { maxNum } = this.options
+    const { maxNum, view } = this.options
 
     const date: Date = isDate(entry.date)
       ? (entry.date as Date)
       : new Date(entry.date)
 
-    const level = ['?', '?', 'V', 'D', 'I', 'W', 'E'][entry.priority]
-
-    const container = h(`.${c('entry')}.${c(level)}`)
+    const container = h(`.${c('entry')}.${c(toLetter(entry.priority))}`)
     const e = {
       ...entry,
       date,
@@ -123,20 +128,8 @@ export default class Logcat extends Component<IOptions> {
       }
     }
 
-    const html = [
-      `<span class="${c('date')}">${dateFormat(
-        date,
-        'yyyy-mm-dd HH:MM:ss.l'
-      )}</span>`,
-      `<span class="${c('pid')}">${entry.pid}-${entry.tid}</span>`,
-      `<span class="${c('tag')}" style="color:${getColor(entry.tag)}">${escape(
-        entry.tag
-      )}</span>`,
-      `<span class="${c('package')}">${escape(entry.package)}</span>`,
-      `<span class="${c('priority')}">${level}</span>`,
-      `<span class="${c('message')}">${escape(entry.message)}</span>`,
-    ].join(' ')
-    container.innerHTML = html
+    container.innerHTML =
+      view === 'standard' ? this.formatStandard(e) : this.formatCompact(e)
 
     if (this.filterEntry(e)) {
       const isAtBottom = this.isAtBottom
@@ -204,6 +197,16 @@ export default class Logcat extends Component<IOptions> {
             this.render()
           }
           break
+        case 'view':
+          each(entries, (entry) => {
+            const html =
+              val === 'standard'
+                ? this.formatStandard(entry.entry)
+                : this.formatCompact(entry.entry)
+
+            entry.container.innerHTML = html
+          })
+          break
         case 'filter':
           this.render()
           break
@@ -224,6 +227,35 @@ export default class Logcat extends Component<IOptions> {
     }
     this.isAtBottom = isAtBottom
   }
+  private formatStandard(entry: IInnerEntry) {
+    const { c } = this
+
+    return [
+      `<span class="${c('date')}">${dateFormat(
+        entry.date,
+        'yyyy-mm-dd HH:MM:ss.l'
+      )}</span>`,
+      `<span class="${c('pid')}">${entry.pid}-${entry.tid}</span>`,
+      `<span class="${c('tag')}" style="color:${getColor(entry.tag)}">${escape(
+        entry.tag
+      )}</span>`,
+      `<span class="${c('package')}">${escape(entry.package)}</span>`,
+      `<span class="${c('priority')}">${toLetter(entry.priority)}</span>`,
+      `<span class="${c('message')}">${escape(entry.message)}</span>`,
+    ].join(' ')
+  }
+  private formatCompact(entry: IInnerEntry) {
+    const { c } = this
+
+    return [
+      `<span class="${c('date')}">${dateFormat(
+        entry.date,
+        'HH:MM:ss.l'
+      )}</span>`,
+      `<span class="${c('priority')}">${toLetter(entry.priority)}</span>`,
+      `<span class="${c('message')}">${escape(entry.message)}</span>`,
+    ].join(' ')
+  }
   private _render() {
     const { container } = this
     this.$container.html('')
@@ -239,6 +271,10 @@ export default class Logcat extends Component<IOptions> {
   }
 }
 
+function toLetter(priority: number) {
+  return ['?', '?', 'V', 'D', 'I', 'W', 'E'][priority]
+}
+
 function getColor(str: string) {
   return colors[strHash(str) % colors.length]
 }

diff --git a/src/logcat/package.json b/src/logcat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logcat",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Android logcat viewer",
   "luna": {
     "react": true

diff --git a/src/logcat/story.js b/src/logcat/story.js
@@ -13,11 +13,12 @@ const def = story(
   (container) => {
     $(container).css('height', '500px')
 
-    const { wrapLongLines, maxNum, filter } = createKnobs()
+    const { wrapLongLines, maxNum, filter, view } = createKnobs()
 
     const logcat = new Logcat(container, {
       filter,
       maxNum,
+      view,
       wrapLongLines,
     })
     each(logs, (log) => logcat.append(log))
@@ -63,6 +64,10 @@ function createKnobs() {
     max: 1000,
     step: 10,
   })
+  const view = select('View', {
+    'Standard View': 'standard',
+    'Compact View': 'compact',
+  })
   const wrapLongLines = boolean('Wrap Long Lines', false)
 
   return {
@@ -71,6 +76,7 @@ function createKnobs() {
       package: filterPackage,
       tag: filterTag,
     },
+    view,
     maxNum,
     wrapLongLines,
   }