bem / bem/bem-react

@bem-react/core: proposal for props from withBemMod

Open
#381 3 comments 6 reactions 0 assignees View on GitHub
improvement
Dominant language
TypeScript
Stars
450
Forks
69
PR merge metrics
No merged PRs in 30d

Description

## Проблема
Хочется иметь возможность контролировать свойства которые будут переданы в оборачиваемый компонент из модификатора.

Имеется кейс:

```tsx
const Button = ({ type = 'button', ...props }) => (

)

const withTypeLink = withBemMod('Button', { type: 'link' })
const EnhancedButton = withTypeLink(Button)
const renderer = () =>
// Результат ->
// Получаем невалидное HTML свойство type="link"
```

Хотелось бы, чтобы в обернутый компонент не попадали определенные свойства, которые будут невалидны для HTML размети, можно было бы сделать `omit` для такого свойства:

```ts
const withTypeLink = withBemMod('Button', { type: 'link' }, (WrappedComponent) => (
({ type, ...props }) =>
))
```

Но такой вариант слишком громоздкий, а подобных кейсов очень много.

## Предложение
По дефолту удалять те свойства на которые сматчился модификатор, но дать возможность оставлять нужные свойства, передав в качестве второго аргумента массив из предиката и свойств которые нужно оставить (либо сделать наоборот).

### Вариант 1

```ts
const withTypeLink = withBemMod('Button', { type: 'link' })
// В обернутый компонент не попадет свойство type: link
```

```ts
const withTypeLink = withBemMod('Button', [{ type: 'link' }, 'type' [, ...etc]])
// В обернутый компонент попадет свойство type: link
```

### Вариант 2

```ts
const withTypeLink = withBemMod('Button', { type: 'link' })
// В обернутый компонент попадет свойство type: link
```

```ts
const withTypeLink = withBemMod('Button', [{ type: 'link' }, 'type' [, ...etc]])
// В обернутый компонент не попадет свойство type: link
```

_Свойства можно удалять/оставлять только те, что описаны в интерфейсе модификатора._

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.