Add reorder-item component (#16225)

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

@@ -0,0 +1,29 @@
+(ns quo2.components.settings.reorder-item.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.core :as quo]
+            [quo2.components.settings.reorder-item.types :as types]))
+
+(h/describe
+  "sortable list items tests"
+  (h/test "renders item"
+    (h/render [quo/reorder-item
+               {:id         1
+                :type       "item"
+                :image-size 24
+                :title      "Item 1"} types/item])
+    (h/is-truthy (h/get-by-text "Item 1")))
+
+  (h/test "renders item placeholder"
+    (h/render [quo/reorder-item {:label "Item 1"} types/placeholder])
+    (h/is-truthy (h/get-by-text "Item 1")))
+
+  (h/test "renders item skeleton"
+    (let [component (h/render [quo/reorder-item nil types/skeleton])]
+      (h/is-truthy component)))
+
+  (h/test "renders item tab"
+    (h/render [quo/reorder-item
+               {:data [{:id    1
+                        :label "Item 1"}
+                      ]} types/tab])
+    (h/is-truthy (h/get-by-text "Item 1"))))

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

@@ -0,0 +1,47 @@
+(ns quo2.components.settings.reorder-item.items.item
+  (:require [react-native.core :as rn]
+            [quo2.components.settings.reorder-item.style :as style]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.icon :as icon]
+            [quo2.foundations.colors :as colors]))
+
+(defn view
+  [{:keys
+    [title
+     subtitle
+     image
+     image-size
+     right-text
+     right-icon
+     on-press]}]
+  [rn/touchable-opacity
+   {:on-press on-press
+    :style    (merge (style/item-container) (when subtitle style/item-container-extended))}
+   [icon/icon :main-icons/drag
+    {:color (colors/theme-colors
+             colors/neutral-50
+             colors/neutral-40)}]
+   [rn/view
+    {:style style/body-container}
+    [rn/view
+     {:style style/image-container}
+     [rn/image
+      {:source image
+       :style  (style/image image-size)}]]
+    [rn/view
+     {:style style/text-container}
+     [rn/view
+      [text/text
+       {:style  style/item-text
+        :weight :medium}
+       title]
+      (when subtitle
+        [text/text
+         {:style  style/item-subtitle
+          :weight :regular}
+         subtitle])]
+     (when right-text
+       [text/text {:style style/right-text} right-text])
+     (when right-icon
+       [rn/view {:style style/right-icon-container} [icon/icon right-icon (style/right-icon)]])]]
+   [icon/icon :tiny-icons/chevron-right (style/chevron)]])

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

@@ -0,0 +1,15 @@
+(ns quo2.components.settings.reorder-item.items.item-placeholder
+  (:require [react-native.core :as rn]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.settings.reorder-item.style :as style]))
+
+(defn view
+  [item]
+  (let [label (:label item)]
+    [rn/view
+     {:accessibility-label :reorder-placerholder-drag-handle
+      :style               (style/placeholder-container)}
+     [text/text
+      {:style  (style/placeholder-text)
+       :weight :regular}
+      label]]))

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

@@ -0,0 +1,8 @@
+(ns quo2.components.settings.reorder-item.items.item-skeleton
+  (:require [quo.react-native :as rn]
+            [quo2.components.settings.reorder-item.style :as style]))
+
+(defn view
+  []
+  [rn/view
+   {:style (style/skeleton-container)}])

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

