javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-02-04 05:07:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(searchbar): add disabled property (#17935)

Browse Source 
closes #17921
This commit is contained in:
KyDenZ
2019-04-22 17:37:58 +02:00
committed by Brandy Carney
parent c178236e32
commit a5b9066fee
11 changed files with 71 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@@ -675,7 +675,7 @@ export class IonRow {
}
export declare interface IonSearchbar extends StencilComponents<'IonSearchbar'> {}
@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
export class IonSearchbar {
ionInput!: EventEmitter<CustomEvent>;
ionChange!: EventEmitter<CustomEvent>;
@@ -691,7 +691,7 @@ export class IonSearchbar {
}
}
proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
proxyInputs(IonSearchbar, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
export declare interface IonSegment extends StencilComponents<'IonSegment'> {}
@Component({ selector: 'ion-segment', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'scrollable', 'value'] })

1
core/api.txt
View File

@@ -885,6 +885,7 @@ ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
ion-searchbar,prop,color,string | undefined,undefined,false,false
ion-searchbar,prop,debounce,number,250,false,false
ion-searchbar,prop,disabled,boolean,false,false,false
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

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

@@ -3720,6 +3720,10 @@ export namespace Components {
*/
'debounce': number;
/**
* If `true`, the user cannot interact with the input.
*/
'disabled': boolean;
/**
* Returns the native `<input>` element used under the hood.
*/
'getInputElement': () => Promise<HTMLInputElement>;
@@ -3790,6 +3794,10 @@ export namespace Components {
*/
'debounce'?: number;
/**
* If `true`, the user cannot interact with the input.
*/
'disabled'?: boolean;
/**
* The mode determines which platform styles to use.
*/
'mode'?: Mode;

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

@@ -26,6 +26,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
@@ -60,6 +63,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
@@ -100,6 +106,9 @@ const Example: React.SFC<{}> = () => (
{/*-- Searchbar with telephone type --*/}
<IonSearchbar type="tel"></IonSearchbar>
{/*-- Searchbar disabled --*/}
<IonSearchbar disabled="true"></IonSearchbar>
{/*-- Searchbar with a cancel button and custom cancel button text --*/}
<IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>
@@ -139,6 +148,9 @@ export default Example;
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
@@ -172,6 +184,7 @@ export default Example;
| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`. | `string \| undefined` | `undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. | `number` | `250` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `placeholder` | `placeholder` | Set the input's placeholder. | `string` | `'Search'` |
| `searchIcon` | `search-icon` | The icon to use as the search icon. | `string` | `'search'` |

6
core/src/components/searchbar/searchbar.scss
View File

@@ -143,3 +143,9 @@
:host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button {
display: block;
}
:host(.searchbar-disabled) {
cursor: default;
opacity: .4;
pointer-events: none;
}

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

@@ -78,6 +78,11 @@ export class Searchbar implements ComponentInterface {
this.ionChange = debounceEvent(this.ionChange, this.debounce);
}
/**
* If `true`, the user cannot interact with the input.
*/
@Prop() disabled = false;
/**
* Set the input's placeholder.
*/
@@ -346,16 +351,22 @@ export class Searchbar implements ComponentInterface {
return this.value || '';
}
private hasValue(): boolean {
return this.getValue() !== '';
}
hostData() {
const animated = this.animated && this.config.getBoolean('animated', true);
return {
'aria-disabled': this.disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
'searchbar-animated': animated,
'searchbar-disabled': this.disabled,
'searchbar-no-animate': animated && this.noAnimate,
'searchbar-has-value': (this.getValue() !== ''),
'searchbar-has-value': this.hasValue(),
'searchbar-left-aligned': this.shouldAlignLeft,
'searchbar-has-focus': this.focused
}
@@ -386,6 +397,7 @@ export class Searchbar implements ComponentInterface {
return [
<div class="searchbar-input-container">
<input
disabled={this.disabled}
ref={el => this.nativeInput = el}
class="searchbar-input"
onInput={this.onInput}

16
core/src/components/searchbar/test/basic/index.html
View File

@@ -29,6 +29,10 @@
<ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="false">
</ion-searchbar>
<h5 padding-start padding-top> Search - Disabled </h5>
<ion-searchbar id="disabled" value="disabled" type="text" disabled="true">
</ion-searchbar>
<h5 padding-start padding-top> Search - Danger </h5>
<ion-searchbar color="danger" show-cancel-button>
</ion-searchbar>
@@ -82,6 +86,10 @@
<ion-button expand="block" color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
</div>
<div padding-horizontal>
<ion-button expand="block" color="secondary" onClick="toggleDisabled()">Toggle disabled</ion-button>
</div>
<script>
function toggleAttr() {
var dynamicAttr = document.getElementById('dynamicAttr');
@@ -99,6 +107,14 @@
dynamicAttr.setAttribute('placeholder', attrPlaceholder);
}
function toggleDisabled() {
var dynamicAttr = document.getElementById('dynamicAttr');
// Toggle animated attribute
const attrIsAnimated = dynamicAttr.getAttribute('disabled') === 'true' ? false : true;
dynamicAttr.setAttribute('disabled', attrIsAnimated);
}
function toggleProp() {
var dynamicProp = document.getElementById('dynamicProp');
console.log(dynamicProp.autocorrect, dynamicProp.autocomplete, dynamicProp.spellcheck);

3
core/src/components/searchbar/usage/angular.md
View File

@@ -11,6 +11,9 @@
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>

3
core/src/components/searchbar/usage/javascript.md
View File

@@ -11,6 +11,9 @@
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>

3
core/src/components/searchbar/usage/react.md
View File

@@ -17,6 +17,9 @@ const Example: React.SFC<{}> = () => (
{/*-- Searchbar with telephone type --*/}
<IonSearchbar type="tel"></IonSearchbar>
{/*-- Searchbar disabled --*/}
<IonSearchbar disabled="true"></IonSearchbar>
{/*-- Searchbar with a cancel button and custom cancel button text --*/}
<IonSearchbar showCancelButton cancelButtonText="Custom Cancel"></IonSearchbar>

3
core/src/components/searchbar/usage/vue.md
View File

@@ -12,6 +12,9 @@
<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>
<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>
<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>