/
FilterBuilderLogicalOperator.tsx
59 lines (54 loc) · 2.02 KB
/
FilterBuilderLogicalOperator.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module PropertyFilterBuilder
*/
import React from "react";
import cx from "classnames";
import { Anchor } from "@itwin/itwinui-react";
import type { PropertyFilterRuleGroupOperator } from "./Operators";
import { useTranslation } from "../useTranslation";
/**
* Props for [[PropertyFilterBuilderLogicalOperator]] component.
* @beta
*/
export interface PropertyFilterBuilderLogicalOperatorProps {
/** Allows toggling of operator by clicking operator text. */
isDisabled?: boolean;
/** Operator to combine FilterBuilderRules. Must be either "and" or "or". */
operator: `${PropertyFilterRuleGroupOperator}`;
/** Callback that is invoked when operator changes. */
onOperatorChange: (operator: `${PropertyFilterRuleGroupOperator}`) => void;
/** Classname to specify CSS styling */
className?: string;
}
/** Component to render the operator inside of the filter builder
* @beta
*/
export const PropertyFilterBuilderLogicalOperator = (
props: PropertyFilterBuilderLogicalOperatorProps
) => {
const { isDisabled, operator, onOperatorChange, className } = props;
const { translate } = useTranslation();
const toggle = () => (operator === "and" ? "or" : "and");
const operatorDisplayText =
operator === "and"
? translate("filterBuilder.operators.and")
: translate("filterBuilder.operators.or");
return (
<div className={cx("fb-logical-operator", className)}>
{isDisabled ? (
<span>{operatorDisplayText}</span>
) : (
<Anchor
className="fb-logical-operator-toggle"
onClick={() => onOperatorChange(toggle())}
>
{operatorDisplayText}
</Anchor>
)}
</div>
);
};