Merge pull request #982 from konstantinullrich/#974-Match-styleguide-…

…with-native-ContextMenus Replace native Context Menu with a syleguided one in SearchInput
oxen-io · Mar 19, 2020 · 8fb092a · 8fb092a
2 parents f594a5e + 447ba9d
commit 8fb092a
Showing 1 changed file with 39 additions and 12 deletions.
diff --git a/ts/components/session/SessionSearchInput.tsx b/ts/components/session/SessionSearchInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
 
 interface Props {
   searchString: string;
@@ -16,20 +17,46 @@ export class SessionSearchInput extends React.Component<Props> {
 
   public render() {
     const { searchString } = this.props;
+    const triggerId = 'session-search-input-context';
 
     return (
-      <div className="session-search-input">
-        <SessionIconButton
-          iconSize={SessionIconSize.Medium}
-          iconType={SessionIconType.Search}
-        />
-        <input
-          value={searchString}
-          onChange={e => this.props.onChange(e.target.value)}
-          onKeyDown={this.handleKeyDown}
-          placeholder={this.props.placeholder}
-        />
-      </div>
+      <>
+        <ContextMenuTrigger id={triggerId}>
+          <div className="session-search-input">
+            <SessionIconButton
+              iconSize={SessionIconSize.Medium}
+              iconType={SessionIconType.Search}
+            />
+            <input
+              value={searchString}
+              onChange={e => this.props.onChange(e.target.value)}
+              onKeyDown={this.handleKeyDown}
+              placeholder={this.props.placeholder}
+            />
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenu id={triggerId}>
+          <MenuItem onClick={() => document.execCommand('undo')}>
+            {window.i18n('editMenuUndo')}
+          </MenuItem>
+          <MenuItem onClick={() => document.execCommand('redo')}>
+            {window.i18n('editMenuRedo')}
+          </MenuItem>
+          <hr />
+          <MenuItem onClick={() => document.execCommand('cut')}>
+            {window.i18n('editMenuCut')}
+          </MenuItem>
+          <MenuItem onClick={() => document.execCommand('copy')}>
+            {window.i18n('editMenuCopy')}
+          </MenuItem>
+          <MenuItem onClick={() => document.execCommand('paste')}>
+            {window.i18n('editMenuPaste')}
+          </MenuItem>
+          <MenuItem onClick={() => document.execCommand('selectAll')}>
+            {window.i18n('editMenuSelectAll')}
+          </MenuItem>
+        </ContextMenu>
+      </>
     );
   }