1816

pending completion

Build # 1816

Build Type

Pull #1402

travis-ci

Committed by

web-flow

Commit Message

<a href="https://github.com/Redocly/redoc/commit/<a class=hub.com/Redocly/redoc/commit/<a class="double-link" href="https://git"><a class=hub.com/Redocly/redoc/commit/<a class="double-link" href="https://git"><a class=hub.com/Redocly/redoc/commit/<a class="double-link" href="https://git"><a class=hub.com/Redocly/redoc/commit/4370a617f357163c98d2273319205afe3618b5a7">4370a617f">&lt;a href=&quot;https://github.com/Redocly/redoc/commit/</a><a class="double-link" href="https://github.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/Redocly/redoc/commit/4370a617f357163c98d2273319205afe3618b5a7">4370a617f</a><a href="https://github.com/Redocly/redoc/commit/4370a617f357163c98d2273319205afe3618b5a7">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/Redocly/redoc/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/Redocly/redoc/commit/4370a617f357163c98d2273319205afe3618b5a7&quot;&gt;4370a617f&lt;/a&gt;&lt;a href=&quot;https://github.com/Redocly/redoc/commit/4370a617f357163c98d2273319205afe3618b5a7&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/Redocly/redoc/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/Redocly/redoc/commit/&amp;amp;lt;a class=&amp;amp;quot;double-link&amp;amp;quot; href=&amp;amp;quot;htt... (continued)

Pull Request Pull Request #1402: Implement configurable minimum characer length to init search

Run Details

1585 of 2336 branches covered (67.85%)

Branch coverage included in aggregate %.

9 of 9 new or added lines in 2 files covered. (100.0%)

3209 of 3974 relevant lines covered (80.75%)

126.82 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

35.53

/src/components/SearchBox/SearchBox.tsx

import * as React from 'react';

import { IMenuItem } from '../../services/MenuStore';
import { SearchStore } from '../../services/SearchStore';
import { MenuItem } from '../SideMenu/MenuItem';

import { MarkerService } from '../../services/MarkerService';
import { SearchResult } from '../../services/SearchWorker.worker';

import { OptionsContext } from '../OptionsProvider';
import { RedocRawOptions } from '../../services/RedocNormalizedOptions';

import { bind, debounce } from 'decko';
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
import {
  ClearIcon,
  SearchIcon,
  SearchInput,
  SearchResultsBox,
  SearchWrap,
} from './styled.elements';

export interface SearchBoxProps {
  search: SearchStore<string>;
  marker: MarkerService;
  getItemById: (id: string) => IMenuItem | undefined;
  onActivate: (item: IMenuItem) => void;

  className?: string;
}

export interface SearchBoxState {
  results: SearchResult[];
  term: string;
  activeItemIdx: number;
}

export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxState> {
  activeItemRef: MenuItem | null = null;

  static contextType = OptionsContext;

  constructor(props) {
    super(props);
    this.state = {
      results: [],
      term: '',
      activeItemIdx: -1,
    };
  }

  clearResults(term: string) {
    this.setState({
      results: [],
      term,
    });
    this.props.marker.unmark();
  }

  clear = () => {
    this.setState({
      results: [],
      term: '',
      activeItemIdx: -1,
    });
    this.props.marker.unmark();
  };

  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.keyCode === 27) {
      // ESQ
      this.clear();
    }
    if (event.keyCode === 40) {
      // Arrow down
      this.setState({
        activeItemIdx: Math.min(this.state.activeItemIdx + 1, this.state.results.length - 1),
      });
      event.preventDefault();
    }
    if (event.keyCode === 38) {
      // Arrow up
      this.setState({
        activeItemIdx: Math.max(0, this.state.activeItemIdx - 1),
      });
      event.preventDefault();
    }
    if (event.keyCode === 13) {
      // enter
      const activeResult = this.state.results[this.state.activeItemIdx];
      if (activeResult) {
        const item = this.props.getItemById(activeResult.meta);
        if (item) {
          this.props.onActivate(item);
        }
      }
    }
  };

  setResults(results: SearchResult[], term: string) {
    this.setState({
      results,
    });
    this.props.marker.mark(term);
  }

  @bind
  @debounce(400)
  searchCallback(searchTerm: string) {
    this.props.search.search(searchTerm).then((res) => {
      this.setResults(res, searchTerm);
    });
  }

  search = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { minCharacterLengthToInitSearch = 3 } = this.context as RedocRawOptions;
    const q = event.target.value;
    if (q.length < minCharacterLengthToInitSearch) {
      this.clearResults(q);
      return;
    }

    this.setState(
      {
        term: q,
      },
      () => this.searchCallback(this.state.term),
    );
  };

  render() {
    const { activeItemIdx } = this.state;
    const results = this.state.results.map((res) => ({
      item: this.props.getItemById(res.meta)!,
      score: res.score,
    }));

    results.sort((a, b) => b.score - a.score);

    return (
      <SearchWrap role="search">
        {this.state.term && <ClearIcon onClick={this.clear}>×</ClearIcon>}
        <SearchIcon />
        <SearchInput
          value={this.state.term}
          onKeyDown={this.handleKeyDown}
          placeholder="Search..."
          type="text"
          onChange={this.search}
        />
        {results.length > 0 && (
          <PerfectScrollbarWrap
            options={{
              wheelPropagation: false,
            }}
          >
            <SearchResultsBox data-role="search:results">
              {results.map((res, idx) => (
                <MenuItem
                  item={Object.create(res.item, {
                    active: {
                      value: idx === activeItemIdx,
                    },
                  })}
                  onActivate={this.props.onActivate}
                  withoutChildren={true}
                  key={res.item.id}
                  data-role="search:result"
                />
              ))}
            </SearchResultsBox>
          </PerfectScrollbarWrap>
        )}
      </SearchWrap>
    );
  }
}

