@kwiz/fluentui/dist/controls/search.js

KWIZ common controls for FluentUI

import { jsx as _jsx } from "react/jsx-runtime";
import { Input, makeStyles, mergeClasses } from '@fluentui/react-components';
import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
import { debounce, isNullOrEmptyString, isNullOrUndefined } from '@kwiz/common';
import React, { useEffect, useRef } from 'react';
import { GetLogger } from '../_modules/config';
import { useEffectOnlyOnMount, useStateEX } from '../helpers';
import { mixins } from '../styles/styles';
const logger = GetLogger("Search");
const useStyles = makeStyles({
    main: mixins.main,
    clickable: mixins.clickable,
    root: {},
    searchIcon: {},
});
/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
export const Search = (props) => {
    const cssNames = useStyles();
    let delay = props.delay || 1;
    let refonChangeDeferred = useRef(props.onChangeDeferred);
    //keep updating the ref
    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
    //cannot call debounce every render, since it won't be the same debounced instance...
    var notifyParent = React.useCallback(debounce(v => {
        var _a;
        logger.log(`Set: ${v}`);
        //Call the latest ref - we don't want to call an old version of this function
        (_a = refonChangeDeferred.current) === null || _a === void 0 ? void 0 : _a.call(refonChangeDeferred, v);
    }, delay * 1000), [delay]);
    const [currentValue, setCurrentValue] = useStateEX(props.value || props.defaultValue || "", { skipUpdateIfSame: true });
    useEffect(() => {
        if (!isNullOrUndefined(props.value))
            setCurrentValue(props.value);
    }, [props.value]);
    var changeValue = React.useCallback((newValue) => {
        var _a;
        newValue = newValue || ""; //no null or undefined here
        setCurrentValue(newValue); //keep our state updated in sync
        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue); //if parent is using search as managed control, keep it up to date in sync
        notifyParent(newValue); //trigger a search async
    }, useEffectOnlyOnMount);
    return (_jsx(Input, Object.assign({}, props, { autoFocus: true, defaultValue: undefined, value: currentValue, onChange: (e, data) => {
            changeValue(data.value);
        }, className: mergeClasses(cssNames.root, props.main && cssNames.main), contentBefore: !isNullOrEmptyString(currentValue) ? undefined : _jsx(SearchRegular, { className: cssNames.searchIcon }), contentAfter: isNullOrEmptyString(currentValue)
            ? undefined
            : _jsx(DismissRegular, { className: cssNames.clickable, onClick: () => {
                    changeValue("");
                } }) })));
};
//# sourceMappingURL=search.js.map