azure-devops-ui/Components/FilterBarItem/FilterBarItem.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import * as React from "react";
import { TimerManagement } from '../../Core/TimerManagement';
import { FILTER_CHANGE_EVENT } from '../../Utilities/Filter';
export class FilterBarItem extends React.Component {
    constructor(props) {
        super(props);
        this._onFilterChanged = (changedState) => {
            if (changedState.hasOwnProperty(this.props.filterItemKey)) {
                this.onFilterChanged(changedState[this.props.filterItemKey]);
            }
        };
        this._setFilterValue = (filterState) => {
            if (this.props.filter) {
                this.props.filter.setFilterItemState(this.props.filterItemKey, filterState);
            }
        };
        this.timerManagement = new TimerManagement();
    }
    UNSAFE_componentWillMount() {
        if (this.props.filter) {
            const itemState = this.props.filter.getFilterItemState(this.props.filterItemKey);
            this.setState({ value: itemState && itemState.value, operator: itemState && itemState.operator });
            const throttleWait = this.getThrottleWait();
            if (throttleWait) {
                this.throttledSetFilterValue = this.timerManagement.debounce(this._setFilterValue, throttleWait, { leading: false, trailing: true });
            }
            else {
                this.throttledSetFilterValue = this._setFilterValue;
            }
        }
    }
    /**
     * Setting state when component state is different from filter item state
     * Needed for handling scenarios when filter object's setState method is called with suppressChangeEvent=true
     * In such cases, FILTER_CHANGE_EVENT is not triggered and thus component state is not updated
     * And then on re-rendering component renders with old state.
     * @param nextProps
     */
    UNSAFE_componentWillReceiveProps(nextProps) {
        if (nextProps.filter) {
            const itemState = nextProps.filter.getFilterItemState(nextProps.filterItemKey);
            // If we are throttling the changes from the filter item's state, there is a chance that the props are out of sync with the state.
            // Therefore, we only want to react to new changes in props if we are not throttling or if the setKey for the component has changed
            // (indicating we want to completely reset state, reacting to the props)
            if (this.props.setKey !== nextProps.setKey ||
                (this.getThrottleWait() === 0 &&
                    !nextProps.filter.filterItemStatesAreEqual(nextProps.filterItemKey, itemState, this.state))) {
                this.setState({ value: itemState && itemState.value, operator: itemState && itemState.operator });
            }
        }
    }
    componentDidMount() {
        this.props.filter && this.props.filter.subscribe(this._onFilterChanged, FILTER_CHANGE_EVENT);
    }
    componentWillUnmount() {
        this.props.filter && this.props.filter.unsubscribe(this._onFilterChanged, FILTER_CHANGE_EVENT);
        this.timerManagement.dispose();
    }
    onFilterChanged(filterState) {
        this.setState({
            value: filterState && filterState.value,
            operator: filterState && filterState.operator
        });
    }
    getThrottleWait() {
        return 0;
    }
    setFilterValue(filterState) {
        if (this.getThrottleWait()) {
            this.setState({
                value: filterState && filterState.value,
                operator: filterState && filterState.operator
            });
        }
        this.throttledSetFilterValue(filterState);
    }
}