HEX

File: //var/www/design.system/src/molecules/Inputs/Select/Select.tsx
import { Select as SelectAntd, ConfigProvider, SelectProps } from 'antd';
import './сustom.scss';
import styles from './Select.module.scss';
import cn from 'classnames';
import Icon from '../../../atoms/Icon/Icon.tsx';
import Body from '../../../atoms/Typography/Body/Body.tsx';

const customTheme = {
  components: {
    Select: {
      hoverBorderColor: 'var(--borderBrandPrimary)',
      activeBorderColor: 'var(--borderBrandPrimary)',
    },
  },
};

interface ISelectProps extends SelectProps {
  label?: string;
  className?: string;
}

/**
 * Кастомный Select компонент на основе Ant Design.
 *
 * Поддерживает все стандартные пропсы Ant Design Select.
 *
 * Полную документацию смотрите на официальном сайте: https://ant.design/components/select#api
 */

const Select = ({ label, className, ...rest }: ISelectProps) => {
  return (
    <ConfigProvider theme={customTheme}>
      <div
        className={cn(
          styles.root,
          {
            [styles.disabled]: rest.disabled,
          },
          className
        )}
      >
        {label && <Body className={styles.label}>{label}</Body>}
        <SelectAntd
          className={cn('customSelectStyle')}
          onChange={rest.onChange}
          labelRender={({ label }) => <Body isSingleLine={true}>{label}</Body>}
          suffixIcon={<Icon name={'chevron-down'} size={16} />}
          placeholder={<Body isSingleLine={true}>{rest.placeholder}</Body>}
          notFoundContent={'Ничего не найдено'}
          {...rest}
        />
      </div>
    </ConfigProvider>
  );
};

export default Select;