office-ui-fabric-react/lib/components/SearchBox/SearchBox.js

Reusable React components for building experiences for Office 365.

"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);
        this.state = {
            value: props.value,
            hasFocus: false,
            id: object_1.getId('SearchBox')
        };
        this._clearInput = this._clearInput.bind(this);
        this._onInputChanged = this._onInputChanged.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'}), labelText) : null, React.createElement("input", {id: id, className: 'ms-SearchBox-field', onFocus: this._onInputFocus, onBlur: this._onInputBlur, onChange: this._onInputChanged, value: value, ref: 'inputText'}), React.createElement("button", {className: 'ms-SearchBox-closeButton', onMouseDown: this._clearInput}, React.createElement("i", {className: 'ms-Icon ms-Icon--x'}))));
    };
    SearchBox.prototype._clearInput = function (ev) {
        this.setState({
            value: undefined
        });
        ev.stopPropagation();
        ev.preventDefault();
    };
    SearchBox.prototype._onInputFocus = function () {
        this.setState({
            hasFocus: true
        });
    };
    SearchBox.prototype._onInputBlur = function () {
        this.setState({
            hasFocus: false
        });
    };
    SearchBox.prototype._onInputChanged = function (ev) {
        this.setState({
            value: this.refs.inputText.value
        });
        this._onChanged(this.refs.inputText.value);
    };
    SearchBox.prototype._onChanged = function (newValue) {
        var onChanged = this.props.onChanged;
        if (onChanged) {
            onChanged(newValue);
        }
    };
    SearchBox.defaultProps = {
        labelText: 'Search',
    };
    return SearchBox;
}(React.Component));
exports.SearchBox = SearchBox;

//# sourceMappingURL=SearchBox.js.map