@true-engineering/true-react-common-ui-kit 3.0.0-alpha.16 → 3.0.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.0-alpha.16",
+  "version": "3.0.0-alpha.18",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -336,6 +336,7 @@ export const Default = Template.bind({});
 Default.args = {
   isHorizontallyScrollable: true,
   isFirstColumnSticky: true,
+  isLoading: false,
 };
 
 Default.parameters = {

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

@@ -90,6 +90,11 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
+
+  skeleton: {
+    height: 21,
+    padding: [14, 7],
+  },
 });
 
 export type IFlexibleTableStyles = ITweakStyles<

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -1,9 +1,16 @@
-import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  addDataTestId,
+  indexMap,
+  isArrayNotEmpty,
+  isEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
+import { Skeleton } from '../Skeleton';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow } from './components';
 import { hasHorizontalScrollBar } from './helpers';
@@ -26,6 +33,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
    */
   uniqueField?: keyof Values;
   onHeadClick?: (column: keyof Values) => void;
+  isLoading?: boolean;
   // TODO: Заменить string на Generic Values[uniqueField]
   onRowClick?: (id: string) => void;
   onRowHover?: (id?: string) => void;
@@ -47,6 +55,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
   isFirstColumnSticky,
   infinityScrollConfig,
   uniqueField,
+  isLoading,
   onHeadClick,
   onRowHover,
   onRowClick,
