@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

package/src/molecules/forms/select/Select.interface.ts

@@ -0,0 +1,45 @@
+import { SelectHTMLAttributes } from "react";
+
+import { FormControlProps } from "../form-control/FormControl";
+
+export interface SelectOptionBaseProps<Data = any> extends Record<string, any> {
+  label: string | JSX.Element;
+  value: string;
+  id?: string;
+  disabled?: boolean;
+  note?: string | JSX.Element;
+  group?: string;
+  data?: Data;
+  template?: (item: SelectOptionProps<Data>) => JSX.Element;
+}
+
+export interface SelectOptionProps<Data = string> extends SelectOptionBaseProps<Data> {
+  options?: SelectOptionProps<Data>[];
+}
+
+export interface SelectProps<Data = string> extends FormControlProps<Data, SelectHTMLAttributes<HTMLSelectElement>> {
+  layout?: "html5" | "react" | "choicesjs";
+  /**
+   * Error message
+   */
+  errorMessage?: string;
+  readonly?: boolean;
+  disableSearch?: boolean;
+  searchEnabled?: boolean;
+  customProperties?: Record<string, any>;
+  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
+  /**
+   * @deprecated
+   */
+  choices?: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
+}
+
+export interface SelectSingle<Data = string> extends SelectProps<Data> {
+  multiple?: false | undefined;
+}
+
+export interface SelectMultiple<Data = string> extends SelectProps<Data[]> {
+  multiple: true;
+}
+
+export type AllSelectProps<Data = string> = SelectSingle<Data> | SelectMultiple<Data>;

package/src/molecules/forms/select/Select.tsx

@@ -0,0 +1,28 @@
+import type { ComponentType } from "react";
+
+import { getComponent, registerComponent } from "../../../registries/components";
+import type { FormControl as DefaultFormControl } from "../form-control/FormControl";
+import { useOptions } from "./hooks/useOptions";
+import { AllSelectProps } from "./Select.interface";
+
+let uuid = 0;
+
+export function Select<Data = string>(props: AllSelectProps<Data>) {
+  const { className, name = "", id = `field-select-${++uuid}`, label, description = "" } = props;
+
+  const options = useOptions<Data>({
+    ...props,
+    value: (Array.isArray(props.value) ? props.value : [props.value]) as any
+  });
+
+  const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
+  const Component = getComponent<ComponentType<AllSelectProps<Data>>>(["Select." + props.layout, "Select.html5"]);
+
+  return (
+    <FormControl {...(props as any)} id={id} description={description} shadow={false} className={className} label={label}>
+      <Component {...props} options={options} name={name} id={id} />
+    </FormControl>
+  );
+}
+
+registerComponent("Select", Select);

package/src/molecules/forms/select/all.ts

@@ -0,0 +1,7 @@
+import "../form-control/FormControl";
+import "./components/ReactSelect";
+import "./components/HtmlSelect";
+import "./components/ChoicesSelect";
+
+export * from "./Select";
+export * from "./Select.interface";

package/src/molecules/forms/select/components/ChoicesSelect.stories.tsx

