diff --git a/.gitignore b/.gitignore index ff08e31..8405bf9 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,6 @@ /node_modules # production -/dist \ No newline at end of file +/dist + +.DS_Store \ No newline at end of file diff --git a/package.json b/package.json index e348afe..8c2c030 100644 --- a/package.json +++ b/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" diff --git a/src/component/.DS_Store b/src/component/.DS_Store index 9862dac..323ccd4 100644 Binary files a/src/component/.DS_Store and b/src/component/.DS_Store differ diff --git a/src/component/content/component/emoji/component/emoji/constant.js b/src/component/content/component/emoji/component/emoji/constant.js new file mode 100644 index 0000000..5f028a9 --- /dev/null +++ b/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'), + }, +]; diff --git a/src/component/content/component/emoji/component/emoji/images/daku.png b/src/component/content/component/emoji/component/emoji/images/daku.png new file mode 100644 index 0000000..afd8df2 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/daku.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/daliuhan.png b/src/component/content/component/emoji/component/emoji/images/daliuhan.png new file mode 100644 index 0000000..6bb2abc Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/daliuhan.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/danyanxiao.png b/src/component/content/component/emoji/component/emoji/images/danyanxiao.png new file mode 100644 index 0000000..1a6ef95 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/danyanxiao.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/dianzan.png b/src/component/content/component/emoji/component/emoji/images/dianzan.png new file mode 100644 index 0000000..938bb2d Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/dianzan.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/fennu.png b/src/component/content/component/emoji/component/emoji/images/fennu.png new file mode 100644 index 0000000..8b54ba2 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/fennu.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/fennuhuaji.png b/src/component/content/component/emoji/component/emoji/images/fennuhuaji.png new file mode 100644 index 0000000..2fa3f21 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/fennuhuaji.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/guaiqiao.png b/src/component/content/component/emoji/component/emoji/images/guaiqiao.png new file mode 100644 index 0000000..86b2ede Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/guaiqiao.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/huaji.png b/src/component/content/component/emoji/component/emoji/images/huaji.png new file mode 100644 index 0000000..d459533 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/huaji.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/jingku.png b/src/component/content/component/emoji/component/emoji/images/jingku.png new file mode 100644 index 0000000..b664478 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/jingku.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/jingya.png b/src/component/content/component/emoji/component/emoji/images/jingya.png new file mode 100644 index 0000000..1c485c8 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/jingya.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/kewang.png b/src/component/content/component/emoji/component/emoji/images/kewang.png new file mode 100644 index 0000000..cf92347 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/kewang.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/liuhan.png b/src/component/content/component/emoji/component/emoji/images/liuhan.png new file mode 100644 index 0000000..fa88a84 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/liuhan.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/liuhan1.png b/src/component/content/component/emoji/component/emoji/images/liuhan1.png new file mode 100644 index 0000000..27a26d3 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/liuhan1.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/low.png b/src/component/content/component/emoji/component/emoji/images/low.png new file mode 100644 index 0000000..ab19b18 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/low.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/miyanxiao.png b/src/component/content/component/emoji/component/emoji/images/miyanxiao.png new file mode 100644 index 0000000..59f8c25 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/miyanxiao.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/miyanxiao1.png b/src/component/content/component/emoji/component/emoji/images/miyanxiao1.png new file mode 100644 index 0000000..e13e371 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/miyanxiao1.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/mojing.png b/src/component/content/component/emoji/component/emoji/images/mojing.png new file mode 100644 index 0000000..4d98536 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/mojing.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/moneyface.png b/src/component/content/component/emoji/component/emoji/images/moneyface.png new file mode 100644 index 0000000..7fe51db Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/moneyface.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/outu.png b/src/component/content/component/emoji/component/emoji/images/outu.png new file mode 100644 index 0000000..40d1b56 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/outu.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/qiang.png b/src/component/content/component/emoji/component/emoji/images/qiang.png new file mode 100644 index 0000000..88f8dc6 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/qiang.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/shuijiao.png b/src/component/content/component/emoji/component/emoji/images/shuijiao.png new file mode 100644 index 0000000..cfb6c5f Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/shuijiao.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/smile.png b/src/component/content/component/emoji/component/emoji/images/smile.png new file mode 100644 index 0000000..703dd7b Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/smile.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/tushe.png b/src/component/content/component/emoji/component/emoji/images/tushe.png new file mode 100644 index 0000000..a106fb9 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/tushe.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/weiqu.png b/src/component/content/component/emoji/component/emoji/images/weiqu.png new file mode 100644 index 0000000..c50f029 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/weiqu.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/xiaoxin.png b/src/component/content/component/emoji/component/emoji/images/xiaoxin.png new file mode 100644 index 0000000..4df6fa0 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/xiaoxin.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/xiaoyan.png b/src/component/content/component/emoji/component/emoji/images/xiaoyan.png new file mode 100644 index 0000000..62af89e Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/xiaoyan.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/xiexiao.png b/src/component/content/component/emoji/component/emoji/images/xiexiao.png new file mode 100644 index 0000000..6c5606b Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/xiexiao.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/xieyanxiao.png b/src/component/content/component/emoji/component/emoji/images/xieyanxiao.png new file mode 100644 index 0000000..ef3c595 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/xieyanxiao.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/yeah.png b/src/component/content/component/emoji/component/emoji/images/yeah.png new file mode 100644 index 0000000..19be52f Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/yeah.png differ diff --git a/src/component/content/component/emoji/component/emoji/images/yihuo.png b/src/component/content/component/emoji/component/emoji/images/yihuo.png new file mode 100644 index 0000000..99f9937 Binary files /dev/null and b/src/component/content/component/emoji/component/emoji/images/yihuo.png differ diff --git a/src/component/content/component/emoji/component/emoji/index.js b/src/component/content/component/emoji/component/emoji/index.js new file mode 100644 index 0000000..d1f889e --- /dev/null +++ b/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 ( +
+ {EMOJI_MAP.map((item) => ( + onAdd(item.code)} + > + + + ))} +
+ ); +}); diff --git a/src/component/content/component/emoji/component/emoji/index.less b/src/component/content/component/emoji/component/emoji/index.less new file mode 100644 index 0000000..64ba309 --- /dev/null +++ b/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); + } +} diff --git a/src/component/content/component/emoji/component/textEmoji/index.js b/src/component/content/component/emoji/component/textEmoji/index.js new file mode 100644 index 0000000..5052d61 --- /dev/null +++ b/src/component/content/component/emoji/component/textEmoji/index.js @@ -0,0 +1,5 @@ +import React from 'react'; + +export default () => { + return
etxt
; +}; diff --git a/src/component/content/component/emoji/constant.js b/src/component/content/component/emoji/constant.js new file mode 100644 index 0000000..5740056 --- /dev/null +++ b/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, + }, +]; diff --git a/src/component/content/component/emoji/index.js b/src/component/content/component/emoji/index.js new file mode 100644 index 0000000..b1522f2 --- /dev/null +++ b/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 ( +
+
+ {menus.map(({ code, text }) => ( + setKey(code)} + key={code} + > + {text} + + ))} +
+
+ +
+
+ ); +}); diff --git a/src/component/content/component/emoji/index.less b/src/component/content/component/emoji/index.less new file mode 100644 index 0000000..d749b7e --- /dev/null +++ b/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); + } +} diff --git a/src/component/content/component/list/index.js b/src/component/content/component/list/index.js index 8268823..627c422 100644 --- a/src/component/content/component/list/index.js +++ b/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 (
@@ -18,11 +19,13 @@ export default () => {
))} ); -}; +}); diff --git a/src/component/content/component/list/index.less b/src/component/content/component/list/index.less index be32a43..fe7aa4c 100644 --- a/src/component/content/component/list/index.less +++ b/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; diff --git a/src/component/content/component/preview/index.js b/src/component/content/component/preview/index.js index 99254ad..142ca12 100644 --- a/src/component/content/component/preview/index.js +++ b/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 (
); }; diff --git a/src/component/content/component/preview/index.less b/src/component/content/component/preview/index.less index e493be8..4851c68 100644 --- a/src/component/content/component/preview/index.less +++ b/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); diff --git a/src/component/content/component/preview/util.js b/src/component/content/component/preview/util.js new file mode 100644 index 0000000..ba37a4f --- /dev/null +++ b/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`), ``); + }); + return str; +} diff --git a/src/component/content/index.js b/src/component/content/index.js index a260313..d8d9853 100644 --- a/src/component/content/index.js +++ b/src/component/content/index.js @@ -3,40 +3,54 @@ import React, { useImperativeHandle, forwardRef, useContext, + useRef, } from 'react'; -import Preview from './component/preview'; -import List from './component/list'; import { ProviderCtx } from '@/util/context'; import { setTheme } from '@/util/util'; +import Preview from './component/preview'; +import List from './component/list'; +import Emoji from './component/emoji'; +import { EMOJI_PREFIX } from './component/emoji/constant'; + import styles from './index.less'; export default forwardRef((props, ref) => { const [data, setData] = useState(); - const [visible, setVisible] = useState(false); + // const [viewData, setviewData] = useState(); + const [preview, setVisible] = useState(true); + const [emojiVisible, setEmojiVisible] = useState(false); + const ref1 = useRef(); useImperativeHandle(ref, () => ({ getData: () => data })); const { placeholder = '' } = useContext(ProviderCtx); const { onSubmit } = props; + const onAdd = (code) => { + setData(`${data || ''}${EMOJI_PREFIX}${code}${EMOJI_PREFIX}`); + }; return (