@mui/x-data-grid
Version:
The Community plan edition of the Data Grid components (MUI X).
166 lines (163 loc) • 7.67 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GridToolbarQuickFilter = GridToolbarQuickFilter;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
var _styles = require("@mui/material/styles");
var _utils = require("@mui/utils");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _constants = require("../../constants");
var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _useGridSelector = require("../../hooks/utils/useGridSelector");
var _filter = require("../../hooks/features/filter");
var _utils2 = require("../../utils/utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className"];
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['toolbarQuickFilter']
};
return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
};
const GridToolbarQuickFilterRoot = (0, _styles.styled)(_TextField.default, {
name: 'MuiDataGrid',
slot: 'ToolbarQuickFilter',
overridesResolver: (props, styles) => styles.toolbarQuickFilter
})(({
theme
}) => ({
width: 'auto',
paddingBottom: theme.spacing(0.5),
'& input': {
marginLeft: theme.spacing(0.5)
},
'& .MuiInput-underline:before': {
borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
},
[`& input[type="search"]::-webkit-search-decoration,
& input[type="search"]::-webkit-search-cancel-button,
& input[type="search"]::-webkit-search-results-button,
& input[type="search"]::-webkit-search-results-decoration`]: {
/* clears the 'X' icon from Chrome */
display: 'none'
}
}));
const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
const defaultSearchValueFormatter = values => values.join(' ');
function GridToolbarQuickFilter(props) {
const apiRef = (0, _useGridApiContext.useGridApiContext)();
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const classes = useUtilityClasses(rootProps);
const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
const {
quickFilterParser = defaultSearchValueParser,
quickFilterFormatter = defaultSearchValueFormatter,
debounceMs = rootProps.filterDebounceMs,
className
} = props,
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
React.useEffect(() => {
if (!(0, _utils2.isDeepEqual)(prevQuickFilterValuesRef.current, quickFilterValues)) {
// The model of quick filter value has been updated
prevQuickFilterValuesRef.current = quickFilterValues;
// Update the input value if needed to match the new model
setSearchValue(prevSearchValue => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
}
}, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
const updateSearchValue = React.useCallback(newSearchValue => {
const newQuickFilterValues = quickFilterParser(newSearchValue);
prevQuickFilterValuesRef.current = newQuickFilterValues;
apiRef.current.setQuickFilterValues(newQuickFilterValues);
}, [apiRef, quickFilterParser]);
const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.unstable_debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
const handleSearchValueChange = React.useCallback(event => {
const newSearchValue = event.target.value;
setSearchValue(newSearchValue);
debouncedUpdateSearchValue(newSearchValue);
}, [debouncedUpdateSearchValue]);
const handleSearchReset = React.useCallback(() => {
setSearchValue('');
updateSearchValue('');
}, [updateSearchValue]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
as: rootProps.slots.baseTextField,
ownerState: rootProps,
variant: "standard",
value: searchValue,
onChange: handleSearchValueChange,
className: (0, _clsx.default)(classes.root, className),
placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
"aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
type: "search"
}, other, {
InputProps: (0, _extends2.default)({
startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
fontSize: "small"
}),
endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
"aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
size: "small",
sx: [searchValue ? {
visibility: 'visible'
} : {
visibility: 'hidden'
}],
onClick: handleSearchReset
}, rootProps.slotProps?.baseIconButton, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
fontSize: "small"
})
}))
}, other.InputProps)
}, rootProps.slotProps?.baseTextField));
}
process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* The debounce time in milliseconds.
* @default 150
*/
debounceMs: _propTypes.default.number,
/**
* Function responsible for formatting values of quick filter in a string when the model is modified
* @param {any[]} values The new values passed to the quick filter model
* @returns {string} The string to display in the text field
* @default (values: string[]) => values.join(' ')
*/
quickFilterFormatter: _propTypes.default.func,
/**
* Function responsible for parsing text input in an array of independent values for quick filtering.
* @param {string} input The value entered by the user
* @returns {any[]} The array of value on which quick filter is applied
* @default (searchText: string) => searchText
* .split(' ')
* .filter((word) => word !== '')
*/
quickFilterParser: _propTypes.default.func
} : void 0;
/**
* Demos:
* - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
* - [Filtering - quick filter](https://mui.com/x/react-data-grid/filtering/quick-filter/)
*
* API:
* - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
*/