refactor(select): reworked selectMobile component with apply feature #599

NikitaRodyukov · 2023-03-22T09:58:27Z

Опишите проблему

Невозможно использовать хук useSelectWithApply вместе с компонентом SelectMobile, также нельзя контролировать состояние выбора снаружи компонента

changeset-bot · 2023-03-22T09:58:30Z

🦋 Changeset detected

Latest commit: 4964d33

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@alfalab/core-components-select	Major
@alfalab/core-components-input-autocomplete	Patch
@alfalab/core-components-intl-phone-input	Patch
@alfalab/core-components-picker-button	Patch
@alfalab/core-components-select-with-tags	Patch
@alfalab/core-components-table	Patch
@alfalab/core-components-tabs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coveralls · 2023-03-22T10:06:52Z

Pull Request Test Coverage Report for Build 4655550796

107 of 138 (77.54%) changed or added relevant lines in 10 files are covered.
37 unchanged lines in 4 files lost coverage.
Overall coverage increased (+0.3%) to 80.602%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/select/src/components/base-select-mobile/Component.tsx	11	12	91.67%
packages/select/src/presets/useSelectWithApply/options-list-with-apply/Component.tsx	4	6	66.67%
packages/select/src/components/base-select-mobile/footer/Component.tsx	6	10	60.0%
packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/Component.tsx	4	9	44.44%
packages/select/src/components/select-modal-mobile/Component.tsx	5	14	35.71%
packages/select/src/components/virtual-options-list/Component.tsx	58	68	85.29%

Files with Coverage Reduction	New Missed Lines	%
packages/select/src/components/select-modal-mobile/Component.tsx	1	15.38%
packages/textarea/src/Component.tsx	4	86.44%
packages/bottom-sheet/src/component.tsx	9	83.87%
packages/select/src/presets/useSelectWithApply/options-list-with-apply/Component.tsx	23	8.93%

Totals
Change from base Build 4509342968:	0.3%
Covered Lines:	7823
Relevant Lines:	8807

💛 - Coveralls

core-ds-bot · 2023-03-22T10:21:43Z

Собрана новая демка.

core-ds-bot · 2023-03-22T11:49:13Z

Собрана новая демка.

reme3d2y · 2023-03-23T02:17:40Z

Тут есть нюанс, что по дефолту мобильный селект должен работать с "подтверждением".
Мы можем зашить хук внутрь моб. селекта, но оставить возможность переопределить его снаружи, если нужно?

reme3d2y · 2023-03-23T02:23:07Z

Тут выбор работает "на заднем плане", а кнопки не работают

const OPTIONS = Array.from({ length: 100 }).map((_, i) => ({
    key: i.toString(),
    content: `Neptunium ${i}`,
}));

render(() => {
    const [selected, setSelected] = React.useState([]);

    const handleChange = ({ selectedMultiple }) => {
        setSelected(selectedMultiple.map((option) => option.key));
    };

    return (
        <div style={{ width: document.body.clientWidth < 450 ? '100%' : 320 }}>
            <SelectModalMobile
                multiple
                allowUnselect={true}
                options={OPTIONS}
                placeholder='С подтверждением'
                Option={BaseOption}
                block={true}
                selected={selected}
                onChange={handleChange}
            />
        </div>
    );
});

reme3d2y · 2023-03-23T02:23:46Z

Нам бы вообще избавиться от "прикопанных" компонентов

reme3d2y · 2023-03-23T02:24:48Z

Еще есть SelectModalMobile, нужно чекнуть, что в нем все будет работать корректно

reme3d2y · 2023-03-23T02:30:24Z

Сейчас список открывается на 5.5 опций, как в десктопе. Это поведение нужно сделать отключаемым для мобилки.
Тебе нужно будет сравнить поведение с "components/base-select-mobile/options-list", т.к. если ты уберешь обрезание, то скорее всего возникнут проблемы со скроллом.
Когда будешь тестить - чекни варианты с большим кол-вом опций (100+) и с 1-2 опциями. И нужно убедиться, что VirtualOptionsList работает корректно

