feat(UIKIT-375,NewDataGrid): Реализована блокировка строки при выполн…

…ении действий (#1100)

Co-authored-by: ooops_o_O <[email protected]>

.cspell-ignore

@@ -88,6 +88,7 @@ mobx
 monokai
 navpanes
 nextjs
+newactioncell
 newdatagrid
 newdatagridinfinite
 noopener

packages/components/src/ActionCell/ActionCell.stories.tsx

@@ -12,6 +12,10 @@ import { type DataGridColumns, NewDataGrid } from '../NewDataGrid';
 import { ActionCell, type Actions } from './ActionCell';
 
 /**
+ * **❗️❗️❗️ Компонент устарел и больше не будет поддерживаться.**
+ * **Используйте [NewActionCell](/docs/components-newactioncell--docs)
+ * Причина отказа от поддержки: ActionCell не работает с контекстом NewDataGrid, и не позволяет
+ * управлять состояниями строки при взаимодействии с действиями
  * ### [Figma]()
  * ### [Guide]()
  */
@@ -203,13 +207,13 @@ export const BlockingOperations = () => {
   }, [deleteLoading, saveLoading]);
 
   const FAKE_ACTIONS: Actions<DataTypeActions> = {
-    isBlockingOperation: true,
     main: [
       {
         icon: <BinOutlineMd />,
         name: 'Удалить',
         onClick: () => setDeleteLoading((prevState) => !prevState),
         loading: deleteLoading,
+        isBlockingOperation: true,
       },
       {
         icon: <SaveOutlineMd />,

packages/components/src/ActionCell/ActionCell.test.tsx

@@ -116,12 +116,12 @@ describe('ActionCell', () => {
 
   it('Кнопки заблокированы, при isBlockingOperation=true и loading=true', async () => {
     const fakeAction: Actions<DataTypeActions> = {
-      isBlockingOperation: true,
       main: [
         {
           icon: <svg />,
           name: 'Удалить',
           loading: true,
+          isBlockingOperation: true,
         },
       ],
       secondary: [

packages/components/src/ActionCell/ActionCell.tsx

@@ -15,10 +15,6 @@ export type Actions<T> = {
    * Второстепенные действия
    */
   secondary?: SecondaryActionKind<T>[];
-  /**
-   * Если true, блокирует взаимодействие с actions, если одна из них имеет состояние loading
-   */
-  isBlockingOperation?: boolean;
 };
 
 export type ActionsCellProps<T> = {
@@ -41,6 +37,11 @@ const TOOLTIP_PLACEMENT: Record<string, TooltipProps['placement']> = {
   secondaryAction: 'left',
 };
 
+/**
+ * @deprecated
+ * Используйте NewActionCell. Причина отказа от поддержки: ActionCell не работает с контекстом NewDataGrid, и не позволяет
+ * управлять состояниями строки при взаимодействии с действиями
+ */
 export const ActionCell = <T,>(props: ActionsCellProps<T>) => {
   const {
     isSecondaryActionsAvailable,

packages/components/src/ActionCell/types.ts

@@ -7,7 +7,7 @@ import type { IconButtonProps } from '../IconButton';
 export type SecondaryActionKind<T> = MenuItemProps &
   SingleAction<T> & {
     /**
-     * Причина дизейбла
+     * Причина блокировки
      */
     disabledReason?: TooltipProps['title'];
   };
@@ -17,6 +17,7 @@ export type NestedAction<T> = MenuItemProps & {
    * Обработчик действия
    */
   onClick?: (row: T) => void;
+
   /**
    * Название действия
    */
@@ -25,40 +26,52 @@ export type NestedAction<T> = MenuItemProps & {
 
 export type SingleAction<T> = {
   /**
-   * Причина дизейбла
+   * Причина блокировки
    */
   disabledReason?: TooltipProps['title'];
+
   /**
    * Иконка действия
    */
   icon?: ReactNode;
+
   /**
    * Обработчик действия
    */
   onClick?: (row: T) => void;
+
   /**
    * Название действия
    */
   name: string;
+
   /**
    * Флаг показа выпадающего списка при клике
    */
   nested?: false;
+
+  /**
+   * Если true, блокирует взаимодействие с actions
+   */
+  isBlockingOperation?: boolean;
 };
 
 export type MultipleAction<T> = MenuItemProps & {
   /**
    * Иконка действия
    */
   icon: ReactNode;
+
   /**
    * Список действий для выпадающего списка
    */
   actions: Array<NestedAction<T>>;
+
   /**
    * Флаг показа выпадающего списка при клике
    */
   nested: true;
+
   /**
    * Название действия
    */

packages/components/src/ActionCell/useLogic/useLogic.ts

@@ -9,14 +9,14 @@ export const useLogic = <TRowData>({
   actions,
   row,
 }: UseLogicParams<TRowData>) => {
-  const { main, secondary, isBlockingOperation = false } = actions;
+  const { main, secondary } = actions;
 
-  const isLoading = main.some((action) => {
+  const isDisabledAction = main.some((action) => {
     if ('actions' in action) {
       return false;
     }
 
-    return action?.loading;
+    return action?.isBlockingOperation && action?.loading;
   });
 
   const handleActionClick = useCallback(
@@ -37,8 +37,6 @@ export const useLogic = <TRowData>({
 
   const isSecondaryActionsAvailable = secondary && secondary.length >= 1;
 
-  const isDisabledAction = isLoading && isBlockingOperation;
-
   return {
     isSecondaryActionsAvailable,
     handleActionClick,

packages/components/src/NewActionCell/MainAction/MainAction.tsx

@@ -0,0 +1,95 @@
+import type { ActionCellHandler, MainActionKind } from '../types';
+import { Tooltip, type TooltipProps } from '../../Tooltip';
+import { IconDropdownButton } from '../../IconDropdownButton';
+import { MenuItem } from '../../MenuItem';
+import { IconButton } from '../../IconButton';
+
+type MainActionProps<TAction> = {
+  /**
+   *  Основные действия
+   */
+  action: MainActionKind<TAction>;
+  /**
+   *  Обработчик клика на действие
+   */
+  onActionClick: ActionCellHandler<TAction>;
+  /**
+   *  Если true, action не доступен
+   */
+  isDisabled?: boolean;
+  /**
+   *  Положение тултипа
+   */
+  tooltipPlacement?: TooltipProps['placement'];
+};
+
+export const MainAction = <TAction,>({
+  action,
+  onActionClick,
+  isDisabled,
+  tooltipPlacement,
+}: MainActionProps<TAction>) => {
+  if ('actions' in action) {
+    const { disabled, icon, name, disabledReason, actions } = action;
+
+    return (
+      <Tooltip
+        key={name}
+        title={disabledReason || name}
+        withoutContainer={!disabled}
+        placement={tooltipPlacement}
+      >
+        <IconDropdownButton
+          icon={icon}
+          variant="text"
+          disabled={isDisabled || disabled}
+        >
+          {actions.map(
+            ({ name: nestedActionName, onClick: onClickNested, ...props }) => (
+              <MenuItem
+                {...props}
+                key={nestedActionName}
+                onClick={onActionClick(onClickNested)}
+              >
+                {nestedActionName}
+              </MenuItem>
+            ),
+          )}
+        </IconDropdownButton>
+      </Tooltip>
+    );
+  }
+
+  const {
+    onClick,
+    name,
+    icon,
+    disabledReason,
+    disabled,
+    loading,
+    isBlockingOperation,
+    loadingNote,
+    ...actions
+  } = action;
+
+  const title = !loading && (disabledReason || name);
+
+  return (
+    <Tooltip
+      key={name}
+      title={title}
+      withoutContainer={!disabled}
+      placement={tooltipPlacement}
+    >
+      <IconButton
+        disabled={isDisabled || disabled}
+        loading={loading}
+        {...actions}
+        variant="text"
+        onClick={onActionClick(onClick)}
+      >
+        {icon}
+      </IconButton>
+    </Tooltip>
+  );
+};

packages/components/src/NewActionCell/MainAction/index.ts

@@ -0,0 +1 @@
+export * from './MainAction';