|
| 1 | +/* |
| 2 | + The MIT License |
| 3 | +
|
| 4 | + Copyright (c) 2017-2020 EclipseSource Munich |
| 5 | + https://github.com/eclipsesource/jsonforms |
| 6 | +
|
| 7 | + Permission is hereby granted, free of charge, to any person obtaining a copy |
| 8 | + of this software and associated documentation files (the "Software"), to deal |
| 9 | + in the Software without restriction, including without limitation the rights |
| 10 | + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 11 | + copies of the Software, and to permit persons to whom the Software is |
| 12 | + furnished to do so, subject to the following conditions: |
| 13 | +
|
| 14 | + The above copyright notice and this permission notice shall be included in |
| 15 | + all copies or substantial portions of the Software. |
| 16 | +
|
| 17 | + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 18 | + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 19 | + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 20 | + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 21 | + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 22 | + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 23 | + THE SOFTWARE. |
| 24 | +*/ |
| 25 | +import React, {ReactNode} from 'react'; |
| 26 | +import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core'; |
| 27 | + |
| 28 | +import Input from '@material-ui/core/Input'; |
| 29 | +import Autocomplete, { AutocompleteRenderOptionState } from '@material-ui/lab/Autocomplete'; |
| 30 | +import { areEqual } from '@jsonforms/react'; |
| 31 | +import merge from 'lodash/merge'; |
| 32 | + |
| 33 | +export interface WithOptionLabel { |
| 34 | + getOptionLabel?(option: EnumOption) : string; |
| 35 | + renderOption?(option: EnumOption, state: AutocompleteRenderOptionState): ReactNode; |
| 36 | +} |
| 37 | + |
| 38 | +export const MuiAutocomplete = React.memo((props: EnumCellProps & WithClassname & WithOptionLabel) => { |
| 39 | + const { |
| 40 | + data, |
| 41 | + className, |
| 42 | + id, |
| 43 | + enabled, |
| 44 | + uischema, |
| 45 | + path, |
| 46 | + handleChange, |
| 47 | + options, |
| 48 | + config, |
| 49 | + getOptionLabel, |
| 50 | + renderOption |
| 51 | + } = props; |
| 52 | + const appliedUiSchemaOptions = merge({}, config, uischema.options); |
| 53 | + const [inputValue, setInputValue] = React.useState(data); |
| 54 | + |
| 55 | + const findOption = options.find(o => o.value === data); |
| 56 | + return ( |
| 57 | + <Autocomplete |
| 58 | + className={className} |
| 59 | + id={id} |
| 60 | + disabled={!enabled} |
| 61 | + value={findOption} |
| 62 | + onChange={(_event: any, newValue: EnumOption | null) => { |
| 63 | + handleChange(path, newValue?.value); |
| 64 | + }} |
| 65 | + inputValue={inputValue} |
| 66 | + onInputChange={(_event, newInputValue) => { |
| 67 | + setInputValue(newInputValue); |
| 68 | + }} |
| 69 | + autoHighlight |
| 70 | + autoSelect |
| 71 | + autoComplete |
| 72 | + fullWidth |
| 73 | + options={options} |
| 74 | + getOptionLabel={getOptionLabel || (option => option?.label)} |
| 75 | + style={{ marginTop: 16 }} |
| 76 | + renderInput={params => ( |
| 77 | + <Input style={{ width: '100%' }} type='text' inputProps={params.inputProps} inputRef={params.InputProps.ref} autoFocus={appliedUiSchemaOptions.focus}/> |
| 78 | + )} |
| 79 | + renderOption={renderOption} |
| 80 | + /> |
| 81 | + ); |
| 82 | +}, areEqual); |
0 commit comments