From 265d9be6c2a7c3b1bfbcd2a2c8d1a7b67c22b63f Mon Sep 17 00:00:00 2001 From: Lungu Cristian Date: Mon, 9 Oct 2023 12:44:12 +0300 Subject: [PATCH] Follow-up quo2 reaction selector components (#17304) * ref: refactored react/react-selector/reactions-selector feat: added preview multi-select descriptor feat: finished component ref: fixed linting feat: added pinned styles to all reactions lint: fixed linting ref: preview customizer for reactions-selector lint: fixed linting fix: preview select bg ref: destructured reaction * feat: added pinned prop in chat messages * fix: removed status_im2 require inside quo2 component * fix: addressed review comments * lint: fixed linting * fix: added missing theme arg to theme-color * chore: removed unnecessary FIXME * fix: message reactions not working on press --- src/quo2/components/reactions/reaction.cljs | 43 --------- src/quo2/components/reactions/style.cljs | 33 ------- .../components/selectors/react/style.cljs | 12 +++ src/quo2/components/selectors/react/view.cljs | 26 ++++++ .../selectors/react_selector/style.cljs | 44 +++++++++ .../selectors/react_selector/view.cljs | 46 ++++++++++ .../reaction_resource.clj} | 2 +- .../reaction_resource.cljs} | 4 +- .../components/selectors/reactions/view.cljs | 25 ------ .../component_spec.cljs | 15 ++-- .../style.cljs | 2 +- .../selectors/reactions_selector/view.cljs | 23 +++++ src/quo2/core.cljs | 13 ++- src/quo2/core_spec.cljs | 2 +- src/status_im2/constants.cljs | 1 - .../chat/messages/content/reactions/view.cljs | 76 ++++++++-------- .../contexts/chat/messages/drawers/view.cljs | 7 +- src/status_im2/contexts/quo_preview/main.cljs | 15 ++-- .../contexts/quo_preview/preview.cljs | 89 ++++++++++++++++++- .../contexts/quo_preview/reactions/react.cljs | 31 ------- .../contexts/quo_preview/selectors/react.cljs | 75 ++++++++++++++++ .../quo_preview/selectors/react_selector.cljs | 58 ++++++++++++ .../quo_preview/selectors/reactions.cljs | 18 ---- .../selectors/reactions_selector.cljs | 27 ++++++ .../contexts/quo_preview/style.cljs | 10 +++ 25 files changed, 476 insertions(+), 221 deletions(-) delete mode 100644 src/quo2/components/reactions/reaction.cljs delete mode 100644 src/quo2/components/reactions/style.cljs create mode 100644 src/quo2/components/selectors/react/style.cljs create mode 100644 src/quo2/components/selectors/react/view.cljs create mode 100644 src/quo2/components/selectors/react_selector/style.cljs create mode 100644 src/quo2/components/selectors/react_selector/view.cljs rename src/quo2/components/{reactions/resource.clj => selectors/reaction_resource.clj} (94%) rename src/quo2/components/{reactions/resource.cljs => selectors/reaction_resource.cljs} (66%) delete mode 100644 src/quo2/components/selectors/reactions/view.cljs rename src/quo2/components/selectors/{reactions => reactions_selector}/component_spec.cljs (57%) rename src/quo2/components/selectors/{reactions => reactions_selector}/style.cljs (86%) create mode 100644 src/quo2/components/selectors/reactions_selector/view.cljs delete mode 100644 src/status_im2/contexts/quo_preview/reactions/react.cljs create mode 100644 src/status_im2/contexts/quo_preview/selectors/react.cljs create mode 100644 src/status_im2/contexts/quo_preview/selectors/react_selector.cljs delete mode 100644 src/status_im2/contexts/quo_preview/selectors/reactions.cljs create mode 100644 src/status_im2/contexts/quo_preview/selectors/reactions_selector.cljs diff --git a/src/quo2/components/reactions/reaction.cljs b/src/quo2/components/reactions/reaction.cljs deleted file mode 100644 index e6647beffc..0000000000 --- a/src/quo2/components/reactions/reaction.cljs +++ /dev/null @@ -1,43 +0,0 @@ -(ns quo2.components.reactions.reaction - (:require [quo2.components.icon :as icons] - [quo2.components.markdown.text :as text] - [quo2.components.reactions.resource :as resource] - [quo2.components.reactions.style :as style] - [quo2.foundations.colors :as colors] - [quo2.theme :as theme] - [react-native.core :as rn])) - -(defn- add-reaction-internal - [{:keys [on-press theme]}] - [rn/touchable-opacity - {:on-press on-press - :accessibility-label :emoji-reaction-add - :style (style/add-reaction theme)} - [icons/icon :i/add-reaction - {:size 20 - :color (colors/theme-colors colors/neutral-50 - colors/neutral-40 - theme)}]]) - -(def add-reaction (theme/with-theme add-reaction-internal)) - -(defn reaction-internal - "Add your emoji as a param here" - [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press theme]}] - (let [numeric-value (int clicks)] - [rn/touchable-opacity - {:on-press on-press - :on-long-press on-long-press - :accessibility-label accessibility-label - :style (style/reaction neutral? theme)} - [rn/image - {:style {:width 16 :height 16} - :accessibility-label :emoji - :source (resource/get-reaction emoji)}] - [text/text - {:size :paragraph-2 - :weight :semi-bold - :style style/reaction-count} - (str (if (pos? numeric-value) numeric-value 1))]])) - -(def reaction (theme/with-theme reaction-internal)) diff --git a/src/quo2/components/reactions/style.cljs b/src/quo2/components/reactions/style.cljs deleted file mode 100644 index bbed750235..0000000000 --- a/src/quo2/components/reactions/style.cljs +++ /dev/null @@ -1,33 +0,0 @@ -(ns quo2.components.reactions.style - (:require [quo2.foundations.colors :as colors])) - -(def reaction-styling - {:flex-direction :row - :justify-content :center - :align-items :center - :padding-horizontal 8 - :border-radius 8 - :height 24}) - -(defn add-reaction - [theme] - (merge reaction-styling - {:padding-horizontal 8 - :border-width 1 - :border-color (colors/theme-colors colors/neutral-20 - colors/neutral-70 - theme)})) - -(defn reaction - [neutral? theme] - (merge reaction-styling - {:border-color (colors/theme-colors colors/neutral-20 - colors/neutral-80 - theme) - :border-width 1 - :background-color (if neutral? - (colors/theme-colors colors/neutral-10 - colors/neutral-80-opa-40) - :transparent)})) - -(def reaction-count {:margin-left 4}) diff --git a/src/quo2/components/selectors/react/style.cljs b/src/quo2/components/selectors/react/style.cljs new file mode 100644 index 0000000000..b500e48dba --- /dev/null +++ b/src/quo2/components/selectors/react/style.cljs @@ -0,0 +1,12 @@ +(ns quo2.components.selectors.react.style) + +(def container + {:flex-direction :row + :justify-content :flex-start + :flex 1 + :flex-wrap :wrap + :margin-bottom -6}) + +(def reaction-container + {:margin-bottom 6 + :margin-right 6}) diff --git a/src/quo2/components/selectors/react/view.cljs b/src/quo2/components/selectors/react/view.cljs new file mode 100644 index 0000000000..263bba0d29 --- /dev/null +++ b/src/quo2/components/selectors/react/view.cljs @@ -0,0 +1,26 @@ +(ns quo2.components.selectors.react.view + (:require [quo2.components.selectors.react-selector.view :as react-selector] + [quo2.components.selectors.react.style :as style] + [react-native.core :as rn])) + +(defn view + [{:keys [reactions on-press on-long-press add-reaction? on-press-add use-case container-style]}] + [rn/view {:style (merge style/container container-style)} + (for [emoji-reaction reactions + :let [{:keys [emoji emoji-id emoji-reaction-id quantity own]} emoji-reaction]] + [react-selector/view + {:key emoji-reaction-id + :emoji emoji + :state (if own :pressed :not-pressed) + :use-case use-case + :container-style style/reaction-container + :clicks quantity + :on-press #(on-press emoji-reaction) + :on-long-press #(on-long-press emoji-reaction) + :accessibility-label (str "emoji-reaction-" emoji-id)}]) + (when add-reaction? + [react-selector/view + {:on-press on-press-add + :state :add-reaction + :use-case use-case + :accessibility-label (str "emoji-add-reaction")}])]) diff --git a/src/quo2/components/selectors/react_selector/style.cljs b/src/quo2/components/selectors/react_selector/style.cljs new file mode 100644 index 0000000000..c56ff8286d --- /dev/null +++ b/src/quo2/components/selectors/react_selector/style.cljs @@ -0,0 +1,44 @@ +(ns quo2.components.selectors.react-selector.style + (:require [quo2.foundations.colors :as colors])) + +(defn add-reaction + [pinned? theme] + (let [border-color (if pinned? + (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) + (colors/theme-colors colors/neutral-20 colors/neutral-70 theme))] + (cond-> {:justify-content :center + :align-items :center + :padding-horizontal 7 + :border-radius 8 + :border-width 1 + :height 24 + :border-color border-color}))) + +(defn reaction + [pressed? pinned? theme] + (let [background-color (cond + (not pressed?) :transparent + pinned? (colors/theme-colors colors/neutral-80-opa-5 + colors/white-opa-5 + theme) + :else (colors/theme-colors colors/neutral-10 + colors/neutral-80-opa-40 + theme)) + border-color (if pinned? + (colors/theme-colors colors/neutral-80-opa-5 + colors/white-opa-5 + theme) + (colors/theme-colors colors/neutral-20 + colors/neutral-80 + theme))] + {:flex-direction :row + :justify-content :center + :align-items :center + :padding-horizontal 8 + :border-radius 8 + :height 24 + :border-width 1 + :background-color background-color + :border-color border-color})) + +(def reaction-count {:margin-left 4}) diff --git a/src/quo2/components/selectors/react_selector/view.cljs b/src/quo2/components/selectors/react_selector/view.cljs new file mode 100644 index 0000000000..a8c22ef85a --- /dev/null +++ b/src/quo2/components/selectors/react_selector/view.cljs @@ -0,0 +1,46 @@ +(ns quo2.components.selectors.react-selector.view + (:require [quo2.components.markdown.text :as text] + [quo2.components.selectors.reaction-resource :as reaction.resource] + [quo2.components.selectors.react-selector.style :as style] + [quo2.theme :as quo.theme] + [quo2.foundations.colors :as colors] + [quo2.components.icon :as icons] + [react-native.core :as rn])) + +(defn- view-internal + [{:keys [emoji clicks state use-case on-press accessibility-label on-long-press container-style + theme]}] + (let [numeric-value (int clicks) + icon-color (if (= :pinned use-case) + (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme) + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))] + (if (= :add-reaction state) + [rn/touchable-opacity + {:on-press on-press + :accessibility-label :emoji-reaction-add + :style (style/add-reaction + (= :pinned use-case) + theme)} + [icons/icon :i/add-reaction + {:size 20 + :color icon-color}]] + + [rn/touchable-opacity + {:on-press on-press + :on-long-press on-long-press + :accessibility-label accessibility-label + :style (merge (style/reaction (= :pressed state) + (= :pinned use-case) + theme) + container-style)} + [rn/image + {:style {:width 15 :height 15} + :accessibility-label :emoji + :source (reaction.resource/get-reaction emoji)}] + [text/text + {:size :paragraph-2 + :weight :semi-bold + :style style/reaction-count} + (str (if (pos? numeric-value) numeric-value 1))]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/reactions/resource.clj b/src/quo2/components/selectors/reaction_resource.clj similarity index 94% rename from src/quo2/components/reactions/resource.clj rename to src/quo2/components/selectors/reaction_resource.clj index 06303e30e9..52dcc54484 100644 --- a/src/quo2/components/reactions/resource.clj +++ b/src/quo2/components/selectors/reaction_resource.clj @@ -1,4 +1,4 @@ -(ns quo2.components.reactions.resource +(ns quo2.components.selectors.reaction-resource (:require [clojure.java.io :as io] [clojure.string :as string])) diff --git a/src/quo2/components/reactions/resource.cljs b/src/quo2/components/selectors/reaction_resource.cljs similarity index 66% rename from src/quo2/components/reactions/resource.cljs rename to src/quo2/components/selectors/reaction_resource.cljs index a9d394d438..8f05bb90e1 100644 --- a/src/quo2/components/reactions/resource.cljs +++ b/src/quo2/components/selectors/reaction_resource.cljs @@ -1,5 +1,5 @@ -(ns quo2.components.reactions.resource - (:require-macros [quo2.components.reactions.resource :refer [resolve-all-reactions]])) +(ns quo2.components.selectors.reaction-resource + (:require-macros [quo2.components.selectors.reaction-resource :refer [resolve-all-reactions]])) (def ^:private reactions (resolve-all-reactions)) diff --git a/src/quo2/components/selectors/reactions/view.cljs b/src/quo2/components/selectors/reactions/view.cljs deleted file mode 100644 index 3a4c1fb170..0000000000 --- a/src/quo2/components/selectors/reactions/view.cljs +++ /dev/null @@ -1,25 +0,0 @@ -(ns quo2.components.selectors.reactions.view - (:require [quo2.components.reactions.resource :as reactions.resource] - [quo2.components.selectors.reactions.style :as style] - [react-native.core :as rn] - [reagent.core :as reagent])) - -(defn view - [_ {:keys [start-pressed?]}] - (let [pressed? (reagent/atom start-pressed?)] - (fn [emoji - {:keys [container-style on-press - accessibility-label] - :or {accessibility-label :reaction}}] - [rn/touchable-without-feedback - {:accessibility-label accessibility-label - :on-press (fn [e] - (swap! pressed? not) - (when on-press - (on-press e)))} - [rn/view - {:style (merge (style/container @pressed?) - container-style)} - [rn/image - {:source (reactions.resource/get-reaction emoji) - :style {:width 20 :height 20}}]]]))) diff --git a/src/quo2/components/selectors/reactions/component_spec.cljs b/src/quo2/components/selectors/reactions_selector/component_spec.cljs similarity index 57% rename from src/quo2/components/selectors/reactions/component_spec.cljs rename to src/quo2/components/selectors/reactions_selector/component_spec.cljs index 34dbf7cbf8..af8cd0adfe 100644 --- a/src/quo2/components/selectors/reactions/component_spec.cljs +++ b/src/quo2/components/selectors/reactions_selector/component_spec.cljs @@ -1,23 +1,26 @@ -(ns quo2.components.selectors.reactions.component-spec - (:require [quo2.components.selectors.reactions.view :as view] +(ns quo2.components.selectors.reactions-selector.component-spec + (:require [quo2.components.selectors.reactions-selector.view :as view] [test-helpers.component :as h])) (h/describe "Selectors > Reactions" (h/test "renders component" - (h/render [view/view :reaction/sad]) + (h/render [view/view {:emoji :reaction/sad}]) (h/is-truthy (h/get-by-label-text :reaction))) (h/describe "on-press event" (h/test "starts with released state" (let [on-press (h/mock-fn)] - (h/render [view/view :reaction/love {:on-press on-press}]) + (h/render [view/view + {:emoji :reaction/love + :on-press on-press}]) (h/fire-event :press (h/get-by-label-text :reaction)) (h/was-called on-press))) (h/test "starts with pressed state" (let [on-press (h/mock-fn)] - (h/render [view/view :reaction/love - {:on-press on-press + (h/render [view/view + {:emoji :reaction/love + :on-press on-press :start-pressed? true}]) (h/fire-event :press (h/get-by-label-text :reaction)) (h/was-called on-press))))) diff --git a/src/quo2/components/selectors/reactions/style.cljs b/src/quo2/components/selectors/reactions_selector/style.cljs similarity index 86% rename from src/quo2/components/selectors/reactions/style.cljs rename to src/quo2/components/selectors/reactions_selector/style.cljs index 913c809fc8..d5d4ed21e2 100644 --- a/src/quo2/components/selectors/reactions/style.cljs +++ b/src/quo2/components/selectors/reactions_selector/style.cljs @@ -1,4 +1,4 @@ -(ns quo2.components.selectors.reactions.style +(ns quo2.components.selectors.reactions-selector.style (:require [quo2.foundations.colors :as colors])) (defn container diff --git a/src/quo2/components/selectors/reactions_selector/view.cljs b/src/quo2/components/selectors/reactions_selector/view.cljs new file mode 100644 index 0000000000..d8aa75b6e2 --- /dev/null +++ b/src/quo2/components/selectors/reactions_selector/view.cljs @@ -0,0 +1,23 @@ +(ns quo2.components.selectors.reactions-selector.view + (:require [quo2.components.selectors.reaction-resource :as reactions.resource] + [quo2.components.selectors.reactions-selector.style :as style] + [react-native.core :as rn] + [reagent.core :as reagent])) + +(defn view + [{:keys [start-pressed?]}] + (let [pressed? (reagent/atom start-pressed?)] + (fn [{:keys [emoji container-style on-press + accessibility-label] + :or {accessibility-label :reaction}}] + [rn/pressable + {:accessibility-label accessibility-label + :style (merge (style/container @pressed?) + container-style) + :on-press (fn [e] + (swap! pressed? not) + (when on-press + (on-press e)))} + [rn/image + {:source (reactions.resource/get-reaction emoji) + :style {:width 20 :height 20}}]]))) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 244016a052..c6c5378af9 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -99,12 +99,13 @@ quo2.components.profile.profile-card.view quo2.components.profile.select-profile.view quo2.components.profile.showcase-nav.view - quo2.components.reactions.reaction quo2.components.record-audio.record-audio.view quo2.components.record-audio.soundtrack.view quo2.components.selectors.disclaimer.view quo2.components.selectors.filter.view - quo2.components.selectors.reactions.view + quo2.components.selectors.reactions-selector.view + quo2.components.selectors.react.view + quo2.components.selectors.react-selector.view quo2.components.selectors.selectors.view quo2.components.settings.accounts.view quo2.components.settings.data-item.view @@ -307,10 +308,6 @@ (def select-profile quo2.components.profile.select-profile.view/view) (def showcase-nav quo2.components.profile.showcase-nav.view/view) -;;;; Reactions -(def reaction quo2.components.reactions.reaction/reaction) -(def add-reaction quo2.components.reactions.reaction/add-reaction) - ;;;; Record Audio (def record-audio quo2.components.record-audio.record-audio.view/record-audio) (def soundtrack quo2.components.record-audio.soundtrack.view/f-soundtrack) @@ -319,7 +316,9 @@ (def author quo2.components.messages.author.view/author) (def disclaimer quo2.components.selectors.disclaimer.view/view) (def filter quo2.components.selectors.filter.view/view) -(def reactions quo2.components.selectors.reactions.view/view) +(def reactions-selector quo2.components.selectors.reactions-selector.view/view) +(def react quo2.components.selectors.react.view/view) +(def react-selector quo2.components.selectors.react-selector.view/view) (def checkbox quo2.components.selectors.selectors.view/checkbox) (def toggle quo2.components.selectors.selectors.view/toggle) (def radio quo2.components.selectors.selectors.view/radio) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 884e43d5a2..53d9f20c85 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -59,7 +59,7 @@ [quo2.components.record-audio.soundtrack.component-spec] [quo2.components.selectors.disclaimer.component-spec] [quo2.components.selectors.filter.component-spec] - [quo2.components.selectors.reactions.component-spec] + [quo2.components.selectors.reactions-selector.component-spec] [quo2.components.selectors.selectors.component-spec] [quo2.components.settings.reorder-item.component-spec] [quo2.components.settings.settings-item.component-spec] diff --git a/src/status_im2/constants.cljs b/src/status_im2/constants.cljs index 93f437019e..4fbb2461e5 100644 --- a/src/status_im2/constants.cljs +++ b/src/status_im2/constants.cljs @@ -23,7 +23,6 @@ (def ^:const content-type-link 101) (def ^:const content-type-album 102) - (def ^:const contact-request-state-none 0) (def ^:const contact-request-state-mutual 1) (def ^:const contact-request-state-sent 2) diff --git a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs index f520ccfe4d..4b6cbf9f8b 100644 --- a/src/status_im2/contexts/chat/messages/content/reactions/view.cljs +++ b/src/status_im2/contexts/chat/messages/content/reactions/view.cljs @@ -1,13 +1,12 @@ (ns status-im2.contexts.chat.messages.content.reactions.view - (:require [status-im2.constants :as constants] - [quo2.core :as quo] - [react-native.core :as rn] + (:require [quo2.core :as quo] + [status-im2.constants :as constants] [utils.re-frame :as rf] [status-im2.contexts.chat.messages.drawers.view :as drawers] [quo2.theme :as quo.theme])) (defn- on-press - [own message-id emoji-id emoji-reaction-id] + [{:keys [own message-id emoji-id emoji-reaction-id]}] (if own (rf/dispatch [:models.reactions/send-emoji-reaction-retraction {:message-id message-id @@ -18,7 +17,7 @@ :emoji-id emoji-id}]))) (defn- on-long-press - [{:keys [message-id emoji-id user-message-content reactions theme]}] + [{:keys [message-id emoji-id user-message-content reactions-order theme]}] (rf/dispatch [:chat.ui/emoji-reactions-by-message-id {:message-id message-id @@ -33,48 +32,47 @@ [:chat/clear-emoji-reaction-author-details])) :content (fn [] [drawers/reaction-authors - {:reactions-order reactions + {:reactions-order reactions-order :theme theme}]) :selected-item (fn [] user-message-content) :padding-bottom-override 0}]))}])) +(defn- on-press-add + [{:keys [chat-id message-id user-message-content]}] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch + [:show-bottom-sheet + {:content (fn [] [drawers/reactions + {:chat-id chat-id + :message-id message-id}]) + :selected-item (fn [] + user-message-content)}])) + +(defn- add-emoji-key + [reaction] + (assoc reaction + :emoji + (get constants/reactions (:emoji-id reaction)))) + (defn- view-internal - [{:keys [message-id chat-id theme]} user-message-content] + [{:keys [message-id chat-id pinned-by theme]} user-message-content] (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])] [:<> (when (seq reactions) - [rn/scroll-view - {:shows-horizontal-scroll-indicator false - :horizontal true - :style {:margin-left 44 - :margin-top 8 - :flex-direction :row}} - (for [{:keys [own emoji-id quantity emoji-reaction-id] - :as emoji-reaction} reactions] - ^{:key emoji-reaction} - [rn/view {:style {:margin-right 6}} - [quo/reaction - {:emoji (get constants/reactions emoji-id) - :neutral? own - :clicks quantity - :on-press #(on-press own message-id emoji-id emoji-reaction-id) - :on-long-press #(on-long-press - {:message-id message-id - :emoji-id emoji-id - :user-message-content user-message-content - :reactions (map :emoji-id reactions) - :theme theme}) - :accessibility-label (str "emoji-reaction-" emoji-id)}]]) - [quo/add-reaction - {:on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch - [:show-bottom-sheet - {:content (fn [] [drawers/reactions - {:chat-id chat-id - :message-id message-id}]) - :selected-item (fn [] - user-message-content)}]))}]])])) + [quo/react + {:container-style {:margin-left 44 + :margin-top 8} + :reactions (map add-emoji-key reactions) + :add-reaction? true + :use-case (when pinned-by :pinned) + :on-press #(on-press (assoc % :message-id message-id)) + :on-long-press #(on-long-press (assoc % + :message-id message-id + :theme theme + :reactions-order (map :emoji-id reactions))) + :on-press-add #(on-press-add {:chat-id chat-id + :message-id message-id + :user-message-content user-message-content})}])])) (def message-reactions-row (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/chat/messages/drawers/view.cljs b/src/status_im2/contexts/chat/messages/drawers/view.cljs index 7a88f312ff..661609a6ca 100644 --- a/src/status_im2/contexts/chat/messages/drawers/view.cljs +++ b/src/status_im2/contexts/chat/messages/drawers/view.cljs @@ -10,7 +10,7 @@ [status-im2.common.contact-list-item.view :as contact-list-item] [status-im2.contexts.chat.messages.drawers.style :as style] [react-native.gesture :as gesture] - [quo2.components.reactions.resource :as reactions.resource])) + [quo2.components.selectors.reaction-resource :as reactions.resource])) (defn contact-list-item-fn [{:keys [from compressed-key]}] @@ -185,8 +185,9 @@ (for [[id reaction-name] constants/reactions :let [emoji-reaction-id (get own-reactions id)]] ^{:key id} - [quo/reactions reaction-name - {:start-pressed? (boolean emoji-reaction-id) + [quo/reactions-selector + {:emoji reaction-name + :start-pressed? (boolean emoji-reaction-id) :accessibility-label (str "reaction-" (name reaction-name)) :on-press (fn [] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index be27d82279..72e95a832e 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -14,7 +14,6 @@ [status-im2.contexts.quo-preview.avatars.group-avatar :as group-avatar] [status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar] [status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar] - [status-im2.contexts.quo-preview.selectors.reactions :as selector-reactions] [status-im2.contexts.quo-preview.avatars.wallet-user-avatar :as wallet-user-avatar] [status-im2.contexts.quo-preview.banners.banner :as banner] @@ -119,11 +118,13 @@ [status-im2.contexts.quo-preview.profile.profile-card :as profile-card] [status-im2.contexts.quo-preview.profile.select-profile :as select-profile] [status-im2.contexts.quo-preview.profile.showcase-nav :as showcase-nav] - [status-im2.contexts.quo-preview.reactions.react :as react] [status-im2.contexts.quo-preview.record-audio.record-audio :as record-audio] [status-im2.contexts.quo-preview.selectors.disclaimer :as disclaimer] [status-im2.contexts.quo-preview.selectors.filter :as filter] [status-im2.contexts.quo-preview.selectors.selectors :as selectors] + [status-im2.contexts.quo-preview.selectors.reactions-selector :as reactions-selector] + [status-im2.contexts.quo-preview.selectors.react-selector :as react-selector] + [status-im2.contexts.quo-preview.selectors.react :as react] [status-im2.contexts.quo-preview.settings.accounts :as accounts] [status-im2.contexts.quo-preview.settings.data-item :as data-item] [status-im2.contexts.quo-preview.settings.settings-item :as settings-item] @@ -365,8 +366,6 @@ :component select-profile/view} {:name :showcase-nav :component showcase-nav/view}] - :reactions [{:name :react - :component react/view}] :record-audio [{:name :record-audio :component record-audio/view}] :selectors [{:name :disclaimer @@ -375,8 +374,12 @@ :component filter/view} {:name :selectors :component selectors/view} - {:name :select-reactions - :component selector-reactions/view}] + {:name :reactions-selector + :component reactions-selector/preview} + {:name :react-selector + :component (react-selector/preview-react-selector)} + {:name :react + :component react/preview-react}] :settings [{:name :privacy-option :component privacy-option/preview-options} {:name :accounts diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index d81b6dc1b8..39562e2ab1 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -170,6 +170,86 @@ :field-value field-value}] [customizer-select-button {:open open :selected-option selected-option}]]])))) +(defn- customizer-multi-select-modal + [{:keys [open-atom options selected-keys-atom]}] + [rn/modal + {:visible @open-atom + :on-request-close #(reset! open-atom false) + :status-bar-translucent true + :transparent true + :animation :slide} + [rn/view {:style (style/modal-overlay)} + [rn/view {:style (style/modal-container)} + [rn/scroll-view {:shows-vertical-scroll-indicator false} + (doall + (for [{k :key v :value} options + :let [v (or v (humanize k))]] + ^{:key k} + + (let [checked? (boolean (some #(= k %) @selected-keys-atom)) + remove-key (fn [v] (filterv #(not= % k) v)) + on-press (fn [] + (swap! selected-keys-atom + (if checked? remove-key conj) + k))] + [rn/pressable + {:style (style/multi-select-option) + :on-press on-press} + [rn/text {:style (style/field-text false)} v] + [quo/checkbox + {:checked? checked? + :on-change on-press}]])))] + [rn/view {:style (style/footer)} + [rn/pressable + {:style (style/select-button) + :on-press (fn [] + (reset! selected-keys-atom nil) + (reset! open-atom false))} + [rn/text {:style (style/field-text false)} + "Clear"]] + [rn/view {:style {:width 16}}] + [rn/touchable-opacity + {:style (style/select-button) + :on-press #(reset! open-atom false)} + [rn/text {:style (style/field-text false)} + "Close"]]]]]]) + +(defn filter-by-keys + [items ks] + (filter (fn [item] + (some #(= (:key item) %) ks)) + items)) + +(defn- customizer-multi-select-button + [{:keys [open selected-options]}] + [rn/pressable + {:style (style/select-container) + :on-press #(reset! open true)} + [rn/text + {:style (style/field-select) + :number-of-lines 1} + (if (seq selected-options) + (string/join ", " (map :value selected-options)) + "Select options")] + [rn/view + [quo/icon :i/chevron-right]]]) + +(defn- customizer-multi-select + [] + (let [open (reagent/atom nil)] + (fn [{:keys [label state options] :as args}] + (let [label (or label (key->text-label (:key args))) + selected-keys (reagent/cursor state [(:key args)]) + selected-options (filter-by-keys options @selected-keys)] + [rn/view {:style style/field-row} + [label-view state label] + [rn/view {:style style/field-column} + [customizer-multi-select-modal + {:open-atom open + :selected-keys-atom selected-keys + :options options}] + [customizer-multi-select-button {:open open :selected-options selected-options}]]])))) + (defn customizer [state descriptors] [rn/view @@ -181,10 +261,11 @@ ^{:key (:key desc)} [:<> (case (:type desc) - :boolean [customizer-boolean descriptor] - :text [customizer-text descriptor] - :number [customizer-number descriptor] - :select [customizer-select descriptor] + :boolean [customizer-boolean descriptor] + :text [customizer-text descriptor] + :number [customizer-number descriptor] + :select [customizer-select descriptor] + :multi-select [customizer-multi-select descriptor] nil)]))]) (defn customization-color-option diff --git a/src/status_im2/contexts/quo_preview/reactions/react.cljs b/src/status_im2/contexts/quo_preview/reactions/react.cljs deleted file mode 100644 index 5071bbb4c7..0000000000 --- a/src/status_im2/contexts/quo_preview/reactions/react.cljs +++ /dev/null @@ -1,31 +0,0 @@ -(ns status-im2.contexts.quo-preview.reactions.react - (:require [clojure.string :as string] - [quo2.core :as quo] - [reagent.core :as reagent] - [status-im2.constants :as constants] - [status-im2.contexts.quo-preview.preview :as preview])) - -(def descriptor - [{:label "Count" - :key :clicks - :type :text} - {:key :emoji - :type :select - :options (for [reaction (vals constants/reactions)] - {:key reaction - :value (string/capitalize (name reaction))})} - {:key :neutral? :type :boolean}]) - -(defn view - [] - (let [state (reagent/atom {:emoji :reaction/love})] - (fn [] - [preview/preview-container - {:state state - :descriptor descriptor - :component-container-style {:padding-bottom 50 - :flex-direction :row - :align-items :center - :justify-content :center}} - [quo/reaction @state] - [quo/add-reaction]]))) diff --git a/src/status_im2/contexts/quo_preview/selectors/react.cljs b/src/status_im2/contexts/quo_preview/selectors/react.cljs new file mode 100644 index 0000000000..dfbe06a2e9 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/selectors/react.cljs @@ -0,0 +1,75 @@ +(ns status-im2.contexts.quo-preview.selectors.react + (:require [clojure.string :as string] + [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.foundations.colors :as colors] + [status-im2.constants :as constants] + [status-im2.contexts.quo-preview.preview :as preview])) + +(defn- gen-quantity + [max-count _] + (rand-int max-count)) + +(def ^:private memo-gen-quantity (memoize gen-quantity)) + +(def ^:private descriptor + [{:key :add-reaction? + :type :boolean} + {:label "Reactions" + :key :reaction-ids + :type :multi-select + :options (for [[reaction-id reaction] constants/reactions] + {:key reaction-id + :value (string/capitalize + (last + (string/split (name reaction) #"/")))})} + {:label "Max rand. reactions (helper)" + :key :max-count + :type :number} + {:key :use-case + :type :select + :options [{:key :default + :value "Default"} + {:key :pinned + :value "Pinned"}]}]) + +(defn preview-react + [] + (let [state (reagent/atom {:add-reaction? true + :max-count 1000 + :reaction-ids [1 2 3] + :use-case :default}) + pressed-reactions (reagent/atom #{1})] + + (fn [] + (let [reactions (mapv (fn [reaction-id] + {:emoji-reaction-id reaction-id + :emoji-id reaction-id + :emoji (get constants/reactions reaction-id) + :quantity (memo-gen-quantity (:max-count @state) reaction-id) + :own (contains? @pressed-reactions reaction-id)}) + (:reaction-ids @state))] + [preview/preview-container + {:state state + :descriptor descriptor} + [rn/view + {:padding-bottom 150 + :padding-vertical 60 + :padding-horizontal 20 + :border-radius 16 + :background-color (when (= :pinned (:use-case @state)) + (colors/custom-color :blue 50 10)) + :align-items :flex-start} + [quo/react + {:reactions reactions + :add-reaction? (:add-reaction? @state) + :use-case (:use-case @state) + :on-press (fn [reaction] + (let [reaction-id (:emoji-id reaction) + change-pressed (partial swap! pressed-reactions)] + (if (contains? @pressed-reactions reaction-id) + (change-pressed disj reaction-id) + (change-pressed conj reaction-id)))) + :on-long-press identity + :on-press-new identity}]]])))) diff --git a/src/status_im2/contexts/quo_preview/selectors/react_selector.cljs b/src/status_im2/contexts/quo_preview/selectors/react_selector.cljs new file mode 100644 index 0000000000..0851802c09 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/selectors/react_selector.cljs @@ -0,0 +1,58 @@ +(ns status-im2.contexts.quo-preview.selectors.react-selector + (:require [clojure.string :as string] + [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.constants :as constants] + [status-im2.contexts.quo-preview.preview :as preview] + [quo2.foundations.colors :as colors])) + +(def descriptor + [{:key :clicks + :type :text} + {:key :emoji + :type :select + :options (for [reaction (vals constants/reactions)] + {:key reaction + :value (string/capitalize (name reaction))})} + {:key :state + :type :select + :options [{:key :not-pressed + :value "Not pressed by me"} + {:key :pressed + :value "Pressed by me"} + {:key :add-reaction + :value "Add reaction"}]} + {:key :use-case + :type :select + :options [{:key :default + :value "Default"} + {:key :pinned + :value "Pinned"}]}]) + +(defn preview-react-selector + [] + (let [state (reagent/atom {:emoji :reaction/love + :state :not-pressed + :use-case :default})] + (fn [] + (println @state) + [preview/preview-container + {:state state + :descriptor descriptor} + [rn/view + {:padding-bottom 150 + :align-items :center} + [rn/view + {:width 100 + :padding-vertical 60 + :border-radius 16 + :background-color (when (= :pinned (:use-case @state)) + (colors/custom-color + :blue + 50 + 10)) + :justify-content :space-evenly + :flex-direction :row + :align-items :center} + [quo/react-selector @state]]]]))) diff --git a/src/status_im2/contexts/quo_preview/selectors/reactions.cljs b/src/status_im2/contexts/quo_preview/selectors/reactions.cljs deleted file mode 100644 index 241b4b9866..0000000000 --- a/src/status_im2/contexts/quo_preview/selectors/reactions.cljs +++ /dev/null @@ -1,18 +0,0 @@ -(ns status-im2.contexts.quo-preview.selectors.reactions - (:require [quo2.core :as quo] - [react-native.core :as rn] - [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.constants :as constants])) - -(defn view - [] - [preview/preview-container - {:component-container-style {:flex 1 - :padding-top 20 - :flex-direction :row - :justify-content :center - :align-items :center}} - [rn/view {:flex-direction :row} - (for [emoji (vals constants/reactions)] - ^{:key emoji} - [quo/reactions emoji {:container-style {:margin-right 5}}])]]) diff --git a/src/status_im2/contexts/quo_preview/selectors/reactions_selector.cljs b/src/status_im2/contexts/quo_preview/selectors/reactions_selector.cljs new file mode 100644 index 0000000000..10c39f0ddd --- /dev/null +++ b/src/status_im2/contexts/quo_preview/selectors/reactions_selector.cljs @@ -0,0 +1,27 @@ +(ns status-im2.contexts.quo-preview.selectors.reactions-selector + (:require [quo2.core :as quo] + [clojure.string :as string] + [status-im2.contexts.quo-preview.preview :as preview] + [reagent.core :as r] + [react-native.core :as rn] + [status-im2.constants :as constants])) + +(def descriptor + [{:key :emoji + :type :select + :options (for [reaction (vals constants/reactions)] + {:key reaction + :value (string/capitalize (name reaction))})}]) + +(defn preview + [] + (let [state (r/atom {:emoji :reaction/love})] + (fn [] + [preview/preview-container + {:state state + :descriptor descriptor} + [rn/view + {:style {:margin-top 40 + :align-items :center}} + [quo/reactions-selector {:emoji (:emoji @state)}]]]))) + diff --git a/src/status_im2/contexts/quo_preview/style.cljs b/src/status_im2/contexts/quo_preview/style.cljs index 2507217fec..47ef1555d6 100644 --- a/src/status_im2/contexts/quo_preview/style.cljs +++ b/src/status_im2/contexts/quo_preview/style.cljs @@ -55,6 +55,16 @@ {:flex-shrink 1 :padding-top 12}) +(defn multi-select-option + [] + (merge (field-container false) + {:justify-content :space-between + :align-items :space-between + :flex 1 + :flex-direction :row + :margin-vertical 4 + :background-color (field-default-bg-color)})) + (defn select-container [] (merge (field-container false)