contentoh-components-library 21.3.93 → 21.3.95

package/src/components/molecules/RowItem/index.js

@@ -0,0 +1,45 @@
+import { Container } from "./styles";
+import { ColumnItem } from "./ColumnItem";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const RowItem = ({
+  productsArray = [],
+  chkOnChange,
+  onGridClick,
+  chkChecked,
+}) => {
+  return (
+    <Container>
+      {productsArray.map(({ cols, id, product, article }, i) => (
+        <div
+          className="row-container"
+          key={article?.id_article + "-" + article?.id_order}
+          onClick={(e) => onGridClick && onGridClick(product)}
+        >
+          <div
+            className="chk-container"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <CheckBox
+              id={article?.id_article + "-" + article?.id_order}
+              name={article?.id_article + "-" + article?.id_order}
+              className="chk-item"
+              onChange={(e) => chkOnChange && chkOnChange(e, product)}
+              defaultChecked={chkChecked && chkChecked(product)}
+            />
+          </div>
+          {cols.map((col, i) => (
+            <ColumnItem
+              key={article?.id_article + "-" + article?.id_order + "-" + i}
+              element={col.name}
+              flex={col.flex}
+              minWidth={col.minWidth}
+            />
+          ))}
+        </div>
+      ))}
+    </Container>
+  );
+};

package/src/components/molecules/RowItem/styles.js

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  height: calc(100% - 36px);
+  overflow: auto;
+  min-width: fit-content;
+
+  .row-container {
+    display: flex;
+    cursor: pointer;
+    &:hover {
+      background-color: #fafafa;
+    }
+
+    .chk-container {
+      width: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .chk-item {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+`;
+
+export const Column = styled.div`
+  flex: ${({ flex }) => (flex ? flex : 1)};
+  min-width: ${({ minWidth }) => (minWidth ? minWidth : 100)}px;
+  text-align: center;
+  color: #262626;
+  font-family: ${FontFamily.Lato};
+  font-size: 12px;
+  line-height: 16px;
+  padding: 10px 5px;
+`;

package/src/components/molecules/TabsMenu/index.js

@@ -13,9 +13,6 @@ export const TabsMenu = ({
   updatedDescriptions,
   updatedDatasheets,
   images,
-  setUpdatedDescriptions,
-  setUpdatedDatasheets,
-  setImages,
 }) => {
   const [sections, setSections] = useState(tabsSections);
 
@@ -35,14 +32,11 @@ export const TabsMenu = ({
   };
 
   useEffect(() => {
-    if (cancelAccept === "Aceptar" && llave !== "") {
+    if ((cancelAccept === "Aceptar") & (llave !== "")) {
       setCancelAccept("");
       setModal(false);
       activeSection(llave, objeto);
-      setUpdatedDescriptions([]);
-      setUpdatedDatasheets([]);
-      setImages({});
-    } else if (cancelAccept === "Cancelar" && llave !== "") {
+    } else if ((cancelAccept === "Cancelar") & (llave !== "")) {
       setModal(false);
       setCancelAccept("");
     }
@@ -76,18 +70,18 @@ export const TabsMenu = ({
           message="Estás cambiando de vista y aun no guardas cambios ¿Estás seguro?"
           buttons={[
             <ButtonV2
-              key="btn-Cancelar"
-              type="white"
-              label="Cancelar"
+              key={"btn-Cancelar"}
+              type={"white"}
+              label={"Cancelar"}
               size={12}
-              onClick={() => setCancelAccept("Cancelar")}
+              onClick={(event) => setCancelAccept(event.target.textContent)}
             />,
             <ButtonV2
-              key="btn-Aceptar"
-              type="pink"
-              label="Aceptar"
+              key={"btn-Aceptar"}
+              type={"pink"}
+              label={"Aceptar"}
               size={12}
-              onClick={() => setCancelAccept("Aceptar")}
+              onClick={(event) => setCancelAccept(event.target.textContent)}
             />,
           ]}
         />

package/src/components/organisms/FullTabsMenu/index.js

@@ -23,10 +23,9 @@ export const FullTabsMenu = ({
   updatedDescriptions,
   updatedDatasheets,
   selectedImages,
-  setSelectedImages,
   setUpdatedDescriptions,
   setUpdatedDatasheets,
-  setImages,
+  setSelectedImages,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -43,7 +42,6 @@ export const FullTabsMenu = ({
         selectedImages={selectedImages}
         setUpdatedDescriptions={setUpdatedDescriptions}
         setUpdatedDatasheets={setUpdatedDatasheets}
-        setImages={setImages}
         setSelectedImages={setSelectedImages}
       />
       <StatusAsignationInfo