PrefUI // Catalina compatibility.

2022-08-11 11:32:24 +08:00 · 2022-08-11 11:32:24 +08:00 · ef7bce4321
parent 43db1cb7e5
commit ef7bce4321
6 changed files with 308 additions and 230 deletions
--- a/Source/3rdParty/VDKComboBox/VDKComboBox.swift
+++ b/Source/3rdParty/VDKComboBox/VDKComboBox.swift
@ -8,7 +8,7 @@ import SwiftUI
 // MARK: - NSComboBox

 // Ref: https://stackoverflow.com/a/71058587/4162914
-@available(macOS 11.0, *)
+@available(macOS 10.15, *)
 struct ComboBox: NSViewRepresentable {
  // The items that will show up in the pop-up menu:
  var items: [String]
--- a/Source/UI/PrefUI/ctlPrefUI.swift
+++ b/Source/UI/PrefUI/ctlPrefUI.swift
@ -7,48 +7,59 @@
 // requirements defined in MIT License.

 import Cocoa
+import SwiftUI

-@available(macOS 11.0, *)
+@available(macOS 10.15, *)
 class ctlPrefUI {
+  private(set) var tabImageGeneral: NSImage! = NSImage(named: "PrefToolbar-General")
+  private(set) var tabImageExperiences: NSImage! = NSImage(named: "PrefToolbar-Experiences")
+  private(set) var tabImageDictionary: NSImage! = NSImage(named: "PrefToolbar-Dictionary")
+  private(set) var tabImageKeyboard: NSImage! = NSImage(named: "PrefToolbar-Keyboard")
+
+  init() {
+    if #available(macOS 11.0, *) {
+      tabImageGeneral = NSImage(
+        systemSymbolName: "wrench.and.screwdriver.fill", accessibilityDescription: "General Preferences"
+      )
+      tabImageExperiences = NSImage(
+        systemSymbolName: "person.fill.questionmark", accessibilityDescription: "Experiences Preferences"
+      )
+      tabImageDictionary = NSImage(
+        systemSymbolName: "character.book.closed.fill", accessibilityDescription: "Dictionary Preferences"
+      )
+      tabImageKeyboard = NSImage(
+        systemSymbolName: "keyboard.macwindow", accessibilityDescription: "Keyboard Preferences"
+      )
+    }
+  }
+
  lazy var controller = PreferencesWindowController(
    panes: [
      Preferences.Pane(
        identifier: Preferences.PaneIdentifier(rawValue: "General"),
        title: NSLocalizedString("General", comment: ""),
-        toolbarIcon: NSImage(
-          systemSymbolName: "wrench.and.screwdriver.fill", accessibilityDescription: "General Preferences"
-        )
-          ?? NSImage(named: NSImage.homeTemplateName)!
+        toolbarIcon: tabImageGeneral
      ) {
        suiPrefPaneGeneral()
      },
      Preferences.Pane(
        identifier: Preferences.PaneIdentifier(rawValue: "Experiences"),
        title: NSLocalizedString("Experience", comment: ""),
-        toolbarIcon: NSImage(
-          systemSymbolName: "person.fill.questionmark", accessibilityDescription: "Experiences Preferences"
-        )
-          ?? NSImage(named: NSImage.listViewTemplateName)!
+        toolbarIcon: tabImageExperiences
      ) {
        suiPrefPaneExperience()
      },
      Preferences.Pane(
        identifier: Preferences.PaneIdentifier(rawValue: "Dictionary"),
        title: NSLocalizedString("Dictionary", comment: ""),
-        toolbarIcon: NSImage(
-          systemSymbolName: "character.book.closed.fill", accessibilityDescription: "Dictionary Preferences"
-        )
-          ?? NSImage(named: NSImage.bookmarksTemplateName)!
+        toolbarIcon: tabImageDictionary
      ) {
        suiPrefPaneDictionary()
      },
      Preferences.Pane(
        identifier: Preferences.PaneIdentifier(rawValue: "Keyboard"),
        title: NSLocalizedString("Keyboard", comment: ""),
-        toolbarIcon: NSImage(
-          systemSymbolName: "keyboard.macwindow", accessibilityDescription: "Keyboard Preferences"
-        )
-          ?? NSImage(named: NSImage.actionTemplateName)!
+        toolbarIcon: tabImageKeyboard
      ) {
        suiPrefPaneKeyboard()
      },
@ -57,3 +68,47 @@ class ctlPrefUI {
  )
  static let shared = ctlPrefUI()
 }
+
+// MARK: - Add "onChange" support.
+
+// Ref: https://mjeld.com/swiftui-macos-10-15-toggle-onchange/
+
+@available(macOS 10.15, *)
+extension Binding {
+  public func onChange(_ action: @escaping () -> Void) -> Binding {
+    Binding(
+      get: {
+        wrappedValue
+      },
+      set: { newValue in
+        wrappedValue = newValue
+        action()
+      }
+    )
+  }
+}
+
+// MARK: - Add ".tooltip" support.
+
+// Ref: https://stackoverflow.com/a/63217861
+
+@available(macOS 10.15, *)
+struct Tooltip: NSViewRepresentable {
+  let tooltip: String
+
+  func makeNSView(context _: NSViewRepresentableContext<Tooltip>) -> NSView {
+    let view = NSView()
+    view.toolTip = tooltip
+
+    return view
+  }
+
+  func updateNSView(_: NSView, context _: NSViewRepresentableContext<Tooltip>) {}
+}
+
+@available(macOS 10.15, *)
+extension View {
+  public func toolTip(_ tooltip: String) -> some View {
+    overlay(Tooltip(tooltip: tooltip))
+  }
+}
--- a/Source/UI/PrefUI/suiPrefPaneDictionary.swift
+++ b/Source/UI/PrefUI/suiPrefPaneDictionary.swift
@ -8,7 +8,7 @@

 import SwiftUI

-@available(macOS 11.0, *)
+@available(macOS 10.15, *)
 struct suiPrefPaneDictionary: View {
  private var fdrDefault = mgrLangModel.dataFolderPath(isDefaultFolder: true)
  @State private var tbxUserDataPathSpecified: String =
@ -43,8 +43,13 @@ struct suiPrefPaneDictionary: View {
      Preferences.Section(title: "", bottomDivider: true) {
        Text(LocalizedStringKey("Choose your desired user data folder path. Will be omitted if invalid."))
        HStack {
+          if #available(macOS 11.0, *) {
            TextField(fdrDefault, text: $tbxUserDataPathSpecified).disabled(true)
              .help(tbxUserDataPathSpecified)
+          } else {
+            TextField(fdrDefault, text: $tbxUserDataPathSpecified).disabled(true)
+              .toolTip(tbxUserDataPathSpecified)
+          }
          Button {
            IME.dlgOpenPath.title = NSLocalizedString(
              "Choose your desired user data folder.", comment: ""
@ -98,48 +103,43 @@ struct suiPrefPaneDictionary: View {
        }
        Toggle(
          LocalizedStringKey("Automatically reload user data files if changes detected"),
-          isOn: $selAutoReloadUserData
-        ).controlSize(.small).onChange(of: selAutoReloadUserData) { value in
-          mgrPrefs.shouldAutoReloadUserDataFiles = value
+          isOn: $selAutoReloadUserData.onChange {
+            mgrPrefs.shouldAutoReloadUserDataFiles = selAutoReloadUserData
          }
+        ).controlSize(.small)
        Divider()
        Toggle(
          LocalizedStringKey("Enable CNS11643 Support (2022-07-20)"),
-          isOn: $selEnableCNS11643
-        )
-        .onChange(of: selEnableCNS11643) { value in
-          mgrPrefs.cns11643Enabled = value
-          mgrLangModel.setCNSEnabled(value)
+          isOn: $selEnableCNS11643.onChange {
+            mgrPrefs.cns11643Enabled = selEnableCNS11643
+            mgrLangModel.setCNSEnabled(mgrPrefs.cns11643Enabled)
          }
+        )
        Toggle(
          LocalizedStringKey("Enable symbol input support (incl. certain emoji symbols)"),
-          isOn: $selEnableSymbolInputSupport
-        )
-        .onChange(of: selEnableSymbolInputSupport) { value in
-          mgrPrefs.symbolInputEnabled = value
-          mgrLangModel.setSymbolEnabled(value)
+          isOn: $selEnableSymbolInputSupport.onChange {
+            mgrPrefs.symbolInputEnabled = selEnableSymbolInputSupport
+            mgrLangModel.setSymbolEnabled(mgrPrefs.symbolInputEnabled)
          }
+        )
        Toggle(
          LocalizedStringKey("Allow boosting / excluding a candidate of single kanji"),
-          isOn: $selAllowBoostingSingleKanjiAsUserPhrase
-        )
-        .onChange(of: selAllowBoostingSingleKanjiAsUserPhrase) { value in
-          mgrPrefs.allowBoostingSingleKanjiAsUserPhrase = value
+          isOn: $selAllowBoostingSingleKanjiAsUserPhrase.onChange {
+            mgrPrefs.allowBoostingSingleKanjiAsUserPhrase = selAllowBoostingSingleKanjiAsUserPhrase
          }
+        )
        Toggle(
          LocalizedStringKey("Applying typing suggestions from half-life user override model"),
-          isOn: $selFetchSuggestionsFromUserOverrideModel
-        )
-        .onChange(of: selFetchSuggestionsFromUserOverrideModel) { value in
-          mgrPrefs.fetchSuggestionsFromUserOverrideModel = value
+          isOn: $selFetchSuggestionsFromUserOverrideModel.onChange {
+            mgrPrefs.fetchSuggestionsFromUserOverrideModel = selFetchSuggestionsFromUserOverrideModel
          }
+        )
        Toggle(
          LocalizedStringKey("Always use fixed listing order in candidate window"),
-          isOn: $selUseFixecCandidateOrderOnSelection
-        )
-        .onChange(of: selUseFixecCandidateOrderOnSelection) { value in
-          mgrPrefs.useFixecCandidateOrderOnSelection = value
+          isOn: $selUseFixecCandidateOrderOnSelection.onChange {
+            mgrPrefs.useFixecCandidateOrderOnSelection = selUseFixecCandidateOrderOnSelection
          }
+        )
      }
    }
  }
--- a/Source/UI/PrefUI/suiPrefPaneExperience.swift
+++ b/Source/UI/PrefUI/suiPrefPaneExperience.swift
@ -9,9 +9,8 @@
 import Cocoa
 import SwiftUI

-@available(macOS 11.0, *)
+@available(macOS 10.15, *)
 struct suiPrefPaneExperience: View {
-
  @State private var selCursorPosition =
    UserDefaults.standard.bool(
      forKey: UserDef.kUseRearCursorMode.rawValue) ? 1 : 0
@ -53,11 +52,14 @@ struct suiPrefPaneExperience: View {
  var body: some View {
    Preferences.Container(contentWidth: contentWidth) {
      Preferences.Section(label: { Text(LocalizedStringKey("Cursor Selection:")) }) {
-        Picker("", selection: $selCursorPosition) {
+        Picker(
+          "",
+          selection: $selCursorPosition.onChange {
+            mgrPrefs.useRearCursorMode = (selCursorPosition == 1) ? true : false
+          }
+        ) {
          Text(LocalizedStringKey("in front of the phrase (like macOS built-in Zhuyin IME)")).tag(0)
          Text(LocalizedStringKey("at the rear of the phrase (like Microsoft New Phonetic)")).tag(1)
-        }.onChange(of: selCursorPosition) { value in
-          mgrPrefs.useRearCursorMode = (value == 1) ? true : false
        }
        .labelsHidden()
        .pickerStyle(RadioGroupPickerStyle())
@ -65,17 +67,20 @@ struct suiPrefPaneExperience: View {
          .preferenceDescription()
        Toggle(
          LocalizedStringKey("Push the cursor in front of the phrase after selection"),
-          isOn: $selPushCursorAfterSelection
-        ).onChange(of: selPushCursorAfterSelection) { value in
-          mgrPrefs.moveCursorAfterSelectingCandidate = value
-        }.controlSize(.small)
+          isOn: $selPushCursorAfterSelection.onChange {
+            mgrPrefs.moveCursorAfterSelectingCandidate = selPushCursorAfterSelection
+          }
+        ).controlSize(.small)
      }
      Preferences.Section(title: "(Shift+)Tab:") {
-        Picker("", selection: $selKeyBehaviorShiftTab) {
+        Picker(
+          "",
+          selection: $selKeyBehaviorShiftTab.onChange {
+            mgrPrefs.specifyShiftTabKeyBehavior = (selKeyBehaviorShiftTab == 1) ? true : false
+          }
+        ) {
          Text(LocalizedStringKey("for cycling candidates")).tag(0)
          Text(LocalizedStringKey("for cycling pages")).tag(1)
-        }.onChange(of: selKeyBehaviorShiftTab) { value in
-          mgrPrefs.specifyShiftTabKeyBehavior = (value == 1) ? true : false
        }
        .labelsHidden()
        .horizontalRadioGroupLayout()
@ -84,11 +89,14 @@ struct suiPrefPaneExperience: View {
          .preferenceDescription()
      }
      Preferences.Section(label: { Text(LocalizedStringKey("(Shift+)Space:")) }) {
-        Picker("", selection: $selKeyBehaviorShiftSpace) {
+        Picker(
+          "",
+          selection: $selKeyBehaviorShiftSpace.onChange {
+            mgrPrefs.specifyShiftSpaceKeyBehavior = (selKeyBehaviorShiftSpace == 1) ? true : false
+          }
+        ) {
          Text(LocalizedStringKey("Space to +cycle candidates, Shift+Space to +cycle pages")).tag(0)
          Text(LocalizedStringKey("Space to +cycle pages, Shift+Space to +cycle candidates")).tag(1)
-        }.onChange(of: selKeyBehaviorShiftSpace) { value in
-          mgrPrefs.specifyShiftSpaceKeyBehavior = (value == 1) ? true : false
        }
        .labelsHidden()
        .pickerStyle(RadioGroupPickerStyle())
@ -96,12 +104,15 @@ struct suiPrefPaneExperience: View {
          .preferenceDescription()
      }
      Preferences.Section(label: { Text(LocalizedStringKey("Shift+Letter:")) }) {
-        Picker("", selection: $selUpperCaseLetterKeyBehavior) {
+        Picker(
+          "",
+          selection: $selUpperCaseLetterKeyBehavior.onChange {
+            mgrPrefs.upperCaseLetterKeyBehavior = selUpperCaseLetterKeyBehavior
+          }
+        ) {
          Text(LocalizedStringKey("Type them into inline composition buffer")).tag(0)
          Text(LocalizedStringKey("Directly commit lowercased letters")).tag(1)
          Text(LocalizedStringKey("Directly commit uppercased letters")).tag(2)
-        }.onChange(of: selUpperCaseLetterKeyBehavior) { value in
-          mgrPrefs.upperCaseLetterKeyBehavior = value
        }
        .labelsHidden()
        .pickerStyle(RadioGroupPickerStyle())
@ -111,39 +122,40 @@ struct suiPrefPaneExperience: View {
      Preferences.Section(label: { Text(LocalizedStringKey("Misc Settings:")) }) {
        Toggle(
          LocalizedStringKey("Enable Space key for calling candidate window"),
-          isOn: $selKeyBehaviorSpaceForCallingCandidate
-        ).onChange(of: selKeyBehaviorSpaceForCallingCandidate) { value in
-          mgrPrefs.chooseCandidateUsingSpace = value
+          isOn: $selKeyBehaviorSpaceForCallingCandidate.onChange {
+            mgrPrefs.chooseCandidateUsingSpace = selKeyBehaviorSpaceForCallingCandidate
          }
+        )
        Toggle(
          LocalizedStringKey("Use ESC key to clear the entire input buffer"),
-          isOn: $selKeyBehaviorESCForClearingTheBuffer
-        ).onChange(of: selKeyBehaviorESCForClearingTheBuffer) { value in
-          mgrPrefs.escToCleanInputBuffer = value
+          isOn: $selKeyBehaviorESCForClearingTheBuffer.onChange {
+            mgrPrefs.escToCleanInputBuffer = selKeyBehaviorESCForClearingTheBuffer
          }
+        )
        Toggle(
          LocalizedStringKey("Automatically correct reading combinations when typing"),
-          isOn: $selAutoCorrectReadingCombination
-        ).onChange(of: selAutoCorrectReadingCombination) { value in
-          mgrPrefs.autoCorrectReadingCombination = value
+          isOn: $selAutoCorrectReadingCombination.onChange {
+            mgrPrefs.autoCorrectReadingCombination = selAutoCorrectReadingCombination
          }
+        )
        Toggle(
          LocalizedStringKey("Allow using Enter key to confirm associated candidate selection"),
-          isOn: $selAlsoConfirmAssociatedCandidatesByEnter
-        ).onChange(of: selAlsoConfirmAssociatedCandidatesByEnter) { value in
-          mgrPrefs.alsoConfirmAssociatedCandidatesByEnter = value
+          isOn: $selAlsoConfirmAssociatedCandidatesByEnter.onChange {
+            mgrPrefs.alsoConfirmAssociatedCandidatesByEnter = selAlsoConfirmAssociatedCandidatesByEnter
          }
+        )
        Toggle(
          LocalizedStringKey("Also toggle alphanumerical mode with Left-Shift"),
-          isOn: $selTogglingAlphanumericalModeWithLShift
-        ).onChange(of: selTogglingAlphanumericalModeWithLShift) { value in
-          mgrPrefs.togglingAlphanumericalModeWithLShift = value
+          isOn: $selTogglingAlphanumericalModeWithLShift.onChange {
+            mgrPrefs.togglingAlphanumericalModeWithLShift = selTogglingAlphanumericalModeWithLShift
          }
+        )
        Toggle(
-          LocalizedStringKey("Emulating select-candidate-per-character mode"), isOn: $selEnableSCPCTypingMode
-        ).onChange(of: selEnableSCPCTypingMode) { value in
-          mgrPrefs.useSCPCTypingMode = value
+          LocalizedStringKey("Emulating select-candidate-per-character mode"),
+          isOn: $selEnableSCPCTypingMode.onChange {
+            mgrPrefs.useSCPCTypingMode = selEnableSCPCTypingMode
          }
+        )
        Text(LocalizedStringKey("An accomodation for elder computer users."))
          .preferenceDescription()
      }
--- a/Source/UI/PrefUI/suiPrefPaneGeneral.swift
+++ b/Source/UI/PrefUI/suiPrefPaneGeneral.swift
@ -9,7 +9,7 @@
 import Cocoa
 import SwiftUI

-@available(macOS 11.0, *)
+@available(macOS 10.15, *)
 struct suiPrefPaneGeneral: View {
  @State private var selCandidateUIFontSize = UserDefaults.standard.integer(
    forKey: UserDef.kCandidateListTextSize.rawValue)
@ -53,7 +53,12 @@ struct suiPrefPaneGeneral: View {
  var body: some View {
    Preferences.Container(contentWidth: contentWidth) {
      Preferences.Section(bottomDivider: false, label: { Text(LocalizedStringKey("Candidate Size:")) }) {
-        Picker("", selection: $selCandidateUIFontSize) {
+        Picker(
+          "",
+          selection: $selCandidateUIFontSize.onChange {
+            mgrPrefs.candidateListTextSize = CGFloat(selCandidateUIFontSize)
+          }
+        ) {
          Text("12").tag(12)
          Text("14").tag(14)
          Text("16").tag(16)
@ -62,8 +67,6 @@ struct suiPrefPaneGeneral: View {
          Text("32").tag(32)
          Text("64").tag(64)
          Text("96").tag(96)
-        }.onChange(of: selCandidateUIFontSize) { value in
-          mgrPrefs.candidateListTextSize = CGFloat(value)
        }
        .labelsHidden()
        .frame(width: 120.0)
@ -71,14 +74,10 @@ struct suiPrefPaneGeneral: View {
          .preferenceDescription()
      }
      Preferences.Section(bottomDivider: false, label: { Text(LocalizedStringKey("UI Language:")) }) {
-        Picker(LocalizedStringKey("Follow OS settings"), selection: $selUILanguage) {
-          Text(LocalizedStringKey("Follow OS settings")).tag(["auto"])
-          Text(LocalizedStringKey("Simplified Chinese")).tag(["zh-Hans"])
-          Text(LocalizedStringKey("Traditional Chinese")).tag(["zh-Hant"])
-          Text(LocalizedStringKey("Japanese")).tag(["ja"])
-          Text(LocalizedStringKey("English")).tag(["en"])
-        }.onChange(of: selUILanguage) { value in
-          IME.prtDebugIntel(value[0])
+        Picker(
+          LocalizedStringKey("Follow OS settings"),
+          selection: $selUILanguage.onChange {
+            IME.prtDebugIntel(selUILanguage[0])
            if selUILanguage == mgrPrefs.appleLanguages
              || (selUILanguage[0] == "auto"
                && UserDefaults.standard.object(forKey: UserDef.kAppleLanguages.rawValue) == nil)
@ -86,13 +85,20 @@ struct suiPrefPaneGeneral: View {
              return
            }
            if selUILanguage[0] != "auto" {
-            mgrPrefs.appleLanguages = value
+              mgrPrefs.appleLanguages = selUILanguage
            } else {
              UserDefaults.standard.removeObject(forKey: UserDef.kAppleLanguages.rawValue)
            }
            NSLog("vChewing App self-terminated due to UI language change.")
            NSApplication.shared.terminate(nil)
          }
+        ) {
+          Text(LocalizedStringKey("Follow OS settings")).tag(["auto"])
+          Text(LocalizedStringKey("Simplified Chinese")).tag(["zh-Hans"])
+          Text(LocalizedStringKey("Traditional Chinese")).tag(["zh-Hant"])
+          Text(LocalizedStringKey("Japanese")).tag(["ja"])
+          Text(LocalizedStringKey("English")).tag(["en"])
+        }
        .labelsHidden()
        .frame(width: 180.0)

@ -100,11 +106,14 @@ struct suiPrefPaneGeneral: View {
          .preferenceDescription()
      }
      Preferences.Section(bottomDivider: true, label: { Text(LocalizedStringKey("Candidate Layout:")) }) {
-        Picker("", selection: $selEnableHorizontalCandidateLayout) {
+        Picker(
+          "",
+          selection: $selEnableHorizontalCandidateLayout.onChange {
+            mgrPrefs.useHorizontalCandidateList = selEnableHorizontalCandidateLayout
+          }
+        ) {
          Text(LocalizedStringKey("Vertical")).tag(false)
          Text(LocalizedStringKey("Horizontal")).tag(true)
-        }.onChange(of: selEnableHorizontalCandidateLayout) { value in
-          mgrPrefs.useHorizontalCandidateList = value
        }
        .labelsHidden()
        .horizontalRadioGroupLayout()
@ -112,11 +121,9 @@ struct suiPrefPaneGeneral: View {
        Text(LocalizedStringKey("Choose your preferred layout of the candidate window."))
          .preferenceDescription()
        Toggle(
-          LocalizedStringKey("Show page buttons in candidate window"), isOn: $selShowPageButtonsInCandidateUI
-        ).onChange(
-          of: selShowPageButtonsInCandidateUI,
-          perform: { value in
-            mgrPrefs.showPageButtonsInCandidateWindow = value
+          LocalizedStringKey("Show page buttons in candidate window"),
+          isOn: $selShowPageButtonsInCandidateUI.onChange {
+            mgrPrefs.showPageButtonsInCandidateWindow = selShowPageButtonsInCandidateUI
          }
        )
        .controlSize(.small)
@ -124,58 +131,59 @@ struct suiPrefPaneGeneral: View {
      Preferences.Section(bottomDivider: true, label: { Text(LocalizedStringKey("Output Settings:")) }) {
        Toggle(
          LocalizedStringKey("Auto-convert traditional Chinese glyphs to KangXi characters"),
-          isOn: $selEnableKanjiConvToKangXi
-        ).onChange(of: selEnableKanjiConvToKangXi) { value in
-          mgrPrefs.chineseConversionEnabled = value
-          selEnableKanjiConvToKangXi = value
-          if value {
-            mgrPrefs.shiftJISShinjitaiOutputEnabled = !value
-            selEnableKanjiConvToJIS = !value
+          isOn: $selEnableKanjiConvToKangXi.onChange {
+            mgrPrefs.chineseConversionEnabled = selEnableKanjiConvToKangXi
+            if selEnableKanjiConvToKangXi {
+              mgrPrefs.shiftJISShinjitaiOutputEnabled = !selEnableKanjiConvToKangXi
+              selEnableKanjiConvToJIS = !selEnableKanjiConvToKangXi
            }
          }
+        )
        Toggle(
          LocalizedStringKey("Auto-convert traditional Chinese glyphs to JIS Shinjitai characters"),
-          isOn: $selEnableKanjiConvToJIS
-        ).onChange(of: selEnableKanjiConvToJIS) { value in
-          mgrPrefs.shiftJISShinjitaiOutputEnabled = value
-          selEnableKanjiConvToJIS = value
-          if value {
-            mgrPrefs.chineseConversionEnabled = !value
-            selEnableKanjiConvToKangXi = !value
+          isOn: $selEnableKanjiConvToJIS.onChange {
+            mgrPrefs.shiftJISShinjitaiOutputEnabled = selEnableKanjiConvToJIS
+            if selEnableKanjiConvToJIS {
+              mgrPrefs.chineseConversionEnabled = !selEnableKanjiConvToJIS
+              selEnableKanjiConvToKangXi = !selEnableKanjiConvToJIS
            }
          }
+        )
        Toggle(
          LocalizedStringKey("Show Hanyu-Pinyin in the inline composition buffer & tooltip"),
-          isOn: $selShowHanyuPinyinInCompositionBuffer
-        ).onChange(of: selShowHanyuPinyinInCompositionBuffer) { value in
-          mgrPrefs.showHanyuPinyinInCompositionBuffer = value
-          selShowHanyuPinyinInCompositionBuffer = value
+          isOn: $selShowHanyuPinyinInCompositionBuffer.onChange {
+            mgrPrefs.showHanyuPinyinInCompositionBuffer = selShowHanyuPinyinInCompositionBuffer
          }
+        )
        Toggle(
          LocalizedStringKey("Output Hanyu-Pinyin in lieu of Zhuyin when Ctrl(+Alt)+CMD+Enter"),
-          isOn: $selInlineDumpPinyinInLieuOfZhuyin
-        ).onChange(of: selInlineDumpPinyinInLieuOfZhuyin) { value in
-          mgrPrefs.inlineDumpPinyinInLieuOfZhuyin = value
-          selInlineDumpPinyinInLieuOfZhuyin = value
+          isOn: $selInlineDumpPinyinInLieuOfZhuyin.onChange {
+            mgrPrefs.inlineDumpPinyinInLieuOfZhuyin = selInlineDumpPinyinInLieuOfZhuyin
          }
+        )
        Toggle(
          LocalizedStringKey("Stop farting (when typed phonetic combination is invalid, etc.)"),
-          isOn: $selEnableFartSuppressor
-        ).onChange(of: selEnableFartSuppressor) { value in
-          mgrPrefs.shouldNotFartInLieuOfBeep = value
+          isOn: $selEnableFartSuppressor.onChange {
+            mgrPrefs.shouldNotFartInLieuOfBeep = selEnableFartSuppressor
            clsSFX.beep()
          }
+        )
      }
      Preferences.Section(label: { Text(LocalizedStringKey("Misc Settings:")).controlSize(.small) }) {
-        Toggle(LocalizedStringKey("Check for updates automatically"), isOn: $selEnableAutoUpdateCheck)
-          .onChange(of: selEnableAutoUpdateCheck) { value in
-            mgrPrefs.checkUpdateAutomatically = value
+        Toggle(
+          LocalizedStringKey("Check for updates automatically"),
+          isOn: $selEnableAutoUpdateCheck.onChange {
+            mgrPrefs.checkUpdateAutomatically = selEnableAutoUpdateCheck
          }
+        )
        .controlSize(.small)
-        Toggle(LocalizedStringKey("Debug Mode"), isOn: $selEnableDebugMode).controlSize(.small)
-          .onChange(of: selEnableDebugMode) { value in
-            mgrPrefs.isDebugModeEnabled = value
+        Toggle(
+          LocalizedStringKey("Debug Mode"),
+          isOn: $selEnableDebugMode.onChange {
+            mgrPrefs.isDebugModeEnabled = selEnableDebugMode
          }
+        )
+        .controlSize(.small)
      }
    }
  }
--- a/Source/UI/PrefUI/suiPrefPaneKeyboard.swift
+++ b/Source/UI/PrefUI/suiPrefPaneKeyboard.swift
@ -8,7 +8,7 @@

 import SwiftUI

-@available(macOS 11.0, *)
+@available(macOS 10.15, *)
 struct suiPrefPaneKeyboard: View {
  @State private var selSelectionKeysList = mgrPrefs.suggestedCandidateKeys
  @State private var selSelectionKeys =
@ -44,9 +44,10 @@ struct suiPrefPaneKeyboard: View {
  var body: some View {
    Preferences.Container(contentWidth: contentWidth) {
      Preferences.Section(label: { Text(LocalizedStringKey("Selection Keys:")) }) {
-        ComboBox(items: mgrPrefs.suggestedCandidateKeys, text: $selSelectionKeys).frame(width: 180).onChange(
-          of: selSelectionKeys
-        ) { value in
+        ComboBox(
+          items: mgrPrefs.suggestedCandidateKeys,
+          text: $selSelectionKeys.onChange {
+            let value = selSelectionKeys
            let keys: String = value.trimmingCharacters(in: .whitespacesAndNewlines).deduplicate
            do {
              try mgrPrefs.validate(candidateKeys: keys)
@ -64,6 +65,7 @@ struct suiPrefPaneKeyboard: View {
              }
            }
          }
+        ).frame(width: 180)
        Text(
          LocalizedStringKey(
            "Choose or hit Enter to confim your prefered keys for selecting candidates."
@ -73,7 +75,25 @@ struct suiPrefPaneKeyboard: View {
      }
      Preferences.Section(label: { Text(LocalizedStringKey("Phonetic Parser:")) }) {
        HStack {
-          Picker("", selection: $selMandarinParser) {
+          Picker(
+            "",
+            selection: $selMandarinParser.onChange {
+              let value = selMandarinParser
+              mgrPrefs.mandarinParser = value
+              switch value {
+                case 0:
+                  if !AppleKeyboardConverter.arrDynamicBasicKeyLayout.contains(mgrPrefs.basicKeyboardLayout) {
+                    mgrPrefs.basicKeyboardLayout = "com.apple.keylayout.ZhuyinBopomofo"
+                    selBasicKeyboardLayout = mgrPrefs.basicKeyboardLayout
+                  }
+                default:
+                  if AppleKeyboardConverter.arrDynamicBasicKeyLayout.contains(mgrPrefs.basicKeyboardLayout) {
+                    mgrPrefs.basicKeyboardLayout = "com.apple.keylayout.ABC"
+                    selBasicKeyboardLayout = mgrPrefs.basicKeyboardLayout
+                  }
+              }
+            }
+          ) {
            Group {
              Text(LocalizedStringKey("Dachen (Microsoft Standard / Wang / 01, etc.)")).tag(0)
              Text(LocalizedStringKey("Eten Traditional")).tag(1)
@ -97,20 +117,6 @@ struct suiPrefPaneKeyboard: View {
              Text(LocalizedStringKey("Hualuo Pinyin with Numeral Intonation")).tag(13)
              Text(LocalizedStringKey("Universal Pinyin with Numeral Intonation")).tag(14)
            }
-          }.onChange(of: selMandarinParser) { value in
-            mgrPrefs.mandarinParser = value
-            switch value {
-              case 0:
-                if !AppleKeyboardConverter.arrDynamicBasicKeyLayout.contains(mgrPrefs.basicKeyboardLayout) {
-                  mgrPrefs.basicKeyboardLayout = "com.apple.keylayout.ZhuyinBopomofo"
-                  selBasicKeyboardLayout = mgrPrefs.basicKeyboardLayout
-                }
-              default:
-                if AppleKeyboardConverter.arrDynamicBasicKeyLayout.contains(mgrPrefs.basicKeyboardLayout) {
-                  mgrPrefs.basicKeyboardLayout = "com.apple.keylayout.ABC"
-                  selBasicKeyboardLayout = mgrPrefs.basicKeyboardLayout
-                }
-            }
          }
          .labelsHidden()
          Button {
@ -136,18 +142,22 @@ struct suiPrefPaneKeyboard: View {
      }
      Preferences.Section(bottomDivider: true, label: { Text(LocalizedStringKey("Basic Keyboard Layout:")) }) {
        HStack {
-          Picker("", selection: $selBasicKeyboardLayout) {
-            ForEach(0...(IME.arrEnumerateSystemKeyboardLayouts.count - 1), id: \.self) { id in
-              Text(IME.arrEnumerateSystemKeyboardLayouts[id].strName).tag(
-                IME.arrEnumerateSystemKeyboardLayouts[id].strValue)
-            }.id(UUID())
-          }.onChange(of: selBasicKeyboardLayout) { value in
+          Picker(
+            "",
+            selection: $selBasicKeyboardLayout.onChange {
+              let value = selBasicKeyboardLayout
              mgrPrefs.basicKeyboardLayout = value
              if AppleKeyboardConverter.arrDynamicBasicKeyLayout.contains(value) {
                mgrPrefs.mandarinParser = 0
                selMandarinParser = mgrPrefs.mandarinParser
              }
            }
+          ) {
+            ForEach(0...(IME.arrEnumerateSystemKeyboardLayouts.count - 1), id: \.self) { id in
+              Text(IME.arrEnumerateSystemKeyboardLayouts[id].strName).tag(
+                IME.arrEnumerateSystemKeyboardLayouts[id].strValue)
+            }.id(UUID())
+          }
          .labelsHidden()
          .frame(width: 240.0)
        }
@ -157,53 +167,46 @@ struct suiPrefPaneKeyboard: View {
      Preferences.Section(bottomDivider: true, label: { Text(LocalizedStringKey("Keyboard Shortcuts:")) }) {
        Toggle(
          LocalizedStringKey("Per-Char Select Mode"),
-          isOn: $selUsingHotKeySCPC
-        ).onChange(of: selUsingHotKeySCPC) { value in
-          mgrPrefs.usingHotKeySCPC = value
-          selUsingHotKeySCPC = value
+          isOn: $selUsingHotKeySCPC.onChange {
+            mgrPrefs.usingHotKeySCPC = selUsingHotKeySCPC
          }
+        )
        Toggle(
          LocalizedStringKey("Per-Char Associated Phrases"),
-          isOn: $selUsingHotKeyAssociates
-        ).onChange(of: selUsingHotKeyAssociates) { value in
-          mgrPrefs.usingHotKeyAssociates = value
-          selUsingHotKeyAssociates = value
+          isOn: $selUsingHotKeyAssociates.onChange {
+            mgrPrefs.usingHotKeyAssociates = selUsingHotKeyAssociates
          }
+        )
        Toggle(
          LocalizedStringKey("CNS11643 Mode"),
-          isOn: $selUsingHotKeyCNS
-        ).onChange(of: selUsingHotKeyCNS) { value in
-          mgrPrefs.usingHotKeyCNS = value
-          selUsingHotKeyCNS = value
+          isOn: $selUsingHotKeyCNS.onChange {
+            mgrPrefs.usingHotKeyCNS = selUsingHotKeyCNS
          }
+        )
        Toggle(
          LocalizedStringKey("Force KangXi Writing"),
-          isOn: $selUsingHotKeyKangXi
-        ).onChange(of: selUsingHotKeyKangXi) { value in
-          mgrPrefs.usingHotKeyKangXi = value
-          selUsingHotKeyKangXi = value
+          isOn: $selUsingHotKeyKangXi.onChange {
+            mgrPrefs.usingHotKeyKangXi = selUsingHotKeyKangXi
          }
+        )
        Toggle(
          LocalizedStringKey("JIS Shinjitai Output"),
-          isOn: $selUsingHotKeyJIS
-        ).onChange(of: selUsingHotKeyJIS) { value in
-          mgrPrefs.usingHotKeyJIS = value
-          selUsingHotKeyJIS = value
+          isOn: $selUsingHotKeyJIS.onChange {
+            mgrPrefs.usingHotKeyJIS = selUsingHotKeyJIS
          }
+        )
        Toggle(
          LocalizedStringKey("Half-Width Punctuation Mode"),
-          isOn: $selUsingHotKeyHalfWidthASCII
-        ).onChange(of: selUsingHotKeyHalfWidthASCII) { value in
-          mgrPrefs.usingHotKeyHalfWidthASCII = value
-          selUsingHotKeyHalfWidthASCII = value
+          isOn: $selUsingHotKeyHalfWidthASCII.onChange {
+            mgrPrefs.usingHotKeyHalfWidthASCII = selUsingHotKeyHalfWidthASCII
          }
+        )
        Toggle(
          LocalizedStringKey("Currency Numeral Output"),
-          isOn: $selUsingHotKeyCurrencyNumerals
-        ).onChange(of: selUsingHotKeyCurrencyNumerals) { value in
-          mgrPrefs.usingHotKeyCurrencyNumerals = value
-          selUsingHotKeyCurrencyNumerals = value
+          isOn: $selUsingHotKeyCurrencyNumerals.onChange {
+            mgrPrefs.usingHotKeyCurrencyNumerals = selUsingHotKeyCurrencyNumerals
          }
+        )
      }
    }
    Divider()