Compare commits
11 Commits
Author | SHA1 | Date |
---|---|---|
mashirozx | d496014be7 | |
mashirozx | dac9386e73 | |
mashirozx | 818aba94a0 | |
mashirozx | 7edf171664 | |
Ross Gardiner | fe28ab637b | |
Etienne Lemay | 5912b6b902 | |
Etienne Lemay | 37c3c6267c | |
Erin Hinson | ca6a7fd74b | |
Matt Krick | 612dae7b08 | |
Sagar Jain | 3a97898c5b | |
Sagar Jain | 4f8ef7255a |
11
CHANGELOG.md
11
CHANGELOG.md
|
@ -2,6 +2,17 @@
|
|||
|
||||
All notable changes to this project will be documented in this file.
|
||||
|
||||
#### [v3.0.1](https://github.com/missive/emoji-mart/compare/v3.0.0...v3.0.1)
|
||||
|
||||
> February 24 2021
|
||||
|
||||
##### Fixes 🐛
|
||||
- Safely access search input #419
|
||||
- Custom category aria-label #480
|
||||
|
||||
##### Chores 🧹
|
||||
- React v17 support #475
|
||||
|
||||
#### [v3.0.0](https://github.com/missive/emoji-mart/compare/v2.11.2...v3.0.0)
|
||||
|
||||
> March 16 2020
|
||||
|
|
|
@ -137,7 +137,7 @@
|
|||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji:hover:before {
|
||||
z-index: 0;
|
||||
z-index: -1;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
|
|
13
package.json
13
package.json
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "emoji-mart",
|
||||
"version": "3.0.0",
|
||||
"name": "emoji-mart-lazyload",
|
||||
"version": "3.0.1k",
|
||||
"description": "Customizable Slack-like emoji picker for React",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist-es/index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:missive/emoji-mart.git"
|
||||
"url": "git@github.com:mashirozx/emoji-mart.git"
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
|
@ -16,15 +16,16 @@
|
|||
"author": "Etienne Lemay",
|
||||
"license": "BSD-3-Clause",
|
||||
"bugs": {
|
||||
"url": "https://github.com/missive/emoji-mart/issues"
|
||||
"url": "https://github.com/mashirozx/emoji-mart/issues"
|
||||
},
|
||||
"homepage": "https://github.com/missive/emoji-mart",
|
||||
"homepage": "https://github.com/mashirozx/emoji-mart",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"intersection-observer": "^0.12.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
|
||||
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0 || ^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.0.0",
|
||||
|
|
|
@ -42,8 +42,8 @@ export default class Anchors extends React.PureComponent {
|
|||
return (
|
||||
<button
|
||||
key={id}
|
||||
aria-label={i18n.categories[id]}
|
||||
title={i18n.categories[id]}
|
||||
aria-label={i18n.categories[iconId]}
|
||||
title={i18n.categories[iconId]}
|
||||
data-index={i}
|
||||
type={'button'}
|
||||
onClick={this.handleClick}
|
||||
|
|
|
@ -5,6 +5,7 @@ import frequently from '../utils/frequently'
|
|||
import { getData } from '../utils'
|
||||
import NimbleEmoji from './emoji/nimble-emoji'
|
||||
import NotFound from './not-found'
|
||||
import 'intersection-observer'
|
||||
|
||||
export default class Category extends React.Component {
|
||||
constructor(props) {
|
||||
|
@ -13,6 +14,17 @@ export default class Category extends React.Component {
|
|||
this.data = props.data
|
||||
this.setContainerRef = this.setContainerRef.bind(this)
|
||||
this.setLabelRef = this.setLabelRef.bind(this)
|
||||
|
||||
this.imageObserver = new window.IntersectionObserver((entries, observer) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const image = entry.target;
|
||||
image.src = image.dataset.src;
|
||||
image.classList.remove("lazy");
|
||||
this.imageObserver.unobserve(image);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
@ -20,6 +32,17 @@ export default class Category extends React.Component {
|
|||
this.minMargin = 0
|
||||
|
||||
this.memoizeSize()
|
||||
|
||||
this.lazyloadImages = []
|
||||
this.addLazyloadObserver()
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.addLazyloadObserver()
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.removeLazyloadObserver()
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
|
@ -47,7 +70,8 @@ export default class Category extends React.Component {
|
|||
}
|
||||
|
||||
if (name == 'Search') {
|
||||
shouldUpdate = !(emojis == nextEmojis)
|
||||
// shouldUpdate = !(emojis == nextEmojis)
|
||||
shouldUpdate = true
|
||||
}
|
||||
|
||||
if (
|
||||
|
@ -84,6 +108,25 @@ export default class Category extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
addLazyloadObserver() {
|
||||
this.removeLazyloadObserver()
|
||||
this.lazyloadImages = this.container.querySelectorAll(".lazy");
|
||||
|
||||
this.lazyloadImages.forEach((image) => {
|
||||
this.imageObserver.observe(image);
|
||||
});
|
||||
}
|
||||
|
||||
removeLazyloadObserver() {
|
||||
this.lazyloadImages.forEach((image) => {
|
||||
this.imageObserver.unobserve(image);
|
||||
})
|
||||
}
|
||||
|
||||
handleOnContextMenu(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
handleScroll(scrollTop) {
|
||||
var margin = scrollTop - this.top
|
||||
margin = margin < this.minMargin ? this.minMargin : margin
|
||||
|
@ -211,7 +254,7 @@ export default class Category extends React.Component {
|
|||
(emoji.short_names && emoji.short_names.join('_')) || emoji
|
||||
}
|
||||
>
|
||||
{NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
|
||||
{NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps, lazy: true })}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
@ -152,6 +152,13 @@ const NimbleEmoji = (props) => {
|
|||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
}
|
||||
if(props.lazy){
|
||||
delete style.backgroundImage
|
||||
delete style.backgroundSize
|
||||
delete style.backgroundRepeat
|
||||
delete style.backgroundPosition
|
||||
style.objectFit = 'contain'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let setHasEmoji =
|
||||
|
@ -202,12 +209,25 @@ const NimbleEmoji = (props) => {
|
|||
onClick={(e) => _handleClick(e, props)}
|
||||
onMouseEnter={(e) => _handleOver(e, props)}
|
||||
onMouseLeave={(e) => _handleLeave(e, props)}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
aria-label={label}
|
||||
title={title}
|
||||
className={className}
|
||||
{...Tag.props}
|
||||
>
|
||||
<span style={style}>{children}</span>
|
||||
{
|
||||
custom && !data.spriteUrl && props.lazy
|
||||
?
|
||||
<img
|
||||
style={style}
|
||||
className="lazy"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP89B8AAukB8/71MdcAAAAASUVORK5CYII="
|
||||
data-src={imageUrl}
|
||||
onContextMenu={(e) => e.preventDefault()}
|
||||
/>
|
||||
:
|
||||
<span style={style}>{children}</span>
|
||||
}
|
||||
</Tag.name>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -534,6 +534,7 @@ export default class NimblePicker extends React.PureComponent {
|
|||
skinEmoji,
|
||||
notFound,
|
||||
notFoundEmoji,
|
||||
maxResults,
|
||||
} = this.props
|
||||
|
||||
var width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
|
||||
|
@ -573,6 +574,7 @@ export default class NimblePicker extends React.PureComponent {
|
|||
exclude={exclude}
|
||||
custom={this.CUSTOM}
|
||||
autoFocus={autoFocus}
|
||||
maxResults={maxResults}
|
||||
/>
|
||||
|
||||
<div
|
||||
|
|
|
@ -65,7 +65,9 @@ export default class Search extends React.PureComponent {
|
|||
}
|
||||
|
||||
handleChange() {
|
||||
this.search(this.input.value)
|
||||
if (this.input) {
|
||||
this.search(this.input.value)
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyUp(e) {
|
||||
|
|
Loading…
Reference in New Issue