diff --git a/src/components/PlaceholderContainer/PlaceholderContainer.tsx b/src/components/PlaceholderContainer/PlaceholderContainer.tsx index 55527bfa..a51bc1f2 100644 --- a/src/components/PlaceholderContainer/PlaceholderContainer.tsx +++ b/src/components/PlaceholderContainer/PlaceholderContainer.tsx @@ -91,7 +91,11 @@ export class PlaceholderContainer extends React.Component< } private renderAction() { - const {action} = this.props; + const {action, renderAction} = this.props; + + if (renderAction) { + return renderAction(); + } if (!action) { return null; diff --git a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss index af91d2b3..e50a49cd 100644 --- a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss +++ b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.scss @@ -26,4 +26,8 @@ grid-area: title; margin: 0; } + + &__custom-action { + margin-top: 20px; + } } diff --git a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.tsx b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.tsx index a3a6e116..697c799b 100644 --- a/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.tsx +++ b/src/components/PlaceholderContainer/__stories__/PlaceholderContainerShowcase.tsx @@ -1,5 +1,7 @@ import React from 'react'; import block from 'bem-cn-lite'; +import {ChevronDown} from '@gravity-ui/icons'; +import {Button, DropdownMenu, Icon} from '@gravity-ui/uikit'; import {PlaceholderContainer, PlaceholderContainerProps} from '../index'; import './PlaceholderContainerShowcase.scss'; import {Action} from '../PlaceholderContainerAction'; @@ -30,6 +32,27 @@ const ContentComponentTest = () => { ); }; +const ActionComponentTest = () => { + return ( +
+ {}}, + {text: 'text 2', action: () => {}}, + ]} + onSwitcherClick={(e) => e?.stopPropagation()} + switcher={ + + } + /> +
+ ); +}; + const actionMainProps: Action = { text: 'Main button', view: 'normal', @@ -65,6 +88,11 @@ const placeholderContainerCustomRenderedProps: PlaceholderContainerProps = { renderContent: () => , }; +const placeholderContainerCustomActionProps: PlaceholderContainerProps = { + ...placeholderContainerProps, + renderAction: () => , +}; + const descriptionProps = { description: 'Some long descriptionProps text that can contain of long long very long text etc. It can be repeated like this. Some long descriptionProps text that can contain of long long very long text etc.', @@ -178,6 +206,16 @@ export const PlaceholderContainerShowcase: React.FC = () => { title="Size s" /> +
+

Custom action:

+ +
); diff --git a/src/components/PlaceholderContainer/types.ts b/src/components/PlaceholderContainer/types.ts index b1dcdf01..fb761e2e 100644 --- a/src/components/PlaceholderContainer/types.ts +++ b/src/components/PlaceholderContainer/types.ts @@ -16,6 +16,7 @@ interface PlaceholderContainerGeneralProps { description?: React.ReactNode; renderContent?: () => React.ReactNode; action?: Action | Action[]; + renderAction?: () => React.ReactNode; className?: string; image: PlaceholderContainerImageNodeProps | PlaceholderContainerImageSettingsProps; }