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

Quo divider-label component refactor (#17035)

This commit is contained in:
Ajay Sivan 2023-08-24 12:29:26 -07:00 committed by GitHub
parent 8701f3545d
commit 5148a3c748
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 167 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/quo2/components/dividers/divider_label.cljs
View File

@ -1,90 +0,0 @@
(ns quo2.components.dividers.divider-label
(:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as markdown.text]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]))
(def chevron-icon-container-width 20)
(def chevron-icon-container-height 20)
(defn themed-view
"label -> string
chevron-position -> :left, :right
chevron-icon -> keyword
on-press -> function
padding-bottom -> number
counter-value -> number
increase-padding-top? -> boolean
blur? -> boolean
theme -> theme value passed from with-theme HOC"
[{:keys [label
chevron-position
chevron-icon
counter-value
increase-padding-top?
padding-bottom
blur?
container-style
on-press
theme]}]
(let [dark? (= :dark theme)
border-and-counter-bg-color (if dark?
(if blur? colors/white-opa-5 colors/neutral-70)
colors/neutral-10)
padding-top (if increase-padding-top? 16 8)
text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50)
counter-text-color (if dark? colors/white colors/neutral-100)]
[rn/touchable-without-feedback {:on-press on-press}
[rn/view
{:accessible true
:accessibility-label :divider-label
:style (merge {:border-top-width 1
:border-top-color border-and-counter-bg-color
:padding-top padding-top
:padding-bottom padding-bottom
:padding-left 16
:padding-right 16
:align-items :center
:flex-direction :row}
container-style)}
(when (= chevron-position :left)
[rn/view
{:test-ID :divider-label-icon-left
:style {:margin-right 4}}
[icons/icon
(or chevron-icon :i/chevron-down)
{:color text-and-icon-color
:width chevron-icon-container-width
:height chevron-icon-container-height}]])
[markdown.text/text
{:size :paragraph-2
:weight :medium
:style {:color text-and-icon-color
:flex 1}}
label]
(when (= chevron-position :right)
[rn/view {:test-ID :divider-label-icon-right}
[icons/icon
(or chevron-icon :i/chevron-down)
{:color text-and-icon-color
:size chevron-icon-container-width}]])
(when (pos? counter-value)
[rn/view
{:style {:border-radius 6
:height 16
:width (case (count counter-value)
1 16
2 20
28)
:background-color border-and-counter-bg-color
:align-items :center
:justify-content :center}}
[markdown.text/text
{:size :label
:weight :medium
:style {:color counter-text-color}}
counter-value]])]]))
(def divider-label (theme/with-theme themed-view))

20
src/quo2/components/dividers/divider_label/component_spec.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns quo2.components.dividers.divider-label.component-spec
(:require [quo2.components.dividers.divider-label.view :as divider-label]
[test-helpers.component :as h]))
(h/describe "Divider Label"
(h/test "default render"
(h/render [divider-label/view "Welcome"])
(h/is-truthy (h/query-by-label-text :divider-label)))
(h/test "with label"
(h/render [divider-label/view {:tight? true} "Welcome"])
(h/is-truthy (h/query-by-text "Welcome")))
(h/test "with label & counter value"
(h/render [divider-label/view {:tight? true :counter? true :counter-value 5} "Public"])
(h/is-truthy (h/query-by-text "Public"))
(h/is-truthy (h/query-by-text "5")))
(h/test "on-press event"
(let [on-press (h/mock-fn)]
(h/render [divider-label/view {:tight? false :on-press on-press} "General"])
(h/fire-event :press (h/query-by-label-text :divider-label))
(h/was-called on-press))))

39
src/quo2/components/dividers/divider_label/style.cljs Normal file
View File

@ -0,0 +1,39 @@
(ns quo2.components.dividers.divider-label.style
(:require [quo2.foundations.colors :as colors]))
(defn- get-border-color
[blur? theme]
(colors/theme-colors (if blur? colors/neutral-80-opa-5 colors/neutral-10)
(if blur? colors/white-opa-5 colors/neutral-90)
theme))
(defn get-content-color
[blur? theme]
(colors/theme-colors (if blur? colors/neutral-80-opa-70 colors/neutral-50)
(if blur? colors/white-opa-70 colors/neutral-40)
theme))
(defn container
[blur? tight? chevron theme]
{:border-top-width 1
:border-top-color (get-border-color blur? theme)
:padding-top (if tight? 6 14)
:padding-bottom 7
:padding-left (if (= :left chevron) 16 20)
:padding-right 20
:align-items :center
:flex-direction :row})
(defn content
[chevron]
{:flex-direction (if (= chevron :right)
:row-reverse
:row)
:align-items :center
:height 20
:flex 1})
(defn text
[blur? theme]
{:color (get-content-color blur? theme)
:flex 1})

