contentoh-components-library 21.4.4 → 21.4.6

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, product, article }, i) => (
+        <div
+          className="row-container"
+          key={article?.id_article + "-" + article?.id_order}
+          onClick={(e) => onGridClick && onGridClick(e, product, i)}
+        >
+          <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,40 @@
+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;
+  display: flex;
+  justify-content: center;
+`;