@truedat/core 5.18.2 → 5.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.18.2",
+  "version": "5.19.0",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "d69ace0ddcf34baa4f4b60a6862a053327c1d299"
+  "gitHead": "df3fcd6655456c3468259d79762800c3c417147d"
 }

package/src/components/FilterDropdown.js

@@ -1,9 +1,16 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { Label, Icon, Dropdown, Dimmer, Loader } from "semantic-ui-react";
-import { accentInsensitivePathOrder } from "../services/sort";
+import {
+  Label,
+  Icon,
+  Dropdown,
+  Dimmer,
+  Loader,
+  Input,
+} from "semantic-ui-react";
+import { accentInsensitivePathOrder, lowerDeburr } from "../services/sort";
 import FilterItem from "./FilterItem";
 
 const removePrefix = _.replace(/^.*\./, "");
@@ -17,55 +24,128 @@ export const FilterDropdown = ({
   options,
   removeFilter,
   toggleFilterValue,
-}) => (
-  <Dropdown
-    item
-    floating
-    scrolling
-    icon={false}
-    upward={false}
-    trigger={
-      <Label key={filter}>
-        <FormattedMessage
-          id={`filters.${filter}`}
-          defaultMessage={removePrefix(filter)}
-        />
-        <Icon
-          name="delete"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            removeFilter({ filter });
-          }}
-        />
-      </Label>
-    }
-    onOpen={() => openFilter({ filter })}
-    onClose={() => closeFilter({ filter })}
-    open={!_.isEmpty(options)}
-  >
-    <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
-      {options &&
-        _.flow(
-          _.sortBy(accentInsensitivePathOrder("text")),
-          _.map.convert({ cap: false })((option, i) => (
-            <FilterItem
-              key={i}
-              filter={filter}
-              option={option}
-              toggleFilterValue={toggleFilterValue}
-              active={_.includes(_.prop("value")(option))(activeValues)}
-            />
-          ))
-        )(options)}
-      {loading && (
-        <Dimmer active inverted>
-          <Loader size="tiny" />
-        </Dimmer>
-      )}
-    </Dimmer.Dimmable>
-  </Dropdown>
-);
+}) => {
+  const [selected, setSelected] = useState();
+  const [query, setQuery] = useState();
+
+  useEffect(() => {
+    const activeOptions = _.filter((option) =>
+      _.includes(option.value)(activeValues)
+    )(options);
+
+    _.flow(
+      _.reduce((acc, option) => [...acc, option], []),
+      _.uniq,
+      setSelected
+    )(activeOptions);
+  }, [activeValues, options]);
+
+  const handleSearch = (e, { value }) => {
+    e.preventDefault();
+    setQuery(lowerDeburr(value));
+  };
+
+  const toogleSelectedOption = (selectedOption) => {
+    const newSelectedOptions = selected.find(
+      (s) => s.value === selectedOption.value
+    )
+      ? selected.filter((s) => s.value !== selectedOption.value)
+      : [...selected, selectedOption];
+    setSelected(newSelectedOptions);
+    toggleFilterValue({ filter, value: selectedOption.value });
+  };
+
+  const match = (name, query) => _.contains(query)(lowerDeburr(name));
+  const filterSearch = (all) =>
+    query ? _.filter((option) => match(option.text, query))(all) : all;
+
+  const filteredOptions = filterSearch(options);
+
+  return (
+    <Dropdown
+      item
+      floating
+      scrolling
+      icon={false}
+      upward={false}
+      trigger={
+        <Label key={filter}>
+          <FormattedMessage
+            id={`filters.${filter}`}
+            defaultMessage={removePrefix(filter)}
+          />
+          <Icon
+            name="delete"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              removeFilter({ filter });
+            }}
+          />
+        </Label>
+      }
+      onOpen={() => openFilter({ filter })}
+      onClose={() => closeFilter({ filter })}
+      open={!_.isEmpty(options)}
+    >
+      <Dimmer.Dimmable as={Dropdown.Menu} dimmed={loading}>
+        <>
+          {options && options.length >= 8 && (
+            <>
+              <Input
+                icon="search"
+                iconPosition="left"
+                className="search"
+                onKeyDown={(e) => {
+                  if (e.key === " ") {
+                    e.stopPropagation();
+                  }
+                }}
+                onChange={handleSearch}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              />
+              {selected &&
+                _.flow(
+                  _.sortBy(accentInsensitivePathOrder("text")),
+                  _.map.convert({ cap: false })((option, i) => (
+                    <FilterItem
+                      key={i}
+                      filter={filter}
+                      option={option}
+                      toggleFilterValue={toogleSelectedOption}
+                      active={_.includes(_.prop("value")(option))(activeValues)}
+                    />
+                  ))
+                )(selected)}
+              <Dropdown.Divider />
+            </>
+          )}
+          {filteredOptions &&
+            _.flow(
+              _.sortBy(accentInsensitivePathOrder("text")),
+              _.map.convert({ cap: false })((option, i) => (
+                <FilterItem
+                  key={i}
+                  filter={filter}
+                  option={option}
+                  toggleFilterValue={toggleFilterValue}
+                  active={_.includes(_.prop("value")(option))(activeValues)}
+                />
+              ))
+            )(filteredOptions)}
+        </>
+        {loading && (
+          <Dimmer active inverted>
+            <Loader size="tiny" />
+          </Dimmer>
+        )}
+      </Dimmer.Dimmable>
+    </Dropdown>
+  );
+};
 
 FilterDropdown.propTypes = {
   activeValues: PropTypes.array,

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

@@ -1,7 +1,9 @@
 import _ from "lodash/fp";
 import React from "react";
-import { shallow } from "enzyme";
-import { Dropdown } from "semantic-ui-react";
+import { render } from "@truedat/test/render";
+import { waitFor, within, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
 import { FilterDropdown } from "../FilterDropdown";
 
 const options = _.map((value) => ({ value, text: value }))([
@@ -9,42 +11,172 @@ const options = _.map((value) => ({ value, text: value }))([
   "value2",
 ]);
 
+const largeOptions = _.range(0, 8).map((n) => ({
+  value: `value${n}`,
+  text: `value${n}`,
+}));
+
+const props = {
+  openFilter: jest.fn(),
+  closeFilter: jest.fn(),
+  removeFilter: jest.fn(),
+  toggleFilterValue: jest.fn(),
+  filter: "foo",
+  options,
+};
+
 describe("<FilterDropdown/>", () => {
   it("matches the latest snapshot", () => {
-    const filter = "foo";
-    const props = { filter, options };
-    const wrapper = shallow(<FilterDropdown {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("dispatches openFilter, closeFilter and removeFilter", () => {
-    const closeFilter = jest.fn();
-    const openFilter = jest.fn();
-    const removeFilter = jest.fn();
-    const filter = "foo";
-    const props = {
-      closeFilter,
-      filter,
-      openFilter,
-      options,
-      removeFilter,
+    const { container } = render(<FilterDropdown {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("render search input if has more than eight options", () => {
+    const customProps = {
+      ...props,
+      options: largeOptions,
+    };
+    const { getByRole } = render(<FilterDropdown {...customProps} />);
+
+    expect(getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("no render search input if has more than eight options", () => {
+    const { queryByRole } = render(<FilterDropdown {...props} />);
+    expect(queryByRole("textbox")).toBeNull();
+  });
+
+  it("check option check it correctly", () => {
+    const customProps = {
+      ...props,
+      options: largeOptions,
+    };
+
+    const selectedOption = customProps.options[6].text;
+
+    const { getByRole, getAllByRole, rerender } = render(
+      <FilterDropdown {...customProps} />
+    );
+
+    expect(customProps.toggleFilterValue).toBeCalledTimes(0);
+    userEvent.click(
+      getByRole("option", { name: new RegExp(selectedOption, "i") })
+    );
+    expect(customProps.toggleFilterValue).toBeCalledWith({
+      filter: props.filter,
+      value: selectedOption,
+    });
+
+    const rerenderProps = {
+      ...customProps,
+      activeValues: [selectedOption],
+    };
+    rerender(<FilterDropdown {...rerenderProps} />);
+
+    expect(
+      within(getAllByRole("option")[0]).queryByText(selectedOption)
+    ).not.toBeNull();
+  });
+
+  it("type in filter input filter options", () => {
+    const customProps = {
+      ...props,
+      options: largeOptions,
     };
-    const wrapper = shallow(<FilterDropdown {...props} />);
-    expect(openFilter.mock.calls.length).toBe(0);
-    expect(closeFilter.mock.calls.length).toBe(0);
-    expect(removeFilter.mock.calls.length).toBe(0);
-
-    wrapper.find(Dropdown).simulate("open");
-    expect(openFilter.mock.calls.length).toBe(1);
-
-    wrapper.find(Dropdown).simulate("close");
-    expect(closeFilter.mock.calls.length).toBe(1);
-
-    const e = { preventDefault: jest.fn(), stopPropagation: jest.fn() };
-    wrapper
-      .prop("trigger")
-      .props["children"].find(_.has("props.onClick"))
-      .props.onClick(e);
-    expect(removeFilter.mock.calls.length).toBe(1);
+
+    const searchText = "3";
+
+    const { getByRole, queryByRole, getAllByRole } = render(
+      <FilterDropdown {...customProps} />
+    );
+    const input = getByRole("textbox");
+
+    expect(
+      getByRole("option", {
+        name: new RegExp(customProps.options[1].text, "i"),
+      })
+    ).toBeInTheDocument();
+
+    userEvent.type(input, searchText);
+
+    expect(
+      queryByRole("option", {
+        name: new RegExp(customProps.options[1].text, "i"),
+      })
+    ).toBeNull();
+
+    expect(
+      within(getByRole("option")).getByText(`value${searchText}`)
+    ).toBeInTheDocument();
+
+    expect(getAllByRole("option").length).toBe(1);
+  });
+
+  it("type in filter not hidde selected values", () => {
+    const selectedOption = largeOptions[6].text;
+
+    const customProps = {
+      ...props,
+      options: largeOptions,
+      activeValues: [selectedOption],
+    };
+
+    const searchText = "3";
+
+    const { getByRole, queryByRole, getAllByRole } = render(
+      <FilterDropdown {...customProps} />
+    );
+    const input = getByRole("textbox");
+
+    userEvent.type(input, searchText);
+
+    expect(
+      within(getAllByRole("option")[0]).getByText(selectedOption)
+    ).toBeInTheDocument();
+
+    expect(
+      within(getAllByRole("option")[1]).getByText(`value${searchText}`)
+    ).toBeInTheDocument();
+
+    expect(
+      queryByRole("option", {
+        name: new RegExp(customProps.options[1].text, "i"),
+      })
+    ).toBeNull();
+
+    expect(getAllByRole("option").length).toBe(2);
+  });
+
+  it("dispatches openFilter", () => {
+    const customProps = {
+      ...props,
+      options: [],
+    };
+
+    const { rerender } = render(<FilterDropdown {...customProps} />);
+
+    rerender(<FilterDropdown {...props} />);
+
+    waitFor(() => expect(props.openFilter).toBeCalledTimes(1));
+  });
+
+  it("dispatches closeFilter", () => {
+    const customProps = {
+      ...props,
+      options: [],
+    };
+
+    const { rerender } = render(<FilterDropdown {...props} />);
+    rerender(<FilterDropdown {...customProps} />);
+
+    waitFor(() => expect(props.closeFilter).toBeCalledTimes(1));
+  });
+
+  it("remove filter dispatches removeFilter", async () => {
+    const { container } = render(<FilterDropdown {...props} />);
+    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await waitFor(() => {
+      expect(props.removeFilter).toBeCalledTimes(1);
+    });
   });
 });

package/src/components/__tests__/__snapshots__/FilterDropdown.spec.js.snap

@@ -1,67 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FilterDropdown/> matches the latest snapshot 1`] = `
-<Dropdown
-  additionLabel="Add "
-  additionPosition="top"
-  closeOnBlur={true}
-  closeOnEscape={true}
-  deburr={false}
-  floating={true}
-  icon={false}
-  item={true}
-  minCharacters={1}
-  noResultsMessage="No results found."
-  onClose={[Function]}
-  onOpen={[Function]}
-  open={true}
-  openOnFocus={true}
-  renderLabel={[Function]}
-  scrolling={true}
-  searchInput="text"
-  selectOnBlur={true}
-  selectOnNavigation={true}
-  trigger={
-    <Label>
-      <Memo(MemoizedFormattedMessage)
-        defaultMessage="foo"
-        id="filters.foo"
-      />
-      <Icon
-        as="i"
-        name="delete"
-        onClick={[Function]}
-      />
-    </Label>
-  }
-  upward={false}
-  wrapSelection={true}
->
-  <DimmerDimmable
-    as={[Function]}
+<div>
+  <div
+    aria-expanded="true"
+    class="ui active visible floating item scrolling dropdown"
+    role="listbox"
+    tabindex="0"
   >
-    <FilterItem
-      active={false}
-      filter="foo"
-      key="0"
-      option={
-        {
-          "text": "value1",
-          "value": "value1",
-        }
-      }
-    />
-    <FilterItem
-      active={false}
-      filter="foo"
-      key="1"
-      option={
-        {
-          "text": "value2",
-          "value": "value2",
-        }
-      }
-    />
-  </DimmerDimmable>
-</Dropdown>
+    <div
+      class="ui label"
+    >
+      foo
+      <i
+        aria-hidden="true"
+        class="delete icon"
+      />
+    </div>
+    <div
+      class="menu transition dimmable visible"
+    >
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value1
+      </div>
+      <div
+        aria-checked="false"
+        class="item"
+        role="option"
+      >
+        <i
+          aria-hidden="true"
+          class="square outline icon"
+        />
+        value2
+      </div>
+    </div>
+  </div>
+</div>
 `;