@nolwenture/formik-jsonschema-form 0.17.0 → 0.18.0

package/README.md

@@ -409,6 +409,8 @@ export function MyFormComponent() {
 Enum fields are fields with multiple options to either choose `oneOf` or `anyOf` from.
 There is an alternative field implementation for "anyOf" that when given `"ui:field": "SearchMultiTagSelectField"` results in a searchable multi tag select field.
 
+A searchable single select field is also available for `oneOf` and `enum`. To use it, add the following to the field's uiSchema: `"ui:field": "SearchableSelectField"`
+
 The type of the field holding the enum is defined by its return value. `oneOf` enums will only return a single value and therefore, the type of the returned value is used as the field type (in the following example, "number" is the correct field type).
 
 `anyOf`enums will return the value(s) inside an array, even if only one option was selected. Therefore, the correct field type for the field holding the `anyOf`-enum is "array".
@@ -451,6 +453,16 @@ const schema = {
         { const: 4, title: "four" },
       ],
     },
+    enumSearchableOneOf: {
+      type: "string",
+      title: "Enum searchable select oneOf",
+      oneOf: [
+        { const: "one", title: "One" },
+        { const: "two", title: "Two" },
+        { const: "three", title: "Three" },
+        { const: "four", title: "Four" },
+      ],
+    },
   },
 };
 
@@ -462,6 +474,15 @@ const uiSchema = {
       emptySearchMessage: "...no matching results found",
     },
   },
+  enumSearchableOneOf: {
+    "ui:field": "SearchableSelectField",
+    "ui:options": {
+      placeholder: "Search...",
+      clearButtonText: "Clear",
+      expandText: "More results",
+      emptySearchMessage: "...no matching results found",
+    },
+  },
 };
 ```
 

package/dist/fields/SearchableSelectField.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { FieldProps } from "../types";
+export declare const SearchableSelectField: React.FC<FieldProps>;

package/dist/fields/SearchableSelectField.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useContext, useMemo } from "react";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { FormRegistry } from "../Form";
+import { useField } from "formik";
+import { getEnums } from "../utils";
+export const SearchableSelectField = (props) => {
+    const { templates: { FieldTemplate }, components: { SearchableSelectContainer, SearchDropdownContainer, SearchListOption, SearchListExpand, SearchNotFound, SearchInput, SearchClearButton, SearchInputContainer, }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, } = useExtractUiSchema(uiSchema);
+    const [_, __, { setValue }] = useField(name);
+    const enums = useMemo(() => getEnums(props), [props]);
+    const options = (enums === null || enums === void 0 ? void 0 : enums.values) || [];
+    const [showOptions, setShowOptions] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [displayedItems, setDisplayedItems] = useState([]);
+    const [itemsToShow, setItemsToShow] = useState(10);
+    const moreRef = useRef(null);
+    const containerRef = useRef(null);
+    const loadMoreItems = () => {
+        setItemsToShow((prev) => prev + 10);
+    };
+    useEffect(() => {
+        setDisplayedItems(options
+            .filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); })
+            .slice(0, itemsToShow));
+    }, [itemsToShow, options, searchTerm]);
+    const handleSearchChange = (event) => {
+        setSearchTerm(event.target.value);
+        setItemsToShow(10);
+        setShowOptions(true);
+    };
+    const handleSelect = (item) => {
+        var _a;
+        setSearchTerm((_a = item.title) !== null && _a !== void 0 ? _a : "");
+        setValue(item.const);
+        setShowOptions(false);
+    };
+    const handleFocus = () => {
+        setShowOptions(true);
+    };
+    const handleBlur = (event) => {
+        if (containerRef.current &&
+            !containerRef.current.contains(event.relatedTarget)) {
+            setShowOptions(false);
+        }
+    };
+    const handleClear = () => {
+        setSearchTerm("");
+        setValue(undefined);
+    };
+    const filteredOptions = options.filter((option) => { var _a, _b; return ((_b = (_a = option.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "").includes(searchTerm.toLowerCase()); });
+    const showMoreOption = displayedItems.length < filteredOptions.length &&
+        displayedItems.length >= 10;
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "X" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(SearchListOption, { role: "filtered-list", onClick: () => handleSelect(item), onMouseDown: (e) => e.preventDefault(), children: item.title }, index)))) : (_jsx(SearchNotFound, { onMouseDown: (e) => e.preventDefault(), children: notFoundMessage !== null && notFoundMessage !== void 0 ? notFoundMessage : "No match found" })), showMoreOption && (_jsx(SearchListExpand, { ref: moreRef, onMouseDown: (e) => e.preventDefault(), onClick: loadMoreItems, children: expandText !== null && expandText !== void 0 ? expandText : "More..." }))] }))] }) })));
+};

package/dist/fields/index.d.ts

@@ -10,5 +10,6 @@ export * from "./AnyField";
 export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
+export * from "./SearchableSelectField";
 export * from "./MultipleChoiceField";
 export * from "./TextAreaField";

package/dist/fields/index.js

@@ -10,5 +10,6 @@ export * from "./AnyField";
 export * from "./RadioField";
 export * from "./ToggleField";
 export * from "./SearchMultiTagSelectField";
+export * from "./SearchableSelectField";
 export * from "./MultipleChoiceField";
 export * from "./TextAreaField";

package/dist/sampleData/completeSchema.js

@@ -68,6 +68,27 @@ export const completeSchema = {
                 { const: "dragon", title: "dragon" },
             ],
         },
+        searchableSelect: {
+            type: "string",
+            title: "Enum searchable select oneOf",
+            description: "Enum searchable select oneOf description",
+            oneOf: [
+                { const: "cat", title: "cat" },
+                { const: "dog", title: "dog" },
+                { const: "bunny", title: "bunny" },
+                { const: "canary", title: "canary" },
+                { const: "hamster", title: "hamster" },
+                { const: "goldfish", title: "goldfish" },
+                { const: "dragon", title: "dragon" },
+                { const: "lizard", title: "lizard" },
+                { const: "frog", title: "frog" },
+                { const: "parrot", title: "parrot" },
+                { const: "turtle", title: "turtle" },
+                { const: "raccoon", title: "raccoon" },
+                { const: "tiger", title: "tiger" },
+                { const: "lion", title: "lion" },
+            ],
+        },
         null: { type: "null", title: "Null", description: "Null description" },
         nested: {
             type: "object",
@@ -293,5 +314,14 @@ export const completeUiSchema = {
             emptySearchMessage: "...no matching results found",
         },
     },
+    searchableSelect: {
+        "ui:field": "SearchableSelectField",
+        "ui:options": {
+            placeholder: "Search...",
+            clearButtonText: "Clear",
+            expandText: "More results",
+            emptySearchMessage: "...no matching results found",
+        },
+    },
     textArea: { "ui:field": "TextAreaField" },
 };

package/dist/styledComponents.d.ts

@@ -214,4 +214,28 @@ export declare const Icon: import("styled-components").IStyledComponent<"web", i
 export declare const CollapsibleChildWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const CollapsibleObjectFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>>;
 export declare const CollapsibleObjectFieldTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>>;
+export declare const SearchableSelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchDropdownContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchListOption: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchListExpand: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchNotFound: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>, keyof React.Component<any, {}, any>>;
+export declare const SearchInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>, "ref"> & {
+    ref?: unknown;
+}, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>> & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
+export declare const SearchClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const SearchInputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export {};

package/dist/styledComponents.js

@@ -402,3 +402,31 @@ export const Icon = styled.div `
 export const CollapsibleChildWrapper = styled.div ``;
 export const CollapsibleObjectFieldWrapper = ObjectFieldWrapper;
 export const CollapsibleObjectFieldTitle = ObjectFieldTitle;
