Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ulises M
|
c7d8492f75 | ||
|
Jamie Caprani
|
cc48d1cf91 | ||
|
Jamie Caprani
|
f528516690 | ||
|
Jamie Caprani
|
6eda28843a |
+1
-1
@@ -36,7 +36,7 @@
|
||||
"node-libs-react-native": "^1.2.1",
|
||||
"qrcode": "^1.4.1",
|
||||
"react": "18.0.0",
|
||||
"react-dom": "^16.4.2",
|
||||
"react-dom": "18.0.0",
|
||||
"react-native": "0.69.10",
|
||||
"react-native-background-timer": "^2.1.1",
|
||||
"react-native-blob-util": "^0.13.18",
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
(when disabled
|
||||
{:opacity 0.3})))
|
||||
|
||||
(defn button
|
||||
(defn- button-internal
|
||||
"with label
|
||||
[button opts \"label\"]
|
||||
opts
|
||||
@@ -223,7 +223,7 @@
|
||||
(let [pressed-in (reagent/atom false)]
|
||||
(fn
|
||||
[{:keys [on-press disabled type size before after above icon-secondary-no-color
|
||||
width customization-color override-theme override-background-color pressed
|
||||
width customization-color theme override-background-color pressed
|
||||
on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
|
||||
:or {type :primary
|
||||
size 40
|
||||
@@ -231,9 +231,7 @@
|
||||
children]
|
||||
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
|
||||
(get-in (themes customization-color)
|
||||
[(or
|
||||
override-theme
|
||||
(theme/get-theme)) type])
|
||||
[theme type])
|
||||
state (cond disabled :disabled
|
||||
(or @pressed-in pressed) :pressed
|
||||
:else :default)
|
||||
@@ -309,3 +307,5 @@
|
||||
:no-color icon-secondary-no-color
|
||||
:color icon-secondary-color
|
||||
:size icon-size}]])]]]))))
|
||||
|
||||
(def button (theme/with-theme button-internal))
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns quo2.components.tabs.tab.style
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]))
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def tab-background-opacity 0.3)
|
||||
|
||||
@@ -99,10 +98,10 @@
|
||||
:label {:style {:color colors/white}}}}})
|
||||
|
||||
(defn by-theme
|
||||
[{:keys [override-theme disabled active blur?]}]
|
||||
[{:keys [disabled active blur? theme]}]
|
||||
(let [state (cond disabled :disabled
|
||||
active :active
|
||||
:else :default)
|
||||
theme (or override-theme (theme/get-theme))]
|
||||
:else :default)]
|
||||
|
||||
(get-in (if blur? themes-for-blur-background themes)
|
||||
[theme state])))
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
(ns quo2.components.tabs.tab.view
|
||||
(:require [quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.tabs.tab.style :as style]
|
||||
[quo2.components.notifications.notification-dot :as notification-dot]
|
||||
[quo2.components.tabs.tab.style :as style]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.svg :as svg]))
|
||||
|
||||
@@ -46,7 +47,7 @@
|
||||
(vector? children)
|
||||
children)])
|
||||
|
||||
(defn view
|
||||
(defn- themed-view
|
||||
[{:keys [accessibility-label
|
||||
active
|
||||
before
|
||||
@@ -56,7 +57,7 @@
|
||||
disabled
|
||||
id
|
||||
on-press
|
||||
override-theme
|
||||
theme
|
||||
segmented?
|
||||
size
|
||||
notification-dot?]
|
||||
@@ -65,11 +66,10 @@
|
||||
(let [show-notification-dot? (and notification-dot? (= size 32))
|
||||
{:keys [icon-color
|
||||
background-color
|
||||
label]}
|
||||
(style/by-theme {:override-theme override-theme
|
||||
:blur? blur?
|
||||
:disabled disabled
|
||||
:active active})]
|
||||
label]} (style/by-theme {:theme theme
|
||||
:blur? blur?
|
||||
:disabled disabled
|
||||
:active active})]
|
||||
[rn/touchable-without-feedback
|
||||
(merge {:disabled disabled
|
||||
:accessibility-label accessibility-label}
|
||||
@@ -101,3 +101,5 @@
|
||||
:height size
|
||||
:disabled disabled
|
||||
:background-color background-color}])]]))
|
||||
|
||||
(def view (theme/with-theme themed-view))
|
||||
|
||||
@@ -101,7 +101,6 @@
|
||||
- `blur?` Boolean passed down to `quo2.components.tabs.tab/tab`.
|
||||
- `data` Vector of tab items.
|
||||
- `on-change` Callback called after a tab is selected.
|
||||
- `override-theme` Passed down to `quo2.components.tabs.tab/tab`.
|
||||
- `size` 32/24
|
||||
- `style` Style map passed to View wrapping tabs or to the FlatList when tabs
|
||||
are scrollable.
|
||||
@@ -132,7 +131,6 @@
|
||||
style
|
||||
size
|
||||
blur?
|
||||
override-theme
|
||||
in-scroll-view?]
|
||||
:or {fade-end-percentage fade-end-percentage
|
||||
fade-end? false
|
||||
@@ -183,7 +181,6 @@
|
||||
:flat-list-ref flat-list-ref
|
||||
:number-of-items (count data)
|
||||
:on-change on-change
|
||||
:override-theme override-theme
|
||||
:scroll-on-press? scroll-on-press?
|
||||
:size size
|
||||
:style style})})]]]
|
||||
@@ -195,7 +192,6 @@
|
||||
:blur? blur?
|
||||
:number-of-items (count data)
|
||||
:on-change on-change
|
||||
:override-theme override-theme
|
||||
:size size
|
||||
:style style}
|
||||
item
|
||||
|
||||
+40
-5
@@ -1,19 +1,25 @@
|
||||
(ns quo2.theme
|
||||
(:require [reagent.core :as reagent]))
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
["react" :refer [createContext]]
|
||||
utils.transforms))
|
||||
|
||||
(def theme (reagent/atom :light))
|
||||
(defonce theme-context (createContext :light)
|
||||
;(createContext :light)
|
||||
)
|
||||
(defonce ^:private theme-state (reagent/atom :light))
|
||||
|
||||
(defn dark?
|
||||
[]
|
||||
(= :dark @theme))
|
||||
(= :dark @theme-state))
|
||||
|
||||
(defn get-theme
|
||||
[]
|
||||
@theme)
|
||||
@theme-state)
|
||||
|
||||
(defn set-theme
|
||||
[value]
|
||||
(reset! theme value))
|
||||
(reset! theme-state value))
|
||||
|
||||
(defn theme-value
|
||||
"Returns a value based on the current/override-theme theme."
|
||||
@@ -22,3 +28,32 @@
|
||||
([light-value dark-value override-theme]
|
||||
(let [theme (or override-theme (get-theme))]
|
||||
(if (= theme :light) light-value dark-value))))
|
||||
|
||||
(defn provider
|
||||
"Wrap `children` in a React Provider using `quo2.theme/theme-context` as the
|
||||
context.
|
||||
|
||||
`options`: Clojure map. Currently we only use the `:theme` key. In the future
|
||||
we may support other settings.
|
||||
"
|
||||
[options & children]
|
||||
(let [provider (reagent/adapt-react-class (.-Provider theme-context))]
|
||||
(into [provider {:value options}]
|
||||
children)))
|
||||
|
||||
(defn use-theme
|
||||
"A hook that returns the current theme context."
|
||||
[]
|
||||
(utils.transforms/js->clj (rn/use-context new-theme-context)))
|
||||
|
||||
(defn ^:private f-with-theme
|
||||
[component props & args]
|
||||
(let [theme (-> (use-theme) :theme keyword)]
|
||||
(into [component (assoc props :theme theme)] args)))
|
||||
|
||||
(defn with-theme
|
||||
"Create a functional component that assoc `:theme` into the first arg of
|
||||
`component`. The theme value is taken from the nearest `quo2.theme/provider`."
|
||||
[component]
|
||||
(fn [& args]
|
||||
(into [:f> f-with-theme component] args)))
|
||||
|
||||
@@ -95,6 +95,10 @@
|
||||
[ref]
|
||||
(oops/oget ref "current"))
|
||||
|
||||
(def create-context (.-createContext react))
|
||||
|
||||
(def use-context react/useContext)
|
||||
|
||||
(defn use-effect
|
||||
([effect-fn]
|
||||
(use-effect effect-fn []))
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
[oops.core :as oops]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.contexts.activity-center.notification-types :as types]
|
||||
[status-im2.contexts.activity-center.notification.admin.view :as admin]
|
||||
@@ -83,7 +84,6 @@
|
||||
{:size 32
|
||||
:scrollable? true
|
||||
:blur? true
|
||||
:override-theme :dark
|
||||
:style style/tabs
|
||||
:fade-end-percentage 0.79
|
||||
:scroll-on-press? true
|
||||
@@ -214,15 +214,16 @@
|
||||
(rf/dispatch [:activity-center.notifications/fetch-first-page])
|
||||
(fn []
|
||||
(let [notifications (rf/sub [:activity-center/notifications])]
|
||||
[rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
|
||||
[blur/view style/blur]
|
||||
[header]
|
||||
[rn/flat-list
|
||||
{:data notifications
|
||||
:render-data active-swipeable
|
||||
:content-container-style {:flex-grow 1}
|
||||
:empty-component [empty-tab]
|
||||
:key-fn :id
|
||||
:on-scroll-to-index-failed identity
|
||||
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])
|
||||
:render-fn notification-component}]]))))
|
||||
[theme/provider {:theme :dark}
|
||||
[rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
|
||||
[blur/view style/blur]
|
||||
[header]
|
||||
[rn/flat-list
|
||||
{:data notifications
|
||||
:render-data active-swipeable
|
||||
:content-container-style {:flex-grow 1}
|
||||
:empty-component [empty-tab]
|
||||
:key-fn :id
|
||||
:on-scroll-to-index-failed identity
|
||||
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])
|
||||
:render-fn notification-component}]]]))))
|
||||
|
||||
@@ -118,8 +118,7 @@
|
||||
:size 32
|
||||
:icon true
|
||||
:on-press show-new-account-options
|
||||
:accessibility-label :show-new-account-options
|
||||
:override-theme :dark}
|
||||
:accessibility-label :show-new-account-options}
|
||||
:main-icons/add]]
|
||||
[rn/flat-list
|
||||
{:data (sort-by :timestamp > profiles-data)
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
[status-im2.navigation.screens :as screens]
|
||||
[status-im2.setup.hot-reload :as reloader]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.common.bottom-sheet-screen.view :as bottom-sheet-screen]))
|
||||
[status-im2.common.bottom-sheet-screen.view :as bottom-sheet-screen]
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(defn get-screens
|
||||
[]
|
||||
@@ -53,15 +54,15 @@
|
||||
[key]
|
||||
(reagent.core/reactify-component
|
||||
(fn []
|
||||
(let [{:keys [component options]}
|
||||
(get (if js/goog.DEBUG (get-screens) screens) (keyword key)) ;; needed for hot reload
|
||||
{:keys [insets sheet?]} options
|
||||
background-color (or (get-in options [:layout :backgroundColor])
|
||||
(when sheet? :transparent))]
|
||||
(let [{:keys [component options]} (-> (if js/goog.DEBUG (get-screens) screens)
|
||||
(get (keyword key)))
|
||||
{:keys [insets sheet? theme]} options
|
||||
user-theme (theme/get-theme)
|
||||
background-color (or (get-in options [:layout :backgroundColor])
|
||||
(when sheet? :transparent))]
|
||||
^{:key (str "root" key @reloader/cnt)}
|
||||
[:<>
|
||||
[rn/view
|
||||
{:style (wrapped-screen-style insets background-color)}
|
||||
[theme/provider {:theme (or theme user-theme)}
|
||||
[rn/view {:style (wrapped-screen-style insets background-color)}
|
||||
[inactive]
|
||||
(if sheet?
|
||||
[:f> bottom-sheet-screen/f-view component]
|
||||
|
||||
@@ -8763,7 +8763,7 @@ prompts@^2.4.0:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
|
||||
prop-types@15.x.x, prop-types@^15.6.2, prop-types@^15.7.2:
|
||||
prop-types@15.x.x, prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
@@ -8926,15 +8926,13 @@ react-devtools-core@4.24.0:
|
||||
shell-quote "^1.6.1"
|
||||
ws "^7"
|
||||
|
||||
react-dom@^16.4.2:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
|
||||
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
|
||||
react-dom@18.0.0:
|
||||
version "18.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
|
||||
integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.6.2"
|
||||
scheduler "^0.19.1"
|
||||
scheduler "^0.21.0"
|
||||
|
||||
react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
@@ -9757,14 +9755,6 @@ saxes@^5.0.1:
|
||||
dependencies:
|
||||
xmlchars "^2.2.0"
|
||||
|
||||
scheduler@^0.19.1:
|
||||
version "0.19.1"
|
||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
|
||||
integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
scheduler@^0.21.0:
|
||||
version "0.21.0"
|
||||
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
|
||||
|
||||
Reference in New Issue
Block a user