[DOP-24079] add file size select

Author: Zabilsya

src/entities/file/@x/transformation.ts

@@ -0,0 +1,3 @@
+/** Cross-import entities using public API in FSD https://feature-sliced.design/ru/docs/reference/public-api#public-api-for-cross-imports */
+export { FileSizeUnit } from '../types';
+export { parseFileSize } from '../utils';

src/entities/file/types.ts

@@ -1,3 +1,17 @@
+export enum FileSizeUnit {
+  b = 'b',
+  Kb = 'Kb',
+  Mb = 'Mb',
+  Gb = 'Gb',
+}
+
+export enum FileSizeUnitValue {
+  b = 1,
+  Kb = 1000,
+  Mb = 1000 * 1000,
+  Gb = 1000 * 1000 * 1000,
+}
+
 export enum FileCompression {
   NONE = 'none',
   BZIP2 = 'bzip2',

src/entities/file/utils/index.ts

@@ -0,0 +1 @@
+export * from './parseFileSize';

src/entities/file/utils/parseFileSize/index.ts

@@ -0,0 +1,17 @@
+import { FileSizeUnit, FileSizeUnitValue } from '@entities/file';
+
+import { ParseFileSizeReturn } from './types';
+
+/** Util for parsing file size in bytes to appropriate unit and value */
+export const parseFileSize = (bytes: number): ParseFileSizeReturn => {
+  if (bytes >= FileSizeUnitValue.Gb) {
+    return { value: bytes / FileSizeUnitValue.Gb, unit: FileSizeUnit.Gb };
+  }
+  if (bytes >= FileSizeUnitValue.Mb) {
+    return { value: bytes / FileSizeUnitValue.Mb, unit: FileSizeUnit.Mb };
+  }
+  if (bytes >= FileSizeUnitValue.Kb) {
+    return { value: bytes / FileSizeUnitValue.Kb, unit: FileSizeUnit.Kb };
+  }
+  return { value: bytes, unit: FileSizeUnit.b };
+};

src/entities/file/utils/parseFileSize/types.ts

@@ -0,0 +1,6 @@
+import { FileSizeUnit } from '@entities/file/@x/transformation';
+
+export interface ParseFileSizeReturn {
+  value: number;
+  unit: FileSizeUnit;
+}

…/components/FilterFileValue/constants.ts …nents/FilterFileRegexpValue/constants.tssrc/entities/transformation/ui/TransformationForm/components/FilterFileValue/constants.ts renamed to src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileRegexpValue/constants.ts src/entities/transformation/ui/TransformationForm/components/FilterFileValue/constants.ts renamed to src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileRegexpValue/constants.ts

@@ -1,14 +1,10 @@
 import { TransformationFilterFileType } from '@entities/transformation';
-import { NUMBER_REGEXP } from '@shared/constants';
 import { isValidRegex } from '@shared/utils';
-import { RuleObject } from 'antd/lib/form';
 
 /** Regexp to search file with global magic characters (e.g. *.svg) */
 export const NAME_GLOB_REGEXP = /([*?[])/;
 
-export const CONTROL_RULES: Record<TransformationFilterFileType, RuleObject[]> = {
+export const CONTROL_RULES = {
   [TransformationFilterFileType.NAME_GLOB]: [{ required: true, pattern: NAME_GLOB_REGEXP }],
   [TransformationFilterFileType.NAME_REGEXP]: [{ required: true, validator: isValidRegex }],
-  [TransformationFilterFileType.FILE_SIZE_MIN]: [{ required: true, pattern: NUMBER_REGEXP }],
-  [TransformationFilterFileType.FILE_SIZE_MAX]: [{ required: true, pattern: NUMBER_REGEXP }],
 };

src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileRegexpValue/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+
+import { FilterFileRegexpValueProps } from './types';
+import classes from './styles.module.less';
+import { CONTROL_RULES } from './constants';
+
+export const FilterFileRegexpValue = ({ name, type }: FilterFileRegexpValueProps) => {
+  return (
+    <Form.Item className={classes.control} label="Value" name={[name, 'value']} rules={CONTROL_RULES[type]}>
+      <Input className="nodrag" size="large" />
+    </Form.Item>
+  );
+};

…nents/FilterFileValue/styles.module.less …FilterFileRegexpValue/styles.module.lesssrc/entities/transformation/ui/TransformationForm/components/FilterFileValue/styles.module.less renamed to src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileRegexpValue/styles.module.less src/entities/transformation/ui/TransformationForm/components/FilterFileValue/styles.module.less renamed to src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileRegexpValue/styles.module.less

@@ -0,0 +1,9 @@
+import { TransformationFilterFileType } from '@entities/transformation';
+
+export interface FilterFileRegexpValueProps {
+  type: Extract<
+    TransformationFilterFileType,
+    TransformationFilterFileType.NAME_GLOB | TransformationFilterFileType.NAME_REGEXP
+  >;
+  name: number;
+}

src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileRegexpValue/types.ts

@@ -0,0 +1,8 @@
+import { FileSizeUnit } from '@entities/file/@x/transformation';
+import { prepareOptionsForSelect } from '@shared/ui';
+
+export const FILE_SIZE_UNIT_SELECT_OPTIONS = prepareOptionsForSelect({
+  data: Object.values(FileSizeUnit),
+  renderLabel: (data) => data,
+  renderValue: (data) => data,
+});