@@ -0,0 +1,332 @@
+import "./ChoicesSelect";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { Select } from "../Select";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1"
+  },
+  {
+    label: "Option 2",
+    value: "option-2"
+  },
+  {
+    label: "Option 3",
+    value: "option-3"
+  }
+];
+/**
+ * ChoicesJS select component.
+ *
+ * ```tsx
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/all"; // import HTML5, ChoicesJS and React components
+ *
+ * // or
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/ChoicesSelect"; // register only ChoicesJS component
+ *
+ * ```
+ */
+export default {
+  title: "forms/Select/ChoiceJs",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "pearl" }
+  },
+  args: {
+    layout: "choicesjs"
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "text"
+    },
+    size: {
+      control: "radio",
+      options: ["small", "normal"]
+    },
+    layout: {
+      control: "radio",
+      options: ["html5", "choicesjs", "react"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    options: {
+      control: "object"
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  tags: ["autodocs"],
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { value, onChange } = useValue(args);
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Select {...args} value={value} onChange={onChange} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select<string>>;
+/**
+ * Basic select component using HTML5 syntax.
+ */
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: "option-1",
+    options,
+    onChange: fn()
+  }
+};
+
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholder: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    onChange: fn()
+  }
+};
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholderAndRequired: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    required: true,
+    onChange: fn()
+  }
+};
+/**
+ * Select component with a disabled prop.
+ */
+export const WithDisabledProp: Story = {
+  args: {
+    disabled: true,
+    options
+  }
+};
+
+/**
+ * Select component with a disabled option.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    label: "Label",
+    size: "small",
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const AppendBefore: Story = {
+  args: {
+    before: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const AppendAfter: Story = {
+  args: {
+    after: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: "",
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroups: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "Option 1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "Group 2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3"
+          },
+          {
+            label: "Option 4",
+            value: "option-4"
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export const WithGroupsLegacy: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Option 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Option 3",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
+
+export const WithMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroupsAndMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "Option 1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "Group 2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3"
+          },
+          {
+            label: "Option 4",
+            value: "option-4"
+          }
+        ]
+      }
+    ]
+  }
+};

package/src/molecules/forms/select/components/ChoicesSelect.tsx

@@ -0,0 +1,159 @@
+import Choices from "@formio/choices.js";
+import cx from "classnames";
+import { useEffect, useMemo, useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+import { registerComponent } from "../../../../registries/components";
+import { cleanFormControlProps } from "../../form-control/FormControl";
+import type { AllSelectProps } from "../Select.interface";
+import { callbackOnCreateTemplates } from "./choices.template";
+
+export function useChoices({
+  name,
+  disabled,
+  multiple,
+  options,
+  placeholder,
+  searchEnabled = true,
+  customProperties = {},
+  size,
+  value,
+  required,
+  onChange
+}: AllSelectProps) {
+  const ref = useRef<any>();
+  const choicesRef = useRef<Choices>();
+
+  const opts = useMemo(() => {
+    const isSelected = (itemValue: any) => [].concat(value as any).includes(itemValue as never);
+
+    const opts = options.map((item) => {
+      if (item.options) {
+        item = {
+          ...item,
+          choices: item.options.map((item: any) => ({
+            ...item,
+            selected: isSelected(item.value)
+          }))
+        };
+      }
+
+      return {
+        ...item,
+        selected: isSelected(item.value)
+      };
+    });
+
+    if (!multiple && placeholder) {
+      return [
+        {
+          disabled: required,
+          label: placeholder,
+          value: ""
+        },
+        ...opts
+      ];
+    }
+
+    return opts;
+  }, [options, value, required, multiple, placeholder]);
+
+  const onChangeCallback = useDebouncedCallback((name: string | undefined, value: any) => {
+    onChange?.(name, value);
+  }, 50);
+
+  useEffect(() => {
+    if (choicesRef.current) {
+      if (multiple) {
+        choicesRef.current.clearStore();
+        choicesRef.current.setChoices(opts, "value", "label", true);
+      } else {
+        choicesRef.current.setChoices(opts, "value", "label", true);
+      }
+    }
+  }, [opts]);
+
+  useEffect(() => {
+    if (!choicesRef.current) {
+      const { allowHTML = true, silent = true, removeItemButton = true, shouldSort = false, itemSelectText = "" } = customProperties;
+      choicesRef.current = new Choices(ref.current, {
+        ...customProperties,
+        allowHTML,
+        silent,
+        searchEnabled,
+        removeItemButton,
+        choices: opts,
+        placeholder: placeholder as string,
+        placeholderValue: "" as string,
+        itemSelectText,
+        shouldSort,
+        callbackOnCreateTemplates
+      } as any);
+    }
+
+    if (disabled) {
+      choicesRef.current?.disable();
+    } else {
+      choicesRef.current?.enable();
+    }
+
+    const addItem = ({ detail: { value: newValue } }: any) => {
+      onChangeCallback(name, multiple ? [...new Set([...new Set(value as string[]), newValue])] : newValue);
+    };
+
+    const removeItem = ({ detail: { value: newValue } }: any) => {
+      if (multiple) {
+        onChangeCallback(
+          name,
+          (value as string[]).filter((v) => v !== newValue)
+        );
+      } else {
+        onChangeCallback(name, undefined as any);
+      }
+    };
+
+    choicesRef.current?.passedElement.element.addEventListener("addItem", addItem);
+    choicesRef.current?.passedElement.element.addEventListener("removeItem", removeItem);
+
+    return () => {
+      choicesRef.current?.passedElement.element.removeEventListener("addItem", addItem);
+      choicesRef.current?.passedElement.element.removeEventListener("removeItem", removeItem);
+    };
+  }, [disabled, onChange, opts, placeholder, searchEnabled, size, value]);
+
+  return {
+    ref,
+    choicesRef
+  };
+}
+
+export function ChoiceSelect(props: AllSelectProps) {
+  const { ref } = useChoices({
+    ...props,
+    searchEnabled: !props.disableSearch
+  });
+
+  return (
+    <select
+      ref={ref}
+      data-testid={`select_${props.name}`}
+      {...cleanFormControlProps(props as any, [
+        "className",
+        "size",
+        "value",
+        "options",
+        "placeholder",
+        "onChange",
+        "allowHTML",
+        "silent",
+        "removeItemButton",
+        "shouldSort",
+        "itemSelectText",
+        "customProperties"
+      ])}
+      className={cx("form-control", props.size && `form-control-${props.size}`)}
+    />
+  );
+}
+
+registerComponent("Select.choicesjs", ChoiceSelect);