@quicktvui/web-renderer 1.0.0

package/src/components/QtBaseComponent.js

@@ -0,0 +1,165 @@
+/**
+ * QtBaseComponent - Base class for all QuickTV UI components
+ * Provides common property handling (visible, visibility, 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
+  }
+
+  /**
+   * 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 !== '') {
+        const typeValue = String(value)
+        this.dom.setAttribute('type', typeValue)
+        this.dom.setAttribute('data-template-type', typeValue)
+      } else {
+        this.dom.removeAttribute('type')
+        this.dom.removeAttribute('data-template-type')
+      }
+    }
+    if (this._handleCommonProperty(key, value)) {
+      return
+    }
+    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':
+        this._setVisible(value)
+        return true
+
+      case 'visibility':
+        this._setVisibility(value)
+        return true
+
+      case 'autofocus':
+        // 将 autofocus 属性设置到 DOM 元素上，供 TVFocusManager 识别
+        if (value === true || value === 'true' || value === 1 || value === '1') {
+          this.dom.setAttribute('autofocus', 'true')
+        } else {
+          this.dom.removeAttribute('autofocus')
+        }
+        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'
+        }
+      }
+    } else {
+      // Save current display value before hiding
+      if (this._originalDisplay === undefined) {
+        const currentDisplay = this.dom.style.display
+        if (currentDisplay && currentDisplay !== 'none') {
+          this._originalDisplay = currentDisplay
+        }
+      }
+      this.dom.style.display = 'none'
+    }
+  }
+
+  /**
+   * 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'
+          }
+        }
+        this.dom.style.visibility = ''
+        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') {
+            this._originalDisplay = currentDisplay
+          }
+        }
+        this.dom.style.display = 'none'
+        break
+
+      default:
+        break
+    }
+  }
+
+  /**
+   * Public method to set visibility via boolean
+   * @param {boolean} visible - true to show, false to hide
+   */
+  setVisible(visible) {
+    this._setVisible(visible)
+  }
+
+  /**
+   * Public method to set visibility via enum
+   * @param {QTVisibility} visibility - 'visible' | 'invisible' | 'gone'
+   */
+  setVisibility(visibility) {
+    this._setVisibility(visibility)
+  }
+}