refactor: ProgressButton

ClashX Dashboard.xcodeproj/project.pbxproj

@@ -21,6 +21,7 @@
 		017F9AAC2A0E0B2300B81497 /* ProxyGroupRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 017F9AAB2A0E0B2300B81497 /* ProxyGroupRowView.swift */; };
 		018003B12A136DDB0070226E /* ProvidersView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 018003B02A136DDB0070226E /* ProvidersView.swift */; };
 		018A61BD29E9A2ED008608C0 /* APISettingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 018A61BC29E9A2ED008608C0 /* APISettingView.swift */; };
+		018AFEA52A1B5F7A0076E66B /* ProgressButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 018AFEA42A1B5F7A0076E66B /* ProgressButton.swift */; };
 		018C836C29E17505006366D3 /* ClashApiDatasStorage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 018C836B29E17505006366D3 /* ClashApiDatasStorage.swift */; };
 		0192315F29DD4DCF00539EDD /* ClashX_DashboardApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0192315E29DD4DCF00539EDD /* ClashX_DashboardApp.swift */; };
 		0192316129DD4DCF00539EDD /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0192316029DD4DCF00539EDD /* ContentView.swift */; };
@@ -79,6 +80,7 @@
 		017F9AAB2A0E0B2300B81497 /* ProxyGroupRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProxyGroupRowView.swift; sourceTree = "<group>"; };
 		018003B02A136DDB0070226E /* ProvidersView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProvidersView.swift; sourceTree = "<group>"; };
 		018A61BC29E9A2ED008608C0 /* APISettingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = APISettingView.swift; sourceTree = "<group>"; };
+		018AFEA42A1B5F7A0076E66B /* ProgressButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProgressButton.swift; sourceTree = "<group>"; };
 		018C836B29E17505006366D3 /* ClashApiDatasStorage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ClashApiDatasStorage.swift; sourceTree = "<group>"; };
 		0192315B29DD4DCF00539EDD /* ClashX Dashboard.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "ClashX Dashboard.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		0192315E29DD4DCF00539EDD /* ClashX_DashboardApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ClashX_DashboardApp.swift; sourceTree = "<group>"; };
@@ -141,6 +143,7 @@
 			isa = PBXGroup;
 			children = (
 				018A61BC29E9A2ED008608C0 /* APISettingView.swift */,
+				018AFEA42A1B5F7A0076E66B /* ProgressButton.swift */,
 				017753BF29EF7FB1006999DB /* APIServerItem.swift */,
 				010F693A29ED639A00BAAFB5 /* ClashServerAppStorage.swift */,
 			);
@@ -487,6 +490,7 @@
 				0192B5F629DE5262002CDBF3 /* ConfigManager.swift in Sources */,
 				0192B61A29DE5292002CDBF3 /* DateFormatter+.swift in Sources */,
 				01F885CF29DFD8DF008241EB /* CollectionsTableView.swift in Sources */,
+				018AFEA52A1B5F7A0076E66B /* ProgressButton.swift in Sources */,
 				01505C4A2A147B84001ACC4F /* DBProviderStorage.swift in Sources */,
 				0192B5CA29DE5151002CDBF3 /* ClashConfig.swift in Sources */,
 				0172CB5129E5AE670072DDEF /* SwiftUIViewExtensions.swift in Sources */,

ClashX Dashboard/Views/APISetting/ProgressButton.swift

@@ -0,0 +1,73 @@
+//
+//  ProgressButton.swift
+//  ClashX Dashboard
+//
+//
+
+import SwiftUI
+import AppKit
+
+//class ProgressButtonSize: NSObject {
+//	static func width(_ titles: [String]) -> CGFloat {
+//
+//		let str = titles.max() ?? ""
+//		let w = str.size(withAttributes: [.font: Font.system(size: 13)]).width
+//
+//		return w + 12 + 8*3
+//	}
+//}
+
+struct ProgressButton: View {
+	
+	@State var title: String
+	@State var title2: String
+	@State var iconName: String
+	@Binding var inProgress: Bool
+	
+	@State var autoWidth = true
+	
+	@State var action: () -> Void
+	
+    var body: some View {
+		Button() {
+			action()
+		} label: {
+			HStack {
+				VStack {
+					if inProgress {
+						ProgressView()
+							.controlSize(.small)
+					} else {
+						Image(systemName: iconName)
+					}
+				}
+				.frame(width: 12)
+
+				Spacer()
+				
+				Text(inProgress ? title2 : title)
+					.font(.system(size: 13))
+				
+				Spacer()
+			}
+			.animation(.default, value: inProgress)
+			.foregroundColor(inProgress ? .gray : .blue)
+		}
+		.disabled(inProgress)
+		.frame(width: autoWidth ? ProgressButton.width([title, title2]) : nil)
+    }
+	
+	static func width(_ titles: [String]) -> CGFloat {
+		let str = titles.max {
+			$0.count < $1.count
+		} ?? ""
+		let w = str.size(withAttributes: [.font: NSFont.systemFont(ofSize: 13)]).width
+		return w + 12 + 45
+	}
+}
+
+//struct ProgressButton_Previews: PreviewProvider {
+//    static var previews: some View {
+//        ProgressButton()
+//    }
+//}

