@truedat/qx 5.14.0 → 5.15.0

package/src/components/common/expressions/__tests__/__snapshots__/FieldSelector.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FieldSelector /> matches the latest snapshot 1`] = `<div />`;
+
+exports[`<FieldSelector /> matches the latest snapshot empty 1`] = `<div />`;

package/src/components/common/expressions/__tests__/__snapshots__/FunctionArgs.spec.js.snap

@@ -0,0 +1,344 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FunctionArgs /> matches the latest snapshot 1`] = `<div />`;
+
+exports[`<FunctionArgs /> user interaction 1`] = `
+<div>
+  <ul
+    class="function-tree"
+    style=""
+  >
+    <li>
+      <div
+        class="flex-column"
+      >
+        <div
+          class="param-label-header"
+        >
+          <div
+            class="ui large image label"
+          >
+            <i
+              aria-hidden="true"
+              class="teal adjust fitted icon"
+            />
+            <div
+              class="detail"
+            >
+              arg1
+            </div>
+          </div>
+          <div
+            class="param-label-description"
+          />
+        </div>
+        <div
+          class="ui grid"
+        >
+          <div
+            class="sixteen wide column"
+          >
+            <div
+              class="expression-container"
+            >
+              <div
+                aria-expanded="false"
+                class="ui top left pointing dropdown"
+                role="listbox"
+                tabindex="0"
+              >
+                <div
+                  class="shape-selector-trigger"
+                >
+                  [π]
+                </div>
+                <div
+                  class="menu transition"
+                >
+                  <div
+                    aria-checked="true"
+                    aria-selected="true"
+                    class="active selected item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            [π]
+                          </code>
+                        </b>
+                      </small>
+                      constant
+                    </div>
+                  </div>
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            f(x)
+                          </code>
+                        </b>
+                      </small>
+                      function
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                aria-expanded="false"
+                class="ui fluid selection dropdown"
+                role="listbox"
+                tabindex="0"
+              >
+                <i
+                  aria-hidden="true"
+                  class="dropdown icon"
+                />
+                <div
+                  class="menu transition"
+                >
+                  <div
+                    aria-checked="false"
+                    aria-selected="true"
+                    class="selected item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <span
+                      class="text"
+                    >
+                      true
+                    </span>
+                  </div>
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <span
+                      class="text"
+                    >
+                      false
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+    <li>
+      <div
+        class="flex-column"
+      >
+        <div
+          class="param-label-header"
+        >
+          <div
+            class="ui large image label"
+          >
+            <i
+              aria-hidden="true"
+              class="teal adjust fitted icon"
+            />
+            <div
+              class="detail"
+            >
+              arg2
+            </div>
+          </div>
+          <div
+            class="param-label-description"
+          />
+        </div>
+        <div
+          class="ui grid"
+        >
+          <div
+            class="sixteen wide column"
+          >
+            <div
+              class="expression-container"
+            >
+              <div
+                aria-expanded="false"
+                class="ui top left pointing dropdown"
+                role="listbox"
+                tabindex="0"
+              >
+                <div
+                  class="shape-selector-trigger"
+                >
+                  f(x)
+                </div>
+                <div
+                  class="menu transition"
+                >
+                  <div
+                    aria-checked="false"
+                    aria-selected="false"
+                    class="item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            [π]
+                          </code>
+                        </b>
+                      </small>
+                      constant
+                    </div>
+                  </div>
+                  <div
+                    aria-checked="true"
+                    aria-selected="true"
+                    class="active selected item"
+                    role="option"
+                    style="pointer-events: all;"
+                  >
+                    <div
+                      class="text flex-center"
+                    >
+                      <small
+                        style="margin-right: 5px;"
+                      >
+                        <b>
+                          <code>
+                            f(x)
+                          </code>
+                        </b>
+                      </small>
+                      function
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="accordion ui fluid no-margin"
+              >
+                <div
+                  class="active title no-padding"
+                >
+                  <div
+                    class="flex-center"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="dropdown icon"
+                    />
+                    <div
+                      aria-expanded="false"
+                      class="ui fluid search selection dropdown"
+                      role="combobox"
+                    >
+                      <input
+                        aria-autocomplete="list"
+                        autocomplete="off"
+                        class="search"
+                        tabindex="0"
+                        type="text"
+                        value=""
+                      />
+                      <div
+                        aria-atomic="true"
+                        aria-live="polite"
+                        class="divider text"
+                        role="alert"
+                      >
+                        function.placeholder
+                      </div>
+                      <i
+                        aria-hidden="true"
+                        class="dropdown icon"
+                      />
+                      <div
+                        class="menu transition"
+                        role="listbox"
+                      >
+                        <div
+                          aria-checked="false"
+                          aria-selected="true"
+                          class="selected item"
+                          role="option"
+                          style="pointer-events: all;"
+                        >
+                          <div
+                            class="ui header"
+                          >
+                            <div
+                              class="flex-center"
+                            >
+                              <div>
+                                eq
+                              </div>
+                              <div
+                                class="function-params-label"
+                              >
+                                <div
+                                  class="ui teal label"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="adjust icon"
+                                  />
+                                  arg1
+                                </div>
+                                <div
+                                  class="ui teal label"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="adjust icon"
+                                  />
+                                  arg2
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="sub header"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="content active no-padding"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+`;

