office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
164 lines • 7.05 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, getId, classNamesFunction, createRef } from '../../Utilities';
import { IconButton } from '../../Button';
import { Icon } from '../../Icon';
var getClassNames = classNamesFunction();
var SearchBoxBase = /** @class */ (function (_super) {
tslib_1.__extends(SearchBoxBase, _super);
function SearchBoxBase(props) {
var _this = _super.call(this, props) || this;
_this._rootElement = createRef();
_this._inputElement = createRef();
_this._onClickFocus = function () {
var inputElement = _this._inputElement.value;
if (inputElement) {
_this.focus();
inputElement.selectionStart = inputElement.selectionEnd = 0;
}
};
_this._onFocusCapture = function (ev) {
_this.setState({
hasFocus: true
});
_this._events.on(_this._rootElement.current, 'blur', _this._onBlur, true);
if (_this.props.onFocus) {
_this.props.onFocus(ev);
}
};
_this._onClearClick = function (ev) {
var clearButtonProps = _this.props.clearButtonProps;
if (clearButtonProps && clearButtonProps.onClick) {
clearButtonProps.onClick(ev);
}
if (!ev.defaultPrevented) {
_this._onClear(ev);
}
};
_this._onKeyDown = function (ev) {
switch (ev.which) {
case 27 /* escape */:
_this.props.onEscape && _this.props.onEscape(ev);
if (!ev.defaultPrevented) {
_this._onClear(ev);
}
break;
case 13 /* enter */:
if (_this.props.onSearch) {
_this.props.onSearch(_this.state.value);
}
break;
default:
_this.props.onKeyDown && _this.props.onKeyDown(ev);
if (!ev.defaultPrevented) {
return;
}
}
// We only get here if the keypress has been handled,
// or preventDefault was called in case of default keyDown handler
ev.preventDefault();
ev.stopPropagation();
};
_this._onBlur = function (ev) {
_this._events.off(_this._rootElement.current, 'blur');
_this.setState({
hasFocus: false
});
if (_this.props.onBlur) {
_this.props.onBlur(ev);
}
};
_this._onInputChange = function (ev) {
var value = ev.target.value;
if (value === _this._latestValue) {
return;
}
_this._latestValue = value;
_this.setState({ value: value });
_this._callOnChange(value);
};
_this._warnDeprecations({
labelText: 'placeholder',
defaultValue: 'value'
});
_this._latestValue = props.value || '';
_this.state = {
value: _this._latestValue,
hasFocus: false,
id: getId('SearchBox')
};
return _this;
}
SearchBoxBase.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.value !== undefined) {
this._latestValue = newProps.value;
this.setState({
value: newProps.value
});
}
};
SearchBoxBase.prototype.render = function () {
var _a = this.props, ariaLabel = _a.ariaLabel, placeholder = _a.placeholder, className = _a.className, disabled = _a.disabled, underlined = _a.underlined, styles = _a.styles, labelText = _a.labelText, theme = _a.theme, clearButtonProps = _a.clearButtonProps, disableAnimation = _a.disableAnimation, iconProps = _a.iconProps;
var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
var placeholderValue = labelText === undefined ? placeholder : labelText;
var classNames = getClassNames(styles, {
theme: theme,
className: className,
underlined: underlined,
hasFocus: hasFocus,
disabled: disabled,
hasInput: value.length > 0,
disableAnimation: disableAnimation
});
return (React.createElement("div", { ref: this._rootElement, className: classNames.root, onFocusCapture: this._onFocusCapture },
React.createElement("div", { className: classNames.iconContainer, onClick: this._onClickFocus, "aria-hidden": true },
React.createElement(Icon, tslib_1.__assign({ iconName: "Search" }, iconProps, { className: classNames.icon }))),
React.createElement("input", { id: id, className: classNames.field, placeholder: placeholderValue, onChange: this._onInputChange, onInput: this._onInputChange, onKeyDown: this._onKeyDown, value: value, disabled: this.props.disabled, "aria-label": ariaLabel ? ariaLabel : placeholder, ref: this._inputElement }),
value.length > 0 && (React.createElement("div", { className: classNames.clearButton },
React.createElement(IconButton, tslib_1.__assign({ styles: { root: { height: 'auto' }, icon: { fontSize: '12px' } }, iconProps: { iconName: 'Clear' } }, clearButtonProps, { onClick: this._onClearClick }))))));
};
/**
* Sets focus to the search box input field
*/
SearchBoxBase.prototype.focus = function () {
if (this._inputElement.current) {
this._inputElement.current.focus();
}
};
/**
* Returns whether or not the SearchBox has focus
*/
SearchBoxBase.prototype.hasFocus = function () {
return !!this.state.hasFocus;
};
SearchBoxBase.prototype._onClear = function (ev) {
this.props.onClear && this.props.onClear(ev);
if (!ev.defaultPrevented) {
this._latestValue = '';
this.setState({
value: ''
});
this._callOnChange('');
ev.stopPropagation();
ev.preventDefault();
this.focus();
}
};
SearchBoxBase.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);
}
};
SearchBoxBase.defaultProps = {
disableAnimation: false,
clearButtonProps: { ariaLabel: 'Clear text' }
};
return SearchBoxBase;
}(BaseComponent));
export { SearchBoxBase };
//# sourceMappingURL=SearchBox.base.js.map