feat: quo2 reorder category

ios/Podfile.lock

@@ -772,7 +772,7 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
+  RNReanimated: 06a228c5a245ef7b5b03f0efc29d76ce4db9031c
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
@@ -785,6 +785,6 @@ SPEC CHECKSUMS:
   TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
   Yoga: d24d6184b6b85f742536bd93bd07d69d7b9bb4c1
 
-PODFILE CHECKSUM: a7c3cb360cf217ab90667d67deeab588677d540a
+PODFILE CHECKSUM: 1b60eee24bff3a6287f8b33e57657289b2966342
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.12.0

src/quo2/components/settings/category/component_spec.cljs

@@ -1,20 +1,53 @@
 (ns quo2.components.settings.category.component-spec
-  (:require [test-helpers.component :as h]
-            [quo2.components.settings.category.view :as category]))
+  (:require
+    [quo2.components.settings.category.view :as category]
+    [test-helpers.component :as h]))
 
-(h/describe "category tests"
+(h/describe "Settings Category tests"
   (h/test "category label renders"
     (h/render [category/category
-               {:label "label"
-                :data  [{:title     "Item 1"
-                         :left-icon :i/browser
-                         :chevron?  true}]}])
+               {:list-type :settings
+                :label     "Label"
+                :data      [{:title     "Item 1"
+                             :left-icon :i/browser
+                             :chevron?  true}]}])
     (h/is-truthy (h/get-by-text "label")))
 
   (h/test "category item renders"
     (h/render [category/category
-               {:label "label"
-                :data  [{:title     "Item 1"
-                         :left-icon :i/browser
-                         :chevron?  true}]}])
+               {:list-type :settings
+                :label     "Label"
+                :data      [{:title     "Item 1"
+                             :left-icon :i/browser
+                             :chevron?  true}]}])
     (h/is-truthy (h/get-by-text "Item 1"))))
+
+
+(h/describe "Reorder Category tests"
+  (h/test "category label renders"
+    (h/render [category/category
+               {:list-type :reorder
+                :label     "Label"
+                :data      [{:title     "Item 1"
+                             :left-icon :i/browser
+                             :chevron?  true}]}])
+    (h/is-truthy (h/get-by-text "label")))
+
+  (h/test "category item renders"
+    (h/render [category/category
+               {:list-type :reorder
+                :label     "Label"
+                :data      [{:title     "Item 1"
+                             :left-icon :i/browser
+                             :chevron?  true}]}])
+    (h/is-truthy (h/get-by-text "Item 1")))
+
+  (h/test "category item subtitle renders"
+    (h/render [category/category
+               {:list-type :reorder
+                :label     "Label"
+                :data      [{:title     "Item 1"
+                             :subtitle  "subtitle"
+                             :left-icon :i/browser
+                             :chevron?  true}]}])
+    (h/is-truthy (h/get-by-text "subtitle"))))

src/quo2/components/settings/category/reorder/view.cljs

@@ -0,0 +1,40 @@
+(ns quo2.components.settings.category.reorder.view
+  (:require
+    [quo2.components.markdown.text :as text]
+    [quo2.components.settings.reorder-item.types :as types]
+    [quo2.components.settings.reorder-item.view :as reorder-item]
+    [quo2.foundations.colors :as colors]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]
+    [quo2.components.settings.category.style :as style]
+    [quo2.theme :as quo.theme]
+    [react-native.draggable-flatlist :as draggable-flatlist]
+    [reagent.core :as reagent]))
+
+(defn on-drag-end-fn
+  [data atom-data]
+  (reset! atom-data data)
+  (reagent/flush))
+
+(defn- reorder-category-internal
+  [{:keys [label data blur? theme]}]
+  (reagent/with-let [atom-data (reagent/atom data)]
+    [rn/view {:style style/container}
+     (when blur?
+       [rn/view (style/blur-container) [blur/view (style/blur-view)]])
+     [text/text
+      {:weight :medium
+       :size   :paragraph-2
+       :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+      label]
+     [draggable-flatlist/draggable-flatlist
+      {:data           @atom-data
+       :key-fn         (fn [item index] (str (:title item) index))
+       :style          (style/reorder-items theme blur?)
+       :render-fn      (fn [item _ _ _ _ drag] [reorder-item/reorder-item item types/item blur? drag])
+       :on-drag-end-fn (fn [_ _ data]
+                         (on-drag-end-fn data atom-data))
+       :separator      [rn/view
+                        {:style (style/reorder-separator blur?)}]}]]))
+
+(def reorder-category (quo.theme/with-theme reorder-category-internal))

src/quo2/components/settings/category/settings/view.cljs

@@ -0,0 +1,27 @@
+(ns quo2.components.settings.category.settings.view
+  (:require
+    [quo2.components.markdown.text :as text]
+    [quo2.components.settings.settings-list.view :as settings-list]
+    [quo2.foundations.colors :as colors]
+    [react-native.blur :as blur]
+    [react-native.core :as rn]
+    [quo2.components.settings.category.style :as style]
+    [quo2.theme :as quo.theme]))
+
+(defn- category-internal
+  [{:keys [label data blur? theme]}]
+  [rn/view {:style style/container}
+   (when blur?
+     [rn/view (style/blur-container) [blur/view (style/blur-view)]])
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+    label]
+   [rn/flat-list
+    {:data      data
+     :style     (style/settings-items theme blur?)
+     :render-fn (fn [item] [settings-list/settings-list item])
+     :separator [rn/view {:style (style/settings-separator theme blur?)}]}]])
+
+(def settings-category (quo.theme/with-theme category-internal))

