@true-engineering/true-react-common-ui-kit 3.39.0 → 3.40.0

package/src/components/FileInput/FileInput.stories.tsx

@@ -1,75 +1,75 @@
-import { format } from 'date-fns';
-import { ru } from 'date-fns/locale';
-import { ComponentStory } from '@storybook/react';
-import { mimeTypes } from '../../constants';
-import { FileItem } from '../FileItem';
-import { Icon } from '../Icon';
-import { FileInput } from './FileInput';
-
-export default {
-  title: 'Inputs/FileInput',
-  component: FileInput,
-};
-
-const description = 'Форматы файла: xlsx, xlsm. Размер — до 1 МБ';
-const text = (
-  <div style={{ display: 'flex', alignItems: 'center' }}>
-    <span style={{ display: 'inline-block', width: 20, height: 20, marginRight: 8 }}>
-      <Icon type="upload" />
-    </span>
-    Перетащите или выберите файл
-  </div>
-);
-
-const handleAdd = (newFiles: File[]) =>
-  console.log(
-    'added:',
-    newFiles.map(({ name }) => name),
-  );
-
-const Template: ComponentStory<typeof FileInput> = (args) => (
-  <div style={{ width: 652 }}>
-    <FileInput {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Скан документа',
-  isDragAndDropDisabled: false,
-  isRequired: true,
-  isReadOnly: false,
-  isMultipleDisabled: false,
-  isDisabled: false,
-  isActive: false,
-  onAdd: handleAdd,
-  tweakStyles: {
-    fileList: {
-      '& > div': {
-        width: '270px',
-      },
-    },
-  },
-  description,
-  text,
-  fileList: (
-    <>
-      <FileItem
-        fileInfo={{ name: 'file1', type: mimeTypes.jpeg, size: 10000 }}
-        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
-      />
-      <FileItem
-        fileInfo={{ name: 'file 2', type: mimeTypes.xls }}
-        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
-        isDisabled
-      />
-    </>
-  ),
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['onAdd', 'tweakStyles'],
-  },
-};
+import { format } from 'date-fns';
+import { ru } from 'date-fns/locale';
+import { ComponentStory } from '@storybook/react';
+import { mimeTypes } from '../../constants';
+import { FileItem } from '../FileItem';
+import { Icon } from '../Icon';
+import { FileInput } from './FileInput';
+
+export default {
+  title: 'Inputs/FileInput',
+  component: FileInput,
+};
+
+const description = 'Форматы файла: xlsx, xlsm. Размер — до 1 МБ';
+const text = (
+  <div style={{ display: 'flex', alignItems: 'center' }}>
+    <span style={{ display: 'inline-block', width: 20, height: 20, marginRight: 8 }}>
+      <Icon type="upload" />
+    </span>
+    Перетащите или выберите файл
+  </div>
+);
+
+const handleAdd = (newFiles: File[]) =>
+  console.log(
+    'added:',
+    newFiles.map(({ name }) => name),
+  );
+
+const Template: ComponentStory<typeof FileInput> = (args) => (
+  <div style={{ width: 652 }}>
+    <FileInput {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Скан документа',
+  isDragAndDropDisabled: false,
+  isRequired: true,
+  isReadOnly: false,
+  isMultipleDisabled: false,
+  isDisabled: false,
+  isActive: false,
+  onAdd: handleAdd,
+  tweakStyles: {
+    fileList: {
+      '& > div': {
+        width: '270px',
+      },
+    },
+  },
+  description,
+  text,
+  fileList: (
+    <>
+      <FileItem
+        fileInfo={{ name: 'file1', type: mimeTypes.jpeg, size: 10000 }}
+        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+      />
+      <FileItem
+        fileInfo={{ name: 'file 2', type: mimeTypes.xls }}
+        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+        isDisabled
+      />
+    </>
+  ),
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['onAdd', 'tweakStyles'],
+  },
+};

package/src/components/FileInput/FileInput.styles.ts

@@ -1,80 +1,80 @@
-import { ITweakStyles, animations, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('FileInput', {
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
-
-  label: {
-    position: 'relative',
-    width: 'fit-content',
-    fontSize: 16,
-    marginBottom: 12,
-  },
-
-  requiredLabel: {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      right: -8,
-      top: 4,
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  description: {
-    marginBottom: 8,
-    fontSize: 12,
-  },
-
-  text: {
-    padding: [16, 0],
-  },
-
-  inputWrapper: {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    marginBottom: 8,
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color',
-  },
-
-  inputLabel: {
-    position: 'absolute',
-    inset: 0,
-    cursor: 'pointer',
-
-    '& input': {
-      opacity: 0,
-      width: 1,
-      height: 1,
-      zIndex: -1,
-    },
-  },
-
-  dragged: {},
-
-  active: {},
-
-  disabled: {
-    cursor: 'not-allowed',
-    pointerEvents: 'none',
-  },
-
-  fileList: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    columnGap: 6,
-    rowGap: 12,
-  },
-});
-
-export type IFileInputStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('FileInput', {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+
+  label: {
+    position: 'relative',
+    width: 'fit-content',
+    fontSize: 16,
+    marginBottom: 12,
+  },
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      right: -8,
+      top: 4,
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  description: {
+    marginBottom: 8,
+    fontSize: 12,
+  },
+
+  text: {
+    padding: [16, 0],
+  },
+
+  inputWrapper: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    marginBottom: 8,
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, color',
+  },
+
+  inputLabel: {
+    position: 'absolute',
+    inset: 0,
+    cursor: 'pointer',
+
+    '& input': {
+      opacity: 0,
+      width: 1,
+      height: 1,
+      zIndex: -1,
+    },
+  },
+
+  dragged: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
+
+  fileList: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    columnGap: 6,
+    rowGap: 12,
+  },
+});
+
+export type IFileInputStyles = ITweakStyles<typeof useStyles>;

package/src/components/FileInput/FileInput.tsx

