Skip to content

Commit 7db8bb7

Browse files
NicolasLooschenNicolasLooschen
committed
Allow customizing autocomplete input via config
1 parent cde73e4 commit 7db8bb7

File tree

7 files changed

+108
-69
lines changed

7 files changed

+108
-69
lines changed

‎lib/components/Inputs/Autocomplete/Autocomplete.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/// <reference types="react" />
2-
import { IDefaultUiSettings, IGenericField, ISelectCustomProperties } from '../../../typedefs/FieldConfiguration';
3-
export declare const Autocomplete: ({ customProperties: { options, registerReturn }, fieldId, uiSettings: { disabled, description, label, placeholder, size, variant }, validation, }: IGenericField<IDefaultUiSettings, ISelectCustomProperties>) => JSX.Element;
2+
import { IAutocompleteCustomProperties, IDefaultUiSettings, IGenericField } from '../../../typedefs/FieldConfiguration';
3+
export declare const Autocomplete: ({ customProperties: { options, registerReturn, ...rest }, fieldId, uiSettings: { disabled, description, label, placeholder, size, variant }, validation, }: IGenericField<IDefaultUiSettings, IAutocompleteCustomProperties>) => JSX.Element;
44
export default Autocomplete;

‎lib/components/Inputs/Autocomplete/Autocomplete.js‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
99
};
1010
return __assign.apply(this, arguments);
1111
};
12+
var __rest = (this && this.__rest) || function (s, e) {
13+
var t = {};
14+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15+
t[p] = s[p];
16+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
17+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19+
t[p[i]] = s[p[i]];
20+
}
21+
return t;
22+
};
1223
import { jsx as _jsx } from "react/jsx-runtime";
1324
import { createElement as _createElement } from "react";
1425
/**
@@ -19,12 +30,12 @@ import { createElement as _createElement } from "react";
1930
*/
2031
import { Autocomplete as MUIAutocomplete, TextField } from '@mui/material';
2132
import { useController, useFormContext } from 'react-hook-form';
22-
import { getHighlightBackgroundColor, shouldHighlightBackground, shouldShowRequiredLabel } from '../util';
33+
import { getHighlightBackgroundColor, shouldHighlightBackground, shouldShowRequiredLabel, } from '../util';
2334
import parse from 'autosuggest-highlight/parse';
2435
import match from 'autosuggest-highlight/match';
2536
export var Autocomplete = function (_a) {
2637
var _b;
27-
var _c = _a.customProperties, _d = _c.options, options = _d === void 0 ? [] : _d, registerReturn = _c.registerReturn, fieldId = _a.fieldId, _e = _a.uiSettings, disabled = _e.disabled, description = _e.description, label = _e.label, placeholder = _e.placeholder, size = _e.size, variant = _e.variant, validation = _a.validation;
38+
var _c = _a.customProperties, _d = _c.options, options = _d === void 0 ? [] : _d, registerReturn = _c.registerReturn, rest = __rest(_c, ["options", "registerReturn"]), fieldId = _a.fieldId, _e = _a.uiSettings, disabled = _e.disabled, description = _e.description, label = _e.label, placeholder = _e.placeholder, size = _e.size, variant = _e.variant, validation = _a.validation;
2839
var register = useFormContext().register;
2940
if (register === undefined && registerReturn === undefined) {
3041
throw new Error('Either register or registerReturn must be supplied');
@@ -46,8 +57,8 @@ export var Autocomplete = function (_a) {
4657
var isRequired = required !== false;
4758
var showRequiredLabel = shouldShowRequiredLabel(isRequired, disabled);
4859
var highlightBackground = shouldHighlightBackground(value, isRequired, disabled);
49-
return _jsx(MUIAutocomplete, { disabled: disabled, fullWidth: true, id: 'combo-box-demo', options: options, onBlur: onBlur, onChange: handleChange, renderInput: function (params) {
50-
return _createElement(TextField, __assign({}, params, { error: isErroneous, helperText: isErroneous ? error.message : description, InputLabelProps: { required: showRequiredLabel, shrink: true }, key: fieldId, label: label, name: fieldId, placeholder: placeholder, variant: variant }));
60+
return (_jsx(MUIAutocomplete, __assign({}, rest, { disabled: disabled, fullWidth: true, id: "combo-box-demo", options: options, onBlur: onBlur, onChange: handleChange, renderInput: function (params) {
61+
return (_createElement(TextField, __assign({}, params, { error: isErroneous, helperText: isErroneous ? error.message : description, InputLabelProps: { required: showRequiredLabel, shrink: true }, key: fieldId, label: label, name: fieldId, placeholder: placeholder, variant: variant })));
5162
}, renderOption: function (props, option, _a) {
5263
var inputValue = _a.inputValue;
5364
var matches = match(option.label, inputValue);
@@ -57,6 +68,6 @@ export var Autocomplete = function (_a) {
5768
} }, { children: part.text }), index)); }) }) })));
5869
}, size: size, sx: function (theme) { return ({
5970
backgroundColor: getHighlightBackgroundColor(theme, highlightBackground),
60-
}); }, value: (_b = options.find(function (option) { return option.value === value; })) !== null && _b !== void 0 ? _b : null });
71+
}); }, value: (_b = options.find(function (option) { return option.value === value; })) !== null && _b !== void 0 ? _b : null })));
6172
};
6273
export default Autocomplete;