src/quo2/components/settings/category/style.cljs

@@ -8,7 +8,7 @@
    :padding-top        12
    :padding-bottom     8})
 
-(defn items
+(defn settings-items
   [theme blur?]
   {:margin-top       12
    :border-radius    16
@@ -20,13 +20,24 @@
                        colors/white-opa-5
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
-(defn separator
+(def reorder-items
+  {:margin-top 12})
+
+(defn settings-separator
   [theme blur?]
   {:height           1
    :background-color (if blur?
                        colors/white-opa-5
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
+(defn reorder-separator
+  [blur?]
+  {:height           4
+   :background-color (if blur?
+                       :transparent
+                       (colors/theme-colors colors/neutral-5
+                                            colors/neutral-95))})
+
 (defn blur-container
   []
   {:position :absolute

src/quo2/components/settings/category/view.cljs

@@ -1,27 +1,9 @@
 (ns quo2.components.settings.category.view
-  (:require
-    [quo2.components.markdown.text :as text]
-    [quo2.components.settings.settings-list.view :as settings-list]
-    [quo2.foundations.colors :as colors]
-    [react-native.blur :as blur]
-    [react-native.core :as rn]
-    [quo2.components.settings.category.style :as style]
-    [quo2.theme :as quo.theme]))
+  (:require [quo2.components.settings.category.settings.view :as settings]
+            [quo2.components.settings.category.reorder.view :as reorder]))
 
-(defn- category-internal
-  [{:keys [label data blur? theme]}]
-  [rn/view {:style style/container}
-   (when blur?
-     [rn/view (style/blur-container) [blur/view (style/blur-view)]])
-   [text/text
-    {:weight :medium
-     :size   :paragraph-2
-     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-    label]
-   [rn/flat-list
-    {:data      data
-     :style     (style/items theme blur?)
-     :render-fn (fn [item] [settings-list/settings-list item])
-     :separator [rn/view {:style (style/separator theme blur?)}]}]])
-
-(def category (quo.theme/with-theme category-internal))
+(defn category
+  [{:keys [list-type] :as props}]
+  (if (= list-type :settings)
+    [settings/settings-category props]
+    [reorder/reorder-category props]))

src/quo2/components/settings/reorder_item/items/item.cljs

@@ -18,9 +18,9 @@
    blur?
    drag]
   [rn/touchable-opacity
-   {:on-press on-press
+   {:on-press      on-press
     :on-long-press drag
-    :style    (merge (style/item-container blur?) (when subtitle style/item-container-extended))}
+    :style         (merge (style/item-container blur?) (when subtitle style/item-container-extended))}
    [icon/icon :main-icons/drag
     {:color (colors/theme-colors
              colors/neutral-50
@@ -40,8 +40,8 @@
        title]
       (when subtitle
         [text/text
-         {:style  style/item-subtitle
-          :size :paragraph-2}
+         {:style style/item-subtitle
+          :size  :paragraph-2}
          subtitle])]
      (when right-text
        [text/text {:style style/right-text} right-text])

src/quo2/components/settings/reorder_item/style.cljs

@@ -41,7 +41,7 @@
    :width  14})
 
 (def item-subtitle
-  {:color     colors/neutral-50})
+  {:color colors/neutral-50})
 
 (def right-text
   {:font-size 15

src/quo2/core.cljs

@@ -82,11 +82,7 @@
     quo2.components.settings.privacy-option
     quo2.components.settings.reorder-item.view
     quo2.components.settings.settings-list.view
-<<<<<<< HEAD
     quo2.components.settings.category.view
-=======
-    quo2.components.settings.reorder-category.view
->>>>>>> e6784db03 (feat: reorder comp)
     quo2.components.share.qr-code.view
     quo2.components.share.share-qr-code.view
     quo2.components.tabs.account-selector
@@ -235,7 +231,6 @@
 (def privacy-option quo2.components.settings.privacy-option/card)
 (def account quo2.components.settings.accounts.view/account)
 (def settings-list quo2.components.settings.settings-list.view/settings-list)
-(def reorder-category quo2.components.settings.reorder-category.view/reorder-category)
 (def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
 (def category quo2.components.settings.category.view/category)
 

src/status_im2/common/resources.cljs

@@ -57,6 +57,7 @@
    :community-banner     (js/require "../resources/images/mock2/community-banner.png")
    :community-logo       (js/require "../resources/images/mock2/community-logo.png")
    :community-cover      (js/require "../resources/images/mock2/community-cover.png")
+   :dark-blur-bg         (js/require "../resources/images/mock2/dark_blur_bg.png")
    :decentraland         (js/require "../resources/images/mock2/decentraland.png")
    :gif                  (js/require "../resources/images/mock2/gif.png")
    :monkey               (js/require "../resources/images/mock2/monkey.png")