[14681] Make checkbox select contacts correctly in new chat flow (#14790)
This commit is contained in:
Ibrahem Khalil
GitHub
parent
7585767961
commit
f41c69ff4b
|
|
@ -5,26 +5,6 @@
|
|||
[reagent.core :as reagent]
|
||||
[quo2.components.selectors.styles :as style]))
|
||||
|
||||
|
||||
(defn- get-color
|
||||
[checked? disabled? blurred-background?]
|
||||
(cond
|
||||
checked?
|
||||
(colors/custom-color-by-theme
|
||||
:primary
|
||||
50
|
||||
60
|
||||
(when disabled? 30)
|
||||
(when disabled? 30))
|
||||
blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
|
||||
(colors/alpha colors/white (if disabled? 0.05 0.1)))
|
||||
:else
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
|
||||
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
|
||||
|
||||
(defn- handle-press
|
||||
[disabled? on-change checked?]
|
||||
(when (not disabled?)
|
||||
|
|
@ -34,176 +14,96 @@
|
|||
|
||||
(defn checkbox-prefill
|
||||
[{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 21
|
||||
:width 21
|
||||
:border-radius 6
|
||||
:background-color (if blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-80
|
||||
(if disabled? 0.05 0.1))
|
||||
(colors/alpha colors/white (if disabled? 0.05 0.1)))
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-20
|
||||
(if disabled? 0.3 1))
|
||||
(colors/alpha colors/neutral-70
|
||||
(if disabled? 0.3 1))))})
|
||||
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "checkbox-prefill-component"}
|
||||
(when @checked?
|
||||
[rn/view
|
||||
{:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :i/check-small
|
||||
{:size 20
|
||||
:color (colors/theme-colors
|
||||
(colors/alpha colors/neutral-100 (if disabled? 0.3 1))
|
||||
(colors/alpha colors/white (if disabled? 0.3 1)))}]])]])))
|
||||
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
(style/checkbox-prefill blurred-background? disabled?))
|
||||
:accessibility-label (str "checkbox-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "checkbox-prefill-component"}
|
||||
(when checked?
|
||||
[rn/view
|
||||
{:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :i/check-small
|
||||
{:size 20
|
||||
:color (colors/theme-colors
|
||||
(colors/alpha colors/neutral-100 (if disabled? 0.3 1))
|
||||
(colors/alpha colors/white (if disabled? 0.3 1)))}]])]]))))
|
||||
|
||||
(defn checkbox
|
||||
[{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 20})}
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:border-radius 6
|
||||
:border-width (if @checked? 0 1)
|
||||
:background-color (cond
|
||||
@checked?
|
||||
(get-color @checked? disabled? blurred-background?)
|
||||
blurred-background?
|
||||
(colors/theme-colors
|
||||
colors/white-opa-5
|
||||
colors/white-opa-10)
|
||||
:else
|
||||
(colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-80-opa-40))
|
||||
:border-color (if @checked?
|
||||
:none
|
||||
(get-color @checked? disabled? blurred-background?))}
|
||||
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "checkbox-component"}
|
||||
(when @checked?
|
||||
[rn/view
|
||||
{:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :i/check-small
|
||||
{:size 20
|
||||
:color colors/white}]])]]])))
|
||||
|
||||
;; TODO (Omar): issue https://github.com/status-im/status-mobile/issues/14681
|
||||
;(defn checkbox
|
||||
; [{:keys [default-checked?]}]
|
||||
; (let [checked? (reagent/atom (or default-checked? false))]
|
||||
; @(reagent/track
|
||||
; (fn [{:keys [on-change disabled? blurred-background? container-style]}]
|
||||
; [rn/touchable-without-feedback
|
||||
; {:on-press (handle-press disabled? on-change checked?)}
|
||||
; [rn/view
|
||||
; {:style (merge
|
||||
; container-style
|
||||
; {:height 20
|
||||
; :width 20})}
|
||||
; [rn/view
|
||||
; {:style (style/checkbox-toggle checked? disabled? blurred-background?)
|
||||
; :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
|
||||
; :accessibility-role :checkbox
|
||||
; :testID "checkbox-component"}
|
||||
; (when @checked?
|
||||
; [rn/view
|
||||
; {:style
|
||||
; {:height 20
|
||||
; :width 20}}
|
||||
; [icons/icon :i/check-small
|
||||
; {:size 20
|
||||
; :color colors/white}]])]]])
|
||||
; checked?)))
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 20})}
|
||||
[rn/view
|
||||
{:style (style/checkbox blurred-background? disabled? checked?)
|
||||
:accessibility-label (str "checkbox-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "checkbox-component"}
|
||||
(when checked?
|
||||
[rn/view
|
||||
{:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :i/check-small
|
||||
{:size 20
|
||||
:color colors/white}]])]]]))))
|
||||
|
||||
(defn radio
|
||||
[{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 20
|
||||
:border-radius 20
|
||||
:border-width 1
|
||||
:border-color (style/get-color @checked?
|
||||
disabled?
|
||||
blurred-background?)
|
||||
:background-color (when-not blurred-background?
|
||||
(colors/theme-colors colors/white
|
||||
(colors/alpha colors/neutral-80
|
||||
0.4)))})
|
||||
:accessibility-label (str "radio-" (if @checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "radio-component"}
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
(style/radio checked? disabled? blurred-background?))
|
||||
:accessibility-label (str "radio-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "radio-component"}
|
||||
|
||||
[rn/view
|
||||
{:style
|
||||
{:margin-left :auto
|
||||
:height 14
|
||||
:width 14
|
||||
:background-color (when @checked? (style/get-color @checked? disabled? blurred-background?))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto}}]]])))
|
||||
[rn/view
|
||||
{:style
|
||||
(style/radio-inner checked? disabled? blurred-background?)}]]]))))
|
||||
|
||||
(defn toggle
|
||||
[{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 20
|
||||
:width 30
|
||||
:border-radius 20
|
||||
:background-color (style/get-color @checked?
|
||||
disabled?
|
||||
blurred-background?)})
|
||||
:accessibility-label (str "toggle-" (if @checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "toggle-component"}
|
||||
[rn/view
|
||||
{:style
|
||||
{:margin-left (if @checked? 12 2)
|
||||
:height 16
|
||||
:width 16
|
||||
:background-color (if blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/white (if disabled? 0.4 1))
|
||||
(colors/alpha colors/white (if disabled? 0.3 1)))
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/white 1)
|
||||
(colors/alpha colors/white (if disabled? 0.4 1))))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto}}]]])))
|
||||
(let [internal-checked? (reagent/atom (or default-checked? false))]
|
||||
(fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
|
||||
(when (and (not (nil? checked?)) (not= @internal-checked? checked?))
|
||||
(reset! internal-checked? checked?))
|
||||
(let [checked? (or checked? @internal-checked?)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press (handle-press disabled? on-change internal-checked?)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
(style/toggle checked? disabled? blurred-background?))
|
||||
:accessibility-label (str "toggle-" (if checked? "on" "off"))
|
||||
:accessibility-role :checkbox
|
||||
:testID "toggle-component"}
|
||||
[rn/view
|
||||
{:style
|
||||
(style/toggle-inner checked? disabled? blurred-background?)}]]]))))
|
||||
|
|
|
|||
|
|
@ -20,6 +20,44 @@
|
|||
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
|
||||
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
|
||||
|
||||
(defn checkbox-prefill
|
||||
[blurred-background? disabled?]
|
||||
{:height 21
|
||||
:width 21
|
||||
:border-radius 6
|
||||
:background-color (if blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-80
|
||||
(if disabled? 0.05 0.1))
|
||||
(colors/alpha colors/white (if disabled? 0.05 0.1)))
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/neutral-20
|
||||
(if disabled? 0.3 1))
|
||||
(colors/alpha colors/neutral-70
|
||||
(if disabled? 0.3 1))))})
|
||||
|
||||
(defn checkbox
|
||||
[blurred-background? disabled? checked?]
|
||||
{:flex 1
|
||||
:border-radius 6
|
||||
:border-width (if checked? 0 1)
|
||||
:background-color (cond
|
||||
checked?
|
||||
(get-color checked? disabled? blurred-background?)
|
||||
blurred-background?
|
||||
(colors/theme-colors
|
||||
colors/white-opa-5
|
||||
colors/white-opa-10)
|
||||
:else
|
||||
(colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-80-opa-40))
|
||||
:border-color (if checked?
|
||||
:none
|
||||
(get-color checked?
|
||||
disabled?
|
||||
blurred-background?))})
|
||||
|
||||
(defn checkbox-toggle
|
||||
[checked? disabled? blurred-background?]
|
||||
{:flex 1
|
||||
|
|
@ -38,4 +76,55 @@
|
|||
colors/neutral-80-opa-40))
|
||||
:border-color (if @checked?
|
||||
:none
|
||||
(get-color @checked? disabled? blurred-background?))})
|
||||
(get-color @checked? disabled? blurred-background?))})
|
||||
|
||||
(defn radio
|
||||
[checked? disabled? blurred-background?]
|
||||
{:height 20
|
||||
:width 20
|
||||
:border-radius 20
|
||||
:border-width 1
|
||||
:border-color (get-color checked?
|
||||
disabled?
|
||||
blurred-background?)
|
||||
:background-color (when-not blurred-background?
|
||||
(colors/theme-colors colors/white
|
||||
(colors/alpha colors/neutral-80
|
||||
0.4)))})
|
||||
|
||||
(defn toggle
|
||||
[checked? disabled? blurred-background?]
|
||||
{:height 20
|
||||
:width 30
|
||||
:border-radius 20
|
||||
:background-color (get-color checked?
|
||||
disabled?
|
||||
blurred-background?)})
|
||||
|
||||
(defn toggle-inner
|
||||
[checked? disabled? blurred-background?]
|
||||
{:margin-left (if checked? 12 2)
|
||||
:height 16
|
||||
:width 16
|
||||
:background-color (if blurred-background?
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/white (if disabled? 0.4 1))
|
||||
(colors/alpha colors/white (if disabled? 0.3 1)))
|
||||
(colors/theme-colors
|
||||
(colors/alpha colors/white 1)
|
||||
(colors/alpha colors/white (if disabled? 0.4 1))))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto})
|
||||
|
||||
(defn radio-inner
|
||||
[checked? disabled? blurred-background?]
|
||||
{:margin-left :auto
|
||||
:height 14
|
||||
:width 14
|
||||
:background-color (when checked? (get-color checked? disabled? blurred-background?))
|
||||
:border-radius 20
|
||||
:margin-right :auto
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto})
|
||||
|
|
|
|||
|
|
@ -8,58 +8,71 @@
|
|||
[utils.re-frame :as rf]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn group-chat-member-toggle
|
||||
[member? selected? public-key]
|
||||
(if-not member?
|
||||
(if selected?
|
||||
(rf/dispatch [:select-participant public-key true])
|
||||
(rf/dispatch [:deselect-participant public-key true]))
|
||||
(if selected?
|
||||
(rf/dispatch [:undo-deselect-member public-key true])
|
||||
(rf/dispatch [:deselect-member public-key true]))))
|
||||
|
||||
(defn open-chat
|
||||
[chat-id]
|
||||
[public-key member? selected?]
|
||||
(let [view-id (rf/sub [:view-id])]
|
||||
(when (= view-id :shell-stack)
|
||||
(rf/dispatch [:dismiss-keyboard])
|
||||
(rf/dispatch [:chat.ui/show-profile chat-id])
|
||||
(rf/dispatch [:search/home-filter-changed nil]))))
|
||||
(case view-id
|
||||
:shell-stack (do (rf/dispatch [:dismiss-keyboard])
|
||||
(rf/dispatch [:chat.ui/show-profile public-key])
|
||||
(rf/dispatch [:search/home-filter-changed nil]))
|
||||
:group-chat-profile (group-chat-member-toggle member? selected? public-key))))
|
||||
|
||||
(defn action-icon
|
||||
[{:keys [public-key] :as item} {:keys [icon start-a-new-chat? group] :as extra-data}
|
||||
user-selected? on-toggle]
|
||||
(let [{:keys [contacts admins]} group
|
||||
member? (contains? contacts public-key)
|
||||
current-pk (rf/sub [:multiaccount/public-key])
|
||||
admin? (get admins current-pk)
|
||||
checked? (reagent/atom (if start-a-new-chat?
|
||||
user-selected?
|
||||
member?))]
|
||||
[rn/touchable-opacity
|
||||
{:on-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [actions/actions item extra-data])}])
|
||||
:style {:position :absolute
|
||||
:right 20}}
|
||||
(if (= icon :options)
|
||||
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
|
||||
[quo/checkbox
|
||||
{:default-checked? @checked?
|
||||
:accessibility-label :contact-toggle-check
|
||||
:disabled? (and member? (not admin?))
|
||||
:on-change (fn [selected]
|
||||
(if start-a-new-chat?
|
||||
(on-toggle true @checked? public-key)
|
||||
(if-not member?
|
||||
(if selected
|
||||
(rf/dispatch [:select-participant public-key true])
|
||||
(rf/dispatch [:deselect-participant public-key true]))
|
||||
(if selected
|
||||
(rf/dispatch [:undo-deselect-member public-key true])
|
||||
(rf/dispatch [:deselect-member public-key true])))))}])]))
|
||||
[{:keys [public-key]
|
||||
:as item}
|
||||
{:keys [icon start-a-new-chat?]
|
||||
:as extra-data} on-toggle admin? member?
|
||||
checked?]
|
||||
(let [on-check (fn []
|
||||
(if start-a-new-chat?
|
||||
(on-toggle true @checked? public-key)
|
||||
(group-chat-member-toggle member? (swap! checked? not) public-key)))]
|
||||
[:f>
|
||||
(fn []
|
||||
[rn/touchable-opacity
|
||||
{:on-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [actions/actions item extra-data])}])
|
||||
:style {:position :absolute
|
||||
:right 20}}
|
||||
(if (= icon :options)
|
||||
[quo/icon :i/options
|
||||
{:size 20
|
||||
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
|
||||
[quo/checkbox
|
||||
{:checked? @checked?
|
||||
:accessibility-label :contact-toggle-check
|
||||
:disabled? (and member? (not admin?))
|
||||
:on-change on-check}])])]))
|
||||
|
||||
(defn contact-list-item
|
||||
[item _ _ {:keys [start-a-new-chat? on-toggle] :as extra-data}]
|
||||
(let [{:keys [public-key ens-verified added? images]} item
|
||||
display-name (first (rf/sub
|
||||
(let [{:keys [public-key ens-verified added? images group]} item
|
||||
display-name (first
|
||||
(rf/sub
|
||||
[:contacts/contact-two-names-by-identity
|
||||
public-key]))
|
||||
photo-path (when (seq images)
|
||||
(rf/sub [:chats/photo-path public-key]))
|
||||
current-pk (rf/sub [:multiaccount/public-key])
|
||||
online? (rf/sub [:visibility-status-updates/online?
|
||||
public-key])
|
||||
user-selected? (rf/sub [:is-contact-selected? public-key])]
|
||||
photo-path (when (seq images)
|
||||
(rf/sub [:chats/photo-path public-key]))
|
||||
online? (rf/sub [:visibility-status-updates/online?
|
||||
public-key])
|
||||
user-selected? (rf/sub [:is-contact-selected? public-key])
|
||||
{:keys [contacts admins]} group
|
||||
member? (contains? contacts public-key)
|
||||
current-pk (rf/sub [:multiaccount/public-key])
|
||||
admin? (get admins current-pk)
|
||||
checked? (reagent/atom (if start-a-new-chat?
|
||||
user-selected?
|
||||
member?))]
|
||||
[rn/touchable-opacity
|
||||
(merge
|
||||
{:style (style/container)
|
||||
|
|
@ -67,7 +80,7 @@
|
|||
:active-opacity 1
|
||||
:on-press #(if start-a-new-chat?
|
||||
(on-toggle true user-selected? public-key)
|
||||
(open-chat public-key))
|
||||
(open-chat public-key member? (swap! checked? not)))
|
||||
:on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [actions/actions item extra-data])}])})
|
||||
[quo/user-avatar
|
||||
|
|
@ -95,4 +108,4 @@
|
|||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||
(utils.address/get-shortened-address public-key)]]
|
||||
(when-not (= current-pk public-key)
|
||||
[action-icon item extra-data user-selected? on-toggle])]))
|
||||
[action-icon item extra-data on-toggle admin? member? checked?])]))
|
||||
|
|
|
|||
Loading…
Reference in New Issue