https://github.com/jshjohnson/Choices

58 кб правда

https://github.com/jshjohnson/Choices

неплохо но вот это че-то жесть :) classNames: { containerOuter: 'choices', containerInner: 'choices__inner', input: 'choices__input', inputCloned: 'choices__input--cloned', list: 'choices__list', listItems: 'choices__list--multiple', listSingle: 'choices__list--single', listDropdown: 'choices__list--dropdown', item: 'choices__item', itemSelectable: 'choices__item--selectable', itemDisabled: 'choices__item--disabled', itemChoice: 'choices__item--choice', group: 'choices__group', groupHeading : 'choices__heading', button: 'choices__button', activeState: 'is-active', focusState: 'is-focused', openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', hiddenState: 'is-hidden', flippedState: 'is-flipped', loadingState: 'is-loading', },

неплохо но вот это че-то жесть :) classNames: { containerOuter: 'choices', containerInner: 'choices__inner', input: 'choices__input', inputCloned: 'choices__input--cloned', list: 'choices__list', listItems: 'choices__list--multiple', listSingle: 'choices__list--single', listDropdown: 'choices__list--dropdown', item: 'choices__item', itemSelectable: 'choices__item--selectable', itemDisabled: 'choices__item--disabled', itemChoice: 'choices__item--choice', group: 'choices__group', groupHeading : 'choices__heading', button: 'choices__button', activeState: 'is-active', focusState: 'is-focused', openState: 'is-open', disabledState: 'is-disabled', highlightedState: 'is-highlighted', hiddenState: 'is-hidden', flippedState: 'is-flipped', loadingState: 'is-loading', },

кастомизация

да ну)

выносится в скрипт другой, похуй

лучше б кастомный render выдал

https://jets.js.org

вот идея интересная

лучше б кастомный render выдал

ну тут же типа vanila

так и что мешает?

короче одного глобального класса в качестве параметра думаю достаточно

не представляю как ты хочешь

Что за кастомизация такая, которая требует передать свои названия классов для внутренних элементов

Что за кастомизация такая, которая требует передать свои названия классов для внутренних элементов

как ты хочешь?

да говорю же, достаточно параметра containerClassName и всё

И через это можно стилизовать внутри всё что угодно. А вот если более серьёзная кастомизация требуется, а именно свой маркап, то лучше предоставить рендер хуки типа choiceRender, resultRender или вообще на все внутренности разом )

да говорю же, достаточно параметра containerClassName и всё

ну вообще да, согласен

https://jets.js.org

эх, нечеткий поиск на нем не реализовать

эх, нечеткий поиск на нем не реализовать

да, но идея крутая

определенно

внимание /!\ нубский вопрос /!\ как правильно прокидывать хендлер onChange из формы к глубоко вложенным полям ?

/!\ Нубский ответ /!\ Вроде, это) https://facebook.github.io/react/docs/context.html

А стоит ли использовать context?

Ну если и правда придется через 4 уровня прокидывать, то почему нет

Вряд ли таких мест много

о спс. но ваще прокидывание сквозь 2 уровня это трешак? какие существуют бест практики?

Гайз, подскажите чат по опыту взаимодействия (UX) и тому подобному

Гайз, подскажите чат по опыту взаимодействия (UX) и тому подобному

Тут норм

А стоит ли использовать context?

если реально глубокая вложенность или неясно откуда вызывать, то тут уже надо юзать экшены

внимание /!\ нубский вопрос /!\ как правильно прокидывать хендлер onChange из формы к глубоко вложенным полям ?

если без флюксов и реакт-вей, то через пропсы.

А если через редаксы то чо-то я не понимаю откуда брать функцию диспатч

Метод диспатч через пропсы прокидывать или в модуль засйвить и оттуда брать?

А я что-то не понимаю, как такая ситуация может возникнуть ) Из-за чего поля формы оказались "очень глубоко"? Внутри каких компонентов они находятся? Наверняка эти компоненты по сути тоже имеют к форме прямое отношение, а потому логично что они принимают onChange параметр, и надо прокидывать именно через пропсы

Метод диспатч через пропсы прокидывать или в модуль засйвить и оттуда брать?

Не нужен тебе dispatch в компоненте. Более того, компонент вообще не должен знать, какая архитектура для работы с данными у тебя используется. Подключи экшен один раз на корневом компоненте формы и через пропс прокидывай

внимание /!\ нубский вопрос /!\ как правильно прокидывать хендлер onChange из формы к глубоко вложенным полям ?

у самой формы есть onChange если что const name = element.getAttribute('name'); const value = getElementValue(element); …etc

