@git-temporal/git-temporal-react/lib/app/containers/Search.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 __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_redux_1 = require("react-redux");
const styles_1 = require("app/styles");
const actions_1 = require("app/actions");
const SearchInput_1 = require("app/components/SearchInput");
const Popup_1 = require("app/components/Popup");
const Selectable_1 = require("app/components/Selectable");
const debounce_1 = require("app/utilities/debounce");
const stateVars_1 = require("app/selectors/stateVars");
const styles = {
    container: {
        alignSelf: 'flex-end',
        marginBottom: '@margins.medium+px',
        overflow: 'visible',
        position: 'relative',
        width: 280,
    },
    searchInput: {
        borderRadius: 10,
        marginLeft: 10,
        marginTop: 0,
        width: 'calc(100% - 22px)',
    },
    searchInputPopupOpen: {
        borderBottomRightRadius: 0,
    },
    popup: {
        border: 'solid 2px @colors.selectable',
        borderRightWidth: '1px',
        borderTop: 'none',
        marginRight: 0,
        marginTop: '-2px',
    },
};
const suggestedSearchPrefixes = ['author:', 'commit:', 'file:'];
exports.Search = () => {
    const [searchHasFocus, setSearchHasFocus] = react_1.useState(false);
    const [selectedSuggestion, setSelectedSuggestion] = react_1.useState('all');
    const search = react_redux_1.useSelector(stateVars_1.getSearch);
    const dispatch = react_redux_1.useDispatch();
    const debouncedOnBlur = debounce_1.debounce(onSearchBlur, 200);
    const isPopupOpen = searchHasFocus && search && search.trim().length > 0;
    const searchInputStyle = isPopupOpen
        ? [styles.searchInput, styles.searchInputPopupOpen]
        : styles.searchInput;
    return (react_1.default.createElement("div", { style: styles_1.style(styles.container) },
        react_1.default.createElement(SearchInput_1.SearchInput, { value: search, onChange: onSearch, onClear: onClear, onFocus: onSearchFocus, onBlur: debouncedOnBlur, onKeyDown: onKeyboard, style: styles_1.style(searchInputStyle), placeholder: "search authors, files or commits" }),
        react_1.default.createElement(Popup_1.Popup, { isOpen: isPopupOpen, style: styles_1.style(styles.popup), noBackdrop: true }, renderPopupSuggestions())));
    function renderPopupSuggestions() {
        const unPrefixedSearch = getUnprefixedSearch();
        const menuItems = [
            react_1.default.createElement(Selectable_1.Selectable, { value: "all", key: "searchSuggestion_all", onClick: onSuggestClick, selected: selectedSuggestion === 'all' },
                react_1.default.createElement("div", null,
                    "Search everywhere for '",
                    unPrefixedSearch,
                    "'")),
        ];
        return menuItems.concat(suggestedSearchPrefixes.map((prefix, index) => {
            return (react_1.default.createElement(Selectable_1.Selectable, { key: `searchSuggestion_${index}`, value: prefix, onClick: onSuggestClick, selected: selectedSuggestion === prefix },
                react_1.default.createElement("div", { style: styles_1.style('normalText') },
                    prefix,
                    " ",
                    unPrefixedSearch)));
        }));
    }
    function onSearch(value) {
        dispatch(actions_1.setSearch(value || ''));
    }
    function onClear() {
        dispatch(actions_1.setSearch(''));
    }
    function onSearchFocus() {
        setSearchHasFocus(true);
    }
    function onSearchBlur() {
        setSearchHasFocus(false);
    }
    function onSuggestClick(_evt, value) {
        selectSuggestion(value);
    }
    function selectSuggestion(value) {
        const newSearch = value === 'all'
            ? getUnprefixedSearch()
            : `${value}${getUnprefixedSearch()}`;
        dispatch(actions_1.setSearch(newSearch));
        setSelectedSuggestion(value);
    }
    function onKeyboard(evt) {
        const currentPrefixIndex = selectedSuggestion === 'all'
            ? -1
            : suggestedSearchPrefixes.indexOf(selectedSuggestion);
        if (evt.key === 'ArrowDown') {
            evt.preventDefault();
            const newSelection = currentPrefixIndex < suggestedSearchPrefixes.length - 1
                ? suggestedSearchPrefixes[currentPrefixIndex + 1]
                : 'all';
            setSelectedSuggestion(newSelection);
        }
        else if (evt.key === 'ArrowUp') {
            evt.preventDefault();
            const newSelection = currentPrefixIndex === 0
                ? 'all'
                : currentPrefixIndex > 0
                    ? suggestedSearchPrefixes[currentPrefixIndex - 1]
                    : suggestedSearchPrefixes[suggestedSearchPrefixes.length - 1];
            setSelectedSuggestion(newSelection);
        }
        else if (evt.key === 'Enter') {
            selectSuggestion(selectedSuggestion);
            return;
        }
    }
    function getUnprefixedSearch() {
        const matches = search && search.match(/^[^\:]*\:(.*)/);
        if (!matches || matches.length < 2) {
            return search;
        }
        return matches[1];
    }
};