@nolwenture/formik-jsonschema-form 0.21.1 → 0.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/fields/SearchableSelectField.js +19 -16
  2. package/package.json +1 -1
package/dist/fields/SearchableSelectField.js CHANGED
@@ -24,7 +24,7 @@ export const SearchableSelectField = (props) => {
24
24
  useEffect(() => {
25
25
  if (isActive) {
26
26
  ref.current.scrollIntoView({
27
- behavior: "smooth",
27
+ behavior: "auto",
28
28
  block: "center",
29
29
  inline: "center",
30
30
  });
@@ -33,20 +33,20 @@ export const SearchableSelectField = (props) => {
33
33
  return (_jsx(SearchListOption, Object.assign({ ref: ref }, rest, { children: children })));
34
34
  };
35
35
  const { name, uiSchema, onChange, onSelect } = props;
36
- const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = {}, hideClearButton = false, showOptionsMenu = false, // makes CSS styling easier
37
- } = useExtractUiSchema(uiSchema);
36
+ const { props: inputProps, placeholder, clearButtonText, expandText, notFoundMessage, hoverColors = { backgroundColor: "", color: "" }, hideClearButton = false, dropdown, } = useExtractUiSchema(uiSchema);
37
+ const dropdownOptions = Object.assign({ show: false, height: "", width: "", perPage: 20 }, dropdown);
38
38
  const [{ value }, __, { setValue }] = useField(name);
39
39
  const enums = useMemo(() => getEnums(props), [props]);
40
40
  const options = (enums === null || enums === void 0 ? void 0 : enums.values) || [];
41
- const [showOptions, setShowOptions] = useState(showOptionsMenu);
41
+ const [showOptions, setShowOptions] = useState(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.show);
42
42
  const [searchTerm, setSearchTerm] = useState(() => { var _a, _b; return (_b = (_a = options.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : ""; });
43
43
  const [displayedItems, setDisplayedItems] = useState([]);
44
- const [itemsToShow, setItemsToShow] = useState(10);
45
- const [selectedItem, setSelectedItem] = useState(-1);
44
+ const [itemsToShow, setItemsToShow] = useState(dropdownOptions.perPage);
45
+ const [selectedItemIndex, setSelectedItemIndex] = useState(-1);
46
46
  const moreRef = useRef(null);
47
47
  const containerRef = useRef(null);
48
48
  const loadMoreItems = () => {
49
- setItemsToShow((prev) => prev + 10);
49
+ setItemsToShow((prev) => prev + dropdownOptions.perPage);
50
50
  };
51
51
  useEffect(() => {
52
52
  setDisplayedItems(options
@@ -57,22 +57,22 @@ export const SearchableSelectField = (props) => {
57
57
  if (showOptions) {
58
58
  switch (event.key) {
59
59
  case "ArrowUp": {
60
- const calcValue = selectedItem - 1;
60
+ const calcValue = selectedItemIndex - 1;
61
61
  const newValue = calcValue < -1 ? -1 : calcValue;
62
- return setSelectedItem(newValue);
62
+ return setSelectedItemIndex(newValue);
63
63
  }
64
64
  case "ArrowDown": {
65
- const calcValue = selectedItem + 1;
65
+ const calcValue = selectedItemIndex + 1;
66
66
  const newValue = calcValue >= displayedItems.length - 1
67
67
  ? displayedItems.length - 1
68
68
  : calcValue;
69
- return setSelectedItem(newValue);
69
+ return setSelectedItemIndex(newValue);
70
70
  }
71
71
  case "Escape": {
72
72
  return setShowOptions(false);
73
73
  }
74
74
  case "Enter": {
75
- const item = displayedItems[selectedItem];
75
+ const item = displayedItems[selectedItemIndex];
76
76
  if (item) {
77
77
  return handleSelect(item);
78
78
  }
@@ -91,9 +91,9 @@ export const SearchableSelectField = (props) => {
91
91
  }, [handleKeyPress]);
92
92
  const handleSearchChange = (event) => {
93
93
  setSearchTerm(event.target.value);
94
- setItemsToShow(10);
94
+ setItemsToShow(dropdownOptions.perPage);
95
95
  setShowOptions(true);
96
- setSelectedItem(-1);
96
+ setSelectedItemIndex(-1);
97
97
  onChange === null || onChange === void 0 ? void 0 : onChange(event);
98
98
  };
99
99
  const handleSelect = (item) => {
@@ -118,8 +118,11 @@ export const SearchableSelectField = (props) => {
118
118
  };
119
119
  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()); });
120
120
  const showMoreOption = displayedItems.length < filteredOptions.length &&
121
- displayedItems.length >= 10;
122
- return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && !hideClearButton && (_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(ListOption, { isActive: index === selectedItem, style: index === selectedItem
121
+ displayedItems.length >= dropdownOptions.perPage;
122
+ return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsxs(SearchableSelectContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchInputContainer, { children: [_jsx(SearchInput, Object.assign({}, inputProps, { name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus })), searchTerm && !hideClearButton && (_jsx(SearchClearButton, { onClick: handleClear, children: clearButtonText !== null && clearButtonText !== void 0 ? clearButtonText : "x" }))] }), showOptions && (_jsxs(SearchDropdownContainer, { role: "dropdown-list", ref: moreRef, style: {
123
+ maxHeight: dropdownOptions.height,
124
+ width: dropdownOptions.width,
125
+ }, children: [displayedItems.length > 0 ? (displayedItems.map((item, index) => (_jsx(ListOption, { isActive: index === selectedItemIndex, className: index === selectedItemIndex ? "selected-item-active" : "", style: index === selectedItemIndex
123
126
  ? {
124
127
  backgroundColor: hoverColors.backgroundColor,
125
128
  color: hoverColors.color,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "0.21.1",
3
+ "version": "0.21.3",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "Antti Vikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [