feat(Dropdown): make deburr opt-in, and deburr input #2223

patrikmolsson · 2017-10-20T13:22:11Z

WIP pull request. Would gladly appreciate feedback on both tests and source code!

Make deburr opt-in
When having deburr, the input string should also be deburred.
Add proper documentation
Add example of using deburr
Add example of custom search function
Add proper "should not filter diacritics when deburr is not set" test

codecov-io · 2017-10-21T13:37:37Z

Codecov Report

❗ No coverage uploaded for pull request base (master@4f29636). Click here to learn what that means.
The diff coverage is 100%.

@@            Coverage Diff            @@
##             master    #2223   +/-   ##
=========================================
  Coverage          ?   99.73%           
=========================================
  Files             ?      151           
  Lines             ?     2626           
  Branches          ?        0           
=========================================
  Hits              ?     2619           
  Misses            ?        7           
  Partials          ?        0

Impacted Files	Coverage Δ
src/modules/Dropdown/Dropdown.js	`100% <100%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4f29636...74e18d6. Read the comment docs.

patrikmolsson · 2017-10-22T07:55:16Z

@levithomason I think I'm done now, but I would love some input on the prop naming before we merge!

layershifter · 2017-10-23T18:02:33Z

docs/app/Examples/modules/Dropdown/Usage/DropdownExampleCustomSearchFunction.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import _ from 'lodash'
+import { Dropdown } from 'semantic-ui-react'


Let's sort imports in alphabetical order

Of course! 😄 On it!

Is there a linting rule for this that I'm missing?

Nope, we don't have or don't use it 🤔

Alright. Btw, how do you sort it? Alphabetically by module name, i.e. react, lodash, and semantic-ui-react?

--> lodash, react, semantic-ui-react

Yes, by module name.

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.

@levithomason It seems that lint does not sort on the module name, but rather on the imported member, or am I missing something?

layershifter

@patrikmolsson Thanks, awesome work 👍 I've left styling comments, let's fix them

layershifter · 2017-10-23T18:03:08Z

docs/app/Examples/modules/Dropdown/Usage/DropdownExampleCustomSearchFunction.js

+    search={caseSensitiveSearch}
+    selection
+    fluid
+    placeholder={'Try to search for case or CASE'}


And props in alphatical order, too 😄

layershifter · 2017-10-23T18:03:23Z

docs/app/Examples/modules/Dropdown/Usage/DropdownExampleDeburrSearch.js

+    search
+    selection
+    deburr
+    options={options}


layershifter · 2017-10-23T18:04:01Z

src/modules/Dropdown/Dropdown.js

@@ -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


Let's sort props there too

patrikmolsson · 2017-10-23T18:24:25Z

@layershifter There it is!

By the way, what are your thoughts on the prop naming? Is it clear what deburr means?

layershifter · 2017-10-23T18:34:32Z

@patrickgaskill fuzzy looks better to me, however lodash uses deburr. It's a complicated question

patrikmolsson · 2017-10-23T18:36:47Z

@layershifter fuzzy might also imply that searching for ac will match abc...

patrikmolsson · 2017-10-23T18:37:13Z

I've thought about this, but cannot really find an appropriate third option.

levithomason · 2017-10-29T05:12:45Z

Beautiful PR, I can see the care and attention to detail you put in. ❤️

Prop name

Regarding the prop name, lodash is the most installed NPM package and it calls this process deburring. It is likely many people will recognize that term. However, there is a formal specification and process for this.

A Unicode character with diacritics is called a "precomposed character". Example, é is composed of the letter e and ´ (acute accent). When these characters are separated like this they are "decomposed" (see previous link).

In terms of Unicode equivalence, this is called "normalization". Java has a class called "Normalizer" which performs this operation. The Unicode Standard includes a Normalization Chart which maps these characters to one another. The technical process by which equivalent Unicode values are determined is called decomposition.

So, I think we could go with deburr, normalize, or decompose. I have my opinion, but I'll let you two choose.

@layershifter this is good to merge once you guys are settled on the most fitting prop name.

layershifter · 2017-10-29T13:47:22Z

I'm think that we can go with deburr.

patrikmolsson · 2017-10-29T18:21:37Z

@levithomason Thanks for the input, and for the kind words! As @layershifter says, let's go with deburr ☺️

patrickgaskill · 2017-11-01T15:37:02Z

@layershifter You tagged the wrong Patrick ;)

layershifter · 2017-11-01T18:50:08Z

@levithomason Can you merge this? As codecov failed, I don't have enough rights 😄

levithomason · 2017-11-04T23:48:27Z

Sorry folks, Codecov is having issues finding a base to compare some PRs against and incorrectly failing statuses.

This will go out in the next release, today or tomorrow.

levithomason · 2017-11-05T00:02:38Z

Released in semantic-ui-react@0.76.0

patrikmolsson changed the title ~~fix(Dropdown): make deburr opt-in, and deburr input~~ feat(Dropdown): make deburr opt-in, and deburr input Oct 21, 2017

feat(Dropdown): make deburr opt-in, and deburr input

7122475

patrikmolsson force-pushed the feature/deburr-opt-in branch from 0789cf4 to 7122475 Compare October 21, 2017 13:32

feat(Dropdown): remake non-filter test

393795e

docs(Dropdown): add custom search function example

f80d6d6

layershifter reviewed Oct 23, 2017

View reviewed changes

layershifter requested changes Oct 23, 2017

View reviewed changes

layershifter added needs author feedback enhancement labels Oct 23, 2017

style(Dropdown): sort props and imports

74e18d6

layershifter added ready for review and removed needs author feedback labels Oct 23, 2017

layershifter approved these changes Oct 23, 2017

View reviewed changes

levithomason added ready for merge and removed ready for review labels Oct 29, 2017

levithomason merged commit 64bf4a1 into Semantic-Org:master Nov 4, 2017

patrikmolsson deleted the feature/deburr-opt-in branch November 5, 2017 13:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Dropdown): make deburr opt-in, and deburr input #2223

feat(Dropdown): make deburr opt-in, and deburr input #2223

patrikmolsson commented Oct 20, 2017 •

edited by layershifter

codecov-io commented Oct 21, 2017 •

edited

patrikmolsson commented Oct 22, 2017

layershifter Oct 23, 2017

patrikmolsson Oct 23, 2017

layershifter Oct 23, 2017

patrikmolsson Oct 23, 2017

patrikmolsson Oct 23, 2017

layershifter Oct 23, 2017

levithomason Oct 29, 2017

patrikmolsson Nov 2, 2017

layershifter left a comment

layershifter Oct 23, 2017

layershifter Oct 23, 2017

layershifter Oct 23, 2017

patrikmolsson commented Oct 23, 2017 •

edited

layershifter commented Oct 23, 2017

patrikmolsson commented Oct 23, 2017

patrikmolsson commented Oct 23, 2017

levithomason commented Oct 29, 2017

layershifter commented Oct 29, 2017

patrikmolsson commented Oct 29, 2017

patrickgaskill commented Nov 1, 2017

layershifter commented Nov 1, 2017

levithomason commented Nov 4, 2017

levithomason commented Nov 5, 2017

feat(Dropdown): make deburr opt-in, and deburr input #2223

feat(Dropdown): make deburr opt-in, and deburr input #2223

Conversation

patrikmolsson commented Oct 20, 2017 • edited by layershifter

codecov-io commented Oct 21, 2017 • edited

Codecov Report

patrikmolsson commented Oct 22, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

layershifter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrikmolsson commented Oct 23, 2017 • edited

layershifter commented Oct 23, 2017

patrikmolsson commented Oct 23, 2017

patrikmolsson commented Oct 23, 2017

levithomason commented Oct 29, 2017

Prop name

layershifter commented Oct 29, 2017

patrikmolsson commented Oct 29, 2017

patrickgaskill commented Nov 1, 2017

layershifter commented Nov 1, 2017

levithomason commented Nov 4, 2017

levithomason commented Nov 5, 2017

patrikmolsson commented Oct 20, 2017 •

edited by layershifter

codecov-io commented Oct 21, 2017 •

edited

patrikmolsson commented Oct 23, 2017 •

edited