‎lib/typedefs/FieldConfiguration.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { TSize, TStringIndexableObject, TValidationFunctionLookup, TVariant } fr
1010
import { UseFormRegisterReturn } from 'react-hook-form';
1111
import { ERROR_MESSAGE_KEY } from './ErrorMessages';
1212
import { IFieldCondition } from './ConditionalFields';
13+
import { AutocompleteProps } from '@mui/material';
1314
export declare type IFieldConfig = TStringIndexableObject<IParsedGenericField<any, any>>;
1415
export interface IValidation {
1516
required: boolean | ERROR_MESSAGE_KEY;
@@ -83,6 +84,8 @@ export interface ISelectCustomProperties extends IOutsideRegisterAllowedProperti
8384
defaultValue: string;
8485
options: Array<IOption>;
8586
}
87+
export interface IAutocompleteCustomProperties extends Omit<AutocompleteProps<IOption, boolean | undefined, boolean | undefined, boolean | undefined>, 'renderInput'>, IOutsideRegisterAllowedProperties {
88+
}
8689
export interface ITagManagement<T> extends IGenericField<T, ISpecialEditBehaviorProperties> {
8790
}
8891
export interface ISpecialEditBehaviorProperties {

‎lib/util/fieldMapper.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* file 'LICENSE.txt', which is part of this source code package.
66
*/
77
import React from 'react';
8+
import Select from '../components/Inputs/Select/Select';
89
import TextField from '../components/Inputs/TextField/TextField';
910
import TagManagementContainer from '../components/Inputs/TagManagement/TagManagementContainer';
1011
import Checkbox from '../components/Inputs/Checkbox/Checkbox';
@@ -23,4 +24,4 @@ export declare const mapCustomFields: (fieldType: string, customMapping: {
2324
* Maps a field type to a corresponding field component
2425
* @param fieldType
2526
*/
26-
export declare const mapDefaultFields: (fieldType: string) => (({ customProperties: { options, registerReturn }, fieldId, uiSettings: { disabled, description, label, placeholder, size, variant }, validation, }: IGenericField<IDefaultUiSettings, import("../typedefs/FieldConfiguration").ISelectCustomProperties>) => JSX.Element) | typeof Checkbox | typeof TagManagementContainer | typeof DatePicker | typeof TextField | undefined;
27+
export declare const mapDefaultFields: (fieldType: string) => (({ customProperties: { options, registerReturn, ...rest }, fieldId, uiSettings: { disabled, description, label, placeholder, size, variant }, validation, }: IGenericField<IDefaultUiSettings, import("../typedefs/FieldConfiguration").IAutocompleteCustomProperties>) => JSX.Element) | typeof Checkbox | typeof Select | typeof TagManagementContainer | typeof DatePicker | typeof TextField | undefined;

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Inputs/Autocomplete/Autocomplete.tsx‎

Lines changed: 69 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,28 @@
55
* file 'LICENSE.txt', which is part of this source code package.
66
*/
77
import { Autocomplete as MUIAutocomplete, TextField } from '@mui/material';
8-
import { IDefaultUiSettings, IGenericField, ISelectCustomProperties } from '../../../typedefs/FieldConfiguration';
8+
import {
9+
IAutocompleteCustomProperties,
10+
IDefaultUiSettings,
11+
IGenericField,
12+
ISelectCustomProperties,
13+
} from '../../../typedefs/FieldConfiguration';
914
import React from 'react';
1015
import { useController, useFormContext } from 'react-hook-form';
11-
import { getHighlightBackgroundColor, shouldHighlightBackground, shouldShowRequiredLabel } from '../util';
16+
import {
17+
getHighlightBackgroundColor,
18+
shouldHighlightBackground,
19+
shouldShowRequiredLabel,
20+
} from '../util';
1221
import parse from 'autosuggest-highlight/parse';
1322
import match from 'autosuggest-highlight/match';
1423

15-
1624
export const Autocomplete = ({
17-
customProperties: { options = [], registerReturn },
18-
fieldId,
19-
uiSettings: { disabled, description, label, placeholder, size, variant },
20-
validation,
21-
}: IGenericField<IDefaultUiSettings, ISelectCustomProperties>) => {
22-
25+
customProperties: { options = [], registerReturn, ...rest },
26+
fieldId,
27+
uiSettings: { disabled, description, label, placeholder, size, variant },
28+
validation,
29+
}: IGenericField<IDefaultUiSettings, IAutocompleteCustomProperties>) => {
2330
const { register } = useFormContext();
2431

2532
if (register === undefined && registerReturn === undefined) {
@@ -33,7 +40,6 @@ export const Autocomplete = ({
3340
});
3441
const { onChange, onBlur, ref, value } = field;
3542

36-
3743
const handleChange = (e: any, newValue: any, reason: string) => {
3844
onChange(newValue?.value ?? '');
3945
};
@@ -50,60 +56,64 @@ export const Autocomplete = ({
5056
const highlightBackground = shouldHighlightBackground(
5157
value,
5258
isRequired,
53-
disabled,
59+
disabled
5460
);
5561

62+
return (
63+
<MUIAutocomplete
64+
{...rest}
65+
disabled={disabled}
66+
fullWidth
67+
id="combo-box-demo"
68+
options={options}
69+
onBlur={onBlur}
70+
onChange={handleChange}
71+
renderInput={(params) => {
72+
return (
73+
<TextField
74+
{...params}
75+
error={isErroneous}
76+
helperText={isErroneous ? error!.message : description}
77+
InputLabelProps={{ required: showRequiredLabel, shrink: true }}
78+
key={fieldId}
79+
label={label}
80+
name={fieldId}
81+
placeholder={placeholder}
82+
variant={variant}
83+
/>
84+
);
85+
}}
86+
renderOption={(props, option, { inputValue }) => {
87+
const matches = match(option.label, inputValue);
88+
const parts = parse(option.label, matches);
5689

57-
return <MUIAutocomplete
58-
disabled={disabled}
59-
fullWidth
60-
id='combo-box-demo'
61-
options={options}
62-
onBlur={onBlur}
63-
onChange={handleChange}
64-
renderInput={(params) => {
65-
return <TextField
66-
{...params}
67-
error={isErroneous}
68-
helperText={isErroneous ? error!.message : description}
69-
InputLabelProps={{ required: showRequiredLabel, shrink: true }}
70-
key={fieldId}
71-
label={label}
72-
name={fieldId}
73-
placeholder={placeholder}
74-
variant={variant}
75-
/>;
76-
}}
77-
renderOption={(props, option, { inputValue }) => {
78-
const matches = match(option.label, inputValue);
79-
const parts = parse(option.label, matches);
80-
81-
return (
82-
<li {...props}>
83-
<div>
84-
{parts.map((part, index) => (
85-
<span
86-
key={index}
87-
style={{
88-
fontWeight: part.highlight ? 700 : 400,
89-
}}
90-
>
90+
return (
91+
<li {...props}>
92+
<div>
93+
{parts.map((part, index) => (
94+
<span
95+
key={index}
96+
style={{
97+
fontWeight: part.highlight ? 700 : 400,
98+
}}
99+
>
91100
{part.text}
92101
</span>
93-
))}
94-
</div>
95-
</li>
96-
);
97-
}}
98-
size={size}
99-
sx={(theme) => ({
100-
backgroundColor: getHighlightBackgroundColor(
101-
theme,
102-
highlightBackground,
103-
),
104-
})}
105-
value={options.find(option => option.value === value) ?? null}
106-
/>;
102+
))}
103+
</div>
104+
</li>
105+
);
106+
}}
107+
size={size}
108+
sx={(theme) => ({
109+
backgroundColor: getHighlightBackgroundColor(
110+
theme,
111+
highlightBackground
112+
),
113+
})}
114+
value={options.find((option) => option.value === value) ?? null}
115+
/>
116+
);
107117
};
108118

109119
export default Autocomplete;

‎src/typedefs/FieldConfiguration.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
import { UseFormRegisterReturn } from 'react-hook-form';
1616
import { ERROR_MESSAGE_KEY } from './ErrorMessages';
1717
import { IFieldCondition } from './ConditionalFields';
18+
import { AutocompleteProps } from '@mui/material';
1819

1920
export type IFieldConfig = TStringIndexableObject<
2021
IParsedGenericField<any, any>
@@ -102,6 +103,19 @@ export interface ISelectCustomProperties
102103
options: Array<IOption>;
103104
}
104105

106+
// Autocomplete
107+
export interface IAutocompleteCustomProperties
108+
extends Omit<
109+
AutocompleteProps<
110+
IOption,
111+
boolean | undefined,
112+
boolean | undefined,
113+
boolean | undefined
114+
>,
115+
'renderInput'
116+
>,
117+
IOutsideRegisterAllowedProperties {}
118+
105119
// TagManagement
106120

107121
export interface ITagManagement<T>

0 commit comments

Comments
 (0)