60
src/quo2/components/dividers/divider_label/view.cljs Normal file
View File

@ -0,0 +1,60 @@
(ns quo2.components.dividers.divider-label.view
(:require [quo2.components.markdown.text :as text]
[quo2.components.dividers.divider-label.style :as style]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[quo2.components.counter.counter.view :as counter]
[quo2.components.icon :as icons]))
(defn- view-internal
"Options:
- `counter?` (default: nil) - Display a counter on the right side of the divider.
- `counter-value` (default: nil) - Number to display if counter? is true.
- `chevron` nil/:right/:left (default: nil) - Display a chevron on the left or right side of the divider.
- `chevron-icon` (default: :i/chevron-right) - Icon to display when chevron is :left/:right.
- `tight?` (default: true) - Use a tighter padding.
- `blur?` (default: nil) - Use a blur background.
- `theme` - Theme value from with-theme HOC.
- `on-press` - Function called when the divider is pressed.
- `container-style` - Style applied to the container view.
label - String or markdown text component to display in the divider label."
[{:keys [counter?
counter-value
chevron
chevron-icon
tight?
blur?
theme
on-press
container-style]
:or {tight? true}}
label]
[rn/pressable
{:on-press on-press
:accessibility-label :divider-label
:style (merge (style/container blur? tight? chevron theme)
container-style)}
[rn/view
{:style (style/content chevron)}
(when chevron
[icons/icon (or chevron-icon :i/chevron-right)
{:color (style/get-content-color blur? theme)
:container-style {(if (= chevron :right)
:margin-left
:margin-right)
2}}])
[text/text
{:size :paragraph-2
:weight :medium
:style (style/text blur? theme)}
label]]
(when counter?
[counter/view
{:type (if blur? :secondary :grey)
:container-style {:margin-left 2}}
counter-value])])
(defn view
([_ _] (quo.theme/with-theme view-internal))
([label] [view {} label]))

45
src/quo2/components/dividers/divider_label_component_spec.cljs
View File

@ -1,45 +0,0 @@
(ns quo2.components.dividers.divider-label-component-spec
(:require ["@testing-library/react-native" :as rtl]
[quo2.components.dividers.divider-label :as divider-label]
[reagent.core :as reagent]))
(defn render-divider-label
([]
(render-divider-label {}))
([opts]
(rtl/render (reagent/as-element [divider-label/divider-label opts]))))
(js/global.test "default render of divider-label component"
(fn []
(render-divider-label)
(-> (js/expect (rtl/screen.getByLabelText "divider-label"))
(.toBeTruthy))))
(js/global.test "render divider-label component with a label"
(fn []
(render-divider-label {:label :hello})
(-> (js/expect (rtl/screen.getByText "hello"))
(.toBeTruthy))))
(js/global.test "render divider-label component with a counter-value"
(fn []
(render-divider-label {:label :hello
:counter-value "1"})
(-> (js/expect (rtl/screen.getByText "1"))
(.toBeTruthy))))
(js/global.test "divider-label chevron icon renders to the left when set"
(fn []
(render-divider-label {:label :hello
:counter-value "1"
:chevron-position :left})
(-> (js/expect (rtl/screen.getByTestId "divider-label-icon-left"))
(.toBeTruthy))))
(js/global.test "divider-label chevron icon renders to the right when set"
(fn []
(render-divider-label {:label :hello
:counter-value "1"
:chevron-position :right})
(-> (js/expect (rtl/screen.getByTestId "divider-label-icon-right"))
(.toBeTruthy))))

4
src/quo2/core.cljs
View File