@@ -71,6 +80,11 @@ export function FlexibleTable<Values extends Record<string, any>>({
   const scrollRef = useRef<HTMLDivElement>(null);
   const ref = refForScroll ?? scrollRef;
 
+  const showedColumns = useMemo(
+    () => enabledColumns ?? Object.keys(config),
+    [enabledColumns, config],
+  );
+
   const initIntersectionObserver = useCallback(
     (node: HTMLDivElement) => {
       if (infinityScrollConfig) {
@@ -140,7 +154,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
       <table className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
         <thead>
           <tr className={classes.headerRow}>
-            {(enabledColumns || Object.keys(content[0])).map((key, idx) => {
+            {showedColumns.map((key, i) => {
               const itemConfig = config?.[key];
 
               let titleContent = itemConfig?.title ?? '';
@@ -153,8 +167,8 @@ export function FlexibleTable<Values extends Record<string, any>>({
               return (
                 <th
                   className={clsx(classes.header, {
-                    [classes.headerSticky]: isFirstColumnSticky && idx === 0,
-                    [classes.headerSecond]: isFirstColumnSticky && idx === 1,
+                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
+                    [classes.headerSecond]: isFirstColumnSticky && i === 1,
                   })}
                   style={{
                     minWidth: itemConfig?.minWidth,
@@ -172,42 +186,54 @@ export function FlexibleTable<Values extends Record<string, any>>({
           </tr>
         </thead>
         <tbody>
-          {content.length === 0 &&
+          {!isArrayNotEmpty(content) &&
             nothingFoundContent !== undefined &&
             !infinityScrollConfig?.isLoading &&
             (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage) && (
               <tr>
-                <td colSpan={(enabledColumns || Object.keys(content[0])).length}>
-                  {nothingFoundContent}
-                </td>
+                <td colSpan={showedColumns.length}>{nothingFoundContent}</td>
               </tr>
             )}
 
-          {content.map((item, i) => (
-            <FlexibleTableRow
-              item={item}
-              uniqueField={uniqueField}
-              isActive={activeRows?.includes(i) ?? false}
-              isFirstColumnSticky={isFirstColumnSticky}
-              onRowClick={onRowClick}
-              onRowHover={onRowHover}
-              enabledColumns={enabledColumns}
-              config={config}
-              key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-              rowAttributes={rowAttributes}
-              tweakStyles={tweakTableRowStyles}
-              expandableRowComponent={expandableRowComponent}
-            />
-          ))}
-
-          {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
-            <tr>
-              <td colSpan={(enabledColumns || Object.keys(content[0])).length}>
-                <div ref={initIntersectionObserver} className={classes.loader}>
-                  <ThemedPreloader type="dots" />
-                </div>
-              </td>
-            </tr>
+          {isLoading ? (
+            indexMap(6, (i) => (
+              <tr key={i}>
+                {showedColumns.map((_, j) => (
+                  <td key={j} className={classes.skeleton}>
+                    <Skeleton />
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : (
+            <>
+              {content.map((item, i) => (
+                <FlexibleTableRow
+                  item={item}
+                  uniqueField={uniqueField}
+                  isActive={activeRows?.includes(i) ?? false}
+                  isFirstColumnSticky={isFirstColumnSticky}
+                  onRowClick={onRowClick}
+                  onRowHover={onRowHover}
+                  enabledColumns={enabledColumns}
+                  config={config}
+                  key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
+                  rowAttributes={rowAttributes}
+                  tweakStyles={tweakTableRowStyles}
+                  expandableRowComponent={expandableRowComponent}
+                />
+              ))}
+
+              {infinityScrollConfig !== undefined && !infinityScrollConfig.isLastPage && (
+                <tr>
+                  <td colSpan={showedColumns.length}>
+                    <div ref={initIntersectionObserver} className={classes.loader}>
+                      <ThemedPreloader type="dots" />
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </>
           )}
         </tbody>
       </table>

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

@@ -97,7 +97,7 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
     }
   };
 
-  const items = enabledColumns ?? Object.keys(item);
+  const items = enabledColumns ?? Object.keys(config);
 
   return (
     <>
@@ -121,11 +121,11 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
           isExpandableComponentActive: nestedComponent.isOpen ? true : undefined,
         })}
       >
-        {items.map((key, idx) => (
+        {items.map((key, i) => (
           <FlexibleTableCell
             columnName={key}
-            isSticky={isFirstColumnSticky && idx === 0}
-            isSecond={isFirstColumnSticky && idx === 1}
+            isSticky={isFirstColumnSticky && i === 0}
+            isSecond={isFirstColumnSticky && i === 1}
             key={key as string}
             item={item}
             config={config}

package/src/components/FlexibleTable/types.ts

@@ -23,7 +23,7 @@ export type IFlexibleTableConfigType<Values> = {
   [Key in keyof Values]?: {
     title?: ReactNode;
     titleComponent?: ITitleComponent<unknown>;
-    component?: IValueComponent<NonNullable<Values>, Values[Key]>;
+    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
     dateFormat?: string;
     minWidth?: string | number;
     width?: string | number;

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,19 @@
+import { ComponentStory } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+export default {
+  title: 'Skeleton',
+  component: Skeleton,
+};
+
+const Template: ComponentStory<typeof Skeleton> = (args) => (
+  <div style={{ padding: 32, backgroundColor: '#fff', width: 200 }}>
+    <Skeleton {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  height: '20px',
+};

package/src/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,46 @@
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Skeleton', {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    backgroundColor: rgba(colors.GREY_DISABLED, 0.8),
+    position: 'relative',
+    borderRadius: 4,
+    overflow: 'hidden',
+    '-webkit-mask-image': '-webkit-radial-gradient(white, black)',
+
+    '&::after': {
+      content: '""',
+      animation: '$skeleton 1.6s linear 0.5s infinite',
+      background: `linear-gradient(90deg, transparent, ${rgba(
+        colors.GREY_BACKGROUND,
+        0.65,
+      )}, transparent)`,
+      position: 'absolute',
+      transform: 'translateX(-100%)',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    },
+  },
+
+  '@keyframes skeleton': {
+    '0%': {
+      transform: 'translateX(-100%)',
+    },
+
+    '50%': {
+      transform: 'translateX(100%)',
+    },
+
+    '100%': {
+      transform: 'translateX(100%)',
+    },
+  },
+});
+
+export type ISkeletonStyles = ITweakStyles<typeof useStyles>;

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,12 @@
+import { CSSProperties, FC } from 'react';
+import { ICommonProps } from '../../types';
+import { ISkeletonStyles, useStyles } from './Skeleton.styles';
+
+export interface ISkeletonProps extends Pick<ICommonProps<ISkeletonStyles>, 'tweakStyles'> {
+  height?: CSSProperties['height'];
+}
+
+export const Skeleton: FC<ISkeletonProps> = ({ height, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+  return <div className={classes.root} style={{ height }} />;
+};

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+export type { ISkeletonStyles } from './Skeleton.styles';

package/src/components/index.ts

@@ -34,3 +34,4 @@ export * from './ThemedPreloader';
 export * from './Toaster';
 export * from './Tooltip';
 export * from './ScrollIntoViewIfNeeded';
+export * from './Skeleton';

package/src/theme/types.ts

@@ -52,6 +52,7 @@ import type {
   IFlexibleTableCellStyles,
   IFlexibleTableRowStyles,
   IFilterValueViewStyles,
+  ISkeletonStyles,
 } from '../components';
 
 export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
@@ -108,6 +109,7 @@ export interface IComponentStyles {
   SearchInput: ISearchInputStyles;
   Select: ISelectStyles;
   SelectList: ISelectListStyles;
+  Skeleton: ISkeletonStyles;
   Switch: ISwitchStyles;
   TextArea: ITextAreaStyles;
   TextWithInfo: ITextWithInfoStyles;