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

quo2 profile-select component 

Signed-off-by: Parvesh Monu <parvesh.dhullmonu@gmail.com>
This commit is contained in:
Ajay Sivan 2023-02-23 00:45:11 +05:30 committed by Parvesh Monu
parent e2169cbbd4
commit 6ffed4ad47
No known key found for this signature in database
GPG Key ID: F399696520817DE9
7 changed files with 168 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/quo2/components/profile/select_profile/component_spec.cljs Normal file
View File

@ -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)))))

37
src/quo2/components/profile/select_profile/style.cljs Normal file
View File

@ -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})

52
src/quo2/components/profile/select_profile/view.cljs Normal file
View File

@ -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]])))

2
src/quo2/core.cljs
View File

@ -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)

1
src/quo2/core_spec.cljs
View File

@ -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]))

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

@ -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}]

55
src/status_im2/contexts/quo_preview/profile/select_profile.cljs Normal file
View File

@ -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}]])