feat(select): split base-option

.changeset/fresh-seals-promise.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-select': minor
+---
+
+   - Сделан сплит д/м для select/base-option
+   - В select/shared добавлены BaseOptionDesktop и BaseOptionMobile

packages/select/src/components/base-option/Component.responsive.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { OptionProps } from '../../typings';
+
+import { BaseOptionDesktop } from './desktop/Component';
+import { BaseOptionMobile } from './mobile/Component';
+
+export const BaseOptionResponsive = ({ mobile = false, ...props }: OptionProps) =>
+    mobile ? <BaseOptionMobile {...props} /> : <BaseOptionDesktop {...props} />;

packages/select/src/components/base-option/Component.tsx

@@ -1,12 +1,24 @@
 import React, { FC, isValidElement } from 'react';
 import cn from 'classnames';
 
-import { OptionProps } from '../../typings';
+import { OptionCommonProps } from '../../typings';
 import { BaseCheckmark } from '../base-checkmark';
 
-import styles from './index.module.css';
+import type stylesDesktop from './desktop/index.module.css'
+import type stylesMobile from './mobile/index.module.css'
 
-export const BaseOption: FC<OptionProps> = ({
+type OptionPrivateProps = {
+    /**
+     * Мобильная версия option.
+     */
+    mobile: boolean;
+    /**
+     * Стили
+     */
+    styles: typeof stylesDesktop | typeof stylesMobile;
+}
+
+export const BaseOptionCommon: FC<OptionCommonProps & OptionPrivateProps> = ({
     className,
     option,
     children,
@@ -19,7 +31,8 @@ export const BaseOption: FC<OptionProps> = ({
     align = 'center',
     innerProps,
     dataTestId,
-    mobile = false,
+    mobile,
+    styles
 }) => {
     const content = children || option.content || option.key;
     const { showCheckMark = true } = option;
@@ -53,7 +66,6 @@ export const BaseOption: FC<OptionProps> = ({
                 [styles.selected]: selected,
                 [styles.disabled]: disabled,
                 [styles.textContent]: isTextContent,
-                [styles.mobile]: mobile,
                 [styles.checkmarkAfter]: !isTextContent && checkmarkPosition === 'after',
                 [styles.checkmarkBefore]: !isTextContent && checkmarkPosition === 'before',
             })}

packages/select/src/components/base-option/desktop/Component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { OptionCommonProps } from '../../../typings';
+import { BaseOptionCommon } from '../Component';
+
+import styles from './index.module.css'
+
+export const BaseOptionDesktop = (props: OptionCommonProps) =>
+    <BaseOptionCommon {...props} mobile={false} styles={styles} />;

packages/select/src/components/base-option/desktop/index.module.css

@@ -0,0 +1,22 @@
+@import '../../../../../vars/src/index.css';
+@import '../../../vars.css';
+@import '../index.module.css';
+
+.option {
+    &.checkmarkBefore {
+        padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-12);
+    }
+
+    &.checkmarkAfter.checkmarkAfter {
+        padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-0);
+    }
+
+    &.textContent {
+        padding: var(--gap-12);
+    }
+}
+
+.highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color);
+}

packages/select/src/components/base-option/index.module.css

@@ -18,30 +18,6 @@
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
     }
-
-    &.checkmarkBefore {
-        padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-12);
-
-        &.mobile {
-            padding-left: var(--gap-16);
-        }
-    }
-
-    &.checkmarkAfter.checkmarkAfter {
-        padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-0);
-
-        &.mobile {
-            padding-right: var(--gap-20);
-        }
-    }
-
-    &.textContent {
-        padding: var(--gap-12);
-
-        &.mobile {
-            padding: var(--gap-16) var(--gap-20) var(--gap-16) var(--gap-16);
-        }
-    }
 }
 
 .selected {
@@ -50,11 +26,6 @@
     cursor: default;
 }
 
-.highlighted {
-    background: var(--select-option-hover-background);
-    color: var(--select-option-hover-color);
-}
-
 .disabled {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);

packages/select/src/components/base-option/index.ts

@@ -1 +1,3 @@
-export * from './Component';
+export * from './desktop/Component';
+export * from './mobile/Component';
+export { BaseOptionResponsive as BaseOption } from './Component.responsive';

packages/select/src/components/base-option/mobile/Component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { OptionCommonProps } from '../../../typings';
+import { BaseOptionCommon } from '../Component';
+
+import styles from './index.module.css'
+
+export const BaseOptionMobile = (props: OptionCommonProps) =>
+    <BaseOptionCommon {...props} mobile={true} styles={styles} />;

packages/select/src/components/base-option/mobile/index.module.css

@@ -0,0 +1,17 @@
+@import '../../../../../vars/src/index.css';
+@import '../../../vars.css';
+@import '../index.module.css';
+
+.option {
+    &.checkmarkBefore {
+        padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-16);
+    }
+
+    &.checkmarkAfter.checkmarkAfter {
+        padding: var(--gap-0) var(--gap-20) var(--gap-0) var(--gap-0);
+    }
+
+    &.textContent {
+        padding: var(--gap-16) var(--gap-20) var(--gap-16) var(--gap-16);
+    }
+}

packages/select/src/typings.ts

@@ -717,7 +717,7 @@ export type OptgroupProps = {
     multiple?: boolean;
 };
 
-export type OptionProps = {
+export type OptionCommonProps = {
     /**
      * Дополнительный класс
      */
@@ -795,9 +795,11 @@ export type OptionProps = {
      * Выравнивание чекбокса или иконки "галочки"
      */
     align?: 'start' | 'center';
+};
 
+export type OptionProps = OptionCommonProps & {
     /**
-     * Мобильная верcия option.
+     * Мобильная версия option.
      */
     mobile?: boolean;
 };