@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha71

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,15 +1,16 @@
 import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   applyAction,
+  getTestId,
   indexMap,
   isArrayNotEmpty,
   isEmpty,
   isNotEmpty,
+  isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useMergedRefs, useTweakStyles } from '../../hooks';
+import { useIntersectionRef, useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow, IFlexibleTableRowProps } from './components';
@@ -81,7 +82,7 @@ export function FlexibleTable<
   isFirstColumnSticky = false,
   isHorizontallyScrollable = false,
   isRowFocusable = false,
-  infinityScrollConfig,
+  infinityScrollConfig: infinityScrollConfigDeprecated,
   renderMode = 'table',
   refForScroll,
   nothingFoundContent,
@@ -93,7 +94,7 @@ export function FlexibleTable<
   isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakTableRowStyles = useTweakStyles({
     tweakStyles,
@@ -101,13 +102,10 @@ export function FlexibleTable<
     currentComponentName: 'FlexibleTable',
   });
 
-  const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const columns = useMemo(() => enabledColumns ?? Object.keys(config), [enabledColumns, config]);
 
-  const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
-
   const getTableRowProps = (
     item: Row,
     index: number,
@@ -148,12 +146,6 @@ export function FlexibleTable<
     [getDataScrollAttributeSetter],
   );
 
-  const shouldShowNothingFound =
-    !isArrayNotEmpty(content) &&
-    nothingFoundContent !== undefined &&
-    !infinityScrollConfig?.isLoading &&
-    (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage);
-
   const ref = useMergedRefs([
     refForScroll,
     scrollRef,
@@ -161,37 +153,25 @@ export function FlexibleTable<
     setIsScrolledAttribute,
   ]);
 
-  const initIntersectionObserver = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (
-        !hasInfiniteScroll ||
-        infinityScrollConfig.isLoading ||
-        infinityScrollConfig.activePage >= infinityScrollConfig.totalPages
-      ) {
-        return;
-      }
-
-      if (observer.current) {
-        observer.current.disconnect();
-      }
-
-      observer.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          infinityScrollConfig.onInfinityScroll(infinityScrollConfig.activePage + 1);
-        }
-      });
+  const infinityScrollConfig = infinityScrollConfigDeprecated && {
+    isLoading: infinityScrollConfigDeprecated.isLoading,
+    onInfinityScroll: () =>
+      infinityScrollConfigDeprecated.onInfinityScroll(
+        (infinityScrollConfigDeprecated.activePage ?? 0) + 1,
+      ),
+    isEnabled:
+      infinityScrollConfigDeprecated.isEnabled ?? !infinityScrollConfigDeprecated.isLastPage,
+  };
+  const intersectionRef = useIntersectionRef({
+    isDisabled: !infinityScrollConfig?.isEnabled || infinityScrollConfig.isLoading,
+    onIntersection: infinityScrollConfig?.onInfinityScroll,
+  });
 
