\n A time interval is a definition for a moment in time. All fields are lists, and at least one list element must\n be satisfied to match the field. If a field is left blank, any moment of time will match the field. For an\n instant of time to match a complete time interval, all fields must match. A mute timing can contain multiple\n time intervals.\n
\n \n {timeIntervals.map((timeInterval, timeIntervalIndex) => {\n const errors = formState.errors;\n\n // manually register the \"location\" field, react-hook-form doesn't handle nested field arrays well and will refuse to set\n // the default value for the field when using \"useFieldArray\"\n register(`time_intervals.${timeIntervalIndex}.location`);\n\n return (\n \n \n \n }\n width={50}\n onChange={(selectedTimezone) => {\n setValue(`time_intervals.${timeIntervalIndex}.location`, selectedTimezone.value);\n }}\n // @ts-ignore react-hook-form doesn't handle nested field arrays well\n defaultValue={{ label: timeInterval.location, value: timeInterval.location }}\n data-testid=\"mute-timing-location\"\n />\n \n \n {\n setValue(`time_intervals.${timeIntervalIndex}.weekdays`, daysOfWeek);\n }}\n // @ts-ignore react-hook-form doesn't handle nested field arrays well\n defaultValue={timeInterval.weekdays}\n />\n \n \n \n validateArrayField(\n value,\n (day) => {\n const parsedDay = parseInt(day, 10);\n return (parsedDay > -31 && parsedDay < 0) || (parsedDay > 0 && parsedDay < 32);\n },\n 'Invalid day'\n ),\n })}\n width={50}\n // @ts-ignore react-hook-form doesn't handle nested field arrays well\n defaultValue={timeInterval.days_of_month}\n placeholder=\"Example: 1, 14:16, -1\"\n data-testid=\"mute-timing-days\"\n />\n \n \n \n validateArrayField(\n value,\n (month) => MONTHS.includes(month) || (parseInt(month, 10) < 13 && parseInt(month, 10) > 0),\n 'Invalid month'\n ),\n })}\n width={50}\n placeholder=\"Example: 1:3, may:august, december\"\n // @ts-ignore react-hook-form doesn't handle nested field arrays well\n defaultValue={timeInterval.months}\n data-testid=\"mute-timing-months\"\n />\n \n \n validateArrayField(value, (year) => /^\\d{4}$/.test(year), 'Invalid year'),\n })}\n width={50}\n placeholder=\"Example: 2021:2022, 2030\"\n // @ts-ignore react-hook-form doesn't handle nested field arrays well\n defaultValue={timeInterval.years}\n data-testid=\"mute-timing-years\"\n />\n \n \n
\n );\n })}\n \n