contentoh-components-library 21.3.54 → 21.3.55

package/src/components/pages/RetailerProductEdition/utils.js

@@ -1,5 +1,4 @@
 import axios from "axios";
-import { fetchPOST } from "../../../global-files/handle_http";
 
 export const getAuditVersion = async (articleId, setState, token) => {
   const auditResponse = await axios.get(
@@ -33,39 +32,3 @@ export const getInputsData = (
     setDescriptionState(descriptions);
   }
 };
-
-export const translateService = (tab) => {
-  switch (tab) {
-    case "description":
-    case "Descripción":
-      return "Descripciones";
-    case "datasheet":
-    case "Ficha técnica":
-      return "Fichas técnicas";
-    case "images":
-    case "Imágenes":
-      return "Imágenes";
-  }
-};
-
-export const createMessage = (
-  retailers,
-  idRetailer,
-  oldStatus,
-  newStatus,
-  service
-) => {
-  const [retailer] = retailers?.filter((ret) => ret.id === idRetailer) || [];
-  return `${translateService(service)} de ${
-    retailer.name
-  } |${oldStatus}| a |${newStatus}`;
-};
-
-export const sendMessage = async (data) => {
-  const { paramsBody, paramsHeader } = data;
-  return fetchPOST(
-    process.env.REACT_APP_CREATE_MESSAGES,
-    paramsBody,
-    paramsHeader
-  );
-};

package/src/index.js

@@ -78,7 +78,6 @@ export * from "./components/organisms/Chat/index";
 export * from "./components/organisms/Modal/index";
 export * from "./components/organisms/OrderDetail/index";
 export * from "./components/organisms/RangeCalendar";
-export * from "./components/organisms/TableResizable";
 
 //pages
 export * from "./components/pages/ChangePasswordLogin";

package/src/components/organisms/TableResizable/TableResizable.stories.js

@@ -1,17 +0,0 @@
-import { TableResizable } from ".";
-import { data } from "./utils.js";
-
-export default {
-  title: "Components/organisms/TableResizable",
-  component: TableResizable,
-};
-
-const Template = (args) => <TableResizable {...args} />;
-
-export const DefaultTableResizable = Template.bind({});
-DefaultTableResizable.args = {
-  headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
-  tableContent: data,
-  minCellWidth: 120,
-  withResetSizeButton: true,
-};

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

@@ -1,119 +0,0 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { RestartAlt } from "@mui/icons-material";
-import { Container } from "./styles.js";
-
-const createHeaders = (headers) => {
-  return headers.map((item) => ({
-    text: item,
-    ref: useRef(),
-  }));
-};
-
-/*
- * Read the blog post here:
- * https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
- */
-export const TableResizable = (props) => {
-  const {
-    gridTemplateColumns,
-    headers,
-    minCellWidth,
-    tableContent,
-    withResetSizeButton,
-  } = props;
-  // const [tableHeight, setTableHeight] = useState("auto");
-  const [activeIndex, setActiveIndex] = useState(null);
-  const tableElement = useRef(null);
-  const columns = createHeaders(headers);
-
-  // useEffect(() => {
-  //   setTableHeight(tableElement.current.offsetHeight);
-  // }, []);
-
-  const mouseDown = (index) => setActiveIndex(index);
-
-  const mouseMove = useCallback(
-    (e) => {
-      const gridColumns = columns.map((col, i) => {
-        if (i === activeIndex) {
-          const width = e.clientX - col.ref.current.offsetLeft;
-          if (width >= minCellWidth) return `${width}px`;
-        }
-        return `${col.ref.current.offsetWidth}px`;
-      });
-      const gridTemplateColumns = `${gridColumns.join(" ")}`;
-      tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
-    },
-    [activeIndex, columns, minCellWidth]
-  );
-
-  const removeListeners = useCallback(() => {
-    window.removeEventListener("mousemove", mouseMove);
-    window.removeEventListener("mouseup", removeListeners);
-  }, [mouseMove]);
-
-  const mouseUp = useCallback(() => {
-    setActiveIndex(null);
-    removeListeners();
-  }, [setActiveIndex, removeListeners]);
-
-  useEffect(() => {
-    if (activeIndex > -1) {
-      window.addEventListener("mousemove", mouseMove);
-      window.addEventListener("mouseup", mouseUp);
-    }
-    return () => removeListeners();
-  }, [activeIndex, mouseMove, mouseUp, removeListeners]);
-
-  const resetTableCells = () => {
-    tableElement.current.style.gridTemplateColumns = "";
-  };
-
-  return (
-    <Container
-      gridTemplateColumns={gridTemplateColumns}
-      totalColumns={columns?.length}
-      totalRows={tableContent?.length}
-    >
-      {withResetSizeButton ? (
-        <button className="reset-button" onClick={resetTableCells}>
-          <RestartAlt sx={{ fontSize: 18 }} />
-        </button>
-      ) : null}
-      <div className="table-wrapper">
-        <table className="resizeable-table" ref={tableElement}>
-          <thead>
-            <tr>
-              {columns?.map(({ ref, text }, i) => (
-                <th ref={ref} key={i}>
-                  <span>{text}</span>
-                  <div
-                    style={{ height: "50px" /* tableHeight */ }}
-                    onMouseDown={() => mouseDown(i)}
-                    className={`resize-handle ${
-                      activeIndex === i ? "active" : "idle"
-                    }`}
-                  />
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {tableContent.map((row) => (
-              <tr key={row.key}>
-                {row?.columns?.map((column, indexColumn) => (
-                  <td
-                    className={typeof column === "object" ? "noOverflow" : ""}
-                    key={`${row.key}-${indexColumn}`}
-                  >
-                    <span>{column}</span>
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </Container>
-  );
-};

package/src/components/organisms/TableResizable/styles.js

@@ -1,133 +0,0 @@
-import styled from "styled-components";
-
-const defaultTemplateColumns = (totalColumns) =>
-  `minmax(100px, 1fr) `.repeat(totalColumns);
-
-export const Container = styled.div`
-  position: absolute;
-  overflow: hidden; /* Clips any scrollbars that appear */
-  font-family: Avenir Next;
-  font-size: 13px;
-  width: 90%;
-
-  .reset-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    cursor: pointer;
-    padding: 3px;
-    border: 0;
-    background: #f5f5f5;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    margin: 0;
-    z-index: 10;
-  }
-
-  .table-wrapper {
-    border-radius: 6px;
-    background: #fff;
-  }
-
-  table {
-    width: 100%;
-    height: calc(100vh - 250px);
-    overflow: auto; /* Allow scrolling within the table */
-    display: grid;
-    grid-template-columns: ${(props) =>
-      props.gridTemplateColumns ?? defaultTemplateColumns(props.totalColumns)};
-    grid-template-rows: ${(props) => `repeat(${props.totalRows + 2}, 50px)`};
-  }
-
-  table th {
-    font-size: 15px;
-  }
-
-  table th,
-  table td {
-    text-align: left;
-    padding: 5px;
-  }
-
-  table th span,
-  table td span {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: block;
-    border-right: 1px solid #ccc;
-    text-align: center;
-    height: 100%;
-  }
-
-  table th:last-child span,
-  table td:last-child span {
-    border-right: 0px;
-  }
-
-  table tr td {
-    border-bottom: 1px solid #ccc;
-  }
-
-  table tr th {
-    border-bottom: 1px solid #ccc;
-  }
-
-  table thead,
-  table tbody,
-  table tr {
-    display: contents;
-    background: red;
-  }
-
-  table thead {
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-  }
-
-  th {
-    position: sticky;
-    top: 0;
-    background-color: #fff;
-    line-height: 40px;
-    z-index: 8;
-  }
-
-  td {
-    line-height: 40px;
-    height: 50px;
-  }
-
-  .resize-handle {
-    display: block;
-    position: absolute;
-    cursor: col-resize;
-    width: 8px;
-    right: 0;
-    top: 0;
-    z-index: 1;
-    border-right: 1px solid transparent;
-  }
-
-  .resize-handle:hover {
-    border-color: #ccc;
-  }
-
-  .resize-handle.active {
-    border-color: #517ea5;
-  }
-
-  .resizeable-table {
-    width: 100%;
-  }
-
-  .noOverflow {
-    overflow: inherit;
-    span {
-      overflow: inherit;
-    }
-  }
-`;

package/src/components/organisms/TableResizable/utils.js

@@ -1,46 +0,0 @@
-export const data = [
-  {
-    key: 1,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-  {
-    key: 2,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-  {
-    key: 3,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-  {
-    key: 4,
-    object: {},
-    columns: [
-      "Large Detroit Style Pizza",
-      3213456785,
-      "$31.43",
-      "Pending",
-      "Dave",
-    ],
-  },
-];