-      if (node) {
-        observer.current.observe(node);
-      }
-    },
-    [
-      hasInfiniteScroll,
-      infinityScrollConfig?.activePage,
-      infinityScrollConfig?.totalPages,
-      infinityScrollConfig?.onInfinityScroll,
-    ],
-  );
+  const shouldShowNothingFound =
+    isReactNodeNotEmpty(nothingFoundContent) &&
+    !isArrayNotEmpty(content) &&
+    !infinityScrollConfig?.isLoading &&
+    !infinityScrollConfig?.isEnabled;
 
   useEffect(() => {
     const scrollContainer = scrollRef.current;
@@ -221,12 +201,11 @@ export function FlexibleTable<
   const Table = TableRenders[renderMode];
 
   return (
-    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
-      <Table.Root
-        className={classes.root}
-        {...addDataTestId(testId)}
-        {...addDataAttributes({ ...data, isLoading })}
-      >
+    <div
+      ref={ref}
+      className={clsx(classes.flexibleTableWrapper, { [classes.scroll]: isHorizontallyScrollable })}
+    >
+      <Table.Root className={classes.root} {...addDataAttributes({ ...data, isLoading }, testId)}>
         {shouldRenderHeader && (
           <Table.Head className={classes.head}>
             <Table.Row className={classes.headerRow}>
@@ -291,11 +270,11 @@ export function FlexibleTable<
                 />
               ))}
 
-              {hasInfiniteScroll && !infinityScrollConfig.isLastPage && (
+              {infinityScrollConfig?.isEnabled && (
                 <Table.Row className={classes.loaderRow}>
                   <Table.Cell className={classes.loaderCell} colSpan={columns.length}>
-                    <div ref={initIntersectionObserver} className={classes.loader}>
-                      <ThemedPreloader type="dots" />
+                    <div ref={intersectionRef} className={classes.loader}>
+                      <ThemedPreloader type="dots" testId={getTestId(testId, 'loader')} />
                     </div>
                   </Table.Cell>
                 </Table.Row>

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -25,6 +25,7 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
     },
   },
 
+  /** @deprecated удалить вместе с isFirstColumnSticky */
   second: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx

@@ -1,7 +1,11 @@
+import { ReactNode, useCallback } from 'react';
 import clsx from 'clsx';
-import { applyAction, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { ICommonProps } from '../../../../types';
+import {
+  applyAction,
+  isNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
+import { ITweakStylesProps } from '../../../../types';
 import { Skeleton } from '../../../Skeleton';
 import { TableRenders } from '../../constants';
 import { formatCellContent } from '../../helpers';
@@ -17,17 +21,14 @@ import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles'
 export interface IFlexibleTableCellProps<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
-> extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'>,
+> extends ITweakStylesProps<IFlexibleTableCellStyles>,
     Pick<
       IValueComponentProps<Row, unknown>,
-      | 'isFocusedRow'
-      | 'isActiveRow'
-      | 'isNestedComponentExpanded'
-      | 'isRowNestedComponentExpanded'
-      | 'onSetNestedComponent'
+      'isFocusedRow' | 'isActiveRow' | 'isNestedComponentExpanded' | 'isRowNestedComponentExpanded'
     > {
   row: Row;
   columnName: keyof Row;
+  updateNestedComponent: (component: ReactNode, cellKey: keyof Row) => void;
   config: IFlexibleTableConfigType<Row, HeaderContent>;
   renderMode: IFlexibleTableRenderMode;
   isSecond?: boolean;
@@ -46,10 +47,11 @@ export function FlexibleTableCell<
   isSecond,
   isSticky: isOldSticky,
   isLoading,
+  updateNestedComponent,
   tweakStyles,
   ...valueComponentProps
 }: IFlexibleTableCellProps<Row, HeaderContent>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const value = row[columnName];
 
@@ -73,6 +75,10 @@ export function FlexibleTableCell<
 
   const cellComponentProps: IValueComponentProps<Row, Row[keyof Row]> = {
     ...valueComponentProps,
+    onSetNestedComponent: useCallback(
+      (node) => updateNestedComponent(node, columnName),
+      [columnName, updateNestedComponent],
+    ),
     value,
     row,
   };

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,7 +1,11 @@
-import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
+import { ReactNode, useState, MouseEvent, RefCallback, useCallback } from 'react';
 import clsx from 'clsx';
-import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  isEmpty,
+  isNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
+import { genericMemo } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { IDataAttributes, ITweakStylesProps } from '../../../../types';
 import { TableRenders } from '../../constants';
@@ -44,7 +48,7 @@ export interface IFlexibleTableRowProps<
   onRowClick?: (id: Row[UniqueField]) => void;
 }
 
-function FlexibleTableRowInner<
+export const FlexibleTableRow = genericMemo(function FlexibleTableRow<
   Row extends ITableRow,
   HeaderContent extends IHeaderContent<Row>,
   UniqueField extends keyof Row,
@@ -66,7 +70,7 @@ function FlexibleTableRowInner<
   onRowHover,
   onRowClick,
 }: IFlexibleTableRowProps<Row, HeaderContent, UniqueField>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakTableCellStyles = useTweakStyles({
     tweakStyles,
@@ -75,7 +79,7 @@ function FlexibleTableRowInner<
   });
 
   const [isFocused, setFocused] = useState(false);
-  const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
+  const [nestedComponent, setNestedComponent] = useState<INestedComponent<keyof Row>>(() => ({
     isOpen: isExpandableRowComponentInitiallyOpen,
   }));
 
@@ -111,13 +115,13 @@ function FlexibleTableRowInner<
     setNestedComponent({ isOpen: false });
   };
 
-  const updateNestedComponent = (component: ReactNode, cellKey: string) => {
+  const updateNestedComponent = useCallback((component: ReactNode, cellKey: keyof Row) => {
     if (isEmpty(component)) {
       closeNestedComponent();
     } else {
       setNestedComponent({ isOpen: true, component, cellKey });
     }
-  };
+  }, []);
 
   const handleRowClick = () => {
     if (isNotEmpty(uniqueField)) {
@@ -174,7 +178,7 @@ function FlexibleTableRowInner<
             isRowNestedComponentExpanded={
               isNestedComponentExpanded && isEmpty(nestedComponentCellKey)
             }
-            onSetNestedComponent={(component) => updateNestedComponent(component, key)}
+            updateNestedComponent={updateNestedComponent}
           />
         ))}
       </Table.Row>
@@ -189,6 +193,4 @@ function FlexibleTableRowInner<
       )}
     </>
   );
