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

chore: add composer button to quo2 and use in app (#16902)

This commit is contained in:
Jamie Caprani 2023-08-10 13:27:25 +02:00 committed by GitHub
parent 302c54b6c4
commit 1cb16b4945
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 169 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/quo2/components/buttons/composer_button/component_spec.cljs Normal file
View File

@ -0,0 +1,38 @@
(ns quo2.components.buttons.composer-button.component-spec
(:require [quo2.components.buttons.composer-button.view :as composer-button]
[test-helpers.component :as h]))
(h/describe "button tests"
(h/test "default render of composer button component"
(h/render [composer-button/view
{:icon :i/placeholder
:accessibility-label "test-button"}])
(h/is-truthy (h/get-by-label-text "test-button")))
(h/test "button on-press works"
(let [event (h/mock-fn)]
(h/render [composer-button/view
{:icon :i/placeholder
:on-press event
:accessibility-label "test-button"}])
(h/fire-event :press (h/get-by-label-text "test-button"))
(h/was-called event)))
(h/test "button on-press disabled when disabled"
(let [event (h/mock-fn)]
(h/render [composer-button/view
{:icon :i/placeholder
:on-press event
:accessibility-label "test-button"
:disabled? true}])
(h/fire-event :press (h/get-by-label-text "test-button"))
(h/was-not-called event)))
(h/test "button on-long-press works"
(let [event (h/mock-fn)]
(h/render [composer-button/view
{:icon :i/placeholder
:on-long-press event
:accessibility-label "test-button"}])
(h/fire-event :long-press (h/get-by-label-text "test-button"))
(h/was-called event))))

29
src/quo2/components/buttons/composer_button/style.cljs Normal file
View File

@ -0,0 +1,29 @@
(ns quo2.components.buttons.composer-button.style
(:require [quo2.foundations.colors :as colors]))
(defn get-border-color
[{:keys [pressed? blur? theme]}]
(cond
(and pressed? blur?) (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
(= pressed? true) (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
(= blur? true) (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
:else (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)))
(defn get-label-color
[{:keys [blur? theme]}]
(cond
blur? (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
:else (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(defn main
[{:keys [pressed? blur? theme disabled?]}]
{:border-color (get-border-color {:pressed? pressed?
:blur? blur?
:theme theme})
:border-width 1
:border-radius 10
:width 32
:height 32
:justify-content :center
:align-items :center
:opacity (when disabled? 0.3)})

29
src/quo2/components/buttons/composer_button/view.cljs Normal file
View File

@ -0,0 +1,29 @@
(ns quo2.components.buttons.composer-button.view
(:require [quo2.components.icon :as quo2.icons]
[quo2.theme :as theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[quo2.components.buttons.composer-button.style :as style]))
(defn- view-internal
[_ _]
(let [pressed? (reagent/atom false)]
(fn
[{:keys [on-press on-long-press disabled? theme blur? icon accessibility-label container-style]}]
[rn/pressable
{:accessibility-label (or accessibility-label :composer-button)
:on-press on-press
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? nil)
:on-long-press on-long-press
:disabled disabled?
:style (merge (style/main {:pressed? @pressed?
:blur? blur?
:theme theme
:disabled? disabled?})
container-style)}
[quo2.icons/icon icon
{:color (style/get-label-color {:blur? blur?
:theme theme})}]])))
(def view (theme/with-theme view-internal))

2
src/quo2/core.cljs
View File

@ -9,6 +9,7 @@
quo2.components.avatars.wallet-user-avatar
quo2.components.banners.banner.view
quo2.components.buttons.button.view
quo2.components.buttons.composer-button.view
quo2.components.buttons.dynamic-button.view
quo2.components.buttons.predictive-keyboard.view
quo2.components.buttons.slide-button.view
@ -129,6 +130,7 @@
;;;; Buttons
(def button quo2.components.buttons.button.view/button)
(def composer-button quo2.components.buttons.composer-button.view/view)
(def dynamic-button quo2.components.buttons.dynamic-button.view/view)
(def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
(def slide-button quo2.components.buttons.slide-button.view/view)

3
src/quo2/core_spec.cljs
View File

@ -3,14 +3,15 @@
[quo2.components.avatars.account-avatar.component-spec]
[quo2.components.avatars.user-avatar.component-spec]
[quo2.components.banners.banner.component-spec]
[quo2.components.browser.browser-input.component-spec]
[quo2.components.buttons.button.component-spec]
[quo2.components.buttons.composer-button.component-spec]
[quo2.components.buttons.predictive-keyboard.component-spec]
[quo2.components.buttons.slide-button.component-spec]
[quo2.components.calendar.calendar.component-spec]
[quo2.components.calendar.calendar-day.component-spec]
[quo2.components.calendar.calendar.month-picker.component-spec]
[quo2.components.calendar.calendar-year.component-spec]
[quo2.components.browser.browser-input.component-spec]
[quo2.components.colors.color-picker.component-spec]
[quo2.components.counter.counter.component-spec]
[quo2.components.counter.step.component-spec]

46
src/status_im2/contexts/chat/composer/actions/view.cljs
View File

@ -72,12 +72,9 @@
(defn disabled-audio-button
[]
[quo/button
{:on-press #(js/alert "to be implemented")
:icon-only? true
:type :outline
:size 32}
:i/audio])
[quo/composer-button
{:on-press #(js/alert "to be implemented")
:icon :i/audio}])
(defn audio-button
[{:keys [record-reset-fn input-ref]}
@ -169,13 +166,11 @@
(defn camera-button
[]
(let [images-count (count (vals (rf/sub [:chats/sending-image])))]
[quo/button
[quo/composer-button
{:on-press #(go-to-camera images-count)
:icon-only? true
:type :outline
:size 32
:icon :i/camera
:container-style {:margin-right 12}}
:i/camera]))
]))
(defn open-photo-selector
[{:keys [input-ref]}
@ -196,33 +191,24 @@
(defn image-button
[props animations insets]
[quo/button
[quo/composer-button
{:on-press #(open-photo-selector props animations insets)
:accessibility-label :open-images-button
:icon-only? true
:type :outline
:size 32
:container-style {:margin-right 12}}
:i/image])
:container-style {:margin-right 12}
:icon :i/image}])
(defn reaction-button
[]
[quo/button
{:on-press #(js/alert "to be implemented")
:icon-only? true
:type :outline
:size 32
:container-style {:margin-right 12}}
:i/reaction])
[quo/composer-button
{:icon :i/reaction
:on-press #(js/alert "to be implemented")
:container-style {:margin-right 12}}])
(defn format-button
[]
[quo/button
{:on-press #(js/alert "to be implemented")
:icon-only? true
:type :outline
:size 32}
:i/format])
[quo/composer-button
{:on-press #(js/alert "to be implemented")
:icon :i/format}])
(defn view
[props state animations window-height insets {:keys [edit images]}]

49
src/status_im2/contexts/quo_preview/buttons/composer_button.cljs Normal file
View File

@ -0,0 +1,49 @@
(ns status-im2.contexts.quo-preview.buttons.composer-button
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo2.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]))
(def descriptor
[{:label "Blur?:"
:key :blur?
:type :boolean}
{:label "Disabled?:"
:key :disabled?
:type :boolean}])
(defn cool-preview
[]
(let [state (reagent/atom {:icon :i/placeholder
:on-press #(js/alert "pressed")
:on-long-press #(js/alert "long pressed")})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:flex 1 :padding-bottom 20}
[rn/view {:height 200}
[preview/customizer state descriptor]]
[rn/view
{:flex 1
:align-items :center
:justify-content :center}
(when (:blur? @state)
[rn/image
{:source (if (= :light (quo2.theme/get-theme))
(resources/get-mock-image :community-cover)
(resources/get-mock-image :dark-blur-bg))
:style {:position :absolute
:top 200
:left 0
:right 0
:bottom 0}}])
[quo/composer-button @state]]]])))
(defn preview-composer-button
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[cool-preview]])

4
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -16,6 +16,7 @@
[status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as wallet-user-avatar]
[status-im2.contexts.quo-preview.banners.banner :as banner]
[status-im2.contexts.quo-preview.buttons.button :as button]
[status-im2.contexts.quo-preview.buttons.composer-button :as composer-button]
[status-im2.contexts.quo-preview.buttons.slide-button :as slide-button]
[status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button]
[status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard]
@ -147,6 +148,9 @@
:buttons [{:name :button
:options {:topBar {:visible true}}
:component button/preview-button}
{:name :composer-button
:options {:topBar {:visible true}}
:component composer-button/preview-composer-button}
{:name :dynamic-button
:options {:topBar {:visible true}}
:component dynamic-button/preview-dynamic-button}