1+ import Modal from "react-materialize/lib/Modal" ;
2+ import React from "react" ;
3+ import Button from "react-materialize/lib/Button" ;
4+ import Textarea from "react-materialize/lib/Textarea" ;
5+ import NeoModal from "./NeoModal" ;
6+ import NeoTextButton from "./NeoTextButton" ;
7+ import Icon from "react-materialize/lib/Icon" ;
8+ import NeoCheckBox from "./NeoCheckBox" ;
9+ import NeoButton from "./NeoButton" ;
10+ import NeoTextInput from "./NeoTextInput" ;
11+
12+ /**
13+ * A modal component used for saving/loading dashboards.
14+ * The content of the modal is a large multi-line textbox for specifying a dashboard file as JSON.
15+ */
16+ class NeoShareModal extends NeoModal {
17+ baseURL = "https://nielsdejong.nl/neodash/" ;
18+
19+ constructor ( props ) {
20+ super ( props ) ;
21+ }
22+
23+ /**
24+ * Draws the modal, creating a textbox defaulting to the current active dashboard state.
25+ */
26+ render ( ) {
27+ return (
28+
29+ < NeoModal header = { < div > < Icon > people</ Icon > Create Shareable Dashboard Link</ div > }
30+ root = { document . getElementById ( "root" ) }
31+ json = { this . props . json }
32+ actions = { [
33+ < NeoTextButton right
34+ color = { "red" }
35+ node = "button"
36+ onClick = { e => this . stateChanged ( { label : "RemoveShareLink" } ) }
37+ style = { {
38+ backgroundColor : "green" ,
39+ fontWeight : "bold" ,
40+ paddingRight : '0px' ,
41+ width : '50px' ,
42+ position : 'absolute' ,
43+ right : '20px' ,
44+ top : '20px'
45+ } }
46+ modal = "close"
47+ text = { < Icon > close</ Icon > }
48+ waves = "white" />
49+
50+ ] }
51+ trigger = {
52+ this . props . trigger
53+ }
54+ content = { < div >
55+ < hr />
56+ < p > To generate a shareable link for this dashboard,
57+ make it accessible < a href = { "https://gist.github.com/" } > online</ a > .
58+ Then, paste the < b > direct</ b > link here:</ p >
59+ < NeoTextInput defaultValue = { "" } onChange = { this . props . stateChanged }
60+ changeEventLabel = { "ShareLinkURLChanged" } label = { "" }
61+ placeholder = { 'https://gist.githubusercontent.com/nielsdejong/492736631e65200f4159486edd678c5b/raw/ccf94786e07981e2a04e1bf708fe3365244c2d83/neodash.md' } />
62+
63+ < p >
64+ < NeoCheckBox onChange = { this . props . stateChanged }
65+ changeEventLabel = { "ShareLinkCredentialsChanged" }
66+ label = { "Include Connection Details" }
67+ defaultValue = { ( this . props . connection ) ? "on" : "off" } >
68+
69+ </ NeoCheckBox > < span > </ span >
70+ < NeoCheckBox onChange = { this . stateChanged }
71+ changeEventLabel = { "ShareLinkPasswordChanged" }
72+ label = { "Include Password" }
73+ defaultValue = { ( this . props . password ) ? "on" : "off" } >
74+
75+ </ NeoCheckBox >
76+
77+
78+ </ p >
79+ < hr /> < br />
80+ { ( this . props . value && this . props . connection && ! this . props . password ) ?
81+ < p > Use this URL to load your dashboard, database URL, and username directly into NeoDash:</ p > : "" }
82+ { ( this . props . value && this . props . connection && this . props . password ) ?
83+ < p > Use this URL to load your dashboard, database URL, username, and password directly into NeoDash:</ p > : "" }
84+ { ( this . props . value && ! this . props . connection ) ?
85+ < p > Use this URL to load your dashboard directly into NeoDash:</ p > : "" }
86+
87+
88+ { ( this . props . value && ! this . props . value . startsWith ( "https%3A%2F%2Fgist.github.com" ) ) ?
89+ < Textarea
90+ style = { { minHeight : '120px' , whiteSpace : 'break-spaces' , textDecoration : "underline" } }
91+ id = "Textarea-13" l = { 12 } m = { 12 }
92+ s = { 12 } xl = { 12 } value = { this . generateShareLink ( ) }
93+ placeholder = { this . props . placeholder } />
94+ :
95+ < > </ >
96+ }
97+ { ( this . props . value && this . props . value . startsWith ( "https%3A%2F%2Fgist.github.com" ) ) ?
98+ < p > < b > That looks like a Github gist URL. Ensure you use a URL to the (raw) JSON instead.< br />
99+ For gists, these start with https://gist.githubusercontent.com, and can be found by clicking the 'raw' button on the Gist page.</ b > </ p > :
100+ < > </ >
101+ }
102+
103+ </ div > }
104+ />
105+ )
106+ }
107+
108+
109+ generateShareLink ( ) {
110+ if ( this . props . connectionValue ) {
111+ return this . baseURL + "?url=" + this . props . value + "&connection=" + this . props . connectionValue ;
112+ } else {
113+ return this . baseURL + "?url=" + this . props . value
114+ }
115+
116+ }
117+ }
118+
119+ export default ( NeoShareModal ) ;
0 commit comments