Feat/change tab controller center selected logic #1103

M-i-k-e-l · 2020-12-29T16:48:12Z

Depends on

Description

Change TabController center selected logic (and move all the focusItems logic to a helper class)

Changelog

Change TabController center selected logic (and move all the focusItems logic to a helper class)

…-component-2 * master: export Button enums fix typings Fix lint issues Fix Switch color based props to use ColorValue typing Fix manual placeholderTextColor typing for ChipsInput Fix manualy typing of ChipsInput for selectionColor prop fix @types/react-native version to 0.63.4 Fix rn63 typings (#1100) Revert "fix for tabbar types for scrollbar" fix for tabbar types for scrollbar ScrollBar - TS migration (#1078) TabBar refactor (#1076) Update reanimated and gesture-handler to their latest version cleanup Cards example screen upgraded expo demo app to expo v40 (#1096) Update RNN version # Conflicts: # src/components/tabController/TabBar.tsx

…hook)

ethanshar · 2021-01-03T13:35:04Z

@M-i-k-e-l
I think there are conflicts because of the changes we did in #1098

M-i-k-e-l · 2021-01-03T18:31:38Z

Reminder:

This is a little out of scope.
But what's nice about hooks (as long you work with function components) is that they are great alternative for HOC.
For example in this case, you can create hooks for useScrollReached and useScrollEnabler that do calculation and return the relevant info which you can pass on to your ScrollView.
Maybe it's a good opportunity to create an equivalent hooks for these HOCs

