Migrating Vue components to React and stores refactoring (#585)

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>
Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/menu/index.ts

@@ -1,2 +1,2 @@
 export * from './menu'
-export * from './menu-picker'
+export * from './menu-actions'

src/renderer/components/menu/menu-picker.scss

@@ -1,74 +0,0 @@
-.MenuPicker {
-  &.waiting {
-    .MenuItem {
-      pointer-events: none;
-      opacity: .75;
-    }
-  }
-
-  > .Button {
-    padding: $padding /2 $padding * 2;
-  }
-
-  .menu-header {
-    background: var(--bgc-active);
-    padding: $padding;
-    display: flex;
-    align-items: center;
-    color: $textColorAccent;
-    font-weight: bold;
-
-    &:hover {
-      background: var(--bgc-active) !important;
-    }
-  }
-
-  .Menu {
-    @include custom-scrollbar;
-
-    border-radius: $radius;
-    box-shadow: -$unit / 2 $unit / 2 22px $boxShadow;
-    margin-top: ceil($margin / 1.33);
-    overflow: hidden;
-    min-width: 150px;
-    max-height: $unit * 35;
-  }
-
-  .MenuItem {
-    align-items: center;
-    display: flex;
-    padding-right: $padding;
-    white-space: normal;
-
-    &:before {
-      min-width: 20px;
-      font-family: "Material Icons";
-      font-weight: bold;
-      content: ' '
-    }
-
-    &:hover {
-      background: $colorInfo;
-    }
-
-    &.active {
-      font-weight: bold;
-
-      &:not(:hover) {
-        background: inherit;
-      }
-
-      &:before {
-        content: 'check';
-      }
-    }
-
-    &:focus {
-      outline: none
-    }
-
-    &:not(:last-child) {
-      border-bottom: 1px solid $borderColor;
-    }
-  }
-}

src/renderer/components/menu/menu-picker.tsx

@@ -1,42 +0,0 @@
-import './menu-picker.scss'
-
-import React, { useRef, useState } from "react";
-import { cssNames } from "../../utils";
-import { Menu, MenuProps } from "./menu";
-import { Icon } from "../icon";
-import { Button } from "../button";
-import uniqueId from "lodash/uniqueId";
-
-interface Props extends Partial<MenuProps> {
-  title: React.ReactNode;
-  waiting?: boolean;
-}
-
-export function MenuPicker(props: Props) {
-  const id = useRef(uniqueId("menu_picker_")).current;
-  const { className, title, waiting, children, ...menuProps } = props;
-  const [isOpen, setOpen] = useState(false);
-
-  const toggle = () => setOpen(!isOpen);
-
-  return (
-    <div className={cssNames("MenuPicker", className, { waiting })}>
-      <Button primary id={id}>
-        {title}
-        <Icon material="arrow_drop_down"/>
-      </Button>
-      <Menu
-        htmlFor={id}
-        isOpen={isOpen} open={toggle} close={toggle}
-        closeOnClickItem={false}
-        {...menuProps}
-      >
-        <div className="menu-header flex gaps">
-          <span className="box grow">{title}</span>
-          <Icon small material="close" onClick={toggle}/>
-        </div>
-        {children}
-      </Menu>
-    </div>
-  )
-}

src/renderer/components/menu/menu.tsx

@@ -21,6 +21,7 @@ export interface MenuProps {
   isOpen?: boolean;
   open(): void;
   close(): void;
+  id?: string;
   className?: string;
   htmlFor?: string;
   autoFocus?: boolean;
@@ -64,8 +65,7 @@ export class Menu extends React.Component<MenuProps, State> {
       const parent = this.elem.parentElement;
       const position = window.getComputedStyle(parent).position;
       if (position === 'static') parent.style.position = 'relative';
-    }
-    else if (this.isOpen) {
+    } else if (this.isOpen) {
       this.refreshPosition();
     }
     this.opener = document.getElementById(this.props.htmlFor); // might not exist in sub-menus
@@ -108,8 +108,7 @@ export class Menu extends React.Component<MenuProps, State> {
       let nextItem = reverse ? items[activeIndex - 1] : items[activeIndex + 1];
       if (!nextItem) nextItem = items[activeIndex];
       nextItem.elem.focus();
-    }
-    else {
+    } else {
       items[0].elem.focus();
     }
   }
@@ -223,7 +222,7 @@ export class Menu extends React.Component<MenuProps, State> {
   }
 
   render() {
-    const { position } = this.props;
+    const { position, id } = this.props;
     let { className, usePortal } = this.props;
     className = cssNames('Menu', className, this.state.position || position, {
       portal: usePortal,
@@ -245,7 +244,7 @@ export class Menu extends React.Component<MenuProps, State> {
     const menu = (
       <MenuContext.Provider value={this}>
         <Animate enter={this.isOpen}>
-          <ul className={className} ref={this.bindRef}>
+          <ul id={id} className={className} ref={this.bindRef}>
             {menuItems}
           </ul>
         </Animate>