fixed target reset when source is changed (#456)

* fixed

* refactored

* after review

* fix

* removed div

src/Components/TriggerEditForm/EditDescritionHelp.tsx → src/Components/TriggerEditForm/Components/EditDescritionHelp.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Link } from "@skbkontur/react-ui/components/Link";
-import HelpTooltip from "../HelpTooltip/HelpTooltip";
-import CodeRef from "../CodeRef/CodeRef";
+import HelpTooltip from "../../HelpTooltip/HelpTooltip";
+import CodeRef from "../../CodeRef/CodeRef";
 import classNames from "classnames/bind";
 
-import styles from "./TriggerEditForm.less";
+import styles from "../TriggerEditForm.less";
 
 const cn = classNames.bind(styles);
 

src/Components/TriggerEditForm/Components/Form.less

@@ -0,0 +1,37 @@
+.form {
+    max-width: 800px;
+}
+
+.label {
+    flex-shrink: 0;
+    width: 150px;
+}
+
+.label-for-group {
+    align-self: flex-start;
+    padding-top: 7px;
+}
+
+.row {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 15px;
+
+    textarea {
+        vertical-align: top;
+    }
+}
+
+.control {
+    margin-left: auto;
+    width: calc(~'100% - 150px');
+}
+
+.group {
+    display: flex;
+    align-items: center;
+
+    & > * {
+        margin-right: 5px;
+    }
+}

src/Components/TriggerEditForm/Components/Form.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import classNames from "classnames/bind";
+
+import styles from "./Form.less";
+
+const cn = classNames.bind(styles);
+
+interface IFormProps {
+    children: React.ReactNode;
+}
+
+export function Form({ children }: IFormProps): React.ReactElement {
+    return <div className={cn("form")}>{children}</div>;
+}
+
+interface IFormRowProps {
+    label?: string;
+    useTopAlignForLabel?: boolean;
+    singleLineControlGroup?: boolean;
+    style?: {
+        [key: string]: number | string;
+    };
+    children: React.ReactNode;
+}
+
+export function FormRow({
+    label,
+    useTopAlignForLabel,
+    singleLineControlGroup,
+    children,
+    style,
+}: IFormRowProps): React.ReactElement {
+    const labelElement = label && (
+        <div className={cn("label", { "label-for-group": useTopAlignForLabel })}>{label}</div>
+    );
+
+    return (
+        <div className={cn("row")}>
+            {labelElement}
+            <div style={style} className={cn("control", { group: singleLineControlGroup })}>
+                {children}
+            </div>
+        </div>
+    );
+}

src/Components/TriggerEditForm/MetricSourceSelect.tsx → src/Components/TriggerEditForm/Components/MetricSourceSelect.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Gapped, Radio, RadioGroup } from "@skbkontur/react-ui";
-import TriggerSource from "../../Domain/Trigger";
+import TriggerSource from "../../../Domain/Trigger";
 import { Link } from "@skbkontur/react-ui/components/Link";
 
 interface Props {

src/Components/TriggerEditForm/TriggerEditForm.less

@@ -7,35 +7,6 @@
     top:3px
 }
 
-.form {
-    max-width: 800px;
-}
-
-.row {
-    display: flex;
-    align-items: baseline;
-    margin-bottom: 15px;
-
-    textarea {
-        vertical-align: top;
-    }
-}
-
-.label {
-    flex-shrink: 0;
-    width: 150px;
-}
-
-.control {
-    margin-left: auto;
-    width: calc(~'100% - 150px');
-}
-
-.label-for-group {
-    align-self: flex-start;
-    padding-top: 7px;
-}
-
 .target {
     top: 4px;
     position: relative;
@@ -49,15 +20,6 @@
     padding-right: 5px;
 }
 
-.group {
-    display: flex;
-    align-items: center;
-
-    & > * {
-        margin-right: 5px;
-    }
-}
-
 .days, .new-metrics {
     margin-bottom: 15px;
     display: flex;