123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- import React from "react";
- import { Carousel } from "antd";
- // import emoji, { prefixUrl } from "../../emoji";
- import "./Emoji.css";
- // 每页 20 5*4
- // 共 20 * 3 = 60 (实际是 54)
-
- // class Emoji
-
- class Emoji extends React.Component {
- next() {
- if (this.carousel) {
- this.carousel.next();
- }
- }
-
- prev() {
- if (this.carousel) {
- this.carousel.prev();
- }
- }
-
- render() {
- const { onClick, emojiList } = this.props;
- const content = [];
- // let curPage = [];
- // for (let i = 0; i < 115; i++) {
- // if (curPage.length < 30) {
- // curPage.push(emoji[i]);
- // } else {
- // content.push(curPage);
- // curPage = [];
- // }
- // }
- // if (curPage.length > 0) {
- // content.push(curPage);
- // }
- for (let i = 0; i < emojiList.length; i += 30) {
- content.push(emojiList.slice(i, i + 30));
- }
-
- return (
- <Carousel
- ref={node => {
- this.carousel = node;
- }}
- >
- {content.map((page, index) => (
- <div key={index} className="emoji">
- {page.map((item, index) => (
- <div className="item" key={item.id}>
- <span className="helper" />
- <img
- src={item.url}
- alt={item.name}
- style={{ display: "inline-block" }}
- onClick={() => onClick(item.name)}
- />
- </div>
- ))}
- </div>
- ))}
- </Carousel>
- );
- }
- }
-
- export default Emoji;
|