107 |
152 | ) : (
153 |
154 |
156 | )}
157 | this.setNewThreadActive(true)}
250 | >
251 |
252 | Start New Thread
253 |
254 | );
255 | }
256 |
257 | /**
258 | * Used to check if the cardId passed in is the current expanded card
259 | *
260 | * @param threadId Type: string - CommentCard unique id
261 | * @return Type: boolean - True if cardId is expanded, false if cardId is not expanded
262 | */
263 | getExpandedCard(threadId: string): boolean {
264 | return threadId === this._provider.getState('expandedCard');
265 | }
266 |
267 | /**
268 | * Used to check if the cardId passed in has reply box active
269 | *
270 | * @param threadId Type: string - CommentCard unique id
271 | * @return type: boolean - True if cardId has reply box open, false if not active
272 | */
273 | getReplyActiveCard(threadId: string): boolean {
274 | return threadId === this._provider.getState('replyActiveCard');
275 | }
276 |
277 | /**
278 | * Sets this.state.expandedCard to the passed in cardId
279 | *
280 | * @param threadId Type: string - CommentCard unique id
281 | */
282 | setExpandedCard(threadId: string) {
283 | this._receiver.setState({ expandedCard: threadId });
284 |
285 | if (threadId === ' ') {
286 | this.setIsEditing('');
287 | this._backPressed.emit(void 0);
288 | }
289 |
290 | indicatorHandler.activeIndicatorWidget.scrollIntoView(threadId);
291 | }
292 |
293 | /**
294 | * Sets this.state.replyActiveCard to the passed in cardId
295 | *
296 | * @param threadId Type: string - CommentCard unique id
297 | */
298 | setReplyActiveCard(threadId: string) {
299 | this._receiver.setState({ replyActiveCard: threadId });
300 | }
301 |
302 | /**
303 | * Sets this.state fields for active new thread card
304 | *
305 | * @param state Type: boolean - State to set if new thread card is active
306 | * @param target Type: string - target of the file to add new thread to
307 | */
308 | setNewThreadActive(value: boolean) {
309 | this._receiver.setState({
310 | newThreadActive: value,
311 | newThreadFile: this._provider.getState('target')
312 | });
313 | }
314 |
315 | /**
316 | * Sets this.state.sortState to the selected sort by
317 | *
318 | * @param state Type: string - Sort by type
319 | */
320 | setSortState(value: string) {
321 | this._receiver.setState({ sortState: value });
322 | }
323 |
324 | /**
325 | * Sets this.state.showResolved to the state of the checkbox
326 | * "Show resolved"
327 | */
328 | setShowResolved(value: boolean) {
329 | this._receiver.setState({ showResolved: value });
330 | }
331 |
332 | /**
333 | * Used to check if a key is being edited
334 | *
335 | * @param key Type: string - key of what is being edited
336 | */
337 | checkIsEditing(key: string): boolean {
338 | return this._provider.getState('isEditing') === key;
339 | }
340 |
341 | /**
342 | * Used to set what is being edited
343 | *
344 | * @param key Type: string - key of what is being edited
345 | */
346 | setIsEditing(key: string): void {
347 | if (key === this._provider.getState('isEditing')) {
348 | return;
349 | }
350 |
351 | this._receiver.setState({ isEditing: key });
352 | }
353 |
354 | /**
355 | * Signal that is emitted when the commentingUI panel is opened or closed
356 | * args - boolean: true open, false closed
357 | */
358 | get showSignal(): ISignal{card}
);
50 |
51 | return (
52 |
59 | {!this.props.expanded && this.props.newThreadButton}
60 | {items}
61 |
62 | );
63 | }
64 |
65 | /**
66 | * CSS styles
67 | */
68 | styles = {
69 | 'jp-commenting-body-area': {
70 | width: '100%',
71 | maxHeight: '94%',
72 | overflowY: 'scroll' as 'scroll',
73 | overflowX: 'hidden' as 'hidden',
74 | boxSizing: 'border-box' as 'border-box',
75 | justifyContent: 'center',
76 | padding: '8px'
77 | },
78 | 'jp-commenting-body-area-expanded': {
79 | width: '100%',
80 | maxHeight: '96%',
81 | overflowY: 'scroll' as 'scroll',
82 | overflowX: 'hidden' as 'hidden',
83 | boxSizing: 'border-box' as 'border-box',
84 | justifyContent: 'center',
85 | padding: '8px'
86 | }
87 | };
88 | }
89 |
--------------------------------------------------------------------------------
/src/comments/components/AppHeader.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @license BSD-3-Clause
3 | *
4 | * Copyright (c) 2019 Project Jupyter Contributors.
5 | * Distributed under the terms of the 3-Clause BSD License.
6 | */
7 |
8 | import * as React from 'react';
9 |
10 | /**
11 | * React Props interface
12 | */
13 | interface IAppHeaderProps {
14 | /**
15 | * Tracks if card is expanded
16 | *
17 | * @type boolean
18 | */
19 | cardExpanded: boolean;
20 | /**
21 | * Receives the AppHeaderOption component for render purposes
22 | *
23 | * @type React.ReactNode
24 | */
25 | headerOptions: React.ReactNode;
26 | /**
27 | * Function to set the state of the current expanded card in "App.tsx"
28 | *
29 | * @param cardId - string: Card unique id
30 | */
31 | setExpandedCard: (cardId: string) => void;
32 | /**
33 | * Receives a value for a header
34 | *
35 | * @type string
36 | */
37 | target: string;
38 | /**
39 | * Tracks if the new thread window is active
40 | *
41 | * @type boolean
42 | */
43 | threadOpen: boolean;
44 | }
45 |
46 | /**
47 | * AppHeader React Component
48 | */
49 | export class AppHeader extends React.Component
69 |
79 | );
80 | }
81 |
82 | /**
83 | * Checks the state of New Thread
84 | *
85 | * @returns Type: React.ReactNode. If the New Thread is not open
86 | */
87 | shouldRenderOptions(): React.ReactNode {
88 | if (!this.props.threadOpen && !this.props.cardExpanded) {
89 | return
70 | {this.props.cardExpanded && this.props.target !== undefined && (
71 |
77 | {this.shouldRenderOptions()}
78 |
72 | {this.getBackButton()}
73 |
74 | )}
75 | {this.getAppHeader(this.props.target)}
76 | {this.props.headerOptions}
;
90 | } else {
91 | return ;
92 | }
93 | }
94 |
95 | /**
96 | * Checks the value of the header prop and returns a React component
97 | * with a value held by the header prop, or a header placeholder
98 | *
99 | * @param header Type: string
100 | * @return Type: React.ReactNode - App Header with correct string
101 | */
102 | getAppHeader(header: string): React.ReactNode {
103 | if (header === undefined) {
104 | return (
105 |
106 |
112 | );
113 | } else {
114 | return (
115 |
107 |
110 |
111 |
116 | {this.getFileIcon(this.props.target)}
117 |
123 | );
124 | }
125 | }
126 |
127 | /**
128 | * Strips the header of the extension ending and compares it to the list of supported extensions
129 | *
130 | * @param header Type: string
131 | * @return Type: React.ReactNode - span with a correct image class
132 | */
133 | getFileIcon(header: string): React.ReactNode {
134 | try {
135 | let extensionName = header.slice(header.indexOf('.'));
136 | for (let key in this.fileTypes) {
137 | for (let value in this.fileTypes[key].extensions) {
138 | if (extensionName === this.fileTypes[key].extensions[value]) {
139 | return (
140 |
118 |
121 |
122 |
141 |
145 |
146 | );
147 | }
148 | }
149 | }
150 | return (
151 |
152 |
156 |
157 | );
158 | } catch {
159 | return ;
160 | }
161 | }
162 | /**
163 | * Renders a back button inside the header
164 | *
165 | * @return Type: React.ReactNode -
166 | * Input button @type Image
167 | */
168 | getBackButton(): React.ReactNode {
169 | return (
170 |
174 | );
175 | }
176 |
177 | /**
178 | * Sets the state expandedCard to ' ' in App.tsx, which will shrink
179 | * or closes "New Thread" window
180 | */
181 | setShrink(): void {
182 | this.props.setExpandedCard(' ');
183 | }
184 |
185 | /**
186 | * Stores all the available file extension types
187 | */
188 | fileTypes = [
189 | {
190 | extensions: ['.md'],
191 | mimeTypes: ['text/markdown'],
192 | iconClass: 'jp-Icon jp-MarkdownIcon'
193 | },
194 | {
195 | extensions: ['.py'],
196 | mimeTypes: ['text/x-python'],
197 | iconClass: 'jp-Icon jp-PythonIcon'
198 | },
199 | {
200 | extensions: ['.ipynb'],
201 | mimeType: ['notebook'],
202 | iconClass: 'jp-Icon jp-NotebookIcon'
203 | },
204 | {
205 | extensions: ['.json'],
206 | mimeTypes: ['application/json'],
207 | iconClass: 'jp-Icon jp-JSONIcon'
208 | },
209 | {
210 | extensions: ['.csv'],
211 | mimeTypes: ['text/csv'],
212 | iconClass: 'jp-Icon jp-SpreadsheetIcon'
213 | },
214 | {
215 | extensions: ['.tsv'],
216 | mimeTypes: ['text/csv'],
217 | iconClass: 'jp-Icon jp-SpreadsheetIcon'
218 | },
219 | {
220 | mimeTypes: ['text/x-rsrc'],
221 | extensions: ['.r'],
222 | iconClass: 'jp-Icon jp-RKernelIcon'
223 | },
224 | {
225 | mimeTypes: ['text/x-yaml', 'text/yaml'],
226 | extensions: ['.yaml', '.yml'],
227 | iconClass: 'jp-Icon jp-YAMLIcon'
228 | },
229 | {
230 | mimeTypes: ['image/svg+xml'],
231 | extensions: ['.svg'],
232 | iconClass: 'jp-Icon jp-ImageIcon'
233 | },
234 | {
235 | mimeTypes: ['image/tiff'],
236 | extensions: ['.tif', '.tiff'],
237 | iconClass: 'jp-Icon jp-ImageIcon'
238 | },
239 | {
240 | mimeTypes: ['image/jpeg'],
241 | extensions: ['.jpg', '.jpeg'],
242 | iconClass: 'jp-Icon jp-ImageIcon'
243 | },
244 | {
245 | mimeTypes: ['image/gif'],
246 | extensions: ['.gif'],
247 | iconClass: 'jp-Icon jp-ImageIcon'
248 | },
249 | {
250 | mimeTypes: ['image/png'],
251 | extensions: ['.png'],
252 | iconClass: 'jp-Icon jp-ImageIcon'
253 | },
254 | {
255 | mimeTypes: ['image/bmp'],
256 | extensions: ['.bmp'],
257 | iconClass: 'jp-Icon jp-ImageIcon'
258 | }
259 | ];
260 |
261 | /**
262 | * App header styles
263 | */
264 | styles = {
265 | 'jp-commenting-app-header-area': {
266 | display: 'flex',
267 | flexDirection: 'column' as 'column',
268 | borderBottom: '1px solid var(--jp-border-color1)',
269 | boxSizing: 'border-box' as 'border-box'
270 | },
271 | 'jp-commenting-header-area': {
272 | display: 'flex',
273 | flexShrink: 1,
274 | flexDirection: 'row' as 'row',
275 | padding: '8px',
276 | minWidth: '52px'
277 | },
278 | 'jp-commenting-back-arrow-area': {
279 | display: 'flex',
280 | flexDirection: 'column' as 'column',
281 | justifyContent: 'center',
282 | width: '20px'
283 | },
284 | 'jp-commenting-header-back-arrow': {
285 | width: '12px',
286 | height: '12px',
287 | backgroundImage: 'var(--jp-image-back-arrow)',
288 | backgroundRepeat: 'no-repeat',
289 | backgroundSize: 'contain',
290 | cursor: 'pointer'
291 | },
292 | 'jp-commenting-header-target-area': {
293 | display: 'flex',
294 | flexDirection: 'row' as 'row',
295 | minWidth: '52px',
296 | flexShrink: 1
297 | },
298 | 'jp-commenting-header-target-icon-area': {
299 | display: 'flex'
300 | },
301 | 'jp-commenting-header-target-icon': {
302 | minWidth: '20px',
303 | minHeight: '20px',
304 | backgroundSize: '20px'
305 | },
306 | 'jp-commenting-header-label-area': {
307 | paddingLeft: '4px',
308 | textAlign: 'left' as 'left',
309 | whiteSpace: 'nowrap' as 'nowrap',
310 | overflow: 'hidden',
311 | textOverflow: 'ellipsis',
312 | flexShrink: 1
313 | },
314 | 'jp-commenting-header-label': {
315 | fontSize: 'var(--jp-ui-font-size1)',
316 | color: 'var(--jp-ui-font-color1)'
317 | }
318 | };
319 | }
320 |
--------------------------------------------------------------------------------
/src/comments/components/AppHeaderOptions.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @license BSD-3-Clause
3 | *
4 | * Copyright (c) 2019 Project Jupyter Contributors.
5 | * Distributed under the terms of the 3-Clause BSD License.
6 | */
7 |
8 | import * as React from 'react';
9 |
10 | /**
11 | * React Props interface
12 | */
13 | interface IAppHeaderOptionsProps {
14 | /**
15 | * Function to set the state of the current sort option in "App.tsx"
16 | *
17 | * @param state - string: card sort controller
18 | *
19 | * @type void function
20 | */
21 | setSortState: (state: string) => void;
22 | /**
23 | * Function to set the resolved state. Controls if resolved comments are shown in "App.tsx"
24 | *
25 | * @type void function
26 | */
27 | showResolvedState: (state: boolean) => void;
28 | /**
29 | * State of if a card is currently expanded
30 | *
31 | * @type boolean
32 | */
33 | cardExpanded: boolean;
34 | /**
35 | * Current target name
36 | *
37 | * @type string
38 | */
39 | target: string;
40 | /**
41 | * Tracks if the current open thread had cards
42 | *
43 | * @type boolean
44 | */
45 | hasThreads: boolean;
46 | /**
47 | * Tracks when to show resolved threads
48 | *
49 | * @type boolean
50 | */
51 | showResolved: boolean;
52 | /**
53 | * String that tracks what to sort by
54 | *
55 | * @type string
56 | */
57 | sortState: string;
58 | }
59 |
60 | /**
61 | * React State Interface
62 | */
63 | interface IAppHeaderOptionsState {
64 | /**
65 | * dropdown state, shows dropdown menu if true
66 | *
67 | * @type boolean
68 | */
69 | isOpen: boolean;
70 | }
71 |
72 | /**
73 | * AppHeaderOptions React Component
74 | */
75 | export class AppHeaderOptions extends React.Component<
76 | IAppHeaderOptionsProps,
77 | IAppHeaderOptionsState
78 | > {
79 | /**
80 | * Constructor
81 | *
82 | * @param props React props
83 | */
84 | constructor(props: IAppHeaderOptionsProps) {
85 | super(props);
86 |
87 | this.state = { isOpen: false };
88 |
89 | this.setResolvedState = this.setResolvedState.bind(this);
90 | this.matchCheckBoxState = this.matchCheckBoxState.bind(this);
91 | this.toggleOpen = this.toggleOpen.bind(this);
92 | }
93 |
94 | /**
95 | * Checks the state of the component and controlls Show Resolved
96 | */
97 | componentDidMount(): void {
98 | if (document.getElementById('controls') !== null) {
99 | this.matchCheckBoxState();
100 | }
101 | }
102 |
103 | /**
104 | * React render function
105 | */
106 | render() {
107 | const menuClass = `jp-commenting-header-options-dropdown-menu${
108 | this.state.isOpen ? ' show' : ''
109 | }`;
110 | return (
111 |
112 |
122 | );
123 | }
124 |
125 | /**
126 | * Renders the checkbox and label
127 | *
128 | * @return React.ReactNode
129 | */
130 | getCheckbox(): React.ReactNode {
131 | return (
132 |
113 | {this.getCheckbox()}
114 | {this.getDropdown()}
115 |
116 |
119 |
121 | {this.getSortItems()}
120 |
135 |
180 | );
181 | }
182 |
183 | /**
184 | * Renders the dropdown menu and label
185 | *
186 | * @return React.ReactNode
187 | */
188 | getDropdown(): React.ReactNode {
189 | return (
190 |
140 |
155 |
156 |
163 |
167 | this.setResolvedState(
168 | document.getElementById('controls') as HTMLInputElement
169 | )
170 | }
171 | className={'bp3-checkbox'}
172 | disabled={
173 | this.props.cardExpanded ||
174 | this.props.target === undefined ||
175 | !this.props.hasThreads
176 | }
177 | />
178 |
179 |
194 |
225 | );
226 | }
227 |
228 | /**
229 | * Gets values for the dropdown menu
230 | *
231 | * @returns React.ReactNode with dropdown menu items
232 | */
233 | getSortItems(): React.ReactNode {
234 | let table = [];
235 | for (let key in this.sortItems) {
236 | table.push(
237 | this.setSortState(this.sortItems[key].state)}
246 | >
247 | {this.sortItems[key].name}
248 |
249 | );
250 | }
251 | return table;
252 | }
253 |
254 | /**
255 | * Sets "showResolved" state in "App.tsx"
256 | */
257 | setResolvedState(e: HTMLInputElement) {
258 | this.props.showResolvedState(e.checked);
259 | }
260 |
261 | /**
262 | * Sets "sortState" state in "App.tsx"
263 | * Adds a name to the Sort by: label
264 | *
265 | * @param state Type: string - Passed as an argument to the SetSortState function in "App.tsx"
266 | * @param name Type: string - Assigns passed value to show as a Sort by: label
267 | */
268 | setSortState(state: string) {
269 | this.toggleOpen();
270 | this.props.setSortState(state);
271 | }
272 |
273 | /**
274 | * Sets the "isOpen" state to control the dropdown menu
275 | */
276 | toggleOpen(): void {
277 | (!this.props.target === undefined || this.props.hasThreads) &&
278 | this.setState({
279 | isOpen: !this.state.isOpen
280 | });
281 | }
282 |
283 | /**
284 | * Sets the resolve state based on the state of the checkbox
285 | */
286 | matchCheckBoxState(): void {
287 | let checkBox: HTMLInputElement = document.getElementById(
288 | 'controls'
289 | ) as HTMLInputElement;
290 |
291 | checkBox.checked = this.props.showResolved;
292 | }
293 |
294 | /**
295 | * Dropdown menu items
296 | */
297 | sortItems = [
298 | { name: 'Latest Reply', state: 'latest' },
299 | { name: 'Date Created', state: 'date' },
300 | { name: 'Most Replies', state: 'mostReplies' }
301 | ];
302 |
303 | /**
304 | * Custom styles
305 | */
306 | styles = {
307 | optionBar: {
308 | height: '24px',
309 | display: 'flex',
310 | flexDirection: 'row' as 'row',
311 | justifyContent: 'center'
312 | },
313 | 'jp-commenting-header-options-showResolved-area': {
314 | height: '24px',
315 | display: 'flex',
316 | flexDirection: 'row' as 'row',
317 | paddingRight: '8px',
318 | width: '50%',
319 | minWidth: '50px',
320 | flexShrink: 1
321 | },
322 | 'jp-commenting-header-options-showResolved-label-area': {
323 | display: 'flex',
324 | justifyContent: 'center',
325 | flexDirection: 'column' as 'column',
326 | flexShrink: 1,
327 |
328 | whiteSpace: 'nowrap' as 'nowrap',
329 | overflow: 'hidden',
330 |
331 | height: '24px',
332 | minWidth: '52px',
333 |
334 | textAlign: 'right' as 'right',
335 | paddingLeft: '8px',
336 | paddingRight: '8px'
337 | },
338 | 'jp-commenting-header-options-showResolved-label-enable': {
339 | fontSize: 'var(--jp-ui-font-size1)',
340 | color: 'var(--jp-ui-font-color1)',
341 | fontWeight: '600'
342 | },
343 | 'jp-commenting-header-options-showResolved-label-disable': {
344 | fontSize: 'var(--jp-ui-font-size1)',
345 | color: 'var(--md-grey-300)'
346 | },
347 | 'jp-commenting-header-options-showResolved-checkbox-area': {
348 | alignSelf: 'center',
349 | minWidth: '20px'
350 | },
351 | 'jp-commenting-header-options-dropdown-area': {
352 | height: '24px',
353 | display: 'flex',
354 | flexDirection: 'row' as 'row',
355 | borderLeft: '1px solid var(--jp-border-color2)',
356 | width: '50%',
357 | minWidth: '50px',
358 | flexShrink: 1
359 | },
360 | 'jp-commenting-header-options-dropdown-label-area': {
361 | display: 'flex',
362 | justifyContent: 'center',
363 | flexDirection: 'column' as 'column',
364 | flexShrink: 1,
365 |
366 | overflow: 'hidden',
367 | whiteSpace: 'nowrap' as 'nowrap',
368 |
369 | height: '24px',
370 | paddingLeft: '8px',
371 | paddingRight: '4px',
372 | minWidth: '10px',
373 | width: '100%'
374 | },
375 | 'jp-commenting-header-options-dropdown-label-enabled': {
376 | lineHeight: 'normal',
377 | fontSize: '13px',
378 | color: 'var(--jp-ui-font-color1)'
379 | },
380 | 'jp-commenting-header-options-dropdown-label-disabled': {
381 | lineHeight: 'normal',
382 | fontSize: '13px',
383 | color: 'var(--md-grey-300)'
384 | },
385 | 'jp-commenting-header-options-dropdown-button-area': {
386 | display: 'flex',
387 | height: '24px',
388 | width: '40px',
389 | minWidth: '40px'
390 | },
391 | 'jp-commenting-header-options-dropdown-menu-area': {},
392 | 'jp-commenting-header-options-dropdown-button': {
393 | minWidth: '40px',
394 | minHeight: '24px',
395 | backgroundImage: 'var(--jp-icon-caretdown)',
396 | backgroundRepeat: 'no-repeat',
397 | backgroundPosition: 'center'
398 | }
399 | };
400 | }
401 |
--------------------------------------------------------------------------------
/src/comments/components/Comment.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @license BSD-3-Clause
3 | *
4 | * Copyright (c) 2019 Project Jupyter Contributors.
5 | * Distributed under the terms of the 3-Clause BSD License.
6 | */
7 |
8 | import * as React from 'react';
9 |
10 | interface ICommentProps {
11 | /**
12 | * The contents of the comment by the user
13 | *
14 | * @type string
15 | */
16 | context: string;
17 | /**
18 | * Deletes a comment based on index
19 | *
20 | * @param index Type: number - index of comment
21 | */
22 | deleteComment(index: number): void;
23 | /**
24 | * State when the CommentCard is expanded
25 | *
26 | * @type string
27 | */
28 | expanded: boolean;
29 | /**
30 | * State when the comment is edited
31 | *
32 | * @type boolean
33 | */
34 | edited: boolean;
35 | /**
36 | * Handles expanding
37 | *
38 | * @type void
39 | */
40 | handleShouldExpand: (state: boolean) => void;
41 | /**
42 | * Index of comment in datastore
43 | */
44 | index: number;
45 | /**
46 | * Checks if a comment is being edited
47 | *
48 | * @param key Type: string - key of what is being edited,
49 | * for comment it is the index
50 | */
51 | isEditing(key: string): boolean;
52 | /**
53 | * Name of person commenting
54 | *
55 | * @type string
56 | */
57 | name: string;
58 | /**
59 | * Source of the profile picture
60 | *
61 | * @type string
62 | */
63 | photo: string;
64 | /**
65 | * Used to update a comment to the edited value
66 | *
67 | * @param comment Type: string - new comment to push
68 | * @param index Type: number - index of comment to push edits to
69 | */
70 | pushEdit(comment: string, index: number): void;
71 | /**
72 | * State if thread is resolved
73 | *
74 | * @type boolean
75 | */
76 | resolved: boolean;
77 | /**
78 | * Handles setting the state of isEditing
79 | *
80 | * @param key Type: string - sets the state to the given key (index)
81 | */
82 | setIsEditing(key: string): void;
83 | /**
84 | * Time comment was made
85 | *
86 | * @type string
87 | */
88 | timestamp: string;
89 | }
90 |
91 | /**
92 | * Comment React States
93 | */
94 | interface ICommentStates {
95 | /**
96 | * Tracks if the comment was edited when the edit button is clicked
97 | */
98 | contextEdited: boolean;
99 | /**
100 | * Text of the edit box
101 | */
102 | editBox: string;
103 | /**
104 | * Boolean to track if mouse is hovering over comment
105 | */
106 | hover: boolean;
107 | }
108 |
109 | /**
110 | * Comment React Component
111 | */
112 | export class Comment extends React.Component
199 |
214 |
215 |
220 |
223 |
224 |
139 |
175 | ) : (
176 |
142 |
167 |
143 | 
147 |
148 |
149 |
166 |
150 |
154 | 151 | {this.props.name} 152 |
153 |
155 |
165 | 160 | {(this.props.edited && 161 | 'Edited on: ' + this.getStyledTimeStamp()) || 162 | this.getStyledTimeStamp()} 163 |
164 |
168 |
174 | 169 | {this.props.context.length >= 125 && !this.props.expanded 170 | ? this.props.context.slice(0, 125) + '...' 171 | : this.props.context} 172 |
173 | this.handleMouseOver()}
179 | onMouseLeave={() => this.handleMouseLeave()}
180 | >
181 |
260 | );
261 | }
262 |
263 | /**
264 | * Handles key events
265 | *
266 | * @param e Type: React.KeyboardEvent - keyboard event
267 | */
268 | handleKeyPress(e: React.KeyboardEvent): void {
269 | // Handles saving on enter key
270 | if (this.state.editBox.trim() !== '' && e.key === 'Enter' && !e.shiftKey) {
271 | this.handleEditSaveButton();
272 | document.getElementById('commentBox').blur();
273 | }
274 | }
275 |
276 | /**
277 | * Handles when the edit box changes
278 | *
279 | * @param e Type: React.ChangeEvent
182 |
234 |
183 |
187 |
188 |
189 |
233 |
190 |
194 | 191 | {this.props.name} 192 |
193 |
195 |
232 | 196 | {(this.props.edited && 197 | 'Edited on: ' + this.getStyledTimeStamp()) || 198 | this.getStyledTimeStamp()} 199 |
200 | {this.state.hover && 201 | this.props.expanded && 202 | !this.props.isEditing(this.props.index.toString()) && ( 203 |
206 |
230 | )}
231 | 207 | • 208 |
209 | { 213 | this.setState({ editBox: '' }); 214 | this.props.setIsEditing(this.props.index.toString()); 215 | }} 216 | > 217 | Edit 218 | 219 |220 | • 221 |
222 | this.props.deleteComment(this.props.index)} 226 | > 227 | Delete 228 | 229 |
235 | {this.props.isEditing(this.props.index.toString()) &&
236 | this.props.expanded ? (
237 |
250 | ) : (
251 |
259 | 252 | {this.props.context.length >= 125 && !this.props.expanded 253 | ? this.props.context.slice(0, 125) + '...' 254 | : this.props.context} 255 |
256 | )} 257 | {this.getEditButtons()} 258 |
320 | {this.getEditSaveButton()}
321 | {this.getEditCancelButton()}
322 |
323 | );
324 | }
325 | }
326 |
327 | /**
328 | * Creates and returns reply button
329 | *
330 | * @return Type: React.ReactNode
331 | */
332 | getEditSaveButton(): React.ReactNode {
333 | return (
334 |
342 | );
343 | }
344 |
345 | /**
346 | * Creates and returns cancel button
347 | *
348 | * @return Type: React.ReactNode
349 | */
350 | getEditCancelButton(): React.ReactNode {
351 | return (
352 |
359 | );
360 | }
361 |
362 | /**
363 | * Handles hover state when mouse is over comment
364 | */
365 | handleMouseOver(): void {
366 | this.setState({ hover: true });
367 | }
368 |
369 | /**
370 | * Handles hover state when mouse leaves comment area
371 | */
372 | handleMouseLeave(): void {
373 | this.setState({ hover: false });
374 | }
375 |
376 | /**
377 | * Styles the time stamp
378 | *
379 | * @return - String: time stamp string
380 | */
381 | getStyledTimeStamp(): string {
382 | let serverTimeStamp = new Date(this.props.timestamp);
383 | let localTimeStamp = serverTimeStamp.toLocaleString();
384 | let fullDate = localTimeStamp.split(',')[0].split('/');
385 | let fullTime = localTimeStamp.split(',')[1].split(':');
386 | let timeIdentifier = fullTime[2].slice(3).toLowerCase();
387 |
388 | let month: { [key: string]: String } = {
389 | '1': 'Jan',
390 | '2': 'Feb',
391 | '3': 'Mar',
392 | '4': 'Apr',
393 | '5': 'May',
394 | '6': 'Jun',
395 | '7': 'Jul',
396 | '8': 'Aug',
397 | '9': 'Sep',
398 | '10': 'Oct',
399 | '11': 'Nov',
400 | '12': 'Dec'
401 | };
402 | let timestamp =
403 | month[fullDate[0]] +
404 | ' ' +
405 | fullDate[1] +
406 | fullTime[0] +
407 | ':' +
408 | fullTime[1] +
409 | timeIdentifier;
410 | return timestamp;
411 | }
412 | /**
413 | * CSS Styles
414 | */
415 | styles = {
416 | 'jp-commenting-annotation-thread': {
417 | background: 'var(--jp-layout-color1)'
418 | },
419 | 'jp-commenting-annotation-thread-resolved': {
420 | background: 'var(--jp-layout-color2)'
421 | },
422 | 'jp-commenting-annotation-upper-area': {
423 | display: 'flex',
424 | flexDirection: 'row' as 'row',
425 | boxSizing: 'border-box' as 'border-box',
426 | background: 'var(--jp-layout-color1)',
427 | marginBottom: '8px'
428 | },
429 | 'jp-commenting-annotation-upper-area-resolved': {
430 | display: 'flex',
431 | flexDirection: 'row' as 'row',
432 | boxSizing: 'border-box' as 'border-box',
433 | background: 'var(--jp-layout-color2)'
434 | },
435 | 'jp-commenting-annotation-info-area': {
436 | display: 'flex',
437 | flexDirection: 'column' as 'column',
438 | flexShrink: 1,
439 | minWidth: '52px',
440 | width: '100%',
441 | boxSizing: 'border-box' as 'border-box'
442 | },
443 | 'jp-commenting-annotation-photo-area': {
444 | display: 'flex'
445 | },
446 | 'jp-commenting-annotation-photo': {
447 | height: '2em',
448 | width: '2em',
449 | borderRadius: 'var(--jp-border-radius)'
450 | },
451 | 'jp-commenting-annotation-photo-resolved': {
452 | height: '28px',
453 | width: '28px',
454 | opacity: 0.5,
455 | borderRadius: 'var(--jp-border-radius)'
456 | },
457 | 'jp-commenting-annotation-name-area': {
458 | display: 'flex',
459 | flexShrink: 1,
460 | minWidth: '52px',
461 | boxSizing: 'border-box' as 'border-box'
462 | },
463 | 'jp-commenting-annotation-name': {
464 | fontSize: '13px',
465 | color: 'var(--jp-ui-font-color1)',
466 | fontWeight: 'bold' as 'bold',
467 | whiteSpace: 'nowrap' as 'nowrap',
468 | overflow: 'hidden',
469 | textOverflow: 'ellipsis',
470 | margin: '0px'
471 | },
472 | 'jp-commenting-annotation-name-resolved': {
473 | fontSize: '13px',
474 | color: 'var(--jp-ui-font-color2)',
475 | fontWeight: 'bold' as 'bold',
476 | whiteSpace: 'nowrap' as 'nowrap',
477 | overflow: 'hidden',
478 | textOverflow: 'ellipsis',
479 | margin: '0px'
480 | },
481 | 'jp-commenting-annotation-timestamp-area': {
482 | display: 'flex',
483 | minWidth: '32px',
484 | flexShrink: 1,
485 | boxSizing: 'border-box' as 'border-box'
486 | },
487 | 'jp-commenting-annotation-timestamp': {
488 | fontSize: '.7em',
489 | color: 'var(--jp-ui-font-color1)',
490 | whiteSpace: 'nowrap' as 'nowrap',
491 | overflow: 'hidden',
492 | textOverflow: 'ellipsis'
493 | },
494 | 'jp-commenting-annotation-edited': {
495 | fontSize: '.7em',
496 | color: 'var(--jp-ui-font-color1)',
497 | whiteSpace: 'nowrap' as 'nowrap',
498 | overflow: 'hidden',
499 | textOverflow: 'ellipsis'
500 | },
501 | 'jp-commenting-annotation-more-area': {
502 | display: 'flex',
503 | flexDirection: 'row' as 'row',
504 | minWidth: '64px',
505 | flexShrink: 1,
506 | paddingRight: '4px',
507 | boxSizing: 'border-box' as 'border-box'
508 | },
509 | 'jp-commenting-annotation-more': {
510 | display: 'flex',
511 | fontSize: '.7em',
512 | paddingLeft: '2px',
513 | paddingRight: '2px',
514 | color: 'var(--jp-ui-font-color1)',
515 | boxSizing: 'border-box' as 'border-box'
516 | },
517 | 'jp-commenting-annotation-timestamp-resolved': {
518 | fontSize: '.7em',
519 | color: 'var(--jp-ui-font-color2)',
520 | whiteSpace: 'nowrap' as 'nowrap',
521 | overflow: 'hidden',
522 | textOverflow: 'ellipsis'
523 | },
524 | 'jp-commenting-annotation-area': {
525 | display: 'flex',
526 | flexDirection: 'column' as 'column',
527 | maxHeight: '100%',
528 | maxWidth: '350px',
529 | boxSizing: 'border-box' as 'border-box',
530 | paddingBottom: '4px',
531 | paddingLeft: '4px',
532 | paddingRight: '4px',
533 | background: 'var(--jp-layout-color1)'
534 | },
535 | 'jp-commenting-annotation': {
536 | fontSize: '12px',
537 | color: 'var(--jp-ui-font-color1)',
538 | lineHeight: 'normal'
539 | },
540 | 'jp-commenting-annotation-area-resolved': {
541 | display: 'flex',
542 | maxHeight: '100%',
543 | maxWidth: '350px',
544 | boxSizing: 'border-box' as 'border-box',
545 | paddingBottom: '4px',
546 | paddingLeft: '4px',
547 | paddingRight: '4px',
548 | background: 'var(--jp-layout-color2)'
549 | },
550 | 'jp-commenting-annotation-resolved': {
551 | fontSize: '12px',
552 | color: 'var(--jp-ui-font-color2)',
553 | lineHeight: 'normal'
554 | },
555 | 'jp-commenting-annotation-edit-buttons-area': {
556 | display: 'flex',
557 | padding: '4px'
558 | }
559 | };
560 | }
561 |
--------------------------------------------------------------------------------
/src/comments/components/CommentBody.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @license BSD-3-Clause
3 | *
4 | * Copyright (c) 2019 Project Jupyter Contributors.
5 | * Distributed under the terms of the 3-Clause BSD License.
6 | */
7 |
8 | import * as React from 'react';
9 |
10 | /**
11 | * React Props interface
12 | */
13 | interface ICommentBodyProps {
14 | /**
15 | * List of ReactNode Comment components to be rendered to the CommentCardBody
16 | *
17 | * @type ReactNode[]
18 | */
19 | comments: React.ReactNode[];
20 | /**
21 | * Tracks if card is expanded
22 | *
23 | * @type boolean
24 | */
25 | expanded: boolean;
26 | /**
27 | * Tracks if a thread is resolved
28 | *
29 | * @type boolean
30 | */
31 | resolved: boolean;
32 | }
33 |
34 | const _maxCommentsPerShrinkThread: number = 3;
35 |
36 | /**
37 | * CommentBody React Component
38 | */
39 | export class CommentBody extends React.Component
55 | {this.getComments()}
56 |
57 | );
58 | }
59 |
60 | /**
61 | * Returns and organized all Comment components passed in this.props.comments
62 | *
63 | * @return Type: React.ReactNode[] - array of Comment components
64 | */
65 | getComments(): React.ReactNode {
66 | let items: React.ReactNode;
67 | if (this.props.comments != null) {
68 | if (
69 | this.props.comments.length <= _maxCommentsPerShrinkThread ||
70 | this.props.expanded
71 | ) {
72 | // Maps each Comment component into an individual div tag
73 | items = this.props.comments.map((props, i) => (
74 | {props}
75 | ));
76 | } else if (!this.props.expanded) {
77 | items = (
78 |
87 |
91 |
93 | );
94 | }
95 | } else {
96 | items = '';
97 | }
98 | return items;
99 | }
100 |
101 | /**
102 | * CSS styles
103 | */
104 | styles = {
105 | 'jp-commenting-annotation-body-area': {
106 | padding: '0px'
107 | },
108 | 'jp-commenting-more-annotations-icon': {
109 | minWidth: '28px',
110 | minHeight: '28px',
111 | backgroundSize: '28px',
112 | transform: 'rotate(90deg)'
113 | },
114 | 'jp-commenting-more-annotations-icon-area': {
115 | background: 'var(--jp-layout-color1)'
116 | },
117 | 'jp-commenting-more-annotations-icon-area-resolved': {
118 | background: 'var(--jp-layout-color2)'
119 | }
120 | };
121 | }
122 |
--------------------------------------------------------------------------------
/src/comments/components/CommentCard.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @license BSD-3-Clause
3 | *
4 | * Copyright (c) 2019 Project Jupyter Contributors.
5 | * Distributed under the terms of the 3-Clause BSD License.
6 | */
7 |
8 | import * as React from 'react';
9 |
10 | // Components
11 | import { CommentHeader } from './CommentHeader';
12 | import { CommentBody } from './CommentBody';
13 | import { CommentFooter } from './CommentFooter';
14 | import { Comment } from './Comment';
15 | import { ICommentThread } from '../service';
16 |
17 | /**
18 | * React Props interface
19 | */
20 | interface ICommentCardProps {
21 | /**
22 | * Function to check if the given cardID is the current expanded card
23 | *
24 | * @param cardId - string: Card unique id
25 | *
26 | * @return boolean: true if card is expanded, false if not
27 | */
28 | checkExpandedCard(cardId: string): boolean;
29 | /**
30 | * Used to check if the threadId passed in has reply box active
31 | *
32 | * @param threadId Type: string - CommentCard unique id
33 | *
34 | * @return type: boolean - True if cardId has reply box open, false if not active
35 | */
36 | checkReplyActiveCard(cardId: string): boolean;
37 | /**
38 | * Used to check if a key is being edited
39 | *
40 | * @param key Type: string - key of what is being edited
41 | *
42 | * @return type boolean: true if editing, false if not editing
43 | */
44 | checkIsEditing(key: string): boolean;
45 | /**
46 | * Comment thread data
47 | *
48 | * @type ICommentThread
49 | */
50 | data: ICommentThread;
51 | /**
52 | * Used to delete a comment in a comment thread
53 | *
54 | * @param threadId Type: string - id of thread that contains comment to delete
55 | * @param index Type: number - index of comment in the comment data store to delete
56 | */
57 | deleteComment(threadId: string, index: number): void;
58 | /**
59 | * Adds comment to comment data store
60 | *
61 | * @param target Type: string - path of the file the comment relates to
62 | * @param threadId Type: string - id of the thread the comment relates to
63 | * @param value Type: string - value of comment
64 | */
65 | putComment(target: string, threadId: string, value: string): void;
66 | /**
67 | * Updates a comment with a new value
68 | *
69 | * @param target Type: string - path of the file the comment relates to
70 | * @param threadId Type: string - id of the thread that contains the comment
71 | * @param value Type: string
72 | * @param index
73 | */
74 | putCommentEdit(
75 | target: string,
76 | threadId: string,
77 | value: string,
78 | index: number
79 | ): void;
80 | /**
81 | *
82 | * @param threadId Type: string - id of the thread to be edited
83 | * @param value Type: string - new value of thread content
84 | */
85 | putThreadEdit(threadId: string, value: string): void;
86 | /**
87 | * Resolve state of the thread
88 | *
89 | * @type boolean
90 | */
91 | resolved: boolean;
92 | /**
93 | * Sets the resolve state of a thread
94 | *
95 | * @param target Type: string - path of file thread relates to
96 | * @param threadId Type: string - id of thread to set resolve on
97 | * @param value Type: boolean - resolve value to set
98 | */
99 | setResolveValue(target: string, threadId: string, value: boolean): void;
100 | /**
101 | * Function to set the state of the current expanded card
102 | *
103 | * @param threadId - string: thread unique id
104 | */
105 | setExpandedCard(threadId: string): void;
106 | /**
107 | * Sets the commenting state of the reply box being opened
108 | *
109 | * @param threadId Type: string - id of thread
110 | */
111 | setReplyActiveCard(threadId: string): void;
112 | /**
113 | * Used to set what is being edited
114 | *
115 | * @param key Type: string - key of what is being edited
116 | */
117 | setIsEditing(key: string): void;
118 | /**
119 | * Unique string to identify a thread
120 | *
121 | * @type string
122 | */
123 | threadId: string;
124 | /**
125 | * Path of file used to itemize comment thread to file
126 | */
127 | target: string;
128 | }
129 |
130 | /**
131 | * React States interface
132 | */
133 | interface ICommentCardStates {
134 | /**
135 | * Tracks if mouse is hovering over thread
136 | *
137 | * @type boolean
138 | */
139 | hover: boolean;
140 | /**
141 | * Tracks when to expand
142 | *
143 | * @type boolean
144 | */
145 | shouldExpand: boolean;
146 | /**
147 | * Tracks when a comment is being edited
148 | *
149 | * @type string
150 | */
151 | isEditing: string;
152 | }
153 |
154 | /**
155 | * CommentCard React Component
156 | */
157 | export class CommentCard extends React.Component<
158 | ICommentCardProps,
159 | ICommentCardStates
160 | > {
161 | /**
162 | * Constructor
163 | *
164 | * @param props React Props
165 | */
166 | constructor(props: ICommentCardProps) {
167 | super(props);
168 | this.state = { hover: false, shouldExpand: true, isEditing: '' };
169 |
170 | this.handleExpand = this.handleExpand.bind(this);
171 | this.handleShrink = this.handleShrink.bind(this);
172 | this.handleReplyOpen = this.handleReplyOpen.bind(this);
173 | this.handleReplyClose = this.handleReplyClose.bind(this);
174 | this.handleExpandAndReply = this.handleExpandAndReply.bind(this);
175 | this.putComment = this.putComment.bind(this);
176 | this.handleResolve = this.handleResolve.bind(this);
177 | this.handleMouseEnter = this.handleMouseEnter.bind(this);
178 | this.handleMouseLeave = this.handleMouseLeave.bind(this);
179 | this.handleShouldExpand = this.handleShouldExpand.bind(this);
180 | this.pushEdit = this.pushEdit.bind(this);
181 | this.deleteComment = this.deleteComment.bind(this);
182 | }
183 |
184 | /**
185 | * React render function
186 | */
187 | render(): React.ReactNode {
188 | return (
189 | {this.props.comments[this.props.comments.length - 1]}
92 |
205 |
215 | );
216 | }
217 |
218 | /**
219 | * Handles state when mouse enters thread area
220 | */
221 | handleMouseEnter(): void {
222 | this.setState({ hover: true });
223 | }
224 |
225 | /**
226 | * Handles state when mouse leaves thread area
227 | */
228 | handleMouseLeave(): void {
229 | this.setState({ hover: false });
230 | }
231 |
232 | /**
233 | * Sets the state for should expand
234 | *
235 | * @param state Type: boolean - sets the state of should expand
236 | */
237 | handleShouldExpand(state: boolean) {
238 | this.setState({ shouldExpand: state });
239 | }
240 |
241 | /**
242 | * Handle a thread expanding
243 | */
244 | handleExpand(): void {
245 | this.props.setExpandedCard(this.props.threadId);
246 | if (this.props.checkReplyActiveCard(this.props.threadId)) {
247 | this.handleReplyOpen();
248 | }
249 | }
250 |
251 | /**
252 | * Handles a thread shrinking
253 | */
254 | handleShrink(): void {
255 | this.props.setExpandedCard(' ');
256 | if (this.props.checkReplyActiveCard(this.props.threadId)) {
257 | this.handleReplyClose();
258 | }
259 | }
260 |
261 | /**
262 | * Sets the value of replyActive to the thread with reply active
263 | */
264 | handleReplyOpen(): void {
265 | this.props.setReplyActiveCard(this.props.threadId);
266 | }
267 |
268 | /**
269 | * Sets the value of replyActive to no related value
270 | */
271 | handleReplyClose(): void {
272 | this.props.setReplyActiveCard(' ');
273 | }
274 |
275 | /**
276 | * Handles expanding and opening the reply box
277 | */
278 | handleExpandAndReply(): void {
279 | this.handleReplyOpen();
280 | this.handleExpand();
281 | }
282 |
283 | /**
284 | * Handles setting the resolve state in comments store and firing the
285 | * event based on the state
286 | *
287 | * @param resolved Type: boolean - resolve state
288 | */
289 | handleResolve(): void {
290 | this.props.setResolveValue(
291 | this.props.target,
292 | this.props.threadId,
293 | !this.props.resolved
294 | );
295 |
296 | if (this.props.resolved) {
297 | if (this.props.checkExpandedCard(this.props.threadId)) {
298 | this.handleExpand();
299 | } else {
300 | this.handleShrink();
301 | }
302 | } else {
303 | this.handleShrink();
304 | }
305 | }
306 |
307 | /**
308 | * Pushed comment to comments store
309 | *
310 | * @param comment Type: string - comment message
311 | */
312 | putComment(comment: string): void {
313 | this.props.putComment(this.props.target, this.props.threadId, comment);
314 | this.handleReplyClose();
315 | }
316 |
317 | /**
318 | * Used to update a comment to the edited value
319 | *
320 | * @param comment Type: string - new comment to push
321 | * @param index Type: number - index of comment to push edits to
322 | */
323 | pushEdit(comment: string, index: number): void {
324 | this.props.putCommentEdit(
325 | this.props.target,
326 | this.props.threadId,
327 | comment,
328 | index
329 | );
330 | }
331 |
332 | /**
333 | * Deletes a comment from the comment store based on its index
334 | *
335 | * @param index Type: number - index of comment in comments store
336 | */
337 | deleteComment(index: number): void {
338 | this.props.deleteComment(this.props.threadId, index);
339 | }
340 |
341 | /**
342 | * Creates a Comment component for each comment in the this.props.data
343 | *
344 | * @return React.ReactNode[]: List of Comment ReactNodes / Components
345 | */
346 | getAllComments(): React.ReactNode[] {
347 | let comments: React.ReactNode[] = [];
348 |
349 | if (this.props.data) {
350 | for (let key: number = 1; key < this.props.data.body.length; key++) {
351 | comments.push(
352 | {this.getCommentHeader()}
206 |
207 |
213 | {this.getCommentFooter()}
214 |
108 |
135 | );
136 | }
137 |
138 | /**
139 | * Handles key events
140 | *
141 | * @param e Type: React.KeyboardEvent - keyboard event
142 | */
143 | handleKeyPress(e: React.KeyboardEvent): void {
144 | if (
145 | this.state.commentBox.trim() !== '' &&
146 | e.key === 'Enter' &&
147 | !e.shiftKey
148 | ) {
149 | this.handleReplyButton();
150 | document.getElementById('commentBox').blur();
151 | }
152 | }
153 |
154 | /**
155 | * Handles when the comment box changes
156 | *
157 | * @param e Type: React.ChangeEvent
115 | {this.props.expanded && (
116 |
129 | )}
130 |
131 |
132 | {this.getButtons()}
133 |
134 |
189 | {this.getReplyButton()}
190 | {this.getCancelButton()}
191 |
192 | );
193 | }
194 | }
195 |
196 | /**
197 | * Creates and returns reply button
198 | *
199 | * @return Type: React.ReactNode
200 | */
201 | getReplyButton(): React.ReactNode {
202 | return (
203 |
211 | );
212 | }
213 |
214 | /**
215 | * Creates and returns cancel button
216 | *
217 | * @return Type: React.ReactNode
218 | */
219 | getCancelButton(): React.ReactNode {
220 | return (
221 |
228 | );
229 | }
230 |
231 | /**
232 | * CSS styles
233 | */
234 | styles = {
235 | 'jp-commenting-thread-footer-area': {
236 | display: 'flex',
237 | flexDirection: 'column' as 'column',
238 | padding: '4px'
239 | },
240 | 'jp-commenting-thread-footer-button-area': {
241 | display: 'flex',
242 | paddingTop: '4px'
243 | },
244 | 'jp-commenting-thread-footer-input-active': {
245 | display: 'flex',
246 | height: '72px'
247 | },
248 | 'jp-commenting-thread-footer-input-not-active': {
249 | display: 'flex',
250 | height: '24px'
251 | }
252 | };
253 | }
254 |
--------------------------------------------------------------------------------
/src/comments/components/NewThreadCard.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @license BSD-3-Clause
3 | *
4 | * Copyright (c) 2019 Project Jupyter Contributors.
5 | * Distributed under the terms of the 3-Clause BSD License.
6 | */
7 |
8 | import * as React from 'react';
9 |
10 | import { IPerson } from '../service';
11 | import { CommentingWidget } from '../commenting';
12 | import { Signal } from '@lumino/signaling';
13 |
14 | interface INewThreadCardProps {
15 | /**
16 | * Creator object
17 | *
18 | * @type IPerson
19 | */
20 | creator: IPerson;
21 | /**
22 | * New thread created signal
23 | */
24 | newThreadCreated: Signal
80 |
103 | );
104 | }
105 |
106 | /**
107 | * Creates and returns the comment button
108 | *
109 | * @return Type: React.ReactNode - JSX button
110 | */
111 | getCommentButton(): React.ReactNode {
112 | return (
113 |
121 | );
122 | }
123 |
124 | /**
125 | * Handles when the comment box changes
126 | *
127 | * @param e Type: React.ChangeEvent
81 |
82 | {this.props.creator.name}
83 |
84 |
85 |
86 |
97 |
98 |
99 | {this.getCommentButton()}
100 | {this.getCancelButton()}
101 |
102 |
55 |
81 | );
82 | }
83 |
84 | /**
85 | * Handles when the comment box changes
86 | *
87 | * @param e Type: React.ChangeEvent
56 |
57 | Enter GitHub Username
58 |
59 |
60 |
61 |
69 |
70 |
71 |
79 |
80 |