Added state and new component for dropdown options to allow for check…

…mark

package.json

@@ -127,4 +127,4 @@
     "src/*.js": "eslint --cache --fix"
   },
   "styleModule": "style/index.js"
-}
+}

src/SortOption.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { checkIcon } from '@jupyterlab/ui-components';
+
+const CODE_SNIPPET_SORT_OPTION_UNSELECT =
+  'jp-codeSnippet-sort-option-unselected';
+const CODE_SNIPPET_SORT_OPTION_SELECT = 'jp-codeSnippet-sort-option-selected';
+
+interface SortOptionProps {
+  optionSelected: Boolean;
+  optionName: String;
+}
+
+const SortOption = ({ optionSelected, optionName }: SortOptionProps) => {
+  if (optionSelected) {
+    return (
+      <div className={CODE_SNIPPET_SORT_OPTION_SELECT}>
+        <checkIcon.react
+          className="jupyterlab-CodeSnippets-sort-selected"
+          elementPosition="center"
+          height="16px"
+          width="16px"
+          marginLeft="2px"
+        />
+        {optionName}
+      </div>
+    );
+  } else {
+    return (
+      <div className={CODE_SNIPPET_SORT_OPTION_UNSELECT}>{optionName}</div>
+    );
+  }
+};
+
+export default SortOption;

src/SortTools.tsx

@@ -1,30 +1,46 @@
 import React from 'react';
 import { Widget } from '@lumino/widgets';
 import { showMoreOptions } from './MoreOptions';
-interface ISortSnippetProps {
-  sortCategory: string;
-}
+import { checkIcon } from '@jupyterlab/ui-components';
+import ReactDOMServer from 'react-dom/server';
+import SortOption from './SortOption';
+
+interface ISortSnippetProps {}
 
 const SORT_TOOL = 'jp-codeSnippet-sort-tool';
 const SORT_ICON_INACTIVE = 'jp-codeSnippet-sort-icon-inactive';
 const SORT_ICON_ACTIVE = 'jp-codeSnippet-sort-icon-active';
 const CODE_SNIPPET_SORT_CONTENT = 'jp-codeSnippet-sort-content';
 const CODE_SNIPPET_SORT_SORTBY = 'jp-codeSnippet-sort-sortby';
-const CODE_SNIPPET_SORT_OPTION = 'jp-codeSnippet-sort-option';
+const CODE_SNIPPET_SORT_LINE = 'jp-codeSnippet-sort-line';
 // const CODE_SNIPPET_SORT_SELECTED = 'jp-codeSnippet-sort-selected';
 
 /* Add on click to span and then create function to actually do the sorting*/
 /* Right now the coloring of the arrows is off, make sure when dialog disappears arrow turns back to gray*/
 /* Add innerHTML for the checkmark when something is clicked. When its clicked again remove the checkmark. */
 
+interface ISortSnippetState {
+  optionSelected: Boolean;
+  optionName: String;
+  currSelected: String;
+}
+
 class OptionsHandler extends Widget {
   constructor(display: SortTools) {
     super({ node: display.createOptionsNode() });
   }
 }
