All files / src/components/AddStepCondition ConditionInputs.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import CustomInput from "../Inputs/CustomInput";
import { InputTypes, StepRule, StepRuleTypes } from "../../types";
import { operationOptions } from "../../utils/conditionals/operationOptions";
import useIsPrefetched from "../../hooks/playbooks/useIsPrefetched";
import { useSelector } from "react-redux";
import { additionalStateSelector } from "../../store/features/drawers/selectors";
import useEdgeConditions from "../../hooks/playbooks/useEdgeConditions";
import { RuleType } from "../common/Conditions/types";
 
type ConditionInputsPropTypes = {
  rule: StepRule;
  ruleIndex: number;
};
 
function ConditionInputs({ rule, ruleIndex }: ConditionInputsPropTypes) {
  const { id } = useSelector(additionalStateSelector);
  const { handleRule } = useEdgeConditions(id);
  const isPrefetched = useIsPrefetched();
  const ruleType = rule.type?.toLowerCase() as StepRuleTypes;
  const ruleData = rule?.[ruleType];
 
  const handleChange = (val: string | undefined, type: string) => {
    handleRule(type, val, ruleIndex, RuleType.STEP_RULE);
  };
 
  return (
    <div className="flex flex-wrap gap-2">
      <CustomInput
        inputType={InputTypes.CRON}
        error={undefined}
        options={operationOptions}
        value={ruleData.rule}
        placeholder={`Enter CRON Rule`}
        handleChange={(id: string) => handleChange(id, `${ruleType}.rule`)}
        disabled={!!isPrefetched}
      />
    </div>
  );
}
 
export default ConditionInputs;