@truedat/qx 5.12.2 → 5.12.7

package/src/components/functions/expressions/__tests__/__snapshots__/ShapeSelector.spec.js.snap

@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ShapeSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui top left pointing dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="shape-selector-trigger"
+    />
+    <div
+      class="menu transition"
+    >
+      <div
+        aria-checked="false"
+        aria-selected="true"
+        class="selected item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <div
+          class="text"
+          style="display: flex; align-items: 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"
+          style="display: flex; align-items: center;"
+        >
+          <small
+            style="margin-right: 5px;"
+          >
+            <b>
+              <code>
+                f(x)
+              </code>
+            </b>
+          </small>
+          function
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ShapeSelector /> user interaction select constant 1`] = `
+<div>
+  <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"
+          style="display: flex; align-items: 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"
+          style="display: flex; align-items: center;"
+        >
+          <small
+            style="margin-right: 5px;"
+          >
+            <b>
+              <code>
+                f(x)
+              </code>
+            </b>
+          </small>
+          function
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ShapeSelector /> user interaction select function 1`] = `
+<div>
+  <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"
+          style="display: flex; align-items: 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"
+          style="display: flex; align-items: center;"
+        >
+          <small
+            style="margin-right: 5px;"
+          >
+            <b>
+              <code>
+                f(x)
+              </code>
+            </b>
+          </small>
+          function
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ShapeSelector /> user interaction select param 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui top left pointing dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="shape-selector-trigger"
+    >
+      [P]
+    </div>
+    <div
+      class="menu transition"
+    >
+      <div
+        aria-checked="false"
+        aria-selected="false"
+        class="item"
+        role="option"
+        style="pointer-events: all;"
+      >
+        <div
+          class="text"
+          style="display: flex; align-items: 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"
+          style="display: flex; align-items: center;"
+        >
+          <small
+            style="margin-right: 5px;"
+          >
+            <b>
+              <code>
+                f(x)
+              </code>
+            </b>
+          </small>
+          function
+        </div>
+      </div>
+      <div
+        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;"
+        >
+          <small
+            style="margin-right: 5px;"
+          >
+            <b>
+              <code>
+                [P]
+              </code>
+            </b>
+          </small>
+          param
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,29 @@
+import React, { useContext, useState } from "react";
+import { useFormContext } 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 context = useContext(QxContext);
+  const { watch, setValue } = useFormContext();
+  const [type, setType] = useState(watch(`${context.field}.value.type`));
+
+  return (
+    <>
+      <TypeSelector
+        value={type}
+        onChange={(_e, { value }) => {
+          setType(value);
+          setValue(`${context.field}.value.value`, "");
+        }}
+        withoutTypeAny
+      />
+      {type ? (
+        <QxContext.Provider value={{ ...context, type }}>
+          <ConstantSelector />
+        </QxContext.Provider>
+      ) : null}
+    </>
+  );
+}

package/src/components/functions/expressions/constantInputs/BooleanSelector.js

@@ -0,0 +1,37 @@
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Dropdown } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export default function BooleanSelector() {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={`${field}.value.value`}
+      rules={{ required: true }}
+      render={({
+        field: { onBlur, onChange, value },
+        fieldState: { error },
+      }) => (
+        <Dropdown
+          fluid
+          selection
+          error={!!error}
+          onBlur={onBlur}
+          options={["true", "false"].map((v) => ({
+            key: v,
+            value: v,
+            text: formatMessage({ id: `functions.expression.constant.${v}` }),
+          }))}
+          value={value}
+          onChange={(_e, { value }) => onChange(value)}
+        />
+      )}
+    />
+  );
+}

package/src/components/functions/expressions/constantInputs/DefaultSelector.js

@@ -0,0 +1,34 @@
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { Form } from "semantic-ui-react";
+import { Controller, useFormContext } from "react-hook-form";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export default function DefaultSelector() {
+  const { formatMessage } = useIntl();
+  const { field } = useContext(QxContext);
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={`${field}.value.value`}
+      rules={{
+        required: formatMessage({ id: "functions.form.required" }),
+      }}
+      render={({
+        field: { onBlur, onChange, value },
+        fieldState: { error },
+      }) => (
+        <Form.Input
+          autoComplete="off"
+          error={error?.message}
+          onBlur={onBlur}
+          onChange={(_e, { value }) => onChange(value)}
+          value={value}
+          required
+        />
+      )}
+    />
+  );
+}

package/src/components/functions/expressions/constantInputs/__tests__/AnySelector.spec.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import AnySelector from "../AnySelector";
+
+describe("<AnySelector />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <AnySelector />
+      </TestFormWrapper>
+    );
+    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 />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.click(await findByText("boolean"));
+    userEvent.click(await findByText("true"));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        value: {
+          type: "boolean",
+          value: "true",
+        },
+      },
+    });
+
+    userEvent.click(await findByText("string"));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        value: {
+          type: "string",
+          value: "",
+        },
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/functions/expressions/constantInputs/__tests__/BooleanSelector.spec.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import BooleanSelector from "../BooleanSelector";
+
+describe("<BooleanSelector />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "functions.expression.constant.false": "false",
+        "functions.expression.constant.true": "true",
+        "functions.form.required": "required",
+      },
+    },
+    fallback: "lazy",
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <BooleanSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction", () => {
+    const watcher = jest.fn();
+    const { container, getByRole } = render(
+      <TestFormWrapper watcher={watcher}>
+        <BooleanSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.click(getByRole("listbox"));
+    userEvent.click(getByRole("option", { name: /true/i }));
+
+    expect(watcher).lastCalledWith({
+      test: {
+        value: {
+          value: "true",
+        },
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/functions/expressions/constantInputs/__tests__/DefaultSelector.spec.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import TestFormWrapper from "@truedat/qx/components/common/TestFormWrapper";
+import DefaultSelector from "../DefaultSelector";
+
+describe("<DefaultSelector />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "functions.form.required": "required",
+      },
+    },
+    fallback: "lazy",
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(
+      <TestFormWrapper>
+        <DefaultSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("user interaction", async () => {
+    const watcher = jest.fn();
+    const field = "test";
+    const defaultValues = {
+      [field]: { value: { value: "" } },
+    };
+    const { container, findByRole } = render(
+      <TestFormWrapper
+        watcher={watcher}
+        defaultValues={defaultValues}
+        field={field}
+      >
+        <DefaultSelector />
+      </TestFormWrapper>,
+      renderOpts
+    );
+
+    userEvent.type(await findByRole("textbox"), "text");
+
+    expect(watcher).lastCalledWith({
+      test: {
+        value: {
+          value: "text",
+        },
+      },
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});