preact-material-design
Version:
A set of material components for Preact.
69 lines • 2.8 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { h, Component } from 'preact';
var TextField = (function (_super) {
__extends(TextField, _super);
function TextField() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
hasFocus: false,
value: '',
};
_this.onFocus = function () {
_this.setState({ hasFocus: true });
};
_this.onBlur = function () {
_this.setState({ hasFocus: false });
};
_this.onInput = function (evt) {
_this.setState({ value: evt.target.value });
_this.props.onInput(evt);
};
return _this;
}
TextField.prototype.componentDidMount = function () {
this.setState({ value: this.props.value });
};
TextField.prototype.componentWillReceiveProps = function (props) {
if (props !== this.state.value) {
this.setState({ value: props.value });
}
};
TextField.prototype.render = function () {
var _a = this.props, children = _a.children, type = _a.type, label = _a.label, disabled = _a.disabled;
var _b = this.state, hasFocus = _b.hasFocus, value = _b.value;
var textfieldClasses = ['pmd-textfield'];
var labelClasses = ['pmd-textfield__label'];
if (hasFocus || !!value) {
labelClasses.push('pmd-textfield__label--floating');
if (hasFocus) {
textfieldClasses.push('pmd-textfield--focused');
}
}
if (disabled) {
textfieldClasses.push('pmd-textfield--disabled');
}
return (h("label", { class: textfieldClasses.join(' ') },
h("span", { class: labelClasses.join(' ') }, label),
h("input", { class: "pmd-textfield__input", type: type, value: value, name: this.props.name, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }),
h("span", { class: "pmd-textfield__underline" })));
};
return TextField;
}(Component));
export { TextField };
TextField.defaultProps = {
type: 'text',
label: null,
disabled: false,
value: '',
onInput: function () { return undefined; },
};
//# sourceMappingURL=TextField.js.map