@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha4

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -1,114 +1,114 @@
-import { useMemo } from 'react';
-import { getLocale } from '../../helpers';
-import { IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../../types';
-import { FilterInterval } from '../FilterInterval';
-import { FilterMultiSelect } from '../FilterMultiSelect';
-import { FilterSelect } from '../FilterSelect';
-import { FilterWithDates } from '../FilterWithDates';
-import { FilterWithPeriod } from '../FilterWithPeriod';
-import type { IFilterWrapperProps } from '../FilterWrapper';
-
-export interface IFilterProps<Values, Key extends keyof Values>
-  extends IFilterWrapperProps<Values, Key> {
-  onChange: <V>(v: V) => void;
-  onClose?: () => void;
-}
-
-export function Filter<Values, Key extends keyof Values>(
-  props: IFilterProps<Values, Key>,
-): JSX.Element | null {
-  const { filter, value, onChange, onClose, localeKey, locale, testId } = props;
-  const translatesLocaleKey = filter.localeKey ?? localeKey;
-  const translates = useMemo(
-    () => getLocale(translatesLocaleKey, locale, filter.locale),
-    [translatesLocaleKey, locale, filter.locale],
-  );
-
-  if (filter.type === 'select') {
-    return (
-      <FilterSelect
-        value={value}
-        onChange={onChange}
-        onClose={onClose}
-        localeKey={translatesLocaleKey}
-        locale={translates}
-        testId={testId !== undefined ? `${testId}-select` : undefined}
-        {...filter}
-      />
-    );
-  }
-
-  if (filter.type === 'dateRange') {
-    return (
-      <FilterWithPeriod
-        value={{ ...value } as IPeriod}
-        onChange={onChange}
-        onClose={onClose}
-        localeKey={translatesLocaleKey}
-        locale={translates}
-        testId={testId !== undefined ? `${testId}-period` : undefined}
-        {...filter}
-      />
-    );
-  }
-
-  if (filter.type === 'dateRangeWithoutPeriod') {
-    return (
-      <div style={{ width: 320 }}>
-        <FilterWithDates
-          value={value as unknown as IFilterWithDatesValue}
-          onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
-          onEndBtnSubmit={() => onChange(undefined)}
-          localeKey={translatesLocaleKey}
-          locale={translates}
-          testId={testId !== undefined ? `${testId}-dates` : undefined}
-          {...filter}
-        />
-      </div>
-    );
-  }
-
-  if (filter.type === 'multiSelect') {
-    return (
-      <FilterMultiSelect
-        value={value as unknown as IFilterMultiSelectValues<any>}
-        onChange={onChange}
-        onClose={onClose}
-        localeKey={translatesLocaleKey}
-        locale={translates}
-        testId={testId !== undefined ? `${testId}-multiSelect` : undefined}
-        {...filter}
-      />
-    );
-  }
-
-  if (filter.type === 'interval') {
-    return (
-      <FilterInterval
-        value={value as unknown as number[]}
-        onChange={onChange}
-        localeKey={translatesLocaleKey}
-        locale={translates}
-        labelName={filter.name}
-        testId={testId !== undefined ? `${testId}-interval` : undefined}
-        {...filter}
-      />
-    );
-  }
-
-  if (filter.type === 'boolean') {
-    return null;
-  }
-
-  if (filter.type === 'custom' && filter.component) {
-    const Component = filter.component;
-    return <Component {...props} filter={filter} />;
-  }
-
-  console.warn(
-    `%cДля фильтра ${filter.name} не задан тип или component`,
-    'background: red; color: black',
-  );
-
-  return null;
-}
+import { useMemo } from 'react';
+import { getLocale } from '../../helpers';
+import { IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../../types';
+import { FilterInterval } from '../FilterInterval';
+import { FilterMultiSelect } from '../FilterMultiSelect';
+import { FilterSelect } from '../FilterSelect';
+import { FilterWithDates } from '../FilterWithDates';
+import { FilterWithPeriod } from '../FilterWithPeriod';
+import type { IFilterWrapperProps } from '../FilterWrapper';
+
+export interface IFilterProps<Values, Key extends keyof Values>
+  extends IFilterWrapperProps<Values, Key> {
+  onChange: <V>(v: V) => void;
+  onClose?: () => void;
+}
+
+export function Filter<Values, Key extends keyof Values>(
+  props: IFilterProps<Values, Key>,
+): JSX.Element | null {
+  const { filter, value, onChange, onClose, localeKey, locale, testId } = props;
+  const translatesLocaleKey = filter.localeKey ?? localeKey;
+  const translates = useMemo(
+    () => getLocale(translatesLocaleKey, locale, filter.locale),
+    [translatesLocaleKey, locale, filter.locale],
+  );
+
+  if (filter.type === 'select') {
+    return (
+      <FilterSelect
+        value={value}
+        onChange={onChange}
+        onClose={onClose}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-select` : undefined}
+        {...filter}
+      />
+    );
+  }
+
+  if (filter.type === 'dateRange') {
+    return (
+      <FilterWithPeriod
+        value={{ ...value } as IPeriod}
+        onChange={onChange}
+        onClose={onClose}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-period` : undefined}
+        {...filter}
+      />
+    );
+  }
+
+  if (filter.type === 'dateRangeWithoutPeriod') {
+    return (
+      <div style={{ width: 320 }}>
+        <FilterWithDates
+          value={value as unknown as IFilterWithDatesValue}
+          onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
+          onEndBtnSubmit={() => onChange(undefined)}
+          localeKey={translatesLocaleKey}
+          locale={translates}
+          testId={testId !== undefined ? `${testId}-dates` : undefined}
+          {...filter}
+        />
+      </div>
+    );
+  }
+
+  if (filter.type === 'multiSelect') {
+    return (
+      <FilterMultiSelect
+        value={value as unknown as IFilterMultiSelectValues<any>}
+        onChange={onChange}
+        onClose={onClose}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-multiSelect` : undefined}
+        {...filter}
+      />
+    );
+  }
+
+  if (filter.type === 'interval') {
+    return (
+      <FilterInterval
+        value={value as unknown as number[]}
+        onChange={onChange}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        labelName={filter.name}
+        testId={testId !== undefined ? `${testId}-interval` : undefined}
+        {...filter}
+      />
+    );
+  }
+
+  if (filter.type === 'boolean') {
+    return null;
+  }
+
+  if (filter.type === 'custom' && filter.component) {
+    const Component = filter.component;
+    return <Component {...props} filter={filter} />;
+  }
+
+  console.warn(
+    `%cДля фильтра ${filter.name} не задан тип или component`,
+    'background: red; color: black',
+  );
+
+  return null;
+}

package/src/components/FiltersPane/components/Filter/index.ts

@@ -1 +1 @@
-export * from './Filter';
+export * from './Filter';

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -1,63 +1,63 @@
-import cloneDeep from 'lodash-es/cloneDeep';
-import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
-import { IButtonStyles } from '../../../Button';
-import { IInputStyles } from '../../../Input';
-import { innerTextButtonStyles } from '../../FiltersPane.styles';
-
-export const useStyles = createThemedStyles('FilterInterval', {
-  root: {
-    padding: 8,
-    background: colors.CLASSIC_WHITE,
-  },
-
-  inputWrapper: {
-    padding: [4, 12],
-    display: 'grid',
-    gridTemplateColumns: 'repeat(2, 1fr)',
-    gap: 20,
-    marginBottom: 12,
-  },
-
-  autosize: {
-    minWidth: 120,
-    height: 0,
-    opacity: 0,
-    paddingRight: 16,
-    fontSize: 16,
-    whiteSpace: 'pre',
-    userSelect: 'none',
-    pointerEvents: 'none',
-  },
-
-  clear: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  input: {
-    minWidth: 120,
-  },
-
-  tweakControlWrapper: {
-    icon: {
-      padding: 0,
-      width: 24,
-
-      '&:last-child': {
-        paddingRight: 0,
-      },
-    },
-  },
-};
-
-export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
-
-export type IFilterIntervalStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakInput: IInputStyles;
-    tweakClearButton: IButtonStyles;
-  }
->;
+import cloneDeep from 'lodash-es/cloneDeep';
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IInputStyles } from '../../../Input';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
+
+export const useStyles = createThemedStyles('FilterInterval', {
+  root: {
+    padding: 8,
+    background: colors.CLASSIC_WHITE,
+  },
+
+  inputWrapper: {
+    padding: [4, 12],
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: 20,
+    marginBottom: 12,
+  },
+
+  autosize: {
+    minWidth: 120,
+    height: 0,
+    opacity: 0,
+    paddingRight: 16,
+    fontSize: 16,
+    whiteSpace: 'pre',
+    userSelect: 'none',
+    pointerEvents: 'none',
+  },
+
+  clear: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  input: {
+    minWidth: 120,
+  },
+
+  tweakControlWrapper: {
+    icon: {
+      padding: 0,
+      width: 24,
+
+      '&:last-child': {
+        paddingRight: 0,
+      },
+    },
+  },
+};
+
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
+
+export type IFilterIntervalStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;

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

@@ -1,152 +1,152 @@
-import { FC, useMemo } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Button } from '../../../Button';
-import { NumberInput } from '../../../NumberInput';
-import { getLocale, sortValues } from '../../helpers';
-import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import {
-  clearButtonStyles,
-  IFilterIntervalStyles,
-  inputStyles,
-  useStyles,
-} from './FilterInterval.styles';
-
-export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles> {
-  value?: Array<number | undefined>;
-  onChange: (value?: Array<number | undefined>) => void;
-  labelName: string;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  withFieldNameInLabel?: boolean;
-  canBeFloat?: boolean;
-  fromInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
-  toInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
-}
-
-export const FilterInterval: FC<IFilterIntervalProps> = ({
-  data,
-  tweakStyles,
-  value,
-  labelName,
-  withFieldNameInLabel,
-  localeKey,
-  locale,
-  canBeFloat,
-  onChange,
-  fromInput,
-  toInput,
-  testId,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  const handleClear = () => {
-    onChange(undefined);
-  };
-
-  const handleFromChange = (v?: number) => {
-    if (v === undefined && value?.[1] === undefined) {
-      onChange(undefined);
-      return;
-    }
-    onChange(sortValues([v, value?.[1]]));
-  };
-
-  const handleToChange = (v?: number) => {
-    if (v === undefined && value?.[0] === undefined) {
-      onChange(undefined);
-      return;
-    }
-    onChange(sortValues([value?.[0], v]));
-  };
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'FilterInterval',
-  });
-
-  const tweakClearButtonStyles = useTweakStyles({
-    innerStyles: clearButtonStyles,
-    tweakStyles,
-    className: 'tweakClearButton',
-    currentComponentName: 'FilterInterval',
-  });
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      <div className={classes.inputWrapper}>
-        <div>
-          <NumberInput
-            onChange={handleFromChange}
-            value={value?.[0]}
-            label={
-              withFieldNameInLabel
-                ? `${labelName} ${translates.from.toLocaleLowerCase()}`
-                : translates.from
-            }
-            canBeFloat={canBeFloat}
-            isClearable
-            min={fromInput?.min}
-            max={fromInput?.max}
-            maxLength={fromInput?.maxLength}
-            tweakStyles={tweakInputStyles}
-            testId={getTestId(testId, 'start')}
-          />
-          {withFieldNameInLabel && (
-            <div className={classes.autosize}>
-              {labelName}&nbsp;{translates.from}
-            </div>
-          )}
-        </div>
-        <div>
-          <NumberInput
-            onChange={handleToChange}
-            value={value?.[1]}
-            label={
-              withFieldNameInLabel
-                ? `${labelName} ${translates.to.toLocaleLowerCase()}`
-                : translates.to
-            }
-            canBeFloat={canBeFloat}
-            isClearable
-            min={toInput?.min}
-            max={toInput?.max}
-            maxLength={toInput?.maxLength}
-            tweakStyles={tweakInputStyles}
-            testId={getTestId(testId, 'end')}
-          />
-          {withFieldNameInLabel && (
-            <div className={classes.autosize}>
-              {labelName}&nbsp;{translates.to}
-            </div>
-          )}
-        </div>
-      </div>
-      <div className={classes.clear}>
-        <Button
-          onClick={handleClear}
-          size="s"
-          view="text"
-          testId={getTestId(testId, 'clear-button')}
-          tweakStyles={tweakClearButtonStyles}
-        >
-          {translates.clear}
-        </Button>
-      </div>
-    </div>
-  );
-};
+import { FC, useMemo } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { NumberInput } from '../../../NumberInput';
+import { getLocale, sortValues } from '../../helpers';
+import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import {
+  clearButtonStyles,
+  IFilterIntervalStyles,
+  inputStyles,
+  useStyles,
+} from './FilterInterval.styles';
+
+export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles> {
+  value?: Array<number | undefined>;
+  onChange: (value?: Array<number | undefined>) => void;
+  labelName: string;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  withFieldNameInLabel?: boolean;
+  canBeFloat?: boolean;
+  fromInput?: {
+    min?: number;
+    max?: number;
+    maxLength?: number;
+  };
+  toInput?: {
+    min?: number;
+    max?: number;
+    maxLength?: number;
+  };
+}
+
+export const FilterInterval: FC<IFilterIntervalProps> = ({
+  data,
+  tweakStyles,
+  value,
+  labelName,
+  withFieldNameInLabel,
+  localeKey,
+  locale,
+  canBeFloat,
+  onChange,
+  fromInput,
+  toInput,
+  testId,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const handleClear = () => {
+    onChange(undefined);
+  };
+
+  const handleFromChange = (v?: number) => {
+    if (v === undefined && value?.[1] === undefined) {
+      onChange(undefined);
+      return;
+    }
+    onChange(sortValues([v, value?.[1]]));
+  };
+
+  const handleToChange = (v?: number) => {
+    if (v === undefined && value?.[0] === undefined) {
+      onChange(undefined);
+      return;
+    }
+    onChange(sortValues([value?.[0], v]));
+  };
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'FilterInterval',
+  });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterInterval',
+  });
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <div className={classes.inputWrapper}>
+        <div>
+          <NumberInput
+            onChange={handleFromChange}
+            value={value?.[0]}
+            label={
+              withFieldNameInLabel
+                ? `${labelName} ${translates.from.toLocaleLowerCase()}`
+                : translates.from
+            }
+            canBeFloat={canBeFloat}
+            isClearable
+            min={fromInput?.min}
+            max={fromInput?.max}
+            maxLength={fromInput?.maxLength}
+            tweakStyles={tweakInputStyles}
+            testId={getTestId(testId, 'start')}
+          />
+          {withFieldNameInLabel && (
+            <div className={classes.autosize}>
+              {labelName}&nbsp;{translates.from}
+            </div>
+          )}
+        </div>
+        <div>
+          <NumberInput
+            onChange={handleToChange}
+            value={value?.[1]}
+            label={
+              withFieldNameInLabel
+                ? `${labelName} ${translates.to.toLocaleLowerCase()}`
+                : translates.to
+            }
+            canBeFloat={canBeFloat}
+            isClearable
+            min={toInput?.min}
+            max={toInput?.max}
+            maxLength={toInput?.maxLength}
+            tweakStyles={tweakInputStyles}
+            testId={getTestId(testId, 'end')}
+          />
+          {withFieldNameInLabel && (
+            <div className={classes.autosize}>
+              {labelName}&nbsp;{translates.to}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={classes.clear}>
+        <Button
+          onClick={handleClear}
+          size="s"
+          view="text"
+          testId={getTestId(testId, 'clear-button')}
+          tweakStyles={tweakClearButtonStyles}
+        >
+          {translates.clear}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/FiltersPane/components/FilterInterval/index.ts

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