@truedat/bg 4.51.2 → 4.51.4

package/src/taxonomy/components/DomainMenuSelector.js

@@ -1,188 +0,0 @@
-import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
-import { connect } from "react-redux";
-import { Dropdown, Form, Icon, Input, Label } from "semantic-ui-react";
-import PropTypes from "prop-types";
-import { lowerDeburr } from "@truedat/core/services/sort";
-import { useIntl } from "react-intl";
-import { DropdownMenuItem } from "@truedat/core/components";
-import { getDomainSelectorOptions } from "../selectors";
-
-export const DomainMenuSelector = ({
-  domainOptions: options,
-  error,
-  label,
-  name,
-  onBlur,
-  onChange,
-  required = false,
-  value: externalValue,
-}) => {
-  const [value, setValue] = useState(externalValue || []);
-  const [query, setQuery] = useState();
-  const [open, setOpen] = useState([]);
-  const [displayed, setDisplayed] = useState([]);
-  const { formatMessage } = useIntl();
-
-  useEffect(() => {
-    const selectIds = (key, fromIds) =>
-      _.flow(
-        _.filter(({ id }) => _.contains(id)(fromIds)),
-        _.map(key),
-        _.flatten,
-        _.map("id"),
-        _.uniq
-      );
-
-    const ancestorIds = selectIds("ancestors", value)(options);
-    setOpen(_.union(open)(ancestorIds));
-
-    const childrenIds = selectIds("children", ancestorIds)(options);
-    setDisplayed(_.union(displayed)(childrenIds));
-  }, [options]);
-  const handleOpen = (domainId) => {
-    const domain = _.find({ id: domainId })(options);
-    const isOpen = _.contains(domainId)(open);
-    const children = _.map("id")(domain.children);
-    const descendents = _.map("id")(domain.descendents);
-
-    if (isOpen) {
-      setOpen(_.without([domainId, ...descendents])(open));
-      setDisplayed(_.without(descendents)(displayed));
-    } else {
-      setOpen(_.union([domainId])(open));
-      setDisplayed(_.union(children)(displayed));
-    }
-  };
-
-  const displayAll = () => {
-    const ids = _.map("id")(options);
-    setOpen(ids);
-    setDisplayed(ids);
-  };
-
-  const handleSearch = (e, { value }) => {
-    e.preventDefault();
-    setQuery(lowerDeburr(value));
-    if (!_.isEmpty(value)) {
-      displayAll();
-    }
-  };
-
-  const handleClick = (e, domainId) => {
-    const ids = _.includes(domainId)(value)
-      ? _.without([domainId])(value)
-      : _.union([domainId])(value);
-    setValue(ids);
-    onChange && onChange(e, { value: ids });
-  };
-
-  const match = (name, query) => _.contains(query)(lowerDeburr(name));
-  const filterSearch = (all) => {
-    if (query) {
-      return _.filter(
-        (domain) =>
-          match(domain.name, query) ||
-          _.some((descendent) => match(descendent.name, query))(
-            domain.descendents
-          )
-      )(all);
-    }
-    return all;
-  };
-
-  const filterDisplayed = (all) =>
-    _.filter((domain) => domain.level == 0 || _.contains(domain.id)(displayed))(
-      all
-    );
-
-  const trigger = _.isEmpty(value) ? (
-    <label>{formatMessage({ id: "domain.multiple.placeholder" })}</label>
-  ) : (
-    <>
-      {_.map((id) => (
-        <Label key={id}>
-          {_.flow(_.find({ id }), _.prop("name"))(options)}
-          <Icon
-            name="delete"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleClick(e, id);
-            }}
-          />
-        </Label>
-      ))(value)}
-    </>
-  );
-
-  const filteredOptions = _.flow(filterSearch, filterDisplayed)(options);
-
-  return (
-    <Form.Dropdown
-      error={error}
-      floating
-      label={label}
-      name={name}
-      onBlur={onBlur}
-      upward={false}
-      required={required}
-      trigger={trigger}
-      multiple
-      value={value}
-    >
-      <Dropdown.Menu>
-        <Input
-          icon="search"
-          iconPosition="left"
-          className="search"
-          onKeyDown={(e) => {
-            if (e.key === " ") {
-              e.stopPropagation();
-            }
-          }}
-          onChange={handleSearch}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-        />
-        <Dropdown.Menu scrolling>
-          {_.map.convert({ cap: false })((option, i) => (
-            <DropdownMenuItem
-              key={i}
-              check={false}
-              onOpen={handleOpen}
-              onClick={handleClick}
-              open={_.contains(option.id)(open)}
-              canOpen={_.negate(_.isEmpty)(option.children)}
-              selected={_.contains(option.id)(value)}
-              {...option}
-            />
-          ))(filteredOptions)}
-        </Dropdown.Menu>
-      </Dropdown.Menu>
-    </Form.Dropdown>
-  );
-};
-
-DomainMenuSelector.propTypes = {
-  disabledOptions: PropTypes.array,
-  domainOptions: PropTypes.array,
-  error: PropTypes.bool,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  value: PropTypes.array,
-};
-
-const mapStateToProps = (state, props) => ({
-  domainOptions: _.flow(
-    _.prop("domainOptions"),
-    _.defaultTo(getDomainSelectorOptions(state))
-  )(props),
-});
-
-export default connect(mapStateToProps)(DomainMenuSelector);

