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

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { ICommonProps } from '../../../../types';
-import { DEFAULT_DATE_FORMAT } from '../../constants';
+import { formatCellContent } from '../../helpers';
 import type { IFlexibleTableConfigType } from '../../types';
 import { useStyles, IFlexibleTableCellStyles } from './FlexibleTableCell.styles';
 
@@ -10,7 +10,7 @@ export interface IFlexibleTableCellProps<Values extends Record<string, any>>
   extends Pick<ICommonProps<IFlexibleTableCellStyles>, 'tweakStyles'> {
   item: Values;
   columnName: keyof Values;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   isFocusedRow?: boolean;
   isSecond?: boolean;
   isSticky?: boolean;
@@ -33,39 +33,37 @@ function FlexibleTableCell<Values extends Record<string, any>>({
 }: IFlexibleTableCellProps<Values>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
-  const itemConfig = config?.[columnName];
-  const value = item[columnName];
-  let content = null;
+  const { component, cellAlign, position, right, left, cellVerticalAlign } =
+    config[columnName] ?? {};
 
-  if (itemConfig?.component) {
-    const ValueComponent = itemConfig?.component;
-    content = ValueComponent({
-      value,
-      row: item,
-      isFocusedRow,
-      isNestedComponentExpanded,
-      isRowNestedComponentExpanded,
-      onSetNestedComponent,
-    });
-  } else if (typeof value === 'string' || typeof value === 'number') {
-    content = value;
-  } else if ((value as any) instanceof Date) {
-    content = format(value, itemConfig?.dateFormat || DEFAULT_DATE_FORMAT);
-  }
+  const value = item[columnName];
 
   return (
     <td
       key={columnName as string}
       className={clsx(classes.root, { [classes.sticky]: isSticky, [classes.second]: isSecond })}
       style={{
-        textAlign: itemConfig?.cellAlign,
-        position: isSticky ? 'sticky' : itemConfig?.position,
-        right: itemConfig?.right,
-        left: isSticky ? 0 : itemConfig?.left,
-        verticalAlign: itemConfig?.cellVerticalAlign,
+        textAlign: cellAlign,
+        position: isSticky ? 'sticky' : position,
+        right,
+        left: isSticky ? 0 : left,
+        verticalAlign: cellVerticalAlign,
       }}
     >
-      {content}
+      {isNotEmpty(value) && (
+        <>
+          {isNotEmpty(component)
+            ? component({
+                value,
+                row: item,
+                isFocusedRow,
+                isNestedComponentExpanded,
+                isRowNestedComponentExpanded,
+                onSetNestedComponent,
+              })
+            : formatCellContent(value, config[columnName])}
+        </>
+      )}
     </td>
   );
 }

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

@@ -11,6 +11,10 @@ export const useStyles = createThemedStyles('FlexibleTableRow', {
   editable: {
     cursor: 'pointer',
   },
+
+  clickable: {
+    cursor: 'pointer',
+  },
 });
 
 export type IFlexibleTableRowStyles = ITweakStyles<

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

@@ -1,5 +1,6 @@
 import { ReactNode, useState, memo } from 'react';
 import clsx from 'clsx';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps, IDataAttributes } from '../../../../types';
@@ -14,7 +15,7 @@ export interface IFlexibleTableRowProps<Values extends Record<string, any>>
   uniqueField?: keyof Values;
   isFirstColumnSticky?: boolean;
   isActive: boolean;
-  config?: IFlexibleTableConfigType<Values>;
+  config: IFlexibleTableConfigType<Values>;
   enabledColumns?: Array<keyof Values>;
   rowAttributes?: Array<keyof Values>;
   expandableRowComponent?(item: Values, isOpen: boolean, close: () => void): ReactNode;
@@ -81,7 +82,7 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
       onRowClick?.(item[uniqueField]);
     }
 
