@easy-editor/materials-dashboard-scroll-list 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -1,13 +1,27 @@
-# @easy-editor/materials-dashboard-scroll-list
-
-## 0.0.3
-
-### Patch Changes
-
-- fix: build error
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-scroll-list
+
+## 0.0.5
+
+### Patch Changes
+
+- fix: component export error
+
+## 0.0.4
+
+### Patch Changes
+
+- perf: configure & datasource
+- Updated dependencies
+  - @easy-editor/materials-shared@0.0.1
+
+## 0.0.3
+
+### Patch Changes
+
+- fix: build error
+
+## 0.0.2
+
+### Patch Changes
+
+- feat: new setters

package/easypack.config.ts

@@ -0,0 +1,10 @@
+/**
+ * @easy-editor/easypack configuration
+ * @type {import('@easy-editor/easypack').EasypackConfig}
+ */
+export default {
+  preset: 'material',
+  dev: {
+    port: 5001,
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-scroll-list",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Scroll List component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -45,20 +45,16 @@
     "@types/react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@easy-editor/materials-shared": "0.0.0"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "dev:debug": "vite --port 5023",
     "format": "biome format --write .",
     "lint": "biome check .",
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/",
-    "build:js": "rollup -c",
-    "build:types": "pnpm types",
-    "types": "npm-run-all -nl types:*",
-    "types:src": "tsc --project tsconfig.build.json",
-    "test-types": "tsc --project tsconfig.test.json"
+    "build:js": "easypack build"
   },
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.min.js"

package/src/component.tsx

@@ -1,10 +1,10 @@
 /**
  * Scroll List Component
- * 滚动列表组件 - 用于展示排行榜、数据列表等
+ * 滚动列表组件 - 支持数据源绑定和事件交互
  */
 
-import type { CSSProperties, Ref } from 'react'
-import { cn } from '@easy-editor/materials-shared'
+import { useMemo, type CSSProperties } from 'react'
+import { cn, useDataSource, type MaterialComponet } from '@easy-editor/materials-shared'
 import styles from './component.module.css'
 
 export interface ScrollListItem {
@@ -13,10 +13,7 @@ export interface ScrollListItem {
   value: number
 }
 
-export interface ScrollListProps {
-  ref?: Ref<HTMLDivElement>
-  /** 列表数据 */
-  data?: ScrollListItem[]
+export interface ScrollListProps extends MaterialComponet {
   /** 最大显示条数 */
   maxItems?: number
   /** 是否显示排名 */
@@ -49,8 +46,16 @@ export interface ScrollListProps {
   itemBorderColor?: string
   /** 是否显示发光效果 */
   glowEnable?: boolean
-  /** 外部样式 */
-  style?: CSSProperties
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+  /** 行点击事件 */
+  onItemClick?: (item: ScrollListItem, index: number) => void
 }
 
 const DEFAULT_DATA: ScrollListItem[] = [
@@ -97,7 +102,8 @@ const formatDisplayValue = (value: number, format: string, prefix: string, suffi
 
 export const ScrollList: React.FC<ScrollListProps> = ({
   ref,
-  data = DEFAULT_DATA,
+  $data,
+  __dataSource,
   maxItems = 5,
   showRank = true,
   showMedal = true,
@@ -114,8 +120,24 @@ export const ScrollList: React.FC<ScrollListProps> = ({
   itemBackgroundColor = 'rgba(15, 15, 42, 0.9)',
   itemBorderColor = 'rgba(26, 26, 62, 0.6)',
   glowEnable = false,
+  rotation = 0,
+  opacity = 100,
   style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  onItemClick,
 }) => {
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const data = useMemo<ScrollListItem[]>(() => {
+    if (dataSource.length > 0) {
+      return dataSource as ScrollListItem[]
+    }
+    return DEFAULT_DATA
+  }, [dataSource])
+
   const displayData = data.slice(0, maxItems)
   const maxValue = Math.max(...displayData.map(item => item.value), 1)
 
@@ -131,9 +153,11 @@ export const ScrollList: React.FC<ScrollListProps> = ({
   }
 
   const containerStyle: CSSProperties = {
-    ...externalStyle,
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
     backgroundColor,
     borderColor,
+    ...externalStyle,
   }
 
   const itemStyle: CSSProperties = {
@@ -142,13 +166,21 @@ export const ScrollList: React.FC<ScrollListProps> = ({
   }
 
   return (
-    <div className={styles.container} ref={ref} style={containerStyle}>
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
       <div className={styles.list}>
-        {displayData.map(item => {
+        {displayData.map((item, index) => {
           const isTopThree = item.rank <= 3
 
           return (
-            <div className={styles.item} key={item.rank} style={itemStyle}>
+            <div className={styles.item} key={item.rank} onClick={() => onItemClick?.(item, index)} style={itemStyle}>
               {/* Rank Badge */}
               {showRank ? (
                 <div