const OPTIONS = [
    { key: '1', content: 'Neptunium' },
    { key: '2', content: 'Plutonium' },
    { key: '3', content: 'Americium' },
    { key: '4', content: 'Curium' },
    { key: '5', content: 'Berkelium' },
    { key: '6', content: 'Californium' },
    { key: '7', content: 'Einsteinium' },
    { key: '8', content: 'Fermium' },
];

render(() => {
    const [selected, setSelected] = React.useState([]);

    const handleChange = ({ selectedMultiple }) => {
        setSelected(selectedMultiple.map((option) => option.key));
    };

    return (
        <div style={{ width: document.body.clientWidth < 450 ? '100%' : 320 }}>
            <SelectMobile
                allowUnselect={true}
                options={OPTIONS}
                placeholder='С подтверждением'
                Option={BaseOption}
                block={true}
                {...useSelectWithApply({
                    options: OPTIONS,
                    selected,
                    onChange: handleChange,
                })}
            />
        </div>
    );
});

.changeset/unlucky-tips-share.md

packages/select/src/presets/useSelectWithApply/options-list-with-apply/index.module.css

…-mobile Убрал компоненты в base-select-mobile, отправил хук useSelectWithApply внутрь компонента, теперь на мобилках правильно работает подтверждение применения с множественным выбором

core-ds-bot · 2023-03-24T09:02:46Z

Собрана новая демка.

…ctor/select-mobile

core-ds-bot · 2023-03-24T09:52:55Z

Собрана новая демка.

core-ds-bot · 2023-03-24T11:44:43Z

Собрана новая демка.

…onents into refactor/select-mobile

core-ds-bot · 2023-03-24T13:50:29Z

Собрана новая демка.

core-ds-bot · 2023-03-30T15:35:33Z

Собрана новая демка.

core-ds-bot · 2023-03-30T21:37:02Z

Собрана новая демка.

core-ds-bot · 2023-03-30T22:04:43Z

Собрана новая демка.

reme3d2y · 2023-03-31T07:02:23Z

Никита, ты герой! 🔥

С BottomSheet вроде все ок работает. С модалкой есть пару проблем:

Список сразу скороллится в конец
Есть синяя обводка у футера
Странная анамация открытия (анимируется только шапка)

packages/select/src/presets/useSelectWithApply/hook.tsx

packages/select/src/components/options-list/index.module.css

v-gevak · 2023-03-31T10:19:31Z

packages/select/src/components/virtual-options-list/Component.tsx

