From e8ed3a3b0c7b55933fb1bd26b709305e675010d9 Mon Sep 17 00:00:00 2001 From: RoberTu <4065233+robertu7@users.noreply.github.com> Date: Mon, 17 Aug 2020 09:44:42 +0800 Subject: [PATCH] feat(mention): remove `mention*` props https://github.com/thematters/matters-editor/issues/192 --- demo/index.tsx | 49 -------------------------------- src/article.tsx | 28 ------------------ src/comment.tsx | 26 ----------------- src/components/Mention/index.tsx | 45 ----------------------------- 4 files changed, 148 deletions(-) delete mode 100644 src/components/Mention/index.tsx diff --git a/demo/index.tsx b/demo/index.tsx index b30c5eca..998047f8 100644 --- a/demo/index.tsx +++ b/demo/index.tsx @@ -4,42 +4,6 @@ import { render } from 'react-dom' import { MattersArticleEditor, MattersCommentEditor } from '../src' -const demoMentionUsers = [ - { id: v4(), displayName: 'user1', userName: 'user1' }, - { id: v4(), displayName: 'user2', userName: 'user2' }, -] - -const DemoMentionList = ({ - mentionLoading, - mentionSelection, - mentionUsers, -}) => { - const style = { - width: '100%', - padding: '0.8rem 1rem', - textAlign: 'left' as const, - } - - const handleMentionClick = (user: any) => mentionSelection(user) - - return ( - <> - {mentionUsers.map((user) => { - return ( - - ) - })} - - ) -} - const App = () => { const eventName = 'demo-event' @@ -65,11 +29,6 @@ const App = () => { return { id: v4(), path: source } } - const mentionKeywordChange = (keyword: string) => { - // TODO: add search mention user api - // here we use defined demoMentionUsers for demo. - } - React.useEffect(() => { window.addEventListener(eventName, (data: any) => { // TODO: Process data and hook your notifier. @@ -85,10 +44,6 @@ const App = () => { editorUpload={editorUpload} eventName={eventName} language="EN" - mentionLoading={false} - mentionKeywordChange={mentionKeywordChange} - mentionUsers={demoMentionUsers} - mentionListComponent={DemoMentionList} readOnly={false} siteDomain="" theme="bubble" @@ -101,10 +56,6 @@ const App = () => { editorUpdate={(params) => setCommentContent(params.content)} eventName={eventName} language="EN" - mentionLoading={false} - mentionKeywordChange={mentionKeywordChange} - mentionUsers={demoMentionUsers} - mentionListComponent={DemoMentionList} readOnly={false} theme="bubble" /> diff --git a/src/article.tsx b/src/article.tsx index 0e968435..fb3348b6 100644 --- a/src/article.tsx +++ b/src/article.tsx @@ -3,7 +3,6 @@ import React from 'react' import ReactQuill, { Quill } from 'react-quill' import Util from './blots/Util' -import MattersEditorMention from './components/Mention' import MattersEditorTitle from './components/Title' import MattersEditorToolbar from './components/Toolbar' import { FORMAT_CONFIG, MODULE_CONFIG } from './configs/default' @@ -20,10 +19,6 @@ interface Props { editorUpload: (params: Params) => Promise eventName: string language: string - mentionLoading: boolean - mentionKeywordChange: (keyword: string) => void - mentionUsers: any - mentionListComponent: any readOnly: boolean siteDomain: string theme: string @@ -37,7 +32,6 @@ interface Props { interface State { content: string - mentionInstance: any toolbarPosition: number toolbarVisible: boolean } @@ -45,14 +39,12 @@ interface State { export class MattersArticleEditor extends React.Component { private instance: Quill | null = null private editorReference = React.createRef() - private mentionReference = React.createRef() private texts: Texts = null constructor(props: Props) { super(props) this.state = { content: this.props.editorContent, - mentionInstance: null, toolbarPosition: 0, toolbarVisible: false, } @@ -158,10 +150,6 @@ export class MattersArticleEditor extends React.Component { handleImageDrop = async (file: any): Promise => this.props.editorUpload({ file }) - handleMentionChange = (keyword: string) => { - this.props.mentionKeywordChange(keyword) - } - handleMentionSelection = ({ id, userName, displayName }) => { this.state.mentionInstance.insertMention({ id, @@ -191,9 +179,6 @@ export class MattersArticleEditor extends React.Component { } } - storeMentionInstance = (instance: any) => - this.setState({ mentionInstance: instance }) - render() { const classes = this.props.readOnly ? 'u-area-disable' : '' @@ -205,12 +190,6 @@ export class MattersArticleEditor extends React.Component { handleImageDrop: this.handleImageDrop, texts: this.texts, }, - mention: { - mentionContainer: - this.mentionReference && this.mentionReference.current, - handleMentionChange: this.handleMentionChange, - storeMentionInstance: this.storeMentionInstance, - }, } return ( @@ -247,13 +226,6 @@ export class MattersArticleEditor extends React.Component { uploadAudioSizeLimit={this.props.uploadAudioSizeLimit} uploadImageSizeLimit={this.props.uploadImageSizeLimit} /> - ) diff --git a/src/comment.tsx b/src/comment.tsx index 87f86083..64850cf7 100644 --- a/src/comment.tsx +++ b/src/comment.tsx @@ -2,7 +2,6 @@ import _debounce from 'lodash/debounce' import React from 'react' import ReactQuill, { Quill } from 'react-quill' -import MattersEditorMention from './components/Mention' import { FORMAT_CONFIG, MODULE_CONFIG } from './configs/comment' import { DEBOUNCE_DELAY, LANGUAGE } from './enums/common' import { TEXT } from './enums/text' @@ -13,10 +12,6 @@ interface Props { editorUpdate: (params: Params) => void eventName: string language: string - mentionLoading: boolean - mentionKeywordChange: (keyword: string) => void - mentionUsers: any - mentionListComponent: any readOnly: boolean theme: string texts?: Texts @@ -25,20 +20,17 @@ interface Props { interface State { content: string - mentionInstance: any } export class MattersCommentEditor extends React.Component { private instance: Quill | null = null private editorReference = React.createRef() - private mentionReference = React.createRef() private texts: Texts = null constructor(props: Props) { super(props) this.state = { content: this.props.editorContent, - mentionInstance: null, } this.texts = props.texts || TEXT[props.language] || TEXT[LANGUAGE.ZH_HANT] } @@ -67,10 +59,6 @@ export class MattersCommentEditor extends React.Component { }) } - handleMentionChange = (keyword: string) => { - this.props.mentionKeywordChange(keyword) - } - handleMentionSelection = ({ id, userName, displayName }) => { this.state.mentionInstance.insertMention({ id, @@ -107,12 +95,6 @@ export class MattersCommentEditor extends React.Component { render() { const modulesConfig = { ...MODULE_CONFIG, - mention: { - mentionContainer: - this.mentionReference && this.mentionReference.current, - handleMentionChange: this.handleMentionChange, - storeMentionInstance: this.storeMentionInstance, - }, } return ( @@ -130,14 +112,6 @@ export class MattersCommentEditor extends React.Component { bounds="#editor-comment-container" scrollingContainer={this.props.scrollingContainer} /> - - ) diff --git a/src/components/Mention/index.tsx b/src/components/Mention/index.tsx deleted file mode 100644 index 1e9b4060..00000000 --- a/src/components/Mention/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react' - -import SVGSpinner from '../../icons/Spinner' - -/** - * This component is a mention list container which will be visible when typing `@`. - * - * Usage: - * (
)} - * mentionUsers={[]} - * reference={} - * /> - */ - -interface Props { - mentionLoading: boolean - mentionListComponent: any - mentionSelection: any - mentionUsers: any[] - reference: React.RefObject -} - -export default ({ - mentionLoading, - mentionListComponent, - mentionSelection, - mentionUsers, - reference, -}: Props) => { - const hasMention = mentionUsers.length <= 0 && !mentionLoading - - return ( -
- {hasMention - ? null - : mentionListComponent({ - mentionLoading, - mentionSelection, - mentionUsers, - })} -
- ) -}