ref:emoji

.gitignore

@@ -3,4 +3,6 @@
 /node_modules
 
 # production
-/dist
+/dist
+
+.DS_Store

package.json

@@ -72,6 +72,7 @@
     "ts-lint": "^4.5.1",
     "ts-loader": "^5.3.3",
     "typescript": "^2.6.1",
+    "url-loader": "^4.1.1",
     "webpack": "^4.8.1",
     "webpack-cli": "^3.1.1",
     "webpack-dev-server": "^3.1.4"

src/component/content/component/emoji/component/emoji/constant.js

@@ -0,0 +1,122 @@
+export const EMOJI_MAP = [
+  {
+    code: 'daku',
+    src: require('./images/daku.png'),
+  },
+  {
+    code: 'daliuhan',
+    src: require('./images/daliuhan.png'),
+  },
+  {
+    code: 'danyanxiao',
+    src: require('./images/danyanxiao.png'),
+  },
+  {
+    code: 'dianzan',
+    src: require('./images/dianzan.png'),
+  },
+  {
+    code: 'fennu',
+    src: require('./images/fennu.png'),
+  },
+  {
+    code: 'huaji',
+    src: require('./images/huaji.png'),
+  },
+  {
+    code: 'fennuhuaji',
+    src: require('./images/fennuhuaji.png'),
+  },
+  {
+    code: 'guaiqiao',
+    src: require('./images/guaiqiao.png'),
+  },
+  {
+    code: 'jingku',
+    src: require('./images/jingku.png'),
+  },
+  {
+    code: 'jingya',
+    src: require('./images/jingya.png'),
+  },
+  {
+    code: 'kewang',
+    src: require('./images/kewang.png'),
+  },
+  {
+    code: 'liuhan',
+    src: require('./images/liuhan.png'),
+  },
+  {
+    code: 'liuhan1',
+    src: require('./images/liuhan1.png'),
+  },
+  {
+    code: 'low',
+    src: require('./images/low.png'),
+  },
+  {
+    code: 'miyanxiao',
+    src: require('./images/miyanxiao.png'),
+  },
+  {
+    code: 'miyanxiao1',
+    src: require('./images/miyanxiao1.png'),
+  },
+  {
+    code: 'mojing',
+    src: require('./images/mojing.png'),
+  },
+  {
+    code: 'moneyface',
+    src: require('./images/moneyface.png'),
+  },
+  {
+    code: 'outu',
+    src: require('./images/outu.png'),
+  },
+  {
+    code: 'qiang',
+    src: require('./images/qiang.png'),
+  },
+  {
+    code: 'shuijiao',
+    src: require('./images/shuijiao.png'),
+  },
+  {
+    code: 'smile',
+    src: require('./images/smile.png'),
+  },
+  {
+    code: 'tushe',
+    src: require('./images/tushe.png'),
+  },
+  {
+    code: 'weiqu',
+    src: require('./images/weiqu.png'),
+  },
+  {
+    code: 'xiaoxin',
+    src: require('./images/xiaoxin.png'),
+  },
+  {
+    code: 'xiaoyan',
+    src: require('./images/xiaoyan.png'),
+  },
+  {
+    code: 'xiexiao',
+    src: require('./images/xiexiao.png'),
+  },
+  {
+    code: 'xieyanxiao',
+    src: require('./images/xieyanxiao.png'),
+  },
+  {
+    code: 'yeah',
+    src: require('./images/yeah.png'),
+  },
+  {
+    code: 'yihuo',
+    src: require('./images/yihuo.png'),
+  },
+];

src/component/content/component/emoji/component/emoji/index.js

@@ -0,0 +1,20 @@
+// import a from './images/daku.png';
+import React, { memo } from 'react';
+import { EMOJI_MAP } from './constant';
+import styles from './index.less';
+
+export default memo(({ onAdd }) => {
+  return (
+    <div className={styles.emojiContaienr}>
+      {EMOJI_MAP.map((item) => (
+        <a
+          key={item.code}
+          className={styles.emojiItem}
+          onClick={() => onAdd(item.code)}
+        >
+          <img src={item.src.default} />
+        </a>
+      ))}
+    </div>
+  );
+});

src/component/content/component/emoji/component/emoji/index.less

@@ -0,0 +1,24 @@
+.emojiContaienr {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  .emojiItem {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    padding: 5px;
+    transition: all 0.3s;
+    img {
+      display: block;
+    }
+  }
+  .emojiItem:avtive {
+    background: #888483;
+  }
+  .emojiItem:hover {
+    transform: scale(1.1);
+  }
+}

src/component/content/component/emoji/component/textEmoji/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => {
+  return <div>etxt</div>;
+};

src/component/content/component/emoji/constant.js

@@ -0,0 +1,17 @@
+import Emoji from './component/emoji';
+import TextEmoji from './component/textEmoji';
+
+export const EMOJI_PREFIX = '::';
+
+export const EMOJI_TYPE = [
+  {
+    code: 'emoji',
+    component: () => Emoji,
+    text: 'emoji表情',
+  },
+  {
+    code: 'textEmoji',
+    text: '颜表情',
+    component: () => TextEmoji,
+  },
+];

