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.cljs

@@ -10,81 +10,71 @@
             [status-im.utils.platform :as platform]
             [status-im.ui.components.animation :as animation]))
 
-(def hidden (reagent/atom 0))
-(def shown (reagent/atom 100))
-(def minimized-header-visible? (reagent/atom false))
-(def initial-on-show-done? (volatile! false))
+(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))))
 
-(defview animated-content-wrapper [header-in-toolbar has-nav? show?]
-  (letsubs [anim-opacity (animation/create-value 0)
-            to-hide      (reagent/atom false)]
-    {:component-will-update
-     (fn [_ [_ _ _ show?]]
-       (cond
-         (and (not @to-hide) show?)
-         (animation/start
-          (animation/timing
-           anim-opacity
-           {:toValue 1
-            :duration 200
-            :easing (.-ease (animation/easing))
-            :useNativeDriver true})
-          #(reset! to-hide true))
+(defonce toolbar-statusbar-height
+  (+ (get platform/platform-specific :status-bar-default-height) toolbar.styles/toolbar-height))
 
-         (and @to-hide (not show?))
-         (animation/start
-          (animation/timing
-           anim-opacity
-           {:toValue 0
-            :duration 200
-            :easing (.-ease (animation/easing))
-            :useNativeDriver true})
-          #(reset! to-hide false))))}
-    [react/animated-view
-     {:style (cond-> {:flex           1
-                      :align-self     :stretch
-                      :opacity        anim-opacity}
-               (false? has-nav?)
-               (assoc :margin-left -40 :margin-right 40))}
-     header-in-toolbar]))
+(defn fade-in [anim-opacity]
+  (animation/timing
+   anim-opacity
+   {:toValue 1
+    :duration 200
+    :easing (.-ease (animation/easing))
+    :useNativeDriver true}))
 
-(defn on-viewable-items-changed [threshold interporlation-step]
-  (fn [info]
-    (let [changed   (->> (->clj info)
-                         :changed
-                         (filter #(= 1 (:index %))))
-          viewable? (when (seq changed)
-                      (->> changed
-                           first
-                           :isViewable))]
-      (when (and @initial-on-show-done? (not (nil? viewable?)))
-        (if (= threshold 0)
-          (if viewable?
-            (reset! minimized-header-visible? false)
-            (reset! minimized-header-visible? true))
-          (if viewable?
-            (do (swap! hidden - interporlation-step) (swap! shown + interporlation-step))
-            (do (swap! hidden + interporlation-step) (swap! shown - interporlation-step))))))))
+(defn fade-out [anim-opacity]
+  (animation/timing
+   anim-opacity
+   {:toValue 0
+    :duration 200
+    :easing (.-ease (animation/easing))
+    :useNativeDriver true}))
 
-(defonce viewability-config-callback-pairs
-  (let [interporlation-step 20]
-    (->js
-     (vec
-      (for [threshold (range 0 (+ 100 interporlation-step) interporlation-step)]
-        {:viewabilityConfig      {:itemVisiblePercentThreshold threshold}
-         :onViewableItemsChanged (on-viewable-items-changed threshold interporlation-step)})))))
+(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"}))
+
+(defview animated-content-wrapper [header-in-toolbar has-nav? anim-opacity]
+  [react/animated-view
+   {:style (cond-> {:flex           1
+                    :align-self     :stretch
+                    :opacity        anim-opacity}
+             (false? has-nav?)
+             (assoc :margin-left -40 :margin-right 40))}
+   header-in-toolbar])
 
 ;; 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]
+(defn minimized-toolbar [header-in-toolbar nav-item action-items anim-opacity]
   (let [has-nav? (boolean nav-item)]
     [toolbar/toolbar
      {:transparent? true
       :style        {:z-index   100
                      :elevation 9}}
      nav-item
-     [animated-content-wrapper header-in-toolbar has-nav? @minimized-header-visible?]
+     [animated-content-wrapper header-in-toolbar has-nav? anim-opacity]
      action-items]))
 
 ;; header   - component that serves as large header without any top/bottom padding
@@ -95,23 +85,17 @@
 ;;            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
-(defview flat-list-with-large-header [header content list-ref]
+(defview flat-list-with-large-header [header content list-ref scroll-y]
   (letsubs [window-width [:dimensions/window-width]]
-    {:component-did-mount #(do (reset! hidden 0) (reset! shown 100)
-                               (reset! minimized-header-visible? false)
-                               (vreset! initial-on-show-done? false))}
     (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 {:height              16
-                                       :opacity             (/ @shown 100)
+                                       :opacity             (bottom-border-opacity-anim scroll-y)
                                        :border-bottom-width 1
                                        :border-bottom-color colors/gray-lighter}}]
-          wrapped-data       (into [header-top-padding header header-bottom] content)
-          status-bar-height  (get platform/platform-specific :status-bar-default-height)
-          toolbar-shadow-component-height
-          (+ 50 toolbar.styles/toolbar-height (if (zero? status-bar-height) 50 status-bar-height))]
+          wrapped-data       (into [header-top-padding header header-bottom] content)]
       [react/view {:flex 1}
        ;; toolbar shadow
        [react/animated-view
@@ -126,19 +110,34 @@
                   :shadow-offset    {:width 0 :height 2}
                   :shadow-opacity   1
                   :shadow-color     "rgba(0, 9, 26, 0.12)"
-                  :elevation        (if (>= @hidden 40) (- (/ @hidden 10) 2) 0)
+                  :elevation        (android-shadow-elevation-anim scroll-y)
                   :background-color colors/white}
            platform/ios?
-           (assoc :opacity (if (>= @hidden 40) (/ @hidden 100) 0)))}]
+           (assoc :opacity (ios-shadow-opacity-anim scroll-y)))}]
 
        [list.views/flat-list
         {:style                          {:z-index -1}
          :data                           wrapped-data
          :initial-num-to-render          3
-         :ref                            #(reset! list-ref %)
+         :ref                            #(when % (reset! list-ref (.getNode %)))
          :render-fn                      (fn [item idx] item)
          :key-fn                         (fn [item idx] (str idx))
-         :on-scroll-begin-drag           #(when (false? @initial-on-show-done?)
-                                            (vreset! initial-on-show-done? true))
-         :viewabilityConfigCallbackPairs viewability-config-callback-pairs
+         :scrollEventThrottle            16
+         :on-scroll                      (animation/event
+                                          [{:nativeEvent {:contentOffset {:y scroll-y}}}]
+                                          {:useNativeDriver true})
          :keyboard-should-persist-taps   :handled}]])))
+
+(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 (fade-in anim-opacity) #(reset! to-hide true))
+
+                                         (and (< (.-value anim) 40) @to-hide)
+                                         (animation/start (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]}))

src/status_im/ui/components/list/views.cljs

@@ -31,7 +31,6 @@
             [status-im.utils.platform :as platform])
   (:require-macros [status-im.utils.views :as views]))
 
-(def flat-list-class (react/get-class "FlatList"))
 (def section-list-class (react/get-class "SectionList"))
 
 (defn item
@@ -219,7 +218,7 @@
   [{:keys [data] :as props}]
   {:pre [(or (nil? data)
              (sequential? data))]}
-  [(flat-list-class)
+  [(react/animated-flat-list-class)
    (merge (base-list-props props)
           props
           {:data (wrap-data data)})])
@@ -265,13 +264,14 @@
   [react/touchable-highlight {:on-press action}
    [react/view {:accessibility-label accessibility-label}
     [item
-     [item-icon {:icon      icon
-                 :style     (merge styles/action
-                                   action-style
-                                   (when disabled? styles/action-disabled))
-                 :icon-opts (merge {:color :white}
-                                   icon-opts
-                                   (when disabled? {:color colors/gray}))}]
+     (when icon
+       [item-icon {:icon      icon
+                   :style     (merge styles/action
+                                     action-style
+                                     (when disabled? styles/action-disabled))
+                   :icon-opts (merge {:color :white}
+                                     icon-opts
+                                     (when disabled? {:color colors/gray}))}])
      (if-not subtext
        [item-primary-only {:style (merge styles/action-label
                                          (action-label-style false)

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

@@ -14,7 +14,8 @@
   [{:keys [background-color height]
     :or   {height (get platform/platform-specific :status-bar-default-height)}}]
   {:background-color background-color
-   :height           height})
+   :height           height
+   :z-index          100000})
 
 ;; :main
 (defstyle status-bar-main

src/status_im/ui/components/toolbar_big/actions.cljs

@@ -0,0 +1,51 @@
+(ns status-im.ui.components.toolbar-big.actions
+  (:require [re-frame.core :as re-frame]
+            [status-im.ui.components.toolbar-big.styles :as styles]))
+
+(defn add [illuminated? handler]
+  {:icon      :main-icons/add
+   :icon-opts (if illuminated? styles/icon-add-illuminated styles/icon-add)
+   :handler   handler})
+
+(defn opts [options]
+  {:icon    :main-icons/more
+   :options options})
+
+(defn back [handler]
+  {:icon                :main-icons/back
+   :handler             handler
+   :accessibility-label :back-button})
+
+(def default-handler #(re-frame/dispatch [:navigate-back]))
+
+(def home-handler #(re-frame/dispatch [:navigate-to :home]))
+
+(def default-back
+  (back default-handler))
+
+(def home-back
+  (back home-handler))
+
+(defn back-white [handler]
+  {:icon                :main-icons/back
+   :icon-opts           {:color :white}
+   :handler             handler
+   :accessibility-label :back-button})
+
+(defn close [handler]
+  {:icon    :main-icons/close
+   :handler handler
+   :accessibility-label :done-button})
+
+(def default-close
+  (close default-handler))
+
+(defn close-white [handler]
+  {:icon      :main-icons/close
+   :icon-opts {:color :white}
+   :handler   handler})
+
+(defn list-white [handler]
+  {:icon      :main-icons/two-arrows
+   :icon-opts {:color :white}
+   :handler   handler})