office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
88 lines (86 loc) • 3.39 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var css_1 = require('../../utilities/css');
var object_1 = require('../../utilities/object');
require('./SearchBox.scss');
var SearchBox = (function (_super) {
__extends(SearchBox, _super);
function SearchBox(props) {
_super.call(this, props);
// Handle deprecated prop
if (this.props.onChanged) {
this.props.onChange = this.props.onChanged;
}
this.state = {
value: props.value,
hasFocus: false,
id: object_1.getId('SearchBox')
};
this._clearInput = this._clearInput.bind(this);
this._onInputChange = this._onInputChange.bind(this);
this._onInputFocus = this._onInputFocus.bind(this);
this._onInputBlur = this._onInputBlur.bind(this);
}
SearchBox.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== undefined) {
this.setState({
value: newProps.value
});
}
};
SearchBox.prototype.render = function () {
var _a = this.props, labelText = _a.labelText, className = _a.className;
var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
return (React.createElement("div", {className: css_1.css('ms-SearchBox', className, {
'is-active': hasFocus
})},
!hasFocus && !value ? React.createElement("label", {className: 'ms-SearchBox-label', htmlFor: id},
React.createElement("i", {className: 'ms-SearchBox-icon ms-Icon ms-Icon--Search'}),
React.createElement("span", {className: 'ms-SearchBox-text'}, labelText)) : null,
React.createElement("input", {id: id, className: 'ms-SearchBox-field', onFocus: this._onInputFocus, onBlur: this._onInputBlur, onChange: this._onInputChange, value: value, ref: 'inputText'}),
React.createElement("button", {className: 'ms-SearchBox-closeButton', onMouseDown: this._clearInput},
React.createElement("i", {className: 'ms-Icon ms-Icon--Clear'})
)));
};
SearchBox.prototype._clearInput = function (ev) {
this.setState({
value: ''
});
this._onChange('');
ev.stopPropagation();
ev.preventDefault();
};
SearchBox.prototype._onInputFocus = function () {
this.setState({
hasFocus: true
});
};
SearchBox.prototype._onInputBlur = function () {
this.setState({
hasFocus: false
});
};
SearchBox.prototype._onInputChange = function (ev) {
this.setState({
value: this.refs.inputText.value
});
this._onChange(this.refs.inputText.value);
};
SearchBox.prototype._onChange = function (newValue) {
var onChange = this.props.onChange;
if (onChange) {
onChange(newValue);
}
};
SearchBox.defaultProps = {
labelText: 'Search',
};
return SearchBox;
}(React.Component));
exports.SearchBox = SearchBox;
//# sourceMappingURL=SearchBox.js.map