-export class SortTools extends React.Component {
+export class SortTools extends React.Component<
+  ISortSnippetProps,
+  ISortSnippetState
+> {
   constructor(props: ISortSnippetProps) {
     super(props);
+    this.state = {
+      optionSelected: false,
+      optionName: '',
+      currSelected: ''
+    };
     this.handleClick = this.handleClick.bind(this);
   }
 
@@ -49,35 +65,82 @@ export class SortTools extends React.Component {
   public createOptionsNode(): HTMLElement {
     const body = document.createElement('div');
     body.className = 'jp-codeSnippet-sort-test-container';
-    const optionsContainer = document.createElement('div');
-    optionsContainer.className = CODE_SNIPPET_SORT_CONTENT;
-    const sortBy = document.createElement('div');
-    sortBy.className = CODE_SNIPPET_SORT_SORTBY;
-    // 4 space start
-    sortBy.textContent = '    Sort by:';
-    const lastMod = document.createElement('div');
-    lastMod.className = CODE_SNIPPET_SORT_OPTION;
-    // const checkMark = document.createElement('span');
-    // checkMark.className = CODE_SNIPPET_SORT_SELECTED;
-    // copySnip.appendChild(checkMark);
-    lastMod.textContent = '    Last Modified';
-    /*copySnip.onclick = (): void => {};*/
-    const createNew = document.createElement('div');
-    createNew.className = CODE_SNIPPET_SORT_OPTION;
-    createNew.textContent = '    Date Created: Newest';
-    /*editSnip.onclick = (): void => {};*/
-    const createOld = document.createElement('div');
-    createOld.className = CODE_SNIPPET_SORT_OPTION;
-    createOld.textContent = '    Date Created: Oldest';
-    /*deleteSnip.onclick = (): void => {};*/
-    optionsContainer.appendChild(sortBy);
-    optionsContainer.appendChild(lastMod);
-    optionsContainer.appendChild(createNew);
-    optionsContainer.appendChild(createOld);
-    body.append(optionsContainer);
+    body.innerHTML = ReactDOMServer.renderToStaticMarkup(
+      this.createOptionsNodeHelper()
+    ); //new
+    // optionsContainer.className = CODE_SNIPPET_SORT_CONTENT;
+    // const sortBy = document.createElement('div');
+    // sortBy.className = CODE_SNIPPET_SORT_SORTBY;
+    // sortBy.textContent = 'Sort by:';
+
+    // const divider = document.createElement('div');
+    // divider.className = CODE_SNIPPET_SORT_LINE;
+
+    // let lastMod = document.createElement('div');
+    // lastMod.className = CODE_SNIPPET_SORT_OPTION;
+    // lastMod.textContent = 'Last Modified';
+    // lastMod.onclick = (event): void => {
+    //   lastMod.innerHTML = this.simple(event, optionsContainer);
+    // };
+    // const createNew = document.createElement('div');
+    // createNew.className = CODE_SNIPPET_SORT_OPTION;
+    // createNew.textContent = 'Date Created: Newest';
+    // const createOld = document.createElement('div');
+    // createOld.className = CODE_SNIPPET_SORT_OPTION;
+    // createOld.textContent = 'Date Created: Oldest';
+
+    // optionsContainer.appendChild(sortBy);
+    // optionsContainer.appendChild(divider);
+    // optionsContainer.appendChild(lastMod);
+    // optionsContainer.appendChild(createNew);
+    // optionsContainer.appendChild(createOld);
+    // body.append(optionsContainer);
     return body;
   }
 
+  public createOptionsNodeHelper() {
+    return (
+      <div className={CODE_SNIPPET_SORT_CONTENT} id={CODE_SNIPPET_SORT_CONTENT}>
+        <div className={CODE_SNIPPET_SORT_SORTBY}>Sort by:</div>
+        <div className={CODE_SNIPPET_SORT_LINE}></div>
+        <SortOption
+          optionSelected={this.state.currSelected == 'Last Modified'}
+          optionName={'Last Modified'}
+        ></SortOption>
+        <SortOption
+          optionSelected={false}
+          optionName={'Date Created: Newest'}
+        ></SortOption>
+        <SortOption
+          optionSelected={false}
+          optionName={'Date Created: Oldest'}
+        ></SortOption>
+      </div>
+    );
+  }
+
+  simple(event: MouseEvent, container: HTMLDivElement) {
+    console.log(event);
+    const target = event.target as HTMLElement;
+    return this.createCheck(target.innerText);
+  }
+
+  createCheck(option: String) {
+    //inner div, display flex
+    return ReactDOMServer.renderToStaticMarkup(
+      <div>
+        <checkIcon.react
+          className="jupyterlab-CodeSnippets-sort-selected"
+          elementPosition="center"
+          height="16px"
+          width="16px"
+          marginLeft="2px"
+        />
+        {option}
+      </div>
+    );
+  }
+
   handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {
     const target = event.target as HTMLElement;
     // const clickedTag = target.innerText;

src/index.ts

@@ -39,6 +39,13 @@ import {
   CodeSnippetEditor,
   ICodeSnippetEditorMetadata
 } from './CodeSnippetEditor';
+// import {
+//   SettingManager,
+//   ServerConnection,
+//   ServiceManager
+// } from '@jupyterlab/services';
+// import { URLExt } from '@jupyterlab/coreutils';
+// import { BaseManager } from '@jupyterlab/services/lib/basemanager';
 
 const CODE_SNIPPET_EXTENSION_ID = 'code-snippet-extension';
 
@@ -73,7 +80,8 @@ function activateCodeSnippet(
   app: JupyterFrontEnd,
   palette: ICommandPalette,
   restorer: ILayoutRestorer,
-  editorServices: IEditorServices
+  editorServices: IEditorServices,
+  settingRegistry: ISettingRegistry
 ): void {
   console.log('JupyterLab extension code-snippets is activated!');
 

style/base.css

@@ -400,7 +400,7 @@ mark.jp-codeSnippet-search-bolding {
 }
 
 .jp-codeSnippet-filter .jp-codeSnippet-filter-btn {
-  align-self: flex-end;
+  align-self: flex-start;
   padding: 0px;
   padding-bottom: 10px;
   border: none;
@@ -420,8 +420,8 @@ mark.jp-codeSnippet-search-bolding {
   border: var(--jp-border-width) solid var(--jp-border-color1);
   border-width: 0 var(--jp-border-width) var(--jp-border-width) 0;
   padding: 4px;
-  margin-right: 38px;
-  align-self: flex-end;
+  margin-left: 30px;
+  align-self: flex-start;
   transform: rotate(-135deg);
   -webkit-transform: rotate(-135deg);
   background-color: var(--jp-layout-color0);
@@ -687,12 +687,27 @@ mark.jp-codeSnippet-search-bolding {
 
 .jp-codeSnippet-sort-sortby {
   white-space: pre;
-  border-bottom: 1px var(--jp-layout-color3) solid;
   padding-bottom: 2px;
+  margin-left: 18px;
 }
 
-.jp-codeSnippet-sort-option {
+.jp-codeSnippet-sort-option-unselected {
+  padding-top: 2px;
+  white-space: pre;
+  cursor: pointer;
+  margin-left: 18px;
+}
+.jp-codeSnippet-sort-option-selected {
   padding-top: 2px;
   white-space: pre;
   cursor: pointer;
+  display: flex;
+}
+
+.jp-codeSnippet-sort-option-unselected:hover {
+  background: var(--jp-layout-color2);
+}
+
+.jp-codeSnippet-sort-line {
+  border-bottom: 1px var(--jp-layout-color3) solid;
 }