-}
-
-export const FlexibleTableRow = memo(FlexibleTableRowInner) as typeof FlexibleTableRowInner;
+});

package/src/components/FlexibleTable/types.ts

@@ -36,16 +36,16 @@ export interface IFlexibleTableRowConfig<
   title?: IRenderNode<ITitleComponentProps<HeaderContent[Key]>>;
   component?: IRenderNode<IValueComponentProps<Values, NonNullable<Values[Key]>>>;
   dateFormat?: string;
-  minWidth?: string | number;
-  width?: string | number;
-  maxWidth?: string | number;
+  minWidth?: CSSProperties['minWidth'];
+  width?: CSSProperties['width'];
+  maxWidth?: CSSProperties['maxWidth'];
   /** @default 'left' */
   titleAlign?: CSSProperties['textAlign'];
   cellAlign?: CSSProperties['textAlign'];
   cellVerticalAlign?: CSSProperties['verticalAlign'];
   position?: CSSProperties['position'];
-  right?: number;
-  left?: number;
+  right?: CSSProperties['right'];
+  left?: CSSProperties['left'];
   shouldRenderDataId?: boolean;
   /**
    * Проверка, нужно ли отрисовать component
@@ -64,15 +64,23 @@ export type IFlexibleTableConfigType<
 };
 
 export interface IInfinityScrollConfig {
-  activePage: number;
-  totalPages: number;
+  isEnabled?: boolean;
   isLoading: boolean;
-  isLastPage: boolean;
-  onInfinityScroll: (skip: number) => void;
+  onInfinityScroll: {
+    (_: never): void;
+    /** @deprecated use activePage directly */
+    (skip: number): void; // eslint-disable-line @typescript-eslint/unified-signatures
+  };
+  /** @deprecated use activePage in onInfinityScroll  */
+  activePage?: number;
+  /** @deprecated use isEnabled */
+  isLastPage?: boolean;
+  /** @deprecated use isEnabled */
+  totalPages?: number;
 }
 
