@git-temporal/git-temporal-react/lib/app/components/SearchInput.js

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("app/styles");
const debounce_1 = require("app/utilities/debounce");
const SearchIcon_1 = require("app/components/SearchIcon");
const containerStyle = {
    _extends: ['flexRow', 'borderedPanel', 'normalText', 'selectable'],
    position: 'relative',
    padding: 5,
};
const searchInputStyle = {
    flexGrow: 1,
    border: 'none',
    fontSize: 14,
    margin: '0px 5px',
    color: '@colors.inputForeground',
    backgroundColor: '@colors.inputBackground',
};
const clearIconStyle = {
    _extends: ['smallerText'],
    paddingTop: 3,
    flexGrow: 0,
    cursor: 'pointer',
};
const searchIconStyle = {
    marginTop: 2,
    fill: '@colors.text',
};
class SearchInput extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.onInputChange = evt => {
            const newValue = evt.target.value;
            this.setState({ value: newValue });
            this.debouncedCallChangeCallback(newValue);
        };
        this.callChangeCallback = value => {
            this.props.onChange(value);
        };
        this.debouncedCallChangeCallback = debounce_1.debounce(this.callChangeCallback, 750);
    }
    componentDidMount() {
        this.inputRef && this.inputRef.focus();
        if (this.props.value !== this.state.value) {
            this.setState({ value: this.props.value });
        }
    }
    componentDidUpdate(prevProps) {
        if (prevProps.value !== this.props.value &&
            this.props.value !== this.state.value) {
            this.setState({ value: this.props.value });
        }
    }
    render() {
        const { onClear, onFocus, onBlur, onKeyDown, placeholder } = this.props;
        return (react_1.default.createElement("div", { style: styles_1.style(containerStyle, this.props.style) },
            react_1.default.createElement(SearchIcon_1.SearchIcon, { height: 16, width: 16, style: styles_1.style(searchIconStyle) }),
            react_1.default.createElement("input", { type: "text", style: styles_1.style(searchInputStyle), value: this.state.value || '', placeholder: placeholder, onChange: this.onInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, ref: input => {
                    this.inputRef = input;
                } }),
            react_1.default.createElement("div", { style: styles_1.style(clearIconStyle), onClick: onClear }, "X")));
    }
}
SearchInput.displayName = 'SearchInput';
exports.SearchInput = SearchInput;