@ladg/rhfmui
Version:
The integration of MUI components with React hook form.
429 lines (428 loc) • 28.4 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__mui_icons_material_CheckBox_709569e5__ from "@mui/icons-material/CheckBox";
import * as __WEBPACK_EXTERNAL_MODULE__mui_icons_material_CheckBoxOutlineBlank_1de5ee8f__ from "@mui/icons-material/CheckBoxOutlineBlank";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Autocomplete_7a50a8f5__ from "@mui/material/Autocomplete";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Checkbox_a38238a1__ from "@mui/material/Checkbox";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Chip_305fde45__ from "@mui/material/Chip";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_CircularProgress_60f00cb3__ from "@mui/material/CircularProgress";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__ from "@mui/material/FormHelperText";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Grid2_6b284161__ from "@mui/material/Grid2";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Paper_a338d346__ from "@mui/material/Paper";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Popper_24cb866b__ from "@mui/material/Popper";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_styles_19cb2acd__ from "@mui/material/styles";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_TextField_4cf233bd__ from "@mui/material/TextField";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Tooltip_69cc2f11__ from "@mui/material/Tooltip";
import * as __WEBPACK_EXTERNAL_MODULE__mui_material_Typography_77749481__ from "@mui/material/Typography";
import * as __WEBPACK_EXTERNAL_MODULE_fast_sort_cfaf6b47__ from "fast-sort";
import * as __WEBPACK_EXTERNAL_MODULE_highlight_words_core_9bb680fc__ from "highlight-words-core";
import * as __WEBPACK_EXTERNAL_MODULE_match_sorter_d3c53fe5__ from "match-sorter";
import * as __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__ from "react-hook-form";
import * as __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__ from "../../utilities/isNameBelongsToFieldArray.js";
const RHFMuiAutoCompleteMultiple = (props)=>{
const { rhfinstance, rhf_rules, name = '', options = [], label = '', placeholder = '', disabled = false, fullWidth = false, dropdownHeight = '300', dropdownMaxWidth = '', permanentMessage = '', enableCheckboxForOptions = false, optionTableView, highlightSearchMatch = true, onChangeExtraHandler, autocompleteProps, textFieldProps } = props;
const { control } = rhfinstance;
const isTableViewEnabled = !!optionTableView?.columnHeader?.length && true;
const theme = (0, __WEBPACK_EXTERNAL_MODULE__mui_material_styles_19cb2acd__.useTheme)();
const sortedOpionsByLabel = (0, __WEBPACK_EXTERNAL_MODULE_fast_sort_cfaf6b47__.sort)(options).asc((o)=>[
o?.optionLabel
]);
const sortedOpionsByGroupByProp = (0, __WEBPACK_EXTERNAL_MODULE_fast_sort_cfaf6b47__.sort)(sortedOpionsByLabel).asc((o)=>o?.groupByProp);
const [newOptionList, setnewOptionList] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
let optionList = [];
optionList = isTableViewEnabled ? [
{
id: 'tableView',
optionLabel: 'tableHeader',
value: '',
isDisabled: true
},
...sortedOpionsByGroupByProp
] : sortedOpionsByGroupByProp;
setnewOptionList(optionList);
}, [
isTableViewEnabled,
options
]);
const [fixedOptions, setFixedOptions] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
const abc = options.filter((item)=>{
if (item?.isFixed) return item;
});
setFixedOptions(abc);
}, [
options
]);
const screenWidth = window.innerWidth;
const [listBoxWidth, setListBoxWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)('0px');
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
setListBoxWidth(`${screenWidth}px`);
}, [
screenWidth
]);
const MyListboxComponent = (listboxProps)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Paper_a338d346__["default"], {
...listboxProps,
style: {
width: listBoxWidth,
maxHeight: dropdownHeight ? `${dropdownHeight}px` : '300px'
}
});
const myref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
const actualWidthOfAutocomplete = myref?.current?.offsetWidth;
const [popperStyle, setPopperStyle] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({});
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
dropdownMaxWidth ? setPopperStyle({
width: isTableViewEnabled ? '100%' : `${actualWidthOfAutocomplete}px`,
maxWidth: `${dropdownMaxWidth}px`
}) : setPopperStyle({
width: isTableViewEnabled ? '100%' : `${actualWidthOfAutocomplete}px`
});
}, [
dropdownMaxWidth,
isTableViewEnabled,
actualWidthOfAutocomplete
]);
const MyPopperComponent = (popperProps)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Popper_24cb866b__["default"], {
...popperProps,
style: popperStyle
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.Controller, {
control: control,
name: name,
rules: rhf_rules,
render: ({ field: { value, onChange, ref }, fieldState: { error } })=>{
const isFieldArrayUsed = (0, __WEBPACK_EXTERNAL_MODULE__utilities_isNameBelongsToFieldArray_js_97caeea0__.isNameBelongsToFieldArray)({
name
});
if (!Array.isArray(value) && !isFieldArrayUsed) console.error(`For RHFMuiAutoCompleteMultiple, initial value should be an array of object type. e.g.[] or [{}, {}]. Please check with name = "${name}".`);
const unfixedOptions = !!value?.length && value?.filter((item)=>{
if (!item?.isFixed) return item;
}) || [];
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Autocomplete_7a50a8f5__["default"], {
...autocompleteProps,
disabled: autocompleteProps?.disabled || disabled,
id: autocompleteProps?.id || `${name}_autocomplete_multi`,
disablePortal: false,
multiple: true,
disableCloseOnSelect: true,
options: newOptionList || [],
value: fixedOptions?.length ? [
...fixedOptions,
...unfixedOptions
] : value || [],
defaultValue: [],
noOptionsText: autocompleteProps?.noOptionsText || 'No options found.',
getOptionLabel: (option)=>{
if ('string' == typeof option) return option;
return option?.optionLabel;
},
onChange: (e, values, reason, details)=>{
onChange(values);
if (!!onChangeExtraHandler) onChangeExtraHandler(e, values, reason, details);
},
isOptionEqualToValue: (option, value)=>option.value === value.value,
renderInput: (params)=>{
const startAdornmentByUser = textFieldProps?.slotProps?.input?.startAdornment;
const endAdornmentByUser = textFieldProps?.slotProps?.input?.endAdornment;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_TextField_4cf233bd__["default"], {
ref: myref,
...params,
...textFieldProps,
inputRef: ref,
label: label,
fullWidth: fullWidth || textFieldProps?.fullWidth,
placeholder: placeholder || '',
error: !!error,
sx: {
width: textFieldProps?.fullWidth || fullWidth ? '100%' : '210px',
...textFieldProps?.sx
},
size: textFieldProps?.size || 'small',
slotProps: {
...textFieldProps?.slotProps,
inputLabel: {
sx: {
'.MuiInputLabel-asterisk': {
color: 'red'
},
...textFieldProps?.slotProps?.inputLabel?.sx
},
shrink: !!placeholder || void 0,
...textFieldProps?.slotProps?.inputLabel
},
input: {
...params.InputProps,
...textFieldProps?.slotProps?.input,
endAdornment: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
endAdornmentByUser || '',
params.InputProps?.endAdornment
]
}),
startAdornment: params.InputProps?.startAdornment || startAdornmentByUser ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: [
startAdornmentByUser,
params.InputProps?.startAdornment
]
}) : ''
}
}
}),
!!autocompleteProps?.loading && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__mui_material_Grid2_6b284161__["default"], {
container: true,
direction: "row",
spacing: 1,
sx: {
justifyContent: 'flex-start',
alignItems: 'center'
},
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_CircularProgress_60f00cb3__["default"], {
size: 15,
thickness: 6
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Typography_77749481__["default"], {
children: "Loading, wait...!"
})
]
}),
!!permanentMessage && 'function' == typeof permanentMessage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__["default"], {
error: true,
children: permanentMessage()
}),
!!permanentMessage && 'string' == typeof permanentMessage && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__["default"], {
error: true,
children: permanentMessage
}),
!!error && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_FormHelperText_3b87fa55__["default"], {
error: true,
children: error?.message || ''
})
]
});
},
groupBy: (option)=>option?.groupByProp,
filterOptions: (options, state)=>{
if (!!isTableViewEnabled) options?.shift();
const filteredResult = (0, __WEBPACK_EXTERNAL_MODULE_match_sorter_d3c53fe5__.matchSorter)(options, state.inputValue || '', {
keys: [
{
threshold: __WEBPACK_EXTERNAL_MODULE_match_sorter_d3c53fe5__.matchSorter.rankings.CONTAINS,
key: 'optionLabel'
}
]
});
const returnableResultAfterFilter = [
{
id: 'tableView',
optionLabel: 'tableHeader',
value: '',
isDisabled: true
},
...filteredResult
];
return isTableViewEnabled ? returnableResultAfterFilter : filteredResult;
},
renderOption: (props, option, state)=>{
const { selected, inputValue, index: stateOptionIndex } = state;
const { key, ...optionProps } = props;
let optionToDisplay = '';
if (highlightSearchMatch) {
const chunks = (0, __WEBPACK_EXTERNAL_MODULE_highlight_words_core_9bb680fc__.findAll)({
searchWords: [
inputValue
],
textToHighlight: option?.optionLabel
});
const highlightedText = chunks.map((chunk, index)=>{
const { end, highlight, start } = chunk;
const text = option?.optionLabel?.substr(start, end - start);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
style: {
backgroundColor: highlight ? '#FFCB7F' : '',
borderRadius: highlight ? '5px' : ''
},
children: text
}, `${option?.id}_${index}`);
});
optionToDisplay = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
children: highlightedText
});
} else optionToDisplay = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
children: option?.optionLabel
});
if (!isTableViewEnabled) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("li", {
...optionProps,
style: {
padding: '5px'
},
children: [
!!enableCheckboxForOptions && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Checkbox_a38238a1__["default"], {
icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_icons_material_CheckBoxOutlineBlank_1de5ee8f__["default"], {}),
checkedIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_icons_material_CheckBox_709569e5__["default"], {}),
checked: selected,
size: "small",
sx: {
margin: '0px',
padding: '3px'
}
}, `${option?.id}_${key}`),
option?.customLabel && 'function' == typeof option?.customLabel ? option?.customLabel() : optionToDisplay
]
}, option?.id);
{
const trBackgroundColor = stateOptionIndex % 2 === 1 ? (0, __WEBPACK_EXTERNAL_MODULE__mui_material_styles_19cb2acd__.lighten)(theme.palette.primary.main, 0.9) : '';
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
...optionProps,
style: {
position: option?.id === 'tableView' ? 'sticky' : void 0,
top: option?.id === 'tableView' ? 0 : void 0,
zIndex: option?.id === 'tableView' ? 10 : void 0,
backgroundColor: option?.id === 'tableView' ? `${theme?.palette?.primary?.main}` : void 0,
opacity: option?.id === 'tableView' ? 10 : void 0,
padding: '5px'
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("table", {
style: {
width: '100%',
tableLayout: 'fixed',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'wrap'
},
children: [
option?.id === 'tableView' && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("thead", {
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("tr", {
children: [
!!enableCheckboxForOptions && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("th", {
style: {
width: '40px'
}
}, "check"),
optionTableView?.columnHeader?.map((item, index)=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx("th", {
style: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'wrap',
color: 'white'
},
children: item
}, `${item}_${index}`))
]
})
}),
option?.id !== 'tableView' && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("tbody", {
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("tr", {
style: {
backgroundColor: trBackgroundColor
},
children: [
!!enableCheckboxForOptions && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
style: {
textAlign: 'center',
justifyContent: 'center',
width: '40px'
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Checkbox_a38238a1__["default"], {
icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_icons_material_CheckBoxOutlineBlank_1de5ee8f__["default"], {}),
checkedIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_icons_material_CheckBox_709569e5__["default"], {}),
checked: selected,
size: "small",
sx: {
margin: '0px',
padding: '3px'
}
}, `${option?.id}_${key}`)
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
style: {
wordBreak: 'break-word',
paddingLeft: '10px'
},
children: optionToDisplay
}),
optionTableView?.rowValues?.map((item, index)=>{
const isFunc = 'function' == typeof item;
const isString = 'string' == typeof item;
if (!!isString) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx("td", {
style: {
wordBreak: 'break-word',
paddingLeft: '10px'
},
children: option?.dataObject[`${item}`]
}, `${item}_${index}`);
if (!!isFunc) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx("td", {
style: {
wordBreak: 'break-word',
paddingLeft: '10px'
},
children: item(option?.dataObject)
}, `${item}_${index}`);
})
]
})
})
]
})
}, option?.id);
}
},
getOptionDisabled: (option)=>{
if (!!option?.isDisabled) return true;
if (!!option?.isFixed) return true;
return false;
},
renderTags: (tagValue, getTagProps)=>tagValue.map((option, index)=>{
const { key, ...tagProps } = getTagProps({
index
});
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.createElement)(__WEBPACK_EXTERNAL_MODULE__mui_material_Chip_305fde45__["default"], {
...tagProps,
key: option?.id,
label: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__mui_material_Tooltip_69cc2f11__["default"], {
title: option.optionLabel,
arrow: true,
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
children: option?.optionLabel
})
}),
disabled: !!option?.isFixed || !!tagProps?.disabled,
sx: {
borderRadius: '5px'
}
});
}),
slotProps: {
...autocompleteProps?.slotProps,
listbox: {
component: MyListboxComponent,
sx: {
paddingTop: '0px',
...autocompleteProps?.slotProps?.listbox?.sx
},
...autocompleteProps?.slotProps?.listbox
},
popper: {
component: MyPopperComponent,
sx: {
'& .MuiAutocomplete-groupLabel': {
fontSize: '15px',
fontWeight: 'bold',
color: 'white',
backgroundColor: `${theme?.palette?.primary?.main}`,
padding: '0px',
maxHeight: '500px'
},
...autocompleteProps?.slotProps?.popper?.sx
},
...autocompleteProps?.slotProps?.popper
}
}
});
}
});
};
export { RHFMuiAutoCompleteMultiple };