FIX | fixed distance between data components factories/taxonomies

src/components/Fields/CheckField.jsx

@@ -1,96 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import EyeIcon from "mdi-react/EyeIcon";
-import classNames from "classnames";
-import CheckIcon from "mdi-react/CheckIcon";
-import { Checkbox } from "antd";
-import "./CheckField.scss";
-
-class CheckField extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  componentWillMount() {}
-
-  componentDidMount() {}
-
-  componentWillReceiveProps(nextProps) {}
-
-  componentWillUnmount() {}
-
-  onChange = (e) => {
-    if (this.props.onChange) {
-      this.props.onChange(e.target.checked);
-    } else {
-      this.props.input.onChange(e.target.checked);
-    }
-  };
-
-  render() {
-    let {
-      input,
-      color,
-      disabled,
-      className,
-      label,
-      meta: { touched, error },
-    } = this.props;
-
-    let name = input.name;
-
-    const CheckboxClass = classNames({
-      "checkbox-btn": true,
-      disabled,
-    });
-
-    return (
-      <div
-        className="form__form-group-filter"
-        // style={{ display: "flex", alignItems: "center" }}
-      >
-        <div className="form__form-group-field">
-          {/* <Checkbox onChange={this.onChange} checked={input.value}>
-            {label}
-          </Checkbox> */}
-          <label
-            className={`${CheckboxClass} ${
-              className ? ` checkbox-btn--${className}` : ""
-            }`}
-            htmlFor={name}
-          >
-            <input
-              className="checkbox-btn__checkbox"
-              type="checkbox"
-              id={name}
-              name={name}
-              onChange={this.onChange}
-              // checked={input.value}
-              checked={true}
-              disabled={disabled}
-            />
-            <span
-              className="checkbox-btn__checkbox-custom"
-              style={color ? { background: color, borderColor: color } : {}}
-            >
-              <CheckIcon />
-            </span>
-            {className === "button" ? (
-              <span className="checkbox-btn__label-svg">
-                <CheckIcon className="checkbox-btn__label-check" />
-                {/* <CloseIcon className="checkbox-btn__label-uncheck" /> */}
-              </span>
-            ) : (
-              ""
-            )}
-            <span className="checkbox-btn__label">{label}</span>
-          </label>
-        </div>
-      </div>
-    );
-  }
-}
-
-CheckField.propTypes = {};
-
-export default CheckField;

src/components/Fields/CheckField.tsx

@@ -1,23 +1,79 @@
 import React, { FC } from "react";
-import { Checkbox } from "antd";
+import classNames from "classnames";
+import CheckIcon from "mdi-react/CheckIcon";
 import "./CheckField.scss";
 
 interface IProps {
   label: string;
   isChecked: boolean;
   onChange: (value: any) => void;
+
+  input: any;
+  color: string;
+  disabled: any;
+  className: any;
+
+  meta: { touched; error };
 }
 
-export const CheckField: FC<IProps> = ({ label, isChecked, onChange }) => {
+export const CheckField: FC<IProps> = ({
+  label,
+  disabled,
+  className,
+  input,
+  color,
+  isChecked,
+  onChange,
+}) => {
+  const onCheckBoxChange = (e) => {
+    if (onChange) {
+      onChange(e.target.checked);
+    } else {
+      input.onChange(e.target.checked);
+    }
+  };
+
+  const CheckboxClass = classNames({
+    "checkbox-btn": true,
+    disabled,
+  });
+
+  let name = input.name;
+
   return (
-    <div
-      className="form__form-group"
-      style={{ display: "flex", alignItems: "center" }}
-    >
+    <div className="form__form-group-filter">
       <div className="form__form-group-field">
-        <Checkbox onChange={onChange} checked={isChecked}>
-          {label}
-        </Checkbox>
+        <label
+          className={`${CheckboxClass} ${
+            className ? ` checkbox-btn--${className}` : ""
+          }`}
+          htmlFor={name}
+        >
+          <input
+            className="checkbox-btn__checkbox"
+            type="checkbox"
+            id={name}
+            name={name}
+            onChange={onCheckBoxChange}
+            // checked={input.value}
+            checked={true}
+            disabled={disabled}
+          />
+          <span
+            className="checkbox-btn__checkbox-custom"
+            style={color ? { background: color, borderColor: color } : {}}
+          >
+            <CheckIcon />
+          </span>
+          {className === "button" ? (
+            <span className="checkbox-btn__label-svg">
+              <CheckIcon className="checkbox-btn__label-check" />
+            </span>
+          ) : (
+            ""
+          )}
+          <span className="checkbox-btn__label">{label}</span>
+        </label>
       </div>
     </div>
   );

src/containers/Factory/components/TreeFactory/style.scss

@@ -78,6 +78,7 @@ $down-icon-color: #282828;
     flex-direction: column;
     width: 100%;
     height: 55px;
+    margin-bottom: 7px;
     // border-bottom: $border;
     // border-top: $border;
 

src/containers/Layout/sidebar/filter_task/index.jsx

@@ -13,9 +13,8 @@ import {
   DateField,
   SelectField,
   TreeSelectField,
-  // CheckField,
+  CheckField,
 } from "../../../../components/Fields";
-import CheckField from "../../../../components/Fields/CheckField.jsx";
 
 class FilterTask extends Component {
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor

src/containers/Taxonomy/components/TreeTaxonomy/style.scss

@@ -95,8 +95,8 @@ $down-icon-color: #282828;
 
   .tree-title {
     width: 100%;
-    height: 32px;
-    margin-bottom: 40px;
+    // height: 32px;
+    margin-bottom: 32px;
 
     display: flex;
     color: $text-color;