Я просто прощупывают разные варианты построения приложения. Правильно ли я понял, что в сложном редакс- приложении мы должны многократно через 4 уровня писать : ‘‘‘ onChange={yhis.props.onChange} onClickToButtonA={this.props. onClickToButtonA} ... ‘‘‘ "

Ну у меня так сделано - форма имеет onChange, который при необходимости вызывает экшены. Каждое поле - отдельный компонент. Форма передает ему onChange. А как уж поле внутри себя там устроено - это не волнует форму. Главное сохранить единый интерфейс общения формы с полями. Если придется, то и через 4 вложенности надо прокидывать. Но как выше верно заметили, откуда у тебя взялась такая глубокая вложенность? )

Максимум, что я смог придумать - это Form -> FieldSet -> Field, но это всего 2 уровня )

Ок про иногда возникающую необходимость прокидывать через 2 уровня понял. Спасибо. Уровни у меня такие: 1. Группа форм 2. Форма 3. Обертка для группы полей. 4. Поле 5. Непосредственно инпут

Вероятно это путь вникуда). Но вот группа полей может заменяться на многократно вложенные группы полей

http://redux-form.com/5.3.1/#/?_k=yuc6ws

Хм... Слишком долго искать

Как там решается проблема?

Ок про иногда возникающую необходимость прокидывать через 2 уровня понял. Спасибо. Уровни у меня такие: 1. Группа форм 2. Форма 3. Обертка для группы полей. 4. Поле 5. Непосредственно инпут

Ну вот для всех этих полей абсолютно семантично принимать onChange хэндлер, потому передавай через всю цепочку. Другое дело что композицию мог бы сделать удобнее — <FormGroup> <FormField> <Input onChange={this.props.handleChange} /> </FormField> </FormGroup> и ничего передавать не надо

Я бы на твоем месте разбил одну задачу на несколько: - компонент поля 4. Поле 5. Непосредственно инпут - компонент(ы) формы 2. Форма 3. Обертка для группы полей. 4. компонент поля - компонент(ы) группы форм 1. Группа форм 2. компонент(ы) формы И уже у каждой группы компонентов свои особенности реализации. Например, форме пофиг, как там поле устроено, она просто передала ему onChange. А полю в свою очередь пофиг, кто там передал ему этот хендлер. В теории это поле даже без формы можно использовать, просто соблюдая интерфейс общения. И тогда проблема передачи через вложенность станет менее проблемной, так как будет размазана на разные компоненты

ОО! Спасибо за солюшин

Ребят, привет! Кто знает лучший способ разделить компоненты на мобильные/десктоп для страницы? Может даже на уровне рутера? (о_О)

Ребят, привет! Кто знает лучший способ разделить компоненты на мобильные/десктоп для страницы? Может даже на уровне рутера? (о_О)

зачем?

это другой вопрос

например сильно разный UX

например сильно разный UX

npm i platform , пробрасываешь пропс в корневой компонент, и рендеришь разные компоненты где тебе надо в зависимости от пропса от platform

ок, спасибо, смотрю что там

но бандл все-равно будет содержать все компоненты. Иначе чанки делать надо

это понятно

@superlaziness , я не уверен что это оптимальный вариант, но я бы так начал делать

Если прям по жести разделять, то делаешь два рута корневых и через requre.ensure грузишь либо один либо второй

определять платформу звучит как плохая идея

лучше смотреть на ширину экрана и всё

определять платформу звучит как плохая идея

а если ssr?

ERROR: S client not available

а если ssr?

а в чем разница?

он не знает ширины

и не знает экрана

грустно)

Можно угадать по юзерагенту

Можно угадать по юзерагенту

ну вот плохая идея это :( http://webaim.org/blog/user-agent-string-history/

надо по фичам смотреть

не просто так модернайзеры изобрели

на сервере по фичам ?

на сервере по фичам ?

да нет конечно

к сожалению )

дак причем здесь сожаление то?

и грусть )

вот я то же не понимаю

есть задача, надо решить

Ребят, кто-нибудь из вас юзает draft.js? Сам редактор у меня работает нормально, но вот как эту дичь экспортировать в стрингу?)

есть задача, надо решить

на уровне css не получается?

получается легко

но задача другая

нужно рендерить разные компоненты для мобильного и десктопа.

ну ты уже понял что на сервере ты это сделать не можешь

поэтому придется отказаться либо от одного либо от другого

по юзерагенту можно

хехе https://css-tricks.com/make-client-side-data-available-server-side/ ) спорно конечно

через куки? хм

ну кстати вариант

ну в первый раз у тебя всё равно информации не будет

потому нужны хаки типа релоада

что конечно таксе