Fix channel-action component (#19031)

* feat: added separate channel-action component & fixed pressed color

* feat: added channel-action preview screen

* fix: moved channel-action/s into separate dirs

* fix: channel-action style prop

* fix: renamed color prop to customization-color

* fix: small button width should be fixed

* fix: removed temp file

* style: formatting

src/quo/components/community/channel_action/style.cljs

@@ -0,0 +1,23 @@
+(ns quo.components.community.channel-action.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn channel-action-container
+  [{:keys [big? disabled?]}]
+  (cond-> {}
+    disabled?  (assoc :opacity 0.3)
+    big?       (assoc :flex-grow 1)
+    (not big?) (assoc :width 104)))
+
+(defn channel-action
+  [{:keys [color pressed? theme]}]
+  {:height           102
+   :padding          12
+   :border-radius    16
+   :background-color (colors/resolve-color color theme (if pressed? 20 10))
+   :justify-content  :space-between})
+
+(def channel-action-row
+  {:flex-direction  :row
+   :justify-content :space-between
+   :align-items     :center})

src/quo/components/community/channel_action/view.cljs

@@ -0,0 +1,39 @@
+(ns quo.components.community.channel-action.view
+  (:require
+    [quo.components.community.channel-action.style :as style]
+    [quo.components.counter.counter.view :as counter]
+    [quo.components.icon :as icons]
+    [quo.components.markdown.text :as text]
+    [quo.theme]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))]
+    [rn/view
+     {:style (style/channel-action-container
+              {:big?      big?
+               :disabled? disabled?})}
+     [rn/pressable
+      (cond-> {:style               (style/channel-action
+                                     {:big?      big?
+                                      :color     customization-color
+                                      :pressed?  pressed?
+                                      :theme     theme
+                                      :disabled? disabled?})
+               :accessibility-label accessibility-label}
+        (not disabled?) (assoc :on-press     on-press
+                               :on-press-in  on-press-in
+                               :on-press-out on-press-out))
+      [rn/view {:style style/channel-action-row}
+       [icons/icon icon]
+       (when counter-value
+         [counter/view {:type :secondary} counter-value])]
+      [text/text
+       {:size            :paragraph-1
+        :weight          :medium
+        :number-of-lines 2}
+       label]]]))

src/quo/components/community/channel_actions.cljs

@@ -1,32 +0,0 @@
-(ns quo.components.community.channel-actions
-  (:require
-    [quo.components.community.style :as style]
-    [quo.components.counter.counter.view :as counter]
-    [quo.components.icon :as icons]
-    [quo.components.markdown.text :as text]
-    [react-native.core :as rn]))
-
-(defn channel-action
-  [{:keys [big? color label counter-value icon on-press accessibility-label]}]
-  [rn/touchable-opacity
-   {:on-press            on-press
-    :style               (style/channel-action-touch big?)
-    :accessibility-label accessibility-label}
-   [rn/view {:style (style/channel-action color)}
-    [rn/view {:style style/channel-action-row}
-     [icons/icon icon]
-     (when counter-value
-       [counter/view {:type :secondary} counter-value])]
-    [text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
-
-(defn channel-actions
-  [{:keys [container-style actions]}]
-  [rn/view {:style (assoc container-style :flex-direction :row)}
-   (map-indexed
-    (fn [index action]
-      ^{:key index}
-      [:<>
-       [channel-action action]
-       (when (not= action (last actions))
-         [rn/view {:width 16}])])
-    actions)])

src/quo/components/community/channel_actions/view.cljs

@@ -0,0 +1,16 @@
+(ns quo.components.community.channel-actions.view
+  (:require
+    [quo.components.community.channel-action.view :as channel-action]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [container-style actions]}]
+  [rn/view {:style (assoc container-style :flex-direction :row)}
+   (map-indexed
+    (fn [index action]
+      ^{:key index}
+      [:<>
+       [channel-action/view action]
+       (when (not= action (last actions))
+         [rn/view {:width 16}])])
+    actions)])

src/quo/components/community/style.cljs

@@ -133,24 +133,6 @@
                       colors/neutral-80
                       theme)})
 