-export interface INestedComponent {
+export interface INestedComponent<T extends PropertyKey = string> {
   isOpen: boolean;
   component?: ReactNode;
-  cellKey?: string;
+  cellKey?: T;
 }

package/src/components/FloatDocActions/FloatDocActions.stories.tsx

@@ -0,0 +1,111 @@
+import { FC, useState } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { Button } from '../Button';
+import { Checkbox, ICheckboxProps } from '../Checkbox';
+import { NewMoreMenu } from '../NewMoreMenu';
+import { TextButton } from '../TextButton';
+import {
+  FloatDocActions as FloatDocActionsComponent,
+  IFloatDocActionsProps,
+} from './FloatDocActions';
+import { DOC_ACTIONS_VIEWS } from './components';
+
+const DATA_LENGTH = 300;
+
+const Story: FC<IFloatDocActionsProps> = (args) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [state, setState] = useState<Set<number>>(new Set());
+
+  const handleToggle = () => {
+    setIsOpen((prevState) => !prevState);
+  };
+
+  const handleSelectRow: ICheckboxProps<number>['onSelect'] = ({ value }) => {
+    if (isNotEmpty(value)) {
+      setState((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(value)) {
+          newSet.delete(value);
+        } else {
+          newSet.add(value);
+        }
+        return newSet;
+      });
+    }
+  };
+
+  const handleSelectAll: ICheckboxProps<never>['onSelect'] = ({ isSelected }) => {
+    console.log('isSelected:', isSelected);
+
+    setState(
+      isSelected ? new Set<number>(Array.from({ length: DATA_LENGTH }, (_, i) => i)) : new Set(),
+    );
+  };
+
+  const isAllRowsSelected = state.size === DATA_LENGTH;
+  const title = args.title + ': ' + state.size;
+
+  return (
+    <div style={{ display: 'flex', gap: '50px' }}>
+      <div style={{ position: 'sticky', top: '50px', height: '50px' }}>
+        <Button onClick={handleToggle}>Toggle</Button>
+      </div>
+      <div style={{ width: '1000px' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          {Array.from({ length: DATA_LENGTH }, (_, index) => (
+            <tr key={index} style={{ border: '1px solid skyblue' }}>
+              <td style={{ padding: '5px', display: 'flex', gap: '12px' }}>
+                {isOpen && (
+                  <Checkbox value={index} isChecked={state.has(index)} onSelect={handleSelectRow} />
+                )}
+                <div>Строка {index + 1}</div>
+              </td>
+            </tr>
+          ))}
+        </table>
+        <div style={{ position: 'sticky', bottom: '12px', left: '8px', right: '18px' }}>
+          <FloatDocActionsComponent
+            {...args}
+            title={title}
+            isOpen={isOpen}
+            isChecked={isAllRowsSelected}
+            isSemiChecked={!isAllRowsSelected && state.size !== 0}
+            onSelect={handleSelectAll}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <TextButton icon="trash-can" view="custom">
+                Удалить
+              </TextButton>
+              <TextButton icon="calendar">Редактировать</TextButton>
+              <Button view="secondary">Отказать</Button>
+              <Button>Одобрить</Button>
+              <NewMoreMenu items={[]} />
+            </div>
+          </FloatDocActionsComponent>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof Story> = {
+  title: 'Table/FloatDocActions',
+  component: Story,
+  args: {
+    title: 'Выбрано',
+    view: 'neutral',
+  },
+  argTypes: {
+    view: { options: DOC_ACTIONS_VIEWS, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['actions']),
+    },
+  },
+};
+
+export default meta;
+export const Default = {};

package/src/components/FloatDocActions/FloatDocActions.styles.ts

@@ -0,0 +1,12 @@
+import { createUseStyles } from 'react-jss';
+import { animations, ITweakStyles } from '../../theme';
+import { IDocActionsStyles } from './components';
+
+export const useStyles = createUseStyles({
+  ...animations.slideUp,
+});
+
+export type IFloatDocActionsStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakDocActions: IDocActionsStyles }
+>;

package/src/components/FloatDocActions/FloatDocActions.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { DocActions, IDocActionsProps } from './components';
+import { DEFAULT_TIMEOUT } from './constants';
+import { useStyles } from './FloatDocActions.styles';
+
+export interface IFloatDocActionsProps extends IDocActionsProps {
+  isOpen: boolean;
+}
+
+export const FloatDocActions: FC<IFloatDocActionsProps> = ({
+  isOpen,
+  children,
+  ...docActionsProps
+}) => {
+  const classes = useStyles();
+
+  return (
+    <CSSTransition
+      in={isOpen}
+      timeout={DEFAULT_TIMEOUT}
+      mountOnEnter
+      unmountOnExit
+      classNames={{
+        enter: classes['slide-up-enter'],
+        enterActive: classes['slide-up-enter-active'],
+        exit: classes['slide-up-exit'],
+        exitActive: classes['slide-up-exit-active'],
+      }}
+    >
+      <DocActions {...docActionsProps}>{children}</DocActions>
+    </CSSTransition>
+  );
+};

package/src/components/FloatDocActions/components/DocActions/DocActions.styles.ts

@@ -0,0 +1,29 @@
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+import { ICheckboxStyles } from '../../../Checkbox';
+
+export const useStyles = createThemedStyles('DocActions', {
+  docActions: {
+    display: 'grid',
+    alignItems: 'center',
+    gridTemplateColumns: 'max-content 1fr',
+  },
+
+  neutral: {},
+
+  inverse: {},
+
+  counterWrapper: {},
+
+  title: {},
+
+  actionsWrapper: {
+    justifySelf: 'end',
+  },
+});
+
+export type IDocActionsStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakCheckbox: ICheckboxStyles;
+  }
+>;

