add flowtype and update index's title

freedomlang · freedomlang · commit a88aa2865782 · 2018-11-19T20:38:01.000+08:00
diff --git a/examples/linkify-example/public/index.html b/examples/linkify-example/public/index.html
@@ -7,7 +7,7 @@
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 
-    <title>@djsp/hashtag-example</title>
+    <title>@djsp/linkify-example</title>
   </head>
 
   <body>
diff --git a/examples/linkify-example/src/Link.js b/examples/linkify-example/src/Link.js
@@ -1,11 +1,21 @@
+// @flow
+
 import React, { Component } from 'react'
-import linkifyIt from 'linkify-it';
-import tlds from 'tlds';
+import { Plugin } from '@djsp/core'
+import linkStrategy from './linkStrategy'
+import linkifyIt from 'linkify-it'
+import tlds from 'tlds'
+import type { DraftDecoratorComponentProps } from 'draft-js'
+
+const linkify = linkifyIt()
+linkify.tlds(tlds)
 
-const linkify = linkifyIt();
-linkify.tlds(tlds);
+type Props = DraftDecoratorComponentProps & {
+  target?: string,
+  rel?: string,
+}
 
-export default class Hashtag extends Component {
+class LinkComponent extends Component<Props> {
   render() {
     const {
       decoratedText, // eslint-disable-line no-unused-vars
@@ -18,17 +28,30 @@ export default class Hashtag extends Component {
       ...otherProps
     } = this.props // eslint-disable-line no-use-before-define
 
-    const links = linkify.match(decoratedText);
-    const href = links && links[0] ? links[0].url : '';
+    const links = linkify.match(decoratedText)
+    const href = links && links[0] ? links[0].url : ''
 
     const props = {
       ...otherProps,
       href,
       target,
       rel,
       className: 'link',
-    };
+    }
 
-    return <a {...props} />
+    return <a {...props} /> // eslint-disable-line jsx-a11y/anchor-has-content
   }
 }
+
+export default function Link() {
+  return (
+    <Plugin
+      decorators={[
+        {
+          strategy: linkStrategy,
+          component: LinkComponent,
+        },
+      ]}
+    />
+  )
+}
diff --git a/examples/linkify-example/src/index.js b/examples/linkify-example/src/index.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
 import { EditorState, convertFromRaw } from 'draft-js'
-import { EditorContainer, Editor, Plugin } from '@djsp/core'
-import linkStrategy from './linkStrategy'
+import { EditorContainer, Editor } from '@djsp/core'
 import Link from './Link'
 import './styles.css'
 
@@ -30,14 +29,7 @@ class App extends Component {
           editorState={this.state.editorState}
           onChange={this.onChange}>
           <Editor />
-          <Plugin
-            decorators={[
-              {
-                strategy: linkStrategy,
-                component: Link,
-              },
-            ]}
-          />
+          <Link />
         </EditorContainer>
       </div>
     )
diff --git a/examples/linkify-example/src/linkStrategy.js b/examples/linkify-example/src/linkStrategy.js
@@ -1,19 +1,20 @@
 // @flow
 
-import linkifyIt from 'linkify-it';
-import tlds from 'tlds';
+import { ContentBlock } from 'draft-js'
+import linkifyIt from 'linkify-it'
+import tlds from 'tlds'
 
-const linkify = linkifyIt();
-linkify.tlds(tlds);
+const linkify = linkifyIt()
+linkify.tlds(tlds)
 
 // Gets all the links in the text, and returns them via the callback
-const linkStrategy = (contentBlock: Object, callback: Function) => {
-  const links = linkify.match(contentBlock.get('text'));
+const linkStrategy = (contentBlock: ContentBlock, callback: Function): void => {
+  const links = linkify.match(contentBlock.get('text'))
   if (typeof links !== 'undefined' && links !== null) {
     for (let i = 0; i < links.length; i += 1) {
-      callback(links[i].index, links[i].lastIndex);
+      callback(links[i].index, links[i].lastIndex)
     }
   }
-};
+}
 
-export default linkStrategy;
+export default linkStrategy
