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

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Icon_1 = require("../../Icon");
var stylesImport = require("./SearchBox.scss");
var styles = stylesImport;
var SearchBox = (function (_super) {
    tslib_1.__extends(SearchBox, _super);
    function SearchBox(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            value: props.value || '',
            hasFocus: false,
            id: Utilities_1.getId('SearchBox')
        };
        return _this;
    }
    SearchBox.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.value !== undefined) {
            this._latestValue = newProps.value;
            this.setState({
                value: newProps.value
            });
        }
    };
    SearchBox.prototype.render = function () {
        var _a = this.props, labelText = _a.labelText, className = _a.className, disabled = _a.disabled;
        var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
        return (React.createElement("div", tslib_1.__assign({ ref: this._resolveRef('_rootElement'), className: Utilities_1.css('ms-SearchBox', className, styles.root, (_c = {},
                _c['is-active ' + styles.rootIsActive] = hasFocus,
                _c['is-disabled ' + styles.rootIsDisabled] = disabled,
                _c['can-clear ' + styles.rootCanClear] = value.length > 0,
                _c)) }, { onFocusCapture: this._onFocusCapture }),
            React.createElement("div", { className: Utilities_1.css('ms-SearchBox-iconContainer', styles.iconContainer) },
                React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-SearchBox-icon', styles.icon), iconName: 'Search' })),
            React.createElement("input", { id: id, className: Utilities_1.css('ms-SearchBox-field', styles.field), placeholder: labelText, onChange: this._onInputChange, onInput: this._onInputChange, onKeyDown: this._onKeyDown, value: value, disabled: this.props.disabled, "aria-label": this.props.ariaLabel ? this.props.ariaLabel : this.props.labelText, ref: this._resolveRef('_inputElement') }),
            React.createElement("div", { className: Utilities_1.css('ms-SearchBox-clearButton', styles.clearButton), onClick: this._onClearClick },
                React.createElement(Icon_1.Icon, { iconName: 'Clear' }))));
        var _c;
    };
    /**
     * Sets focus to the search box input field
     */
    SearchBox.prototype.focus = function () {
        if (this._inputElement) {
            this._inputElement.focus();
        }
    };
    SearchBox.prototype._onClearClick = function (ev) {
        this._latestValue = '';
        this.setState({
            value: ''
        });
        this._callOnChange('');
        ev.stopPropagation();
        ev.preventDefault();
        this._inputElement.focus();
    };
    SearchBox.prototype._onFocusCapture = function (ev) {
        this.setState({
            hasFocus: true
        });
        this._events.on(this._rootElement, 'blur', this._onBlur, true);
        if (this.props.onFocus) {
            this.props.onFocus(ev);
        }
    };
    SearchBox.prototype._onKeyDown = function (ev) {
        switch (ev.which) {
            case 27 /* escape */:
                this._onClearClick(ev);
                break;
            case 13 /* enter */:
                if (this.props.onSearch && this.state.value.length > 0) {
                    this.props.onSearch(this.state.value);
                }
                break;
            default:
                return;
        }
        // We only get here if the keypress has been handled.
        ev.preventDefault();
        ev.stopPropagation();
    };
    SearchBox.prototype._onBlur = function (ev) {
        this._events.off(this._rootElement, 'blur');
        this.setState({
            hasFocus: false
        });
        if (this.props.onBlur) {
            this.props.onBlur(ev);
        }
    };
    SearchBox.prototype._onInputChange = function (ev) {
        var value = this._inputElement.value;
        if (value === this._latestValue) {
            return;
        }
        this._latestValue = value;
        this.setState({ value: value });
        this._callOnChange(value);
    };
    SearchBox.prototype._callOnChange = function (newValue) {
        var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged;
        // Call @deprecated method.
        if (onChanged) {
            onChanged(newValue);
        }
        if (onChange) {
            onChange(newValue);
        }
    };
    SearchBox.defaultProps = {
        labelText: 'Search',
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SearchBox.prototype, "_onClearClick", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SearchBox.prototype, "_onFocusCapture", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SearchBox.prototype, "_onKeyDown", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SearchBox.prototype, "_onBlur", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SearchBox.prototype, "_onInputChange", null);
    return SearchBox;
}(Utilities_1.BaseComponent));
exports.SearchBox = SearchBox;
//# sourceMappingURL=SearchBox.js.map