ClashX Dashboard/Views/ContentTabs/Providers/ProviderProxiesView.swift

@@ -76,48 +76,33 @@ struct ProviderProxiesView: View {
 		}
 	}
 	
-
-	
 	var buttonsView: some View {
 		VStack {
-			Button() {
+			ProgressButton(
-				startHealthCheck()
+				title: "Health Check",
-			} label: {
+				title2: "Testing",
-				HStack {
+				iconName: "bolt.fill",
-					if isTesting {
+				inProgress: $isTesting,
-						ProgressView()
+				autoWidth: false) {
-							.controlSize(.small)
+					startHealthCheck()
-							.frame(width: 12)
-					} else {
-						Image(systemName: "bolt.fill")
-							.frame(width: 12)
-					}
-					Text(isTesting ? "Testing" : "Health Check")
-						.frame(width: 90)
 				}
-				.foregroundColor(isTesting ? .gray : .blue)
-			}
-			.disabled(isTesting)
 			
-			Button() {
+			ProgressButton(
-				startUpdate()
+				title: "Update",
-			} label: {
+				title2: "Updating",
-				HStack {
+				iconName: "arrow.clockwise",
-					if isUpdating {
+				inProgress: $isUpdating,
-						ProgressView()
+				autoWidth: false) {
-							.controlSize(.small)
+					startUpdate()
-							.frame(width: 12)
-					} else {
-						Image(systemName: "arrow.clockwise")
-							.frame(width: 12)
-					}
-					Text(isUpdating ? "Updating" : "Update")
-						.frame(width: 90)
 				}
-				.foregroundColor(isUpdating ? .gray : .blue)
-			}
-			.disabled(isTesting)
 		}
+		.frame(width: ProgressButton.width(
+			[
+			"Health Check",
+			"Testing",
+			"Update",
+			"Updating"]
+		))
 	}
 	
 	func startHealthCheck() {

ClashX Dashboard/Views/ContentTabs/Providers/ProxyProvidersRowView.swift

@@ -40,24 +40,12 @@ struct ProxyProvidersRowView: View {
 					listView
 				}
 			} header: {
-				Button {
+				ProgressButton(
-					updateAll()
+					title: "Update All",
-				} label: {
+					title2: "Updating",
-					HStack {
+					iconName: "arrow.clockwise", inProgress: $isUpdating) {
-						if isUpdating {
+						updateAll()
-							ProgressView()
-								.controlSize(.small)
-								.frame(width: 12)
-						} else {
-							Image(systemName: "arrow.clockwise")
-								.frame(width: 12)
-						}
-						Text(isUpdating ? "Updating" : "Update All")
-							.frame(width: 80)
 					}
-					.foregroundColor(isUpdating ? .gray : .blue)
-				}
-				.disabled(isUpdating)
 			}
 			.padding()
 		}

ClashX Dashboard/Views/ContentTabs/Providers/RuleProvidersRowView.swift

@@ -42,24 +42,13 @@ struct RuleProvidersRowView: View {
 					}
 				}
 			} header: {
-				Button {
+				ProgressButton(
-					updateAll()
+					title: "Update All",
-				} label: {
+					title2: "Updating",
-					HStack {
+					iconName: "arrow.clockwise",
-						if isUpdating {
+					inProgress: $isUpdating) {
-							ProgressView()
+						updateAll()	
-								.controlSize(.small)
-								.frame(width: 12)
-						} else {
-							Image(systemName: "arrow.clockwise")
-								.frame(width: 12)
-						}
-						Text(isUpdating ? "Updating" : "Update All")
-							.frame(width: 80)
 					}
-					.foregroundColor(isUpdating ? .gray : .blue)
-				}
-				.disabled(isUpdating)
 			}
 			.padding()
 		}

ClashX Dashboard/Views/ContentTabs/Proxies/ProxyGroupView.swift

@@ -82,24 +82,13 @@ struct ProxyGroupView: View {
 			
 			Spacer()
 			
-			Button() {
+			ProgressButton(
-				startBenchmark()
+				title: proxyGroup.type == .urltest ? "Retest" : "Benchmark",
-			} label: {
+				title2: "Testing",
-				HStack {
+				iconName: "bolt.fill",
-					if isTesting {
+				inProgress: $isTesting) {
-						ProgressView()
+					startBenchmark()
-							.controlSize(.small)
-							.frame(width: 12)
-					} else {
-						Image(systemName: "bolt.fill")
-							.frame(width: 12)
-					}
-					Text(isTesting ? "Testing" : (proxyGroup.type == .urltest ? "Retest" : "Benchmark"))
-						.frame(width: 70)
 				}
-				.foregroundColor(isTesting ? .gray : .blue)
-			}
-			.disabled(isTesting)
 		}
 	}