javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(searchbar): remove boolean values from showCancelButton (#18953)

Browse Source 
BREAKING CHANGES

The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`. The following should change:

```
<ion-searchbar show-cancel-button>
<ion-searchbar show-cancel-button="true">
<ion-searchbar show-cancel-button="false">
```

becomes

```
<ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="focus">
<ion-searchbar show-cancel-button="never">
```
This commit is contained in:
Brandy Carney
2019-09-30 11:17:32 -04:00
parent 97964a9e9f
commit 3cac855e1a
4 changed files with 9 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -946,7 +946,7 @@ ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search"
ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
ion-searchbar,prop,placeholder,string,'Search',false,false
ion-searchbar,prop,searchIcon,string,'search',false,false
ion-searchbar,prop,showCancelButton,boolean | string,'never',false,false
ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
ion-searchbar,prop,spellcheck,boolean,false,false,false
ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
ion-searchbar,prop,value,null | string | undefined,'',false,false

4
core/src/components.d.ts vendored
View File

@ -2188,7 +2188,7 @@ export namespace Components {
/**
* Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
*/
'showCancelButton': boolean | string;
'showCancelButton': 'never' | 'focus' | 'always';
/**
* If `true`, enable spellcheck on the input.
*/
@ -5429,7 +5429,7 @@ declare namespace LocalJSX {
/**
* Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
*/
'showCancelButton'?: boolean | string;
'showCancelButton'?: 'never' | 'focus' | 'always';
/**
* If `true`, enable spellcheck on the input.
*/

2
core/src/components/searchbar/readme.md
View File

@ -234,7 +234,7 @@ export const SearchbarExample: React.FC = () => (
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` |
| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |
| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `boolean \| string` | `'never'` |
| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` |
| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` |
| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` |
| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` |

48
core/src/components/searchbar/searchbar.tsx
View File

@ -111,7 +111,7 @@ export class Searchbar implements ComponentInterface {
* Setting to `"always"` shows the cancel button regardless
* of focus state.
*/
@Prop() showCancelButton: boolean | string = 'never';
@Prop() showCancelButton: 'never' | 'focus' | 'always' = 'never';
/**
* If `true`, enable spellcheck on the input.
@ -187,14 +187,6 @@ export class Searchbar implements ComponentInterface {
}
componentDidLoad() {
if (this.showCancelButton === 'false' || this.showCancelButton === false) {
console.warn('The boolean values of showCancelButton are deprecated. Please use "never" instead of "false".');
}
if (this.showCancelButton === '' || this.showCancelButton === 'true' || this.showCancelButton === true) {
console.warn('The boolean values of showCancelButton are deprecated. Please use "focus" instead of "true".');
}
this.positionElements();
this.debounceChanged();
@ -410,10 +402,9 @@ export class Searchbar implements ComponentInterface {
* 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
*/
private shouldShowCancelButton(): boolean {
if (
isCancelButtonSetToNever(this.showCancelButton) ||
(isCancelButtonSetToFocus(this.showCancelButton) && !this.focused)
) { return false; }
if ((this.showCancelButton === 'never') || (this.showCancelButton === 'focus' && !this.focused)) {
return false;
}
return true;
}
@ -424,7 +415,7 @@ export class Searchbar implements ComponentInterface {
const clearIcon = this.clearIcon || (mode === 'ios' ? 'ios-close-circle' : 'md-close');
const searchIcon = this.searchIcon;
const cancelButton = !isCancelButtonSetToNever(this.showCancelButton) && (
const cancelButton = (this.showCancelButton !== 'never') && (
<button
aria-label="cancel"
type="button"
@ -497,32 +488,3 @@ export class Searchbar implements ComponentInterface {
);
}
}
/**
* Check if the cancel button should never be shown.
*
* TODO: Remove this when the `true` and `false`
* options are removed.
*/
const isCancelButtonSetToNever = (showCancelButton: boolean | string): boolean => {
return (
showCancelButton === 'never' ||
showCancelButton === 'false' ||
showCancelButton === false
);
};
/**
* Check if the cancel button should be shown on focus.
*
* TODO: Remove this when the `true` and `false`
* options are removed.
*/
const isCancelButtonSetToFocus = (showCancelButton: boolean | string): boolean => {
return (
showCancelButton === 'focus' ||
showCancelButton === 'true' ||
showCancelButton === true ||
showCancelButton === ''
);
};