package/src/taxonomy/components/__tests__/DomainDropdownSelector.spec.js

@@ -1,119 +0,0 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import userEvent, { specialChars } from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-import { DomainDropdownSelector } from "../DomainDropdownSelector";
-
-describe("<DomainDropdownSelector />", () => {
-  const onChange = jest.fn();
-
-  const domainOptions = [
-    {
-      id: 1,
-      name: "Domain 1",
-      level: 0,
-      ancestors: [],
-      children: [{ id: 2, name: "Domain 2", level: 1 }],
-      descendents: [{ id: 2, name: "Domain 2", level: 1 }],
-    },
-    {
-      id: 2,
-      name: "Domain 2",
-      level: 1,
-      children: [],
-      ancestors: [
-        {
-          id: 1,
-          name: "Domain 1",
-        },
-      ],
-    },
-    { id: 3, name: "Domain 3", level: 0, children: [], ancestors: [] },
-  ];
-
-  const props = {
-    domainOptions,
-    onChange: onChange,
-  };
-
-  const messages = {
-    en: {
-      "template.form.validation.empty_required": "Required",
-      "domain.selector.label": "Domain",
-      "domain.selector.placeholder": "Select domain...",
-    },
-  };
-
-  it("matches the latest snapshot", () => {
-    const { container } = render(<DomainDropdownSelector {...props} />, {
-      messages,
-    });
-    expect(container).toMatchSnapshot();
-  });
-
-  it("handles the selection of a colapsed element", async () => {
-    const { getByRole, container, queryByText } = render(
-      <DomainDropdownSelector {...props} />,
-      {
-        messages,
-      }
-    );
-
-    userEvent.click(container.querySelector('[class="plus icon"]'));
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
-    });
-    userEvent.click(container.querySelector('[class="minus icon"]'));
-    await waitFor(() => {
-      expect(queryByText(/Domain 2/)).toBeFalsy();
-    });
-    userEvent.click(container.querySelector('[class="plus icon"]'));
-    const option = getByRole("option", { name: /Domain 2/i });
-    userEvent.click(option);
-    await waitFor(() => {
-      expect(onChange.mock.calls[0][1]).toEqual({ value: 2 });
-    });
-  });
-
-  it("handles the selection of searched elements", async () => {
-    const { container, getByRole } = render(
-      <DomainDropdownSelector {...props} />,
-      {
-        messages,
-      }
-    );
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
-      expect(getByRole("option", { name: /Domain 3/i })).toBeTruthy();
-    });
-
-    const plusIcon = container.querySelector('[class="plus icon"]');
-    userEvent.click(plusIcon);
-
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
-      expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
-      expect(getByRole("option", { name: /Domain 3/i })).toBeTruthy();
-    });
-
-    const input = container.querySelector('[class="search"]');
-    userEvent.type(input, "2");
-
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
-    });
-
-    userEvent.type(input, `${specialChars.backspace}1`);
-
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
-    });
-
-    const option = getByRole("option", { name: /Domain 1/i });
-    userEvent.click(option);
-    await waitFor(() => {
-      expect(onChange.mock.calls[1][1]).toEqual({ value: 1 });
-    });
-    document.activeElement.blur();
-  });
-});

package/src/taxonomy/components/__tests__/DomainMenuSelector.spec.js