…-logic * master: Fix lint error cleanup eslintrc file Infra/useDidUpdate (#1112) Support UI presets for Incubator.TextField and set a 'default' preset (#1111) Fix lint issues fix radioButton lint errors and generate types Fix/imageSource deprecation (#1115) Typescript/tab controller move to function component (#1098) Feat/radio button customize styling (#1092) bug fixes for TabBar refactor (#1106) Update ios target to 11 prettify file Fix icon size in badges example screen (#1104) icon prop - fix type to be both number and object. (#1086) enable eslint on both ts and js files (#1101) fix eslint (#1107) # Conflicts: # demo/src/screens/componentScreens/FaderScreen.tsx # src/components/fader/index.tsx # src/components/tabController/FadedScrollView.tsx # src/components/tabController/TabBar.tsx

M-i-k-e-l · 2021-01-04T10:49:43Z

Reminder:

This is a little out of scope.
But what's nice about hooks (as long you work with function components) is that they are great alternative for HOC.
For example in this case, you can create hooks for useScrollReached and useScrollEnabler that do calculation and return the relevant info which you can pass on to your ScrollView.
Maybe it's a good opportunity to create an equivalent hooks for these HOCs

Done

M-i-k-e-l · 2021-01-04T10:57:18Z

@M-i-k-e-l
I think there are conflicts because of the changes we did in #1098

Fixed and added the new hooks

ethanshar

Looks great. Good job!
I wrote a few comments..

demo/src/screens/componentScreens/FaderScreen.tsx

src/commons/index.js

ethanshar · 2021-01-06T06:21:29Z

src/helpers/useFocusItemHelper.ts

@@ -0,0 +1,171 @@
+import _ from 'lodash';


Few comments on this..

Is this hook really a common one or mainly for TabController purpose?
I assume you want to use it in FilterChips as well, in that case, consider moving it to Hooks folder.

The name of the hook needs a little work in my opinion ..Helper doesn't really say much, clearly it's a hook that helps doing something (: Let's try to find a better name.

Moved to hooks.

useFocusItem
useScrollToItem

I think useScrollIToItem hints better what the hook does..

src/helpers/useFocusItemHelper.ts

ethanshar · 2021-01-06T06:40:07Z

src/helpers/useFocusItemHelper.ts

+  },
+  [setSnapBreakpoints]);
+
+  const scroll = (scrollTo: number, animated: boolean) => {


Is this in order to support ScrollView, FlatList and SectionList?
I think I have a similar code somewhere.. (:

Maybe we should add a specific hook for that (:
Anyway, not for this scope - just FYI

No time like the present.
I'm just not sure it's a hook, maybe a helper function, since it doesn't need useState, useRef etc, WDYT?

Technically you can have this hook to create the scrollView ref and provide (and also use it internally for the scrollTo)
something like that..

const [scrollRef, scrollTo] = useScrollTo()

and maybe if someone already has the ref we can support passing it

const myOwnRef = useRef(); const [scrollRef, scrollTo] = useScrollTo(myOwnRef)

WDYT?

src/index.js

src/components/tabController/TabBar.tsx

…-logic * master: Add missing functionality for Incubator.TextField (#1121) Update all app icons sizes for iOS project Adding 'defaultSource' for image source in case of an error (#1116) DateTimePicker - adding 'headerStyle' prop to adjust iOS dialog header style (#1117) add prepush script Infra/use did update (#1119) SettingsScreen - rename to UNSAFE (#1118) Create a middleware TextField migrator to migrate people to the new TextField implementation (#1113) Fix issue with missing selected indicator in Picker items (#1065) Fix issue for Android on rn63 - when passing null as tintColor to an image, the image is not displayed (#1055) Fix issue #1052 - PickerItem ignore renderItem prop (#1054) Dialog - RN63 broke Modal's onDismiss method, this fixes our API (#1026) pass containerStyle to checkbox when there's no label render checkbox container only if there's label (#1039)

Co-authored-by: Ethan Sharabi <[email protected]>

…-logic * master: update uilib-docs to v1.0.6 Read site metadata from gatsby-config gile Remove animatable from FloatingButton component (#1134) Stop using AnimatableManager in Hint (#1125) Change setTimeout's time from 50 to 100 Update generated types push expo stuff Update wiki links Fix/dialog swiping does not trigger on dialog dismissed (#1093) remove github token Create colors.md CardsScreen - fix backgrounds and remove obsolete examples (#1124) trigger build

…-logic

M-i-k-e-l added 6 commits December 27, 2020 12:51

Move TabBar to functional component

ca6b157

Fix Fader in RTL

2377b58

change tab controller center selected logic (and move it to a helper …

ecbc6e0

…hook)

Fix import (cycle) + generate types

3f268b1

Change the DYNAMIC logic (did not look good when scrolling pages)

cd65641

M-i-k-e-l requested a review from ethanshar December 29, 2020 16:48

M-i-k-e-l assigned ethanshar Dec 29, 2020

M-i-k-e-l added 4 commits January 3, 2021 22:11

Revert merging wrong commit

d79af43

FocusItemsHelper --> useFocusItemsHelper

462647b

Add (and use) useScrollEnabler and useScrollReached hooks

6b8c9ea

ethanshar reviewed Jan 6, 2021

View reviewed changes

M-i-k-e-l and others added 6 commits January 6, 2021 12:10

Move hooks to the hooks folder

57d42f0

sideSpacing --> outerSpacing

c7a677e

Fix typo

7d7c8e6

Co-authored-by: Ethan Sharabi <[email protected]>

renderSelectedIndicator --> selectedIndicator

c09acd8

Move useFocusItemsHelper

c2bf678

M-i-k-e-l requested a review from ethanshar January 6, 2021 11:20

M-i-k-e-l and others added 6 commits January 18, 2021 12:27

Rename useFocusItemsHelper --> useScrollIToItem

60511a6

Fix typo

9ace954

Create useScrollTo hook

c3697e0

Refactor Props and ResultProps --> better names

f9f5c97

Merge branch 'master' into feat/change-tab-controller-center-selected…

a7a9d82

…-logic

ethanshar approved these changes Jan 21, 2021

View reviewed changes

ethanshar merged commit 1ce4ff3 into master Jan 21, 2021

ethanshar deleted the feat/change-tab-controller-center-selected-logic branch July 26, 2021 09:08

Feat/change tab controller center selected logic #1103

Feat/change tab controller center selected logic #1103

Uh oh!

Conversation

M-i-k-e-l commented Dec 29, 2020

Depends on

Description

Changelog

Uh oh!

ethanshar commented Jan 3, 2021

Uh oh!

M-i-k-e-l commented Jan 3, 2021

Uh oh!

M-i-k-e-l commented Jan 4, 2021

Uh oh!

M-i-k-e-l commented Jan 4, 2021

Uh oh!

ethanshar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ethanshar Jan 6, 2021

Choose a reason for hiding this comment

Uh oh!

M-i-k-e-l Jan 6, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ethanshar Jan 12, 2021

Choose a reason for hiding this comment

Uh oh!

M-i-k-e-l Jan 18, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ethanshar Jan 6, 2021

Choose a reason for hiding this comment

Uh oh!

M-i-k-e-l Jan 6, 2021

Choose a reason for hiding this comment

Uh oh!

ethanshar Jan 12, 2021

Choose a reason for hiding this comment

Uh oh!

M-i-k-e-l Jan 18, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

M-i-k-e-l Jan 6, 2021 •

edited

Loading