@axinom/mosaic-ui 0.49.0-rc.0 → 0.49.0-rc.10

package/src/components/PageHeader/PageHeaderBulkActions/PageHeaderBulkActions.tsx

@@ -1,188 +0,0 @@
-import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
-import { noop } from '../../../helpers/utils';
-import { useExpand } from '../../../hooks/useExpand/useExpand';
-import { ConfirmationMode } from '../../ConfirmDialog';
-import { IconName } from '../../Icons';
-import { PageHeaderProps } from '../PageHeader.model';
-import {
-  PageHeaderAction,
-  isPageHeaderJsAction,
-} from '../PageHeaderAction/PageHeaderAction';
-import {
-  PageHeaderActionProps,
-  PageHeaderActionType,
-} from '../PageHeaderAction/PageHeaderAction.model';
-import classes from './PageHeaderBulkActions.scss';
-
-export interface PageHeaderBulkActionsProps
-  extends Pick<
-    PageHeaderProps,
-    'openBulkActionsOnStart' | 'onBulkActionsToggled'
-  > {
-  /** Array of Actions to be rendered (default: []) */
-  actions?: PageHeaderActionProps[];
-  /** Number of available slots actions can use in the PageHeader */
-  availableActionSpace: number;
-  /** Whether or not bulk actions are disabled (default: false)*/
-  bulkActionsDisabled?: boolean;
-  /** CSS Class name for additional styles */
-  className?: string;
-}
-
-/**
- * Used to perform bulk operations from the PageHeader component.
- * @example
- * <PageHeaderBulkActions>
- *   <PageHeaderAction action={action} onBulkActionsToggled={onBulkActionsToggledHandler} />
- * </PageHeaderBulkActions>
- */
-export const PageHeaderBulkActions: React.FC<PageHeaderBulkActionsProps> = ({
-  actions = [],
-  openBulkActionsOnStart = false,
-  onBulkActionsToggled = noop,
-  availableActionSpace = 0,
-  bulkActionsDisabled = false,
-  className = '',
-}) => {
-  const { isExpanded, toggleExpanded, expand } = useExpand();
-  const {
-    isExpanded: isMoreExpanded,
-    expand: moreExpanded,
-    collapse: moreCollapse,
-    toggleExpanded: toggleMoreExpanded,
-  } = useExpand();
-
-  useEffect(() => {
-    if (openBulkActionsOnStart) {
-      expand();
-    }
-  }, [expand, openBulkActionsOnStart]);
-
-  const [isMouseOverMore, setIsMouseOverMore] = useState<boolean>(false);
-  const [isConfirmOpen, setIsConfirmOpen] = useState<Record<string, boolean>>(
-    {},
-  );
-
-  const onConfirmToggled = (
-    isOpen: boolean,
-    data: { id: string; mode: ConfirmationMode },
-  ): void => {
-    setIsConfirmOpen((prevState) => {
-      return { ...prevState, [data.id]: isOpen };
-    });
-  };
-
-  useEffect(() => {
-    const hasConfirm: boolean = Object.values(isConfirmOpen).includes(true);
-
-    // open drop down
-    if (isMouseOverMore) {
-      moreExpanded();
-      // close drop down if no confirmation is active
-    } else if (!isMouseOverMore && !hasConfirm) {
-      moreCollapse();
-      // keep the drop down open if confirmation is active
-    } else if (!isMouseOverMore && hasConfirm) {
-      return;
-    }
-  }, [isConfirmOpen, isMouseOverMore, moreCollapse, moreExpanded]);
-
-  return (
-    <div
-      className={clsx(
-        classes.container,
-        'page-header-bulk-action-container',
-        className,
-      )}
-    >
-      <PageHeaderAction
-        label="Bulk Actions"
-        actionType={
-          isExpanded
-            ? PageHeaderActionType.Active
-            : PageHeaderActionType.Context
-        }
-        icon={IconName.Bulk}
-        onClick={() => {
-          toggleExpanded();
-          onBulkActionsToggled(!isExpanded);
-        }}
-      />
-      {isExpanded &&
-        actions.slice(0, availableActionSpace).map((action, idx) =>
-          isPageHeaderJsAction(action) ? (
-            <PageHeaderAction
-              key={idx}
-              {...action}
-              disabled={bulkActionsDisabled}
-              confirmationConfig={{
-                ...action.confirmationConfig,
-                onConfirmOpen: (isOpen, args) => {
-                  onConfirmToggled(
-                    isOpen,
-                    args as { id: string; mode: ConfirmationMode },
-                  );
-                  action.confirmationConfig?.onConfirmOpen?.(isOpen, args);
-                },
-              }}
-            />
-          ) : (
-            <PageHeaderAction key={idx} {...action} />
-          ),
-        )}
-      {isExpanded && actions.length > availableActionSpace && (
-        <div
-          className={clsx(classes.hasMore)}
-          onMouseEnter={() => setIsMouseOverMore(true)}
-          onMouseLeave={() => setIsMouseOverMore(false)}
-        >
-          <PageHeaderAction
-            label="More"
-            icon={IconName.Ellipsis}
-            actionType={
-              isMoreExpanded
-                ? PageHeaderActionType.Active
-                : PageHeaderActionType.Context
-            }
-            onClick={() => toggleMoreExpanded()}
-          />
-          {isMoreExpanded && (
-            <div className={clsx(classes.dropDownList)}>
-              {actions.slice(availableActionSpace).map((action, idx) =>
-                isPageHeaderJsAction(action) ? (
-                  <PageHeaderAction
-                    key={idx}
-                    {...action}
-                    disabled={bulkActionsDisabled}
-                    onClick={() => {
-                      action.onClick();
-                      moreCollapse();
-                      setIsMouseOverMore(false);
-                    }}
-                    className={clsx(classes.dropDown)}
-                    confirmationConfig={{
-                      ...action.confirmationConfig,
-                      onConfirmOpen: (isOpen, args) => {
-                        onConfirmToggled(
-                          isOpen,
-                          args as { id: string; mode: ConfirmationMode },
-                        );
-                        action.confirmationConfig?.onConfirmOpen?.(
-                          isOpen,
-                          args,
-                        );
-                      },
-                    }}
-                  />
-                ) : (
-                  <PageHeaderAction key={idx} {...action} />
-                ),
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};