bem / bem-react

A set of tools for developing user interfaces using the BEM methodology in React
http://bem.github.io/bem-react
Other
440 stars 64 forks source link

@bem-react/core: Props added inside modifier #435

Open Vittly opened 5 years ago

Vittly commented 5 years ago

Есть компонент CarouselControls с пропсами:

export interface ICarouselControlsProps extends IClassNameProps {
    items?: ICarouselControlsItemProps[];
    colored?: boolean;
    theme?: 'images';
}

Под модификатором colored добавляется проп colorScheme:

export interface ICarouselControlsColoredProps {
    colorScheme?: string;
}

export const carouselControlsColored = withBemMod<ICarouselControlsColoredProps, ICarouselControlsProps>(...);

Прямо сейчас такой код:

const CarouselControlsWithMods = compose(carouselControlsColored, CarouselControlsThemeImages)(CarouselControlBase);

<CarouselControlsWithMods /* подсказка IDE */

Показывает такую подсказку в IDE.

Это может запутать разработчика, потому что проп colorScheme можно написать сразу, но работает он только под модификатором colored - о чем в подсказке ни слова

Vittly commented 5 years ago

Обсудили с @awinogradov и @yarastqt.

Были такие предложения:

  1. Написать монстра const carousel: React.FC<Omit<ExtractProps<typeof CarouselControlsWithMods>, 'colored'>> = props => <CarouselControlsWithMods {...props} colored/>;
  2. Экспортировать из модификатора сам HOC (третий аргумент withBemMod) и результат withBemMod, чтобы можно было добавлять HOC без предиката
  3. Договориться под модификатором не добавлять пропсы. А делать это через отдельные HOC-и

Решили, что 3-ий подход лучше. Надо увековечить это в доке