Skip to content

Commit

Permalink
fix: fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@s7dhansh
s7dhansh committed Jul 21, 2021
1 parent f1fa465 commit d733483
Show file tree
Hide file tree
Showing 27 changed files with 1,019 additions and 16,433 deletions.
15,914 changes: 22 additions & 15,892 deletions react-hook-form-mui/package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions react-hook-form-mui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@
"@material-ui/core": ">=4",
"@material-ui/icons": ">=4",
"@material-ui/lab": ">=4",
"react": ">=16.8",
"react-dom": ">=16.8",
"react-hook-form": ">=7"
},
"dependencies": {
Expand Down Expand Up @@ -79,6 +77,8 @@
"flatpickr": "^4.6.9",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": ">=16.8",
"react-dom": ">=16.8",
"react-dropzone": "^10.2.2",
"react-hook-form": "^7.0.7",
"react-select": "^3.2.0",
Expand Down
11 changes: 9 additions & 2 deletions react-hook-form-mui/src/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,17 +40,24 @@ const module = function({type, rhf}) {
return rhf ? require('./react-hook-form/ButtonGroup').default : require('./forms/ButtonGroup').default;
case 'multiLevelButtons':
return rhf ? require('./react-hook-form/MultiButtonGroup').default : require('./forms/ButtonGroup').default;
case 'inr':
return rhf ? require('./react-hook-form/CurrencyField').default : require('./forms/CurrencyField').default;
case 'checkbox':
return rhf ? require('./react-hook-form/CheckboxGroup').default : require('./forms/CheckboxGroup').default;
case 'selectchip':
return rhf ? require('./react-hook-form/SelectWithChip').default : require('./forms/SelectWithChip');
}
return rhf ? require('./react-hook-form/TextField').default : require('./forms/TextField').default;
};


