Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/select/index.ts

@@ -0,0 +1 @@
+export * from './select'

dashboard/client/components/select/select.scss

@@ -0,0 +1,183 @@
+// Custom css-styles for react-select
+// Docs: https://react-select.com/styles
+
+html {
+  $menuBackgroundColor: $contentColor;
+  $menuSelectedOptionBgc: $layoutBackground;
+
+  --select-menu-bgc: #{$menuBackgroundColor};
+  --select-menu-border-color: #{$halfGray};
+  --select-option-selected-bgc: #{$menuSelectedOptionBgc};
+  --select-option-selected-color: #{$selectOptionHoveredColor};
+  --select-option-focused-bgc: #{$colorInfo};
+  --select-option-focused-color: #{$textColorAccent};
+
+  .Select {
+    position: relative;
+    min-width: 220px;
+
+    * {
+      color: inherit;
+    }
+
+    &--is-disabled {
+      opacity: .75;
+      cursor: not-allowed;
+      pointer-events: auto;
+    }
+
+    &__control {
+      border: none;
+      border-radius: $radius;
+      background: transparent;
+      min-height: 0;
+      box-shadow: 0 0 0 1px $halfGray;
+
+      &--is-focused {
+        box-shadow: 0 0 0 2px $primary;
+      }
+    }
+
+    &__value-container {
+      margin-bottom: 1px;
+    }
+
+    &__indicator {
+      padding: $padding /2;
+      opacity: .55;
+
+      &:hover {
+        color: inherit;
+        opacity: 1;
+      }
+
+      &-separator {
+        display: none;
+      }
+    }
+
+    &__dropdown {
+      &-indicator {
+        color: inherit !important;
+        padding: $padding / 2;
+      }
+    }
+
+    &__menu {
+      background: var(--select-menu-bgc);
+      box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
+
+      &-list {
+        @include custom-scrollbar;
+        padding-right: 1px;
+        padding-left: 1px;
+      }
+
+      &-notice {
+        padding: $padding / 3;
+      }
+    }
+
+    &__option {
+      &:active {
+        background: $primary;
+      }
+
+      &--is-selected {
+        background: var(--select-option-selected-bgc);
+        color: var(--select-option-selected-color);
+      }
+
+      &--is-focused {
+        color: var(--select-option-focused-color);
+        background: var(--select-option-focused-bgc);
+      }
+
+      &--is-disabled {
+        cursor: not-allowed;
+        background: none !important;
+        color: $contentColor;
+        opacity: .75;
+      }
+
+      .Icon {
+        transition: none;
+      }
+    }
+
+    &__value-container {
+      &--is-multi {
+      }
+
+      &--has-value {
+      }
+    }
+
+    &__multi-value {
+      background: $layoutBackground;
+
+      &__remove {
+        background: inherit;
+
+        &:hover {
+          background: $colorError;
+          color: $textColorAccent;
+        }
+      }
+    }
+  }
+
+  //-- Themes
+
+  .Select__menu {
+    z-index: $zIndex-select-portal; // render at the top when used inside dialog
+  }
+
+  .Select, .Select__menu {
+    &.theme-light {
+      --select-menu-bgc: white;
+      --select-option-selected-color: $textColorSecondary;
+      --select-option-selected-bgc: $textColorSecondary;
+
+      .Select {
+        &__menu-list {
+          @include custom-scrollbar($theme: dark);
+        }
+
+        &__multi-value {
+          background: none;
+          box-shadow: 0 0 0 1px $textColorSecondary;
+        }
+
+        &__option {
+          &:active {
+            color: white;
+          }
+
+          &:hover {
+            color: white;
+          }
+
+          &--is-focused {
+            color: white;
+          }
+        }
+      }
+    }
+
+    &.theme-outlined {
+      .Select__control {
+        box-shadow: 0 0 0 1px $colorVague;
+        color: $primary;
+
+        .Select__value-container {
+          padding: 0 $padding / 2;
+        }
+
+        .Select__dropdown-indicator {
+          padding: 3px;
+        }
+      }
+    }
+  }
+}

