Merge pull request #48 from wonsjb/refactor

Cleanup of plugin dependencies to jupyterlab

Author: afshin

src/ShortcutWidget.tsx

@@ -2,60 +2,53 @@ import { VDomRenderer, VDomModel } from '@jupyterlab/apputils';
 
 import * as React from 'react';
 
-import { JupyterFrontEnd } from '@jupyterlab/application';
-
 import { ShortcutUI } from './components/ShortcutUI';
 
 import { ISettingRegistry } from '@jupyterlab/coreutils';
 
 import { CommandRegistry } from '@phosphor/commands';
 
-import { Widget, Title } from '@phosphor/widgets';
+import { Widget, Title, Menu } from '@phosphor/widgets';
 
 import * as ReactDOM from 'react-dom';
+import { IDisposable } from '@phosphor/disposable';
+
+/** All external actions, setting commands, getting command list ... */
+export interface IShortcutUIexternal {
+  getAllShortCutSettings: () => Promise<ISettingRegistry.ISettings>;
+  removeShortCut: (key: String) => Promise<void>;
+  openAdvanced: () => void;
+  createMenu: () => Menu;
+  hasCommand: (id: string) => boolean;
+  addCommand: (
+    id: string,
+    options: CommandRegistry.ICommandOptions
+  ) => IDisposable;
+  getLabel: (id: string) => string;
+}
 
 export default class ShortcutWidget extends VDomRenderer<VDomModel> {
   height: number;
   width: number;
-  commandList: string[];
-  settingRegistry: ISettingRegistry;
-  shortcutPlugin: string;
-  commandRegistry: CommandRegistry;
+  external: IShortcutUIexternal;
   id: string;
   isAttached: boolean;
   title: Title<Widget>;
   reactComponent: React.ReactElement<any>;
-  app: JupyterFrontEnd;
 
-  constructor(
-    height: number,
-    width: number,
-    commandList: string[],
-    settingRegistry: ISettingRegistry,
-    commandRegistry: CommandRegistry,
-    shortcutPlugin: string,
-    app: JupyterFrontEnd
-  ) {
+  constructor(external: IShortcutUIexternal) {
     super();
-    this.height = height;
-    this.width = width;
-    this.commandList = commandList;
-    this.settingRegistry = settingRegistry;
-    this.commandRegistry = commandRegistry;
-    this.shortcutPlugin = shortcutPlugin;
-    this.app = app;
+    this.height = -1;
+    this.width = -1;
+    this.external = external;
   }
 
   protected onUpdateRequest(): void {
     this.reactComponent = (
       <ShortcutUI
-        commandList={this.commandList}
-        settingRegistry={this.settingRegistry}
-        shortcutPlugin={this.shortcutPlugin}
-        commandRegistry={this.commandRegistry}
+        external={this.external}
         height={this.height}
         width={this.width}
-        app={this.app}
       />
     );
     ReactDOM.render(

src/componentStyle/ShortcutItemStyle.tsx

@@ -1,4 +1,5 @@
 import { style } from 'typestyle';
+import { UISize } from '../components/ShortcutUI';
 
 export const CellStyle = style({
   padding: '6px 12px',
@@ -17,15 +18,11 @@ export const EmptyShortcutCellStyle = style({
   height: '32px',
 
   $nest: {
-    '& #add-link': {
-      //marginLeft: 'auto'
-    }
+    '& #add-link': {}
   }
 });
 
-export const SingleShortcutCellStyle = style({
-  //justifyContent: 'space-between'
-});
+export const SingleShortcutCellStyle = style({});
 
 export const RowStyle = style({
   padding: '10px',
@@ -51,32 +48,24 @@ export const RowStyle = style({
   }
 });
 
+function getMarginLeft(showSelectors: boolean, errorSize: UISize): string {
+  if (errorSize === UISize.Regular) {
+    return showSelectors ? '20%' : '25%';
+  } else {
+    return '0';
+  }
+}
+
 export function ConflictContainerStyle(
   showSelectors: boolean,
-  errorSize: string
+  errorSize: UISize
 ) {
-  if (showSelectors && errorSize === 'regular') {
-    return style({
-      display: 'flex',
-      flexWrap: 'wrap',
-      padding: '6px 12px',
-      marginLeft: '20%'
-    });
-  } else if (!showSelectors && errorSize === 'regular') {
-    return style({
-      display: 'flex',
-      flexWrap: 'wrap',
-      padding: '6px 12px',
-      marginLeft: '25%'
-    });
-  } else {
-    return style({
-      display: 'flex',
-      flexWrap: 'wrap',
-      padding: '6px 12px',
-      marginLeft: '0'
-    });
-  }
+  return style({
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: '6px 12px',
+    marginLeft: getMarginLeft(showSelectors, errorSize)
+  });
 }
 
 export const ErrorMessageStyle = style({
@@ -185,18 +174,6 @@ export const CommaStyle = style({
 });
 
 export const PlusStyle = style({
-  // backgroundColor: 'var(--jp-brand-color2)',
-  // color: 'var(--jp-layout-color0)',
-  // textDecoration: 'none',
-  // display: 'block',
-  // textAlign: 'center',
-  // textTransform: 'uppercase',
-  // boxSizing: 'border-box',
-  // padding: '0px 12px',
-  // height: '30px',
-  // lineHeight: '30px',
-  // border: '1px solid var(--jp-brand-color1)',
-
   display: 'none',
   background: 'var(--jp-brand-color3)',
   borderColor: 'var(--jp-layout-color0)',

src/componentStyle/TopNavStyle.tsx

@@ -1,4 +1,5 @@
 import { style } from 'typestyle';
+import { UISize } from '../components/ShortcutUI';
 
 export const TopStyle = style({
   display: 'block'
@@ -95,8 +96,8 @@ export const AdvancedOptionsRightStyle = style({
   marginTop: '8px'
 });
 
-export function AdvancedOptionsLinkStyle(size: string) {
-  if (size === 'regular') {
+export function AdvancedOptionsLinkStyle(size: UISize) {
+  if (size === UISize.Regular) {
     return style({
       color: 'var(--jp-brand-color2)',
       textDecoration: 'none',