@quicktvui/web-renderer 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quicktvui/web-renderer",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Web renderer for QuickTVUI - provides web browser rendering support",
   "author": "QuickTVUI Team",
   "license": "Apache-2.0",

package/src/components/QtBaseComponent.js

@@ -1,25 +1,16 @@
 /**
  * QtBaseComponent - Base class for all QuickTV UI components
- * Provides common property handling (visible, visibility, etc.)
+ * Provides common property handling (visible, visibility, showOnState, etc.)
  */
 import { HippyWebView } from '@hippy/web-renderer'
 
-/**
- * Visibility enum values
- * @typedef {'visible' | 'invisible' | 'gone'} QTVisibility
- */
-
 export class QtBaseComponent extends HippyWebView {
   constructor(context, id, pId) {
     super(context, id, pId)
-    // Store original display value for visibility toggle
     this._originalDisplay = undefined
+    this._showOnState = null
   }
 
-  /**
-   * Override updateProperty to handle common properties first
-   * Subclasses should call super.updateProperty(key, value) for unhandled properties
-   */
   updateProperty(key, value) {
     if (key === 'type' && this.dom) {
       if (value !== null && value !== undefined && value !== '') {
@@ -37,12 +28,6 @@ export class QtBaseComponent extends HippyWebView {
     super.updateProperty(key, value)
   }
 
-  /**
-   * Handle common properties
-   * @param {string} key - Property name
-   * @param {*} value - Property value
-   * @returns {boolean} - True if handled
-   */
   _handleCommonProperty(key, value) {
     switch (key) {
       case 'visible':
@@ -54,7 +39,6 @@ export class QtBaseComponent extends HippyWebView {
         return true
 
       case 'autofocus':
-        // 将 autofocus 属性设置到 DOM 元素上，供 TVFocusManager 识别
         if (value === true || value === 'true' || value === 1 || value === '1') {
           this.dom.setAttribute('autofocus', 'true')
         } else {
@@ -63,7 +47,6 @@ export class QtBaseComponent extends HippyWebView {
         return true
 
       case 'name':
-        // 存储 name 属性到组件实例和 DOM 上，用于子组件查找
         this.props = this.props || {}
         this.props.name = value
         if (value) {
@@ -73,39 +56,26 @@ export class QtBaseComponent extends HippyWebView {
         }
         return true
 
+      case 'showOnState':
+        this._setShowOnState(value)
+        return true
+
       default:
         return false
     }
   }
 
-  /**
-   * Set component visibility via boolean
-   * @param {boolean} visible - true to show, false to hide
-   */
   _setVisible(visible) {
     if (visible === true) {
-      // Restore original display value if saved
       if (this._originalDisplay !== undefined) {
         this.dom.style.display = this._originalDisplay
       } else {
-        // In Hippy, all elements default to flex layout
-        // Check if the element has flex properties and set display: flex accordingly
         const style = this.dom.style
-        const hasFlexProperties =
-          style.flexDirection ||
-          style.justifyContent ||
-          style.alignItems ||
-          style.flexWrap ||
-          style.flexGrow ||
-          style.flexShrink
-
-        // Default to 'flex' for Hippy compatibility, unless display is already set
         if (!style.display || style.display === 'none') {
-          style.display = hasFlexProperties ? 'flex' : 'flex'
+          style.display = 'flex'
         }
       }
     } else {
-      // Save current display value before hiding
       if (this._originalDisplay === undefined) {
         const currentDisplay = this.dom.style.display
         if (currentDisplay && currentDisplay !== 'none') {
@@ -116,19 +86,12 @@ export class QtBaseComponent extends HippyWebView {
     }
   }
 
-  /**
-   * Set component visibility via enum
-   * @param {QTVisibility} visibility - 'visible' | 'invisible' | 'gone'
-   */
   _setVisibility(visibility) {
     switch (visibility) {
       case 'visible':
-        // Restore display and ensure visibility
         if (this._originalDisplay !== undefined) {
           this.dom.style.display = this._originalDisplay
         } else {
-          // In Hippy, all elements default to flex layout
-          // Default to 'flex' for Hippy compatibility
           const style = this.dom.style
           if (!style.display || style.display === 'none') {
             style.display = 'flex'
@@ -138,12 +101,10 @@ export class QtBaseComponent extends HippyWebView {
         break
 
       case 'invisible':
-        // Hidden but takes space
         this.dom.style.visibility = 'hidden'
         break
 
       case 'gone':
-        // Completely hidden, doesn't take space
         if (this._originalDisplay === undefined) {
           const currentDisplay = this.dom.style.display
           if (currentDisplay && currentDisplay !== 'none') {
@@ -158,19 +119,91 @@ export class QtBaseComponent extends HippyWebView {
     }
   }
 
-  /**
-   * Public method to set visibility via boolean
-   * @param {boolean} visible - true to show, false to hide
-   */
+  _setShowOnState(value) {
+    if (value === null || value === undefined) {
+      this._showOnState = null
+      this.dom.removeAttribute('showOnState')
+      this.dom.style.display = ''
+      return
+    }
+
+    this._showOnState = value
+
+    if (Array.isArray(value)) {
+      this.dom.setAttribute('showOnState', JSON.stringify(value))
+    } else {
+      this.dom.setAttribute('showOnState', String(value))
+    }
+
+    this._initShowOnStateVisibility()
+  }
+
+  _initShowOnStateVisibility() {
+    if (!this._showOnState) return
+
+    const focusedParent = this.dom.closest('.focused')
+    const selectedParent = this.dom.closest('[selected="true"], [selected=""]')
+
+    let currentState = 'normal'
+    if (focusedParent) {
+      currentState = 'focused'
+    } else if (selectedParent) {
+      currentState = 'selected'
+    }
+
+    this._applyShowOnState(currentState)
+  }
+
+  _applyShowOnState(state) {
+    if (!this._showOnState) return
+
+    const states = this._parseShowOnState(this._showOnState)
+    const shouldShow = states.includes(state.toLowerCase())
+
+    if (shouldShow) {
+      if (this._originalDisplay !== undefined) {
+        this.dom.style.display = this._originalDisplay
+      } else {
+        this.dom.style.display = ''
+      }
+    } else {
+      if (this._originalDisplay === undefined) {
+        const currentDisplay = this.dom.style.display
+        if (currentDisplay && currentDisplay !== 'none') {
+          this._originalDisplay = currentDisplay
+        }
+      }
+      this.dom.style.display = 'none'
+    }
+  }
+
+  _parseShowOnState(value) {
+    if (Array.isArray(value)) {
+      return value.map((s) => String(s).toLowerCase())
+    }
+
+    if (typeof value === 'string') {
+      try {
+        const parsed = JSON.parse(value)
+        if (Array.isArray(parsed)) {
+          return parsed.map((s) => String(s).toLowerCase())
+        }
+      } catch (e) {}
+      return [value.toLowerCase()]
+    }
+
+    return []
+  }
+
   setVisible(visible) {
     this._setVisible(visible)
   }
 
-  /**
-   * Public method to set visibility via enum
-   * @param {QTVisibility} visibility - 'visible' | 'invisible' | 'gone'
-   */
   setVisibility(visibility) {
     this._setVisibility(visibility)
   }
+
+  setShowOnState(value) {
+    this._setShowOnState(value)
+  }
 }