Multiselect

[maestrow]

No description provided.

[serjout]

это нестандартная штука. она заведомо несовместима со всеми браузерами. поэтому лучше убрать.

[serjout]

у нас принят camelСase во всем кроме именования классов css ))

[serjout]

как-то не очень эта штука выглядит по след. соображениям:

1. создается впечатления что этих цветов несколько, а по факту он один.
2. ломается механизм cssClasses
   и имя bgcolor не похож на camel case ))

там сейчас в less файле есть переменная @dropdownInputBgColor кстати.
предлагаю завести css custom property там же

:root {
    --dropdown-input-button-bg-color: @dropdownInputBgColor;
}

.dropdown-input__botton {
    background: var(--dropdown-input-button-bg-color);
}

и все. при необходимости перекрасить кнопку - это можно будет в css того компонента который использует внутри себя этот дропдаун

соответсвенно js код компонента менять вообще не надо

[serjout]

можт в Icon добавить эту иконку? Вдруг еще где пригодится

сейчас эта иконка спрятана в компоненте, при таком раскладе можно обойтись и без экспорта svg в js. а просто в css задать кнопке background image

[maestrow]

Если иконка не будет внутри папки компонента, а будет в Icons, то в этом случае также можно будет импортировать ее в js, препятствий не будет. Я делал

<div class="close-button"></div>
.close-button {
    color: green;
    background: url(ссылка на иконку);
}

Иконка зеленой не стала. Пробовал color указывать и у родителя, тоже никакого эффекта. Может надо background не ссылкой, а background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); и тогда получится?

[serjout]

если svg в background то она расценивается как просто картинка. к ней color: green; не применяется.

если же svg является частью DOM то применяется currentColor.

поэтому давайте добавим крестик в components/common/Icon

[serjout]

throttle и debounce таки немного разные штуки. лучше переименовать чтобы не запутаться в терминологии. ну это я немного придираюсь).

кстати это можно вообще const вверху модуля описать. не думаю что кто-то будет это менять

[serjout]

onДействиеГде

если где-то встерчается onButtonClick - значит я накосячил )

[serjout]

это прикольная штука ))

[serjout]

this.onChangeCheckbox.bind(this, value) - на каждой итерации перерисовки создаётся новая функция и оптимизация PureComponent не работает

[serjout]

тоже странная штука.

1. bind тут неоптимально используется - проще было createListItem (и кстати тогда уж renderListItem) один раз при создании интстанса забиндить к this:
   createListItem = (item: T) => { ....... }

2. тут вообще все можно упростить

 <div className="multiselect__list-container">
    <filteredList.map((item: T) => 
        <Checkbox 
               value={checked or not} 
               name={get(this.props.dataIndex, item)} 
               onChange={this. onChangeCheckbox} />)

protected onChangeCheckbox = (
        params: ITogglerChangeParams,
) => {
...
params.name - тут будет имя item'a
...

[maestrow]

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