Skip to content

feat(tabs): full width TabsMobile#124

Merged
EGNKupava merged 15 commits intomasterfrom
fix/tabs-mobile-width
Jul 18, 2022
Merged

feat(tabs): full width TabsMobile#124
EGNKupava merged 15 commits intomasterfrom
fix/tabs-mobile-width

Conversation

@AlexZJScript
Copy link
Contributor

Добавил пропс "fullWidth" в компонент TabsMobile для растягивания табов, заменил useEffect с добавлением стилей для линии под табом на useLayoutEffect

@coveralls
Copy link

coveralls commented Jul 5, 2022

Pull Request Test Coverage Report for Build 2670980676

  • 13 of 14 (92.86%) changed or added relevant lines in 6 files are covered.
  • 34 unchanged lines in 5 files lost coverage.
  • Overall coverage decreased (-0.03%) to 81.993%

Changes Missing Coverage Covered Lines Changed/Added Lines %
packages/tabs/src/components/scrollable-container/Component.tsx 3 4 75.0%
Files with Coverage Reduction New Missed Lines %
packages/base-modal/src/Component.tsx 4 85.39%
packages/collapse/src/Component.tsx 6 74.42%
packages/popover/src/Component.tsx 6 82.46%
packages/select/src/components/base-select/Component.tsx 7 90.69%
packages/bottom-sheet/src/component.tsx 11 83.25%
Totals Coverage Status
Change from base Build 2611394189: -0.03%
Covered Lines: 5733
Relevant Lines: 6449

💛 - Coveralls

@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

const scrollableContainerNode = scrollableContainerRef.current;
const containerNode = containerRef.current;

if (containerNode && isFullScroll) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Можно упростить до

const scrollableNode = scrollableContainerRef.current || containerRef.current;

if (isFullScroll && scrollableNode) {
    const { scrollWidth, clientWidth } = scrollableNode;
    if (scrollWidth > clientWidth) {
        setIsRightOut(true);
    }
}


if (containerNode) {
if (node.scrollLeft) {
setIsLeftOut(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

setIsLeftOut(node.scrollLeft !== 0)

и ниже так же

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

исправил

// TODO: animate?
actions.forEach(({ el, left }) => {
// eslint-disable-next-line no-param-reassign
el.scrollLeft = el.scrollLeft > left ? left - 40 : left + 40;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

40 — magic number. Стоит вынести в константу или пропс и описать

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

исправил

@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@SiebenSieben SiebenSieben changed the title fix: fix TabsMobile width fix: full width TabsMobile Jul 11, 2022
@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@SiebenSieben SiebenSieben requested a review from v-gevak July 12, 2022 03:33
@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@core-ds-bot
Copy link
Collaborator

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

@EGNKupava EGNKupava changed the title fix: full width TabsMobile fix(tabs): full width TabsMobile Jul 18, 2022
@EGNKupava EGNKupava changed the title fix(tabs): full width TabsMobile feat(tabs): full width TabsMobile Jul 18, 2022
@EGNKupava EGNKupava merged commit 659763a into master Jul 18, 2022
@EGNKupava EGNKupava deleted the fix/tabs-mobile-width branch July 18, 2022 16:52
core-ds-bot pushed a commit that referenced this pull request Jul 18, 2022
# [28.4.0](v28.3.1...v28.4.0) (2022-07-18)

### Features

* **tabs:** full width TabsMobile ([#124](#124)) ([659763a](659763a))
* **tooltip:** add use anchor width for popover ([#151](#151)) ([1f6991c](1f6991c))
@core-ds-bot
Copy link
Collaborator

🎉 This PR is included in version 28.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants