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

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

@@ -0,0 +1,84 @@
+(ns status-im.ui.components.large-toolbar.view
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [reagent.core :as reagent]
+            [cljs-bean.core :refer [->clj ->js]]
+            [status-im.ui.components.list.views :as list.views]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.toolbar-big.styles :as styles]
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.animation :as animation]))
+
+;; header-in-toolbar - component - small header in toolbar
+;; nav-item          - component/nil - if nav-item like back button is needed, else nil
+;; action-items      - status-im.ui.components.toolbar.view/actions 
+(defn minimized-toolbar [header-in-toolbar nav-item action-items anim-opacity]
+  (let [has-nav? (boolean nav-item)]
+    [toolbar/toolbar
+     {:transparent? true
+      :style        styles/minimized-toolbar}
+     nav-item
+     [react/animated-view
+      {:style (cond-> (styles/animated-content-wrapper anim-opacity)
+                (false? has-nav?)
+                (assoc :margin-left -40 :margin-right 40))}
+      header-in-toolbar]
+     action-items]))
+
+;; header   - component that serves as large header without any top/bottom padding
+;;            top(4px high) and bottom(16px high and with border) padding
+;;            are assumed to be constant
+;;            this is wrapped with padding components and merged with content
+;; content  - vector - of the rest(from header) of the list components
+;;            wrapped header and content form the data prop of flat-list
+;; list-ref - atom - a reference to flat-list for the purpose of invoking its
+;;            methods
+;; scroll-y - animated value tracking the y scoll of the main content in flat-list-view
+(defview flat-list-with-large-header [header content list-ref scroll-y]
+  (letsubs [window-width [:dimensions/window-width]]
+    (let [header-top-padding [react/view {:height 4}]
+          ;; header bottom padding with border-bottom
+          ;; fades out as it approaches toolbar shadow
+          header-bottom      [react/animated-view
+                              {:style (styles/flat-list-with-large-header-bottom scroll-y)}]
+          wrapped-data       (into [header-top-padding header header-bottom] content)]
+      [react/view {:flex 1}
+       ;; toolbar shadow
+       [react/animated-view
+        {:style (styles/flat-list-with-large-header-shadow window-width scroll-y)}]
+
+       [list.views/flat-list
+        {:style                          styles/flat-list
+         :data                           wrapped-data
+         :initial-num-to-render          3
+         :ref                            #(when % (reset! list-ref (.getNode %)))
+         :render-fn                      (fn [item idx] item)
+         :key-fn                         (fn [item idx] (str idx))
+         :scrollEventThrottle            16
+         :on-scroll                      (animation/event
+                                          [{:nativeEvent {:contentOffset {:y scroll-y}}}]
+                                          {:useNativeDriver true})
+         :keyboard-should-persist-taps   :handled}
+        {:animated? true}]])))
+
+;; main function which generates views.
+;; it will generate and return back:
+;;    - minimized-toolbar
+;;    - flat-list-with-large-header
+(defn generate-view [header-in-toolbar nav-item toolbar-action-items header content list-ref]
+  (let [to-hide  (reagent/atom false)
+        anim-opacity (animation/create-value 0)
+        scroll-y (animation/create-value 0)]
+    (animation/add-listener scroll-y (fn [anim]
+                                       (cond
+                                         (and (>= (.-value anim) 40) (not @to-hide))
+                                         (animation/start
+                                          (styles/minimized-toolbar-fade-in anim-opacity)
+                                          #(reset! to-hide true))
+
+                                         (and (< (.-value anim) 40) @to-hide)
+                                         (animation/start
+                                          (styles/minimized-toolbar-fade-out anim-opacity)
+                                          #(reset! to-hide false)))))
+    {:minimized-toolbar [minimized-toolbar header-in-toolbar nav-item toolbar-action-items anim-opacity]
+     :content-with-header [flat-list-with-large-header header content list-ref scroll-y]}))