-(defn channel-action-touch
-  [big?]
-  {:flex      1
-   :max-width (if big? 216 104)})
-
-(defn channel-action
-  [color]
-  {:padding          12
-   :height           102
-   :border-radius    16
-   :background-color (colors/custom-color color 50 10)
-   :justify-content  :space-between})
-
-(def channel-action-row
-  {:flex-direction  :row
-   :justify-content :space-between
-   :align-items     :center})
-
 (defn loading-card
   [width theme]
   (merge

src/quo/core.cljs

@@ -29,7 +29,8 @@
     quo.components.common.notification-dot.view
     quo.components.common.separator.view
     quo.components.community.banner.view
-    quo.components.community.channel-actions
+    quo.components.community.channel-action.view
+    quo.components.community.channel-actions.view
     quo.components.community.community-card-view
     quo.components.community.community-list-view
     quo.components.community.community-stat.view
@@ -229,7 +230,8 @@
 (def discover-card quo.components.community.banner.view/view)
 (def community-icon quo.components.community.icon/community-icon)
 (def token-requirement-list quo.components.community.token-gating/token-requirement-list)
-(def channel-actions quo.components.community.channel-actions/channel-actions)
+(def channel-action quo.components.community.channel-action.view/view)
+(def channel-actions quo.components.community.channel-actions.view/view)
 
 ;;;; Counter
 (def collectible-counter quo.components.counter.collectible-counter.view/view)

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -47,8 +47,8 @@
 
 (defn list-on-end-reached
   [distance-from-list-top]
-  ;; FIXME: that's a bit of a hack but we need to update `distance-from-list-top` once the new messages
+  ;; FIXME: that's a bit of a hack but we need to update `distance-from-list-top` once the new
-  ;; are fetched in order for the header to work properly
+  ;; messages are fetched in order for the header to work properly
   (let [on-loaded (fn [n]
                     (reanimated/set-shared-value distance-from-list-top
                                                  (+ (reanimated/get-shared-value distance-from-list-top)
@@ -147,7 +147,7 @@
       :actions         [{:accessibility-label :action-button-pinned
                          :big?                true
                          :label               (or latest-pin-text (i18n/label :t/no-pinned-messages))
-                         :color               cover-bg-color
+                         :customization-color cover-bg-color
                          :icon                :i/pin
                          :counter-value       pins-count
                          :on-press            (fn []
@@ -157,7 +157,7 @@
                          :label               (i18n/label (if muted
                                                             unmute-chat-label
                                                             mute-chat-label))
-                         :color               cover-bg-color
+                         :customization-color cover-bg-color
                          :icon                (if muted? :i/activity-center :i/muted)
                          :on-press            (fn []
                                                 (if muted?

src/status_im/contexts/preview/quo/community/channel_action.cljs

@@ -0,0 +1,31 @@
+(ns status-im.contexts.preview.quo.community.channel-action
+  (:require [quo.core :as quo]
+            [reagent.core :as reagent]
+            [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key  :label
+    :type :text}
+   {:key  :big?
+    :type :boolean}
+   {:key  :counter-value
+    :type :number}
+   {:key     :icon
+    :type    :select
+    :options [{:key :i/muted}
+              {:key :i/pin}]}
+   (preview/customization-color-option)
+   {:key  :disabled?
+    :type :boolean}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:label               "Action"
+                             :icon                :i/muted
+                             :customization-color :blue
+                             :counter-value       nil
+                             :disabled?           false
+                             :big?                true})]
+    (fn []
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/channel-action @state]])))

src/status_im/contexts/preview/quo/community/channel_actions.cljs

@@ -10,19 +10,38 @@
    [quo/channel-actions
     {:actions [{:big?                true
                 :label               "Pinned Messages"
-                :color         :blue
+                :customization-color :blue
                 :icon                :i/pin
                 :counter-value       0}]}]
    [rn/view {:height 50}]
    [quo/channel-actions
-    {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
+    {:actions [{:label               "Pinned Messages"
-               {:label "Mute chat" :color :blue :icon :i/muted}]}]
+                :customization-color :blue
+                :icon                :i/pin
+                :counter-value       5}
+               {:label               "Mute chat"
+                :customization-color :blue
+                :icon                :i/muted}]}]
    [rn/view {:height 50}]
    [quo/channel-actions
-    {:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
+    {:actions
-               {:label "Mute chat" :color :blue :icon :i/muted}]}]
+     [{:big?                true
+       :label               "Pinned Messages"
+       :customization-color :blue
+       :icon                :i/pin
+       :counter-value       5}
+      {:label               "Mute chat"
+       :customization-color :blue
+       :icon                :i/muted}]}]
    [rn/view {:height 50}]
    [quo/channel-actions
-    {:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
+    {:actions [{:label               "Pinned Messages"
-               {:label "Mute chat" :color :blue :icon :i/muted}
+                :customization-color :blue
-               {:label "Something else" :color :blue :icon :i/placeholder}]}]])
+                :icon                :i/pin
+                :counter-value       5}
+               {:label               "Mute chat"
+                :customization-color :blue
+                :icon                :i/muted}
+               {:label               "Something else"
+                :customization-color :blue
+                :icon                :i/placeholder}]}]])

src/status_im/contexts/preview/quo/main.cljs

@@ -33,6 +33,8 @@
     [status-im.contexts.preview.quo.colors.color :as color]
     [status-im.contexts.preview.quo.colors.color-picker :as color-picker]
     [status-im.contexts.preview.quo.common :as common]
+    [status-im.contexts.preview.quo.community.channel-action :as
+     channel-action]
     [status-im.contexts.preview.quo.community.channel-actions :as
      channel-actions]
     [status-im.contexts.preview.quo.community.community-card-view :as
@@ -260,6 +262,9 @@
                        {:name      :token-gating
                         :options   {:insets {:bottom? true}}
                         :component token-gating/view}
+                       {:name      :channel-action
+                        :options   {:insets {:bottom? true}}
+                        :component channel-action/view}
                        {:name      :channel-actions
                         :options   {:insets {:bottom? true}}
                         :component channel-actions/view}]