Size: a a a

2020 June 06

yW

yarastqt World in БЭМ
Это хороший фидбек, что не понятно, документацию нужно дорабатывать 🙁
Функция withBemMod позволяет создавать модификаторы, которые будут включатья по условию в предикате:
withBemMod('Button', { view: 'action' })

<Button view="action" /> // -> className=Button Button_view_action

Необходимо для того, чтобы иметь возможность описывать модификаторы отдельно и использовать в проекте или фиче только то, что тебе нужно
источник

АН

Авроамэриканец Начрэ... in БЭМ
yarastqt World
Это хороший фидбек, что не понятно, документацию нужно дорабатывать 🙁
Функция withBemMod позволяет создавать модификаторы, которые будут включатья по условию в предикате:
withBemMod('Button', { view: 'action' })

<Button view="action" /> // -> className=Button Button_view_action

Необходимо для того, чтобы иметь возможность описывать модификаторы отдельно и использовать в проекте или фиче только то, что тебе нужно
А значение view может быть массивом, если могут быть разные значения, например?
источник

yW

yarastqt World in БЭМ
Может быть юнион:
withBemMod('Button', { view: 'action' })
withBemMod('Button', { view: 'clear' })

<Button view="action" /> // -> className=Button Button_view_action
<Button view="clear" /> // -> className=Button Button_view_clear
источник

АН

Авроамэриканец Начрэ... in БЭМ
А bem-react/core можно использовать в чистом js без typescript? Я собираю вебпаком, могу я указать tsx компонент в импорте и использовать его в ванильном js коде?

Имею в виду не реакт компонент, а bem-react/core функции
источник

yW

yarastqt World in БЭМ
Да, типы ts это опциональная вещь, весь код поставляется в виде обычного js кода + заголовочные файлы
источник

АН

Авроамэриканец Начрэ... in БЭМ
Что здесь означают свойства?
withNaming({ n: 'ns-', e: '__', m: '_', v: '_' })
Взято из https://github.com/bem/bem-react/tree/master/packages/classname

Элемент и модификатор, понятно. А что такое n и v?
источник

АН

Авроамэриканец Начрэ... in БЭМ
Всё, понял
источник

АН

Авроамэриканец Начрэ... in БЭМ
Есть ли в bem-react/core инструменты, похожие по функционалу на эти две функции?

Для вытаскивания из объекта свойств подходящих под описание в декларации и для отсеивания из объекта таких свойств (возможно с списком исключений как на картинке). Это популярные действия. Я сейчас напишу эти функции сам, но если у вас уже есть что-то подобное, расскажите как это использовать
источник

yW

yarastqt World in БЭМ
Не совсем понял, у тебя функция extractMods возвращает объект с частичным совпадением?
источник

АН

Авроамэриканец Начрэ... in БЭМ
yarastqt World
Не совсем понял, у тебя функция extractMods возвращает объект с частичным совпадением?
Возвращает свойства объекта из второго атрибута, которые совпадают с описанием из первого. Вот примерная реализация
источник

yW

yarastqt World in БЭМ
Так, а в чем смысл такого?
Ты можешь написать вот так:
cn('list', {
 size: this.props.size,
 width: this.props.width,
})
источник

yW

yarastqt World in БЭМ
Просто выглядит так, что ты реализуешь некую ран-тайм валидацию входных свойств, которые являются заранее известным набором, тут есть два пути:
1. Использовать типизацию ts/flow
2. Использовать проверку типов из коробки через propTypes
источник

АН

Авроамэриканец Начрэ... in БЭМ
Декларация описывает возможные значения. И игнорирует свойства с не корректными
источник

yW

yarastqt World in БЭМ
Все что ты описал, можно сделать через оба пункта выше)
источник

yW

yarastqt World in БЭМ
propTypes = {
 size: PropTypes.oneOf(['s', 'm', 'l'])
 ...
}
источник

yW

yarastqt World in БЭМ
С таким подходом у тебя легче продакшен рантайм, т.к. в прод. сборке это все удаляется
источник

АН

Авроамэриканец Начрэ... in БЭМ
yarastqt World
propTypes = {
 size: PropTypes.oneOf(['s', 'm', 'l'])
 ...
}
О, круто. Кажется это то что нужно
источник

АН

Авроамэриканец Начрэ... in БЭМ
yarastqt World
Все что ты описал, можно сделать через оба пункта выше)
А что делать, если мне нужно вставить некоторые пропсы как модификаторы и пробросить остальные, исключая эти? Например, пропсы событий и данных для другого компонента. Есть для этого какой-нибудь инструмент или короткий способ решения? Сейчас перебираю пропсы с созданием нового объекта без ненужных свойств
источник

yW

yarastqt World in БЭМ
Дак у тебя уже заранее известен набор, сделай спред остального:
const { size, disabled, mode, …props } = this.props
return <div clsasName={cn({ size, disabled, mode})} {…props} />
источник
2020 June 07

АН

Авроамэриканец Начрэ... in БЭМ
yarastqt World
Дак у тебя уже заранее известен набор, сделай спред остального:
const { size, disabled, mode, …props } = this.props
return <div clsasName={cn({ size, disabled, mode})} {…props} />
Как быть с свойствами вида item-nowrap? Это не валидное имя для переменной
источник