package/src/components/FloatDocActions/components/DocActions/DocActions.tsx

@@ -0,0 +1,42 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTweakStyles } from '../../../../hooks';
+import { IReplaceTweakStylesProps } from '../../../../types';
+import { Checkbox, ICheckboxProps } from '../../../Checkbox';
+import { IDocActionsView } from './types';
+import { IDocActionsStyles, useStyles } from './DocActions.styles';
+
+export interface IDocActionsProps
+  extends IReplaceTweakStylesProps<ICheckboxProps<never>, IDocActionsStyles> {
+  title: string;
+  /** @default 'neutral' */
+  view?: IDocActionsView;
+  children: ReactNode;
+}
+
+export const DocActions: FC<IDocActionsProps> = ({
+  title,
+  view = 'neutral',
+  children,
+  tweakStyles,
+  ...checkBoxProps
+}) => {
+  const classes = useStyles({ tweakStyles });
+
+  const tweakCheckboxStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCheckbox',
+    currentComponentName: 'DocActions',
+  });
+
+  return (
+    <div className={clsx(classes.docActions, classes[view])}>
+      <div className={classes.counterWrapper}>
+        <Checkbox tweakStyles={tweakCheckboxStyles} {...checkBoxProps}>
+          <span className={classes.title}>{title}</span>
+        </Checkbox>
+      </div>
+      <div className={classes.actionsWrapper}>{children}</div>
+    </div>
+  );
+};

package/src/components/FloatDocActions/components/DocActions/constants.ts

@@ -0,0 +1 @@
+export const DOC_ACTIONS_VIEWS = ['neutral', 'inverse'] as const;

package/src/components/FloatDocActions/components/DocActions/index.ts

@@ -0,0 +1,4 @@
+export * from './DocActions';
+export * from './types';
+export * from './constants';
+export type { IDocActionsStyles } from './DocActions.styles';

package/src/components/FloatDocActions/components/DocActions/types.ts

@@ -0,0 +1,3 @@
+import { DOC_ACTIONS_VIEWS } from './constants';
+
+export type IDocActionsView = (typeof DOC_ACTIONS_VIEWS)[number];

package/src/components/FloatDocActions/components/index.ts

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

package/src/components/FloatDocActions/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_TIMEOUT = 150;

package/src/components/FloatDocActions/index.ts

@@ -0,0 +1,3 @@
+export * from './FloatDocActions';
+export * from './components';
+export type { IFloatDocActionsStyles } from './FloatDocActions.styles';