@@ -0,0 +1,40 @@
+(ns quo2.components.settings.reorder-item.items.item-tabs
+  (:require [quo2.components.tabs.segmented-tab :as quo2]
+            [quo.react-native :as rn]
+            [quo.components.text :as text]
+            [quo2.components.settings.reorder-item.style :as style]
+            [quo2.components.icon :as quo2-icons]))
+
+(defn render-tab-item
+  [item]
+  (let [tab-image (cond
+                    (item :image) [rn/image
+                                   {:source (:image item)
+                                    :style  style/tab-item-image}]
+                    (item :icon)  [rn/view {:style style/tab-item-image}
+                                   (quo2-icons/icon (:icon item) (style/tab-icon))])]
+    [rn/view
+     {:style style/tab-item-container}
+     tab-image
+     [text/text
+      {:style style/tab-item-label
+       :width :medium}
+      (:label item)]]))
+
+(defn transform-data
+  [data]
+  (map #(hash-map :id (:id %) :label (render-tab-item %)) data))
+
+(defn view
+  [{:keys [data default-active on-change]
+    :or   {default-active 1
+           on-change      (constantly nil)}}]
+  [quo2/segmented-control
+   {:default-active              default-active
+    :size                        32
+    :blur?                       false
+    :container-style             (style/tab-container)
+    :item-container-style        (style/segmented-tab-item-container)
+    :active-item-container-style (style/active-segmented-tab-item-container)
+    :data                        (transform-data data)
+    :on-change                   on-change}])

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

@@ -0,0 +1,145 @@
+(ns quo2.components.settings.reorder-item.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn item-container
+  []
+  {:flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 10
+   :border-radius      14
+   :margin-bottom      23
+   :height             45
+   :background-color   (colors/theme-colors
+                        colors/white
+                        colors/neutral-90)})
+
+(def item-container-extended
+  {:height 52})
+
+(def body-container
+  {:flex           1
+   :margin-left    12
+   :flex-direction :row
+   :align-items    :center
+   :margin-right   -6})
+
+(def image-container
+  {:margin-right 8})
+
+(defn image
+  [size]
+  {:width  size
+   :height size})
+
+(def item-text
+  {:font-size 14})
+
+(defn chevron
+  []
+  {:color  (colors/theme-colors
+            colors/neutral-50
+            colors/neutral-40)
+   :height 14
+   :width  14})
+
+(def item-subtitle
+  {:color     colors/neutral-50
+   :font-size 13})
+
+(def right-text
+  {:font-size 15
+   :color     colors/neutral-40})
+
+(def text-container
+  {:flex            1
+   :flex-direction  :row
+   :justify-content :space-between
+   :margin-right    8})
+
+(defn right-icon
+  []
+  {:height 20
+   :width  20
+   :color  (colors/theme-colors
+            colors/neutral-40
+            colors/neutral-40)})
+
+(def right-icon-container
+  {:justify-content :center})
+
+(defn placeholder-container
+  []
+  {:background-color :transparent
+   :border-width     1
+   :border-color     (colors/theme-colors
+                      colors/neutral-30
+                      colors/neutral-80)
+   :padding          12
+   :justify-content  :center
+   :align-items      :center
+   :border-radius    16
+   :margin-bottom    24
+   :border-style     :dashed})
+
+(defn placeholder-text
+  []
+  {:color     (colors/theme-colors
+               colors/neutral-40
+               colors/neutral-50)
+   :font-size 13})
+
+(defn skeleton-container
+  []
+  {:background-color (colors/theme-colors
+                      colors/neutral-5
+                      colors/neutral-95)
+   :border-radius    16
+   :margin-bottom    24
+   :height           48})
+
+(defn tab-container
+  []
+  {:background-color   (colors/theme-colors
+                        colors/neutral-5
+                        colors/neutral-95)
+   :padding-horizontal 4
+   :padding-vertical   6
+   :margin-bottom      24})
+
+(defn segmented-tab-item-container
+  []
+  {:height            40
+   :border-width      1
+   :border-style      :dashed
+   :margin-horizontal 2
+   :border-color      (colors/theme-colors
+                       colors/neutral-30
+                       colors/neutral-60)})
+
+(defn active-segmented-tab-item-container
+  []
+  {:height           40
+   :background-color (colors/theme-colors
+                      colors/neutral-30
+                      colors/neutral-90)})
+
+(def tab-item-container
+  {:flex-direction  :row
+   :justify-content :center
+   :align-items     :center})
+
+(def tab-item-image
+  {:height       19
+   :width        19
+   :margin-right 3})
+
+(def tab-item-label
+  {:font-size 14})
+
+(defn tab-icon
+  []
+  {:height 16
+   :width  16
+   :color  (colors/theme-colors
+            colors/neutral-40
+            colors/neutral-40)})

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

@@ -0,0 +1,6 @@
+(ns quo2.components.settings.reorder-item.types)
+
+(def ^:const item 0)
+(def ^:const placeholder 1)
+(def ^:const skeleton 2)
+(def ^:const tab 3)

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

@@ -0,0 +1,16 @@
+(ns quo2.components.settings.reorder-item.view
+  (:require
+    [quo2.components.settings.reorder-item.items.item :as item]
+    [quo2.components.settings.reorder-item.items.item-placeholder :as placeholder]
+    [quo2.components.settings.reorder-item.items.item-skeleton :as skeleton]
+    [quo2.components.settings.reorder-item.items.item-tabs :as tab]
+    [quo2.components.settings.reorder-item.types :as types]))
+
+(defn reorder-item
+  [item type]
+  (case type
+    types/item        [item/view item]
+    types/placeholder [placeholder/view item]
+    types/skeleton    [skeleton/view]
+    types/tab         [tab/view item]
+    nil))

src/quo2/components/tabs/segmented_tab.cljs

@@ -16,32 +16,37 @@
 (defn segmented-control
   [{:keys [default-active on-change]}]
   (let [active-tab-id (reagent/atom default-active)]
-    (fn [{:keys [data size override-theme blur?]}]
+    (fn [{:keys [data size override-theme blur? container-style item-container-style
+                 active-item-container-style]}]
       (let [active-id @active-tab-id]
         [rn/view
-         {:flex-direction   :row
-          :background-color (get-in (if blur? themes-for-blur themes)
-                                    [(or override-theme (theme/get-theme)) :background-color])
-          :border-radius    (case size
-                              32 10
-                              28 8
-                              24 8
-                              20 6)
-          :padding          2}
+         (merge
+          {:flex-direction   :row
+           :background-color (get-in (if blur? themes-for-blur themes)
+                                     [(or override-theme (theme/get-theme)) :background-color])
+           :border-radius    (case size
+                               32 10
+                               28 8
+                               24 8
+                               20 6)
+           :padding          2}
+          container-style)
          (for [[indx {:keys [label id]}] (map-indexed vector data)]
            ^{:key id}
            [rn/view
             {:margin-left (if (= 0 indx) 0 2)
              :flex        1}
             [tab/view
-             {:id             id
-              :segmented?     true
-              :size           size
-              :override-theme override-theme
-              :blur?          blur?
-              :active         (= id active-id)
-              :on-press       (fn [tab-id]
-                                (reset! active-tab-id tab-id)
-                                (when on-change
-                                  (on-change tab-id)))}
+             {:id                          id
+              :active-item-container-style active-item-container-style
+              :item-container-style        item-container-style
+              :segmented?                  true
+              :size                        size
+              :override-theme              override-theme
+              :blur?                       blur?
+              :active                      (= id active-id)
+              :on-press                    (fn [tab-id]
+                                             (reset! active-tab-id tab-id)
+                                             (when on-change
+                                               (on-change tab-id)))}
              label]])]))))