@truedat/core 4.47.4 → 4.47.5

package/CHANGELOG.md

@@ -1,8 +1,14 @@
 # Changelog
 
+## [4.47.5] 2022-06-30
+
+### Added
+
+- [TD-4894] Multiple column operator in implementation creation
+
 ## [4.46.12] 2022-06-20
 
-### Reverted
+### Removed
 
 - [TD-4894] Multiple column operator in implementation creation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.47.4",
+  "version": "4.47.5",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.47.4",
+    "@truedat/test": "4.47.5",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "9d38ae9759ce669fe1b459a3ee80c314d33871e0"
+  "gitHead": "1265272aa7b8fcb415592916f0e557ae226befe3"
 }

package/src/components/OptionGroup.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Dropdown } from "semantic-ui-react";
 import { lowerDeburr } from "../services/sort";
@@ -27,13 +27,18 @@ export const OptionGroup = ({
   options = [],
   placeholder = "Select",
   onClick,
+  onChange,
   value,
+  multiple,
 }) => {
   const [availableOptions, setOptions] = useState(options);
+  const [flattenedOptions, setFlattenedOptions] = useState();
   const [open, openMenu] = useState(false);
   const [query, setQuery] = useState("");
 
-  if (_.isEmpty(query) && options !== availableOptions) setOptions(options);
+  if (_.isEmpty(query) && options !== availableOptions) {
+    setOptions(options);
+  }
 
   const doSearch = ({ searchQuery }) => {
     !open && openMenu(true);
@@ -55,6 +60,14 @@ export const OptionGroup = ({
     );
   };
 
+  useEffect(() => {
+    // eslint-disable-next-line prettier/prettier
+    _.flow(
+      toFlattenedShorthands,
+      setFlattenedOptions
+    )(availableOptions);
+  }, [availableOptions]);
+
   const flatOptionMatches = (o, searchQuery) =>
     !_.has("options")(o) && optionMatches(lowerDeburr(searchQuery))(o);
 
@@ -72,10 +85,15 @@ export const OptionGroup = ({
   const optionMatches = (q) => (o) => matches(q)(selection(o));
 
   const doOnClick = (e, values) => {
+    !multiple && openMenu(false);
     setQuery("");
     onClick(values);
   };
 
+  const onChangeOptionsGroup = (e, dropdown) => {
+    multiple && onChange(dropdown.value);
+  };
+
   const findText = () =>
     _.flow(
       _.reduce(
@@ -89,10 +107,44 @@ export const OptionGroup = ({
 
   const text = value && !query && findText();
 
+  const toFlattenedShorthands = (availableOpts) =>
+    availableOpts.flatMap((option, i) => {
+      const result = _.has("options")(option)
+        ? [
+            {
+              key: i,
+              children: (
+                <>
+                  <Dropdown.Divider />
+                  <Dropdown.Header icon={option.icon} content={option.label} />
+                </>
+              ),
+              disabled: true,
+            },
+            ...option.options.map((innerOption, i) => ({
+              ...innerOption,
+              className: "group",
+              onClick: doOnClick,
+            })),
+          ]
+        : [
+            {
+              ...option,
+              className: "header",
+              onClick: doOnClick,
+            },
+          ];
+      return result;
+    });
+
   return (
     <>
       {label && <label>{label}</label>}
+
       <Dropdown
+        multiple={multiple}
+        options={flattenedOptions}
+        onChange={onChangeOptionsGroup}
         fluid={fluid}
         className="selection"
         placeholder={placeholder}
@@ -106,41 +158,25 @@ export const OptionGroup = ({
         onBlur={() => openMenu(false)}
         text={text}
         value={value}
-      >
-        <Dropdown.Menu>
-          {availableOptions.map((option, i) =>
-            _.has("options")(option) ? (
-              <Group
-                key={i}
-                value={value}
-                onClick={doOnClick}
-                options={_.prop("options")(option)}
-                {...option}
-              />
-            ) : (
-              <Dropdown.Item
-                key={i}
-                {...option}
-                onClick={doOnClick}
-                className="header"
-                selected={value == option.value}
-              />
-            )
-          )}
-        </Dropdown.Menu>
-      </Dropdown>
+      />
     </>
   );
 };
 
 OptionGroup.propTypes = {
   onClick: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.array,
+  ]),
   fluid: PropTypes.bool,
   inline: PropTypes.bool,
   label: PropTypes.string,
   placeholder: PropTypes.string,
   options: PropTypes.array,
+  multiple: PropTypes.bool,
 };
 
 export default OptionGroup;

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

@@ -13,6 +13,7 @@ exports[`<OptionGroup /> matches the latest snapshot 1`] = `
     minCharacters={1}
     noResultsMessage="No results found."
     onBlur={[Function]}
+    onChange={[Function]}
     onClick={[Function]}
     onSearchChange={[Function]}
     open={false}
@@ -25,8 +26,6 @@ exports[`<OptionGroup /> matches the latest snapshot 1`] = `
     selectOnBlur={true}
     selectOnNavigation={true}
     wrapSelection={true}
-  >
-    <DropdownMenu />
-  </Dropdown>
+  />
 </Fragment>
 `;