@ -33,7 +33,7 @@
quo2.components.counter.counter.view
quo2.components.counter.step.view
quo2.components.dividers.date
quo2.components.dividers.divider-label
quo2.components.dividers.divider-label.view
quo2.components.dividers.new-messages
quo2.components.dividers.strength-divider.view
quo2.components.drawers.action-drawers.view
@ -182,7 +182,7 @@
(def step quo2.components.counter.step.view/view)
;;;; Dividers
(def divider-label quo2.components.dividers.divider-label/divider-label)
(def divider-label quo2.components.dividers.divider-label.view/view)
(def new-messages quo2.components.dividers.new-messages/new-messages)
(def divider-date quo2.components.dividers.date/date)
(def strength-divider quo2.components.dividers.strength-divider.view/view)

2
src/quo2/core_spec.cljs
View File

@ -17,7 +17,7 @@
[quo2.components.colors.color-picker.component-spec]
[quo2.components.counter.counter.component-spec]
[quo2.components.counter.step.component-spec]
[quo2.components.dividers.divider-label-component-spec]
[quo2.components.dividers.divider-label.component-spec]
[quo2.components.dividers.strength-divider.component-spec]
[quo2.components.drawers.action-drawers.component-spec]
[quo2.components.drawers.documentation-drawers.component-spec]

2
src/status_im2/common/contact_list/view.cljs
View File

@ -3,4 +3,4 @@
(defn contacts-section-header
[{:keys [title]}]
[quo/divider-label {:label title}])
[quo/divider-label title])

4
src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs
View File

@ -47,8 +47,8 @@
[{:keys [title]}]
(when-not (= title no-title)
[quo/divider-label
{:label title
:container-style style/divider}]))
{:container-style style/divider}
title]))
(defn key-fn
[item index]

16
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -83,14 +83,10 @@
:on-layout #(on-category-layout name (int (layout-y %)))}
(when-not (= constants/empty-category-id category-id)
[quo/divider-label
{:container-style {:padding-left 16
:padding-right 20
:padding-top 6 ; Because of border width of 1
:padding-bottom 7}
:label name
:on-press #(collapse-category community-id category-id collapsed?)
:chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
:chevron-position :left}])
{:on-press #(collapse-category community-id category-id collapsed?)
:chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
:chevron :left}
name])
(when-not collapsed?
(into [rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}]
(map #(channel-chat-item community-id community-color %))
@ -296,8 +292,8 @@
:blur-type :transparent
:overlay-color :transparent}
[quo/divider-label
{:label label
:chevron-position :left}]])))
{:chevron :left}
label]])))
(defn page-nav-right-section-buttons
[id]

48
src/status_im2/contexts/quo_preview/dividers/divider_label.cljs
View File

@ -4,26 +4,48 @@
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:type :text :key :label}
{:type :text :key :counter-value}
{:type :boolean :key :increase-padding-top?}
{:type :boolean :key :blur?}
{:key :chevron-position
[{:key :label
:type :text}
{:key :chevron
:type :select
:options [{:key :left}
{:key :right}]}])
:options [{:key :left
:value "Left"}
{:key :right
:value "Right"}
{:key nil
:value "None"}]}
{:key :chevron-icon
:type :select
:options [{:key :i/chevron-down
:value "Chevron Down"}
{:key :i/chevron-right
:value "Chevron Right"}]}
{:key :tight?
:type :boolean}
{:key :counter?
:type :boolean}
{:key :counter-value
:type :text}
{:key :blur?
:type :boolean}])
(defn view
[]
(let [state (reagent/atom {:blur? false
:chevron-position :left
:counter-value "0"
:increase-padding-top? true
:label "Welcome"})]
(let [state (reagent/atom {:label "Welcome"
:chevron nil
:chevron-icon nil
:tight? true
:counter? false
:counter-value 0
:blur? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true}
[quo/divider-label @state]])))
[quo/divider-label
(assoc @state
:on-press
#(js/alert "Divider label pressed!"))
(:label @state)]])))

4
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -131,9 +131,7 @@
:icon-left :i/copy}
(i18n/label :t/copy-qr)]])]]
[rn/view {:style style/sync-code}
[quo/divider-label
{:label (i18n/label :t/have-a-sync-code?)
:increase-padding-top? true}]
[quo/divider-label {:tight? false} (i18n/label :t/have-a-sync-code?)]
[quo/action-drawer
[[{:icon :i/scan
:on-press #(rf/dispatch [:navigate-to :scan-sync-code-page])