contentoh-components-library 21.2.91 → 21.2.92

package/src/components/organisms/OrderDetail/utils/ImageGroup/index.js

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import ReactImageFallback from "react-image-fallback";
+import { MainContainer, Image, NameHover, CounterExtra } from "./styles";
+import DefaultImage from "../../../../../assets/images/defaultImages/defaultProfileImage.svg";
+
+export default function Table({ images }) {
+  const [indexHover, setIndexHover] = useState();
+
+  return (
+    <MainContainer>
+      {images.map((image, i) => (
+        <Image
+          onMouseEnter={() => setIndexHover(i)}
+          onMouseLeave={() => setIndexHover()}
+          key={image.id}
+          index={i}
+        >
+          {image.id !== -1 ? (
+            <ReactImageFallback
+              src={image.src}
+              fallbackImage={DefaultImage}
+              className="img"
+            />
+          ) : (
+            <CounterExtra>{image.src}</CounterExtra>
+          )}
+          {indexHover === i && image.name && (
+            <NameHover index={i}>{image.name}</NameHover>
+          )}
+        </Image>
+      ))}
+    </MainContainer>
+  );
+}

package/src/components/organisms/OrderDetail/utils/ImageGroup/styles.js

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+
+export const Image = styled.div`
+  position: absolute;
+  z-index: ${({ index }) => 5 - index};
+  left: ${({ index }) => `${11 * index}px`};
+  .img {
+    width: 18px;
+    height: 18px;
+    object-fit: fill;
+    border-radius: 100%;
+  }
+`;
+
+export const NameHover = styled.div`
+  white-space: nowrap;
+  z-index: 20;
+  position: absolute;
+  left: ${({ index }) => 9}px;
+  top: -7px;
+  font-family: Roboto;
+  font-size: 10px;
+  background: #ffffff;
+  border-radius: 3px;
+  box-shadow: 0px 2px 4px #00000029;
+  padding: 2px 5px;
+`;
+
+export const CounterExtra = styled.div`
+  background: #8a6caaaa;
+  color: #ffffff;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 5px;
+`;

package/src/components/organisms/OrderDetail/utils/Table/index.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from "react";
+import { Status } from "../../../../atoms/Status";
+import { CheckBox } from "../../../../atoms/CheckBox";
+import ImageGroup from "../ImageGroup";
+import { getRetailerPicture } from "../../../../../_utils/helper";
+import { Header, Column, Rows } from "./styles";
+import { servicesCodeIcon } from "./utils";
+
+export default function Table(props) {
+  const [headers, setHeaders] = useState([]);
+  const [values, setValues] = useState([]);
+  const [config, setConfig] = useState({ wides: [], types: [], extends: [] });
+  const [showExtends, setShowExtends] = useState(-1);
+
+  useEffect(() => {
+    const tempConfig = { wides: [], types: [], extends: [] };
+    const headersName = [];
+    const values = [];
+    props.headers.forEach(({ width, name, type }) => {
+      tempConfig.wides.push(width);
+      tempConfig.types.push(type);
+      headersName.push(name);
+    });
+    Object.entries(props.data).forEach(([key, columns]) => {
+      const copy = columns.extends
+        ? Object.entries(columns.extends).map(([keyExt, columnsExt]) => ({
+            key: keyExt,
+            columns: columnsExt,
+          }))
+        : undefined;
+      tempConfig.extends.push(copy);
+      values.push({ key, columns });
+    });
+    setValues(values);
+    setHeaders(headersName);
+    setConfig(tempConfig);
+  }, [props.data, props.headers]);
+
+  const getTypeColumn = (index, key, value, id, isDetail) => {
+    switch (config.types[index]) {
+      case "groupImages":
+        let images = [];
+        if (value.length > 4) {
+          const remaining = value.length - 3;
+          value.forEach((e, i) => {
+            if (i >= 3) return;
+            images.push({ ...e, src: getRetailerPicture(e.id) });
+          });
+          images.push({
+            id: -1,
+            src: `+${remaining}`,
+            name: `+${remaining} Cadenas`,
+          });
+        } else {
+          images = value.map((e) => ({ ...e, src: getRetailerPicture(e.id) }));
+        }
+        return <ImageGroup images={images} />;
+      case "services":
+        return (
+          <div className="flex">{value.map((e) => servicesCodeIcon[e])}</div>
+        );
+      case "status":
+        return (
+          <div className="center">{value && <Status statusType={value} />}</div>
+        );
+      case "checkout":
+        return (
+          !isDetail && (
+            <div className="center CheckBoxTable">
+              <CheckBox
+                id={`${key}-${id}`}
+                onChange={(e) => {
+                  e.stopPropagation();
+                  value && value.onChange(id, e.target.checked);
+                }}
+                defaultChecked={value.value}
+              />
+            </div>
+          )
+        );
+      default:
+        return value;
+    }
+  };
+
+  return (
+    <>
+      <Header>
+        {headers.map((headers, i) => (
+          <Column key={`header-${i}`} width={config.wides[i]} isHeader>
+            {headers}
+          </Column>
+        ))}
+      </Header>
+      {values.map((v, index) => (
+        <>
+          <Rows
+            key={`row-${v.key}`}
+            index={index}
+            onClick={() => setShowExtends(showExtends === index ? -1 : index)}
+          >
+            {Object.entries(v.columns).map(
+              ([key, c], i) =>
+                key !== "extends" && (
+                  <Column key={`${v.key}-${i}`} width={config.wides[i]}>
+                    {getTypeColumn(i, key, c, v.key)}
+                  </Column>
+                )
+            )}
+          </Rows>
+          {showExtends === index &&
+            config.extends[index] &&
+            Object.values(config.extends[index]).map((v, idx) => (
+              <Rows key={`extends-${v.key}`} index={idx}>
+                {Object.entries(v.columns).map(
+                  ([key, c], i) =>
+                    key !== "extends" && (
+                      <Column
+                        key={`extends-${v.key}-${i}`}
+                        width={config.wides[i]}
+                      >
+                        {getTypeColumn(i, key, c, v.key, true)}
+                      </Column>
+                    )
+                )}
+              </Rows>
+            ))}
+        </>
+      ))}
+    </>
+  );
+}

