Wrong abbreviation if the name contains accented characters

[heruan]

Names with accented characters (very common in Italy) get wrong abbreviations, e.g.

<vcf-avatar-item name="Matteo Corà"></vcf-avatar-item>

is rendered as MCÀ instead of MC.

See Glitch: https://glitch.com/edit/#!/low-buckthorn

[Haprog]

The problem is this naive regex

vcf-avatar-item/src/vcf-avatar-item.js

Line 103 in 6730b95

this.abbr = this.abbr || this.name.match(/\b\S/g).join('');

which doesn't seem to work properly if the name has non-ASCII letters.

E.g. using my name as the name property results in abbr being set to "KSÖD" by default (instead of "KS").

I think the default abbreviation should be limited to 2 characters anyway since more don't really fit (at least with the default styles).

[Haprog]

I think it might not be easy or maybe not even possible to make this work correctly with all possible names automatically. I think this should be updated with a slightly more complex regex with would handle more of common name formats in a better way than now, but the abbreviation computation algorithm should probably be refactored to a new method which could be overridden by the user in case they need to customize it for some special case.

[heruan]

What about this?

this.abbr = this.abbr || this.name.split(' ').map(n => n[0]).join('').toUpperCase();

[Haprog]

That's actually a good idea. I think that might be a good enough default. Maybe additionally limit it to 2 characters like so:

this.name.split(' ').map(n => n[0]).join('').toUpperCase().substr(0, 2)

[heruan]

Right, then I'd use split(' ', 2) which saves map cycles. PR coming 🙂

[Haprog]

@heruan Minor drawback with limiting the array length is if the name string accidentally contains more than one space after first name (or if the name is prefixed with at least 2 spaces), it would result in only 1 or 0 characters. My version avoids these issues (since the array will have some undefineds in it but those are discarded by the join operation) so it is more friendly in case of extra spaces in the name string.

See:

// using substr()
'Foo    Bar Baz'.split(' ').map(n => n[0]).join('').toUpperCase().substr(0, 2); // = 'FB'
'   Foo    Bar Baz'.split(' ').map(n => n[0]).join('').toUpperCase().substr(0, 2); // = 'FB'

// using split(' ', 2)
'Foo    Bar Baz'.split(' ', 2).map(n => n[0]).join('').toUpperCase(); // = 'F'
'   Foo    Bar Baz'.split(' ', 2).map(n => n[0]).join('').toUpperCase(); // = ''

[Haprog]

I noticed you updated your PR to use .trim().split(/\s+/, 2). That seems good too. 👍

[heruan]

Minor drawback with limiting the array length is if the name string accidentally contains more than one space after first name (or if the name is prefixed with at least 2 spaces), it would result in only 1 or 0 characters.

I noticed this while drafting the PR and I fixed trimming the name and using a regex for the split.

[heruan]

@Haprog Any chance to have the PR merged?

[Haprog]

@heruan I don't know what is the process or who has the permissions to do so for these component factory components (VCF). I have forwarded your question internally, hopefully someone else can answer.

[heruan]

@Haprog Any news on this being released?