* list: add hoverItemActions option for showing actions on hover.

easysoft · Sep 19, 2024 · a250b09 · a250b09
1 parent 44fd8f0
commit a250b09
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/lib/list/src/component/list.tsx b/lib/list/src/component/list.tsx
@@ -337,7 +337,7 @@ export class List<P extends ListProps = ListProps, S extends ListState = ListSta
 
     protected _getClassName(props: RenderableProps<P>): ClassNameLike {
         const {loading, loadFailed} = this.state;
-        return [super._getClassName(props), loading ? 'loading' : (loadFailed ? 'is-load-failed' : '')];
+        return [super._getClassName(props), loading ? 'loading' : (loadFailed ? 'is-load-failed' : ''), props.hoverItemActions ? 'with-hover-actions' : ''];
     }
 
     protected _getProps(props: RenderableProps<P>): Record<string, unknown> {

diff --git a/lib/list/src/style/list.css b/lib/list/src/style/list.css
@@ -4,3 +4,13 @@
 .list-heading-inner .item-title {
   @apply -font-bold -text-gray-500;
 }
+
+.with-hover-actions .item {
+  @apply -relative
+}
+.with-hover-actions .item-actions {
+  @apply -absolute -pointer-events-none -right-1 -top-0 -opacity-0 -transition-opacity;
+}
+.with-hover-actions .item:hover .item-actions {
+  @apply -static -pointer-events-auto -flex --mt-1 -opacity-100;
+}
diff --git a/lib/list/src/types/list-props.ts b/lib/list/src/types/list-props.ts
@@ -14,6 +14,7 @@ export interface ListProps<T extends Item = ListItem> extends CommonListProps<T>
     active?: string | string[] | Record<string, boolean>;
     multipleActive?: boolean;
     activeOnHover?: boolean;
+    hoverItemActions?: boolean;
     onActive?: (keys: string[], active: boolean) => void;
     onCheck?: (change: Record<ItemKey, CheckedType>, checks: ItemKey[]) => void;
     onLoad?: (items: T[]) => void | T[];