1	import * as React from 'react';	7✔
2
3	import { IMenuItem } from '../../services/MenuStore';
4	import { SearchStore } from '../../services/SearchStore';
5	import { MenuItem } from '../SideMenu/MenuItem';	7✔
6
7	import { MarkerService } from '../../services/MarkerService';
8	import { SearchResult } from '../../services/SearchWorker.worker';
9
10	import { OptionsContext } from '../OptionsProvider';	7✔
11	import { RedocRawOptions } from '../../services/RedocNormalizedOptions';
12
13	import { bind, debounce } from 'decko';	7✔
14	import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';	7✔
15	import {	7✔
16	ClearIcon,
17	SearchIcon,
18	SearchInput,
19	SearchResultsBox,
20	SearchWrap,
21	} from './styled.elements';
22
23	export interface SearchBoxProps {
24	search: SearchStore<string>;
25	marker: MarkerService;
26	getItemById: (id: string) => IMenuItem \| undefined;
27	onActivate: (item: IMenuItem) => void;
28
29	className?: string;
30	}
31
32	export interface SearchBoxState {
33	results: SearchResult[];
34	term: string;
35	activeItemIdx: number;
36	}
37
38	export class SearchBox extends React.PureComponent<SearchBoxProps, SearchBoxState> {	7✔
39	activeItemRef: MenuItem \| null = null;	2✔
40
41	static contextType = OptionsContext;	7✔
42
43	constructor(props) {
44	super(props);	2✔
45	this.state = {	2✔
46	results: [],
47	term: '',
48	activeItemIdx: -1,
49	};
50	}
51
52	clearResults(term: string) {	7✔
53	this.setState({	×
54	results: [],
55	term,
56	});
57	this.props.marker.unmark();	×
58	}
59
60	clear = () => {	2✔
61	this.setState({	×
62	results: [],
63	term: '',
64	activeItemIdx: -1,
65	});
66	this.props.marker.unmark();	×
67	};
68
69	handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {	2✔
70	if (event.keyCode === 27) {	×
71	// ESQ
72	this.clear();	×
73	}
74	if (event.keyCode === 40) {	×
75	// Arrow down
76	this.setState({	×
77	activeItemIdx: Math.min(this.state.activeItemIdx + 1, this.state.results.length - 1),
78	});
79	event.preventDefault();	×
80	}
81	if (event.keyCode === 38) {	×
82	// Arrow up
83	this.setState({	×
84	activeItemIdx: Math.max(0, this.state.activeItemIdx - 1),
85	});
86	event.preventDefault();	×
87	}
88	if (event.keyCode === 13) {	×
89	// enter
90	const activeResult = this.state.results[this.state.activeItemIdx];	×
91	if (activeResult) {	×
92	const item = this.props.getItemById(activeResult.meta);	×
93	if (item) {	×
94	this.props.onActivate(item);	×
95	}
96	}
97	}
98	};
99
100	setResults(results: SearchResult[], term: string) {	7✔
101	this.setState({	×
102	results,
103	});
104	this.props.marker.mark(term);	×
105	}
106
107	@bind	×
108	@debounce(400)
109	searchCallback(searchTerm: string) {	14✔
110	this.props.search.search(searchTerm).then((res) => {	×
111	this.setResults(res, searchTerm);	×
112	});
113	}
114
115	search = (event: React.ChangeEvent<HTMLInputElement>) => {	2✔
116	const { minCharacterLengthToInitSearch = 3 } = this.context as RedocRawOptions;	×
117	const q = event.target.value;	×
118	if (q.length < minCharacterLengthToInitSearch) {	×
119	this.clearResults(q);	×
120	return;	×
121	}
122
123	this.setState(	×
124	{
125	term: q,
126	},
127	() => this.searchCallback(this.state.term),	×
128	);
129	};
130
131	render() {	7✔
132	const { activeItemIdx } = this.state;	2✔
133	const results = this.state.results.map((res) => ({	2✔
134	item: this.props.getItemById(res.meta)!,
135	score: res.score,
136	}));
137
138	results.sort((a, b) => b.score - a.score);	2✔
139
140	return (	2✔
141	<SearchWrap role="search">
142	{this.state.term && <ClearIcon onClick={this.clear}>×</ClearIcon>}	2!
143	<SearchIcon />
144	<SearchInput
145	value={this.state.term}
146	onKeyDown={this.handleKeyDown}
147	placeholder="Search..."
148	type="text"
149	onChange={this.search}
150	/>
151	{results.length > 0 && (	2!
152	<PerfectScrollbarWrap
153	options={{
154	wheelPropagation: false,
155	}}
156	>
157	<SearchResultsBox data-role="search:results">
158	{results.map((res, idx) => (	×
159	<MenuItem
160	item={Object.create(res.item, {
161	active: {
162	value: idx === activeItemIdx,
163	},
164	})}
165	onActivate={this.props.onActivate}
166	withoutChildren={true}
167	key={res.item.id}
168	data-role="search:result"
169	/>
170	))}
171	</SearchResultsBox>
172	</PerfectScrollbarWrap>
173	)}
174	</SearchWrap>
175	);
176	}
177	}	7✔

Redocly / redoc / 1816

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous