Skip to content
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

[Feature]Add includeOnlySubsets prop to enable emojis filtering by Unicode version #31

Closed
wants to merge 1 commit into from
Closed

[Feature]Add includeOnlySubsets prop to enable emojis filtering by Unicode version #31

wants to merge 1 commit into from

Conversation

darekg11
Copy link
Contributor

@darekg11 darekg11 commented Mar 7, 2019

Relate to any issue?

#5
It is a temporary workaround that would allow user of this library to avoid missing emojis being render as X

Breaking change?

Nope, by default all emojis will be rendered as before.

What this PR does?

Adds new includeOnlySubsets prop allowing user to pass an array of strings being Unicode versions and filters possible emojis by that Unicode Versions.

Example of usage:

<EmojiInput
      includeOnlySubsets={['6.0']}
      onEmojiSelected={this.handleEmojiSelected}
      ref={emojiInput => this._emojiInput = emojiInput}
      resetSearch={this.state.reset}
      loggingFunction={this.verboseLoggingFunction.bind(this)}
      verboseLoggingFunction={true}
/>

Change Preview:

Before on my Huawei P8Lite running Android 6.0:
before

After enabling only 6.0 Unicode:
after

@darekg11
Copy link
Contributor Author

darekg11 commented Mar 7, 2019

Seems like Your Travis is broken currently?

@rijn
Copy link
Collaborator

rijn commented Mar 31, 2019

I don't think we have an effective travis.

I like the idea, but could you make it more general. Can we pass an array of filter functions to the component instead of specifying only the unicode version?

@darekg11
Copy link
Contributor Author

darekg11 commented Apr 1, 2019

How would you see implementation? The filter function would take an param that is an emoji entry in lib and upon returning true it would be included in rendered list?

Like (example of changing my unicode only implementation to external filter function):
Let's assume that this is part of my component and state.unicode is an array containing such entries: ["6.0", "6.1"]
And emoji param is passed from EmojiInput component

filterFunction = emoji => {
    return this.state.unicode.indexOf(emoji.lib.added_in) !== -1
}

And pass it to EmojiInput via prop like:

<EmojiInput filterFunction={this.filterFunction} />

And component calls the external filter function like so:

        this.filtered = 
            this.props.filterFunction
               ? _.pickBy(emoji, value => this.props.filterFunction(value))
               : emoji

Am I on track with what you have in mind?

@rijn
Copy link
Collaborator

rijn commented Apr 1, 2019

Yeah that's just my thought. I think this approach can bring more flexibility to the component. You can even use an array of filter functions.

<EmojiInput filterFunctions={[ this.filterFunction ]} />

defaultProps = {
    filterFunctions: []
}

this.filtered = _.filter(emojis, emoji => _.every(this.props.filterFunctions, fn => fn(emoji)));

@darekg11
Copy link
Contributor Author

darekg11 commented Apr 1, 2019

@rijn Nice idea, I will push change with that around end of the week. 👍

@darekg11
Copy link
Contributor Author

darekg11 commented Apr 6, 2019

Have to close this one in favor of:
#34
Since I don't have access anymore to organization account from which I have created original PR and I can't push there.

@darekg11 darekg11 closed this Apr 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants