Skip to content

Commit 04a18d4

Browse files
kpinnipakpinnipa
committed
Added state and new component for dropdown options to allow for checkmark
1 parent c4f655f commit 04a18d4

File tree

7 files changed

+822
-712
lines changed

7 files changed

+822
-712
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,4 +127,4 @@
127127
"src/*.js": "eslint --cache --fix"
128128
},
129129
"styleModule": "style/index.js"
130-
}
130+
}

‎src/SortOption.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import { checkIcon } from '@jupyterlab/ui-components';
3+
4+
const CODE_SNIPPET_SORT_OPTION_UNSELECT =
5+
'jp-codeSnippet-sort-option-unselected';
6+
const CODE_SNIPPET_SORT_OPTION_SELECT = 'jp-codeSnippet-sort-option-selected';
7+
8+
interface SortOptionProps {
9+
optionSelected: Boolean;
10+
optionName: String;
11+
}
12+
13+
const SortOption = ({ optionSelected, optionName }: SortOptionProps) => {
14+
if (optionSelected) {
15+
return (
16+
<div className={CODE_SNIPPET_SORT_OPTION_SELECT}>
17+
<checkIcon.react
18+
className="jupyterlab-CodeSnippets-sort-selected"
19+
elementPosition="center"
20+
height="16px"
21+
width="16px"
22+
marginLeft="2px"
23+
/>
24+
{optionName}
25+
</div>
26+
);
27+
} else {
28+
return (
29+
<div className={CODE_SNIPPET_SORT_OPTION_UNSELECT}>{optionName}</div>
30+
);
31+
}
32+
};
33+
34+
export default SortOption;

‎src/SortTools.tsx

Lines changed: 94 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
11
import React from 'react';
22
import { Widget } from '@lumino/widgets';
33
import { showMoreOptions } from './MoreOptions';
4-
interface ISortSnippetProps {
5-
sortCategory: string;
6-
}
4+
import { checkIcon } from '@jupyterlab/ui-components';
5+
import ReactDOMServer from 'react-dom/server';
6+
import SortOption from './SortOption';
7+
8+
interface ISortSnippetProps {}
79

810
const SORT_TOOL = 'jp-codeSnippet-sort-tool';
911
const SORT_ICON_INACTIVE = 'jp-codeSnippet-sort-icon-inactive';
1012
const SORT_ICON_ACTIVE = 'jp-codeSnippet-sort-icon-active';
1113
const CODE_SNIPPET_SORT_CONTENT = 'jp-codeSnippet-sort-content';
1214
const CODE_SNIPPET_SORT_SORTBY = 'jp-codeSnippet-sort-sortby';
13-
const CODE_SNIPPET_SORT_OPTION = 'jp-codeSnippet-sort-option';
15+
const CODE_SNIPPET_SORT_LINE = 'jp-codeSnippet-sort-line';
1416
// const CODE_SNIPPET_SORT_SELECTED = 'jp-codeSnippet-sort-selected';
1517

1618
/* Add on click to span and then create function to actually do the sorting*/
1719
/* Right now the coloring of the arrows is off, make sure when dialog disappears arrow turns back to gray*/
1820
/* Add innerHTML for the checkmark when something is clicked. When its clicked again remove the checkmark. */
1921

22+
interface ISortSnippetState {
23+
optionSelected: Boolean;
24+
optionName: String;
25+
currSelected: String;
26+
}
27+
2028
class OptionsHandler extends Widget {
2129
constructor(display: SortTools) {
2230
super({ node: display.createOptionsNode() });
2331
}
2432
}
25-
export class SortTools extends React.Component {
33+
export class SortTools extends React.Component<
34+
ISortSnippetProps,
35+
ISortSnippetState
36+
> {
2637
constructor(props: ISortSnippetProps) {
2738
super(props);
39+
this.state = {
40+
optionSelected: false,
41+
optionName: '',
42+
currSelected: ''
43+
};
2844
this.handleClick = this.handleClick.bind(this);
2945
}
3046

@@ -49,35 +65,82 @@ export class SortTools extends React.Component {
4965
public createOptionsNode(): HTMLElement {
5066
const body = document.createElement('div');
5167
body.className = 'jp-codeSnippet-sort-test-container';
52-
const optionsContainer = document.createElement('div');
53-
optionsContainer.className = CODE_SNIPPET_SORT_CONTENT;
54-
const sortBy = document.createElement('div');
55-
sortBy.className = CODE_SNIPPET_SORT_SORTBY;
56-
// 4 space start
57-
sortBy.textContent = ' Sort by:';
58-
const lastMod = document.createElement('div');
59-
lastMod.className = CODE_SNIPPET_SORT_OPTION;
60-
// const checkMark = document.createElement('span');
61-
// checkMark.className = CODE_SNIPPET_SORT_SELECTED;
62-
// copySnip.appendChild(checkMark);
63-
lastMod.textContent = ' Last Modified';
64-
/*copySnip.onclick = (): void => {};*/
65-
const createNew = document.createElement('div');
66-
createNew.className = CODE_SNIPPET_SORT_OPTION;
67-
createNew.textContent = ' Date Created: Newest';
68-
/*editSnip.onclick = (): void => {};*/
69-
const createOld = document.createElement('div');
70-
createOld.className = CODE_SNIPPET_SORT_OPTION;
71-
createOld.textContent = ' Date Created: Oldest';
72-
/*deleteSnip.onclick = (): void => {};*/
73-
optionsContainer.appendChild(sortBy);
74-
optionsContainer.appendChild(lastMod);
75-
optionsContainer.appendChild(createNew);
76-
optionsContainer.appendChild(createOld);
77-
body.append(optionsContainer);
68+
body.innerHTML = ReactDOMServer.renderToStaticMarkup(
69+
this.createOptionsNodeHelper()
70+
); //new
71+
// optionsContainer.className = CODE_SNIPPET_SORT_CONTENT;
72+
// const sortBy = document.createElement('div');
73+
// sortBy.className = CODE_SNIPPET_SORT_SORTBY;
74+
// sortBy.textContent = 'Sort by:';
75+
76+
// const divider = document.createElement('div');
77+
// divider.className = CODE_SNIPPET_SORT_LINE;
78+
79+
// let lastMod = document.createElement('div');
80+
// lastMod.className = CODE_SNIPPET_SORT_OPTION;
81+
// lastMod.textContent = 'Last Modified';
82+
// lastMod.onclick = (event): void => {
83+
// lastMod.innerHTML = this.simple(event, optionsContainer);
84+
// };
85+
// const createNew = document.createElement('div');
86+
// createNew.className = CODE_SNIPPET_SORT_OPTION;
87+
// createNew.textContent = 'Date Created: Newest';
88+
// const createOld = document.createElement('div');
89+
// createOld.className = CODE_SNIPPET_SORT_OPTION;
90+
// createOld.textContent = 'Date Created: Oldest';
91+
92+
// optionsContainer.appendChild(sortBy);
93+
// optionsContainer.appendChild(divider);
94+
// optionsContainer.appendChild(lastMod);
95+
// optionsContainer.appendChild(createNew);
96+
// optionsContainer.appendChild(createOld);
97+
// body.append(optionsContainer);
7898
return body;
7999
}
80100

101+
public createOptionsNodeHelper() {
102+
return (
103+
<div className={CODE_SNIPPET_SORT_CONTENT} id={CODE_SNIPPET_SORT_CONTENT}>
104+
<div className={CODE_SNIPPET_SORT_SORTBY}>Sort by:</div>
105+
<div className={CODE_SNIPPET_SORT_LINE}></div>
106+
<SortOption
107+
optionSelected={this.state.currSelected == 'Last Modified'}
108+
optionName={'Last Modified'}
109+
></SortOption>
110+
<SortOption
111+
optionSelected={false}
112+
optionName={'Date Created: Newest'}
113+
></SortOption>
114+
<SortOption
115+
optionSelected={false}
116+
optionName={'Date Created: Oldest'}
117+
></SortOption>
118+
</div>
119+
);
120+
}
121+
122+
simple(event: MouseEvent, container: HTMLDivElement) {
123+
console.log(event);
124+
const target = event.target as HTMLElement;
125+
return this.createCheck(target.innerText);
126+
}
127+
128+
createCheck(option: String) {
129+
//inner div, display flex
130+
return ReactDOMServer.renderToStaticMarkup(
131+
<div>
132+
<checkIcon.react
133+
className="jupyterlab-CodeSnippets-sort-selected"
134+
elementPosition="center"
135+
height="16px"
136+
width="16px"
137+
marginLeft="2px"
138+
/>
139+
{option}
140+
</div>
141+
);
142+
}
143+
81144
handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {
82145
const target = event.target as HTMLElement;
83146
// const clickedTag = target.innerText;

‎src/index.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@ import {
3939
CodeSnippetEditor,
4040
ICodeSnippetEditorMetadata
4141
} from './CodeSnippetEditor';
42+
// import {
43+
// SettingManager,
44+
// ServerConnection,
45+
// ServiceManager
46+
// } from '@jupyterlab/services';
47+
// import { URLExt } from '@jupyterlab/coreutils';
48+
// import { BaseManager } from '@jupyterlab/services/lib/basemanager';
4249

4350
const CODE_SNIPPET_EXTENSION_ID = 'code-snippet-extension';
4451

@@ -73,7 +80,8 @@ function activateCodeSnippet(
7380
app: JupyterFrontEnd,
7481
palette: ICommandPalette,
7582
restorer: ILayoutRestorer,
76-
editorServices: IEditorServices
83+
editorServices: IEditorServices,
84+
settingRegistry: ISettingRegistry
7785
): void {
7886
console.log('JupyterLab extension code-snippets is activated!');
7987

‎style/base.css

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,7 @@ mark.jp-codeSnippet-search-bolding {
400400
}
401401

402402
.jp-codeSnippet-filter .jp-codeSnippet-filter-btn {
403-
align-self: flex-end;
403+
align-self: flex-start;
404404
padding: 0px;
405405
padding-bottom: 10px;
406406
border: none;
@@ -420,8 +420,8 @@ mark.jp-codeSnippet-search-bolding {
420420
border: var(--jp-border-width) solid var(--jp-border-color1);
421421
border-width: 0 var(--jp-border-width) var(--jp-border-width) 0;
422422
padding: 4px;
423-
margin-right: 38px;
424-
align-self: flex-end;
423+
margin-left: 30px;
424+
align-self: flex-start;
425425
transform: rotate(-135deg);
426426
-webkit-transform: rotate(-135deg);
427427
background-color: var(--jp-layout-color0);
@@ -687,12 +687,27 @@ mark.jp-codeSnippet-search-bolding {
687687

688688
.jp-codeSnippet-sort-sortby {
689689
white-space: pre;
690-
border-bottom: 1px var(--jp-layout-color3) solid;
691690
padding-bottom: 2px;
691+
margin-left: 18px;
692692
}
693693

694-
.jp-codeSnippet-sort-option {
694+
.jp-codeSnippet-sort-option-unselected {
695+
padding-top: 2px;
696+
white-space: pre;
697+
cursor: pointer;
698+
margin-left: 18px;
699+
}
700+
.jp-codeSnippet-sort-option-selected {
695701
padding-top: 2px;
696702
white-space: pre;
697703
cursor: pointer;
704+
display: flex;
705+
}
706+
707+
.jp-codeSnippet-sort-option-unselected:hover {
708+
background: var(--jp-layout-color2);
709+
}
710+
711+
.jp-codeSnippet-sort-line {
712+
border-bottom: 1px var(--jp-layout-color3) solid;
698713
}

0 commit comments

Comments
 (0)