@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/dist/components/ui/accessibility-demo.esm.js +30 -24
- package/dist/components/ui/accessibility-demo.js +30 -24
- package/dist/components/ui/advanced-component-architecture-demo.esm.js +235 -179
- package/dist/components/ui/advanced-component-architecture-demo.js +235 -179
- package/dist/components/ui/advanced-transition-system-demo.esm.js +110 -64
- package/dist/components/ui/advanced-transition-system-demo.js +110 -64
- package/dist/components/ui/advanced-transition-system.esm.js +166 -122
- package/dist/components/ui/advanced-transition-system.js +166 -122
- package/dist/components/ui/animation/animated-container.esm.js +52 -29
- package/dist/components/ui/animation/animated-container.js +52 -29
- package/dist/components/ui/animation/staggered-container.esm.js +18 -9
- package/dist/components/ui/animation/staggered-container.js +18 -9
- package/dist/components/ui/animation-demo.esm.js +67 -35
- package/dist/components/ui/animation-demo.js +67 -35
- package/dist/components/ui/badge.esm.js +9 -6
- package/dist/components/ui/badge.js +9 -6
- package/dist/components/ui/battery-conscious-animation-demo.esm.js +122 -87
- package/dist/components/ui/battery-conscious-animation-demo.js +122 -87
- package/dist/components/ui/border-radius-shadow-demo.esm.js +23 -12
- package/dist/components/ui/border-radius-shadow-demo.js +23 -12
- package/dist/components/ui/button.esm.js +8 -2
- package/dist/components/ui/button.js +8 -2
- package/dist/components/ui/card.esm.js +33 -8
- package/dist/components/ui/card.js +33 -8
- package/dist/components/ui/checkbox.esm.js +3 -3
- package/dist/components/ui/checkbox.js +3 -3
- package/dist/components/ui/color-preview.esm.js +68 -45
- package/dist/components/ui/color-preview.js +68 -45
- package/dist/components/ui/data-display/chart.esm.js +112 -84
- package/dist/components/ui/data-display/chart.js +112 -84
- package/dist/components/ui/data-display/data-grid-simple.esm.js +1 -1
- package/dist/components/ui/data-display/data-grid-simple.js +1 -1
- package/dist/components/ui/data-display/data-grid.esm.js +80 -67
- package/dist/components/ui/data-display/data-grid.js +80 -67
- package/dist/components/ui/data-display/list.esm.js +53 -45
- package/dist/components/ui/data-display/list.js +53 -45
- package/dist/components/ui/data-display/table.esm.js +62 -54
- package/dist/components/ui/data-display/table.js +62 -54
- package/dist/components/ui/data-display/timeline.esm.js +39 -34
- package/dist/components/ui/data-display/timeline.js +39 -34
- package/dist/components/ui/data-display/tree.esm.js +116 -84
- package/dist/components/ui/data-display/tree.js +116 -84
- package/dist/components/ui/data-display/types.esm.js +389 -364
- package/dist/components/ui/data-display/types.js +389 -364
- package/dist/components/ui/enterprise-mobile-experience-demo.esm.js +120 -70
- package/dist/components/ui/enterprise-mobile-experience-demo.js +120 -70
- package/dist/components/ui/enterprise-mobile-experience.esm.js +124 -73
- package/dist/components/ui/enterprise-mobile-experience.js +124 -73
- package/dist/components/ui/feedback/alert.esm.js +22 -15
- package/dist/components/ui/feedback/alert.js +22 -15
- package/dist/components/ui/feedback/progress.esm.js +47 -24
- package/dist/components/ui/feedback/progress.js +47 -24
- package/dist/components/ui/feedback/skeleton.esm.js +39 -29
- package/dist/components/ui/feedback/skeleton.js +39 -29
- package/dist/components/ui/feedback/toast.esm.js +62 -38
- package/dist/components/ui/feedback/toast.js +62 -38
- package/dist/components/ui/feedback/types.esm.js +83 -83
- package/dist/components/ui/feedback/types.js +83 -83
- package/dist/components/ui/font-preview.esm.js +41 -39
- package/dist/components/ui/font-preview.js +41 -39
- package/dist/components/ui/form-demo.esm.js +150 -113
- package/dist/components/ui/form-demo.js +150 -113
- package/dist/components/ui/hardware-acceleration-demo.esm.js +137 -87
- package/dist/components/ui/hardware-acceleration-demo.js +137 -87
- package/dist/components/ui/input.esm.js +4 -1
- package/dist/components/ui/input.js +4 -1
- package/dist/components/ui/layout-demo.esm.js +81 -56
- package/dist/components/ui/layout-demo.js +81 -56
- package/dist/components/ui/layouts/adaptive-layout.esm.js +27 -8
- package/dist/components/ui/layouts/adaptive-layout.js +27 -8
- package/dist/components/ui/layouts/desktop-layout.esm.js +39 -19
- package/dist/components/ui/layouts/desktop-layout.js +39 -19
- package/dist/components/ui/layouts/mobile-layout.esm.js +19 -9
- package/dist/components/ui/layouts/mobile-layout.js +19 -9
- package/dist/components/ui/layouts/tablet-layout.esm.js +28 -14
- package/dist/components/ui/layouts/tablet-layout.js +28 -14
- package/dist/components/ui/mobile-form-validation.esm.js +120 -87
- package/dist/components/ui/mobile-form-validation.js +120 -87
- package/dist/components/ui/mobile-input-demo.esm.js +19 -13
- package/dist/components/ui/mobile-input-demo.js +19 -13
- package/dist/components/ui/mobile-input.esm.js +185 -120
- package/dist/components/ui/mobile-input.js +185 -120
- package/dist/components/ui/mobile-skeleton-loading-demo.esm.js +128 -111
- package/dist/components/ui/mobile-skeleton-loading-demo.js +128 -111
- package/dist/components/ui/navigation/breadcrumb.esm.js +17 -14
- package/dist/components/ui/navigation/breadcrumb.js +17 -14
- package/dist/components/ui/navigation/index.esm.js +23 -1
- package/dist/components/ui/navigation/index.js +23 -1
- package/dist/components/ui/navigation/menu.esm.js +49 -35
- package/dist/components/ui/navigation/menu.js +49 -35
- package/dist/components/ui/navigation/navigation-demo.esm.js +81 -74
- package/dist/components/ui/navigation/navigation-demo.js +81 -74
- package/dist/components/ui/navigation/pagination.esm.js +62 -50
- package/dist/components/ui/navigation/pagination.js +62 -50
- package/dist/components/ui/navigation/sidebar.esm.js +56 -42
- package/dist/components/ui/navigation/sidebar.js +56 -42
- package/dist/components/ui/navigation/stepper.esm.js +34 -23
- package/dist/components/ui/navigation/stepper.js +34 -23
- package/dist/components/ui/navigation/tabs.esm.js +32 -21
- package/dist/components/ui/navigation/tabs.js +32 -21
- package/dist/components/ui/navigation/types.esm.js +196 -195
- package/dist/components/ui/navigation/types.js +196 -195
- package/dist/components/ui/overlay/backdrop.esm.js +17 -16
- package/dist/components/ui/overlay/backdrop.js +17 -16
- package/dist/components/ui/overlay/focus-manager.esm.js +21 -19
- package/dist/components/ui/overlay/focus-manager.js +21 -19
- package/dist/components/ui/overlay/index.esm.js +22 -2
- package/dist/components/ui/overlay/index.js +22 -2
- package/dist/components/ui/overlay/modal.esm.js +38 -34
- package/dist/components/ui/overlay/modal.js +38 -34
- package/dist/components/ui/overlay/overlay-manager.esm.js +25 -20
- package/dist/components/ui/overlay/overlay-manager.js +25 -20
- package/dist/components/ui/overlay/popover.esm.js +74 -58
- package/dist/components/ui/overlay/popover.js +74 -58
- package/dist/components/ui/overlay/portal.esm.js +7 -7
- package/dist/components/ui/overlay/portal.js +7 -7
- package/dist/components/ui/overlay/tooltip.esm.js +54 -39
- package/dist/components/ui/overlay/tooltip.js +54 -39
- package/dist/components/ui/overlay/types.esm.js +132 -131
- package/dist/components/ui/overlay/types.js +132 -131
- package/dist/components/ui/performance-demo.esm.js +135 -88
- package/dist/components/ui/performance-demo.js +135 -88
- package/dist/components/ui/semantic-input-system-demo.esm.js +117 -80
- package/dist/components/ui/semantic-input-system-demo.js +117 -80
- package/dist/components/ui/theme-customizer.esm.js +84 -52
- package/dist/components/ui/theme-customizer.js +84 -52
- package/dist/components/ui/theme-preview.esm.js +95 -43
- package/dist/components/ui/theme-preview.js +95 -43
- package/dist/components/ui/theme-switcher.esm.js +70 -44
- package/dist/components/ui/theme-switcher.js +70 -44
- package/dist/components/ui/theme-toggle.esm.js +3 -3
- package/dist/components/ui/theme-toggle.js +3 -3
- package/dist/components/ui/token-demo.esm.js +33 -21
- package/dist/components/ui/token-demo.js +33 -21
- package/dist/components/ui/touch-demo.esm.js +102 -73
- package/dist/components/ui/touch-demo.js +102 -73
- package/dist/components/ui/touch-friendly-interface-demo.esm.js +102 -64
- package/dist/components/ui/touch-friendly-interface-demo.js +102 -64
- package/dist/components/ui/touch-friendly-interface.esm.js +85 -61
- package/dist/components/ui/touch-friendly-interface.js +85 -61
- package/dist/hooks/use-accessibility-support.esm.js +115 -85
- package/dist/hooks/use-accessibility-support.js +115 -85
- package/dist/hooks/use-adaptive-layout.esm.js +56 -33
- package/dist/hooks/use-adaptive-layout.js +56 -33
- package/dist/hooks/use-advanced-patterns.esm.js +57 -42
- package/dist/hooks/use-advanced-patterns.js +57 -42
- package/dist/hooks/use-advanced-transition-system.esm.js +112 -71
- package/dist/hooks/use-advanced-transition-system.js +112 -71
- package/dist/hooks/use-animation-profile.esm.js +63 -34
- package/dist/hooks/use-animation-profile.js +63 -34
- package/dist/hooks/use-battery-animations.esm.js +80 -55
- package/dist/hooks/use-battery-animations.js +80 -55
- package/dist/hooks/use-battery-conscious-loading.esm.js +166 -123
- package/dist/hooks/use-battery-conscious-loading.js +166 -123
- package/dist/hooks/use-battery-optimization.esm.js +78 -55
- package/dist/hooks/use-battery-optimization.js +78 -55
- package/dist/hooks/use-battery-status.esm.js +73 -51
- package/dist/hooks/use-battery-status.js +73 -51
- package/dist/hooks/use-component-performance.esm.js +62 -47
- package/dist/hooks/use-component-performance.js +62 -47
- package/dist/hooks/use-device-loading-states.esm.js +152 -109
- package/dist/hooks/use-device-loading-states.js +152 -109
- package/dist/hooks/use-device.esm.js +25 -14
- package/dist/hooks/use-device.js +25 -14
- package/dist/hooks/use-enterprise-mobile-experience.esm.js +137 -88
- package/dist/hooks/use-enterprise-mobile-experience.js +137 -88
- package/dist/hooks/use-form-feedback.esm.js +124 -81
- package/dist/hooks/use-form-feedback.js +124 -81
- package/dist/hooks/use-form-performance.esm.js +127 -92
- package/dist/hooks/use-form-performance.js +127 -92
- package/dist/hooks/use-frame-rate.esm.js +56 -37
- package/dist/hooks/use-frame-rate.js +56 -37
- package/dist/hooks/use-gestures.esm.js +96 -72
- package/dist/hooks/use-gestures.js +96 -72
- package/dist/hooks/use-hardware-acceleration.esm.js +65 -37
- package/dist/hooks/use-hardware-acceleration.js +65 -37
- package/dist/hooks/use-input-accessibility.esm.js +157 -119
- package/dist/hooks/use-input-accessibility.js +157 -119
- package/dist/hooks/use-input-performance.esm.js +139 -104
- package/dist/hooks/use-input-performance.js +139 -104
- package/dist/hooks/use-layout-performance.esm.js +50 -29
- package/dist/hooks/use-layout-performance.js +50 -29
- package/dist/hooks/use-loading-accessibility.esm.js +209 -169
- package/dist/hooks/use-loading-accessibility.js +209 -169
- package/dist/hooks/use-loading-performance.esm.js +117 -93
- package/dist/hooks/use-loading-performance.js +117 -93
- package/dist/hooks/use-memory-usage.esm.js +57 -38
- package/dist/hooks/use-memory-usage.js +57 -38
- package/dist/hooks/use-mobile-form-layout.esm.js +111 -74
- package/dist/hooks/use-mobile-form-layout.js +111 -74
- package/dist/hooks/use-mobile-form-validation.esm.js +211 -144
- package/dist/hooks/use-mobile-form-validation.js +211 -144
- package/dist/hooks/use-mobile-keyboard-optimization.esm.js +154 -113
- package/dist/hooks/use-mobile-keyboard-optimization.js +154 -113
- package/dist/hooks/use-mobile-layout.esm.js +73 -51
- package/dist/hooks/use-mobile-layout.js +73 -51
- package/dist/hooks/use-mobile-optimization.esm.js +72 -44
- package/dist/hooks/use-mobile-optimization.js +72 -44
- package/dist/hooks/use-mobile-skeleton.esm.js +97 -64
- package/dist/hooks/use-mobile-skeleton.js +97 -64
- package/dist/hooks/use-mobile-touch.esm.js +128 -93
- package/dist/hooks/use-mobile-touch.js +128 -93
- package/dist/hooks/use-performance-throttling.esm.js +72 -48
- package/dist/hooks/use-performance-throttling.js +72 -48
- package/dist/hooks/use-performance.esm.js +90 -52
- package/dist/hooks/use-performance.js +90 -52
- package/dist/hooks/use-reusable-architecture.esm.js +94 -65
- package/dist/hooks/use-reusable-architecture.js +94 -65
- package/dist/hooks/use-semantic-input-types.esm.js +166 -124
- package/dist/hooks/use-semantic-input-types.js +166 -124
- package/dist/hooks/use-semantic-input.esm.js +178 -126
- package/dist/hooks/use-semantic-input.js +178 -126
- package/dist/hooks/use-tablet-layout.esm.js +67 -38
- package/dist/hooks/use-tablet-layout.js +67 -38
- package/dist/hooks/use-touch-friendly-input.esm.js +193 -149
- package/dist/hooks/use-touch-friendly-input.js +193 -149
- package/dist/hooks/use-touch-friendly-interface.esm.js +99 -67
- package/dist/hooks/use-touch-friendly-interface.js +99 -67
- package/dist/hooks/use-touch-optimization.esm.js +99 -72
- package/dist/hooks/use-touch-optimization.js +99 -72
- package/dist/index.esm.js +289 -280
- package/dist/index.js +289 -280
- package/dist/lib/utils.esm.js +1 -1
- package/dist/lib/utils.js +1 -1
- package/dist/plugins/theme-css-generator.esm.js +104 -55
- package/dist/plugins/theme-css-generator.js +104 -55
- package/dist/provider.esm.js +4 -4
- package/dist/provider.js +4 -4
- package/dist/styles.css +1 -1
- package/dist/theme.esm.js +633 -468
- package/dist/theme.js +633 -468
- package/dist/themes/ThemeContext.esm.js +15 -15
- package/dist/themes/ThemeContext.js +15 -15
- package/dist/themes/ThemeProvider.esm.js +25 -22
- package/dist/themes/ThemeProvider.js +25 -22
- package/dist/themes/accessibility.esm.js +147 -108
- package/dist/themes/accessibility.js +147 -108
- package/dist/themes/aria-patterns.esm.js +198 -162
- package/dist/themes/aria-patterns.js +198 -162
- package/dist/themes/base-themes.esm.js +14 -11
- package/dist/themes/base-themes.js +14 -11
- package/dist/themes/colorManager.esm.js +101 -83
- package/dist/themes/colorManager.js +101 -83
- package/dist/themes/examples/dark-theme.esm.js +133 -103
- package/dist/themes/examples/dark-theme.js +133 -103
- package/dist/themes/examples/minimal-theme.esm.js +83 -61
- package/dist/themes/examples/minimal-theme.js +83 -61
- package/dist/themes/focus-management.esm.js +202 -143
- package/dist/themes/focus-management.js +202 -143
- package/dist/themes/fontLoader.esm.js +28 -19
- package/dist/themes/fontLoader.js +28 -19
- package/dist/themes/high-contrast.esm.js +152 -104
- package/dist/themes/high-contrast.js +152 -104
- package/dist/themes/inheritance.esm.js +35 -27
- package/dist/themes/inheritance.js +35 -27
- package/dist/themes/keyboard-navigation.esm.js +152 -123
- package/dist/themes/keyboard-navigation.js +152 -123
- package/dist/themes/motion-reduction.esm.js +193 -133
- package/dist/themes/motion-reduction.js +193 -133
- package/dist/themes/navigation.esm.js +146 -146
- package/dist/themes/navigation.js +146 -146
- package/dist/themes/screen-reader.esm.js +159 -94
- package/dist/themes/screen-reader.js +159 -94
- package/dist/themes/systemThemeDetector.esm.js +42 -34
- package/dist/themes/systemThemeDetector.js +42 -34
- package/dist/themes/themeCSSUpdater.esm.js +21 -9
- package/dist/themes/themeCSSUpdater.js +21 -9
- package/dist/themes/themePersistence.esm.js +68 -47
- package/dist/themes/themePersistence.js +68 -47
- package/dist/themes/themes/stan-design.esm.js +633 -468
- package/dist/themes/themes/stan-design.js +633 -468
- package/dist/themes/types.esm.js +301 -287
- package/dist/themes/types.js +301 -287
- package/dist/themes/useSystemTheme.esm.js +4 -4
- package/dist/themes/useSystemTheme.js +4 -4
- package/dist/themes/useTheme.esm.js +4 -4
- package/dist/themes/useTheme.js +4 -4
- package/dist/themes/validation.esm.js +128 -77
- package/dist/themes/validation.js +128 -77
- package/dist/tokens/index.esm.js +15 -4
- package/dist/tokens/index.js +15 -4
- package/dist/tokens/tokenExporter.esm.js +87 -61
- package/dist/tokens/tokenExporter.js +87 -61
- package/dist/tokens/tokenGenerator.esm.js +86 -77
- package/dist/tokens/tokenGenerator.js +86 -77
- package/dist/tokens/tokenManager.esm.js +64 -51
- package/dist/tokens/tokenManager.js +64 -51
- package/dist/tokens/tokenValidator.esm.js +193 -147
- package/dist/tokens/tokenValidator.js +193 -147
- package/dist/tokens/types.esm.js +49 -35
- package/dist/tokens/types.js +49 -35
- package/dist/utils/bundle-analyzer.esm.js +83 -65
- package/dist/utils/bundle-analyzer.js +83 -65
- package/dist/utils/bundle-splitting.esm.js +142 -117
- package/dist/utils/bundle-splitting.js +142 -117
- package/dist/utils/lazy-loading.esm.js +132 -106
- package/dist/utils/lazy-loading.js +132 -106
- package/dist/utils/performance-monitor.esm.js +170 -129
- package/dist/utils/performance-monitor.js +170 -129
- package/dist/utils/tree-shaking.esm.js +69 -61
- package/dist/utils/tree-shaking.js +69 -61
- package/package.json +1 -1
- package/src/index.ts +146 -146
|
@@ -1,28 +1,45 @@
|
|
|
1
1
|
import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
|
|
2
2
|
|
|
3
3
|
export interface BatteryMetrics {
|
|
4
|
-
level
|
|
4
|
+
level: number
|
|
5
|
+
charging: boolean
|
|
6
|
+
chargingTime: number
|
|
7
|
+
dischargingTime: number
|
|
8
|
+
isLowPowerMode: boolean
|
|
9
|
+
isCriticalBattery: boolean
|
|
10
|
+
performanceMode: 'high' | 'medium' | 'low'
|
|
11
|
+
throttlingEnabled: boolean
|
|
12
|
+
throttlingReason?: string
|
|
13
|
+
}
|
|
5
14
|
|
|
6
15
|
export interface BatteryThresholds {
|
|
7
|
-
low
|
|
16
|
+
low: number
|
|
17
|
+
critical: number
|
|
18
|
+
warning: number
|
|
19
|
+
}
|
|
8
20
|
|
|
9
21
|
export interface BatteryCallbacks {
|
|
10
|
-
onBatteryLow
|
|
11
|
-
onBatteryCritical
|
|
12
|
-
onChargingStateChange
|
|
13
|
-
onPerformanceModeChange
|
|
14
|
-
onThrottlingChange
|
|
22
|
+
onBatteryLow?: (level: number) => void
|
|
23
|
+
onBatteryCritical?: (level: number) => void
|
|
24
|
+
onChargingStateChange?: (charging: boolean) => void
|
|
25
|
+
onPerformanceModeChange?: (mode: BatteryMetrics['performanceMode']) => void
|
|
26
|
+
onThrottlingChange?: (enabled: boolean, reason?: string) => void
|
|
15
27
|
}
|
|
16
28
|
|
|
17
29
|
export interface BatteryOptions {
|
|
18
|
-
updateInterval
|
|
30
|
+
updateInterval?: number
|
|
31
|
+
thresholds?: Partial<BatteryThresholds>
|
|
32
|
+
enableThrottling?: boolean
|
|
33
|
+
callbacks?: BatteryCallbacks
|
|
34
|
+
}
|
|
19
35
|
|
|
20
|
-
const DEFAULT_THRESHOLDS= {
|
|
21
|
-
low,
|
|
22
|
-
critical,
|
|
23
|
-
warning
|
|
36
|
+
const DEFAULT_THRESHOLDS: BatteryThresholds = {
|
|
37
|
+
low: 0.3,
|
|
38
|
+
critical: 0.15,
|
|
39
|
+
warning: 0.5
|
|
40
|
+
}
|
|
24
41
|
|
|
25
|
-
export const useBatteryStatus = (options= {}) => {
|
|
42
|
+
export const useBatteryStatus = (options: BatteryOptions = {}) => {
|
|
26
43
|
const {
|
|
27
44
|
updateInterval = 5000,
|
|
28
45
|
thresholds = {},
|
|
@@ -31,14 +48,15 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
31
48
|
} = options
|
|
32
49
|
|
|
33
50
|
const [metrics, setMetrics] = useState<BatteryMetrics>({
|
|
34
|
-
level,
|
|
35
|
-
charging,
|
|
36
|
-
chargingTime,
|
|
37
|
-
dischargingTime,
|
|
38
|
-
isLowPowerMode,
|
|
39
|
-
isCriticalBattery,
|
|
40
|
-
performanceMode,
|
|
41
|
-
throttlingEnabled
|
|
51
|
+
level: 1,
|
|
52
|
+
charging: true,
|
|
53
|
+
chargingTime: 0,
|
|
54
|
+
dischargingTime: 0,
|
|
55
|
+
isLowPowerMode: false,
|
|
56
|
+
isCriticalBattery: false,
|
|
57
|
+
performanceMode: 'high',
|
|
58
|
+
throttlingEnabled: false
|
|
59
|
+
})
|
|
42
60
|
|
|
43
61
|
const [isMonitoring, setIsMonitoring] = useState(false)
|
|
44
62
|
const intervalIdRef = useRef<NodeJS.Timeout>()
|
|
@@ -51,7 +69,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
51
69
|
}), [thresholds])
|
|
52
70
|
|
|
53
71
|
// Determine performance mode based on battery level
|
|
54
|
-
const determinePerformanceMode = useCallback((level, charging)] => {
|
|
72
|
+
const determinePerformanceMode = useCallback((level: number, charging: boolean): BatteryMetrics['performanceMode'] => {
|
|
55
73
|
if (charging) return 'high'
|
|
56
74
|
if (level <= finalThresholds.critical) return 'low'
|
|
57
75
|
if (level <= finalThresholds.low) return 'medium'
|
|
@@ -59,18 +77,18 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
59
77
|
}, [finalThresholds])
|
|
60
78
|
|
|
61
79
|
// Determine if throttling should be enabled
|
|
62
|
-
const shouldThrottle = useCallback((level, charging); reason
|
|
63
|
-
if (!enableThrottling) return { should}
|
|
80
|
+
const shouldThrottle = useCallback((level: number, charging: boolean): { should: boolean; reason?: string } => {
|
|
81
|
+
if (!enableThrottling) return { should: false }
|
|
64
82
|
|
|
65
83
|
if (level <= finalThresholds.critical) {
|
|
66
|
-
return { should, reason}
|
|
84
|
+
return { should: true, reason: 'Critical battery level' }
|
|
67
85
|
}
|
|
68
86
|
|
|
69
87
|
if (level <= finalThresholds.low && !charging) {
|
|
70
|
-
return { should, reason}
|
|
88
|
+
return { should: true, reason: 'Low battery level' }
|
|
71
89
|
}
|
|
72
90
|
|
|
73
|
-
return { should}
|
|
91
|
+
return { should: false }
|
|
74
92
|
}, [enableThrottling, finalThresholds])
|
|
75
93
|
|
|
76
94
|
// Update battery information
|
|
@@ -94,9 +112,9 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
94
112
|
const performanceMode = determinePerformanceMode(level, charging)
|
|
95
113
|
|
|
96
114
|
// Determine throttling
|
|
97
|
-
const { should, reason } = shouldThrottle(level, charging)
|
|
115
|
+
const { should: shouldThrottleNow, reason } = shouldThrottle(level, charging)
|
|
98
116
|
|
|
99
|
-
const newMetrics= {
|
|
117
|
+
const newMetrics: BatteryMetrics = {
|
|
100
118
|
level,
|
|
101
119
|
charging,
|
|
102
120
|
chargingTime,
|
|
@@ -104,8 +122,9 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
104
122
|
isLowPowerMode,
|
|
105
123
|
isCriticalBattery,
|
|
106
124
|
performanceMode,
|
|
107
|
-
throttlingEnabled,
|
|
108
|
-
throttlingReason
|
|
125
|
+
throttlingEnabled: shouldThrottleNow,
|
|
126
|
+
throttlingReason: reason
|
|
127
|
+
}
|
|
109
128
|
|
|
110
129
|
setMetrics(newMetrics)
|
|
111
130
|
|
|
@@ -129,7 +148,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
129
148
|
}
|
|
130
149
|
|
|
131
150
|
} catch (error) {
|
|
132
|
-
console.warn('Battery API not available, error)
|
|
151
|
+
console.warn('Battery API not available:', error)
|
|
133
152
|
}
|
|
134
153
|
}
|
|
135
154
|
}, [finalThresholds, callbacks, metrics.charging, metrics.performanceMode, metrics.throttlingEnabled, determinePerformanceMode, shouldThrottle])
|
|
@@ -157,18 +176,20 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
157
176
|
}, [])
|
|
158
177
|
|
|
159
178
|
// Manual throttling controls
|
|
160
|
-
const enableThrottlingMode = useCallback((reason
|
|
179
|
+
const enableThrottlingMode = useCallback((reason?: string) => {
|
|
161
180
|
setMetrics(prev => ({
|
|
162
181
|
...prev,
|
|
163
|
-
throttlingEnabled,
|
|
164
|
-
throttlingReason
|
|
182
|
+
throttlingEnabled: true,
|
|
183
|
+
throttlingReason: reason || 'Manual override'
|
|
184
|
+
}))
|
|
165
185
|
}, [])
|
|
166
186
|
|
|
167
187
|
const disableThrottlingMode = useCallback(() => {
|
|
168
188
|
setMetrics(prev => ({
|
|
169
189
|
...prev,
|
|
170
|
-
throttlingEnabled,
|
|
171
|
-
throttlingReason
|
|
190
|
+
throttlingEnabled: false,
|
|
191
|
+
throttlingReason: undefined
|
|
192
|
+
}))
|
|
172
193
|
}, [])
|
|
173
194
|
|
|
174
195
|
// Auto-start monitoring on mount
|
|
@@ -179,7 +200,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
179
200
|
|
|
180
201
|
// Battery optimization recommendations
|
|
181
202
|
const getOptimizationRecommendations = useCallback(() => {
|
|
182
|
-
const recommendations] = []
|
|
203
|
+
const recommendations: string[] = []
|
|
183
204
|
|
|
184
205
|
if (metrics.isCriticalBattery) {
|
|
185
206
|
recommendations.push('Critical battery level - enable maximum power saving mode')
|
|
@@ -204,7 +225,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
204
225
|
|
|
205
226
|
// Power saving suggestions
|
|
206
227
|
const getPowerSavingSuggestions = useCallback(() => {
|
|
207
|
-
const suggestions] = []
|
|
228
|
+
const suggestions: string[] = []
|
|
208
229
|
|
|
209
230
|
if (metrics.isLowPowerMode) {
|
|
210
231
|
suggestions.push('Reduce animation frame rate')
|
|
@@ -253,13 +274,13 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
253
274
|
disableThrottlingMode,
|
|
254
275
|
|
|
255
276
|
// Status
|
|
256
|
-
batteryLevel,
|
|
257
|
-
isCharging,
|
|
258
|
-
isLowPowerMode,
|
|
259
|
-
isCriticalBattery,
|
|
260
|
-
performanceMode,
|
|
261
|
-
throttlingEnabled,
|
|
262
|
-
throttlingReason,
|
|
277
|
+
batteryLevel: metrics.level,
|
|
278
|
+
isCharging: metrics.charging,
|
|
279
|
+
isLowPowerMode: metrics.isLowPowerMode,
|
|
280
|
+
isCriticalBattery: metrics.isCriticalBattery,
|
|
281
|
+
performanceMode: metrics.performanceMode,
|
|
282
|
+
throttlingEnabled: metrics.throttlingEnabled,
|
|
283
|
+
throttlingReason: metrics.throttlingReason,
|
|
263
284
|
|
|
264
285
|
// Optimization
|
|
265
286
|
getOptimizationRecommendations,
|
|
@@ -267,11 +288,12 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
267
288
|
getBatteryStatus,
|
|
268
289
|
|
|
269
290
|
// Raw values
|
|
270
|
-
level,
|
|
271
|
-
charging,
|
|
272
|
-
chargingTime,
|
|
273
|
-
dischargingTime,
|
|
291
|
+
level: metrics.level,
|
|
292
|
+
charging: metrics.charging,
|
|
293
|
+
chargingTime: metrics.chargingTime,
|
|
294
|
+
dischargingTime: metrics.dischargingTime,
|
|
274
295
|
|
|
275
296
|
// Thresholds
|
|
276
|
-
thresholds
|
|
297
|
+
thresholds: finalThresholds
|
|
298
|
+
}
|
|
277
299
|
}
|
|
@@ -1,28 +1,45 @@
|
|
|
1
1
|
import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
|
|
2
2
|
|
|
3
3
|
export interface BatteryMetrics {
|
|
4
|
-
level
|
|
4
|
+
level: number
|
|
5
|
+
charging: boolean
|
|
6
|
+
chargingTime: number
|
|
7
|
+
dischargingTime: number
|
|
8
|
+
isLowPowerMode: boolean
|
|
9
|
+
isCriticalBattery: boolean
|
|
10
|
+
performanceMode: 'high' | 'medium' | 'low'
|
|
11
|
+
throttlingEnabled: boolean
|
|
12
|
+
throttlingReason?: string
|
|
13
|
+
}
|
|
5
14
|
|
|
6
15
|
export interface BatteryThresholds {
|
|
7
|
-
low
|
|
16
|
+
low: number
|
|
17
|
+
critical: number
|
|
18
|
+
warning: number
|
|
19
|
+
}
|
|
8
20
|
|
|
9
21
|
export interface BatteryCallbacks {
|
|
10
|
-
onBatteryLow
|
|
11
|
-
onBatteryCritical
|
|
12
|
-
onChargingStateChange
|
|
13
|
-
onPerformanceModeChange
|
|
14
|
-
onThrottlingChange
|
|
22
|
+
onBatteryLow?: (level: number) => void
|
|
23
|
+
onBatteryCritical?: (level: number) => void
|
|
24
|
+
onChargingStateChange?: (charging: boolean) => void
|
|
25
|
+
onPerformanceModeChange?: (mode: BatteryMetrics['performanceMode']) => void
|
|
26
|
+
onThrottlingChange?: (enabled: boolean, reason?: string) => void
|
|
15
27
|
}
|
|
16
28
|
|
|
17
29
|
export interface BatteryOptions {
|
|
18
|
-
updateInterval
|
|
30
|
+
updateInterval?: number
|
|
31
|
+
thresholds?: Partial<BatteryThresholds>
|
|
32
|
+
enableThrottling?: boolean
|
|
33
|
+
callbacks?: BatteryCallbacks
|
|
34
|
+
}
|
|
19
35
|
|
|
20
|
-
const DEFAULT_THRESHOLDS= {
|
|
21
|
-
low,
|
|
22
|
-
critical,
|
|
23
|
-
warning
|
|
36
|
+
const DEFAULT_THRESHOLDS: BatteryThresholds = {
|
|
37
|
+
low: 0.3,
|
|
38
|
+
critical: 0.15,
|
|
39
|
+
warning: 0.5
|
|
40
|
+
}
|
|
24
41
|
|
|
25
|
-
export const useBatteryStatus = (options= {}) => {
|
|
42
|
+
export const useBatteryStatus = (options: BatteryOptions = {}) => {
|
|
26
43
|
const {
|
|
27
44
|
updateInterval = 5000,
|
|
28
45
|
thresholds = {},
|
|
@@ -31,14 +48,15 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
31
48
|
} = options
|
|
32
49
|
|
|
33
50
|
const [metrics, setMetrics] = useState<BatteryMetrics>({
|
|
34
|
-
level,
|
|
35
|
-
charging,
|
|
36
|
-
chargingTime,
|
|
37
|
-
dischargingTime,
|
|
38
|
-
isLowPowerMode,
|
|
39
|
-
isCriticalBattery,
|
|
40
|
-
performanceMode,
|
|
41
|
-
throttlingEnabled
|
|
51
|
+
level: 1,
|
|
52
|
+
charging: true,
|
|
53
|
+
chargingTime: 0,
|
|
54
|
+
dischargingTime: 0,
|
|
55
|
+
isLowPowerMode: false,
|
|
56
|
+
isCriticalBattery: false,
|
|
57
|
+
performanceMode: 'high',
|
|
58
|
+
throttlingEnabled: false
|
|
59
|
+
})
|
|
42
60
|
|
|
43
61
|
const [isMonitoring, setIsMonitoring] = useState(false)
|
|
44
62
|
const intervalIdRef = useRef<NodeJS.Timeout>()
|
|
@@ -51,7 +69,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
51
69
|
}), [thresholds])
|
|
52
70
|
|
|
53
71
|
// Determine performance mode based on battery level
|
|
54
|
-
const determinePerformanceMode = useCallback((level, charging)] => {
|
|
72
|
+
const determinePerformanceMode = useCallback((level: number, charging: boolean): BatteryMetrics['performanceMode'] => {
|
|
55
73
|
if (charging) return 'high'
|
|
56
74
|
if (level <= finalThresholds.critical) return 'low'
|
|
57
75
|
if (level <= finalThresholds.low) return 'medium'
|
|
@@ -59,18 +77,18 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
59
77
|
}, [finalThresholds])
|
|
60
78
|
|
|
61
79
|
// Determine if throttling should be enabled
|
|
62
|
-
const shouldThrottle = useCallback((level, charging); reason
|
|
63
|
-
if (!enableThrottling) return { should}
|
|
80
|
+
const shouldThrottle = useCallback((level: number, charging: boolean): { should: boolean; reason?: string } => {
|
|
81
|
+
if (!enableThrottling) return { should: false }
|
|
64
82
|
|
|
65
83
|
if (level <= finalThresholds.critical) {
|
|
66
|
-
return { should, reason}
|
|
84
|
+
return { should: true, reason: 'Critical battery level' }
|
|
67
85
|
}
|
|
68
86
|
|
|
69
87
|
if (level <= finalThresholds.low && !charging) {
|
|
70
|
-
return { should, reason}
|
|
88
|
+
return { should: true, reason: 'Low battery level' }
|
|
71
89
|
}
|
|
72
90
|
|
|
73
|
-
return { should}
|
|
91
|
+
return { should: false }
|
|
74
92
|
}, [enableThrottling, finalThresholds])
|
|
75
93
|
|
|
76
94
|
// Update battery information
|
|
@@ -94,9 +112,9 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
94
112
|
const performanceMode = determinePerformanceMode(level, charging)
|
|
95
113
|
|
|
96
114
|
// Determine throttling
|
|
97
|
-
const { should, reason } = shouldThrottle(level, charging)
|
|
115
|
+
const { should: shouldThrottleNow, reason } = shouldThrottle(level, charging)
|
|
98
116
|
|
|
99
|
-
const newMetrics= {
|
|
117
|
+
const newMetrics: BatteryMetrics = {
|
|
100
118
|
level,
|
|
101
119
|
charging,
|
|
102
120
|
chargingTime,
|
|
@@ -104,8 +122,9 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
104
122
|
isLowPowerMode,
|
|
105
123
|
isCriticalBattery,
|
|
106
124
|
performanceMode,
|
|
107
|
-
throttlingEnabled,
|
|
108
|
-
throttlingReason
|
|
125
|
+
throttlingEnabled: shouldThrottleNow,
|
|
126
|
+
throttlingReason: reason
|
|
127
|
+
}
|
|
109
128
|
|
|
110
129
|
setMetrics(newMetrics)
|
|
111
130
|
|
|
@@ -129,7 +148,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
129
148
|
}
|
|
130
149
|
|
|
131
150
|
} catch (error) {
|
|
132
|
-
console.warn('Battery API not available, error)
|
|
151
|
+
console.warn('Battery API not available:', error)
|
|
133
152
|
}
|
|
134
153
|
}
|
|
135
154
|
}, [finalThresholds, callbacks, metrics.charging, metrics.performanceMode, metrics.throttlingEnabled, determinePerformanceMode, shouldThrottle])
|
|
@@ -157,18 +176,20 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
157
176
|
}, [])
|
|
158
177
|
|
|
159
178
|
// Manual throttling controls
|
|
160
|
-
const enableThrottlingMode = useCallback((reason
|
|
179
|
+
const enableThrottlingMode = useCallback((reason?: string) => {
|
|
161
180
|
setMetrics(prev => ({
|
|
162
181
|
...prev,
|
|
163
|
-
throttlingEnabled,
|
|
164
|
-
throttlingReason
|
|
182
|
+
throttlingEnabled: true,
|
|
183
|
+
throttlingReason: reason || 'Manual override'
|
|
184
|
+
}))
|
|
165
185
|
}, [])
|
|
166
186
|
|
|
167
187
|
const disableThrottlingMode = useCallback(() => {
|
|
168
188
|
setMetrics(prev => ({
|
|
169
189
|
...prev,
|
|
170
|
-
throttlingEnabled,
|
|
171
|
-
throttlingReason
|
|
190
|
+
throttlingEnabled: false,
|
|
191
|
+
throttlingReason: undefined
|
|
192
|
+
}))
|
|
172
193
|
}, [])
|
|
173
194
|
|
|
174
195
|
// Auto-start monitoring on mount
|
|
@@ -179,7 +200,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
179
200
|
|
|
180
201
|
// Battery optimization recommendations
|
|
181
202
|
const getOptimizationRecommendations = useCallback(() => {
|
|
182
|
-
const recommendations] = []
|
|
203
|
+
const recommendations: string[] = []
|
|
183
204
|
|
|
184
205
|
if (metrics.isCriticalBattery) {
|
|
185
206
|
recommendations.push('Critical battery level - enable maximum power saving mode')
|
|
@@ -204,7 +225,7 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
204
225
|
|
|
205
226
|
// Power saving suggestions
|
|
206
227
|
const getPowerSavingSuggestions = useCallback(() => {
|
|
207
|
-
const suggestions] = []
|
|
228
|
+
const suggestions: string[] = []
|
|
208
229
|
|
|
209
230
|
if (metrics.isLowPowerMode) {
|
|
210
231
|
suggestions.push('Reduce animation frame rate')
|
|
@@ -253,13 +274,13 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
253
274
|
disableThrottlingMode,
|
|
254
275
|
|
|
255
276
|
// Status
|
|
256
|
-
batteryLevel,
|
|
257
|
-
isCharging,
|
|
258
|
-
isLowPowerMode,
|
|
259
|
-
isCriticalBattery,
|
|
260
|
-
performanceMode,
|
|
261
|
-
throttlingEnabled,
|
|
262
|
-
throttlingReason,
|
|
277
|
+
batteryLevel: metrics.level,
|
|
278
|
+
isCharging: metrics.charging,
|
|
279
|
+
isLowPowerMode: metrics.isLowPowerMode,
|
|
280
|
+
isCriticalBattery: metrics.isCriticalBattery,
|
|
281
|
+
performanceMode: metrics.performanceMode,
|
|
282
|
+
throttlingEnabled: metrics.throttlingEnabled,
|
|
283
|
+
throttlingReason: metrics.throttlingReason,
|
|
263
284
|
|
|
264
285
|
// Optimization
|
|
265
286
|
getOptimizationRecommendations,
|
|
@@ -267,11 +288,12 @@ export const useBatteryStatus = (options= {}) => {
|
|
|
267
288
|
getBatteryStatus,
|
|
268
289
|
|
|
269
290
|
// Raw values
|
|
270
|
-
level,
|
|
271
|
-
charging,
|
|
272
|
-
chargingTime,
|
|
273
|
-
dischargingTime,
|
|
291
|
+
level: metrics.level,
|
|
292
|
+
charging: metrics.charging,
|
|
293
|
+
chargingTime: metrics.chargingTime,
|
|
294
|
+
dischargingTime: metrics.dischargingTime,
|
|
274
295
|
|
|
275
296
|
// Thresholds
|
|
276
|
-
thresholds
|
|
297
|
+
thresholds: finalThresholds
|
|
298
|
+
}
|
|
277
299
|
}
|
|
@@ -1,21 +1,34 @@
|
|
|
1
1
|
import React, { useState, useCallback, useRef, useEffect, ReactNode, ComponentType } from 'react'
|
|
2
2
|
|
|
3
3
|
export interface ComponentPerformanceConfig {
|
|
4
|
-
enableMemoization
|
|
4
|
+
enableMemoization?: boolean
|
|
5
|
+
enableLazyLoading?: boolean
|
|
6
|
+
enableVirtualization?: boolean
|
|
7
|
+
enablePerformanceMonitoring?: boolean
|
|
8
|
+
enableAutoOptimization?: boolean
|
|
9
|
+
performanceThreshold?: number
|
|
10
|
+
memoizationThreshold?: number
|
|
11
|
+
virtualizationThreshold?: number
|
|
12
|
+
}
|
|
5
13
|
|
|
6
14
|
export interface PerformanceMetrics {
|
|
7
|
-
renderTime
|
|
15
|
+
renderTime: number
|
|
16
|
+
memoryUsage: number
|
|
17
|
+
reRenderCount: number
|
|
18
|
+
optimizationLevel: 'none' | 'low' | 'medium' | 'high'
|
|
19
|
+
lastOptimization: string
|
|
20
|
+
}
|
|
8
21
|
|
|
9
22
|
export interface ComponentPerformanceCallbacks {
|
|
10
|
-
onPerformanceWarning
|
|
11
|
-
onOptimizationApplied
|
|
12
|
-
onPerformanceImproved
|
|
13
|
-
onMemoryWarning
|
|
23
|
+
onPerformanceWarning?: (metrics: PerformanceMetrics) => void
|
|
24
|
+
onOptimizationApplied?: (type: string, component: string) => void
|
|
25
|
+
onPerformanceImproved?: (improvement: number) => void
|
|
26
|
+
onMemoryWarning?: (usage: number) => void
|
|
14
27
|
}
|
|
15
28
|
|
|
16
29
|
export const useComponentPerformance = (
|
|
17
|
-
config= {},
|
|
18
|
-
callbacks= {}
|
|
30
|
+
config: ComponentPerformanceConfig = {},
|
|
31
|
+
callbacks: ComponentPerformanceCallbacks = {}
|
|
19
32
|
) => {
|
|
20
33
|
const {
|
|
21
34
|
enableMemoization = true,
|
|
@@ -29,11 +42,12 @@ export const useComponentPerformance = (
|
|
|
29
42
|
} = config
|
|
30
43
|
|
|
31
44
|
const [metrics, setMetrics] = useState<PerformanceMetrics>({
|
|
32
|
-
renderTime,
|
|
33
|
-
memoryUsage,
|
|
34
|
-
reRenderCount,
|
|
35
|
-
optimizationLevel,
|
|
36
|
-
lastOptimization
|
|
45
|
+
renderTime: 0,
|
|
46
|
+
memoryUsage: 0,
|
|
47
|
+
reRenderCount: 0,
|
|
48
|
+
optimizationLevel: 'none',
|
|
49
|
+
lastOptimization: 'none'
|
|
50
|
+
})
|
|
37
51
|
|
|
38
52
|
const [isOptimizing, setIsOptimizing] = useState(false)
|
|
39
53
|
const [optimizations, setOptimizations] = useState<string[]>([])
|
|
@@ -58,7 +72,8 @@ export const useComponentPerformance = (
|
|
|
58
72
|
setMetrics(prev => ({
|
|
59
73
|
...prev,
|
|
60
74
|
renderTime,
|
|
61
|
-
reRenderCount
|
|
75
|
+
reRenderCount: renderCountRef.current
|
|
76
|
+
}))
|
|
62
77
|
|
|
63
78
|
// Check if optimization is needed
|
|
64
79
|
if (renderTime > performanceThreshold && enableAutoOptimization) {
|
|
@@ -69,10 +84,10 @@ export const useComponentPerformance = (
|
|
|
69
84
|
|
|
70
85
|
// Memoization optimization
|
|
71
86
|
const memoizeValue = useCallback(<T>(
|
|
72
|
-
key,
|
|
73
|
-
value,
|
|
74
|
-
dependencies]
|
|
75
|
-
)=> {
|
|
87
|
+
key: string,
|
|
88
|
+
value: T,
|
|
89
|
+
dependencies: any[]
|
|
90
|
+
): T => {
|
|
76
91
|
if (!enableMemoization) return value
|
|
77
92
|
|
|
78
93
|
const dependencyKey = JSON.stringify(dependencies)
|
|
@@ -93,8 +108,8 @@ export const useComponentPerformance = (
|
|
|
93
108
|
|
|
94
109
|
// Lazy loading optimization
|
|
95
110
|
const lazyLoadComponent = useCallback((
|
|
96
|
-
componentId,
|
|
97
|
-
componentLoader) => Promise<{ default}>
|
|
111
|
+
componentId: string,
|
|
112
|
+
componentLoader: () => Promise<{ default: ComponentType<any> }>
|
|
98
113
|
) => {
|
|
99
114
|
if (!enableLazyLoading) return null
|
|
100
115
|
|
|
@@ -114,13 +129,13 @@ export const useComponentPerformance = (
|
|
|
114
129
|
|
|
115
130
|
// Virtualization optimization
|
|
116
131
|
const createVirtualizedList = useCallback(<T>(
|
|
117
|
-
items],
|
|
118
|
-
itemHeight,
|
|
119
|
-
containerHeight,
|
|
120
|
-
renderItem, index) => ReactNode
|
|
132
|
+
items: T[],
|
|
133
|
+
itemHeight: number,
|
|
134
|
+
containerHeight: number,
|
|
135
|
+
renderItem: (item: T, index: number) => ReactNode
|
|
121
136
|
) => {
|
|
122
137
|
if (!enableVirtualization || items.length < virtualizationThreshold) {
|
|
123
|
-
return { type, items, index) => renderItem(item, index)) }
|
|
138
|
+
return { type: 'standard', items: items.map((item, index) => renderItem(item, index)) }
|
|
124
139
|
}
|
|
125
140
|
|
|
126
141
|
const visibleCount = Math.ceil(containerHeight / itemHeight)
|
|
@@ -136,8 +151,8 @@ export const useComponentPerformance = (
|
|
|
136
151
|
callbacks.onOptimizationApplied?.('virtualization', 'VirtualizedList')
|
|
137
152
|
|
|
138
153
|
return {
|
|
139
|
-
type,
|
|
140
|
-
visibleItems, index) => renderItem(item, startIndex + index)),
|
|
154
|
+
type: 'virtualized',
|
|
155
|
+
visibleItems: visibleItems.map((item, index) => renderItem(item, startIndex + index)),
|
|
141
156
|
totalHeight,
|
|
142
157
|
offsetY,
|
|
143
158
|
startIndex,
|
|
@@ -146,8 +161,8 @@ export const useComponentPerformance = (
|
|
|
146
161
|
}, [enableVirtualization, virtualizationThreshold, callbacks])
|
|
147
162
|
|
|
148
163
|
// Auto-optimization suggestions
|
|
149
|
-
const suggestOptimizations = useCallback((renderTime) => {
|
|
150
|
-
const suggestions] = []
|
|
164
|
+
const suggestOptimizations = useCallback((renderTime: number) => {
|
|
165
|
+
const suggestions: string[] = []
|
|
151
166
|
|
|
152
167
|
if (renderTime > memoizationThreshold) {
|
|
153
168
|
suggestions.push('Consider memoization for expensive computations')
|
|
@@ -171,10 +186,10 @@ export const useComponentPerformance = (
|
|
|
171
186
|
// Performance analysis
|
|
172
187
|
const analyzePerformance = useCallback(() => {
|
|
173
188
|
const analysis = {
|
|
174
|
-
isOptimized
|
|
175
|
-
needsOptimization,
|
|
176
|
-
optimizationScore, 100 - (metrics.renderTime / performanceThreshold) * 100),
|
|
177
|
-
recommendations] as string[]
|
|
189
|
+
isOptimized: metrics.optimizationLevel !== 'none',
|
|
190
|
+
needsOptimization: metrics.renderTime > performanceThreshold,
|
|
191
|
+
optimizationScore: Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
|
|
192
|
+
recommendations: [] as string[]
|
|
178
193
|
}
|
|
179
194
|
|
|
180
195
|
if (metrics.renderTime > performanceThreshold) {
|
|
@@ -209,12 +224,12 @@ export const useComponentPerformance = (
|
|
|
209
224
|
callbacks.onMemoryWarning?.(memoryUsage)
|
|
210
225
|
}
|
|
211
226
|
} catch (error) {
|
|
212
|
-
console.warn('Memory usage check failed, error)
|
|
227
|
+
console.warn('Memory usage check failed:', error)
|
|
213
228
|
}
|
|
214
229
|
}, [enablePerformanceMonitoring, callbacks])
|
|
215
230
|
|
|
216
231
|
// Performance improvement tracking
|
|
217
|
-
const trackImprovement = useCallback((before, after) => {
|
|
232
|
+
const trackImprovement = useCallback((before: number, after: number) => {
|
|
218
233
|
const improvement = ((before - after) / before) * 100
|
|
219
234
|
|
|
220
235
|
if (improvement > 0) {
|
|
@@ -222,14 +237,14 @@ export const useComponentPerformance = (
|
|
|
222
237
|
|
|
223
238
|
setMetrics(prev => ({
|
|
224
239
|
...prev,
|
|
225
|
-
optimizationLevel,
|
|
226
|
-
lastOptimization)}%`
|
|
240
|
+
optimizationLevel: improvement > 50 ? 'high' : improvement > 25 ? 'medium' : 'low',
|
|
241
|
+
lastOptimization: `Improved by ${improvement.toFixed(1)}%`
|
|
227
242
|
}))
|
|
228
243
|
}
|
|
229
244
|
}, [callbacks])
|
|
230
245
|
|
|
231
246
|
// Auto-optimization
|
|
232
|
-
const autoOptimize = useCallback((componentId) => {
|
|
247
|
+
const autoOptimize = useCallback((componentId: string) => {
|
|
233
248
|
if (!enableAutoOptimization) return
|
|
234
249
|
|
|
235
250
|
setIsOptimizing(true)
|
|
@@ -251,9 +266,9 @@ export const useComponentPerformance = (
|
|
|
251
266
|
|
|
252
267
|
// Performance benchmarking
|
|
253
268
|
const benchmarkComponent = useCallback((
|
|
254
|
-
componentId,
|
|
255
|
-
benchmarkFn) => void,
|
|
256
|
-
iterations= 100
|
|
269
|
+
componentId: string,
|
|
270
|
+
benchmarkFn: () => void,
|
|
271
|
+
iterations: number = 100
|
|
257
272
|
) => {
|
|
258
273
|
const startTime = performance.now()
|
|
259
274
|
|
|
@@ -264,7 +279,7 @@ export const useComponentPerformance = (
|
|
|
264
279
|
const endTime = performance.now()
|
|
265
280
|
const averageTime = (endTime - startTime) / iterations
|
|
266
281
|
|
|
267
|
-
const benchmark = `Benchmark} - ${averageTime.toFixed(2)}ms average`
|
|
282
|
+
const benchmark = `Benchmark: ${componentId} - ${averageTime.toFixed(2)}ms average`
|
|
268
283
|
setOptimizations(prev => [...prev, benchmark])
|
|
269
284
|
|
|
270
285
|
return averageTime
|
|
@@ -285,7 +300,7 @@ export const useComponentPerformance = (
|
|
|
285
300
|
}
|
|
286
301
|
}
|
|
287
302
|
} catch (error) {
|
|
288
|
-
console.warn('Performance monitoring initialization failed, error)
|
|
303
|
+
console.warn('Performance monitoring initialization failed:', error)
|
|
289
304
|
}
|
|
290
305
|
}, [enablePerformanceMonitoring, checkMemoryUsage])
|
|
291
306
|
|
|
@@ -319,10 +334,10 @@ export const useComponentPerformance = (
|
|
|
319
334
|
trackImprovement,
|
|
320
335
|
|
|
321
336
|
// Utility functions
|
|
322
|
-
isPerformanceOptimized) => metrics.optimizationLevel !== 'none',
|
|
323
|
-
getOptimizationLevel) => metrics.optimizationLevel,
|
|
324
|
-
getPerformanceScore) => Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
|
|
325
|
-
clearOptimizations) => setOptimizations([])
|
|
337
|
+
isPerformanceOptimized: () => metrics.optimizationLevel !== 'none',
|
|
338
|
+
getOptimizationLevel: () => metrics.optimizationLevel,
|
|
339
|
+
getPerformanceScore: () => Math.max(0, 100 - (metrics.renderTime / performanceThreshold) * 100),
|
|
340
|
+
clearOptimizations: () => setOptimizations([])
|
|
326
341
|
}
|
|
327
342
|
}
|
|
328
343
|
|