package/src/components/organisms/OrderDetail/utils/Table/styles.js

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const Header = styled.div`
+  display: flex;
+  height: 35px;
+  width: 100%;
+  border-radius: 5px 5px 0px 0px;
+  background: #f0f0f0;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+`;
+
+export const Column = styled.div`
+  display: flex;
+  align-items: center;
+  height: 35px;
+  width: ${({ width }) => `${width}px`};
+  padding: 10px 15px;
+  font-family: Roboto;
+  font-size: 12px;
+  color: ${({ isHeader }) => (isHeader ? "#262626" : "#707070")};
+  font-weight: ${({ isHeader }) => (isHeader ? "600" : "500")};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  .flex {
+    display: flex;
+  }
+  .material-icons.small {
+    font-size: 18px;
+    color: #b3b3b3;
+  }
+  .center {
+    margin: auto;
+  }
+  &:nth-child(2) {
+    overflow: hidden;
+  }
+`;
+
+export const Rows = styled.div`
+  display: flex;
+  background: ${({ index }) => (index % 2 === 0 ? "#FFFFFF" : "#FAFAFA")};
+  overflow-y: auto;
+  &:hover {
+    cursor: pointer;
+    background: #d4d1d7;
+  }
+`;

package/src/components/organisms/OrderDetail/utils/Table/utils.js

@@ -0,0 +1,27 @@
+export const servicesCodeIcon = {
+  datasheet: (
+    <span key="datasheet" className="material-icons small">
+      &#xf8ee;
+    </span>
+  ),
+  description: (
+    <span key="description" className="material-icons small">
+      &#xe873;
+    </span>
+  ),
+  image: (
+    <span key="image" className="material-icons small">
+      &#xe3f4;
+    </span>
+  ),
+  translate: (
+    <span key="translate" className="material-icons small">
+      &#xe8e2;
+    </span>
+  ),
+  build: (
+    <span key="build" className="material-icons small">
+      &#xe1bd;
+    </span>
+  ),
+};

package/src/global-files/fonts.css

@@ -56,6 +56,12 @@
   font-weight: 400;
 }
 
+@font-face {
+  font-family: "Roboto";
+  src: url("../assets/fonts/Roboto/Roboto-Regular.ttf");
+  font-weight: 400;
+}
+
 .prueba {
   color: #9e3e26;
   color: #b42983;

package/src/global-files/variables.js

@@ -28,6 +28,7 @@ export const FontFamily = {
   Raleway_900: "Raleway-900",
   RobotoMedium: "RobotoMedium",
   RobotoRegular: "RobotoRegular",
+  Roboto: "Roboto",
 };
 
 export const GlobalStatus = [