status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix segmented tab component (#15001) 

Fixes #14999 

Fix UI regression in the segmented tab component, introduced by PR https://github.com/status-im/status-mobile/pull/14883.

No area was impacted because segmented tabs are not used yet.
This commit is contained in:
Icaro Motta 2023-02-07 08:27:27 -03:00 committed by GitHub
parent f8b5b35063
commit 98b219191f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/quo2/components/tabs/segmented_tab.cljs
View File

@ -30,10 +30,11 @@
:flex 1} :flex 1}
[tab/view [tab/view
{:id id {:id id
:segmented true :segmented? true
:size size :size size
:active (= id active-id) :active (= id active-id)
:on-press #(do (reset! active-tab-id %) :on-press (fn [tab-id]
(reset! active-tab-id tab-id)
(when on-change (when on-change
(on-change %)))} (on-change tab-id)))}
label]])])))) label]])]))))

9
src/quo2/components/tabs/tab/style.cljs
View File

@ -31,11 +31,16 @@
{:flex-direction :row}) {:flex-direction :row})
(defn tab (defn tab
[{:keys [size disabled background-color show-notification-dot?]}] [{:keys [background-color
disabled
segmented?
show-notification-dot?
size]}]
(let [border-radius (size->border-radius size) (let [border-radius (size->border-radius size)
padding (size->padding-left size)] padding (size->padding-left size)]
(merge {:height size (merge {:height size
:align-items :center :align-items :center
:justify-content :center
:flex-direction :row :flex-direction :row
:border-top-left-radius border-radius :border-top-left-radius border-radius
:border-bottom-left-radius border-radius :border-bottom-left-radius border-radius
@ -48,6 +53,8 @@
{:padding-right 1} {:padding-right 1}
{:border-radius border-radius {:border-radius border-radius
:padding-right padding}) :padding-right padding})
(when segmented?
{:flex 1})
(when disabled (when disabled
{:opacity tab-background-opacity})))) {:opacity tab-background-opacity}))))

2
src/quo2/components/tabs/tab/view.cljs
View File

@ -55,6 +55,7 @@
id id
on-press on-press
override-theme override-theme
segmented?
size size
notification-dot?] notification-dot?]
:or {size 32}} :or {size 32}}
@ -80,6 +81,7 @@
[rn/view [rn/view
{:style (style/tab {:size size {:style (style/tab {:size size
:disabled disabled :disabled disabled
:segmented? segmented?
:background-color background-color :background-color background-color
:show-notification-dot? show-notification-dot?})} :show-notification-dot? show-notification-dot?})}
(when before (when before