Na}{

File Content: `useControlledFieldArray.ts`

import { set } from 'lodash';
import { useCallback } from 'react';
import { UseFormReturn } from 'react-hook-form';

interface Options<R> {
  name: string;
  formAPI: UseFormReturn<any>;
  defaults?: R[];

  // if true, sets `__deleted: true` but does not remove item from the array in values
  softDelete?: boolean;
}

export type ControlledField<R> = R & {
  __deleted?: boolean;
};

const EMPTY_ARRAY = [] as const;

/*
 * react-hook-form's own useFieldArray is uncontrolled and super buggy.
 * this is a simple controlled version. It's dead simple and more robust at the cost of re-rendering the form
 * on every change to the sub forms in the array.
 * Warning: you'll have to take care of your own unique identiifer to use as `key` for the ReactNode array.
 * Using index will cause problems.
 */
export function useControlledFieldArray<R>(options: Options<R>) {
  const { name, formAPI, defaults, softDelete } = options;
  const { watch, getValues, reset, setValue } = formAPI;

  const fields: Array<ControlledField<R>> = watch(name) ?? defaults ?? EMPTY_ARRAY;

  const update = useCallback(
    (updateFn: (fields: R[]) => R[]) => {
      const values = JSON.parse(JSON.stringify(getValues()));
      const newItems = updateFn(fields ?? []);
      reset(set(values, name, newItems));
    },
    [getValues, name, reset, fields]
  );

  return {
    fields,
    append: useCallback((values: R) => update((fields) => [...fields, values]), [update]),
    remove: useCallback(
      (index: number) => {
        if (softDelete) {
          setValue(`${name}.${index}.__deleted`, true);
        } else {
          update((items) => {
            const newItems = items.slice();
            newItems.splice(index, 1);
            return newItems;
          });
        }
      },
      [update, name, setValue, softDelete]
    ),
  };
}

Name	Size	Permission
__snapshots__	---	0755
alert-details	---	0755
useAbilities.test.tsx	6404 bytes	0644
useAbilities.ts	13933 bytes	0644
useAlertManagerSources.ts	293 bytes	0644
useAlertQueriesStatus.ts	681 bytes	0644
useAlertmanagerConfig.ts	732 bytes	0644
useCombinedRule.ts	10042 bytes	0644
useCombinedRuleNamespaces.test.ts	1785 bytes	0644
useCombinedRuleNamespaces.ts	15283 bytes	0644
useControlledFieldArray.ts	1841 bytes	0644
useExternalAMSelector.test.tsx	6805 bytes	0644
useExternalAmSelector.ts	4616 bytes	0644
useFilteredAmGroups.ts	1291 bytes	0644
useFilteredRules.test.ts	8782 bytes	0644
useFilteredRules.ts	12938 bytes	0644
useFolder.ts	847 bytes	0644
useGroupedAlerts.ts	3338 bytes	0644
useHasRuler.ts	1062 bytes	0644
useIsRuleEditable.test.tsx	5996 bytes	0644
useIsRuleEditable.ts	2778 bytes	0644
useManagedAlertStateHistory.ts	692 bytes	0644
useMuteTimingOptions.ts	897 bytes	0644
usePagination.test.tsx	2055 bytes	0644
usePagination.ts	1058 bytes	0644
usePanelCombinedRules.ts	2733 bytes	0644
usePluginBridge.ts	847 bytes	0644
useReturnTo.test.tsx	1946 bytes	0644
useReturnTo.ts	1546 bytes	0644
useRuleSourcesWithRuler.ts	812 bytes	0644
useSilenceNavData.test.tsx	1249 bytes	0644
useSilenceNavData.ts	797 bytes	0644
useStateHistoryModal.tsx	2855 bytes	0644
useURLSearchParams.ts	628 bytes	0644
useUnifiedAlertingSelector.ts	531 bytes	0644
useVizHeight.ts	877 bytes	0644

File Content: useControlledFieldArray.ts

File Content: `useControlledFieldArray.ts`