@@ -46,6 +46,8 @@ export const VirtualOptionsList = ({
    const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState(0);
    const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;

+    const numberOfVisibleOptions = visibleOptionsFromProps === 0 ? 12 : visibleOptionsFromProps;


Screencast.from.2023-03-31.17-22-42.webm

С виртуальным списком что-то не то, два скролла сейчас

Насчет VirtualOptionsList нет идей что можно сделать чтобы пофиксить дабл скролл, такое поведение только с BottomSheet, с модалкой вроде ок

core-ds-bot · 2023-04-03T13:51:11Z

Собрана новая демка.

core-ds-bot · 2023-04-04T08:54:19Z

Собрана новая демка.

core-ds-bot · 2023-04-05T11:25:10Z

Собрана новая демка.

v-gevak · 2023-04-10T06:30:30Z

В этой демке перестали проставляться галочки рядом с выбранной опцией

core-ds-bot · 2023-04-10T07:57:52Z

Собрана новая демка.

packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css

NikitaRodyukov requested review from reme3d2y, v-gevak, EGNKupava and SiebenSieben as code owners March 22, 2023 09:58

NikitaRodyukov self-assigned this Mar 22, 2023

SiebenSieben reviewed Mar 23, 2023

View reviewed changes

.changeset/unlucky-tips-share.md Outdated Show resolved Hide resolved

SiebenSieben requested a review from Oladii March 23, 2023 05:05

SiebenSieben reviewed Mar 23, 2023

View reviewed changes

packages/select/src/presets/useSelectWithApply/options-list-with-apply/index.module.css Outdated Show resolved Hide resolved

NikitaRodyukov added 3 commits March 24, 2023 11:24

refactor(select): reworked selectMobile component with apply feature

b396a44

chore(select): type fix

cffb885

Merge branch 'master' of github.com:core-ds/core-components into refa…

f85f30c

…ctor/select-mobile

NikitaRodyukov force-pushed the refactor/select-mobile branch from 71203ec to f85f30c Compare March 24, 2023 09:16

refactor(select): changeset change

9bc46ec

test: update screenshots

5de42e2

NikitaRodyukov added 2 commits March 24, 2023 16:21

refactor(select): screenshot fixes

207a954

Merge branch 'refactor/select-mobile' of github.com:core-ds/core-comp…

9646ab5

…onents into refactor/select-mobile

NikitaRodyukov added 3 commits March 30, 2023 17:38

refactor(select): keepMounted props deletion

21ee2cf

refactor(select): delete unnecessary css vars

8f4e9cd

refactor(select): optionsListProps fix

b32ea8a

NikitaRodyukov requested a review from v-gevak March 30, 2023 16:17

NikitaRodyukov added 3 commits March 30, 2023 23:59

refactor(select): virtualOptionsList fix

251a673

refactor(select): visibleOptions prop set to 0 in mobile

cab78c4

refactor(select): delete unnecessary cn usage

d1733a8

v-gevak reviewed Mar 31, 2023

View reviewed changes

NikitaRodyukov added 2 commits April 3, 2023 16:06

refactor(select): canvas fix

a3b9d5c

refactor(select): added default values to selected and options props

95ec0e9

NikitaRodyukov requested a review from v-gevak April 3, 2023 13:58

refactor(select): mobile stories fix

5a9d02c

refactor(select): pr updates

0430b18

refactor(select): story fix

4964d33

v-gevak approved these changes Apr 10, 2023

View reviewed changes

SiebenSieben reviewed Apr 12, 2023

View reviewed changes

packages/select/src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css Show resolved Hide resolved

reme3d2y approved these changes Apr 13, 2023

View reviewed changes

NikitaRodyukov requested a review from SiebenSieben April 13, 2023 05:43

Valeri8888 approved these changes Apr 13, 2023

View reviewed changes

NikitaRodyukov merged commit ef0159d into master Apr 13, 2023
8 checks passed

NikitaRodyukov deleted the refactor/select-mobile branch April 13, 2023 09:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(select): reworked selectMobile component with apply feature #599

refactor(select): reworked selectMobile component with apply feature #599

NikitaRodyukov commented Mar 22, 2023

changeset-bot bot commented Mar 22, 2023 •

edited

coveralls commented Mar 22, 2023 •

edited

core-ds-bot commented Mar 22, 2023

core-ds-bot commented Mar 22, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 30, 2023

core-ds-bot commented Mar 30, 2023

core-ds-bot commented Mar 30, 2023

reme3d2y commented Mar 31, 2023

v-gevak Mar 31, 2023

NikitaRodyukov Apr 3, 2023

core-ds-bot commented Apr 3, 2023

core-ds-bot commented Apr 4, 2023

core-ds-bot commented Apr 5, 2023

v-gevak commented Apr 10, 2023

core-ds-bot commented Apr 10, 2023

refactor(select): reworked selectMobile component with apply feature #599

refactor(select): reworked selectMobile component with apply feature #599

Conversation

NikitaRodyukov commented Mar 22, 2023

Опишите проблему

changeset-bot bot commented Mar 22, 2023 • edited

🦋 Changeset detected

coveralls commented Mar 22, 2023 • edited

Pull Request Test Coverage Report for Build 4655550796

💛 - Coveralls

core-ds-bot commented Mar 22, 2023

core-ds-bot commented Mar 22, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

reme3d2y commented Mar 23, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 24, 2023

core-ds-bot commented Mar 30, 2023

core-ds-bot commented Mar 30, 2023

core-ds-bot commented Mar 30, 2023

reme3d2y commented Mar 31, 2023

v-gevak Mar 31, 2023

Choose a reason for hiding this comment

NikitaRodyukov Apr 3, 2023

Choose a reason for hiding this comment

core-ds-bot commented Apr 3, 2023

core-ds-bot commented Apr 4, 2023

core-ds-bot commented Apr 5, 2023

v-gevak commented Apr 10, 2023

core-ds-bot commented Apr 10, 2023

changeset-bot bot commented Mar 22, 2023 •

edited

coveralls commented Mar 22, 2023 •

edited