fix(bottom-sheet): scroll issues

[reme3d2y]

screencast.2023-07-18.19-57-05.mp4

screencast.2023-07-19.07-26-56.mp4

screencast.2023-07-19.08-01-47.mp4

const ITEM_STYLES = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transition: 'background 0.2s ease-in, border 0.2s ease-in',
    borderRadius: '8px',
    background: 'rgba(55, 120, 251, 0.1)',
    border: `1px dashed #3778FB`,
    color: '#3778FB',
    width: '100%',
    boxSizing: 'border-box',
    height: 170,
};

const WRAPPER_STYLES = {
    padding: 20,
    margin: -20,
    height: 600,
    transition: 'background-color 0.3s ease',
    backgroundColor: 'var(--color-light-bg-primary)',
};

render(() => {
    const [open, setOpen] = React.useState(false);

    const [disableSwipe, setDisableSwipe] = React.useState(false);
    const touchRef = React.useRef(false);

    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div style={WRAPPER_STYLES}>
            <Button view={'secondary'} size='s' onClick={handleOpen} block={true}>
                {'Показать шторку'}
            </Button>
            <BottomSheet
                open={open}
                onClose={handleClose}
                initialHeight='full'
                swipeable={!disableSwipe}
                hideScrollbar={true}
            >
                <div style={{ display: 'flex', flexFlow: 'column', gap: 16 }}>
                    {[1, 2, 3, 4, 5].map((item) =>
                        item === 2 ? (
                            <div
                                key={item}
                                style={{
                                    overflow: 'auto',
                                    display: 'flex',
                                    gap: 8,
                                }}
                                onScroll={(e) => {
                                    if (touchRef.current) {
                                        setDisableSwipe(true);
                                    }
                                }}
                                onTouchStart={(e) => {
                                    touchRef.current = true;
                                }}
                                onTouchEnd={(e) => {
                                    touchRef.current = false;
                                    setDisableSwipe(false);
                                }}
                            >
                                {Array.from({ length: 10 }).map((_, idx) => (
                                    <div
                                        key={idx}
                                        style={{
                                            ...ITEM_STYLES,
                                            width: '80px',
                                            flexShrink: 0,
                                            fontWeight: 700,
                                            fontSize: '72px',
                                        }}
                                    >
                                        {idx}
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div key={item} style={ITEM_STYLES}>
                                <span style={{ fontWeight: 700, fontSize: '72px' }}>{item}</span>
                            </div>
                        ),
                    )}
                </div>
            </BottomSheet>
        </div>
    );
});

[changeset-bot]

⚠️ No Changeset found

Latest commit: cff29fa

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[coveralls]

Pull Request Test Coverage Report for Build 5595859516

• 13 of 13 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.005%) to 79.688%

---

Totals
Change from base Build 5587169492:	0.005%
Covered Lines:	8113
Relevant Lines:	9214

---

💛 - Coveralls

[core-ds-bot]

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

[v-gevak]

Исправлено в #731