Add custom emoji lazyload

release
mashirozx 2021-10-25 14:15:01 +08:00
parent fe28ab637b
commit 7edf171664
5 changed files with 11423 additions and 10838 deletions

View File

@ -137,7 +137,7 @@
} }
.emoji-mart-category .emoji-mart-emoji:hover:before { .emoji-mart-category .emoji-mart-emoji:hover:before {
z-index: 0; z-index: -1;
content: ""; content: "";
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;

View File

@ -1,12 +1,12 @@
{ {
"name": "emoji-mart", "name": "emoji-mart-lazyload",
"version": "3.0.1", "version": "3.0.1h",
"description": "Customizable Slack-like emoji picker for React", "description": "Customizable Slack-like emoji picker for React",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist-es/index.js", "module": "dist-es/index.js",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git@github.com:missive/emoji-mart.git" "url": "git@github.com:mashirozx/emoji-mart.git"
}, },
"keywords": [ "keywords": [
"react", "react",
@ -16,11 +16,12 @@
"author": "Etienne Lemay", "author": "Etienne Lemay",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"bugs": { "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": { "dependencies": {
"@babel/runtime": "^7.0.0", "@babel/runtime": "^7.0.0",
"intersection-observer": "^0.12.0",
"prop-types": "^15.6.0" "prop-types": "^15.6.0"
}, },
"peerDependencies": { "peerDependencies": {

View File

@ -5,6 +5,7 @@ import frequently from '../utils/frequently'
import { getData } from '../utils' import { getData } from '../utils'
import NimbleEmoji from './emoji/nimble-emoji' import NimbleEmoji from './emoji/nimble-emoji'
import NotFound from './not-found' import NotFound from './not-found'
import 'intersection-observer'
export default class Category extends React.Component { export default class Category extends React.Component {
constructor(props) { constructor(props) {
@ -13,6 +14,17 @@ export default class Category extends React.Component {
this.data = props.data this.data = props.data
this.setContainerRef = this.setContainerRef.bind(this) this.setContainerRef = this.setContainerRef.bind(this)
this.setLabelRef = this.setLabelRef.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() { componentDidMount() {
@ -20,6 +32,17 @@ export default class Category extends React.Component {
this.minMargin = 0 this.minMargin = 0
this.memoizeSize() this.memoizeSize()
this.lazyloadImages = []
this.lazyload()
}
componentDidUpdate() {
this.lazyload()
}
componentWillUnmount() {
this.removeLazyloadObserver()
} }
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
@ -47,7 +70,8 @@ export default class Category extends React.Component {
} }
if (name == 'Search') { if (name == 'Search') {
shouldUpdate = !(emojis == nextEmojis) // shouldUpdate = !(emojis == nextEmojis)
shouldUpdate = true
} }
if ( if (
@ -84,6 +108,21 @@ export default class Category extends React.Component {
} }
} }
lazyload() {
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);
})
}
handleScroll(scrollTop) { handleScroll(scrollTop) {
var margin = scrollTop - this.top var margin = scrollTop - this.top
margin = margin < this.minMargin ? this.minMargin : margin margin = margin < this.minMargin ? this.minMargin : margin
@ -211,7 +250,7 @@ export default class Category extends React.Component {
(emoji.short_names && emoji.short_names.join('_')) || emoji (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> </li>
))} ))}
</ul> </ul>

View File

@ -152,6 +152,13 @@ const NimbleEmoji = (props) => {
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
backgroundPosition: 'center', backgroundPosition: 'center',
} }
if(props.lazy){
delete style.backgroundImage
delete style.backgroundSize
delete style.backgroundRepeat
delete style.backgroundPosition
style.objectFit = 'contain'
}
} }
} else { } else {
let setHasEmoji = let setHasEmoji =
@ -207,7 +214,18 @@ const NimbleEmoji = (props) => {
className={className} className={className}
{...Tag.props} {...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}
/>
:
<span style={style}>{children}</span>
}
</Tag.name> </Tag.name>
) )
} }

5445
yarn.lock

File diff suppressed because it is too large Load Diff