package/src/components/{functions → common}/expressions/__tests__/__snapshots__/ParamSelector.spec.js.snap

@@ -19,7 +19,7 @@ exports[`<ParamSelector /> deleting param will clean field 1`] = `
   </div>
   <div
     aria-expanded="false"
-    class="ui fluid selection dropdown"
+    class="ui error fluid selection dropdown"
     role="listbox"
     tabindex="0"
   >
@@ -56,8 +56,8 @@ exports[`<ParamSelector /> matches the latest snapshot 1`] = `
 exports[`<ParamSelector /> user interaction 1`] = `
 <div>
   <div
-    aria-expanded="false"
-    class="ui fluid selection dropdown"
+    aria-expanded="true"
+    class="ui active visible fluid selection dropdown"
     role="listbox"
     tabindex="0"
   >
@@ -74,7 +74,7 @@ exports[`<ParamSelector /> user interaction 1`] = `
       class="dropdown icon"
     />
     <div
-      class="menu transition"
+      class="visible menu transition"
     >
       <div
         aria-checked="true"

package/src/components/{functions → common}/expressions/__tests__/__snapshots__/ShapeSelector.spec.js.snap

@@ -10,20 +10,21 @@ exports[`<ShapeSelector /> matches the latest snapshot 1`] = `
   >
     <div
       class="shape-selector-trigger"
-    />
+    >
+      f(x)
+    </div>
     <div
       class="menu transition"
     >
       <div
         aria-checked="false"
-        aria-selected="true"
-        class="selected item"
+        aria-selected="false"
+        class="item"
         role="option"
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -38,15 +39,14 @@ exports[`<ShapeSelector /> matches the latest snapshot 1`] = `
         </div>
       </div>
       <div