src/component/content/component/emoji/index.js

@@ -0,0 +1,31 @@
+// import a from './images/daku.png';
+import React, { memo, useState, useMemo } from 'react';
+import { EMOJI_TYPE } from './constant';
+import styles from './index.less';
+
+export default memo(({ onAdd }) => {
+  const [active, setKey] = useState(EMOJI_TYPE[0].code);
+  const Component = EMOJI_TYPE.find((item) => item.code === active).component();
+  const menus = useMemo(
+    () => EMOJI_TYPE.map(({ code, text }) => ({ code, text })),
+    [EMOJI_TYPE],
+  );
+  return (
+    <div className={styles.emojiBox}>
+      <div className={styles.emojiMenu}>
+        {menus.map(({ code, text }) => (
+          <a
+            className={code === active ? styles.current : ''}
+            onClick={() => setKey(code)}
+            key={code}
+          >
+            {text}
+          </a>
+        ))}
+      </div>
+      <div className={styles.container} key={active}>
+        <Component onAdd={onAdd} />
+      </div>
+    </div>
+  );
+});

src/component/content/component/emoji/index.less

@@ -0,0 +1,32 @@
+.emojiBox {
+  width: 100%;
+  border: 1px solid rgba(115, 115, 115, 0.2);
+  .emojiMenu {
+    height: 32px;
+    a {
+      margin: 0 10px;
+      padding-bottom: 6px;
+      font-size: 13px;
+      cursor: pointer;
+    }
+    a.current {
+      border-bottom: 1px solid #424242;
+      cursor: not-allowed;
+    }
+  }
+}
+.container {
+  opacity: 0;
+  transform: translate3d(30px, 0, 0);
+  animation: show 0.3s forwards;
+}
+@keyframes show {
+  from {
+    opacity: 0;
+    transform: translate3d(30px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}

src/component/content/component/list/index.js

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { getCache, setTheme } from '@/util/util';
+import { replaceEmoji } from '../preview/util';
 import showdown from 'showdown';
 
 import styles from './index.less';
 
 const converter = new showdown.Converter();
 
-export default () => {
+export default memo(() => {
   const data = getCache('vive-list') || [];
   return (
     <div className={setTheme(styles.list, styles)}>
@@ -18,11 +19,13 @@ export default () => {
           </div>
           <div
             className={styles.comment}
-            dangerouslySetInnerHTML={{ __html: converter.makeHtml(comment) }}
+            dangerouslySetInnerHTML={{
+              __html: converter.makeHtml(replaceEmoji(comment)),
+            }}
           ></div>
           <div className={styles.line} />
         </div>
       ))}
     </div>
   );
-};
+});

src/component/content/component/list/index.less

@@ -2,6 +2,7 @@
 .list {
   display: flex;
   flex-direction: column;
+  margin-top: 10px;
   width: 100%;
   .listItem {
     display: flex;

src/component/content/component/preview/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import showdown from 'showdown';
+import { replaceEmoji } from './util';
 
 import styles from './index.less';
 
@@ -9,7 +10,10 @@ export default ({ value }) => {
   return (
     <div
       className={styles.preview}
-      dangerouslySetInnerHTML={{ __html: converter.makeHtml(value || '') }}
+      data="preview："
+      dangerouslySetInnerHTML={{
+        __html: converter.makeHtml(replaceEmoji(value) || ''),
+      }}
     />
   );
 };

src/component/content/component/preview/index.less

@@ -1,12 +1,27 @@
+@lightColor: #6b6b6b;
 .preview {
+  position: relative;
   border-top: 1px solid rgba(115, 115, 115, 0.2);
   padding: 10px;
+  padding-top: 20px;
   width: 100%;
   transform: translate3d(0, 30px, 0);
   opacity: 0;
   animation: show 0.5s forwards;
+  p {
+    display: flex;
+    flex-wrap: wrap;
+    line-height: 30px;
+  }
+}
+.preview::after {
+  content: attr(data);
+  position: absolute;
+  top: 0;
+  left: -1px;
+  font-size: 13px;
+  color: @lightColor;
 }
-
 @keyframes show {
   from {
     transform: translate3d(0, 30px, 0);

src/component/content/component/preview/util.js

@@ -0,0 +1,14 @@
+import { EMOJI_MAP } from '../emoji//component/emoji/constant';
+import { EMOJI_PREFIX } from '../emoji/constant';
+export function replaceEmoji(value) {
+  if (!value) return '';
+  return replace(value);
+}
+
+function replace(str) {
+  EMOJI_MAP.forEach(({ code, src }) => {
+    const reg = new RegExp(`${EMOJI_PREFIX}${code}${EMOJI_PREFIX}`);
+    str = str.replace(eval(`${reg}g`), `<img src="${src.default}"/>`);
+  });
+  return str;
+}