dashboard/client/components/select/select.tsx

@@ -0,0 +1,124 @@
+// Wrapper for "react-select" component
+// API docs: https://react-select.com/
+import "./select.scss";
+
+import React, { ReactNode } from "react";
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import { autobind, cssNames } from "../../utils";
+import ReactSelect, { components as ReactSelectComponents } from "react-select"
+import { Props as ReactSelectProps } from "react-select/base"
+import Creatable, { CreatableProps } from "react-select/creatable"
+import { StylesConfig } from "react-select/src/styles"
+import { ActionMeta } from "react-select/src/types"
+import { themeStore } from "../../theme.store";
+
+export { ReactSelectComponents }
+
+export interface GroupSelectOption<T extends SelectOption = SelectOption> {
+  label: ReactNode;
+  options: T[];
+}
+
+export interface SelectOption<T = any> {
+  value: T;
+  label?: React.ReactNode;
+}
+
+export interface SelectProps<T = any> extends ReactSelectProps<T>, CreatableProps<T> {
+  value?: T;
+  themeName?: "dark" | "light" | "outlined";
+  menuClass?: string;
+  isCreatable?: boolean;
+  autoConvertOptions?: boolean; // to internal format (i.e. {value: T, label: string}[]), not working with groups
+  onChange?(option: T, meta?: ActionMeta): void;
+}
+
+@observer
+export class Select extends React.Component<SelectProps> {
+  static defaultProps: SelectProps = {
+    autoConvertOptions: true,
+    menuPortalTarget: document.body,
+  }
+
+  private theme = this.props.themeName || themeStore.activeTheme.type;
+
+  private styles: StylesConfig = {
+    menuPortal: styles => ({
+      ...styles,
+      zIndex: "auto"
+    }),
+  };
+
+  protected isValidOption(opt: SelectOption | any) {
+    return typeof opt === "object" && opt.value !== undefined;
+  }
+
+  @computed get selectedOption() {
+    const { value, isMulti } = this.props;
+    if (isMulti) {
+      return this.options.filter(opt => {
+        const values = value ? [].concat(value) : [];
+        return values.includes(opt) || values.includes(opt.value);
+      });
+    }
+    return this.options.find(opt => opt === value || opt.value === value);
+  }
+
+  @computed get options(): SelectOption[] {
+    const { autoConvertOptions, options } = this.props;
+    if (autoConvertOptions && Array.isArray(options)) {
+      return options.map(opt => {
+        return this.isValidOption(opt) ? opt : { value: opt, label: String(opt) };
+      })
+    }
+    return options as SelectOption[];
+  }
+
+  @autobind()
+  onChange(value: SelectOption, meta: ActionMeta) {
+    if (this.props.onChange) {
+      this.props.onChange(value, meta);
+    }
+  }
+
+  @autobind()
+  onKeyDown(evt: React.KeyboardEvent<HTMLElement>) {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(evt);
+    }
+    const escapeKey = evt.nativeEvent.code === "Escape";
+    if (escapeKey) evt.stopPropagation(); // don't close the <Dialog/>
+  }
+
+  render() {
+    const {
+      className, menuClass, isCreatable, autoConvertOptions,
+      value, options, components = {}, ...props
+    } = this.props;
+    const themeClass = `theme-${this.theme}`;
+
+    const selectProps: Partial<SelectProps> = {
+      ...props,
+      styles: this.styles,
+      value: autoConvertOptions ? this.selectedOption : value,
+      options: autoConvertOptions ? this.options : options,
+      onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
+      className: cssNames("Select", themeClass, className),
+      classNamePrefix: "Select",
+      components: {
+        ...components,
+        Menu: props => (
+          <ReactSelectComponents.Menu
+            {...props}
+            className={cssNames(menuClass, themeClass)}
+          />
+        ),
+      }
+    }
+    return isCreatable
+      ? <Creatable {...selectProps}/>
+      : <ReactSelect {...selectProps}/>;
+  }
+}