javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(all): update to one (part 3) (#18874)

Browse Source
This commit is contained in:
Manu MA
2019-07-25 20:22:44 +02:00
committed by GitHub
parent 9b85e13493
commit e82648bda2
105 changed files with 1238 additions and 1377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
core/src/components/input/input.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, InputChangeEventDetail, StyleEventDetail, TextFieldTypes } from '../../interface';
@ -335,20 +335,8 @@ export class Input implements ComponentInterface {
return this.getValue().length > 0;
}
hostData() {
const mode = getIonMode(this);
return {
'aria-disabled': this.disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
[mode]: true,
'has-value': this.hasValue(),
'has-focus': this.hasFocus
}
};
}
render() {
const mode = getIonMode(this);
const value = this.getValue();
const labelId = this.inputId + '-lbl';
const label = findItemLabel(this.el);
@ -356,46 +344,56 @@ export class Input implements ComponentInterface {
label.id = labelId;
}
return [
<input
class="native-input"
ref={input => this.nativeInput = input}
aria-labelledby={labelId}
disabled={this.disabled}
accept={this.accept}
autoCapitalize={this.autocapitalize}
autoComplete={this.autocomplete}
autoCorrect={this.autocorrect}
autoFocus={this.autofocus}
inputMode={this.inputmode}
min={this.min}
max={this.max}
minLength={this.minlength}
maxLength={this.maxlength}
multiple={this.multiple}
name={this.name}
pattern={this.pattern}
placeholder={this.placeholder || ''}
readOnly={this.readonly}
required={this.required}
spellCheck={this.spellcheck}
step={this.step}
size={this.size}
type={this.type}
value={value}
onInput={this.onInput}
onBlur={this.onBlur}
onFocus={this.onFocus}
onKeyDown={this.onKeydown}
/>,
(this.clearInput && !this.readonly && !this.disabled) && <button
type="button"
class="input-clear-icon"
tabindex="-1"
onTouchStart={this.clearTextInput}
onMouseDown={this.clearTextInput}
/>
];
return (
<Host
aria-disabled={this.disabled ? 'true' : null}
class={{
...createColorClasses(this.color),
[mode]: true,
'has-value': this.hasValue(),
'has-focus': this.hasFocus
}}
>
<input
class="native-input"
ref={input => this.nativeInput = input}
aria-labelledby={labelId}
disabled={this.disabled}
accept={this.accept}
autoCapitalize={this.autocapitalize}
autoComplete={this.autocomplete}
autoCorrect={this.autocorrect}
autoFocus={this.autofocus}
inputMode={this.inputmode}
min={this.min}
max={this.max}
minLength={this.minlength}
maxLength={this.maxlength}
multiple={this.multiple}
name={this.name}
pattern={this.pattern}
placeholder={this.placeholder || ''}
readOnly={this.readonly}
required={this.required}
spellCheck={this.spellcheck}
step={this.step}
size={this.size}
type={this.type}
value={value}
onInput={this.onInput}
onBlur={this.onBlur}
onFocus={this.onFocus}
onKeyDown={this.onKeydown}
/>
{(this.clearInput && !this.readonly && !this.disabled) && <button
type="button"
class="input-clear-icon"
tabindex="-1"
onTouchStart={this.clearTextInput}
onMouseDown={this.clearTextInput}
/>}
</Host>
);
}
}