-    if (expandableRowComponent !== undefined) {
+    if (isNotEmpty(expandableRowComponent)) {
       const newNestedComponent = expandableRowComponent(item, true, closeNestedComponent);
 
       if (!nestedComponent.isOpen && newNestedComponent !== null) {
@@ -96,16 +97,16 @@ function FlexibleTableRowInner<Values extends Record<string, any>>({
     }
   };
 
-  const items = enabledColumns ?? Object.keys(item);
+  const items = enabledColumns ?? Object.keys(config);
 
   return (
     <>
       <tr
-        className={clsx(
-          classes.root,
-          isActive && classes.active,
-          (onRowClick !== undefined || onRowHover !== undefined) && classes.editable,
-        )}
+        className={clsx(classes.root, {
+          [classes.active]: isActive,
+          [classes.editable]: isNotEmpty(onRowClick) || isNotEmpty(onRowHover),
+          [classes.clickable]: isNotEmpty(onRowClick) || isNotEmpty(expandableRowComponent),
+        })}
         onMouseEnter={(e) => {
           if (uniqueField !== undefined && onRowHover !== undefined) {
             e.stopPropagation();
@@ -120,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/helpers.ts

@@ -0,0 +1,15 @@
+import { format } from 'date-fns';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { DEFAULT_DATE_FORMAT } from './constants';
+import { IFlexibleTableConfigType } from './types';
+
+export const hasHorizontalScrollBar = (el: HTMLElement | null | undefined): boolean =>
+  isNotEmpty(el) && el.scrollWidth !== el.clientWidth;
+
+export const formatCellContent = <Values>(
+  value: unknown,
+  config?: IFlexibleTableConfigType<Values>[keyof Values],
+): string =>
+  value instanceof Date
+    ? format(value as Date, config?.dateFormat ?? DEFAULT_DATE_FORMAT)
+    : String(value);

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<Values, Values[Key]>;
+    component?: IValueComponent<Values, NonNullable<Values[Key]>>;
     dateFormat?: string;
     minWidth?: string | number;
     width?: string | number;

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -8,6 +8,7 @@ const TOP_GAP = 12;
 
 export const useStyles = createThemedStyles('MultiSelectList', {
   root: {
+    width: 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -101,10 +102,13 @@ export const searchInputStyles: ISearchInputStyles = {
 export const checkboxStyles: ICheckboxStyles = {
   root: {
     padding: [11, 16],
+    boxSizing: 'border-box',
+    width: '100%',
   },
 
   children: {
     marginRight: 'auto',
+    overflow: 'hidden',
   },
 };
 

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -22,7 +22,6 @@ import {
 export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMultiSelectListStyles> {
   value?: Value;
   isSearchEnabled?: boolean;
-  width?: number | string;
   localeKey?: IMultiSelectLocaleKey;
   locale?: Partial<IMultiSelectLocale>;
   onClose?: () => void;
@@ -43,7 +42,6 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   tweakStyles,
   data,
   isSearchEnabled = false,
-  width = 220,
   localeKey = DEFAULT_LOCALE,
   locale = MultiSelectLocales[localeKey],
   onChange,
@@ -329,7 +327,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   const shouldShowOptionsList = !isLoading && allOptions.length !== 0;
 
   return (
-    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

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/Switch/Switch.tsx

@@ -9,7 +9,7 @@ import { useStyles, ISwitchStyles } from './Switch.styles';
 export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
   children?: ReactNode;
   value: V;
-  isChecked: boolean;
+  isChecked: boolean | undefined;
   isDisabled?: boolean;
   isInvalid?: boolean;
   /**
@@ -25,7 +25,7 @@ export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyl
 
 export const Switch = <V extends string>({
   isDisabled,
-  isChecked,
+  isChecked = false,
   isInvalid,
   value,
   children,

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/helpers/phone.ts

@@ -18,7 +18,7 @@ export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): str
   locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
 
 /**
- * Мутирует!
+ * Мутирует countriesList!
  */
 export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string): IPhoneInfo[] =>
   countriesList.sort((countryA, countryB) =>

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-dropdown';
 export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
+export * from './use-merged-refs';

package/src/hooks/use-merged-refs.ts

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
+
+export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);

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;