From 4b71e4415d60e7b249d9bf92dd267ddc3cf48ab3 Mon Sep 17 00:00:00 2001 From: Flavien VACCARETTI Date: Wed, 3 Apr 2019 01:19:00 +0200 Subject: [PATCH 01/12] feat(searchbar): add disabled attribute --- angular/src/directives/proxies.ts | 4 +-- core/api.txt | 1 + core/src/components.d.ts | 8 +++++ core/src/components/searchbar/readme.md | 13 +++++++ core/src/components/searchbar/searchbar.scss | 4 +++ core/src/components/searchbar/searchbar.tsx | 36 +++++++++++++++++-- .../searchbar/test/basic/index.html | 16 +++++++++ .../src/components/searchbar/usage/angular.md | 3 ++ .../components/searchbar/usage/javascript.md | 3 ++ core/src/components/searchbar/usage/react.md | 3 ++ core/src/components/searchbar/usage/vue.md | 3 ++ 11 files changed, 90 insertions(+), 4 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 9acc693024a..85140642e2b 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -675,7 +675,7 @@ export class IonRow { } export declare interface IonSearchbar extends StencilComponents<'IonSearchbar'> {} -@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] }) +@Component({ selector: 'ion-searchbar', changeDetection: 0, template: '', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'disabled', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] }) export class IonSearchbar { ionInput!: EventEmitter; ionChange!: EventEmitter; @@ -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: '', inputs: ['color', 'mode', 'disabled', 'scrollable', 'value'] }) diff --git a/core/api.txt b/core/api.txt index 55781e92043..71d2d835f80 100644 --- a/core/api.txt +++ b/core/api.txt @@ -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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index db0d7904c1c..d2142c801ca 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3719,6 +3719,10 @@ export namespace Components { */ 'debounce': number; /** + * If `true`, the user cannot interact with the input. + */ + 'disabled': boolean; + /** * Returns the native `` element used under the hood. */ 'getInputElement': () => Promise; @@ -3789,6 +3793,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; diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md index 6a9c167ed13..d59a3411aa2 100644 --- a/core/src/components/searchbar/readme.md +++ b/core/src/components/searchbar/readme.md @@ -26,6 +26,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i + + + @@ -60,6 +63,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i + + + @@ -100,6 +106,9 @@ const Example: React.SFC<{}> = () => ( {/*-- Searchbar with telephone type --*/} + {/*-- Searchbar disabled --*/} + + {/*-- Searchbar with a cancel button and custom cancel button text --*/} @@ -139,6 +148,9 @@ export default Example; + + + @@ -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'` | diff --git a/core/src/components/searchbar/searchbar.scss b/core/src/components/searchbar/searchbar.scss index c6ae9ee4d95..3e35f51a2dc 100644 --- a/core/src/components/searchbar/searchbar.scss +++ b/core/src/components/searchbar/searchbar.scss @@ -143,3 +143,7 @@ :host(.searchbar-has-value.searchbar-has-focus) .searchbar-clear-button { display: block; } + +.searchbar-input[disabled] { + opacity: .4; +} diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index f8407f6f0e2..dd8aee0e767 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -1,6 +1,6 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; -import { Color, Config, Mode, SearchbarChangeEventDetail } from '../../interface'; +import { Color, Config, Mode, SearchbarChangeEventDetail, StyleEventDetail } from '../../interface'; import { debounceEvent } from '../../utils/helpers'; import { createColorClasses } from '../../utils/theme'; @@ -78,6 +78,16 @@ export class Searchbar implements ComponentInterface { this.ionChange = debounceEvent(this.ionChange, this.debounce); } + /** + * If `true`, the user cannot interact with the input. + */ + @Prop() disabled = false; + + @Watch('disabled') + protected disabledChanged() { + this.emitStyle(); + } + /** * Set the input's placeholder. */ @@ -148,6 +158,12 @@ export class Searchbar implements ComponentInterface { this.ionChange.emit({ value }); } + /** + * Emitted when the styles change. + * @internal + */ + @Event() ionStyle!: EventEmitter; + componentDidLoad() { this.positionElements(); this.debounceChanged(); @@ -346,15 +362,30 @@ export class Searchbar implements ComponentInterface { return this.value || ''; } + private hasValue(): boolean { + return this.getValue() !== ''; + } + + private emitStyle() { + this.ionStyle.emit({ + 'interactive': true, + 'input': true, + 'searchbar-has-value': this.hasValue(), + 'searchbar-has-focus': this.focused, + 'interactive-disabled': this.disabled + }); + } + hostData() { const animated = this.animated && this.config.getBoolean('animated', true); return { + 'searchbar-disabled': this.disabled ? 'true' : null, class: { ...createColorClasses(this.color), 'searchbar-animated': animated, '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 } @@ -385,6 +416,7 @@ export class Searchbar implements ComponentInterface { return [
this.nativeInput = el} class="searchbar-input" onInput={this.onInput} diff --git a/core/src/components/searchbar/test/basic/index.html b/core/src/components/searchbar/test/basic/index.html index 49cc0501f2a..12e54d9be60 100644 --- a/core/src/components/searchbar/test/basic/index.html +++ b/core/src/components/searchbar/test/basic/index.html @@ -29,6 +29,10 @@
Search - No Cancel Button
+
Search - Disabled
+ + +
Search - Danger
@@ -82,6 +86,10 @@
Search - Animated and No Cancel
Toggle Attribute
+
+ Toggle disabled +
+