refactor tile forms into own files. add full-width marquee support

1 files changed, 64 insertions, 0 deletions

diff --git a/frontend/app/views/tile/forms/tile.form.hyperlink.js b/frontend/app/views/tile/forms/tile.form.hyperlink.js
new file mode 100644
index 0000000..c444748
--- /dev/null
+++ b/frontend/app/views/tile/forms/tile.form.hyperlink.js
@@ -0,0 +1,64 @@
+import React from 'react'
+
+import {
+  TextInput,
+  Select,
+} from 'app/common'
+
+import {
+  CURSORS,
+  NO_LINK, EXTERNAL_LINK,
+  NO_POPUP, OPEN_POPUP_LINK, CLOSE_POPUP_LINK
+} from './tile.constants'
+
+export default function TileHyperlinkForm({ tile, pageList, popupList, parent }) {
+  const isExternalLink = tile.target_page_id === EXTERNAL_LINK
+  // const isPopupLink = (
+  //   tile.target_page_id === OPEN_POPUP_LINK ||
+  //   tile.target_page_id === CLOSE_POPUP_LINK
+  // )
+  return (
+    <div>
+      <div className={'row selects'}>
+        <Select
+          title=''
+          name='target_page_id'
+          selected={tile.target_page_id || NO_LINK}
+          options={pageList}
+          onChange={parent.handleSelect}
+        />
+        <Select
+          title=''
+          name='cursor'
+          selected={tile.settings.cursor}
+          options={CURSORS}
+          defaultOption="Cursor"
+          onChange={parent.handleSettingsSelect}
+        />
+      </div>
+      {isExternalLink && (
+        <div>
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="external_link_url"
+            data={tile.settings}
+            onChange={parent.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+      )}
+      {(tile.target_page_id === OPEN_POPUP_LINK || tile.target_page_id === CLOSE_POPUP_LINK) && (
+        <div className='row single'>
+          <Select
+            title="Popup"
+            name='target_popup'
+            selected={tile.settings.target_popup || NO_POPUP}
+            options={popupList}
+            onChange={parent.handleSettingsSelect}
+          />
+        </div>
+      )}
+    </div>
+  )
+}