[ch-action-list-render] Fix getImagePathCallback prop in action-l…

…ist not working as expected based on type definition (#447)

* Fix getImagePathCallback prop in action-list not working as expected based on type definition

* Update models.tsx

src/common/registry-properties.ts

@@ -1,7 +1,7 @@
+import { ActionListImagePathCallback } from "../components/action-list/types";
 import {
   ChameleonImagePathCallbackControls,
-  ChameleonImagePathCallbackControlsTagName,
-  GxImageMultiState
+  ChameleonImagePathCallbackControlsTagName
 } from "./types";
 
 export type RegistryGetImagePathCallback = {
@@ -49,6 +49,7 @@ export const getControlRegisterProperty = <
 ): RegisterProperty[PropName][Control] | undefined =>
   registerMapping[propertyName][controlName];
 
-export const DEFAULT_GET_IMAGE_PATH_CALLBACK: (
-  imageSrc: string
-) => GxImageMultiState | undefined = imageSrc => ({ base: imageSrc });
+export const DEFAULT_GET_IMAGE_PATH_CALLBACK: ActionListImagePathCallback =
+  additionalItem => ({
+    base: additionalItem.imgSrc
+  });

src/components/action-list/action-list-render.tsx

@@ -14,8 +14,8 @@ import {
   // EventEmitter
 } from "@stencil/core";
 import {
+  ActionListImagePathCallback,
   ActionListItemActionable,
-  ActionListItemAdditionalBase,
   ActionListItemGroup,
   ActionListItemModel,
   ActionListItemModelExtended,
@@ -27,8 +27,7 @@ import {
 } from "./types";
 import {
   ActionListTranslations,
-  ChActionListItemCustomEvent,
-  GxImageMultiState
+  ChActionListItemCustomEvent
 } from "../../components";
 import {
   ActionListCaptionChangeEventDetail,
@@ -255,9 +254,7 @@ export class ChActionListRender {
    * This property specifies a callback that is executed when the path for an
    * imgSrc needs to be resolved.
    */
-  @Prop() readonly getImagePathCallback?: (
-    additionalItem: ActionListItemAdditionalBase
-  ) => GxImageMultiState | undefined;
+  @Prop() readonly getImagePathCallback?: ActionListImagePathCallback;
 
   /**
    * This property lets you define the model of the control.

src/components/action-list/internal/action-list-item/action-list-item.tsx

@@ -9,6 +9,7 @@ import {
   h
 } from "@stencil/core";
 import {
+  ActionListImagePathCallback,
   ActionListItemAdditionalAction,
   ActionListItemAdditionalBase,
   ActionListItemAdditionalCustom,
@@ -687,15 +688,15 @@ export class ChActionListItem {
 
     // TODO: If we migrate this component to Lit, we should improve the
     // efficiency of this lookup
-    const getImagePathCallback =
+    const getImagePathCallback: ActionListImagePathCallback =
       this.getImagePathCallback ??
       getControlRegisterProperty(
         "getImagePathCallback",
         "ch-action-list-render"
       ) ??
       DEFAULT_GET_IMAGE_PATH_CALLBACK;
 
-    const img = getImagePathCallback(additionalItem.imgSrc);
+    const img = getImagePathCallback(additionalItem);
 
     return img
       ? (updateDirectionInImageCustomVar(

src/components/action-list/types.ts

@@ -1,4 +1,4 @@
-import { ImageRender } from "../../common/types";
+import { GxImageMultiState, ImageRender } from "../../common/types";
 // import { ChActionListRender } from "./action-list-render";
 
 export type ActionListModel = ActionListItemModel[];
@@ -175,7 +175,6 @@ export type ActionListItemSeparator = {
   type: ActionListItemTypeSeparator;
 };
 
-// export type ActionListImagePathCallback = (
-//   imgSrc: string,
-//   treeState: ChActionListRender
-// ) => string;
+export type ActionListImagePathCallback = (
+  additionalItem: ActionListItemAdditionalBase
+) => GxImageMultiState | undefined;

src/showcase/assets/components/action-list/models.tsx

@@ -145,7 +145,7 @@ export const GitHubChangesModel: ActionListModel = [
           { caption: "src\\common\\", part: "github-changes-directory" },
           { caption: "renders.tsx", part: "github-changes-file" }
         ],
-        end: [{ imgSrc: "new" }]
+        end: [{ imgSrc: MODULE_ICON }]
       }
     }
   },