feat(mention): remove mention* props

#192
thematters · Aug 17, 2020 · e8ed3a3 · e8ed3a3
1 parent fda0267
commit e8ed3a3
Show file tree

Hide file tree

Showing 4 changed files with 0 additions and 148 deletions.
diff --git 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 (
-          <button
-            key={user.id}
-            type="button"
-            onClick={() => handleMentionClick(user)}
-            style={style}
-          >
-            {user.userName}
-          </button>
-        )
-      })}
-    </>
-  )
-}
-
 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
@@ -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<ResultData>
   eventName: string
   language: string
-  mentionLoading: boolean
-  mentionKeywordChange: (keyword: string) => void
-  mentionUsers: any
-  mentionListComponent: any
   readOnly: boolean
   siteDomain: string
   theme: string
@@ -37,22 +32,19 @@ interface Props {
 
 interface State {
   content: string
-  mentionInstance: any
   toolbarPosition: number
   toolbarVisible: boolean
 }
 
 export class MattersArticleEditor extends React.Component<Props, State> {
   private instance: Quill | null = null
   private editorReference = React.createRef<ReactQuill>()
-  private mentionReference = React.createRef<HTMLElement>()
   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<Props, State> {
   handleImageDrop = async (file: any): Promise<ResultData> =>
     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<Props, State> {
     }
   }
 
-  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<Props, State> {
         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<Props, State> {
             uploadAudioSizeLimit={this.props.uploadAudioSizeLimit}
             uploadImageSizeLimit={this.props.uploadImageSizeLimit}
           />
-          <MattersEditorMention
-            mentionLoading={this.props.mentionLoading}
-            mentionListComponent={this.props.mentionListComponent}
-            mentionSelection={this.handleMentionSelection}
-            mentionUsers={this.props.mentionUsers}
-            reference={this.mentionReference}
-          />
         </div>
       </>
     )

diff --git 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<Props, State> {
   private instance: Quill | null = null
   private editorReference = React.createRef<ReactQuill>()
-  private mentionReference = React.createRef<HTMLElement>()
   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<Props, State> {
     })
   }
 
-  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<Props, State> {
   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<Props, State> {
             bounds="#editor-comment-container"
             scrollingContainer={this.props.scrollingContainer}
           />
-
-          <MattersEditorMention
-            mentionLoading={this.props.mentionLoading}
-            mentionListComponent={this.props.mentionListComponent}
-            mentionSelection={this.handleMentionSelection}
-            mentionUsers={this.props.mentionUsers}
-            reference={this.mentionReference}
-          />
         </div>
       </>
     )

diff --git a/src/components/Mention/index.tsx b/src/components/Mention/index.tsx