Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Apr 7, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions keyboard/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
23 changes: 15 additions & 8 deletions keyboard/ios/Plugin/Keyboard.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand Down Expand Up @@ -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));
Expand Down
16 changes: 14 additions & 2 deletions keyboard/src/definitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
};
}
}
Expand All @@ -46,6 +47,7 @@ export interface KeyboardStyleOptions {
* Style of the keyboard.
*
* @since 1.0.0
* @default KeyboardStyle.Default
*/
style: KeyboardStyle;
}
Expand All @@ -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 {
Expand Down