diff --git a/src/quo2/components/profile/select_profile/component_spec.cljs b/src/quo2/components/profile/select_profile/component_spec.cljs new file mode 100644 index 0000000000..7c5acfd87c --- /dev/null +++ b/src/quo2/components/profile/select_profile/component_spec.cljs @@ -0,0 +1,16 @@ +(ns quo2.components.profile.select-profile.component-spec + (:require [quo2.components.profile.select-profile.view :as select-profile] + [test-helpers.component :as h])) + +(h/describe "select-profile component" + (h/test "render component" + (h/render [select-profile/view]) + (-> (h/expect (h/get-by-label-text :select-profile)) + (.toBeTruthy))) + (h/test "call on-change handler when clicked" + (let [on-change (h/mock-fn)] + (h/render [select-profile/view {:on-change on-change}]) + (h/fire-event :on-press (h/get-by-label-text :select-profile)) + (-> (h/expect on-change) + (.toHaveBeenCalledTimes 1))))) + diff --git a/src/quo2/components/profile/select_profile/style.cljs b/src/quo2/components/profile/select_profile/style.cljs new file mode 100644 index 0000000000..c4069c7045 --- /dev/null +++ b/src/quo2/components/profile/select_profile/style.cljs @@ -0,0 +1,37 @@ +(ns quo2.components.profile.select-profile.style + (:require [quo2.foundations.colors :as colors])) + +(defn container + [customization-color selected?] + {:padding 12 + :background-color (colors/custom-color customization-color 50 40) + :border-width 1 + :border-radius 16 + :flex 1 + :border-color (if selected? colors/white-opa-40 :transparent)}) + +(def header + {:flex-direction :row + :justify-content :space-between}) + +(def profile-name + {:margin-top 8 + :color colors/white}) + +(defn select-radio + [selected?] + {:background-color (if selected? :transparent colors/white-opa-5) + :border-width 1.2 + :width 20 + :height 20 + :border-radius 10 + :justify-content :center + :align-items :center + :border-color (if selected? colors/white colors/white-opa-40)}) + +(def select-radio-inner + {:background-color colors/white + :border-radius 7 + :width 14 + :height 14}) + diff --git a/src/quo2/components/profile/select_profile/view.cljs b/src/quo2/components/profile/select_profile/view.cljs new file mode 100644 index 0000000000..bdfb41932f --- /dev/null +++ b/src/quo2/components/profile/select_profile/view.cljs @@ -0,0 +1,52 @@ +(ns quo2.components.profile.select-profile.view + (:require + [quo2.components.profile.select-profile.style :as style] + [react-native.core :as rn] + [quo2.components.markdown.text :as text] + [quo2.components.avatars.user-avatar :as user-avatar] + [reagent.core :as reagent])) + +(defn- on-change-handler + [selected? on-change] + (swap! selected? not) + (when on-change (on-change @selected?))) + +(defn view + "Options + - `default-selected?` The default selected state. Use when the component is not controlled. + - `selected?` Selected state. Use when the component is controlled. + - `name` Full name + - `profile-picture` Profile picture + - `customization-color` Customization color + - `(on-change selected?)` On change event handler + " + [{:keys [default-selected?]}] + (let [internal-selected? (reagent/atom (or default-selected? false))] + (fn [{:keys [selected? + profile-picture + name + customization-color + on-change] + :or {customization-color :turquoise}}] + (when (and (not (nil? selected?)) (not= @internal-selected? selected?)) + (reset! internal-selected? selected?)) + [rn/touchable-opacity + {:style (style/container customization-color @internal-selected?) + :on-press #(on-change-handler internal-selected? on-change) + :active-opacity 1 + :accessibility-label :select-profile} + [rn/view {:style style/header} + [user-avatar/user-avatar + {:full-name name + :profile-picture profile-picture + :status-indicator? false + :ring? true + :size :medium}] + [rn/view {:style (style/select-radio @internal-selected?)} + (when @internal-selected? [rn/view {:style style/select-radio-inner}])]] + [text/text + {:size :heading-2 + :weight :semi-bold + :style style/profile-name + } name]]))) + diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index b52f786b5a..fea8ea9252 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -46,6 +46,7 @@ quo2.components.notifications.toast quo2.components.password.tips.view quo2.components.profile.profile-card.view + quo2.components.profile.select-profile.view quo2.components.reactions.reaction quo2.components.selectors.disclaimer.view quo2.components.selectors.filter.view @@ -152,6 +153,7 @@ ;;;; PROFILE (def profile-card quo2.components.profile.profile-card.view/profile-card) +(def select-profile quo2.components.profile.select-profile.view/view) ;;;; SETTINGS (def privacy-option quo2.components.settings.privacy-option/card) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index cd08698cca..5323f7a035 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -12,5 +12,6 @@ [quo2.components.password.tips.component-spec] [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec] [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec] + [quo2.components.profile.select-profile.component-spec] [quo2.components.selectors.--tests--.selectors-component-spec] [quo2.components.selectors.filter.component-spec])) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 289cbd3dcf..71628cf49d 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -54,6 +54,7 @@ [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton] [status-im2.contexts.quo-preview.profile.collectible :as collectible] [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.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] @@ -210,7 +211,10 @@ :component profile-card/preview-profile-card} {:name :collectible :insets {:top false} - :component collectible/preview-collectible}] + :component collectible/preview-collectible} + {:name :select-profile + :insets {:top false} + :component select-profile/preview-select-profile}] :reactions [{:name :react :insets {:top false} :component react/preview-react}] diff --git a/src/status_im2/contexts/quo_preview/profile/select_profile.cljs b/src/status_im2/contexts/quo_preview/profile/select_profile.cljs new file mode 100644 index 0000000000..b92d02bcff --- /dev/null +++ b/src/status_im2/contexts/quo_preview/profile/select_profile.cljs @@ -0,0 +1,55 @@ +(ns status-im2.contexts.quo-preview.profile.select-profile + (:require [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.core :as quo] + [status-im.react-native.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Customization Color" + :key :customization-color + :type :select + :options (map (fn [color] + {:key color + :value color}) + (keys colors/customization))} + {:label "Name" + :key :name + :type :text} + {:label "Selected" + :key :selected? + :type :boolean}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:selected? false + :name "Alisher Yakupov" + :customization-color :turquoise + :profile-picture (resources/get-mock-image :user-picture-male5)}) + selected? (reagent/cursor state [:selected?])] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [rn/view {:flex 1} + [preview/customizer state descriptor]] + [rn/view + {:padding-vertical 60 + :flex-direction :row + :padding-horizontal 20 + :background-color colors/neutral-90 + :justify-content :center} + [quo/select-profile (merge @state {:on-change #(reset! selected? %)})]]]]))) + +(defn preview-select-profile + [] + [rn/view + {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list + {:flex 1 + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) +