avine-react-components - npm Package Compare versions

Comparing version 0.1.43 to 0.1.44

dist/components/table/table.d.ts

@@ -30,2 +30,4 @@ import React, { FC } from 'react';
     };
+    title?: string;
+    contentEditable?: boolean;
 }
@@ -32,0 +34,0 @@ declare const Table: FC<TableProps>;

dist/components/table/table.js

@@ -357,2 +357,3 @@ "use strict";
 // src/components/table/table.tsx
+var import_xlsx = require("xlsx");
 var ETableColumnOrder = /* @__PURE__ */ ((ETableColumnOrder2) => {
@@ -379,2 +380,3 @@ ETableColumnOrder2["Asc"] = "asc";
 }) => {
+  const table = (0, import_react5.useRef)(null);
   const [innerColumns, setInnerColumns] = (0, import_react5.useState)(columns);
@@ -393,2 +395,3 @@ const [innerData, setInnerData] = (0, import_react5.useState)(data);
   const emptyText = emptyDataText ? emptyDataText : "N\xE3o existem dados para exibi\xE7\xE3o";
+  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
   const handleSortData = (column) => {
@@ -427,3 +430,20 @@ if (column.sortable) {
   };
-  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
+  const handleExcelExport = () => {
+    const rows = [];
+    for (let i = 0; i < data.length; i++) {
+      let row = {};
+      innerColumns.forEach((column) => {
+        if (column.exportFormatter) {
+          row[column.name] = column.exportFormatter(getNestedValues(column.key, data[i]));
+          return;
+        }
+        row[column.name] = getNestedValues(column.key, data[i]);
+      });
+      rows.push(row);
+    }
+    const worksheet = import_xlsx.utils.json_to_sheet(rows);
+    const workbook = import_xlsx.utils.book_new();
+    import_xlsx.utils.book_append_sheet(workbook, worksheet, "test");
+    (0, import_xlsx.writeFileXLSX)(workbook, "export.xlsx");
+  };
   (0, import_react5.useEffect)(() => setInnerColumns(columns), [columns]);
@@ -444,6 +464,5 @@ (0, import_react5.useEffect)(() => handleFilterData(data, searchValue), [data]);
     }
-  ))), !isLoading && innerData.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full flex items-center space-x-4 justify-between -order-1 md:order-1 md:justify-normal md:w-min" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "Exibindo"), /* @__PURE__ */ import_react5.default.createElement("select", { value: itemsPerPage, onChange: (e) => setItemsPerPage(Number(e.target.value)), className: "bg-green-50 border border-green-300 text-gray-400 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2 outline-none" }, /* @__PURE__ */ import_react5.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "de ", new Intl.NumberFormat("pt-BR").format(innerData.length), " resultados")), /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative text-gray-500" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu, null, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Button, { className: "px-2 py-2 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react5.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Items, { className: "flex flex-col absolute right-0 top-8 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Item, null, /* @__PURE__ */ import_react5.default.createElement("button", { onClick: () => {
-  }, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react5.default.createElement(LuDownload, { className: "mr-2" }), " Exportar")))))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react5.default.createElement("table", { className: `w-full text-sm text-left text-gray-600 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react5.default.createElement("thead", { className: "text-gray-400 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, innerColumns.map((column, index) => {
+  ))), !isLoading && innerData.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full flex items-center space-x-4 justify-between -order-1 md:order-1 md:justify-normal md:w-min" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "Exibindo"), /* @__PURE__ */ import_react5.default.createElement("select", { value: itemsPerPage, onChange: (e) => setItemsPerPage(Number(e.target.value)), className: "bg-green-50 border border-green-300 text-gray-400 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2 outline-none" }, /* @__PURE__ */ import_react5.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "de ", new Intl.NumberFormat("pt-BR").format(innerData.length), " resultados")), /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative text-gray-500" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu, null, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Button, { className: "px-2 py-2 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react5.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Items, { className: "flex flex-col absolute right-0 top-8 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Item, null, /* @__PURE__ */ import_react5.default.createElement("button", { onClick: handleExcelExport, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react5.default.createElement(LuDownload, { className: "mr-2" }), " Exportar")))))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react5.default.createElement("table", { ref: table, className: `w-full text-sm text-left text-gray-600 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react5.default.createElement("thead", { className: "text-gray-400 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, innerColumns.map((column, index) => {
     if (column.visible !== false) {
-      return /* @__PURE__ */ import_react5.default.createElement("th", { key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap font-normal hover:text-gray-600", onClick: column.sortable ? () => handleSortData(column) : void 0 }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, column.rowHeadFormatter ? column.rowHeadFormatter(column.name) : /* @__PURE__ */ import_react5.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react5.default.createElement(LuChevronUp, { size: 12, className: column.sortableOrder === "asc" ? "hover:text-gray-600" : "text-gray-300" }), /* @__PURE__ */ import_react5.default.createElement(LuChevronDown, { size: 12, className: column.sortableOrder === "desc" ? "-mt-1.5 hover:text-gray-600" : "-mt-1.5 text-gray-300" }))));
+      return /* @__PURE__ */ import_react5.default.createElement("th", { title: column.title ?? column.name, key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap font-normal hover:text-gray-600", onClick: column.sortable ? () => handleSortData(column) : void 0 }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, column.rowHeadFormatter ? column.rowHeadFormatter(column.name) : /* @__PURE__ */ import_react5.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react5.default.createElement(LuChevronUp, { size: 12, className: column.sortableOrder === "asc" ? "hover:text-gray-600" : "text-gray-300" }), /* @__PURE__ */ import_react5.default.createElement(LuChevronDown, { size: 12, className: column.sortableOrder === "desc" ? "-mt-1.5 hover:text-gray-600" : "-mt-1.5 text-gray-300" }))));
     }
@@ -462,3 +481,3 @@ return null;
             },
-            /* @__PURE__ */ import_react5.default.createElement("span", null, getValue(column, item, rowIndex))
+            /* @__PURE__ */ import_react5.default.createElement("div", { contentEditable: column.contentEditable }, getValue(column, item, rowIndex))
           );
@@ -472,3 +491,3 @@ }
           },
-          /* @__PURE__ */ import_react5.default.createElement("span", null, getValue(column, item, rowIndex))
+          /* @__PURE__ */ import_react5.default.createElement("div", { contentEditable: column.contentEditable }, getValue(column, item, rowIndex))
         );
@@ -475,0 +494,0 @@ }

dist/components/table/table.stories.js

@@ -362,2 +362,3 @@ "use strict";
 // src/components/table/table.tsx
+var import_xlsx = require("xlsx");
 var getValue = (column, item, index) => {
@@ -379,2 +380,3 @@ if (column.rowCellFormatter)
 }) => {
+  const table = (0, import_react5.useRef)(null);
   const [innerColumns, setInnerColumns] = (0, import_react5.useState)(columns);
@@ -393,2 +395,3 @@ const [innerData, setInnerData] = (0, import_react5.useState)(data);
   const emptyText = emptyDataText ? emptyDataText : "N\xE3o existem dados para exibi\xE7\xE3o";
+  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
   const handleSortData = (column) => {
@@ -427,3 +430,20 @@ if (column.sortable) {
   };
-  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
+  const handleExcelExport = () => {
+    const rows = [];
+    for (let i = 0; i < data.length; i++) {
+      let row = {};
+      innerColumns.forEach((column) => {
+        if (column.exportFormatter) {
+          row[column.name] = column.exportFormatter(getNestedValues(column.key, data[i]));
+          return;
+        }
+        row[column.name] = getNestedValues(column.key, data[i]);
+      });
+      rows.push(row);
+    }
+    const worksheet = import_xlsx.utils.json_to_sheet(rows);
+    const workbook = import_xlsx.utils.book_new();
+    import_xlsx.utils.book_append_sheet(workbook, worksheet, "test");
+    (0, import_xlsx.writeFileXLSX)(workbook, "export.xlsx");
+  };
   (0, import_react5.useEffect)(() => setInnerColumns(columns), [columns]);
@@ -444,6 +464,5 @@ (0, import_react5.useEffect)(() => handleFilterData(data, searchValue), [data]);
     }
-  ))), !isLoading && innerData.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full flex items-center space-x-4 justify-between -order-1 md:order-1 md:justify-normal md:w-min" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "Exibindo"), /* @__PURE__ */ import_react5.default.createElement("select", { value: itemsPerPage, onChange: (e) => setItemsPerPage(Number(e.target.value)), className: "bg-green-50 border border-green-300 text-gray-400 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2 outline-none" }, /* @__PURE__ */ import_react5.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "de ", new Intl.NumberFormat("pt-BR").format(innerData.length), " resultados")), /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative text-gray-500" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu, null, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Button, { className: "px-2 py-2 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react5.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Items, { className: "flex flex-col absolute right-0 top-8 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Item, null, /* @__PURE__ */ import_react5.default.createElement("button", { onClick: () => {
-  }, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react5.default.createElement(LuDownload, { className: "mr-2" }), " Exportar")))))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react5.default.createElement("table", { className: `w-full text-sm text-left text-gray-600 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react5.default.createElement("thead", { className: "text-gray-400 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, innerColumns.map((column, index) => {
+  ))), !isLoading && innerData.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full flex items-center space-x-4 justify-between -order-1 md:order-1 md:justify-normal md:w-min" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-nowrap items-center space-x-2 text-sm text-gray-400" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "Exibindo"), /* @__PURE__ */ import_react5.default.createElement("select", { value: itemsPerPage, onChange: (e) => setItemsPerPage(Number(e.target.value)), className: "bg-green-50 border border-green-300 text-gray-400 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2 outline-none" }, /* @__PURE__ */ import_react5.default.createElement("option", { value: 10, title: "10 itens por p\xE1gina" }, "10"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 50, title: "50 itens por p\xE1gina" }, "50"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 75, title: "75 itens por p\xE1gina" }, "75"), /* @__PURE__ */ import_react5.default.createElement("option", { value: 100, title: "100 itens por p\xE1gina" }, "100")), /* @__PURE__ */ import_react5.default.createElement("span", { className: "whitespace-nowrap" }, "de ", new Intl.NumberFormat("pt-BR").format(innerData.length), " resultados")), /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative text-gray-500" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu, null, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Button, { className: "px-2 py-2 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200" }, /* @__PURE__ */ import_react5.default.createElement(LuMoreVertical, null)), /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Items, { className: "flex flex-col absolute right-0 top-8 bg-white shadow-md border rounded-xl p-4" }, /* @__PURE__ */ import_react5.default.createElement(import_react6.Menu.Item, null, /* @__PURE__ */ import_react5.default.createElement("button", { onClick: handleExcelExport, type: "button", className: "px-3 py-2 text-sm font-medium text-center flex items-center" }, /* @__PURE__ */ import_react5.default.createElement(LuDownload, { className: "mr-2" }), " Exportar")))))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full overflow-x-auto" }, /* @__PURE__ */ import_react5.default.createElement("table", { ref: table, className: `w-full text-sm text-left text-gray-600 ${fixed ?? "table-fixed"}` }, /* @__PURE__ */ import_react5.default.createElement("thead", { className: "text-gray-400 capitalize bg-green-50 whitespace-nowrap" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, innerColumns.map((column, index) => {
     if (column.visible !== false) {
-      return /* @__PURE__ */ import_react5.default.createElement("th", { key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap font-normal hover:text-gray-600", onClick: column.sortable ? () => handleSortData(column) : void 0 }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, column.rowHeadFormatter ? column.rowHeadFormatter(column.name) : /* @__PURE__ */ import_react5.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react5.default.createElement(LuChevronUp, { size: 12, className: column.sortableOrder === "asc" ? "hover:text-gray-600" : "text-gray-300" }), /* @__PURE__ */ import_react5.default.createElement(LuChevronDown, { size: 12, className: column.sortableOrder === "desc" ? "-mt-1.5 hover:text-gray-600" : "-mt-1.5 text-gray-300" }))));
+      return /* @__PURE__ */ import_react5.default.createElement("th", { title: column.title ?? column.name, key: index, scope: "col", className: "py-3 px-6 whitespace-nowrap font-normal hover:text-gray-600", onClick: column.sortable ? () => handleSortData(column) : void 0 }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center justify-between space-x-4" }, column.rowHeadFormatter ? column.rowHeadFormatter(column.name) : /* @__PURE__ */ import_react5.default.createElement("span", null, column.name), column.sortable && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col items-center justify-around" }, /* @__PURE__ */ import_react5.default.createElement(LuChevronUp, { size: 12, className: column.sortableOrder === "asc" ? "hover:text-gray-600" : "text-gray-300" }), /* @__PURE__ */ import_react5.default.createElement(LuChevronDown, { size: 12, className: column.sortableOrder === "desc" ? "-mt-1.5 hover:text-gray-600" : "-mt-1.5 text-gray-300" }))));
     }
@@ -462,3 +481,3 @@ return null;
             },
-            /* @__PURE__ */ import_react5.default.createElement("span", null, getValue(column, item, rowIndex))
+            /* @__PURE__ */ import_react5.default.createElement("div", { contentEditable: column.contentEditable }, getValue(column, item, rowIndex))
           );
@@ -472,3 +491,3 @@ }
           },
-          /* @__PURE__ */ import_react5.default.createElement("span", null, getValue(column, item, rowIndex))
+          /* @__PURE__ */ import_react5.default.createElement("div", { contentEditable: column.contentEditable }, getValue(column, item, rowIndex))
         );
@@ -1158,3 +1177,4 @@ }
           key: ["title"],
-          name: "Title"
+          name: "Title",
+          contentEditable: true
         },
@@ -1161,0 +1181,0 @@ {

dist/components/table/utils.js

@@ -50,2 +50,5 @@ "use strict";
 
+// src/components/table/table.tsx
+var import_xlsx = require("xlsx");
+
 // src/components/table/utils.ts
@@ -52,0 +55,0 @@ var COLLATOR = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });

package.json

 {
     "name": "avine-react-components",
-    "version": "0.1.43",
+    "version": "0.1.44",
     "license": "MIT",
@@ -24,3 +24,2 @@ "description": "",
     "author": "Carlos Daniel",
-    "peerDependencies": {},
     "devDependencies": {
@@ -54,4 +53,5 @@ "@storybook/addon-essentials": "^7.6.4",
         "react-lottie": "^1.2.4",
-        "tailwindcss": "^3.3.6"
+        "tailwindcss": "^3.3.6",
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
     }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

HTTP dependency

Supply chain risk

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9686406

increased by0.2%

Lines of code

19066

increased by0.78%

Worsened metrics

Dependency count

7

increased by16.67%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedxlsx@https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz