From 651445c4d1757b03ccd092b62970e73052b89d94 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Fri, 21 Jul 2023 12:21:16 +0400 Subject: [PATCH] feat: quo2 reorder category --- ios/Podfile.lock | 6 +- .../settings/category/component_spec.cljs | 55 +++++++++++--- .../settings/category/reorder/view.cljs | 40 +++++++++++ .../settings/category/settings/view.cljs | 27 +++++++ .../components/settings/category/style.cljs | 15 +++- .../components/settings/category/view.cljs | 32 ++------- .../reorder_category/component_spec.cljs | 1 - .../settings/reorder_category/style.cljs | 36 ---------- .../settings/reorder_category/view.cljs | 45 ------------ .../settings/reorder_item/items/item.cljs | 8 +-- .../settings/reorder_item/style.cljs | 2 +- src/quo2/core.cljs | 5 -- src/status_im2/common/resources.cljs | 1 + src/status_im2/contexts/quo_preview/main.cljs | 15 ++-- .../settings/category_reorder.cljs | 72 +++++++++++++++++++ .../{category.cljs => category_settings.cljs} | 27 ++++--- .../settings/reorder_category.cljs | 71 ------------------ 17 files changed, 231 insertions(+), 227 deletions(-) create mode 100644 src/quo2/components/settings/category/reorder/view.cljs create mode 100644 src/quo2/components/settings/category/settings/view.cljs delete mode 100644 src/quo2/components/settings/reorder_category/component_spec.cljs delete mode 100644 src/quo2/components/settings/reorder_category/style.cljs delete mode 100644 src/quo2/components/settings/reorder_category/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/settings/category_reorder.cljs rename src/status_im2/contexts/quo_preview/settings/{category.cljs => category_settings.cljs} (75%) delete mode 100644 src/status_im2/contexts/quo_preview/settings/reorder_category.cljs diff --git a/ios/Podfile.lock b/ios/Podfile.lock index ac9c9ed2015e..e6f665b1eb1d 100644 --- a/ios/Podfile.lock +++ b/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 diff --git a/src/quo2/components/settings/category/component_spec.cljs b/src/quo2/components/settings/category/component_spec.cljs index ff5d02684d01..d32d4aab3d0e 100644 --- a/src/quo2/components/settings/category/component_spec.cljs +++ b/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")))) diff --git a/src/quo2/components/settings/category/reorder/view.cljs b/src/quo2/components/settings/category/reorder/view.cljs new file mode 100644 index 000000000000..fc4d33eda4ea --- /dev/null +++ b/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)) diff --git a/src/quo2/components/settings/category/settings/view.cljs b/src/quo2/components/settings/category/settings/view.cljs new file mode 100644 index 000000000000..4f0f46e0b952 --- /dev/null +++ b/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)) diff --git a/src/quo2/components/settings/category/style.cljs b/src/quo2/components/settings/category/style.cljs index 275a9c1eef56..d9be28a2709f 100644 --- a/src/quo2/components/settings/category/style.cljs +++ b/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 diff --git a/src/quo2/components/settings/category/view.cljs b/src/quo2/components/settings/category/view.cljs index 82dcc4b56599..3cf8097a6814 100644 --- a/src/quo2/components/settings/category/view.cljs +++ b/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])) diff --git a/src/quo2/components/settings/reorder_category/component_spec.cljs b/src/quo2/components/settings/reorder_category/component_spec.cljs deleted file mode 100644 index 0e7b1528dba2..000000000000 --- a/src/quo2/components/settings/reorder_category/component_spec.cljs +++ /dev/null @@ -1 +0,0 @@ -(ns quo2.components.settings.reorder-category.component-spec) diff --git a/src/quo2/components/settings/reorder_category/style.cljs b/src/quo2/components/settings/reorder_category/style.cljs deleted file mode 100644 index 778bfea161d0..000000000000 --- a/src/quo2/components/settings/reorder_category/style.cljs +++ /dev/null @@ -1,36 +0,0 @@ -(ns quo2.components.settings.reorder-category.style - (:require [quo2.foundations.colors :as colors])) - -(def container - {:left 0 - :right 0 - :padding-horizontal 20 - :padding-top 12 - :padding-bottom 8}) - -(defn items - [theme blur?] - {:margin-top 12}) - -(defn separator - [theme blur?] - {:height 1 - :background-color (if blur? - colors/white-opa-5 - (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))}) - -(defn blur-container - [] - {:position :absolute - :left 0 - :right 0 - :bottom 0 - :top 0 - :overflow :hidden}) - -(defn blur-view - [] - {:style {:flex 1} - :blur-radius 10 - :blur-type (colors/theme-colors :light :dark) - :blur-amount 20}) diff --git a/src/quo2/components/settings/reorder_category/view.cljs b/src/quo2/components/settings/reorder_category/view.cljs deleted file mode 100644 index b17a901af8cc..000000000000 --- a/src/quo2/components/settings/reorder_category/view.cljs +++ /dev/null @@ -1,45 +0,0 @@ -(ns quo2.components.settings.reorder-category.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.reorder-category.style :as style] - [quo2.theme :as quo.theme] - [react-native.draggable-flatlist :as draggable-flatlist] - [reagent.core :as reagent] - [react-native.platform :as platform])) - -(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/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 {:height 4 - :background-color (if blur? - :transparent - (colors/theme-colors colors/neutral-5 - colors/neutral-95))}}]}]])) - -(def reorder-category (quo.theme/with-theme reorder-category-internal)) diff --git a/src/quo2/components/settings/reorder_item/items/item.cljs b/src/quo2/components/settings/reorder_item/items/item.cljs index 7adc39a4bb88..8b77ca1a7c17 100644 --- a/src/quo2/components/settings/reorder_item/items/item.cljs +++ b/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]) diff --git a/src/quo2/components/settings/reorder_item/style.cljs b/src/quo2/components/settings/reorder_item/style.cljs index 10d5b1fc5eed..4eac752fb8e5 100644 --- a/src/quo2/components/settings/reorder_item/style.cljs +++ b/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 diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 9c1506d51be7..eaad40777af4 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 1ec1939933fa..b54627dc0233 100644 --- a/src/status_im2/common/resources.cljs +++ b/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") diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 4de104bd7c9d..5f3295ff8b84 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -78,7 +78,7 @@ [status-im2.contexts.quo-preview.settings.settings-list :as settings-list] [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option] [status-im2.contexts.quo-preview.settings.reorder-item :as reorder-item] - [status-im2.contexts.quo-preview.settings.reorder-category :as reorder-category] + [status-im2.contexts.quo-preview.settings.category-reorder :as category-reorder] [status-im2.contexts.quo-preview.share.qr-code :as qr-code] [status-im2.contexts.quo-preview.share.share-qr-code :as share-qr-code] [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards] @@ -96,7 +96,7 @@ [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview] - [status-im2.contexts.quo-preview.settings.category :as category] + [status-im2.contexts.quo-preview.settings.category-settings :as category-settings] [status-im2.contexts.quo-preview.keycard.keycard :as keycard] [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton] [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions])) @@ -333,15 +333,12 @@ {:name :reorder-item :options {:topBar {:visible true}} :component reorder-item/preview-reorder-item} -<<<<<<< HEAD - {:name :category + {:name :category-settings :options {:topBar {:visible true}} - :component category/preview}] -======= - {:name :reorder-category + :component category-settings/preview} + {:name :category-reorder :options {:topBar {:visible true}} - :component reorder-category/preview}] ->>>>>>> e6784db03 (feat: reorder comp) + :component category-reorder/preview}] :share [{:name :qr-code :options {:topBar {:visible true}} :component qr-code/preview-qr-code} diff --git a/src/status_im2/contexts/quo_preview/settings/category_reorder.cljs b/src/status_im2/contexts/quo_preview/settings/category_reorder.cljs new file mode 100644 index 000000000000..5c54dbea4311 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/settings/category_reorder.cljs @@ -0,0 +1,72 @@ +(ns status-im2.contexts.quo-preview.settings.category-reorder + (:require + [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [quo2.theme :as theme] + [react-native.core :as rn] + [react-native.fast-image :as fast-image] + [reagent.core :as reagent] + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(defn create-item-array + [n {:keys [right-icon? image?]}] + (vec (for [i (range n)] + {:title (str "Item " i) + :subtitle "subtitle" + :chevron? true + :right-icon (when right-icon? :i/globe) + :image-size (if image? 32 0) + :image (when image? (resources/get-mock-image :diamond))}))) + +(def descriptor + [{:label "Right icon:" + :key :right-icon? + :type :boolean} + {:label "Image:" + :key :image? + :type :boolean} + {:label "Blur:" + :key :blur? + :type :boolean}]) + +(defn preview + [] + (let [state (reagent/atom {:label "Label" + :size "5" + :blur? false + :right-icon? true + :image? true}) + {:keys [width height]} (rn/get-window)] + (fn [] + (let [data (reagent/atom (create-item-array (max (js/parseInt (:size @state)) 1) @state))] + [:f> + (fn [] + (rn/use-effect (fn [] + (if (:blur? @state) + (theme/set-theme :dark) + (theme/set-theme :light)) + (reset! data (create-item-array (max (js/parseInt (:size @state)) 1) + @state))) + [(:blur? @state) (:right-icon? @state) (:image? @state)]) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view + {:style {:flex 1 + :padding-bottom 150 + :margin-bottom 50 + :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}} + [rn/view + {:style {:min-height 180 + :z-index 1}} [preview/customizer state descriptor]] + (when (:blur? @state) + [fast-image/fast-image + {:source (resources/get-mock-image :dark-blur-bg) + :style {:width width + :height height + :position :absolute}}]) + [rn/view + {:style {:background-color (if (:blur? @state) + colors/neutral-80-opa-80 + (colors/theme-colors colors/neutral-5 colors/neutral-95))}} + [quo/category + {:list-type :reorder :label (:label @state) :data @data :blur? (:blur? @state)}]]]])])))) diff --git a/src/status_im2/contexts/quo_preview/settings/category.cljs b/src/status_im2/contexts/quo_preview/settings/category_settings.cljs similarity index 75% rename from src/status_im2/contexts/quo_preview/settings/category.cljs rename to src/status_im2/contexts/quo_preview/settings/category_settings.cljs index 913fb3cd7329..4b23be51208d 100644 --- a/src/status_im2/contexts/quo_preview/settings/category.cljs +++ b/src/status_im2/contexts/quo_preview/settings/category_settings.cljs @@ -1,4 +1,4 @@ -(ns status-im2.contexts.quo-preview.settings.category +(ns status-im2.contexts.quo-preview.settings.category-settings (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] @@ -6,12 +6,15 @@ [react-native.core :as rn] [react-native.fast-image :as fast-image] [reagent.core :as reagent] + [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) -(def item - {:title "Item 1" - :left-icon :i/browser - :chevron? true}) +(defn create-item-array + [n] + (vec (for [i (range n)] + {:title (str "Item " i) + :left-icon :i/browser + :chevron? true}))) (def descriptor [{:label "Category label:" @@ -24,11 +27,6 @@ :key :blur? :type :boolean}]) -(def image-uri - "https://4kwallpapers.com/images/wallpapers/giau-pass-mountain-pass-italy-dolomites-landscape-mountain-750x1334-4282.jpg") - -(def label "Label") - (defn preview [] (let [state (reagent/atom {:label "Label" @@ -37,7 +35,7 @@ {:keys [width height]} (rn/get-window)] [:f> (fn [] - (let [data (repeat (js/parseInt (:size @state)) item)] + (let [data (create-item-array (max (js/parseInt (:size @state)) 1))] (rn/use-effect (fn [] (if (:blur? @state) (theme/set-theme :dark) @@ -47,14 +45,14 @@ [rn/view {:style {:flex 1 :padding-bottom 150 - :margin-bottom 50 + :margin-bottom 80 :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}} [rn/view {:style {:min-height 180 :z-index 1}} [preview/customizer state descriptor]] (when (:blur? @state) [fast-image/fast-image - {:source {:uri image-uri} + {:source (resources/get-mock-image :dark-blur-bg) :style {:width width :height height :position :absolute}}]) @@ -62,4 +60,5 @@ {:style {:background-color (if (:blur? @state) colors/neutral-80-opa-80 (colors/theme-colors colors/neutral-5 colors/neutral-95))}} - [quo/category {:label (:label @state) :data data :blur? (:blur? @state)}]]]]))])) + [quo/category + {:list-type :settings :label (:label @state) :data data :blur? (:blur? @state)}]]]]))])) diff --git a/src/status_im2/contexts/quo_preview/settings/reorder_category.cljs b/src/status_im2/contexts/quo_preview/settings/reorder_category.cljs deleted file mode 100644 index 4c845256d8d6..000000000000 --- a/src/status_im2/contexts/quo_preview/settings/reorder_category.cljs +++ /dev/null @@ -1,71 +0,0 @@ -(ns status-im2.contexts.quo-preview.settings.reorder-category - (:require - [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [quo2.theme :as theme] - [react-native.core :as rn] - [react-native.fast-image :as fast-image] - [reagent.core :as reagent] - [status-im2.common.resources :as resources] - [status-im2.contexts.quo-preview.preview :as preview])) - -(defn create-item-array [n right-icon?] - (vec (for [i (range n)] - {:title (str "Item " i) - :subtitle "subtitle" - :left-icon :i/browser - :chevron? true - :right-icon (when right-icon? :i/globe) - :image-size 32 - :image (resources/get-mock-image :diamond)}))) - -(def descriptor - [{:label "Category label:" - :key :label - :type :text} - {:label "Category size:" - :key :size - :type :text} - {:label "Right icon:" - :key :right-icon? - :type :boolean} - {:label "Blur:" - :key :blur? - :type :boolean}]) - -(defn preview - [] - (let [state (reagent/atom {:label "Label" - :size "5" - :blur? false - :right-icon? false}) - {:keys [width height]} (rn/get-window)] - [:f> - (fn [] - (let [data (reagent/atom (create-item-array (max (js/parseInt (:size @state)) 1) (:right-icon? @state)))] - (rn/use-effect (fn [] - (if (:blur? @state) - (theme/set-theme :dark) - (theme/set-theme :light)) - (reset! data (create-item-array (max (js/parseInt (:size @state)) 1) (:right-icon? @state)))) - [(:blur? @state) (:right-icon? @state)]) - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view - {:style {:flex 1 - :padding-bottom 150 - :margin-bottom 50 - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}} - [rn/view - {:style {:min-height 180 - :z-index 1}} [preview/customizer state descriptor]] - (when (:blur? @state) - [fast-image/fast-image - {:source (resources/get-mock-image :dark-blur-bg) - :style {:width width - :height height - :position :absolute}}]) - [rn/view - {:style {:background-color (if (:blur? @state) - colors/neutral-80-opa-80 - (colors/theme-colors colors/neutral-5 colors/neutral-95))}} - [quo/reorder-category {:label (:label @state) :data @data :blur? (:blur? @state)}]]]]))]))