@truedat/core 5.9.6 → 5.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.9.6",
+  "version": "5.9.8",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.9.6",
+    "@truedat/test": "5.9.7",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "9f323fd84b59cac49e60b9cf0e441efc192465de"
+  "gitHead": "ea466759ff38b111f12c743f430779586c28f37d"
 }

package/src/components/ArrayDecorator.js

@@ -0,0 +1,38 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import React from "react";
+import { Label, Popup } from "semantic-ui-react";
+
+const ArrayDecorator = (limit, concatenator) => (list) => {
+  const itemsToShow = _.flow(_.take(limit), _.join(concatenator))(list);
+  const hiddenItems = _.slice(limit, Infinity)(list);
+  return ArrayDecoratorComponent({ itemsToShow, hiddenItems });
+};
+
+const ArrayDecoratorComponent = ({ itemsToShow, hiddenItems }) => {
+  return (
+    <div>
+      {itemsToShow + " "}
+      {_.isEmpty(hiddenItems) ? null : (
+        <Popup
+          content=<ul>
+            {_.map((item) => <li key={item}>{item}</li>)(hiddenItems)}
+          </ul>
+          trigger={<Label>+{_.size(hiddenItems)}</Label>}
+        />
+      )}
+    </div>
+  );
+};
+
+ArrayDecoratorComponent.propTypes = {
+  itemsToShow: PropTypes.array,
+  hiddenItems: PropTypes.array,
+};
+
+ArrayDecorator.propTypes = {
+  limit: PropTypes.number,
+  concatenator: PropTypes.string,
+};
+
+export default ArrayDecorator;

package/src/components/__tests__/ArrayDecorator.spec.js

@@ -0,0 +1,54 @@
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ArrayDecorator from "../ArrayDecorator";
+
+describe("<ArrayDecorator />", () => {
+  it("without parameters generate an empty text", () => {
+    const { queryByText } = render(ArrayDecorator());
+    expect(queryByText(",")).not.toBeInTheDocument();
+  });
+
+  it("show list wiht limit 1", () => {
+    const list = ["foo", "bar", "rab", "oof"];
+    const { queryByText } = render(ArrayDecorator(1, ",")(list));
+    expect(queryByText("foo")).toBeInTheDocument();
+    expect(queryByText("bar")).not.toBeInTheDocument();
+    expect(queryByText("+3")).toBeInTheDocument();
+  });
+
+  it("show list wiht limit 3", () => {
+    const list = ["foo", "bar", "rab", "oof"];
+    const { queryByText } = render(ArrayDecorator(3, ", ")(list));
+    expect(queryByText("foo, bar, rab")).toBeInTheDocument();
+    expect(queryByText("oof")).not.toBeInTheDocument();
+    expect(queryByText("+1")).toBeInTheDocument();
+  });
+
+  it("show a popup with hidden items", async () => {
+    const showableItems = ["showable_item_1", "showable_item_2"];
+    const hiddenItems = ["hidden_item_1", "hidden_item_2"];
+    const concatenator = ", ";
+    const list = [...showableItems, ...hiddenItems];
+    const { getByText, getByRole, queryAllByRole } = render(
+      ArrayDecorator(showableItems.length, concatenator)(list)
+    );
+
+    expect(queryAllByRole("listitem")).toEqual([]);
+    expect(getByText(showableItems.join(concatenator))).toBeInTheDocument();
+    userEvent.hover(await getByText("+2"));
+    await waitFor(() => expect(getByRole("list")).toBeInTheDocument());
+    const listItems = queryAllByRole("listitem");
+    expect(listItems.length).toBe(2);
+    const hiddenNames = listItems.map((item) => item.textContent);
+    expect(hiddenNames).toEqual(hiddenItems);
+  });
+
+  it("does not show the popup label whith no hidden items", async () => {
+    const showableItems = ["showable_item_1", "showable_item_2"];
+    const { queryByText } = render(
+      ArrayDecorator(showableItems.length, ",")(showableItems)
+    );
+    expect(queryByText("+0")).not.toBeInTheDocument();
+  });
+});

package/src/components/__tests__/AvailableFilters.spec.js

@@ -13,7 +13,7 @@ describe("<AvailableFilters/>", () => {
   const getProps = () => ({
     addFilter: jest.fn(),
     resetFilters: jest.fn(),
-    filters: ["foo"]
+    filters: ["foo"],
   });
 
   it("matches the latest snapshot", () => {

package/src/messages/en.js

@@ -47,6 +47,7 @@ export default {
   "dateFilter.weeks": "weeks ago",
   "dateFilter.months": "months ago",
   "dateFilter.years": "years ago",
+  emptyBucket: "(Empty)",
   "error.content": "Please report this error to the Truedat team.",
   "error.duplicated": "duplicated",
   "error.header": "Eek! Something went wrong...",

package/src/messages/es.js

@@ -48,6 +48,7 @@ export default {
   "dateFilter.weeks": "semanas",
   "dateFilter.months": "meses",
   "dateFilter.years": "años",
+  emptyBucket: "(Vacío)",
   "error.content": "Por favor, coméntaselo al equipo de Truedat.",
   "error.duplicated": "duplicado",
   "error.header": "Se ha producido un error inesperado",