-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Template Parts: Add search to replacement modal (#42459)
* Template Parts: Add search to replacement modal * Nitpick * Make search sticky * Improve search * Update function name * Try absolute position * Search input height * Fix ESLint error * Search input width on small screens * Position search absolutely on larger screens only * Remove absolute positioning * Use correct z-index Co-authored-by: James Koster <[email protected]>
- Loading branch information
1 parent
49a4a01
commit dd22e60
Showing
4 changed files
with
153 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
76 changes: 76 additions & 0 deletions
76
packages/block-library/src/template-part/edit/utils/search.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import removeAccents from 'remove-accents'; | ||
|
||
/** | ||
* Sanitizes the search input string. | ||
* | ||
* @param {string} input The search input to normalize. | ||
* | ||
* @return {string} The normalized search input. | ||
*/ | ||
function normalizeSearchInput( input = '' ) { | ||
// Disregard diacritics. | ||
input = removeAccents( input ); | ||
|
||
// Trim & Lowercase. | ||
input = input.trim().toLowerCase(); | ||
|
||
return input; | ||
} | ||
|
||
/** | ||
* Get the search rank for a given pattern and a specific search term. | ||
* | ||
* @param {Object} pattern Pattern to rank | ||
* @param {string} searchValue Search term | ||
* @return {number} A pattern search rank | ||
*/ | ||
function getPatternSearchRank( pattern, searchValue ) { | ||
const normalizedSearchValue = normalizeSearchInput( searchValue ); | ||
const normalizedTitle = normalizeSearchInput( pattern.title ); | ||
|
||
let rank = 0; | ||
|
||
if ( normalizedSearchValue === normalizedTitle ) { | ||
rank += 30; | ||
} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) { | ||
rank += 20; | ||
} else { | ||
const searchTerms = normalizedSearchValue.split( ' ' ); | ||
const hasMatchedTerms = searchTerms.every( ( searchTerm ) => | ||
normalizedTitle.includes( searchTerm ) | ||
); | ||
|
||
// Prefer pattern with every search word in the title. | ||
if ( hasMatchedTerms ) { | ||
rank += 10; | ||
} | ||
} | ||
|
||
return rank; | ||
} | ||
|
||
/** | ||
* Filters an pattern list given a search term. | ||
* | ||
* @param {Array} patterns Item list | ||
* @param {string} searchValue Search input. | ||
* | ||
* @return {Array} Filtered pattern list. | ||
*/ | ||
export function searchPatterns( patterns = [], searchValue = '' ) { | ||
if ( ! searchValue ) { | ||
return patterns; | ||
} | ||
|
||
const rankedPatterns = patterns | ||
.map( ( pattern ) => { | ||
return [ pattern, getPatternSearchRank( pattern, searchValue ) ]; | ||
} ) | ||
.filter( ( [ , rank ] ) => rank > 0 ); | ||
|
||
rankedPatterns.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 ); | ||
return rankedPatterns.map( ( [ pattern ] ) => pattern ); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters