-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Dropdown): make deburr opt-in, and deburr input #2223
Changes from 3 commits
7122475
393795e
f80d6d6
74e18d6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react' | ||
import _ from 'lodash' | ||
import { Dropdown } from 'semantic-ui-react' | ||
|
||
const caseSensitiveSearch = (options, query) => { | ||
const re = new RegExp(_.escapeRegExp(query)) | ||
return options.filter(opt => re.test(opt.text)) | ||
} | ||
|
||
const options = [ | ||
{ key: 'a', value: 'a', text: 'UPPERCASE' }, | ||
{ key: 'b', value: 'b', text: 'lowercase' }, | ||
] | ||
|
||
const DropdownExampleCustomSearchFunction = () => ( | ||
<Dropdown | ||
options={options} | ||
search={caseSensitiveSearch} | ||
selection | ||
fluid | ||
placeholder={'Try to search for case or CASE'} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. And props in alphatical order, too 😄 |
||
/> | ||
) | ||
|
||
export default DropdownExampleCustomSearchFunction |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React from 'react' | ||
import { Dropdown } from 'semantic-ui-react' | ||
|
||
const options = [ | ||
{ key: 'a', value: 'a', text: 'Café with accent' }, | ||
{ key: 'b', value: 'b', text: 'Cafe without accent' }, | ||
{ key: 'c', value: 'c', text: 'Déjà vu' }, | ||
{ key: 'd', value: 'd', text: 'Deja vu' }, | ||
{ key: 'e', value: 'e', text: 'Scandinavian å ä æ ø ö' }, | ||
{ key: 'f', value: 'f', text: 'Scandinavian a a ae o o' }, | ||
] | ||
|
||
const DropdownExampleSearchSelection = () => ( | ||
<Dropdown | ||
placeholder='Try to search for "Deja vu"' | ||
fluid | ||
search | ||
selection | ||
deburr | ||
options={options} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ^ |
||
/> | ||
) | ||
|
||
export default DropdownExampleSearchSelection |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -90,6 +90,9 @@ export default class Dropdown extends Component { | |
/** A compact dropdown has no minimum width. */ | ||
compact: PropTypes.bool, | ||
|
||
/** Whether or not the dropdown should strip diacritics in options and input search */ | ||
deburr: PropTypes.bool, | ||
|
||
/** Initial value of open. */ | ||
defaultOpen: PropTypes.bool, | ||
|
||
|
@@ -354,6 +357,7 @@ export default class Dropdown extends Component { | |
additionLabel: 'Add ', | ||
additionPosition: 'top', | ||
closeOnBlur: true, | ||
deburr: false, | ||
icon: 'dropdown', | ||
minCharacters: 1, | ||
noResultsMessage: 'No results found.', | ||
|
@@ -787,7 +791,7 @@ export default class Dropdown extends Component { | |
// There are times when we need to calculate the options based on a value | ||
// that hasn't yet been persisted to state. | ||
getMenuOptions = (value = this.state.value, options = this.props.options) => { | ||
const { multiple, search, allowAdditions, additionPosition, additionLabel } = this.props | ||
const { multiple, search, allowAdditions, additionPosition, additionLabel, deburr } = this.props | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's sort props there too |
||
const { searchQuery } = this.state | ||
|
||
let filteredOptions = options | ||
|
@@ -802,9 +806,13 @@ export default class Dropdown extends Component { | |
if (_.isFunction(search)) { | ||
filteredOptions = search(filteredOptions, searchQuery) | ||
} else { | ||
const re = new RegExp(_.escapeRegExp(searchQuery), 'i') | ||
// remove diacritics on search | ||
filteredOptions = _.filter(filteredOptions, opt => re.test(_.deburr(opt.text))) | ||
const strippedQuery = deburr ? _.deburr(searchQuery) : searchQuery | ||
|
||
const re = new RegExp(_.escapeRegExp(strippedQuery), 'i') | ||
|
||
filteredOptions = _.filter(filteredOptions, opt => | ||
re.test(deburr ? _.deburr(opt.text) : opt.text)) | ||
} | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's sort imports in alphabetical order
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Of course! 😄 On it!
Is there a linting rule for this that I'm missing?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nope, we don't have or don't use it 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alright. Btw, how do you sort it? Alphabetically by module name, i.e.
react
,lodash
, andsemantic-ui-react
?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
-->
lodash
,react
,semantic-ui-react
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, by module name.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for updating. FWIW, there is a fixable lint rule for this that we should turn on
sort-imports
so this is done automatically for people.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@levithomason It seems that lint does not sort on the module name, but rather on the imported member, or am I missing something?