Function SearchTerm

packages/sanddance-explorer/src/controls/searchTerm.tsx:146–233

(props: Props)

}

export function SearchTerm(props: Props) {
    const ex = props.searchExpression;
    const possibleValues = getValues(ex, props.column, props.data, props.autoCompleteDistinctValues);

    //TODO better date handling with calendar picker

    return (
        <div>
            {props.index > 0 && (
                <Dropdown
                    collapseLabel={props.collapseLabels}
                    className="search-field"
                    label={strings.labelSearchClause}
                    dropdownWidth={120}
                    disabled={!ex.unlocked || props.disableOR}
                    options={getExpressionClauses(ex.clause, props.disableOR)}
                    onChange={(e, o) => props.onUpdateExpression({ clause: (o.data as SearchExpressionClause) }, props.index)}
                />
            )}
            <Dropdown
                componentRef={props.dropdownRef}
                collapseLabel={props.collapseLabels}
                className="search-field"
                label={strings.labelSearchColumn}
                options={[
                    {
                        key: '',
                        text: strings.selectAny,
                        data: null,
                        selected: ex.name === null,
                    },
                ].concat(props.columns.map((c, i) => ({
                    key: c.name,
                    text: c.name,
                    data: c,
                    selected: c.name === ex.name,
                })))}
                onChange={(e, o) => props.onUpdateExpression({ name: (o.data && (o.data as SandDance.types.Column).name) || null }, props.index)}
            />
            <Dropdown
                collapseLabel={props.collapseLabels}
                className="search-field"
                label={strings.labelSearchOperator}
                dropdownWidth={120}
                options={getOperators(ex, props.column)}
                onChange={(e, o) => props.onUpdateExpression({ operator: (o.data) as SearchExpressionOperators }, props.index)}
            />
            {possibleValues.length > 0 && (
                <base.fluentUI.ComboBox
                    className="search-field"
                    label={props.collapseLabels ? null : strings.labelSearchValue}
                    placeholder={strings.labelSearchValuePlaceholder}
                    disabled={ex.operator === 'isnullorEmpty'}
                    dropdownWidth={dropdownWidth}
                    allowFreeform={true}
                    autoComplete="on"
                    errorMessage={ex.errorMessage}
                    text={getText(ex)}