|
| 1 | +var __assign = (this && this.__assign) || function () { |
| 2 | + __assign = Object.assign || function(t) { |
| 3 | + for (var s, i = 1, n = arguments.length; i < n; i++) { |
| 4 | + s = arguments[i]; |
| 5 | + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) |
| 6 | + t[p] = s[p]; |
| 7 | + } |
| 8 | + return t; |
| 9 | + }; |
| 10 | + return __assign.apply(this, arguments); |
| 11 | +}; |
| 12 | +import { jsx as _jsx } from "react/jsx-runtime"; |
| 13 | +import { createElement as _createElement } from "react"; |
| 14 | +/** |
| 15 | + * Created by [email protected] on 06.07.22 |
| 16 | + * |
| 17 | + * This file is subject to the terms and conditions defined in |
| 18 | + * file 'LICENSE.txt', which is part of this source code package. |
| 19 | + */ |
| 20 | +import { Autocomplete as MUIAutocomplete, TextField } from '@mui/material'; |
| 21 | +import { useController, useFormContext } from 'react-hook-form'; |
| 22 | +import { getHighlightBackgroundColor, shouldHighlightBackground, shouldShowRequiredLabel } from '../util'; |
| 23 | +import parse from 'autosuggest-highlight/parse'; |
| 24 | +import match from 'autosuggest-highlight/match'; |
| 25 | +export var Autocomplete = function (_a) { |
| 26 | + var _b = _a.customProperties, options = _b.options, registerReturn = _b.registerReturn, fieldId = _a.fieldId, _c = _a.uiSettings, disabled = _c.disabled, description = _c.description, label = _c.label, placeholder = _c.placeholder, size = _c.size, variant = _c.variant, validation = _a.validation; |
| 27 | + var register = useFormContext().register; |
| 28 | + if (register === undefined && registerReturn === undefined) { |
| 29 | + throw new Error('Either register or registerReturn must be supplied'); |
| 30 | + } |
| 31 | + var required = validation.required; |
| 32 | + var field = useController({ |
| 33 | + name: fieldId, |
| 34 | + rules: Object.assign({ disabled: disabled }, validation), |
| 35 | + }).field; |
| 36 | + var onChange = field.onChange, onBlur = field.onBlur, ref = field.ref, value = field.value; |
| 37 | + var handleChange = function (e, newValue, reason) { |
| 38 | + onChange(newValue.value); |
| 39 | + }; |
| 40 | + var formState = useFormContext().formState; |
| 41 | + var errors = formState.errors; |
| 42 | + var error = errors[fieldId]; |
| 43 | + var isErroneous = error !== undefined; |
| 44 | + var isRequired = required !== false; |
| 45 | + var showRequiredLabel = shouldShowRequiredLabel(isRequired, disabled); |
| 46 | + var highlightBackground = shouldHighlightBackground(value, isRequired, disabled); |
| 47 | + return _jsx(MUIAutocomplete, { fullWidth: true, size: size, disabled: disabled, id: 'combo-box-demo', options: options, onChange: handleChange, renderInput: function (params) { return _createElement(TextField, __assign({}, params, { error: isErroneous, helperText: isErroneous ? error.message : description, label: label, placeholder: placeholder, InputLabelProps: { required: showRequiredLabel, shrink: true }, onBlur: onBlur, inputRef: ref, variant: variant, key: fieldId, name: fieldId })); }, renderOption: function (props, option, _a) { |
| 48 | + var inputValue = _a.inputValue; |
| 49 | + var matches = match(option.label, inputValue); |
| 50 | + var parts = parse(option.label, matches); |
| 51 | + return (_jsx("li", __assign({}, props, { children: _jsx("div", { children: parts.map(function (part, index) { return (_jsx("span", __assign({ style: { |
| 52 | + fontWeight: part.highlight ? 700 : 400, |
| 53 | + } }, { children: part.text }), index)); }) }) }))); |
| 54 | + }, sx: function (theme) { return ({ |
| 55 | + backgroundColor: getHighlightBackgroundColor(theme, highlightBackground), |
| 56 | + }); } }); |
| 57 | +}; |
| 58 | +export default Autocomplete; |
0 commit comments