diff --git a/src/shell/creation-button.tsx b/src/shell/creation-button.tsx index f7c6c989..c26de492 100644 --- a/src/shell/creation-button.tsx +++ b/src/shell/creation-button.tsx @@ -4,9 +4,9 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import React, { FC, useMemo } from 'react'; +import React, { FC, useCallback, useMemo, useState } from 'react'; import { reduce, groupBy } from 'lodash'; -import { MultiButton } from '@zextras/carbonio-design-system'; +import { MultiButton, Button, Dropdown } from '@zextras/carbonio-design-system'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; import { useActions } from '../store/integrations/hooks'; @@ -43,16 +43,23 @@ export const CreationButton: FC<{ activeRoute?: AppRoute }> = ({ activeRoute }) const [t] = useTranslation(); const location = useLocation(); const actions = useActions({ activeRoute, location }, ACTION_TYPES.NEW); + const [open, setOpen] = useState(false); const primaryAction = useMemo( () => actions?.find?.( (a) => (a.group === activeRoute?.id || a.group === activeRoute?.app) && a.primary - ) ?? actions?.find?.((a) => a.primary), + ), [actions, activeRoute?.app, activeRoute?.id] ); const secondaryActions = useSecondaryActions(actions, activeRoute); - return ( + const onClose = useCallback(() => { + setOpen(false); + }, []); + const onOpen = useCallback(() => { + setOpen(true); + }, []); + return primaryAction ? ( = ({ activeRoute }) items={secondaryActions} disabled={!primaryAction || primaryAction?.disabled} /> + ) : ( + +