@@ -1,147 +1,147 @@
-import {
-  ReactNode,
-  useState,
-  InputHTMLAttributes,
-  forwardRef,
-  ChangeEventHandler,
-  DragEventHandler,
-} from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  isEmpty,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { blockEvent } from './helpers';
-import { IFileInputStyles, useStyles } from './FileInput.styles';
-
-export interface IFileInputProps extends ICommonProps<IFileInputStyles> {
-  fileList?: ReactNode;
-  label?: ReactNode;
-  text: ReactNode;
-  description?: ReactNode;
-  /** @default false */
-  isDragAndDropDisabled?: boolean;
-  /** @default false */
-  isRequired?: boolean;
-  /** @default false */
-  isReadOnly?: boolean;
-  /** @default false */
-  isMultipleDisabled?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isActive?: boolean;
-  /** @default undefined */
-  accept?: InputHTMLAttributes<HTMLInputElement>['accept'];
-  onAdd?: (files: File[]) => void;
-}
-
-export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(
-  (
-    {
-      fileList,
-      label,
-      text,
-      description,
-      isDragAndDropDisabled = false,
-      isRequired = false,
-      isReadOnly = false,
-      isMultipleDisabled = false,
-      isDisabled = false,
-      isActive = false,
-      accept,
-      onAdd,
-      testId,
-      tweakStyles,
-      data,
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const [isDragOver, setIsDragOver] = useState(false);
-
-    const handleAdd = (files: FileList | null) => {
-      if (isDisabled || isEmpty(files) || files?.length === 0) {
-        return;
-      }
-
-      onAdd?.([...files]);
-    };
-
-    const handleDragStart: DragEventHandler<HTMLDivElement> = (event) => {
-      blockEvent(event);
-      setIsDragOver(true);
-    };
-
-    const handleDragStop: DragEventHandler<HTMLDivElement> = (event) => {
-      blockEvent(event);
-      setIsDragOver(false);
-    };
-
-    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
-      handleDragStop(event);
-
-      handleAdd(event.dataTransfer.files);
-    };
-
-    const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-      handleAdd(event.target.files);
-    };
-
-    const dndHandlers =
-      !isDragAndDropDisabled && !isDisabled
-        ? {
-            onDragOver: handleDragStart,
-            onDragEnter: handleDragStart,
-            onDragLeave: handleDragStop,
-            onDrop: handleDrop,
-          }
-        : undefined;
-
-    return (
-      <div className={classes.root} {...addDataAttributes(data)} {...addDataTestId(testId)}>
-        {isReactNodeNotEmpty(label) && (
-          <div className={clsx(classes.label, { [classes.requiredLabel]: isRequired })}>
-            {label}
-          </div>
-        )}
-        {!isReadOnly && (
-          <div
-            className={clsx(classes.inputWrapper, {
-              [classes.dragged]: isDragOver,
-              [classes.disabled]: isDisabled,
-              [classes.active]: isActive,
-            })}
-            {...dndHandlers}
-          >
-            {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
-            <label className={classes.inputLabel}>
-              <input
-                ref={ref}
-                type="file"
-                value=""
-                onChange={handleFileChange}
-                multiple={!isMultipleDisabled}
-                disabled={isDisabled}
-                accept={accept}
-                {...addDataTestId(testId, 'input')}
-              />
-            </label>
-          </div>
-        )}
-
-        {isReactNodeNotEmpty(description) && (
-          <div className={classes.description}>{description}</div>
-        )}
-
-        <div className={classes.fileList}>{fileList}</div>
-      </div>
-    );
-  },
-);
-
-FileInput.displayName = 'FileInput';
+import {
+  ReactNode,
+  useState,
+  InputHTMLAttributes,
+  forwardRef,
+  ChangeEventHandler,
+  DragEventHandler,
+} from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  isEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { blockEvent } from './helpers';
+import { IFileInputStyles, useStyles } from './FileInput.styles';
+
+export interface IFileInputProps extends ICommonProps<IFileInputStyles> {
+  fileList?: ReactNode;
+  label?: ReactNode;
+  text: ReactNode;
+  description?: ReactNode;
+  /** @default false */
+  isDragAndDropDisabled?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isReadOnly?: boolean;
+  /** @default false */
+  isMultipleDisabled?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default undefined */
+  accept?: InputHTMLAttributes<HTMLInputElement>['accept'];
+  onAdd?: (files: File[]) => void;
+}
+
+export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(
+  (
+    {
+      fileList,
+      label,
+      text,
+      description,
+      isDragAndDropDisabled = false,
+      isRequired = false,
+      isReadOnly = false,
+      isMultipleDisabled = false,
+      isDisabled = false,
+      isActive = false,
+      accept,
+      onAdd,
+      testId,
+      tweakStyles,
+      data,
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    const handleAdd = (files: FileList | null) => {
+      if (isDisabled || isEmpty(files) || files?.length === 0) {
+        return;
+      }
+
+      onAdd?.([...files]);
+    };
+
+    const handleDragStart: DragEventHandler<HTMLDivElement> = (event) => {
+      blockEvent(event);
+      setIsDragOver(true);
+    };
+
+    const handleDragStop: DragEventHandler<HTMLDivElement> = (event) => {
+      blockEvent(event);
+      setIsDragOver(false);
+    };
+
+    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
+      handleDragStop(event);
+
+      handleAdd(event.dataTransfer.files);
+    };
+
+    const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+      handleAdd(event.target.files);
+    };
+
+    const dndHandlers =
+      !isDragAndDropDisabled && !isDisabled
+        ? {
+            onDragOver: handleDragStart,
+            onDragEnter: handleDragStart,
+            onDragLeave: handleDragStop,
+            onDrop: handleDrop,
+          }
+        : undefined;
+
+    return (
+      <div className={classes.root} {...addDataAttributes(data)} {...addDataTestId(testId)}>
+        {isReactNodeNotEmpty(label) && (
+          <div className={clsx(classes.label, { [classes.requiredLabel]: isRequired })}>
+            {label}
+          </div>
+        )}
+        {!isReadOnly && (
+          <div
+            className={clsx(classes.inputWrapper, {
+              [classes.dragged]: isDragOver,
+              [classes.disabled]: isDisabled,
+              [classes.active]: isActive,
+            })}
+            {...dndHandlers}
+          >
+            {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
+            <label className={classes.inputLabel}>
+              <input
+                ref={ref}
+                type="file"
+                value=""
+                onChange={handleFileChange}
+                multiple={!isMultipleDisabled}
+                disabled={isDisabled}
+                accept={accept}
+                {...addDataTestId(testId, 'input')}
+              />
+            </label>
+          </div>
+        )}
+
+        {isReactNodeNotEmpty(description) && (
+          <div className={classes.description}>{description}</div>
+        )}
+
+        <div className={classes.fileList}>{fileList}</div>
+      </div>
+    );
+  },
+);
+
+FileInput.displayName = 'FileInput';

package/src/components/FileInput/helpers.ts

@@ -1,6 +1,6 @@
-import { SyntheticEvent } from 'react';
-
-export const blockEvent = (event: SyntheticEvent): void => {
-  event.preventDefault();
-  event.stopPropagation();
-};
+import { SyntheticEvent } from 'react';
+
+export const blockEvent = (event: SyntheticEvent): void => {
+  event.preventDefault();
+  event.stopPropagation();
+};

package/src/components/FileInput/index.ts

@@ -1,2 +1,2 @@
-export * from './FileInput';
-export type { IFileInputStyles } from './FileInput.styles';
+export * from './FileInput';
+export type { IFileInputStyles } from './FileInput.styles';