// eslint-disable-next-line react/no-multi-comp
function Input({type, container, validate, label, rhf = true, components: {input, Field = input, Loader = LinearProgress, ...components} = {}, compact, ...rest}) { // eslint-disable-line no-unused-vars
function Input({type, container, validate, label, rhf = true, components: {input, Field = input, Loader = LinearProgress, ...components} = {}, compact, ...rest}) {// eslint-disable-lineno-unused-varsno-unused-vars
const Container = container ? require('@material-ui/core/Grid').default : Fragment;
const containerProps = container ? {item: true, ...container} : {};
Field = Field || module({type, rhf});
const extraProps = {...{compact, type, label, components}};
// console.log('control in input', rest);
return (
<ErrorBoundary>
<Container {...containerProps}>
Expand All @@ -70,7 +77,7 @@ Input.propTypes = {
label: PropTypes.string,
rhf: PropTypes.bool,
type: PropTypes.string,
validate: PropTypes.func,
validate: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
};

export default Input;
153 changes: 152 additions & 1 deletion react-hook-form-mui/src/forms/Autocomplete.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,153 @@
// import React, {useState} from 'react';
// import Input from '../Input';
// import MuiAutocomplete, {createFilterOptions} from '@material-ui/lab/Autocomplete';
// import Grid from '@material-ui/core/Grid';
// import Typography from '@material-ui/core/Typography';
// import parse from 'autosuggest-highlight/parse';
// import match from 'autosuggest-highlight/match';
// import PropTypes from 'prop-types';
// import {useDebounceCallback} from '@react-hook/debounce';

// export default function Autocomplete({
// optionsAsync,
// options: optionsSync,
// isClearable, // eslint-disable-line no-unused-vars
// compact,
// label,
// type, // eslint-disable-line no-unused-vars
// error,
// inputRef,
// helperText,
// container,
// selectComponents,
// InputProps,
// placeholder,
// AutocompleteProps,
// multiple,
// ...props
// }) {
// const [inputValue, setInputValue] = useState('');
// const [options, setOptions] = useState([]);
// const filterOption = createFilterOptions();

// const optionsAsyncDebounced = useDebounceCallback(optionsAsync, 200);
// console.log('optionsAsyncDebounced', optionsAsyncDebounced);
// // const optionsAsyncDebounced = React.useCallback((active) => debounce(() => optionsAsync(inputValue, setOptions, active)), [inputValue, setOptions, optionsAsync]);

// React.useEffect(() => {
// let active = true;

// if (inputValue === '') {
// setOptions([]);
// // eslint-disable-next-line no-undefined
// return undefined;
// }

// optionsAsyncDebounced(inputValue, setOptions, active);

// return () => {
// active = false;
// };
// }, [inputValue, optionsAsyncDebounced]);

// return (
// <MuiAutocomplete
// autoComplete
// filterOptions={(values, params) => {
// const filter = filterOption(values, params);
// if (params.inputValue !== '') {
// filter.push({
// label: params.inputValue,
// value: params.inputValue.toLowerCase(),
// });
// }
// return filter;
// }}
// getOptionLabel={(option) =>
// typeof option === 'string' ? option : option.label
// }
// getOptionSelected={(option, value) =>
// Array.isArray(option)
// ? option.find(o => o.label === value.label)
// : option.label === value.label
// }
// includeInputInList
// multiple={multiple}
// onInputChange={(event, newInputValue) => {
// console.log('val', newInputValue);
// setInputValue(newInputValue);
// }}
// // onInputChange={optionsAsync}
// options={optionsSync || options}
// {...props}
// renderInput={(params) => (
// <Input
// {...{
// error,
// helperText: helperText,
// placeholder: placeholder,
// inputRef,
// label, // causes problem - TODO
// compact,
// container,
// }}
// // {...props}
// {...params}
// InputLabelProps={{...params.InputLabelProps, className: props.InputLabelProps?.classes}}
// InputProps={{...params.InputProps, ...InputProps}}
// fullWidth
// inputProps={{...params.inputProps, className: params.inputProps.className + ' ' + 'mui'}}
// rhf={false}
// />
// )}
// renderOption={(option) => {
// console.log('OPtions', option);
// option.inputValue = inputValue;
// var matches = match(option.label, inputValue);
// const parts = parse(option.label, matches);
// console.log('matches', matches, parts);
// if (selectComponents?.Option) return <selectComponents.Option {...option} parts={parts}/>;
// return (
// <Grid alignItems='center' container key={option.value}>
// <Grid item xs>
// <Typography color='textSecondary' variant='body2'>
// {parts.map((part) => (
// <span
// key={part.text}
// style={{fontWeight: part.highlight ? 700 : 400}}
// >
// {part.text}
// </span>
// ))}
// </Typography>
// </Grid>
// </Grid>
// );
// }}
// {...AutocompleteProps}
// />
// );
// }

// Autocomplete.propTypes = {
// AutocompleteProps: PropTypes.object,
// compact: PropTypes.bool,
// container: PropTypes.object,
// error: PropTypes.bool,
// helperText: PropTypes.string,
// InputProps: PropTypes.object,
// inputRef: PropTypes.func,
// isClearable: PropTypes.bool,
// label: PropTypes.string,
// multiple: PropTypes.bool,
// options: PropTypes.object,
// optionsAsync: PropTypes.func,
// placeholder: PropTypes.string,
// selectComponents: PropTypes.object,
// type: PropTypes.string,
// };


import React, {useState} from 'react';
import Input from '../Input';
import MuiAutocomplete from '@material-ui/lab/Autocomplete';
Expand All @@ -7,6 +157,7 @@ import parse from 'autosuggest-highlight/parse';
import match from 'autosuggest-highlight/match';
import PropTypes from 'prop-types';
import {useDebounceCallback} from '@react-hook/debounce';
import Chip from '@material-ui/core/Chip';

export default function Autocomplete({
optionsAsync,
Expand Down Expand Up @@ -80,7 +231,7 @@ export default function Autocomplete({
{...params}
InputProps={{...params.InputProps, ...InputProps}}
fullWidth
inputProps={{...params.inputProps, ...inputProps}}
inputProps={{...params.inputProps, className: params.inputProps.className + ' ' + 'mui', ...inputProps}}
rhf={false}
/>
)}
Expand Down
Loading

0 comments on commit d733483

Please sign in to comment.