@true-engineering/true-react-common-ui-kit 3.0.0-alpha.2 → 3.0.0-alpha.20

package/package.json

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

package/src/components/Checkbox/Checkbox.tsx

@@ -12,7 +12,7 @@ import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   children?: ReactNode;
-  isChecked?: boolean;
+  isChecked: boolean | undefined;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
   isReadonly?: boolean;

package/src/components/DateInput/DateInput.tsx

@@ -1,6 +1,5 @@
 import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -33,7 +32,6 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
       data,
       isRange,
       tweakStyles,
-      testId,
       onClick,
       onChange,
       ...inputProps
@@ -70,12 +68,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
     };
 
     return (
-      <div
-        className={clsx(classes.root, className)}
-        onClick={onClick}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
+      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
         <Input
           {...inputProps}
           ref={ref}
@@ -84,7 +77,6 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
           placeholder={
             placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
           }
-          testId={getTestId(testId, 'input')}
           tweakStyles={tweakInputStyles}
           onChange={handleChange}
           beforeMaskedStateChange={beforeMaskedStateChange}

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -47,6 +47,7 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
         <DatePicker
           {...args}
           locale={ru}
+          testId="datepicker"
           months={months}
           selectedDate={date}
           startDate={startDate}

package/src/components/DatePicker/DatePicker.tsx

@@ -4,7 +4,6 @@ import 'react-datepicker/dist/react-datepicker.css';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
-  addDataTestId,
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
@@ -40,7 +39,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
   (
     {
       data,
-      testId,
       selectedDate = null,
       minDate,
       maxDate,
@@ -234,7 +232,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
     }, [selectedDate, startDate, endDate]);
 
     return (
-      <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <div className={classes.root} {...addDataAttributes(data)}>
         <DatePickerComponent
           ref={ref}
           minDate={minDate}

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -72,7 +72,6 @@ type ConfigValues = {
 
 interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
-  multiselectWidth: number;
   isSearchDisabled: boolean;
   isSearchAutosizeable: boolean;
   shouldShowSettingsButton: boolean;
@@ -83,7 +82,6 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
 
 function FiltersPaneWithCustomProps<Values, Content>({
   containerWidth,
-  multiselectWidth,
   isSearchDisabled,
   isSearchAutosizeable,
   shouldShowSettingsButton,
@@ -141,7 +139,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
     multiSelect: {
       name: 'multiSelect',
       type: 'multiSelect',
-      width: multiselectWidth,
       pageSize: 15,
       checkboxPosition,
       isGroupingEnabled,
@@ -163,7 +160,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
       isGroupingEnabled,
       checkboxPosition,
       searchMaxLength: 12,
-      width: multiselectWidth,
       fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
         if (q === '' || q === 'undefined' || q === '123') {
           return new Promise((resolve) => setTimeout(() => resolve([])));
@@ -265,9 +261,6 @@ export default {
     containerWidth: {
       control: { type: 'range', min: 100, max: 1000, step: 100 },
     },
-    multiselectWidth: {
-      control: { type: 'range', min: 100, max: 400, step: 50 },
-    },
     checkboxPosition: {
       control: 'inline-radio',
       options: ['left', 'right'],
@@ -288,7 +281,6 @@ Default.args = {
   hasClearButton: true,
   isDisabled: false,
   containerWidth: 400,
-  multiselectWidth: 200,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,
   checkboxPosition: 'left',

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IInputStyles } from '../../../Input';
@@ -49,7 +50,7 @@ export const inputStyles: IInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterIntervalStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { ISearchInputStyles } from '../../../SearchInput';
@@ -8,6 +9,7 @@ const LIST_GAP = 12;
 
 export const useStyles = createThemedStyles('FilterSelect', {
   root: {
+    width: 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -127,7 +129,7 @@ export const searchInputStyles: ISearchInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterSelectStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx

@@ -30,10 +30,6 @@ export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectSty
    * @default false
    */
   isGroupingEnabled?: boolean;
-  /**
-   * @default `220px`
-   */
-  width?: string | number;
   localeKey?: IFilterLocaleKey;
   locale?: Partial<ISelectLocale>;
   options?: Value[];
@@ -54,7 +50,6 @@ export function FilterSelect<Value>({
   value,
   isSearchEnabled = false,
   isGroupingEnabled = false,
-  width = 220,
   localeKey,
   locale,
   onChange,
@@ -225,7 +220,7 @@ export function FilterSelect<Value>({
   }, []);
 
   return (
-    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IDatePickerStyles } from '../../../DatePicker';
@@ -31,7 +32,7 @@ export const useStyles = createThemedStyles('FilterWithDates', {
   datepicker: {},
 });
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export const backButtonStyles = innerTextButtonStyles;
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -104,6 +104,7 @@ export const selectStyles: ISelectStyles = {
     borderBottomLeftRadius: 6,
     borderBottomRightRadius: 6,
     boxShadow: 'none',
+    width: '100%',
   },
 };
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -7,7 +7,7 @@ import { Icon } from '../../../Icon';
 import { SearchInput } from '../../../SearchInput';
 import { getLocale } from '../../helpers';
 import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
-import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
+import { FilterSelect } from '../FilterSelect';
 import {
   useStyles,
   IFiltersPaneSearchStyles,
@@ -26,7 +26,6 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
   getValueView?: (value: Value) => ReactNode;
   getValueId?: (value: Value) => string;
   getValueString?: (value: Value) => string;
-  selectWidth?: IFilterSelectProps<Value>['width'];
   hasClearSelectButton?: boolean;
   isDisabled?: boolean;
   isSelectSearchEnabled?: boolean;
@@ -43,7 +42,6 @@ export function FiltersPaneSearch<Value>({
   getValueId,
   getValueView,
   getValueString,
-  selectWidth = '100%',
   hasClearSelectButton,
   isDisabled = false,
   isSelectSearchEnabled = true,
@@ -155,7 +153,6 @@ export function FiltersPaneSearch<Value>({
               localeKey={localeKey}
               locale={translates}
               onChange={handleFieldsChange}
-              width={selectWidth}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
               testId={testId !== undefined ? `${testId}-dropdown` : undefined}

package/src/components/FiltersPane/types.ts

@@ -152,5 +152,5 @@ export type ISelectLocaleKey = keyof typeof SelectLocales;
 
 export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
-  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles' // TODO: rethink
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;

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

@@ -315,18 +315,20 @@ const tweak: IFlexibleTableStyles = {
 };
 
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
-  <FlexibleTable<ITableContent>
-    {...args}
-    uniqueField="contractCode"
-    expandableRowComponent={(item, _, close) =>
-      item.contractCode === 'OB_UT_M119' ? (
-        <div onClick={close}>всем привет :) {item.contractCode}</div>
-      ) : null
-    }
-    tweakStyles={tweak}
-    content={content}
-    config={config}
-  />
+  <div style={{ width: 500, overflow: 'auto' }}>
+    <FlexibleTable<ITableContent>
+      {...args}
+      uniqueField="contractCode"
+      expandableRowComponent={(item, _, close) =>
+        item.contractCode === 'OB_UT_M119' ? (
+          <div onClick={close}>всем привет :) {item.contractCode}</div>
+        ) : null
+      }
+      tweakStyles={tweak}
+      content={content}
+      config={config}
+    />
+  </div>
 );
 
 export const Default = Template.bind({});
@@ -334,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

@@ -22,16 +22,6 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     maxHeight: '100%',
   },
 
-  horizontallyScrolled: {
-    '& $cellSticky': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-
-    '& $headerSticky::before': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
   loader: {
     position: 'sticky',
     left: 0,
@@ -75,6 +65,10 @@ export const useStyles = createThemedStyles('FlexibleTable', {
       pointerEvents: 'none',
       zIndex: 1,
       transition: ['box-shadow', '0.25s', 'ease-in-out'],
+
+      '[data-scrolled] &': {
+        boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+      },
     },
 
     '&::after': {
@@ -96,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,10 +1,19 @@
-import { ReactNode, RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 import clsx from 'clsx';
+import {
+  addDataTestId,
+  indexMap,
+  isArrayNotEmpty,
+  isEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
+import { useMergedRefs, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
+import { Skeleton } from '../Skeleton';
 import { ThemedPreloader } from '../ThemedPreloader';
 import { FlexibleTableRow } from './components';
+import { hasHorizontalScrollBar } from './helpers';
 import { IFlexibleTableConfigType, IInfinityScrollConfig, ITitleComponent } from './types';
 import { useStyles, IFlexibleTableStyles } from './FlexibleTable.styles';
 
@@ -15,12 +24,16 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   headerContent?: Partial<Record<keyof Values, any>>;
   enabledColumns?: Array<keyof Values>;
   activeRows?: number[];
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   isHorizontallyScrollable?: boolean;
   isFirstColumnSticky?: boolean;
   infinityScrollConfig?: IInfinityScrollConfig;
+  /**
+   * @default Индекс строки
+   */
   uniqueField?: keyof Values;
   onHeadClick?: (column: keyof Values) => void;
+  isLoading?: boolean;
   // TODO: Заменить string на Generic Values[uniqueField]
   onRowClick?: (id: string) => void;
   onRowHover?: (id?: string) => void;
@@ -42,6 +55,7 @@ export function FlexibleTable<Values extends Record<string, any>>({
   isFirstColumnSticky,
   infinityScrollConfig,
   uniqueField,
+  isLoading,
   onHeadClick,
   onRowHover,
   onRowClick,
@@ -59,11 +73,44 @@ export function FlexibleTable<Values extends Record<string, any>>({
     currentComponentName: 'FlexibleTable',
   });
 
-  const [isHorizontallyScrolled, setIsHorizontallyScrolled] = useState(false);
-
   const observer = useRef<IntersectionObserver>();
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const showedColumns = useMemo(
+    () => enabledColumns ?? Object.keys(config),
+    [enabledColumns, config],
+  );
+
+  const getDataScrollAttributeSetter = useCallback(
+    (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
+      if (isHorizontallyScrollable && isNotEmpty(el) && setter(el)) {
+        el.dataset[key] = 'true';
+      } else {
+        el?.removeAttribute(`data-${key}`);
+      }
+    },
+    [isHorizontallyScrollable],
+  );
+
+  // Когда таблица имеет скроллбар - добавляем аттрибут scrollable
+  const setHasScrollBarAttribute = useCallback(
+    getDataScrollAttributeSetter('scrollable', hasHorizontalScrollBar),
+    [getDataScrollAttributeSetter],
+  );
+
+  // Когда таблица проскроллена - добавляем аттрибут scrolled
+  const setIsScrolledAttribute = useCallback(
+    getDataScrollAttributeSetter('scrolled', (el) => el.scrollLeft > 0),
+    [getDataScrollAttributeSetter],
+  );
+
+  const ref = useMergedRefs([
+    refForScroll,
+    scrollRef,
+    setHasScrollBarAttribute,
+    setIsScrolledAttribute,
+  ]);
+
   const initIntersectionObserver = useCallback(
     (node: HTMLDivElement) => {
       if (infinityScrollConfig) {
@@ -97,29 +144,34 @@ export function FlexibleTable<Values extends Record<string, any>>({
   );
 
   useEffect(() => {
-    const scrollContainer = (refForScroll ?? scrollRef).current;
-    if (scrollContainer === null || !isHorizontallyScrollable || !isFirstColumnSticky) {
+    const scrollContainer = scrollRef.current;
+    if (isEmpty(scrollContainer) || !isHorizontallyScrollable) {
       return;
     }
-    const scrollHandler = (e: Event) => {
-      setIsHorizontallyScrolled((e.target as HTMLDivElement).scrollLeft > 0);
+
+    const scrollHandler = () => {
+      setIsScrolledAttribute(scrollContainer);
+    };
+
+    const resizeHandler = () => {
+      setHasScrollBarAttribute(scrollContainer);
     };
+
     scrollContainer.addEventListener('scroll', scrollHandler);
-    return () => scrollContainer.removeEventListener('scroll', scrollHandler);
-  }, [scrollRef]);
+    window.addEventListener('resize', resizeHandler);
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, [scrollRef, setIsScrolledAttribute, setHasScrollBarAttribute]);
 
   return (
-    <div
-      ref={refForScroll ?? scrollRef}
-      className={clsx(
-        isHorizontallyScrollable && classes.scroll,
-        isHorizontallyScrolled && classes.horizontallyScrolled,
-      )}
-    >
-      <table className={classes.root} data-testid={testId} {...addDataAttributes(data)}>
+    <div ref={ref} className={clsx({ [classes.scroll]: isHorizontallyScrollable })}>
+      <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 ?? '';
@@ -131,11 +183,10 @@ export function FlexibleTable<Values extends Record<string, any>>({
 
               return (
                 <th
-                  className={clsx(
-                    classes.header,
-                    isFirstColumnSticky && idx === 0 && classes.headerSticky,
-                    isFirstColumnSticky && idx === 1 && classes.headerSecond,
-                  )}
+                  className={clsx(classes.header, {
+                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
+                    [classes.headerSecond]: isFirstColumnSticky && i === 1,
+                  })}
                   style={{
                     minWidth: itemConfig?.minWidth,
                     width: itemConfig?.width,
@@ -152,42 +203,55 @@ export function FlexibleTable<Values extends Record<string, any>>({
           </tr>
         </thead>
         <tbody>
-          {content.length === 0 &&
-            nothingFoundContent !== undefined &&
-            !infinityScrollConfig?.isLoading &&
-            (infinityScrollConfig?.isLastPage === undefined || infinityScrollConfig.isLastPage) && (
-              <tr>
-                <td colSpan={(enabledColumns || Object.keys(content[0])).length}>
-                  {nothingFoundContent}
-                </td>
+          {isLoading ? (
+            indexMap(6, (i) => (
+              <tr key={i}>
+                {showedColumns.map((_, j) => (
+                  <td key={j} className={classes.skeleton}>
+                    <Skeleton />
+                  </td>
+                ))}
               </tr>
-            )}
-
-          {content.map((item, idx) => (
-            <FlexibleTableRow
-              item={item}
-              uniqueField={uniqueField}
-              isActive={activeRows?.includes(idx) ?? false}
-              isFirstColumnSticky={isFirstColumnSticky}
-              onRowClick={onRowClick}
-              onRowHover={onRowHover}
-              enabledColumns={enabledColumns}
-              config={config}
-              key={uniqueField ? item[uniqueField] : idx}
-              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>
+            ))
+          ) : (
+            <>
+              {!isArrayNotEmpty(content) &&
+                nothingFoundContent !== undefined &&
+                !infinityScrollConfig?.isLoading &&
+                (infinityScrollConfig?.isLastPage === undefined ||
+                  infinityScrollConfig.isLastPage) && (
+                  <tr>
+                    <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={showedColumns.length}>
+                    <div ref={initIntersectionObserver} className={classes.loader}>
+                      <ThemedPreloader type="dots" />
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </>
           )}
         </tbody>
       </table>

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

@@ -18,6 +18,10 @@ export const useStyles = createThemedStyles('FlexibleTableCell', {
     paddingLeft: 24,
     paddingRight: 12,
     ...getTransition(['box-shadow']),
+
+    '[data-scrolled] &': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
   },
 
   second: {