wip #8071

components/src/status_im/ui/components/react.cljs

@@ -98,6 +98,9 @@
 (defn animated-view-class []
   (reagent/adapt-react-class (.-View (animated))))
 
+(defn animated-flat-list-class []
+  (reagent/adapt-react-class (.-FlatList (animated))))
+
 (defn animated-view [props & content]
   (vec (conj content props (animated-view-class))))
 

src/status_im/contact/block.cljs

@@ -84,12 +84,4 @@
               {:db (-> db
                        (update :contacts/blocked disj public-key)
                        (assoc-in [:contacts/contacts public-key] contact))}
-              (contacts-store/save-contact contact))))
-
-(fx/defn block-contact-confirmation
-  [cofx public-key]
-  {:utils/show-confirmation
-   {:title (i18n/label :t/block-contact)
-    :content (i18n/label :t/block-contact-details)
-    :confirm-button-text (i18n/label :t/to-block)
-    :on-accept #(re-frame/dispatch [:contact.ui/block-contact-confirmed public-key])}})
+              (contacts-store/save-contact contact))))

src/status_im/contact/core.cljs

@@ -81,6 +81,14 @@
                 (send-contact-request contact)
                 (mailserver/process-next-messages-request)))))
 
+(fx/defn remove-contact
+  "Remove a contact from current account's contact list"
+  {:events [:contact.ui/remove-contact-pressed]}
+  [{:keys [db] :as cofx} public-key]
+  (fx/merge cofx
+            {:db            (update db :contacts/contacts dissoc public-key)
+             :data-store/tx [(contacts-store/delete-contact-tx public-key)]}))
+
 (fx/defn create-contact
   "Create entry in contacts"
   [{:keys [db] :as cofx} public-key]

src/status_im/events.cljs

@@ -1397,11 +1397,6 @@
  (fn [cofx [_ public-key]]
    (contact/add-contact cofx public-key)))
 
-(handlers/register-handler-fx
- :contact.ui/block-contact-pressed
- (fn [cofx [_ public-key]]
-   (contact.block/block-contact-confirmation cofx public-key)))
-
 (handlers/register-handler-fx
  :contact.ui/block-contact-confirmed
  (fn [cofx [_ public-key]]

src/status_im/ui/components/action_button/action_button.cljs

@@ -13,10 +13,11 @@
                                  (when accessibility-label
                                    {:accessibility-label accessibility-label}))
    [rn/view {:style st/action-button}
-    [rn/view {:style (st/action-button-icon-container cyrcle-color)}
-     (if image
-       [react/image (assoc image-opts :source (resources/get-image image))]
-       [vi/icon icon icon-opts])]
+    (if (or image icon)
+      [rn/view {:style (st/action-button-icon-container cyrcle-color)}
+       (if image
+         [react/image (assoc image-opts :source (resources/get-image image))]
+         [vi/icon icon icon-opts])])
     [rn/view st/action-button-label-container
      [rn/text {:style (merge st/action-button-label label-style)}
       label]]]])

src/status_im/ui/components/animation.cljs

@@ -42,8 +42,8 @@
 (defn anim-delay [duration]
   (.delay (react/animated) duration))
 
-(defn event [config]
-  (.event (react/animated) (clj->js [nil, config])))
+(defn event [mapping config]
+  (.event (react/animated) (clj->js mapping) (clj->js config)))
 
 (defn add-listener [anim-value listener]
   (.addListener anim-value listener))
@@ -60,6 +60,12 @@
 (defn create-value [value]
   (js/ReactNative.Animated.Value. value))
 
+(defn add [anim-x anim-y]
+  (js/ReactNative.Animated.add. anim-x anim-y))
+
+(defn subtract [anim-x anim-y]
+  (js/ReactNative.Animated.subtract. anim-x anim-y))
+
 (defn x [value-xy]
   (.-x value-xy))
 

src/status_im/ui/components/large_toolbar/styles.cljs

@@ -0,0 +1,85 @@
+(ns status-im.ui.components.toolbar-big.styles
+  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.animation :as animation]
+            [status-im.ui.components.toolbar.styles :as toolbar.styles]
+            [status-im.utils.platform :as platform]))
+
+(defonce toolbar-shadow-component-height
+  (let [status-bar-height  (get platform/platform-specific :status-bar-default-height)]
+    (+ 50 toolbar.styles/toolbar-height (if (zero? status-bar-height) 50 status-bar-height))))
+
+(defonce toolbar-statusbar-height
+  (+ (get platform/platform-specific :status-bar-default-height) toolbar.styles/toolbar-height))
+
+(defn minimized-toolbar-fade-in [anim-opacity]
+  (animation/timing
+   anim-opacity
+   {:toValue 1
+    :duration 200
+    :easing (.-ease (animation/easing))
+    :useNativeDriver true}))
+
+(defn minimized-toolbar-fade-out [anim-opacity]
+  (animation/timing
+   anim-opacity
+   {:toValue 0
+    :duration 200
+    :easing (.-ease (animation/easing))
+    :useNativeDriver true}))
+
+(defn- ios-shadow-opacity-anim [scroll-y]
+  (if platform/ios?
+    (animation/interpolate scroll-y
+                           {:inputRange  [0 toolbar-statusbar-height]
+                            :outputRange [0 1]
+                            :extrapolate "clamp"})
+    0))
+
+(defn- android-shadow-elevation-anim [scroll-y]
+  (if platform/android?
+    (animation/interpolate scroll-y
+                           {:inputRange  [0 toolbar-statusbar-height]
+                            :outputRange [0 9]
+                            :extrapolate "clamp"})
+    0))
+
+(defn bottom-border-opacity-anim [scroll-y]
+  (animation/interpolate scroll-y
+                         {:inputRange  [0 toolbar-statusbar-height]
+                          :outputRange [1 0]
+                          :extrapolate "clamp"}))
+
+(defn animated-content-wrapper [anim-opacity]
+  {:flex           1
+   :align-self     :stretch
+   :opacity        anim-opacity})
+
+(def minimized-toolbar
+  {:z-index   100
+   :elevation 9})
+
+(defn flat-list-with-large-header-bottom [scroll-y]
+  {:height              16
+   :opacity             (bottom-border-opacity-anim scroll-y)
+   :border-bottom-width 1
+   :border-bottom-color colors/gray-lighter})
+
+(defn flat-list-with-large-header-shadow [window-width scroll-y]
+  (cond-> {:flex             1
+           :align-self       :stretch
+           :position         :absolute
+           :height           toolbar-shadow-component-height
+           :width            window-width
+           :top              (- toolbar-shadow-component-height)
+           :shadow-radius    8
+           :shadow-offset    {:width 0 :height 2}
+           :shadow-opacity   1
+           :shadow-color     "rgba(0, 9, 26, 0.12)"
+           :elevation        (android-shadow-elevation-anim scroll-y)
+           :background-color colors/white}
+    platform/ios?
+    (assoc :opacity (ios-shadow-opacity-anim scroll-y))))
+
+(def flat-list
+  {:z-index -1})