react-native-platform-components 1.4.0 → 1.5.0

package/android/src/main/java/com/platformcomponents/PCMenuSupport.kt

@@ -0,0 +1,280 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.graphics.Rect
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.DrawableWrapper
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.style.ForegroundColorSpan
+import android.util.Log
+import android.util.TypedValue
+import android.view.Menu
+import android.view.MenuItem
+import androidx.appcompat.R as AppCompatR
+import androidx.core.content.ContextCompat
+import androidx.core.graphics.drawable.DrawableCompat
+import androidx.core.view.MenuCompat
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
+import com.platformcomponents.PCButtonSupport.doubleOr
+import com.platformcomponents.PCButtonSupport.stringOr
+import kotlin.math.roundToInt
+
+/**
+ * Builds Android menus from flattened menu items (src/menuItems.ts): inline
+ * sections become menu groups with dividers, and items get submenus, icons
+ * (drawables and React Native image sources), the destructive color, the
+ * enabled state and a check mark. Shared by the components that show a
+ * PopupMenu.
+ */
+object PCMenuSupport {
+  private const val TAG = "PCMenuSupport"
+
+  // Material 3 baseline error color, used when the theme has no colorError.
+  private const val FALLBACK_ERROR_COLOR = 0xFFB3261E.toInt()
+
+  // Material menu and list icons are 24dp
+  private const val ICON_SIZE_DP = 24
+
+  data class Item(
+    /** Position in the flattened list; also the MenuItem id */
+    val index: Int,
+    val id: String,
+    val title: String,
+    val subtitle: String,
+    /** Index of the parent submenu or section; -1 at the top level */
+    val parent: Int,
+    /** "action" | "menu" | "section" */
+    val kind: String,
+    val icon: PCButtonSupport.Icon,
+    val imageColor: String,
+    val destructive: Boolean,
+    val disabled: Boolean,
+    /** iOS only; Android popups close on every press */
+    val keepsMenuPresented: Boolean,
+    /** "" | "off" | "on" | "mixed" */
+    val state: String,
+    /** The item's own `haptics`; "" = the component's */
+    val haptics: String = ""
+  ) {
+    val isAction: Boolean get() = kind != "menu" && kind != "section"
+  }
+
+  /** Reads the flattened items from the `actions` prop. */
+  fun parseItems(array: ReadableArray?): List<Item> {
+    if (array == null) return emptyList()
+    val out = ArrayList<Item>(array.size())
+    for (i in 0 until array.size()) {
+      val map = array.getMap(i) ?: continue
+      out.add(
+        Item(
+          index = out.size,
+          id = map.stringOr("id", ""),
+          title = map.stringOr("title", ""),
+          subtitle = map.stringOr("subtitle", ""),
+          parent = map.doubleOr("parent", -1.0).toInt(),
+          kind = map.stringOr("kind", "action"),
+          icon = PCButtonSupport.parseIcon(map),
+          imageColor = map.stringOr("imageColor", ""),
+          destructive = map.stringOr("destructive", "false") == "true",
+          disabled = map.stringOr("disabled", "false") == "true",
+          keepsMenuPresented = map.stringOr("keepsMenuPresented", "false") == "true",
+          state = map.stringOr("state", ""),
+          haptics = map.stringOr("haptics", "")
+        )
+      )
+    }
+    return out
+  }
+
+  /**
+   * Adds [items] to [menu]. Each MenuItem's id is its item's index, so
+   * [itemFor] finds the item behind a click. Image icons that load in the
+   * background are set when they arrive, while [isCurrent] holds. Returns
+   * whether any item has an icon (for `PopupMenu.setForceShowIcon`).
+   */
+  fun populate(
+    context: Context,
+    menu: Menu,
+    items: List<Item>,
+    isCurrent: () -> Boolean = { true }
+  ): Boolean {
+    val children = items.groupBy { it.parent }
+    var nextGroupId = 1
+    var hasIcons = false
+
+    fun add(target: Menu, parent: Int) {
+      val list = children[parent] ?: return
+      // Dividers are drawn where the group id changes: each section gets its
+      // own group, and so does each run of items between sections.
+      var groupId = nextGroupId++
+      var order = 0
+      var sectionsInMenu = false
+
+      fun addItem(item: Item, group: Int) {
+        when (item.kind) {
+          "menu" -> {
+            if (children[item.index].isNullOrEmpty()) return
+            val subMenu = target.addSubMenu(group, item.index, order++, item.title)
+            subMenu.item.isEnabled = !item.disabled
+            if (applyIcon(context, subMenu.item, item, isCurrent)) hasIcons = true
+            add(subMenu, item.index)
+          }
+          else -> {
+            val menuItem = target.add(group, item.index, order++, title(context, item))
+            menuItem.isEnabled = !item.disabled
+            if (applyIcon(context, menuItem, item, isCurrent)) hasIcons = true
+            // Android has no mixed state: "mixed" shows checked
+            if (item.state == "on" || item.state == "mixed") {
+              menuItem.isCheckable = true
+              menuItem.isChecked = true
+            }
+          }
+        }
+      }
+
+      // A section's items; sections nested in it add their items to the same group
+      fun sectionItems(section: Item): List<Item> =
+        children[section.index].orEmpty().flatMap {
+          if (it.kind == "section") sectionItems(it) else listOf(it)
+        }
+
+      for (item in list) {
+        if (item.kind == "section") {
+          val sectionItems = sectionItems(item)
+          if (sectionItems.isEmpty()) continue
+          sectionsInMenu = true
+          val sectionGroup = nextGroupId++
+          sectionItems.forEach { addItem(it, sectionGroup) }
+          // Items after the section start a new group
+          groupId = nextGroupId++
+        } else {
+          addItem(item, groupId)
+        }
+      }
+
+      if (sectionsInMenu) MenuCompat.setGroupDividerEnabled(target, true)
+    }
+
+    add(menu, -1)
+    return hasIcons
+  }
+
+  /** The item behind a clicked MenuItem. */
+  fun itemFor(menuItem: MenuItem, items: List<Item>): Item? = items.getOrNull(menuItem.itemId)
+
+  /** Destructive titles are drawn in the theme's error color. */
+  private fun title(context: Context, item: Item): CharSequence {
+    if (!item.destructive) return item.title
+    return SpannableString(item.title).apply {
+      setSpan(ForegroundColorSpan(errorColor(context)), 0, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+    }
+  }
+
+  /**
+   * Sets the item's icon; returns whether it has one. An explicit imageColor
+   * tints it; destructive icons otherwise take the error color.
+   */
+  private fun applyIcon(
+    context: Context,
+    menuItem: MenuItem,
+    item: Item,
+    isCurrent: () -> Boolean
+  ): Boolean {
+    if (!item.icon.isPresent) return false
+    loadIcon(context, item.icon) { drawable ->
+      if (drawable == null || !isCurrent()) return@loadIcon
+      val color = when {
+        item.imageColor.isNotEmpty() -> ColorParser.parse(item.imageColor)
+        item.destructive -> errorColor(context)
+        else -> null
+      }
+      menuItem.icon = if (color != null) tint(drawable, color) else drawable
+    }
+    return true
+  }
+
+  /**
+   * Resolves an icon to a drawable. Drawable names and release-bundled assets
+   * (drawable resources) resolve right away; other image URIs load in the
+   * background and arrive on the main thread. Image sources sit in a 24dp
+   * box, and those drawn as templates take the theme's icon color
+   * (`?attr/colorControlNormal`, as Material icons do); drawables keep their
+   * own size and tint.
+   */
+  fun loadIcon(context: Context, icon: PCButtonSupport.Icon, onLoaded: (Drawable?) -> Unit) {
+    fun imageIcon(drawable: Drawable): Drawable {
+      val size = (ICON_SIZE_DP * context.resources.displayMetrics.density).roundToInt()
+      val color = if (icon.tinted) themeColor(context, AppCompatR.attr.colorControlNormal) else null
+      return IconBox(if (color != null) tint(drawable, color) else drawable, size)
+    }
+    when (icon.type) {
+      "drawable" -> onLoaded(drawableByName(context, icon.name))
+      "image" -> {
+        val uri = icon.uri
+        if (!uri.contains(':')) {
+          onLoaded(ResourceDrawableIdHelper.instance.getResourceDrawable(context, uri)?.let(::imageIcon))
+        } else {
+          PCImageLoader.load(context, uri, icon.scale, icon.request) { bitmap ->
+            onLoaded(bitmap?.let { imageIcon(BitmapDrawable(context.resources, it)) })
+          }
+        }
+      }
+      else -> onLoaded(null)
+    }
+  }
+
+  /**
+   * Keeps an image source in the 24dp box of Material menu icons, centered
+   * and scaled down when larger, so its row lines up with the drawable icons.
+   */
+  private class IconBox(drawable: Drawable, private val size: Int) : DrawableWrapper(drawable) {
+    override fun getIntrinsicWidth(): Int = size
+    override fun getIntrinsicHeight(): Int = size
+
+    override fun onBoundsChange(bounds: Rect) {
+      val inner = drawable ?: return
+      val w = inner.intrinsicWidth.takeIf { it > 0 } ?: bounds.width()
+      val h = inner.intrinsicHeight.takeIf { it > 0 } ?: bounds.height()
+      val scale = minOf(1f, bounds.width().toFloat() / w, bounds.height().toFloat() / h)
+      val width = (w * scale).roundToInt()
+      val height = (h * scale).roundToInt()
+      val left = bounds.left + (bounds.width() - width) / 2
+      val top = bounds.top + (bounds.height() - height) / 2
+      inner.setBounds(left, top, left + width, top + height)
+    }
+  }
+
+  private fun tint(drawable: Drawable, color: Int): Drawable {
+    val wrapped = DrawableCompat.wrap(drawable.mutate())
+    DrawableCompat.setTint(wrapped, color)
+    return wrapped
+  }
+
+  /** A drawable resource by name, also trying the `ic_` prefix. */
+  private fun drawableByName(context: Context, name: String): Drawable? {
+    if (name.isEmpty()) return null
+    for (candidate in listOf(name, "ic_$name")) {
+      val id = context.resources.getIdentifier(candidate, "drawable", context.packageName)
+      if (id != 0) return ContextCompat.getDrawable(context, id)
+    }
+    Log.d(TAG, "Drawable not found: $name")
+    return null
+  }
+
+  /** The theme's ?attr/colorError, falling back to the Material 3 error red. */
+  fun errorColor(context: Context): Int =
+    themeColor(context, AppCompatR.attr.colorError) ?: FALLBACK_ERROR_COLOR
+
+  fun themeColor(context: Context, attr: Int): Int? {
+    val value = TypedValue()
+    if (!context.theme.resolveAttribute(attr, value, true)) return null
+    return if (value.resourceId != 0) {
+      ContextCompat.getColor(context, value.resourceId)
+    } else {
+      value.data
+    }
+  }
+}

package/android/src/main/java/com/platformcomponents/PCNavigationBarSupport.kt

@@ -0,0 +1,332 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.StateListDrawable
+import android.util.TypedValue
+import android.view.Menu
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
+import androidx.core.content.ContextCompat
+import androidx.core.view.MenuItemCompat
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
+import com.facebook.react.views.text.ReactTypefaceUtils
+import com.google.android.material.navigation.NavigationBarView
+import com.google.android.material.shape.RelativeCornerSize
+import com.google.android.material.shape.ShapeAppearanceModel
+import com.platformcomponents.PCButtonSupport.doubleOr
+import com.platformcomponents.PCButtonSupport.stringOr
+import kotlin.math.roundToInt
+
+/**
+ * Tabs on a Material navigation bar (NavigationBarView, the base of
+ * BottomNavigationView and NavigationRailView): the item model as the specs
+ * send it, and building the menu, icons, badges, colors, active indicator,
+ * test ids and label fonts.
+ */
+object PCNavigationBarSupport {
+
+  data class Item(
+    val label: String,
+    val value: String,
+    val disabled: Boolean,
+    val icon: PCButtonSupport.Icon,
+    val selectedIcon: PCButtonSupport.Icon,
+    /** "" = no badge, " " = a dot, anything else is the badge text */
+    val badge: String,
+    val accessibilityLabel: String,
+    val testID: String,
+    /** "" | "search": a search tab without an icon gets a search icon */
+    val role: String = ""
+  )
+
+  /** Label font and font scale cap; empty / 0 = the platform default. */
+  data class LabelFont(
+    val family: String = "",
+    val size: Float = 0f,
+    val weight: String = "",
+    val style: String = "",
+    val maxFontSizeMultiplier: Float = 0f
+  )
+
+  /** The active indicator; 0 = the Material default size. */
+  data class Indicator(
+    val enabled: Boolean = true,
+    /** "" | "pill" | "circle" | "rounded" (cornerRadius) */
+    val shape: String = "",
+    val cornerRadius: Float = 0f,
+    val width: Float = 0f,
+    val height: Float = 0f
+  )
+
+  /** Menu item id of the tab at [index]; 0 means "no id" to the menu. */
+  fun itemId(index: Int) = index + 1
+
+  // items: [{label, value, disabled, icon…, selectedIcon…, badge, accessibilityLabel, testID, role}]
+  fun parseItems(value: ReadableArray?): List<Item> {
+    val out = ArrayList<Item>()
+    if (value == null) return out
+    for (i in 0 until value.size()) {
+      val m = value.getMap(i) ?: continue
+      out.add(
+        Item(
+          label = m.stringOr("label", ""),
+          value = m.stringOr("value", ""),
+          disabled = m.stringOr("disabled", "enabled") == "disabled",
+          icon = m.icon(""),
+          selectedIcon = m.icon("selected"),
+          badge = m.stringOr("badge", ""),
+          accessibilityLabel = m.stringOr("accessibilityLabel", ""),
+          testID = m.stringOr("testID", ""),
+          role = m.stringOr("role", "")
+        )
+      )
+    }
+    return out
+  }
+
+  private fun ReadableMap.icon(prefix: String): PCButtonSupport.Icon {
+    fun key(name: String) = if (prefix.isEmpty()) name else prefix + name.replaceFirstChar { it.uppercase() }
+    val scale = doubleOr(key("iconScale"), 1.0)
+    return PCButtonSupport.Icon(
+      type = stringOr(key("iconType"), ""),
+      name = stringOr(key("iconName"), ""),
+      uri = stringOr(key("iconUri"), ""),
+      scale = if (scale > 0) scale.toFloat() else 1f,
+      tinted = stringOr(key("iconTinted"), "true") != "false",
+      request = stringOr(key("iconRequest"), "")
+    )
+  }
+
+  fun labelVisibilityMode(value: String): Int = when (value) {
+    "labeled" -> NavigationBarView.LABEL_VISIBILITY_LABELED
+    "selected" -> NavigationBarView.LABEL_VISIBILITY_SELECTED
+    "unlabeled" -> NavigationBarView.LABEL_VISIBILITY_UNLABELED
+    else -> NavigationBarView.LABEL_VISIBILITY_AUTO
+  }
+
+  /**
+   * Icons above the labels ("vertical"), or beside them ("horizontal",
+   * Material 3 Expressive), centered in the bar; "auto" is horizontal from
+   * 600dp, the medium window width.
+   */
+  fun applyItemLayout(bar: NavigationBarView, layout: String, widthPx: Int) {
+    val horizontal = when (layout) {
+      "horizontal" -> true
+      "auto" -> widthPx / bar.resources.displayMetrics.density >= 600f
+      else -> false
+    }
+    val iconGravity =
+      if (horizontal) NavigationBarView.ITEM_ICON_GRAVITY_START else NavigationBarView.ITEM_ICON_GRAVITY_TOP
+    if (bar.itemIconGravity == iconGravity) return
+    bar.itemIconGravity = iconGravity
+    bar.itemGravity =
+      if (horizontal) NavigationBarView.ITEM_GRAVITY_CENTER else NavigationBarView.ITEM_GRAVITY_TOP_CENTER
+  }
+
+  /**
+   * Adds the tabs to the bar's menu, as many as it takes, with their icons.
+   * Icons that load in the background are applied while [isCurrent] holds,
+   * then [onIconLoaded] runs. Call after [applyColors] so each icon receives
+   * the final state colors before the bar-wide tint is disabled.
+   */
+  fun populateMenu(
+    bar: NavigationBarView,
+    items: List<Item>,
+    isCurrent: () -> Boolean,
+    onIconLoaded: () -> Unit
+  ) {
+    val menu = bar.menu
+    // Material's bar-wide tint overrides an image's original colors. Apply the
+    // same state list to each opted-in icon, including its selected variant.
+    // https://developer.android.com/reference/com/google/android/material/navigation/NavigationBarView#setItemIconTintList(android.content.res.ColorStateList)
+    val iconTint = bar.itemIconTintList
+    bar.itemIconTintList = null
+    val count = minOf(items.size, bar.maxItemCount)
+    for (index in 0 until count) {
+      val tab = items[index]
+      val item = menu.add(Menu.NONE, itemId(index), index, tab.label)
+      item.isEnabled = !tab.disabled
+      MenuItemCompat.setContentDescription(item, tab.accessibilityLabel.ifEmpty { null })
+      loadItemIcon(bar.context, tab, iconTint, isCurrent) { drawable ->
+        item.icon = drawable
+        onIconLoaded()
+      }
+    }
+  }
+
+  /** Colors over the theme's, read from the fresh bar for the states left unset. */
+  fun applyColors(
+    bar: NavigationBarView,
+    active: Int?,
+    inactive: Int?,
+    indicator: Int?,
+    ripple: Int?,
+    background: Int?
+  ) {
+    val checked = intArrayOf(android.R.attr.state_checked)
+    val disabled = intArrayOf(-android.R.attr.state_enabled)
+    if (active != null || inactive != null) {
+      fun tint(theme: ColorStateList?): ColorStateList {
+        val base = theme ?: ColorStateList.valueOf(0xFF49454F.toInt())
+        return ColorStateList(
+          arrayOf(disabled, checked, intArrayOf()),
+          intArrayOf(
+            base.getColorForState(disabled, base.defaultColor),
+            active ?: base.getColorForState(checked, base.defaultColor),
+            inactive ?: base.defaultColor
+          )
+        )
+      }
+      bar.itemIconTintList = tint(bar.itemIconTintList)
+      bar.itemTextColor = tint(bar.itemTextColor)
+    }
+    indicator?.let { bar.itemActiveIndicatorColor = ColorStateList.valueOf(it) }
+    ripple?.let { bar.itemRippleColor = ColorStateList.valueOf(it) }
+    background?.let { bar.setBackgroundColor(it) }
+  }
+
+  /** The active indicator's visibility, size and shape. */
+  fun applyIndicator(bar: NavigationBarView, indicator: Indicator) {
+    bar.isItemActiveIndicatorEnabled = indicator.enabled
+    val density = bar.resources.displayMetrics.density
+    fun px(dp: Float) = (dp * density).roundToInt()
+    if (indicator.height > 0) {
+      bar.itemActiveIndicatorHeight = px(indicator.height)
+      bar.itemActiveIndicatorExpandedHeight = px(indicator.height)
+    }
+    // Horizontal tabs keep an indicator that wraps the icon and label
+    when {
+      indicator.shape == "circle" -> bar.itemActiveIndicatorWidth = bar.itemActiveIndicatorHeight
+      indicator.width > 0 -> bar.itemActiveIndicatorWidth = px(indicator.width)
+    }
+    val shape = when (indicator.shape) {
+      "pill", "circle" -> ShapeAppearanceModel.builder().setAllCornerSizes(RelativeCornerSize(0.5f)).build()
+      "rounded" -> ShapeAppearanceModel.builder().setAllCornerSizes(indicator.cornerRadius * density).build()
+      else -> null
+    }
+    shape?.let { bar.itemActiveIndicatorShapeAppearance = it }
+  }
+
+  /** Material badges: a number, text, or a dot. */
+  fun applyBadges(bar: NavigationBarView, items: List<Item>, background: Int?, text: Int?) {
+    val count = minOf(items.size, bar.maxItemCount)
+    for (index in 0 until count) {
+      val tab = items[index]
+      val id = itemId(index)
+      if (tab.badge.isEmpty()) {
+        bar.removeBadge(id)
+        continue
+      }
+      val badge = bar.getOrCreateBadge(id)
+      badge.clearNumber()
+      badge.clearText()
+      val number = tab.badge.trim().toIntOrNull()
+      when {
+        tab.badge == " " -> Unit // a dot
+        number != null && number >= 0 -> badge.number = number
+        else -> badge.text = tab.badge
+      }
+      background?.let { badge.backgroundColor = it }
+      text?.let { badge.badgeTextColor = it }
+      badge.isVisible = true
+    }
+  }
+
+  /**
+   * testIDs on the tab views (Detox matches the view tag), and the label font
+   * and font scale cap on their labels. Material creates the label views as
+   * tabs are added; call again after a layout to style new ones.
+   */
+  fun applyTestIDsAndFonts(bar: NavigationBarView, items: List<Item>, font: LabelFont) {
+    // In the menu view only: a rail's header holds React views, whose ids
+    // (React tags) can equal a tab's id
+    val menuView = bar.menuView as? ViewGroup ?: return
+    val count = minOf(items.size, bar.maxItemCount)
+    for (index in 0 until count) {
+      val itemView = menuView.findViewById<View>(itemId(index)) ?: continue
+      itemView.tag = items[index].testID.ifEmpty { null }
+      styleLabels(itemView, font)
+    }
+  }
+
+  private fun styleLabels(view: View, font: LabelFont) {
+    if (view is TextView) {
+      if (font.size > 0) view.setTextSize(TypedValue.COMPLEX_UNIT_SP, font.size)
+      if (font.family.isNotEmpty() || font.weight.isNotEmpty() || font.style.isNotEmpty()) {
+        view.typeface = ReactTypefaceUtils.applyStyles(
+          view.typeface,
+          ReactTypefaceUtils.parseFontStyle(font.style.ifEmpty { null }),
+          ReactTypefaceUtils.parseFontWeight(font.weight.ifEmpty { null }),
+          font.family.ifEmpty { null },
+          view.context.assets
+        )
+      }
+      PCThemeSupport.capTextSize(view, font.maxFontSizeMultiplier)
+    } else if (view is ViewGroup) {
+      for (i in 0 until view.childCount) styleLabels(view.getChildAt(i), font)
+    }
+  }
+
+  /**
+   * The tab's icon, and a checked-state drawable with its selected icon when
+   * there is one. Drawable names and bundled assets resolve synchronously;
+   * other image URIs load in the background.
+   */
+  private fun loadItemIcon(
+    context: Context,
+    tab: Item,
+    tint: ColorStateList?,
+    isCurrent: () -> Boolean,
+    apply: (Drawable?) -> Unit
+  ) {
+    var normal: Drawable? = null
+    var selected: Drawable? = null
+    fun tinted(drawable: Drawable?, enabled: Boolean): Drawable? =
+      drawable?.mutate()?.apply { if (enabled) setTintList(tint) }
+    var pending = 1 + (if (tab.selectedIcon.isPresent) 1 else 0)
+    fun done() {
+      pending -= 1
+      if (pending > 0 || !isCurrent()) return
+      val sel = selected
+      apply(
+        if (sel == null) normal
+        else StateListDrawable().apply {
+          addState(intArrayOf(android.R.attr.state_checked), sel)
+          normal?.let { addState(intArrayOf(), it) }
+        }
+      )
+    }
+    if (tab.role == "search" && !tab.icon.isPresent) {
+      normal = tinted(ContextCompat.getDrawable(context, R.drawable.pc_ic_search), true)
+      done()
+    } else {
+      loadIcon(context, tab.icon) { normal = tinted(it, tab.icon.tinted); done() }
+    }
+    if (tab.selectedIcon.isPresent) {
+      loadIcon(context, tab.selectedIcon) { selected = tinted(it, tab.selectedIcon.tinted); done() }
+    }
+  }
+
+  private fun loadIcon(context: Context, icon: PCButtonSupport.Icon, onLoaded: (Drawable?) -> Unit) {
+    when (icon.type) {
+      "drawable" -> onLoaded(ResourceDrawableIdHelper.instance.getResourceDrawable(context, icon.name))
+      "image" -> {
+        val uri = icon.uri
+        if (!uri.contains(':')) {
+          onLoaded(ResourceDrawableIdHelper.instance.getResourceDrawable(context, uri))
+        } else {
+          PCImageLoader.load(context, uri, icon.scale, icon.request) { bitmap ->
+            onLoaded(bitmap?.let { BitmapDrawable(context.resources, it) })
+          }
+        }
+      }
+      else -> onLoaded(null)
+    }
+  }
+}