From 61c81b280940ece1c6f9470ee8b0148ff9f405e0 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Sun, 1 Dec 2024 17:20:32 +0800
Subject: [PATCH] release(logcat): v0.4.2

---
 index.json              |  2 +-
 src/logcat/index.ts     |  6 +++---
 src/logcat/package.json |  2 +-
 src/logcat/react.tsx    | 19 ++++++++++---------
 src/logcat/story.js     |  3 ++-
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/index.json b/index.json
index c4c920d..7228bee 100644
--- a/index.json
+++ b/index.json
@@ -172,7 +172,7 @@
   },
   "logcat": {
     "react": true,
-    "version": "0.4.1",
+    "version": "0.4.2",
     "style": true,
     "icon": false,
     "test": true,
diff --git a/src/logcat/index.ts b/src/logcat/index.ts
index 7a58ba5..afbfa09 100644
--- a/src/logcat/index.ts
+++ b/src/logcat/index.ts
@@ -81,7 +81,7 @@ export default class Logcat extends Component<IOptions> {
   private removeThreshold = 1
   private frag: DocumentFragment = document.createDocumentFragment()
   constructor(container: HTMLElement, options: IOptions = {}) {
-    super(container, { compName: 'logcat' })
+    super(container, { compName: 'logcat' }, options)
 
     this.initOptions(options, {
       maxNum: 5000,
@@ -297,7 +297,7 @@ export default class Logcat extends Component<IOptions> {
       )}</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>`,
+      `<span class="${c('message')}">${escape(trim(entry.message))}</span>`,
     ].join(' ')
   }
   private formatCompact(entry: IInnerEntry) {
@@ -309,7 +309,7 @@ export default class Logcat extends Component<IOptions> {
         'HH:MM:ss.l'
       )}</span>`,
       `<span class="${c('priority')}">${toLetter(entry.priority)}</span>`,
-      `<span class="${c('message')}">${escape(entry.message)}</span>`,
+      `<span class="${c('message')}">${escape(trim(entry.message))}</span>`,
     ].join(' ')
   }
   private _render() {
diff --git a/src/logcat/package.json b/src/logcat/package.json
index afb1550..c8a0c49 100644
--- a/src/logcat/package.json
+++ b/src/logcat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "logcat",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Android logcat viewer",
   "luna": {
     "react": true
diff --git a/src/logcat/react.tsx b/src/logcat/react.tsx
index dfe4e7d..16b4a62 100644
--- a/src/logcat/react.tsx
+++ b/src/logcat/react.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, FC, MouseEventHandler, useEffect, useRef } from 'react'
 import each from 'licia/each'
 import Logcat, { IOptions } from './index'
-import { useNonInitialEffect } from '../share/hooks'
+import { useOption } from '../share/hooks'
 
 interface IILogcatProps extends IOptions {
   style?: CSSProperties
@@ -15,8 +15,10 @@ const LunaLogcat: FC<IILogcatProps> = (props) => {
   const logcat = useRef<Logcat>()
 
   useEffect(() => {
-    const { maxNum, wrapLongLines, filter, entries, view } = props
+    const { theme, maxNum, wrapLongLines, filter, entries, view } = props
+
     logcat.current = new Logcat(logcatRef.current!, {
+      theme,
       filter,
       maxNum,
       wrapLongLines,
@@ -28,13 +30,12 @@ const LunaLogcat: FC<IILogcatProps> = (props) => {
     return () => logcat.current?.destroy()
   }, [])
 
-  each(['filter', 'maxNum', 'wrapLongLines', 'view'], (key: keyof IOptions) => {
-    useNonInitialEffect(() => {
-      if (logcat.current) {
-        logcat.current.setOption(key, props[key])
-      }
-    }, [props[key]])
-  })
+  each(
+    ['theme', 'filter', 'maxNum', 'wrapLongLines', 'view'],
+    (key: keyof IOptions) => {
+      useOption<Logcat, IOptions>(logcat, key, props[key])
+    }
+  )
 
   return (
     <div
diff --git a/src/logcat/story.js b/src/logcat/story.js
index b96cf9b..8996719 100644
--- a/src/logcat/story.js
+++ b/src/logcat/story.js
@@ -50,7 +50,7 @@ const def = story(
   {
     readme,
     story: __STORY__,
-    ReactComponent() {
+    ReactComponent({ theme }) {
       const { wrapLongLines, maxNum, filter, view } = createKnobs()
       const logcatRef = useRef(null)
 
@@ -75,6 +75,7 @@ const def = story(
 
       return (
         <LunaLogcat
+          theme={theme}
           style={{ height: '500px' }}
           wrapLongLines={wrapLongLines}
           maxNum={maxNum}