* list: support for setting icon class.

easysoft · Sep 12, 2024 · 239187e · 239187e
1 parent 4e01473
commit 239187e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/lib/list/src/component/listitem.tsx b/lib/list/src/component/listitem.tsx
@@ -11,6 +11,7 @@ export class Listitem<P extends ListitemProps = ListitemProps, S = {}> extends H
     protected _renderLeading(props: RenderableProps<P>): ComponentChild[] {
         const {
             icon,
+            iconClass,
             avatar,
             toggleIcon,
             leading,
@@ -27,7 +28,7 @@ export class Listitem<P extends ListitemProps = ListitemProps, S = {}> extends H
             contents.push(<Checkbox key="checkbox" className="item-checkbox" checked={checked} {...checkbox} />);
         }
         if (icon) {
-            contents.push(<Icon key="icon" className="item-icon" icon={icon} />);
+            contents.push(<Icon key="icon" className={classes('item-icon', iconClass)} icon={icon} />);
         }
         if (avatar) {
             const avatarProps = typeof avatar === 'function' ? avatar.call(this, props) : avatar;
@@ -84,11 +85,12 @@ export class Listitem<P extends ListitemProps = ListitemProps, S = {}> extends H
             trailing,
             trailingClass,
             trailingIcon,
+            trailingIconClass,
             actions,
         } = props;
         const contents: ComponentChild[] = [];
         if (trailingIcon) {
-            contents.push(<Icon key="trailing-icon" className="item-trailing-icon" icon={trailingIcon} />);
+            contents.push(<Icon key="trailing-icon" className={classes('item-trailing-icon', trailingIconClass)} icon={trailingIcon} />);
         }
         if (actions) {
             contents.push(Toolbar.render(actions, [props], {key: 'actions', relativeTarget: props, size: 'sm'}, this));

diff --git a/lib/list/src/types/listitem-props.ts b/lib/list/src/types/listitem-props.ts
@@ -17,6 +17,7 @@ export interface ListitemProps extends Item {
     divider?: boolean;
     toggleIcon?: CustomContentType;
     icon?: IconType;
+    iconClass?: ClassNameLike;
     selected?: boolean;
     avatar?: AvatarOptions | ((item: Item) => AvatarOptions);
     leading?: CustomContentType;
@@ -33,6 +34,7 @@ export interface ListitemProps extends Item {
     trailing?: CustomContentType;
     trailingClass?: ClassNameLike;
     trailingIcon?: IconType;
+    trailingIconClass?: ClassNameLike;
     actions?: ToolbarSetting<[Item]>;
     contentClass?: ClassNameLike;
     content?: CustomContentType;