@servicetitan/mpa-components 1.1.0 → 1.1.1

package/src/components/campaign-actions/actions-button/actions-button.tsx

@@ -0,0 +1,76 @@
+import { Card, Popover, Icon } from '@servicetitan/design-system';
+import { FC, useState, useRef, useEffect, ReactNode } from 'react';
+
+import * as Styles from './actions-button.module.less';
+
+export const ActionsButton: FC<{
+    children: ReactNode;
+}> = ({ children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapElem = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClick = (event: MouseEvent) => {
+            if (!wrapElem.current) {
+                return;
+            }
+
+            const isClickedInside = wrapElem.current.contains(event.target as Node);
+
+            if (!isClickedInside) {
+                close();
+            }
+        };
+
+        window.addEventListener('click', handleClick);
+
+        return () => {
+            window.removeEventListener('click', handleClick);
+        };
+    }, []);
+
+    const toggle = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const close = () => {
+        setIsOpen(false);
+    };
+
+    return (
+        <div
+            ref={wrapElem}
+            className="qa-actions-button d-ib"
+            onClick={e => {
+                e.stopPropagation();
+            }}
+        >
+            <Popover
+                className={Styles.popover}
+                width="xs"
+                open={isOpen}
+                direction="bl"
+                trigger={
+                    <Card
+                        raised
+                        sharp
+                        padding="none"
+                        active={isOpen}
+                        onClick={toggle}
+                        className="qa-actions-button-menu-button"
+                    >
+                        <Card.Section className="p-half-i">
+                            <Icon
+                                name="more_vert"
+                                size="22px"
+                                className={isOpen ? 'c-blue-400' : ''}
+                            />
+                        </Card.Section>
+                    </Card>
+                }
+            >
+                {children}
+            </Popover>
+        </div>
+    );
+};

package/src/components/campaign-actions/actions-button/campaign-actions.stories.tsx

@@ -0,0 +1,19 @@
+import { CampaignActions as Component } from './campaign-actions';
+
+export function CampaignActions() {
+    return (
+        <Component
+            onClickEdit={() => {}}
+            onClickStop={() => {}}
+            onClickClone={() => {}}
+            onClickArchive={() => {}}
+            onClickUnarchive={() => {}}
+        />
+    );
+}
+
+export default {
+    title: 'MRK Components/CampaignActions',
+    component: CampaignActions,
+    parameters: {},
+};

package/src/components/campaign-actions/actions-button/campaign-actions.tsx

@@ -0,0 +1,77 @@
+import { FC } from 'react';
+import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { Confirm } from '@servicetitan/confirm';
+import { ActionButtonArchive } from '../action-button/action-button-archive';
+import { ActionButtonUnarchive } from '../action-button/action-button-unarchive';
+import { ActionsButton } from './actions-button';
+import { ActionButtonClone } from '../action-button/action-button-clone';
+import { ActionButtonEdit } from '../action-button/action-button-edit';
+
+interface CampaignActionsProps {
+    onClickEdit?(): void;
+    onClickStop?(): void;
+    onClickClone?(): void;
+    onClickArchive?(): void;
+    onClickUnarchive?(): void;
+}
+
+export const CampaignActions: FC<CampaignActionsProps> = ({
+    onClickEdit,
+    onClickStop,
+    onClickClone,
+    onClickArchive,
+    onClickUnarchive,
+}) => {
+    const stopAction = (handleClick: () => void) => (
+        <Button outline onClick={handleClick} small negative className="qa-campaign-actions-stop">
+            Stop
+        </Button>
+    );
+
+    const archiveAction = (handleClick: () => void) => (
+        <ActionButtonArchive onClick={handleClick} />
+    );
+
+    const unarchiveAction = (handleClick: () => void) => (
+        <ActionButtonUnarchive onClick={handleClick} />
+    );
+
+    return (
+        <ButtonGroup>
+            {onClickStop && (
+                <Confirm
+                    onConfirm={onClickStop}
+                    title="Confirm stop"
+                    message="Are you sure you want to stop this campaign?"
+                    negative
+                >
+                    {stopAction}
+                </Confirm>
+            )}
+            <ActionsButton>
+                {onClickClone && <ActionButtonClone onClick={onClickClone} />}
+                {onClickArchive && (
+                    <Confirm
+                        onConfirm={onClickArchive}
+                        title="Confirm archive"
+                        message="Are you sure you want to archive this campaign?"
+                        negative={false}
+                    >
+                        {archiveAction}
+                    </Confirm>
+                )}
+                {onClickUnarchive && (
+                    <Confirm
+                        onConfirm={onClickUnarchive}
+                        title="Confirm unarchive"
+                        message="Are you sure you want to unarchive this campaign?"
+                        negative={false}
+                    >
+                        {unarchiveAction}
+                    </Confirm>
+                )}
+                {onClickEdit && <ActionButtonEdit onClick={onClickEdit} />}
+            </ActionsButton>
+        </ButtonGroup>
+    );
+};

package/src/components/campaign-actions/index.ts

@@ -0,0 +1 @@
+export * from './actions-button/campaign-actions';

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components/settings';
+export * from './components/campaign-actions';
 
 export * from './utils/helpers';