fixes #8071

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

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

externs.js

@@ -517,6 +517,7 @@ var TopLevel = {
     "version" : function () {},
     "vibrate" : function () {},
     "View" : function () {},
+    "FlatList" : function () {},
     "warn" : function () {},
     "WebView" : function () {},
     "WebViewBridgeModule" : function () {},

fiddle/src/status_im/react_native/js_dependencies.cljs

@@ -14,8 +14,9 @@
 (def qr-code                (fn [] #js {}))
 (def react-native
   #js {:NativeModules      #js {}
-       :Animated           #js {:View #js {}
-                                :Text #js {}}
+       :Animated           #js {:View     #js {}
+                                :FlatList #js {}
+                                :Text     #js {}}
        :DeviceEventEmitter #js {:addListener (fn [])}
        :Dimensions         #js {:get  (fn [])}})
 (def vector-icons           (fn [] #js {:default #js {}}))

src/status_im/contact/block.cljs

@@ -86,12 +86,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,17 @@
                 (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} {:keys [public-key] :as contact}]
+  (let [new-contact (update contact
+                            :system-tags
+                            (fnil #(disj % :contact/added) #{}))]
+    (fx/merge cofx
+              {:db (assoc-in db [:contacts/contacts public-key] new-contact)}
+              (contacts-store/save-contact new-contact))))
+
 (fx/defn create-contact
   "Create entry in contacts"
   [{:keys [db] :as cofx} public-key]

src/status_im/events.cljs

@@ -1337,11 +1337,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/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,84 @@
+(ns status-im.ui.components.large-toolbar.styles
+  (: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})