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/input/input.scss

@@ -74,7 +74,7 @@
 
   .input-info {
     .errors {
-      color: var(color-error);
+      color: var(--colorError);
       font-size: $font-size-small;
     }
 

src/renderer/components/input/input.tsx

@@ -13,7 +13,7 @@ type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 type InputElement = HTMLInputElement | HTMLTextAreaElement;
 type InputElementProps = InputHTMLAttributes<InputElement> & TextareaHTMLAttributes<InputElement> & DOMAttributes<InputElement>;
 
-export type InputProps<T = string> = Omit<InputElementProps, "onChange"> & {
+export type InputProps<T = string> = Omit<InputElementProps, "onChange" | "onSubmit"> & {
   theme?: "round-black";
   className?: string;
   value?: T;
@@ -25,6 +25,7 @@ export type InputProps<T = string> = Omit<InputElementProps, "onChange"> & {
   iconRight?: string | React.ReactNode;
   validators?: Validator | Validator[];
   onChange?(value: T, evt: React.ChangeEvent<InputElement>): void;
+  onSubmit?(value: T): void;
 }
 
 interface State {
@@ -100,7 +101,7 @@ export class Input extends React.Component<InputProps, State> {
   async validate(value = this.getValue()) {
     let validationId = (this.validationId = ""); // reset every time for async validators
     const asyncValidators: Promise<any>[] = [];
-    let errors: React.ReactNode[] = [];
+    const errors: React.ReactNode[] = [];
 
     // run validators
     for (const validator of this.validators) {
@@ -130,12 +131,10 @@ export class Input extends React.Component<InputProps, State> {
 
     // handle async validators result
     if (asyncValidators.length > 0) {
-      this.setState({ validating: true, valid: false, });
+      this.setState({ validating: true, valid: false });
       const asyncErrors = await Promise.all(asyncValidators);
-      const isLastValidationCheck = this.validationId === validationId;
-      if (isLastValidationCheck) {
-        errors = this.state.errors.concat(asyncErrors.filter(err => err));
-        this.setValidation(errors);
+      if (this.validationId === validationId) {
+        this.setValidation(errors.concat(...asyncErrors.filter(err => err)));
       }
     }
 
@@ -157,7 +156,7 @@ export class Input extends React.Component<InputProps, State> {
 
   private setupValidators() {
     this.validators = conditionalValidators
-    // add conditional validators if matches input props
+      // add conditional validators if matches input props
       .filter(validator => validator.condition(this.props))
       // add custom validators
       .concat(this.props.validators)
@@ -209,6 +208,19 @@ export class Input extends React.Component<InputProps, State> {
     }
   }
 
+  @autobind()
+  onKeyDown(evt: React.KeyboardEvent<any>) {
+    const modified = evt.shiftKey || evt.metaKey || evt.altKey || evt.ctrlKey;
+
+    switch (evt.key) {
+    case "Enter":
+      if (this.props.onSubmit && !modified && !evt.repeat) {
+        this.props.onSubmit(this.getValue());
+      }
+      break;
+    }
+  }
+
   get showMaxLenIndicator() {
     const { maxLength, multiLine } = this.props;
     return maxLength && multiLine;
@@ -269,8 +281,11 @@ export class Input extends React.Component<InputProps, State> {
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
       rows: multiLine ? (rows || 1) : null,
       ref: this.bindRef,
+      type: "text",
+      spellCheck: "false",
     });
 
     return (

src/renderer/components/input/input.validators.ts

@@ -38,7 +38,7 @@ export const isNumber: Validator = {
 export const isUrl: Validator = {
   condition: ({ type }) => type === "url",
   message: () => _i18n._(t`Wrong url format`),
-  validate: value => !!value.match(/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/),
+  validate: value => !!value.match(/^http(s)?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)*$/),
 };
 
 export const minLength: Validator = {

src/renderer/components/input/search-input.tsx

@@ -26,7 +26,7 @@ const defaultProps: Partial<Props> = {
 export class SearchInput extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
-  @observable inputVal: string;
+  @observable inputVal = ""; // fix: use empty string to avoid react warnings
 
   @disposeOnUnmount
   updateInput = autorun(() => this.inputVal = getSearch())