export function PresetActionsDropdown()

in uui/components/filters/PresetPanel/PresetActionsDropdown.tsx [23:104]


export function PresetActionsDropdown(props: ITubButtonDropdownProps) {
    const { uuiNotifications } = useUuiContext();

    const copyUrlToClipboard = useCallback(async () => {
        await navigator.clipboard.writeText(props.getPresetLink(props.preset));
        successNotificationHandler('Link copied!');
    }, []);

    const saveInCurrent = useCallback(
        async (preset: ITablePreset) => {
            const newPreset: ITablePreset = {
                ...preset,
                filter: props.tableState.filter,
                sorting: props.tableState.sorting,
                columnsConfig: props.tableState.columnsConfig,
                filtersConfig: props.tableState.filtersConfig,
                viewState: props.tableState.viewState,
            };
            await props.updatePreset(newPreset);
            successNotificationHandler('Changes saved!');
        },
        [
            props.tableState.filter, props.tableState.columnsConfig, props.tableState.filtersConfig,
        ],
    );

    const successNotificationHandler = useCallback((text: string) => {
        uuiNotifications
            .show(
                (props) => (
                    <SuccessNotification { ...props }>
                        <Text size="36" fontSize="14">
                            {text}
                        </Text>
                    </SuccessNotification>
                ),
                { duration: 3 },
            )
            .catch(() => null);
    }, []);

    const saveInCurrentHandler = useCallback(() => {
        saveInCurrent(props.preset);
    }, [props.preset]);

    const discardAllChangesHandler = useCallback(() => {
        props.choosePreset(props.preset);
    }, [props.preset]);

    const duplicateHandler = useCallback(() => {
        props.duplicatePreset(props.preset);
    }, [props.preset]);

    const deleteHandler = useCallback(async () => {
        await props.deletePreset(props.preset);
    }, [
        props.activePresetId, props.deletePreset, props.preset,
    ]);

    const renderBody = (dropdownProps: DropdownBodyProps) => {
        const isReadonlyPreset = props.preset.isReadonly;
        const isPresetChanged = props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset);
        const isRenameAvailable = props.preset.id === props.activePresetId && !isReadonlyPreset;

        return (
            <DropdownMenuBody { ...dropdownProps }>
                { isPresetChanged && (
                    <>
                        {!isReadonlyPreset && (
                            <DropdownMenuButton key={ `${props.preset.id}-save-in-current` } icon={ SaveInCurrentIcon } caption="Save in current" onClick={ () => { dropdownProps.onClose(); saveInCurrentHandler(); } } />
                        )}
                        <DropdownMenuButton
                            key={ `${props.preset.id}-save-as-new` }
                            icon={ SaveAsNewIcon }
                            caption="Save as new"
                            // We add setTimeout to call addPreset after dropdown will be closed, since dropdown has focus lock, and it broke autofocus on add new preset input
                            onClick={ () => { dropdownProps.onClose(); setTimeout(() => props.addPreset(), 0); } }
                        />
                        <DropdownMenuButton key={ `${props.preset.id}-discard` } icon={ DiscardChangesIcon } caption="Discard all changes" onClick={ () => { dropdownProps.onClose(); discardAllChangesHandler(); } } />
                        <DropdownMenuSplitter key="discard-splitter" />
                    </>
                )}