@true-engineering/true-react-common-ui-kit 3.56.2 → 3.58.0

package/package.json

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

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

@@ -80,7 +80,11 @@ export interface IInputProps
   shouldFocusOnMount?: boolean;
   /** @default false */
   shouldAlwaysShowPlaceholder?: boolean;
-  onChange: (value: string, event: FormEvent<HTMLInputElement>) => void;
+  onChange: (
+    value: string,
+    event: FormEvent<HTMLInputElement>,
+    eventType: 'change' | 'clear',
+  ) => void;
   onIconClick?: () => void;
 }
 
@@ -139,7 +143,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     const inputRef = useRef<HTMLInputElement>(null);
 
     const handleChange = (event: FormEvent<HTMLInputElement>) => {
-      onChange(event.currentTarget.value, event);
+      onChange(event.currentTarget.value, event, 'change');
     };
 
     const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
@@ -155,7 +159,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
     // для SmartInput нужен event, иначе onChange не вызовется
     const handleOnInputClear = async (event: MouseEvent<HTMLDivElement>) => {
       // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
-      await onChange('', event as any);
+      await onChange('', event as any, 'clear');
       const input = (ref as MutableRefObject<HTMLInputElement>) ?? inputRef;
       input.current?.focus();
     };

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;