@true-engineering/true-react-common-ui-kit 3.56.1 → 3.57.0

package/package.json

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

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -6,7 +6,7 @@ import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
 import { NumberInput } from '../../../NumberInput';
 import { getLocale, sortValues } from '../../helpers';
-import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { IFilterLocaleKey, IFilterNumberInputProps, IPartialFilterLocale } from '../../types';
 import {
   useStyles,
   IFilterIntervalStyles,
@@ -22,16 +22,8 @@ export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles
   locale?: IPartialFilterLocale;
   withFieldNameInLabel?: boolean;
   canBeFloat?: boolean;
-  fromInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
-  toInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
+  fromInput?: IFilterNumberInputProps;
+  toInput?: IFilterNumberInputProps;
 }
 
 export const FilterInterval: FC<IFilterIntervalProps> = ({
@@ -101,11 +93,9 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             border="bottom"
             canBeFloat={canBeFloat}
             isClearable
-            min={fromInput?.min}
-            max={fromInput?.max}
-            maxLength={fromInput?.maxLength}
             tweakStyles={tweakInputStyles}
             testId={getTestId(testId, 'start')}
+            {...fromInput}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>
@@ -125,11 +115,9 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             border="bottom"
             canBeFloat={canBeFloat}
             isClearable
-            min={toInput?.min}
-            max={toInput?.max}
-            maxLength={toInput?.maxLength}
             tweakStyles={tweakInputStyles}
             testId={getTestId(testId, 'end')}
+            {...toInput}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>

package/src/components/FiltersPane/types.ts

@@ -1,6 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
+import { INumberInputProps } from '../NumberInput';
 import type {
   IFilterIntervalProps,
   IFilterMultiSelectProps,
@@ -173,3 +174,8 @@ export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
   'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;
+
+export type IFilterNumberInputProps = Omit<
+  INumberInputProps,
+  'onChange' | 'value' | 'label' | 'testId' | 'tweakStyles'
+>;

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

@@ -0,0 +1,117 @@
+import { FC, useState } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import type { Meta, StoryObj } from '@storybook/react';
+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 Actions: FC = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+    <TextButton icon="trash-can" view="custom">
+      Удалить
+    </TextButton>
+    <TextButton icon="pencil">Редактировать</TextButton>
+    <Button view="secondary">Отказать</Button>
+    <Button>Одобрить</Button>
+    <NewMoreMenu items={[]} />
+  </div>
+);
+
+const DocActionsWithData: FC<IFloatDocActionsProps> = (props) => {
+  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 = props.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
+            {...props}
+            title={title}
+            isOpen={isOpen}
+            isChecked={isAllRowsSelected}
+            isSemiChecked={!isAllRowsSelected && state.size !== 0}
+            onSelect={handleSelectAll}
+          >
+            <Actions />
+          </FloatDocActionsComponent>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DocActionsWithData> = {
+  title: 'Table/FloatDocActions',
+  component: DocActionsWithData,
+  args: {
+    title: 'Выбрано',
+    view: 'neutral',
+  },
+  argTypes: {
+    view: { options: DOC_ACTIONS_VIEWS, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: ['actions'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FloatDocActionsComponent>;
+
+export const Default: Story = {};

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,43 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Checkbox, ICheckboxProps } from '../../../Checkbox';
+import { IDocActionsView } from './types';
+import { IDocActionsStyles, useStyles } from './DocActions.styles';
+
+export interface IDocActionsProps
+  extends Omit<ICheckboxProps<never>, 'tweakStyles'>,
+    ICommonProps<IDocActionsStyles> {
+  title: string;
+  /** @default 'neutral' */
+  view?: IDocActionsView;
+  children: ReactNode;
+}
+
+export const DocActions: FC<IDocActionsProps> = ({
+  title,
+  view = 'neutral',
+  children,
+  tweakStyles,
+  ...checkBoxProps
+}) => {
+  const classes = useStyles({ theme: 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';

package/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './FileItem';
 export * from './FiltersPane';
 export * from './Flag';
 export * from './FlexibleTable';
+export * from './FloatDocActions';
 export * from './Icon';
 export * from './IconButton';
 export * from './IncrementInput';

package/src/theme/types.ts

@@ -13,7 +13,10 @@ import type {
   IDatePickerHeaderStyles,
   IDatePickerStyles,
   IDescriptionStyles,
+  IDocActionsStyles,
   IDotsPreloaderStyles,
+  IFileInputStyles,
+  IFileItemStyles,
   IFilterIntervalStyles,
   IFilterSelectStyles,
   IFiltersPaneSearchStyles,
@@ -37,6 +40,7 @@ import type {
   IMultiSelectInputStyles,
   IMultiSelectListStyles,
   IMultiSelectStyles,
+  INewMoreMenuStyles,
   INotificationStyles,
   IPhoneInputCountryListStyles,
   IPhoneInputStyles,
@@ -59,9 +63,6 @@ import type {
   IToasterStyles,
   ITooltipStyles,
   IWithPopupStyles,
-  INewMoreMenuStyles,
-  IFileInputStyles,
-  IFileItemStyles,
   IWithTooltipStyles,
 } from '../components';
 
@@ -91,6 +92,7 @@ export interface IComponentStyles {
   DatePicker: IDatePickerStyles;
   DatePickerHeader: IDatePickerHeaderStyles;
   Description: IDescriptionStyles;
+  DocActions: IDocActionsStyles;
   DotsPreloader: IDotsPreloaderStyles;
   SvgPreloader: ISvgPreloaderStyles;
   FileInput: IFileInputStyles;