feat(keyboard): Add default style option for setStyle (#334)

ionic-team · Apr 7, 2021 · 9dbb809 · 9dbb809
1 parent 2a83fcb
commit 9dbb809
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/keyboard/README.md b/keyboard/README.md
@@ -38,10 +38,10 @@ Keyboard.addListener('keyboardDidHide', () => {
 
 On iOS, the keyboard can be configured with the following options:
 
-| Prop         | Type                                                      | Description                                                                            | Default             | Since |
-| ------------ | --------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------- | ----- |
-| **`resize`** | <code><a href="#keyboardresize">KeyboardResize</a></code> | Configure the way the app is resized when the Keyboard appears. Only available on iOS. | <code>native</code> | 1.0.0 |
-| **`style`**  | <code>'dark'</code>                                       | Use the dark style keyboard instead of the regular one. Only available on iOS.         |                     | 1.0.0 |
+| Prop         | Type                                                      | Description                                                                                                                                                                   | Default             | Since |
+| ------------ | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----- |
+| **`resize`** | <code><a href="#keyboardresize">KeyboardResize</a></code> | Configure the way the app is resized when the Keyboard appears. Only available on iOS.                                                                                        | <code>native</code> | 1.0.0 |
+| **`style`**  | <code>'dark' \| 'light'</code>                            | Override the keyboard style if your app doesn't support dark/light theme changes. If not set, the keyboard style will depend on the device appearance. Only available on iOS. |                     | 1.0.0 |
 
 ### Examples
 
@@ -316,9 +316,9 @@ Remove all native listeners for this plugin.
 
 #### KeyboardStyleOptions
 
-| Prop        | Type                                                    | Description            | Since |
-| ----------- | ------------------------------------------------------- | ---------------------- | ----- |
-| **`style`** | <code><a href="#keyboardstyle">KeyboardStyle</a></code> | Style of the keyboard. | 1.0.0 |
+| Prop        | Type                                                    | Description            | Default                            | Since |
+| ----------- | ------------------------------------------------------- | ---------------------- | ---------------------------------- | ----- |
+| **`style`** | <code><a href="#keyboardstyle">KeyboardStyle</a></code> | Style of the keyboard. | <code>KeyboardStyle.Default</code> | 1.0.0 |
 
 
 #### KeyboardResizeOptions
@@ -347,10 +347,11 @@ Remove all native listeners for this plugin.
 
 #### KeyboardStyle
 
-| Members     | Value                | Description     | Since |
-| ----------- | -------------------- | --------------- | ----- |
-| **`Dark`**  | <code>'DARK'</code>  | Dark keyboard.  | 1.0.0 |
-| **`Light`** | <code>'LIGHT'</code> | Light keyboard. | 1.0.0 |
+| Members       | Value                  | Description                                                                                                                                                                                                                                 | Since |
+| ------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
+| **`Dark`**    | <code>'DARK'</code>    | Dark keyboard.                                                                                                                                                                                                                              | 1.0.0 |
+| **`Light`**   | <code>'LIGHT'</code>   | Light keyboard.                                                                                                                                                                                                                             | 1.0.0 |
+| **`Default`** | <code>'DEFAULT'</code> | On iOS 13 and newer the keyboard style is based on the device appearance. If the device is using Dark mode, the keyboard will be dark. If the device is using Light mode, the keyboard will be light. On iOS 12 the keyboard will be light. | 1.0.0 |
 
 
 #### KeyboardResize

diff --git a/keyboard/ios/Plugin/Keyboard.m b/keyboard/ios/Plugin/Keyboard.m
@@ -63,9 +63,7 @@ - (void)load
   [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(statusBarDidChangeFrame:) name:UIApplicationDidChangeStatusBarFrameNotification object: nil];
 
   NSString * style = [self getConfigValue:@"style"];
-  if ([style isEqualToString:@"dark"]) {
-    [self changeKeyboardStyle:style.uppercaseString];
-  }
+  [self changeKeyboardStyle:style.uppercaseString];
 
   self.keyboardResizes = ResizeNative;
   NSString * resizeMode = [self getConfigValue:@"resize"];
@@ -334,11 +332,20 @@ - (void)setScroll:(CAPPluginCall *)call {
 
 - (void)changeKeyboardStyle:(NSString*)style
 {
-  IMP newImp = [style isEqualToString:@"DARK"] ? imp_implementationWithBlock(^(id _s) {
-    return UIKeyboardAppearanceDark;
-  }) : imp_implementationWithBlock(^(id _s) {
-    return UIKeyboardAppearanceLight;
-  });
+  IMP newImp = nil;
+  if ([style isEqualToString:@"DARK"]) {
+    newImp = imp_implementationWithBlock(^(id _s) {
+      return UIKeyboardAppearanceDark;
+    });
+  } else if ([style isEqualToString:@"LIGHT"]) {
+    newImp = imp_implementationWithBlock(^(id _s) {
+      return UIKeyboardAppearanceLight;
+    });
+  } else {
+    newImp = imp_implementationWithBlock(^(id _s) {
+      return UIKeyboardAppearanceDefault;
+    });
+  }
   for (NSString* classString in @[WKClassString, UITraitsClassString]) {
     Class c = NSClassFromString(classString);
     Method m = class_getInstanceMethod(c, @selector(keyboardAppearance));

diff --git a/keyboard/src/definitions.ts b/keyboard/src/definitions.ts
@@ -20,14 +20,15 @@ declare module '@capacitor/cli' {
       resize?: KeyboardResize;
 
       /**
-       * Use the dark style keyboard instead of the regular one.
+       * Override the keyboard style if your app doesn't support dark/light theme changes.
+       * If not set, the keyboard style will depend on the device appearance.
        *
        * Only available on iOS.
        *
        * @since 1.0.0
        * @example "dark"
        */
-      style?: 'dark';
+      style?: 'dark' | 'light';
     };
   }
 }
@@ -46,6 +47,7 @@ export interface KeyboardStyleOptions {
    * Style of the keyboard.
    *
    * @since 1.0.0
+   * @default KeyboardStyle.Default
    */
   style: KeyboardStyle;
 }
@@ -64,6 +66,16 @@ export enum KeyboardStyle {
    * @since 1.0.0
    */
   Light = 'LIGHT',
+
+  /**
+   * On iOS 13 and newer the keyboard style is based on the device appearance.
+   * If the device is using Dark mode, the keyboard will be dark.
+   * If the device is using Light mode, the keyboard will be light.
+   * On iOS 12 the keyboard will be light.
+   *
+   * @since 1.0.0
+   */
+  Default = 'DEFAULT',
 }
 
 export interface KeyboardResizeOptions {