+export const SearchableSelectContainer = styled(MultiSelectContainer) ``;
+export const SearchDropdownContainer = styled(MultiSelectOptionList) `
+  overflow-y: auto;
+  overflow-x: auto;
+  max-width: 16rem;
+  max-height: 6rem;
+  white-space: nowrap;
+`;
+export const SearchListOption = styled(MultiSelectOptionListItem) `
+  cursor: default;
+`;
+export const SearchListExpand = styled(MultiSelectOptionListItem) `
+  text-decoration: underline;
+  &:hover {
+    background: none;
+  }
+`;
+export const SearchNotFound = styled(MultiSelectOptionListItem) `
+  cursor: default;
+  &:hover {
+    background: none;
+  }
+`;
+export const SearchInput = styled(FieldInput) `
+  text-overflow: ellipsis;
+`;
+export const SearchClearButton = styled.button ``;
+export const SearchInputContainer = styled.div ``;

package/dist/types.d.ts

@@ -147,6 +147,14 @@ export type ComponentsType = {
     BooleanFieldWrapper: React.FunctionComponent<any>;
     CollapsibleObjectFieldWrapper: React.FunctionComponent<any>;
     CollapsibleObjectFieldTitle: React.FunctionComponent<any>;
+    SearchableSelectContainer: React.FunctionComponent<any>;
+    SearchDropdownContainer: React.FunctionComponent<any>;
+    SearchListOption: React.FunctionComponent<any>;
+    SearchListExpand: React.FunctionComponent<any>;
+    SearchNotFound: React.FunctionComponent<any>;
+    SearchInput: React.FunctionComponent<any>;
+    SearchClearButton: React.FunctionComponent<any>;
+    SearchInputContainer: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [