@vaadin/hilla-react-crud/header-filter.js

Hilla CRUD utils for React

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { _enum } from '@vaadin/hilla-lit-form';
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { Item } from '@vaadin/react-components/Item.js';
import { ListBox } from '@vaadin/react-components/ListBox.js';
import { NumberField } from '@vaadin/react-components/NumberField.js';
import { Select } from '@vaadin/react-components/Select.js';
import { TextField } from '@vaadin/react-components/TextField.js';
import { TimePicker } from '@vaadin/react-components/TimePicker.js';
import { useContext, useEffect, useRef, useState, } from 'react';
import { ColumnContext, CustomColumnContext } from './autogrid-column-context.js';
import { useDatePickerI18n } from './locale.js';
import Matcher from './types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js';
import { convertToTitleCase } from './util';
function useFilterState(initialMatcher) {
    const context = useContext(ColumnContext);
    const [matcher, setMatcher] = useState(initialMatcher);
    const [filterValue, setFilterValue] = useState('');
    function updateFilter(newMatcher, newFilterValue) {
        setFilterValue(newFilterValue);
        setMatcher(newMatcher);
        const filter = {
            propertyId: context.propertyInfo.name,
            filterValue: newFilterValue,
            matcher: newMatcher,
            '@type': 'propertyString',
        };
        context.setColumnFilter(filter, context.filterKey);
    }
    return { matcher, filterValue, updateFilter };
}
function useSelectInitWorkaround(selectRef) {
    useEffect(() => {
        setTimeout(() => {
            if (selectRef.current) {
                selectRef.current.requestContentUpdate();
            }
        }, 1);
    }, []);
}
function ComparationSelection({ onMatcherChanged, value, isDateTimeType }) {
    const select = useRef(null);
    useSelectInitWorkaround(select);
    return (_jsx(Select, { theme: "small", className: "auto-grid-comparation-selection", ref: select, value: value, onValueChanged: ({ detail }) => {
            onMatcherChanged(detail.value);
        }, renderer: () => (_jsxs(ListBox, { children: [_jsx(Item, { value: Matcher.GREATER_THAN, label: '>', children: isDateTimeType ? '> After' : '> Greater than' }), _jsx(Item, { value: Matcher.LESS_THAN, label: '<', children: isDateTimeType ? '< Before' : '< Less than' }), _jsx(Item, { value: Matcher.EQUALS, label: '=', children: "= Equals" })] })) }));
}
export function StringHeaderFilter() {
    const context = useContext(ColumnContext);
    const { filterPlaceholder, filterDebounceTime, filterMinLength } = context.customColumnOptions ?? {};
    const { updateFilter } = useFilterState(Matcher.CONTAINS);
    const [inputValue, setInputValue] = useState('');
    useEffect(() => {
        if (filterMinLength && inputValue && inputValue.length < filterMinLength) {
            updateFilter(Matcher.CONTAINS, '');
            return () => { };
        }
        const delayInputTimeoutId = setTimeout(() => {
            updateFilter(Matcher.CONTAINS, inputValue);
        }, filterDebounceTime ?? 200);
        return () => clearTimeout(delayInputTimeoutId);
    }, [inputValue]);
    return (_jsx("div", { className: "auto-grid-string-filter", children: _jsx(TextField, { theme: "small", placeholder: filterPlaceholder ?? 'Filter...', onInput: (e) => {
                const fieldValue = e.target.value;
                setInputValue(fieldValue);
            } }) }));
}
export function NumberHeaderFilter() {
    const context = useContext(ColumnContext);
    const { filterPlaceholder, filterDebounceTime } = context.customColumnOptions ?? {};
    const [inputValue, setInputValue] = useState('');
    const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
    const select = useRef(null);
    useSelectInitWorkaround(select);
    useEffect(() => {
        const delayInputTimeoutId = setTimeout(() => {
            updateFilter(matcher, inputValue);
        }, filterDebounceTime ?? 200);
        return () => clearTimeout(delayInputTimeoutId);
    }, [inputValue]);
    return (_jsxs("div", { className: "auto-grid-number-filter", children: [_jsx(ComparationSelection, { value: matcher, onMatcherChanged: (m) => updateFilter(m, filterValue) }), _jsx(NumberField, { theme: "small", placeholder: filterPlaceholder ?? 'Filter...', onInput: (e) => {
                    const fieldValue = e.target.value;
                    setInputValue(fieldValue);
                } })] }));
}
export function EnumHeaderFilter() {
    const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);
    const context = useContext(ColumnContext);
    const model = context.propertyInfo.model;
    const options = [
        {
            value: '',
            label: '',
        },
        ...Object.keys(model[_enum]).map((value) => ({
            label: convertToTitleCase(value),
            value,
        })),
    ];
    return (_jsx("div", { className: "auto-grid-enum-filter", children: _jsx(Select, { theme: "small", items: options, value: filterValue, onValueChanged: (e) => {
                const newFilterValue = e.detail.value;
                updateFilter(Matcher.EQUALS, newFilterValue);
            } }) }));
}
export function BooleanHeaderFilter() {
    const { filterValue, updateFilter } = useFilterState(Matcher.EQUALS);
    const select = useRef(null);
    useSelectInitWorkaround(select);
    return (_jsx("div", { className: "auto-grid-boolean-filter", children: _jsx(Select, { theme: "small", ref: select, onValueChanged: (e) => {
                const newFilterValue = e.detail.value;
                updateFilter(Matcher.EQUALS, newFilterValue);
            }, renderer: () => (_jsxs(ListBox, { children: [_jsx(Item, { value: '', label: '' }), _jsx(Item, { value: 'True', label: 'Yes', children: "Yes" }), _jsx(Item, { value: 'False', label: 'No', children: "No" })] })), value: filterValue }) }));
}
export function DateHeaderFilter() {
    const context = useContext(ColumnContext);
    const i18n = useDatePickerI18n();
    const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
    const [invalid, setInvalid] = useState(false);
    return (_jsxs("div", { className: "auto-grid-date-filter", children: [_jsx(ComparationSelection, { value: matcher, onMatcherChanged: (m) => updateFilter(m, filterValue), isDateTimeType: true }), _jsx(DatePicker, { theme: "small", value: filterValue, placeholder: context.customColumnOptions?.filterPlaceholder ?? 'Filter...', i18n: i18n, onInvalidChanged: ({ detail: { value } }) => {
                    setInvalid(value);
                }, onValueChanged: ({ detail: { value } }) => {
                    if (!(invalid || value === filterValue)) {
                        updateFilter(matcher, value);
                    }
                } })] }));
}
export function TimeHeaderFilter() {
    const context = useContext(ColumnContext);
    const { matcher, filterValue, updateFilter } = useFilterState(Matcher.GREATER_THAN);
    const [invalid, setInvalid] = useState(false);
    return (_jsxs("div", { className: "auto-grid-time-filter", children: [_jsx(ComparationSelection, { value: matcher, onMatcherChanged: (m) => updateFilter(m, filterValue), isDateTimeType: true }), _jsx(TimePicker, { theme: "small", value: filterValue, placeholder: context.customColumnOptions?.filterPlaceholder ?? 'Filter...', onInvalidChanged: ({ detail: { value } }) => {
                    setInvalid(value);
                }, onValueChanged: ({ detail: { value } }) => {
                    if (!(invalid || value === filterValue)) {
                        updateFilter(matcher, value);
                    }
                } })] }));
}
export function NoHeaderFilter() {
    return _jsx(_Fragment, {});
}
export function HeaderFilterWrapper({ original }) {
    const context = useContext(ColumnContext);
    const customContext = useContext(CustomColumnContext);
    const { setColumnFilter, headerFilterRenderer: HeaderFilterRenderer, filterKey } = (context ?? customContext);
    function setFilter(filter) {
        setColumnFilter(filter, filterKey);
    }
    return _jsx(HeaderFilterRenderer, { original: original, setFilter: setFilter });
}
//# sourceMappingURL=header-filter.js.map