-        aria-checked="false"
-        aria-selected="false"
-        class="item"
+        aria-checked="true"
+        aria-selected="true"
+        class="active selected item"
         role="option"
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -89,8 +89,7 @@ exports[`<ShapeSelector /> user interaction select constant 1`] = `
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -112,8 +111,7 @@ exports[`<ShapeSelector /> user interaction select constant 1`] = `
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -156,8 +154,7 @@ exports[`<ShapeSelector /> user interaction select function 1`] = `
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -179,8 +176,7 @@ exports[`<ShapeSelector /> user interaction select function 1`] = `
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -223,8 +219,7 @@ exports[`<ShapeSelector /> user interaction select param 1`] = `
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -246,8 +241,7 @@ exports[`<ShapeSelector /> user interaction select param 1`] = `
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"
@@ -269,8 +263,7 @@ exports[`<ShapeSelector /> user interaction select param 1`] = `
         style="pointer-events: all;"
       >
         <div
-          class="text"
-          style="display: flex; align-items: center;"
+          class="text flex-center"
         >
           <small
             style="margin-right: 5px;"

package/src/components/common/expressions/constantInputs/AnySelector.js

@@ -0,0 +1,44 @@
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { useFormContext, Controller } from "react-hook-form";
+import { TypeSelector } from "@truedat/qx/components/common";
+import QxContext from "@truedat/qx/components/QxContext";
+const ConstantSelector = React.lazy(() => import("../ConstantSelector"));
+
+export default function AnySelector() {
+  const { formatMessage } = useIntl();
+  const context = useContext(QxContext);
+  const { field } = context;
+  const { watch, control, setValue } = useFormContext();
+  const type = watch(`${field}.value.type`);
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name={`${field}.value.type`}
+        rules={{
+          required: formatMessage({ id: "functions.form.required" }),
+        }}
+        render={({ field: { onBlur, onChange }, fieldState: { error } }) => (
+          <TypeSelector
+            onBlur={onBlur}
+            value={type}
+            error={error?.message}
+            onChange={(_e, { value }) => {
+              setValue(`${field}.value.value`, "");
+              onChange(value);
+            }}
+            withoutTypeAny
+          />
+        )}
+      />
+
+      {type ? (
+        <QxContext.Provider value={{ ...context, type }}>
+          <ConstantSelector />
+        </QxContext.Provider>
+      ) : null}
+    </>
+  );
+}

package/src/components/{functions → common}/expressions/constantInputs/__tests__/AnySelector.spec.js

@@ -4,30 +4,37 @@ import userEvent from "@testing-library/user-event";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import AnySelector from "../AnySelector";
 
+const renderOpts = {
+  messages: {
+    en: {
+      "functions.expression.constant.false": "false",
+      "functions.expression.constant.true": "true",
+      "functions.form.required": "required",
+      "expressions.data_type.timestamp": "timestamp",
+      "expressions.data_type.date": "date",
+      "expressions.data_type.number": "number",
+      "expressions.data_type.string": "string",
+      "expressions.data_type.boolean": "boolean",
+      "expressions.data_type.any": "any",
+    },
+  },
+  fallback: "lazy",
+};
+
+const watcher = jest.fn();
+
 describe("<AnySelector />", () => {
   it("matches the latest snapshot", () => {
     const { container } = render(
       <TestFormWrapper>
         <AnySelector />
-      </TestFormWrapper>
+      </TestFormWrapper>,
+      renderOpts
     );
     expect(container).toMatchSnapshot();
   });
 
   it("user interaction", async () => {
-    const renderOpts = {
-      messages: {
-        en: {
-          "functions.expression.constant.false": "false",
-          "functions.expression.constant.true": "true",
-          "functions.form.required": "required",
-        },
-      },
-      fallback: "lazy",
-    };
-
-    const watcher = jest.fn();
-
     const { container, findByText } = render(
       <TestFormWrapper watcher={watcher}>
         <AnySelector />

package/src/components/{functions → common}/expressions/constantInputs/__tests__/DefaultSelector.spec.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import { act } from "react-dom/test-utils";
 import userEvent from "@testing-library/user-event";
 import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
 import DefaultSelector from "../DefaultSelector";
@@ -34,14 +35,16 @@ describe("<DefaultSelector />", () => {
       <TestFormWrapper
         watcher={watcher}
         defaultValues={defaultValues}
-        field={field}
+        context={{ field }}
       >
         <DefaultSelector />
       </TestFormWrapper>,
       renderOpts
     );
 
-    userEvent.type(await findByRole("textbox"), "text");
+    await act(async () => {
+      userEvent.type(await findByRole("textbox"), "text");
+    });
 
     expect(watcher).lastCalledWith({
       test: {

package/src/components/{functions → common}/expressions/constantInputs/__tests__/__snapshots__/AnySelector.spec.js.snap

@@ -64,7 +64,7 @@ exports[`<AnySelector /> matches the latest snapshot 1`] = `
         <span
           class="text"
         >
-          numeric
+          number
         </span>
       </div>
       <div
@@ -179,7 +179,7 @@ exports[`<AnySelector /> user interaction 1`] = `
         <span
           class="text"
         >
-          numeric
+          number
         </span>
       </div>
       <div

package/src/components/common/expressions/index.js

@@ -0,0 +1,4 @@
+import Clauses from "./Clauses";
+import Expression from "./Expression";
+
+export { Clauses, Expression };