feat(PlaceholderContainer): add custom action (#43)

gravity-ui · May 2, 2023 · efb48aa · efb48aa
1 parent a8220de
commit efb48aa
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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 (
+        <div className={b('custom-action')}>
+            <DropdownMenu
+                defaultSwitcherProps={{view: 'flat-secondary'}}
+                items={[
+                    {text: 'text 1', action: () => {}},
+                    {text: 'text 2', action: () => {}},
+                ]}
+                onSwitcherClick={(e) => e?.stopPropagation()}
+                switcher={
+                    <Button>
+                        Text
+                        <Icon data={ChevronDown} size={16} />
+                    </Button>
+                }
+            />
+        </div>
+    );
+};
+
 const actionMainProps: Action = {
     text: 'Main button',
     view: 'normal',
@@ -65,6 +88,11 @@ const placeholderContainerCustomRenderedProps: PlaceholderContainerProps = {
     renderContent: () => <ContentComponentTest />,
 };
 
+const placeholderContainerCustomActionProps: PlaceholderContainerProps = {
+    ...placeholderContainerProps,
+    renderAction: () => <ActionComponentTest />,
+};
+
 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"
                     />
                 </div>
+                <div className={b('section')}>
+                    <h3 className={b('sub-title')}>Custom action:</h3>
+                    <PlaceholderContainer
+                        {...placeholderContainerCustomActionProps}
+                        {...descriptionProps}
+                        direction="row"
+                        size="m"
+                        title="Size m"
+                    />
+                </div>
             </div>
         </div>
     );

diff --git 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;
 }