@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.0

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -1,167 +1,167 @@
-import { useState, useRef, RefObject } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Icon } from '../../../Icon';
-import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import { Filter } from '../Filter';
-import { FilterValueView } from '../FilterValueView';
-import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
-
-export interface IFilterWrapperProps<Values, Key extends keyof Values>
-  extends ICommonProps<IFilterWrapperStyles> {
-  filter: ConfigItem<Values[Key]>;
-  value?: Values[Key];
-  isDisabled?: boolean;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  filtersPaneRef: RefObject<HTMLDivElement> | null;
-  onChange: <V>(value: V) => void;
-}
-
-export function FilterWrapper<Values, Key extends keyof Values>({
-  filter,
-  value,
-  isDisabled,
-  locale,
-  localeKey,
-  data,
-  testId,
-  filtersPaneRef,
-  tweakStyles,
-  onChange,
-}: IFilterWrapperProps<Values, Key>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakFilterValueViewStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakValueView',
-    currentComponentName: 'FilterWrapper',
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const refItem = useRef<HTMLDivElement>(null);
-
-  const { type } = filter;
-
-  let hasValue = false;
-
-  if (Array.isArray(value) && value.length > 0) {
-    hasValue = true;
-  } else if (
-    typeof value === 'object' &&
-    Object.values(value as unknown as Record<any, any>).some((v) =>
-      Array.isArray(v) ? v.length > 0 : Boolean(v),
-    )
-  ) {
-    hasValue = true;
-  } else if (!Array.isArray(value) && typeof value !== 'object') {
-    hasValue = Boolean(value);
-  }
-
-  // Для того, чтобы фильтр закрывался, если мы работаем с простыми значениями, типа селекта
-  function handleChange<V>(v: V) {
-    if (type === 'select') {
-      setIsOpen(false);
-    }
-    onChange(v);
-  }
-
-  const handleLabelClick = () => {
-    if (!isBoolean && !isDisabled) {
-      setIsOpen(!isOpen);
-    }
-
-    if (isBoolean) {
-      onChange(!value);
-    }
-  };
-
-  const handleOnClose = () => {
-    setIsOpen(false);
-  };
-
-  const isBoolean = filter.type === 'boolean';
-
-  return !filter.isInline ? (
-    <div
-      className={clsx(classes.root, {
-        [classes.noValue]: !hasValue,
-        [classes.openNoValue]: isOpen && !hasValue,
-        [classes.withValue]: !isOpen && hasValue,
-        [classes.openWithValue]: isOpen && hasValue,
-        [classes.boolean]: isBoolean,
-        [classes.disabled]: isDisabled,
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <div
-        ref={refItem}
-        onClick={handleLabelClick}
-        className={clsx(classes.item, {
-          [classes.booleanItem]: isBoolean,
-        })}
-      >
-        <div className={classes.name}>{filter.name}</div>
-        {!isBoolean && value !== undefined && value !== null && (
-          <div className={classes.value}>
-            <FilterValueView
-              value={value}
-              filter={filter}
-              localeKey={localeKey}
-              locale={locale}
-              testId={getTestId(testId, 'value')}
-              tweakStyles={tweakFilterValueViewStyles}
-            />
-          </div>
-        )}
-        {!isBoolean && (
-          <div className={clsx(classes.iconContainer, isOpen && classes.open)}>
-            <Icon type="chevron-down" />
-          </div>
-        )}
-      </div>
-      <CSSTransition
-        in={isOpen}
-        timeout={150}
-        unmountOnExit
-        classNames={{
-          enter: classes['dropdown-enter'],
-          enterActive: classes['dropdown-enter-active'],
-          exit: classes['dropdown-exit'],
-          exitActive: classes['dropdown-exit-active'],
-        }}
-      >
-        <Filter
-          value={value}
-          filter={filter}
-          localeKey={localeKey}
-          locale={locale}
-          onClose={handleOnClose}
-          onChange={handleChange}
-          parentRef={refItem}
-          filtersPaneRef={filtersPaneRef}
-          testId={testId}
-          classes={classes}
-        />
-      </CSSTransition>
-    </div>
-  ) : (
-    <Filter
-      value={value}
-      filter={filter}
-      localeKey={localeKey}
-      locale={locale}
-      onClose={handleOnClose}
-      onChange={onChange}
-      isInline
-      filtersPaneRef={filtersPaneRef}
-      testId={testId}
-      classes={classes}
-    />
-  );
-}
+import { useState, useRef, RefObject } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Icon } from '../../../Icon';
+import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { Filter } from '../Filter';
+import { FilterValueView } from '../FilterValueView';
+import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
+
+export interface IFilterWrapperProps<Values, Key extends keyof Values>
+  extends ICommonProps<IFilterWrapperStyles> {
+  filter: ConfigItem<Values[Key]>;
+  value?: Values[Key];
+  isDisabled?: boolean;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  filtersPaneRef: RefObject<HTMLDivElement> | null;
+  onChange: <V>(value: V) => void;
+}
+
+export function FilterWrapper<Values, Key extends keyof Values>({
+  filter,
+  value,
+  isDisabled,
+  locale,
+  localeKey,
+  data,
+  testId,
+  filtersPaneRef,
+  tweakStyles,
+  onChange,
+}: IFilterWrapperProps<Values, Key>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakFilterValueViewStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakValueView',
+    currentComponentName: 'FilterWrapper',
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+  const refItem = useRef<HTMLDivElement>(null);
+
+  const { type } = filter;
+
+  let hasValue = false;
+
+  if (Array.isArray(value) && value.length > 0) {
+    hasValue = true;
+  } else if (
+    typeof value === 'object' &&
+    Object.values(value as unknown as Record<any, any>).some((v) =>
+      Array.isArray(v) ? v.length > 0 : Boolean(v),
+    )
+  ) {
+    hasValue = true;
+  } else if (!Array.isArray(value) && typeof value !== 'object') {
+    hasValue = Boolean(value);
+  }
+
+  // Для того, чтобы фильтр закрывался, если мы работаем с простыми значениями, типа селекта
+  function handleChange<V>(v: V) {
+    if (type === 'select') {
+      setIsOpen(false);
+    }
+    onChange(v);
+  }
+
+  const handleLabelClick = () => {
+    if (!isBoolean && !isDisabled) {
+      setIsOpen(!isOpen);
+    }
+
+    if (isBoolean) {
+      onChange(!value);
+    }
+  };
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  const isBoolean = filter.type === 'boolean';
+
+  return !filter.isInline ? (
+    <div
+      className={clsx(classes.root, {
+        [classes.noValue]: !hasValue,
+        [classes.openNoValue]: isOpen && !hasValue,
+        [classes.withValue]: !isOpen && hasValue,
+        [classes.openWithValue]: isOpen && hasValue,
+        [classes.boolean]: isBoolean,
+        [classes.disabled]: isDisabled,
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <div
+        ref={refItem}
+        onClick={handleLabelClick}
+        className={clsx(classes.item, {
+          [classes.booleanItem]: isBoolean,
+        })}
+      >
+        <div className={classes.name}>{filter.name}</div>
+        {!isBoolean && value !== undefined && value !== null && (
+          <div className={classes.value}>
+            <FilterValueView
+              value={value}
+              filter={filter}
+              localeKey={localeKey}
+              locale={locale}
+              testId={getTestId(testId, 'value')}
+              tweakStyles={tweakFilterValueViewStyles}
+            />
+          </div>
+        )}
+        {!isBoolean && (
+          <div className={clsx(classes.iconContainer, isOpen && classes.open)}>
+            <Icon type="chevron-down" />
+          </div>
+        )}
+      </div>
+      <CSSTransition
+        in={isOpen}
+        timeout={150}
+        unmountOnExit
+        classNames={{
+          enter: classes['dropdown-enter'],
+          enterActive: classes['dropdown-enter-active'],
+          exit: classes['dropdown-exit'],
+          exitActive: classes['dropdown-exit-active'],
+        }}
+      >
+        <Filter
+          value={value}
+          filter={filter}
+          localeKey={localeKey}
+          locale={locale}
+          onClose={handleOnClose}
+          onChange={handleChange}
+          parentRef={refItem}
+          filtersPaneRef={filtersPaneRef}
+          testId={testId}
+          classes={classes}
+        />
+      </CSSTransition>
+    </div>
+  ) : (
+    <Filter
+      value={value}
+      filter={filter}
+      localeKey={localeKey}
+      locale={locale}
+      onClose={handleOnClose}
+      onChange={onChange}
+      isInline
+      filtersPaneRef={filtersPaneRef}
+      testId={testId}
+      classes={classes}
+    />
+  );
+}

package/src/components/Flag/Flag.stories.tsx

@@ -1,29 +1,29 @@
-import { countries } from 'country-flag-icons';
-import { ComponentStory } from '@storybook/react';
-import { Flag } from './Flag';
-
-export default {
-  title: 'Data Display/Flag',
-  component: Flag,
-  argTypes: {
-    countryCode: { control: 'select', options: countries },
-  },
-};
-
-const Template: ComponentStory<typeof Flag> = (args) => (
-  <div style={{ width: 60, height: 40 }}>
-    <Flag {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  countryCode: 'ug',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
-  },
-};
+import { countries } from 'country-flag-icons';
+import { ComponentStory } from '@storybook/react';
+import { Flag } from './Flag';
+
+export default {
+  title: 'Data Display/Flag',
+  component: Flag,
+  argTypes: {
+    countryCode: { control: 'select', options: countries },
+  },
+};
+
+const Template: ComponentStory<typeof Flag> = (args) => (
+  <div style={{ width: 60, height: 40 }}>
+    <Flag {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  countryCode: 'ug',
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data'],
+  },
+};

package/src/components/Flag/Flag.tsx

@@ -1,26 +1,26 @@
-import { FC } from 'react';
-import { hasFlag } from 'country-flag-icons';
-import Flags from 'country-flag-icons/react/3x2';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { useStyles, IFlagStyles } from './Flag.styles';
-
-export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
-  /** @default '' */
-  countryCode?: string;
-}
-
-export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-  const CC = countryCode.toUpperCase();
-
-  const TheFlag = hasFlag(CC)
-    ? Flags[CC as keyof typeof Flags]
-    : () => (
-        <div className={classes.noFlag}>
-          <Icon type="minus" />
-        </div>
-      );
-
-  return <TheFlag className={classes.root} />;
-};
+import { FC } from 'react';
+import { hasFlag } from 'country-flag-icons';
+import Flags from 'country-flag-icons/react/3x2';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { useStyles, IFlagStyles } from './Flag.styles';
+
+export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
+  /** @default '' */
+  countryCode?: string;
+}
+
+export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+  const CC = countryCode.toUpperCase();
+
+  const TheFlag = hasFlag(CC)
+    ? Flags[CC as keyof typeof Flags]
+    : () => (
+        <div className={classes.noFlag}>
+          <Icon type="minus" />
+        </div>
+      );
+
+  return <TheFlag className={classes.root} />;
+};

package/src/components/Flag/augment.d.ts

@@ -1 +1 @@
-declare module 'country-flag-icons/react/3x2';
+declare module 'country-flag-icons/react/3x2';