@@ -1,122 +0,0 @@
-import React from "react";
-import { waitFor } from "@testing-library/react";
-import userEvent, { specialChars } from "@testing-library/user-event";
-import { render } from "@truedat/test/render";
-import { DomainMenuSelector } from "../DomainMenuSelector";
-
-describe("<DomainMenuSelector />", () => {
-  const onChange = jest.fn();
-
-  const domainOptions = [
-    {
-      id: 1,
-      name: "Domain 1",
-      level: 0,
-      ancestors: [],
-      children: [{ id: 2, name: "Domain 2", level: 1 }],
-      descendents: [{ id: 2, name: "Domain 2", level: 1 }],
-    },
-    {
-      id: 2,
-      name: "Domain 2",
-      level: 1,
-      children: [],
-      ancestors: [
-        {
-          id: 1,
-          name: "Domain 1",
-        },
-      ],
-    },
-    { id: 3, name: "Domain 3", level: 0, children: [], ancestors: [] },
-  ];
-
-  const props = {
-    domainOptions,
-    onChange,
-  };
-
-  const messages = {
-    en: {
-      "domain.multiple.placeholder": "Select domains...",
-    },
-  };
-
-  it("matches the latest snapshot", () => {
-    const { container } = render(<DomainMenuSelector {...props} />, {
-      messages,
-    });
-    expect(container).toMatchSnapshot();
-  });
-
-  it("handles the selection of a colapsed element", async () => {
-    const { getByRole, container, queryByText } = render(
-      <DomainMenuSelector {...props} />,
-      {
-        messages,
-      }
-    );
-
-    userEvent.click(container.querySelector('[class="plus icon"]'));
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
-    });
-    userEvent.click(container.querySelector('[class="minus icon"]'));
-    await waitFor(() => {
-      expect(queryByText(/Domain 2/)).toBeFalsy();
-    });
-    userEvent.click(container.querySelector('[class="plus icon"]'));
-    const option = getByRole("option", { name: /Domain 2/i });
-    userEvent.click(option);
-    await waitFor(() => {
-      expect(onChange.mock.calls[0][1]).toEqual({ value: [2] });
-    });
-  });
-
-  it("handles the selection of searched elements", async () => {
-    const { container, getByRole } = render(<DomainMenuSelector {...props} />, {
-      messages,
-    });
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
-      expect(getByRole("option", { name: /Domain 3/i })).toBeTruthy();
-    });
-
-    const plusIcon = container.querySelector('[class="plus icon"]');
-    userEvent.click(plusIcon);
-
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
-      expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
-      expect(getByRole("option", { name: /Domain 3/i })).toBeTruthy();
-    });
-
-    const input = container.querySelector('[type="text"]');
-    userEvent.type(input, "2");
-
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 2/i })).toBeTruthy();
-    });
-
-    userEvent.type(input, `${specialChars.backspace}1`);
-
-    await waitFor(() => {
-      expect(getByRole("option", { name: /Domain 1/i })).toBeTruthy();
-    });
-
-    const option = getByRole("option", { name: /Domain 1/i });
-    userEvent.click(option);
-    await waitFor(() => {
-      expect(onChange.mock.calls[1][1]).toEqual({ value: [1] });
-      expect(
-        container.querySelector('[class="ui label"]').firstChild.nodeValue
-      ).toEqual("Domain 1");
-    });
-
-    userEvent.click(container.querySelector('[class="delete icon"]'));
-    await waitFor(() => {
-      expect(onChange.mock.calls[2][1]).toEqual({ value: [] });
-      expect(container.querySelector('[class="ui label"]')).toBeFalsy();
-    });
-  });
-});

package/src/taxonomy/components/__tests__/__snapshots__/DomainDropdownSelector.spec.js.snap

@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DomainDropdownSelector /> matches the latest snapshot 1`] = `
-<div>
-  <div
-    class="required field"
-  >
-    <label>
-      Domain
-    </label>
-    <div
-      class="field"
-    >
-      <div
-        aria-expanded="false"
-        class="ui fluid search selection dropdown"
-        name="domain"
-        role="combobox"
-      >
-        <input
-          aria-autocomplete="list"
-          autocomplete="off"
-          class="search"
-          tabindex="0"
-          type="text"
-          value=""
-        />
-        <div
-          aria-atomic="true"
-          aria-live="polite"
-          class="divider default text"
-          role="alert"
-        >
-          Select domain...
-        </div>
-        <i
-          aria-hidden="true"
-          class="dropdown icon"
-        />
-        <div
-          aria-multiselectable="false"
-          class="menu transition"
-          role="listbox"
-        >
-          <div
-            aria-checked="false"
-            aria-selected="true"
-            class="selected item"
-            role="option"
-            style="pointer-events: all;"
-          >
-            <div
-              class="text"
-              style="margin-left: 0px;"
-            >
-              <i
-                aria-hidden="true"
-                class="plus icon"
-              />
-              Domain 1
-            </div>
-          </div>
-          <div
-            aria-checked="false"
-            aria-selected="false"
-            class="item"
-            role="option"
-            style="pointer-events: all;"
-          >
-            <div
-              class="text"
-              style="margin-left: 0px;"
-            >
-              <i
-                aria-hidden="true"
-                class="icon"
-              />
-              Domain 3
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/taxonomy/components/__tests__/__snapshots__/DomainMenuSelector.spec.js.snap

@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DomainMenuSelector /> matches the latest snapshot 1`] = `
-<div>
-  <div
-    class="field"
-  >
-    <div
-      aria-expanded="false"
-      aria-multiselectable="true"
-      class="ui floating multiple dropdown"
-      role="listbox"
-      tabindex="0"
-    >
-      <label>
-        Select domains...
-      </label>
-      <i
-        aria-hidden="true"
-        class="dropdown icon"
-      />
-      <div
-        class="menu transition"
-      >
-        <div
-          class="ui left icon input search"
-        >
-          <input
-            type="text"
-          />
-          <i
-            aria-hidden="true"
-            class="search icon"
-          />
-        </div>
-        <div
-          class="scrolling menu transition"
-        >
-          <div
-            aria-selected="false"
-            class="item"
-            role="option"
-          >
-            <div
-              style="margin-left: 0px;"
-            >
-              <i
-                aria-hidden="true"
-                class="plus icon"
-              />
-              Domain 1
-            </div>
-          </div>
-          <div
-            aria-selected="false"
-            class="item"
-            role="option"
-          >
-            <div
-              style="margin-left: 0px;"
-            >
-              <i
-                aria-hidden="true"
-                class="icon"
-              />
-              Domain 3
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;