Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Lungu Cristian
|
627bb19313 | ||
|
Cristian Lungu
|
6f3ef8c76b |
@@ -95,6 +95,7 @@ react-native.fs/unlink
|
||||
react-native.fs/file-exists?
|
||||
status-im.ui.components.colors/white
|
||||
status-im.ui.components.colors/black
|
||||
status-im.transport.core-test/messages
|
||||
status-im.ui.components.core/animated-header
|
||||
status-im.ui.components.core/safe-area-provider
|
||||
status-im.ui.components.core/safe-area-consumer
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
{:linters
|
||||
{:unresolved-symbol
|
||||
{:exclude [(cljs.test/is [match? thrown-match?])
|
||||
(clojure.test/is [match? thrown-match?])]}}}
|
||||
@@ -32,7 +32,6 @@
|
||||
"letsubs" :binding
|
||||
"with-let" "let"
|
||||
"reg-event-fx" :arg1-pair
|
||||
"reg-fx" :arg1-pair
|
||||
"testing" :arg1-body
|
||||
"deftest-sub" :arg1-body
|
||||
"wait-for" :arg1-body
|
||||
|
||||
@@ -27,23 +27,18 @@ class StatusOkHttpClientFactory implements OkHttpClientFactory {
|
||||
X509Certificate cert = null;
|
||||
HandshakeCertificates clientCertificates;
|
||||
String certPem = "";
|
||||
// Get TLS PEM certificate from status-go
|
||||
try {
|
||||
// induce half second sleep because sometimes a cert is not immediately available
|
||||
// TODO : remove sleep if App no longer crashes on Android 10 devices with
|
||||
// java.lang.RuntimeException: Could not invoke WebSocketModule.connect
|
||||
Thread.sleep(500);
|
||||
certPem = getCertificatePem();
|
||||
} catch(Exception e) {
|
||||
Log.e(TAG, "Could not getImageTLSCert",e);
|
||||
}
|
||||
|
||||
if (certPem.isEmpty()) {
|
||||
Log.e(TAG, "Certificate is empty, cannot create OkHttpClient without a valid certificate");
|
||||
return null;
|
||||
}
|
||||
|
||||
// Convert PEM certificate string to X509Certificate object
|
||||
// Get TLS PEM certificate from status-go
|
||||
try {
|
||||
// induce half second sleep because sometimes a cert is not immediately available
|
||||
// TODO : remove sleep if App no longer crashes on Android 10 devices with
|
||||
// java.lang.RuntimeException: Could not invoke WebSocketModule.connect
|
||||
Thread.sleep(500);
|
||||
certPem = StatusPackage.getImageTLSCert();
|
||||
} catch(Exception e) {
|
||||
Log.e(TAG, "Could not getImageTLSCert",e);
|
||||
}
|
||||
// Convert PEM certificate string to X509Certificate object
|
||||
try {
|
||||
// induce half second sleep because sometimes a cert is not immediately available
|
||||
// TODO : remove sleep if App no longer crashes on Android 10 devices
|
||||
@@ -79,17 +74,4 @@ class StatusOkHttpClientFactory implements OkHttpClientFactory {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
private String getCertificatePem() {
|
||||
try {
|
||||
String certPem = StatusPackage.getImageTLSCert();
|
||||
if (certPem == null || certPem.trim().isEmpty()) {
|
||||
Log.e(TAG, "Certificate PEM string is null or empty");
|
||||
return "";
|
||||
}
|
||||
return certPem;
|
||||
} catch (Exception e) {
|
||||
Log.e(TAG, "Could not getImageTLSCert", e);
|
||||
return "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,6 +77,7 @@ pipeline {
|
||||
}
|
||||
}
|
||||
stage('Upload') {
|
||||
when { expression { !utils.isReleaseBuild() } }
|
||||
steps { script {
|
||||
env.DIAWI_URL = ios.uploadToDiawi()
|
||||
env.PKG_URL = env.DIAWI_URL
|
||||
|
||||
+1
-21
@@ -641,26 +641,6 @@ keywords and concatenating them into a single string.
|
||||
```
|
||||
|
||||
### Tests
|
||||
#### Prefer `match?` over `=` when comparing data structures
|
||||
|
||||
Prefer the `match?` directive over `=` when comparing data structures, otherwise
|
||||
when the check fails the output can be too difficult to read. `match?` is
|
||||
defined by library https://github.com/nubank/matcher-combinators.
|
||||
|
||||
```clojure
|
||||
;; bad
|
||||
(deftest some-test
|
||||
(let [expected {...}
|
||||
actual {...}]
|
||||
(is (= expected actual))))
|
||||
|
||||
;; good
|
||||
(deftest some-test
|
||||
(let [expected {...}
|
||||
actual {...}]
|
||||
(is (match? expected actual))))
|
||||
```
|
||||
|
||||
#### Subscription tests
|
||||
|
||||
Test [layer-3 subscriptions](https://day8.github.io/re-frame/subscriptions/) by
|
||||
@@ -736,7 +716,7 @@ src
|
||||
|
||||
- `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
|
||||
- `src/mocks`: Plumbing configuration to be able to run tests.
|
||||
- `src/quo/`: The component library for Status Mobile. [Read more...](../src/quo/README.md)
|
||||
- `src/quo/`: The component library for Status Mobile.
|
||||
- `src/react_native/`: Contains only low-level constructs to help React Native
|
||||
work in tandem with Clojure(Script).
|
||||
- `src/status_im2/`: Directory where we try to be as strict as possible about
|
||||
|
||||
@@ -602,15 +602,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "nubank/matcher-combinators/3.8.8/matcher-combinators-3.8.8",
|
||||
"host": "https://repo.clojars.org",
|
||||
"jar": {
|
||||
"sha1": "4c94bd510f0c18a20191e46dd6becedebc640bbd",
|
||||
"sha256": "0wpla2hx0s4mda58ndyd8938zmnz1gyhgfr6pzfphy27xfbvsssl"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "org/apache/ant/ant/1.10.11/ant-1.10.11",
|
||||
"host": "https://repo1.maven.org/maven2",
|
||||
@@ -755,15 +746,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "org/clojure/math.combinatorics/0.2.0/math.combinatorics-0.2.0",
|
||||
"host": "https://repo1.maven.org/maven2",
|
||||
"jar": {
|
||||
"sha1": "aa95d25ea98bfe1152ea540f6e58a303c8cacc86",
|
||||
"sha256": "0qvdsr5ryjmrpz622ivpyq5aayn42y4bk531vbasyj2yj7gcg35h"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "org/clojure/spec.alpha/0.3.218/spec.alpha-0.3.218",
|
||||
"host": "https://repo1.maven.org/maven2",
|
||||
|
||||
@@ -65,7 +65,6 @@ net/cgrand/macrovich/0.2.1/macrovich-0.2.1.jar
|
||||
net/java/dev/jna/jna/5.12.1/jna-5.12.1.jar
|
||||
nrepl/bencode/1.1.0/bencode-1.1.0.jar
|
||||
nrepl/nrepl/1.0.0/nrepl-1.0.0.jar
|
||||
nubank/matcher-combinators/3.8.8/matcher-combinators-3.8.8.jar
|
||||
org/apache/ant/ant/1.10.11/ant-1.10.11.jar
|
||||
org/apache/ant/ant-launcher/1.10.11/ant-launcher-1.10.11.jar
|
||||
org/babashka/sci/0.7.38/sci-0.7.38.jar
|
||||
@@ -82,7 +81,6 @@ org/clojure/data.json/2.4.0/data.json-2.4.0.jar
|
||||
org/clojure/data.priority-map/1.1.0/data.priority-map-1.1.0.jar
|
||||
org/clojure/google-closure-library/0.0-20230227-c7c0a541/google-closure-library-0.0-20230227-c7c0a541.jar
|
||||
org/clojure/google-closure-library-third-party/0.0-20230227-c7c0a541/google-closure-library-third-party-0.0-20230227-c7c0a541.jar
|
||||
org/clojure/math.combinatorics/0.2.0/math.combinatorics-0.2.0.jar
|
||||
org/clojure/spec.alpha/0.3.218/spec.alpha-0.3.218.jar
|
||||
org/clojure/test.check/1.1.1/test.check-1.1.1.jar
|
||||
org/clojure/tools.analyzer/1.1.0/tools.analyzer-1.1.0.jar
|
||||
|
||||
@@ -14,7 +14,6 @@ stdenv.mkDerivation {
|
||||
"patchJavaPhase"
|
||||
"patchReactNativePhase"
|
||||
"patchPodPhase"
|
||||
"patchGlogPhase"
|
||||
"installPhase"
|
||||
];
|
||||
|
||||
@@ -99,14 +98,6 @@ stdenv.mkDerivation {
|
||||
'[RCTConvert UIColor:options.tintColor() ? @(*options.tintColor()) : nil];'
|
||||
'';
|
||||
|
||||
# Fix pod issue after upgrading to MacOS Sonoma and Xcode 15
|
||||
# https://github.com/status-im/status-mobile/issues/17682
|
||||
patchGlogPhase = ''
|
||||
substituteInPlace ./node_modules/react-native/scripts/ios-configure-glog.sh \
|
||||
--replace 'export CC="' '#export CC="' \
|
||||
--replace 'export CXX="' '#export CXX="'
|
||||
'';
|
||||
|
||||
# The ELF types are incompatible with the host platform, so let's not even try
|
||||
# TODO: Use Android NDK to strip binaries manually
|
||||
dontPatchELF = true;
|
||||
|
||||
@@ -73,7 +73,6 @@ in {
|
||||
allowHigher = true;
|
||||
};
|
||||
go = super.go_1_19;
|
||||
clang = super.clang_15;
|
||||
buildGoPackage = super.buildGo119Package;
|
||||
buildGoModule = super.buildGo119Module;
|
||||
gomobile = (super.gomobile.overrideAttrs (old: {
|
||||
|
||||
+1
-1
@@ -94,7 +94,7 @@
|
||||
"process": "0.11.10",
|
||||
"react-test-renderer": "18.0.0",
|
||||
"rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#refs/tags/v2.0.2-status",
|
||||
"shadow-cljs": "2.26.2"
|
||||
"shadow-cljs": "2.25.0"
|
||||
},
|
||||
"binary": {
|
||||
"module_name": "status_nodejs_addon",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 851 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
+2
-4
@@ -12,12 +12,10 @@
|
||||
[metosin/malli "0.13.0"]
|
||||
|
||||
;; Dev dependencies
|
||||
[refactor-nrepl "3.9.1"]
|
||||
[cider/cider-nrepl "0.31.0"]
|
||||
[refactor-nrepl "2.5.0"]
|
||||
[cider/cider-nrepl "0.25.3"]
|
||||
[cider/piggieback "0.4.1"]
|
||||
[org.slf4j/slf4j-nop "2.0.9"]
|
||||
[re-frisk-remote "1.6.0"]
|
||||
[nubank/matcher-combinators "3.8.8"]
|
||||
|
||||
;; Use the same version specified in the Nix dependency.
|
||||
[clj-kondo/clj-kondo "2023.09.07"]
|
||||
|
||||
@@ -49,7 +49,6 @@
|
||||
:Text {}
|
||||
:StatusBar {}
|
||||
:ScrollView {}
|
||||
:SafeAreaView {}
|
||||
:KeyboardAvoidingView {}
|
||||
:TextInput {}
|
||||
:Image {}
|
||||
@@ -368,6 +367,17 @@
|
||||
:LineChart #js {}
|
||||
:LineChartBicolor #js {}})
|
||||
|
||||
(def wallet-connect-client
|
||||
#js
|
||||
{:default #js {}
|
||||
:CLIENT_EVENTS #js
|
||||
{:session #js
|
||||
{:request nil
|
||||
:created nil
|
||||
:deleted nil
|
||||
:proposal nil
|
||||
:updated nil}}})
|
||||
|
||||
(def worklet-factory
|
||||
#js {:applyAnimationsToStyle (fn [])})
|
||||
|
||||
@@ -436,6 +446,7 @@
|
||||
"../src/js/worklets/parallax.js" #js {}
|
||||
"../src/js/worklets/identifiers_highlighting.js" #js {}
|
||||
"./fleets.js" default-fleets
|
||||
"@walletconnect/client" wallet-connect-client
|
||||
"../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json"))
|
||||
"../translations/de.json" (js/JSON.parse (slurp "./translations/de.json"))
|
||||
"../translations/en.json" (js/JSON.parse (slurp "./translations/en.json"))
|
||||
|
||||
@@ -116,17 +116,6 @@ rendered. We use [React Native Testing Library](https://callstack.github.io/reac
|
||||
There are dozens of examples in the repository, so use them as a reference. A
|
||||
good and complete example is [quo.components.avatars.user-avatar.component-spec](/src/quo/components/avatars/user_avatar/component_spec.cljs)
|
||||
|
||||
### No-props test
|
||||
|
||||
When writing tests for the component that has props, please add one test that covers situation when props aren't passed. Because even if component not showing anything meaningful without props, it shouldn't crash.
|
||||
|
||||
```clojure
|
||||
(h/describe "Transaction Progress"
|
||||
(h/test "component renders without props"
|
||||
(h/render [quo/transaction-progress {}])
|
||||
(h/is-truthy (h/get-by-label-text :transaction-progress)))
|
||||
```
|
||||
|
||||
## Do not couple the library with re-frame
|
||||
|
||||
Don't use re-frame inside this library (e.g. dispatch & subscribe). If a
|
||||
|
||||
@@ -30,6 +30,6 @@
|
||||
{:accessibility-label :account-emoji
|
||||
:adjusts-font-size-to-fit true
|
||||
:style {:font-size emoji-size}}
|
||||
(when emoji (string/trim emoji))]]))
|
||||
(string/trim emoji)]]))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
[rn/text
|
||||
{:style (style/emoji-size size)
|
||||
:accessibility-label :emoji}
|
||||
(when emoji (string/trim emoji))])
|
||||
(string/trim emoji)])
|
||||
[lock locked? size theme]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
||||
@@ -2,30 +2,26 @@
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(defn- circle-color
|
||||
[customization-color neutral? theme]
|
||||
(if neutral?
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
|
||||
(colors/custom-color customization-color 50 20)))
|
||||
[customization-color]
|
||||
(colors/custom-color customization-color 50 20))
|
||||
|
||||
(defn- text-color
|
||||
[customization-color neutral? theme]
|
||||
(if neutral?
|
||||
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
|
||||
(colors/theme-colors
|
||||
(colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
theme)))
|
||||
[customization-color theme]
|
||||
(colors/theme-colors
|
||||
(colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
theme))
|
||||
|
||||
(defn container
|
||||
[circle-size customization-color neutral? theme]
|
||||
[circle-size customization-color]
|
||||
{:width circle-size
|
||||
:height circle-size
|
||||
:border-radius circle-size
|
||||
:text-align :center
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color (circle-color customization-color neutral? theme)})
|
||||
:background-color (circle-color customization-color)})
|
||||
|
||||
(defn text
|
||||
[customization-color neutral? theme]
|
||||
{:color (text-color customization-color neutral? theme)})
|
||||
[customization-color theme]
|
||||
{:color (text-color customization-color theme)})
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns quo.components.avatars.wallet-user-avatar.view
|
||||
(:require [clojure.string :as string]
|
||||
[quo.components.avatars.wallet-user-avatar.style :as style]
|
||||
(:require [quo.components.avatars.wallet-user-avatar.style :as style]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
@@ -41,21 +40,18 @@
|
||||
:customization-color - keyword (default: nil) - color of the avatar
|
||||
:size - keyword (default: last element of properties object) - size of the
|
||||
avatar
|
||||
:monospace? - boolean (default: false) - use monospace font
|
||||
:lowercase? - boolean (default: false) - lowercase text
|
||||
:neutral? - boolean (default: false) - use neutral colors variant"
|
||||
[{:keys [full-name customization-color size theme monospace? lowercase? neutral?]
|
||||
:monospace? - boolean (default: false) - use monospace font"
|
||||
[{:keys [full-name customization-color size theme monospace?]
|
||||
:or {size biggest-possible}}]
|
||||
(let [circle-size (:size (size properties))
|
||||
small? (check-if-size-small size)
|
||||
initials (utils.string/get-initials full-name (if small? 1 2))]
|
||||
small? (check-if-size-small size)]
|
||||
[rn/view
|
||||
{:style (style/container circle-size customization-color neutral? theme)}
|
||||
{:style (style/container circle-size customization-color)}
|
||||
[text/text
|
||||
{:accessibility-label :wallet-user-avatar
|
||||
:size (:font-size (size properties))
|
||||
:weight (if monospace? :monospace (:font-weight (size properties)))
|
||||
:style (style/text customization-color neutral? theme)}
|
||||
(if (and initials lowercase?) (string/lower-case initials) initials)]]))
|
||||
:style (style/text customization-color theme)}
|
||||
(utils.string/get-initials full-name (if small? 1 2))]]))
|
||||
|
||||
(def wallet-user-avatar (quo.theme/with-theme view-internal))
|
||||
|
||||
@@ -10,36 +10,40 @@
|
||||
|
||||
(defn token-requirement-list-row
|
||||
[tokens padding?]
|
||||
[rn/view {:style (style/token-row padding?)}
|
||||
(map-indexed (fn [token-index token]
|
||||
(let [{:keys [amount sufficient? purchasable?]} token]
|
||||
^{:key token-index}
|
||||
[rn/view {:style style/token-tag-spacing}
|
||||
[token-tag/view
|
||||
{:token-symbol (:symbol token)
|
||||
:token-value amount
|
||||
:size :size-24
|
||||
:options (cond
|
||||
sufficient? :hold
|
||||
purchasable? :add)}]]))
|
||||
tokens)])
|
||||
[rn/view
|
||||
{:style (style/token-row padding?)}
|
||||
(doall
|
||||
(map-indexed (fn [token-index token]
|
||||
(let [{:keys [img-src amount sufficient? purchasable?]} token]
|
||||
^{:key token-index}
|
||||
[rn/view {:style style/token-tag-spacing}
|
||||
[token-tag/view
|
||||
{:token-symbol (:symbol token)
|
||||
:token-value amount
|
||||
:size :size-24
|
||||
:options (cond
|
||||
sufficient? :hold
|
||||
purchasable? :add)
|
||||
:token-img-src img-src}]]))
|
||||
tokens))])
|
||||
|
||||
(defn- internal-view
|
||||
[{:keys [tokens padding? theme]}]
|
||||
[:<>
|
||||
(if (> (count tokens) 1)
|
||||
(map-indexed
|
||||
(fn [token-requirement-index tokens]
|
||||
^{:key token-requirement-index}
|
||||
[rn/view {:margin-bottom 12}
|
||||
(when-not (= token-requirement-index 0)
|
||||
[rn/view {:style (style/token-row-or-border theme)}])
|
||||
(when-not (= token-requirement-index 0)
|
||||
[text/text
|
||||
{:style (style/token-row-or-text padding? theme)
|
||||
:size :label} (string/lower-case (i18n/label :t/or))])
|
||||
[token-requirement-list-row tokens padding?]])
|
||||
tokens)
|
||||
(doall
|
||||
(map-indexed
|
||||
(fn [token-requirement-index tokens]
|
||||
^{:key token-requirement-index}
|
||||
[rn/view {:margin-bottom 12}
|
||||
(when-not (= token-requirement-index 0)
|
||||
[rn/view {:style (style/token-row-or-border theme)}])
|
||||
(when-not (= token-requirement-index 0)
|
||||
[text/text
|
||||
{:style (style/token-row-or-text padding? theme)
|
||||
:size :label} (string/lower-case (i18n/label :t/or))])
|
||||
[token-requirement-list-row tokens padding?]])
|
||||
tokens))
|
||||
[token-requirement-list-row (first tokens) padding?])])
|
||||
|
||||
(def token-requirement-list (quo.theme/with-theme internal-view))
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
(ns quo.components.dropdowns.dropdown-input.component-spec
|
||||
(:require
|
||||
[quo.components.dropdowns.dropdown-input.view :as dropdown-input]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Dropdown Input"
|
||||
|
||||
(h/test "default render"
|
||||
(let [header-label "Label"
|
||||
label "Dropdown"]
|
||||
(h/render [dropdown-input/view
|
||||
{:label? true
|
||||
:header-label
|
||||
header-label} label])
|
||||
(h/is-truthy (h/get-by-label-text :dropdown))
|
||||
(h/is-truthy (h/get-by-text header-label))
|
||||
(h/is-truthy (h/get-by-text label))))
|
||||
|
||||
(h/test "render with icon"
|
||||
(let [label "Dropdown"]
|
||||
(h/render [dropdown-input/view
|
||||
{:icon? true
|
||||
:icon-name
|
||||
:i/wallet
|
||||
:label? true}
|
||||
label])
|
||||
(h/is-truthy (h/get-by-label-text :dropdown))
|
||||
(h/is-truthy (h/get-by-label-text :left-icon))
|
||||
(h/is-truthy (h/get-by-text label))))
|
||||
|
||||
(h/test "render in active state"
|
||||
(let [label "Dropdown"]
|
||||
(h/render [dropdown-input/view
|
||||
{:state :active
|
||||
:label?
|
||||
true} label])
|
||||
(h/is-truthy (h/get-by-label-text :dropdown))
|
||||
(h/is-truthy (h/get-by-label-text :right-icon "Expecting active state icon"))))
|
||||
|
||||
(h/test "render in disabled state"
|
||||
(let [label "Dropdown"]
|
||||
(h/render [dropdown-input/view
|
||||
{:state :disabled
|
||||
:label? true} label])
|
||||
(h/is-truthy (h/get-by-label-text :dropdown))
|
||||
(h/is-disabled (h/get-by-text label "Dropdown should be disabled in disabled state"))))
|
||||
|
||||
(h/test "on-press"
|
||||
(let [event (h/mock-fn)
|
||||
label "Dropdown"]
|
||||
(h/render [dropdown-input/view
|
||||
{:on-press event
|
||||
:label?
|
||||
true} label])
|
||||
(h/fire-event :press (h/get-by-text label))
|
||||
(h/was-called event))))
|
||||
@@ -1,49 +0,0 @@
|
||||
(ns quo.components.dropdowns.dropdown-input.properties
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(def icon-size 20)
|
||||
|
||||
(defn- grey-blur
|
||||
[theme active?]
|
||||
{:left-icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:right-icon-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
:right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if active?
|
||||
(colors/theme-colors colors/neutral-80-opa-20
|
||||
colors/white-opa-40
|
||||
theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-10
|
||||
colors/white-opa-10
|
||||
theme))})
|
||||
|
||||
(defn- outline
|
||||
[theme active?]
|
||||
{:left-icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:right-icon-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
|
||||
:right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if active?
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
|
||||
|
||||
(defn- grey
|
||||
[theme active?]
|
||||
{:left-icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:right-icon-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
|
||||
:right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if active?
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-20
|
||||
colors/neutral-60
|
||||
theme))})
|
||||
|
||||
(defn get-colors
|
||||
[{:keys [theme state blur?]}]
|
||||
(let [active? (= state :active)]
|
||||
(cond
|
||||
blur? (grey-blur theme active?)
|
||||
(= theme :dark) (outline theme active?)
|
||||
(= theme :light) (grey theme active?))))
|
||||
@@ -1,62 +0,0 @@
|
||||
(ns quo.components.dropdowns.dropdown-input.style
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(def gap 8)
|
||||
|
||||
(def blur-view
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0})
|
||||
|
||||
(def left-icon
|
||||
{:margin-right gap})
|
||||
|
||||
(defn right-icon
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:margin-right gap})
|
||||
|
||||
(defn header-label
|
||||
[theme blur?]
|
||||
{:color (if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-40
|
||||
colors/white-opa-70
|
||||
theme)
|
||||
(colors/theme-colors colors/neutral-50
|
||||
colors/neutral-40
|
||||
theme))
|
||||
:margin-bottom gap})
|
||||
|
||||
(def root-container
|
||||
{:width "100%"
|
||||
:height 40})
|
||||
|
||||
(defn container
|
||||
[{:keys [background-color border-color]}
|
||||
{:keys [icon? state]}]
|
||||
(cond-> {:align-items :center
|
||||
:justify-content :space-between
|
||||
:flex-direction :row
|
||||
:padding-vertical 9
|
||||
:padding-left 16
|
||||
:padding-right 12
|
||||
:overflow :hidden
|
||||
:background-color background-color
|
||||
:border-radius 12}
|
||||
|
||||
icon?
|
||||
(assoc :padding-left 12)
|
||||
|
||||
border-color
|
||||
(assoc :border-color border-color
|
||||
:border-width 1)
|
||||
|
||||
(= state :disabled)
|
||||
(assoc :opacity 0.3)))
|
||||
|
||||
(def right-half-container
|
||||
{:flex-direction :row
|
||||
:align-items :center})
|
||||
@@ -1,68 +0,0 @@
|
||||
(ns quo.components.dropdowns.dropdown-input.view
|
||||
(:require
|
||||
[quo.components.dropdowns.dropdown-input.properties :as properties]
|
||||
[quo.components.dropdowns.dropdown-input.style :as style]
|
||||
[quo.components.icon :as icon]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [state theme on-press icon?
|
||||
label? blur?
|
||||
accessibility-label header-label]
|
||||
:or {state :default
|
||||
icon? true
|
||||
label? true
|
||||
blur? false
|
||||
header-label "Label"}
|
||||
:as props}
|
||||
label]
|
||||
(let [{:keys [left-icon-color right-icon-color right-icon-color-2]
|
||||
:as colors} (properties/get-colors props)
|
||||
right-icon (if (= state :active) :i/pullup :i/dropdown)]
|
||||
[rn/view
|
||||
{:style style/root-container}
|
||||
(when label?
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:align :left
|
||||
:style (style/header-label theme blur?)} header-label])
|
||||
[rn/pressable
|
||||
{:accessibility-label (or accessibility-label :dropdown)
|
||||
:disabled (= state :disabled)
|
||||
:on-press on-press
|
||||
:style (style/container colors props)}
|
||||
[rn/view
|
||||
{:style style/right-half-container}
|
||||
(when icon?
|
||||
[icon/icon
|
||||
:i/placeholder
|
||||
{:accessibility-label :left-icon
|
||||
:color left-icon-color
|
||||
:size properties/icon-size
|
||||
:container-style style/left-icon}])
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
:weight :regular
|
||||
:number-of-lines 1
|
||||
:style (style/right-icon theme)}
|
||||
label]]
|
||||
[icon/icon
|
||||
right-icon
|
||||
{:size properties/icon-size
|
||||
:accessibility-label :right-icon
|
||||
:color right-icon-color
|
||||
:color-2 right-icon-color-2}]]]))
|
||||
|
||||
(def view
|
||||
"Props:
|
||||
- state: :default (default) | :active | :disabled
|
||||
- label: string
|
||||
- header-label: string
|
||||
- icon?: boolean
|
||||
- label?: boolean
|
||||
- blur?: boolean
|
||||
- on-press: function"
|
||||
(theme/with-theme view-internal))
|
||||
@@ -19,7 +19,3 @@
|
||||
:background-color colors/danger-50
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(def empty-state
|
||||
{:width 375
|
||||
:height 116})
|
||||
|
||||
@@ -2,12 +2,11 @@
|
||||
(:require
|
||||
[quo.components.graph.utils :as utils]
|
||||
[quo.components.graph.wallet-graph.style :as style]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.foundations.resources :as resources]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.charts :as charts]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[react-native.linear-gradient :as linear-gradient]))
|
||||
|
||||
(defn- time-frame->max-data-points
|
||||
@@ -43,10 +42,11 @@
|
||||
gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
|
||||
fill-color (colors/theme-colors colors/white colors/neutral-95)]
|
||||
(if (= time-frame :empty)
|
||||
[fast-image/fast-image
|
||||
{:style style/empty-state
|
||||
:source (resources/get-themed-image :no-funds theme)
|
||||
:accessibility-label :illustration}]
|
||||
[rn/view
|
||||
{:accessibility-label :illustration
|
||||
:style style/illustration}
|
||||
[text/text {:style {:color colors/white}}
|
||||
"Illustration here"]]
|
||||
[rn/view
|
||||
[linear-gradient/linear-gradient
|
||||
{:colors gradient-colors
|
||||
|
||||
@@ -9,10 +9,9 @@
|
||||
|
||||
(defn- valid-color?
|
||||
[color]
|
||||
(and color
|
||||
(or (keyword? color)
|
||||
(and (string? color)
|
||||
(not (string/blank? color))))))
|
||||
(or (keyword? color)
|
||||
(and (string? color)
|
||||
(not (string/blank? color)))))
|
||||
|
||||
(defn- image-icon-style
|
||||
[{:keys [color no-color size container-style theme]}]
|
||||
@@ -38,8 +37,8 @@
|
||||
(cond-> {:size size
|
||||
:accessibility-label accessibility-label
|
||||
:style container-style}
|
||||
(valid-color? color) (assoc :color color)
|
||||
(valid-color? color-2) (assoc :color-2 color-2))]
|
||||
(and color (valid-color? color)) (assoc :color color)
|
||||
(and color-2 (valid-color? color-2)) (assoc :color-2 color-2))]
|
||||
[rn/image
|
||||
{:style (image-icon-style (assoc props :size size))
|
||||
:accessibility-label accessibility-label
|
||||
|
||||
@@ -118,61 +118,13 @@
|
||||
"M2.79504 9.01494C2.89473 8.85584 3.00297 8.70977 3.11963 8.5761C3.90594 7.67512 4.97212 7.45024 5.99992 7.45024C7.02772 7.45024 8.0939 7.67512 8.88021 8.5761C8.99688 8.70978 9.10512 8.85585 9.2048 9.01495C8.9501 9.28561 8.66149 9.52401 8.34577 9.72335C8.25403 9.55824 8.15512 9.41818 8.05145 9.29939C7.56503 8.74204 6.88121 8.55024 5.99992 8.55024C5.11862 8.55024 4.43481 8.74204 3.94839 9.29939C3.84472 9.41818 3.74582 9.55824 3.65408 9.72334C3.33835 9.524 3.04975 9.2856 2.79504 9.01494ZM5.99992 3.5502C5.47525 3.5502 5.04992 3.97552 5.04992 4.5002C5.04992 5.02487 5.47525 5.4502 5.99992 5.4502C6.52459 5.4502 6.94992 5.02487 6.94992 4.5002C6.94992 3.97552 6.52459 3.5502 5.99992 3.5502ZM3.94992 4.5002C3.94992 3.36801 4.86773 2.4502 5.99992 2.4502C7.1321 2.4502 8.04992 3.36801 8.04992 4.5002C8.04992 5.63238 7.1321 6.5502 5.99992 6.5502C4.86773 6.5502 3.94992 5.63238 3.94992 4.5002Z"
|
||||
:fill color-2}]])
|
||||
|
||||
(defn- contact-20
|
||||
[{:keys [color color-2]
|
||||
:or {color colors/neutral-100
|
||||
color-2 colors/white}
|
||||
:as props}]
|
||||
[container props
|
||||
[svg/circle
|
||||
{:cx 10
|
||||
:cy 10
|
||||
:r 7.5
|
||||
:fill color}]
|
||||
[svg/path
|
||||
{:d
|
||||
"M8.65002 7.99998C8.65002 7.25439 9.25443 6.64998 10 6.64998C10.7456 6.64998 11.35 7.25439 11.35 7.99998C11.35 8.74556 10.7456 9.34998 10 9.34998C9.25443 9.34998 8.65002 8.74556 8.65002 7.99998ZM10 5.34998C8.53646 5.34998 7.35002 6.53642 7.35002 7.99998C7.35002 9.46353 8.53646 10.65 10 10.65C11.4636 10.65 12.65 9.46353 12.65 7.99998C12.65 6.53642 11.4636 5.34998 10 5.34998ZM10 13.65C8.67557 13.65 7.53064 14.4186 6.98692 15.5341C6.60094 15.3235 6.23942 15.0737 5.90771 14.79C6.69408 13.3369 8.23179 12.35 10 12.35C11.7682 12.35 13.306 13.3369 14.0923 14.79C13.7606 15.0737 13.3991 15.3235 13.0131 15.5341C12.4694 14.4186 11.3245 13.65 10 13.65Z"
|
||||
:fill color-2}]])
|
||||
|
||||
(defn- verified-20
|
||||
[{:keys [color color-2]
|
||||
:or {color colors/neutral-100
|
||||
color-2 colors/white}
|
||||
:as props}]
|
||||
[container props
|
||||
[svg/path
|
||||
{:d
|
||||
"M18 10C18 8.77003 17.1118 7.74751 15.9418 7.53891C16.6216 6.56407 16.5267 5.21294 15.6569 4.34321C14.7872 3.47344 13.436 3.37852 12.4611 4.05845C12.2526 2.88834 11.23 2 10 2C8.77 2 7.74747 2.88827 7.53889 4.05832C6.56406 3.37846 5.21292 3.47339 4.34318 4.34313C3.47343 5.21288 3.3785 6.56404 4.05839 7.53888C2.88831 7.74743 2 8.76998 2 10C2 11.23 2.88824 12.2525 4.05826 12.4611C3.3784 13.4359 3.47333 14.7871 4.34307 15.6568C5.21284 16.5266 6.56403 16.6215 7.53887 15.9416C7.74741 17.1117 8.76996 18 10 18C11.23 18 12.2525 17.1117 12.4611 15.9417C13.4359 16.6215 14.7871 16.5266 15.6568 15.6569C16.5265 14.7871 16.6215 13.436 15.9416 12.4611C17.1117 12.2526 18 11.23 18 10Z"
|
||||
:fill color}]
|
||||
[svg/path
|
||||
{:d "M7.25 10.75L9.25 12.25L12.75 7.75"
|
||||
:stroke color-2
|
||||
:stroke-width "1.2"}]])
|
||||
|
||||
(defn- untrustworthy-20
|
||||
[{:keys [color color-2]
|
||||
:or {color colors/neutral-100
|
||||
color-2 colors/white}
|
||||
:as props}]
|
||||
[container props
|
||||
[svg/path
|
||||
{:d "M10 2L15.6569 4.34315L18 10L15.6569 15.6569L10 18L4.34315 15.6569L2 10L4.34315 4.34315L10 2Z"
|
||||
:fill color}]
|
||||
[svg/path
|
||||
{:d
|
||||
"M10.75 5.5L10.55 11.5H9.45L9.25 5.5H10.75ZM10 13C10.4142 13 10.75 13.3358 10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13Z"
|
||||
:fill color-2}]])
|
||||
|
||||
(def ^:private icons
|
||||
{:i/clear-20 clear-20
|
||||
:i/dropdown-20 dropdown-20
|
||||
:i/pullup-20 pullup-20
|
||||
:i/dropdown-12 dropdown-12
|
||||
:i/pullup-12 pullup-12
|
||||
:i/contact-12 contact-12
|
||||
:i/contact-20 contact-20
|
||||
:i/verified-20 verified-20
|
||||
:i/untrustworthy-20 untrustworthy-20})
|
||||
{:i/clear-20 clear-20
|
||||
:i/dropdown-20 dropdown-20
|
||||
:i/pullup-20 pullup-20
|
||||
:i/dropdown-12 dropdown-12
|
||||
:i/pullup-12 pullup-12
|
||||
:i/contact-12 contact-12})
|
||||
|
||||
(defn- append-to-keyword
|
||||
[k & xs]
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
(case k
|
||||
:success (colors/resolve-color :success theme)
|
||||
:error (colors/resolve-color :danger theme)
|
||||
:warning (colors/resolve-color :warning theme)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||
|
||||
(defn view-internal
|
||||
|
||||
@@ -61,10 +61,14 @@
|
||||
value (reagent/atom "")
|
||||
focused? (atom false)]
|
||||
(fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens
|
||||
on-detect-address address-regex valid-ens-or-address?]}]
|
||||
on-detect-address
|
||||
ens-regex address-regex
|
||||
valid-ens-or-address?]}]
|
||||
(let [on-change (fn [text]
|
||||
(when (not= @value text)
|
||||
(let [address? (when address-regex
|
||||
(let [ens? (when ens-regex
|
||||
(boolean (re-matches ens-regex text)))
|
||||
address? (when address-regex
|
||||
(boolean (re-matches address-regex text)))]
|
||||
(if (> (count text) 0)
|
||||
(reset! status :typing)
|
||||
@@ -72,9 +76,9 @@
|
||||
(reset! value text)
|
||||
(when on-change-text
|
||||
(on-change-text text))
|
||||
(when (and on-detect-ens (> (count text) 0))
|
||||
(when (and ens? on-detect-ens)
|
||||
(reset! status :loading)
|
||||
(on-detect-ens text #(reset! status :typing)))
|
||||
(on-detect-ens text))
|
||||
(when (and address? on-detect-address)
|
||||
(reset! status :loading)
|
||||
(on-detect-address text)))))
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
(ns quo.components.ios.drawer-bar.style
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme :as theme]))
|
||||
|
||||
(def handle-container
|
||||
{:padding-vertical 8
|
||||
:height 20
|
||||
:align-items :center})
|
||||
|
||||
(defn handle
|
||||
[{:keys [theme]}]
|
||||
{:width 32
|
||||
:height 4
|
||||
:background-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:opacity (theme/theme-value 0.05 0.1 theme)
|
||||
:border-radius 100})
|
||||
@@ -1,12 +0,0 @@
|
||||
(ns quo.components.ios.drawer-bar.view
|
||||
(:require
|
||||
[quo.components.ios.drawer-bar.style :as style]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn- view-internal
|
||||
[props]
|
||||
[rn/view {:style style/handle-container}
|
||||
[rn/view {:style (style/handle props)}]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
@@ -13,7 +13,7 @@
|
||||
(h/render [account/view])
|
||||
(h/fire-event :on-press-in (h/get-by-label-text :container))
|
||||
(h/wait-for #(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor (colors/resolve-color :blue :light 5)})))
|
||||
{:backgroundColor (colors/custom-color :blue 50 5)})))
|
||||
|
||||
(h/test "on-press-in changes state to :pressed with blur? enabled"
|
||||
(h/render [account/view {:blur? true}])
|
||||
@@ -21,26 +21,31 @@
|
||||
(h/wait-for #(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor colors/white-opa-5})))
|
||||
|
||||
(h/test "render with state :active"
|
||||
(h/render [account/view {:state :active}])
|
||||
(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor (colors/resolve-color :blue :light 10)}))
|
||||
(h/test "on-press-out changes state to :active"
|
||||
(h/render [account/view])
|
||||
(h/fire-event :on-press-in (h/get-by-label-text :container))
|
||||
(h/fire-event :on-press-out (h/get-by-label-text :container))
|
||||
(h/wait-for #(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor (colors/custom-color :blue 50 10)})))
|
||||
|
||||
(h/test "render with state :active and blur? enabled"
|
||||
(h/render [account/view
|
||||
{:blur? true
|
||||
:state :active}])
|
||||
(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor colors/white-opa-10}))
|
||||
(h/test "on-press-out changes state to :active with blur? enabled"
|
||||
(h/render [account/view {:blur? true}])
|
||||
(h/fire-event :on-press-in (h/get-by-label-text :container))
|
||||
(h/fire-event :on-press-out (h/get-by-label-text :container))
|
||||
(h/wait-for #(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor colors/white-opa-10})))
|
||||
|
||||
(h/test "render with state :selected"
|
||||
(h/render [account/view {:state :selected}])
|
||||
(h/is-truthy (h/query-by-label-text :check-icon)))
|
||||
(h/test "on-press-out changes state to :selected"
|
||||
(h/render [account/view {:selectable? true}])
|
||||
(h/fire-event :on-press-in (h/get-by-label-text :container))
|
||||
(h/fire-event :on-press-out (h/get-by-label-text :container))
|
||||
(h/wait-for #(h/is-truthy (h/query-by-label-text :check-icon))))
|
||||
|
||||
(h/test "calls on-press"
|
||||
(h/test "on-press-out calls on-press"
|
||||
(let [on-press (h/mock-fn)]
|
||||
(h/render [account/view {:on-press on-press}])
|
||||
(h/fire-event :on-press (h/get-by-label-text :container))
|
||||
(h/fire-event :on-press-in (h/get-by-label-text :container))
|
||||
(h/fire-event :on-press-out (h/get-by-label-text :container))
|
||||
(h/was-called on-press)))
|
||||
|
||||
(h/test "renders token props if type :tag"
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(defn- background-color
|
||||
[{:keys [state pressed? blur? customization-color]}]
|
||||
(cond (or pressed? (= state :selected))
|
||||
(if blur? colors/white-opa-5 (colors/resolve-color customization-color :light 5))
|
||||
[{:keys [state blur? customization-color]}]
|
||||
(cond (or (= state :pressed) (= state :selected))
|
||||
(if blur? colors/white-opa-5 (colors/custom-color customization-color 50 5))
|
||||
(= state :active)
|
||||
(if blur? colors/white-opa-10 (colors/resolve-color customization-color :light 10))
|
||||
(and pressed? blur?) colors/white-opa-10
|
||||
(if blur? colors/white-opa-10 (colors/custom-color customization-color 50 10))
|
||||
(and (= state :pressed) blur?) colors/white-opa-10
|
||||
:else :transparent))
|
||||
|
||||
(defn container
|
||||
|
||||
@@ -94,42 +94,62 @@
|
||||
[icon/icon :i/check
|
||||
{:color (if blur?
|
||||
colors/white
|
||||
(colors/resolve-color customization-color theme))}]])
|
||||
(colors/theme-colors (colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
theme))}]])
|
||||
|
||||
(defn- internal-view
|
||||
[_]
|
||||
(let [pressed? (reagent/atom false)
|
||||
on-press-in #(reset! pressed? true)
|
||||
on-press-out #(reset! pressed? false)]
|
||||
(fn [{:keys [type state blur? customization-color on-press]
|
||||
(defn- f-internal-view
|
||||
[]
|
||||
(let [state (reagent/atom :default)
|
||||
active-or-selected? (atom false)
|
||||
timer (atom nil)
|
||||
on-press-in (fn []
|
||||
(when-not (= @state :selected)
|
||||
(reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
|
||||
(fn [{:keys [type selectable? blur? customization-color on-press]
|
||||
:or {customization-color :blue
|
||||
type :default
|
||||
state :default
|
||||
blur? false}
|
||||
:as props}]
|
||||
[rn/pressable
|
||||
{:style (style/container
|
||||
{:state state
|
||||
:blur? blur?
|
||||
:customization-color customization-color
|
||||
:pressed? @pressed?})
|
||||
:on-press-in on-press-in
|
||||
:on-press on-press
|
||||
:on-press-out on-press-out
|
||||
:accessibility-label :container}
|
||||
[account-view props]
|
||||
[rn/view {:style (when (= type :tag) style/token-tag-container)}
|
||||
(cond
|
||||
(#{:balance-neutral :balance-negative :balance-positive} type)
|
||||
[balance-view props]
|
||||
(let [on-press-out (fn []
|
||||
(let [new-state (if @active-or-selected?
|
||||
:default
|
||||
(if (and (= type :default) selectable?)
|
||||
:selected
|
||||
:active))]
|
||||
(when @timer (js/clearTimeout @timer))
|
||||
(reset! timer nil)
|
||||
(reset! active-or-selected? (or (= new-state :active)
|
||||
(= new-state :selected)))
|
||||
(reset! state new-state)
|
||||
(when on-press
|
||||
(on-press))))]
|
||||
(rn/use-effect
|
||||
#(cond (and selectable? (= type :default) (= @state :active)) (reset! state :selected)
|
||||
(and (not selectable?) (= type :default) (= @state :selected)) (reset! state :active))
|
||||
[selectable?])
|
||||
[rn/pressable
|
||||
{:style (style/container
|
||||
{:state @state :blur? blur? :customization-color customization-color})
|
||||
:on-press-in on-press-in
|
||||
:on-press-out on-press-out
|
||||
:accessibility-label :container}
|
||||
[account-view props]
|
||||
[rn/view {:style (when (= type :tag) style/token-tag-container)}
|
||||
(when (or (= type :balance-neutral)
|
||||
(= type :balance-negative)
|
||||
(= type :balance-positive))
|
||||
[balance-view props])
|
||||
(when (= type :tag)
|
||||
[token-tag props])
|
||||
(when (= type :action)
|
||||
[options-button props])
|
||||
(when (and (= type :default)
|
||||
(= @state :selected))
|
||||
[check-icon props])]]))))
|
||||
|
||||
(= type :tag)
|
||||
[token-tag props]
|
||||
|
||||
(= type :action)
|
||||
[options-button props]
|
||||
|
||||
(and (= type :default) (= state :selected))
|
||||
[check-icon props])]])))
|
||||
(defn- internal-view
|
||||
[props]
|
||||
[:f> f-internal-view props])
|
||||
|
||||
(def view (quo.theme/with-theme internal-view))
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
[{:keys [theme address networks blur?]}]
|
||||
[rn/view {:style style/left-container}
|
||||
[wallet-user-avatar/wallet-user-avatar
|
||||
{:size :size-32
|
||||
:full-name "0 x"
|
||||
{:size :medium
|
||||
:f-name "0"
|
||||
:l-name "x"
|
||||
:monospace? true
|
||||
:lowercase? true
|
||||
:neutral? true}]
|
||||
:uppercase? false}]
|
||||
[rn/view {:style style/account-container}
|
||||
[text/text {:size :paragraph-1}
|
||||
(map (fn [network]
|
||||
@@ -25,8 +25,8 @@
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
:weight :semi-bold
|
||||
:style {:color (colors/resolve-color (:network-name network) theme)}}
|
||||
(str (:short-name network) ":")])
|
||||
:style {:color (colors/resolve-color network theme)}}
|
||||
(str (subs (name network) 0 3) ":")])
|
||||
networks)
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
[quo.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo.components.list-items.preview-list.properties :as properties]
|
||||
[quo.components.tags.number-tag.view :as number-tag]
|
||||
[quo.components.utilities.token.view :as token]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
@@ -32,12 +31,7 @@
|
||||
:height size
|
||||
:border-radius border-radius}}]
|
||||
|
||||
:tokens [token/view
|
||||
{:token item
|
||||
:size size
|
||||
:style {:border-radius border-radius}}]
|
||||
|
||||
(:network :dapps) [fast-image/fast-image
|
||||
(:tokens :network :dapps) [fast-image/fast-image
|
||||
{:source (or (:source item) item)
|
||||
:style {:width size
|
||||
:height size
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(ns quo.components.list-items.saved-address.view
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
|
||||
[quo.components.icon :as icon]
|
||||
[quo.components.list-items.saved-address.style :as style]
|
||||
@@ -12,23 +13,27 @@
|
||||
|
||||
(defn- left-container
|
||||
[{:keys [blur? theme name ens address customization-color]}]
|
||||
[rn/view {:style style/left-container}
|
||||
[wallet-user-avatar/wallet-user-avatar
|
||||
{:size :size-32
|
||||
:full-name name
|
||||
:customization-color customization-color}]
|
||||
[rn/view {:style style/account-container}
|
||||
[text/text
|
||||
{:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:style style/name-text}
|
||||
name]
|
||||
[text/text {:size :paragraph-2}
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :monospace
|
||||
:style (style/account-address blur? theme)}
|
||||
(or ens (address/get-shortened-key address))]]]])
|
||||
(let [names (remove string/blank? (string/split name " "))
|
||||
first-name (if (> (count names) 0) (first names) "")
|
||||
last-name (if (> (count names) 1) (last names) "")]
|
||||
[rn/view {:style style/left-container}
|
||||
[wallet-user-avatar/wallet-user-avatar
|
||||
{:size :medium
|
||||
:f-name first-name
|
||||
:l-name last-name
|
||||
:customization-color customization-color}]
|
||||
[rn/view {:style style/account-container}
|
||||
[text/text
|
||||
{:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:style style/name-text}
|
||||
name]
|
||||
[text/text {:size :paragraph-2}
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :monospace
|
||||
:style (style/account-address blur? theme)}
|
||||
(or ens (address/get-shortened-key address))]]]]))
|
||||
|
||||
(defn- internal-view
|
||||
[]
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(def props
|
||||
{:token :snt
|
||||
{:token (resources/get-token :snt)
|
||||
:state :default
|
||||
:label "Status"
|
||||
:networks [(resources/get-network :ethereum)]
|
||||
|
||||
@@ -26,23 +26,21 @@
|
||||
|
||||
(def info
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:width "70%"})
|
||||
:align-items :center})
|
||||
|
||||
(def token-info
|
||||
{:height 40
|
||||
:flex 1})
|
||||
{:height 40})
|
||||
|
||||
(def token-image
|
||||
{:border-width 1
|
||||
:border-radius 16
|
||||
:border-color colors/neutral-80-opa-5
|
||||
:margin-right 8
|
||||
:background-color colors/neutral-80-opa-5})
|
||||
{:width 32
|
||||
:height 32
|
||||
:border-width 1
|
||||
:border-radius 16
|
||||
:border-color colors/neutral-80-opa-5
|
||||
:margin-right 8})
|
||||
|
||||
(def values-container
|
||||
{:align-items :flex-end
|
||||
:max-width "30%"})
|
||||
{:align-items :flex-end})
|
||||
|
||||
(defn fiat-value
|
||||
[theme]
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
[quo.components.list-items.preview-list.view :as preview-list]
|
||||
[quo.components.list-items.token-network.style :as style]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.utilities.token.view :as token]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
@@ -12,20 +11,15 @@
|
||||
(defn- info
|
||||
[{:keys [token label networks]}]
|
||||
[rn/view {:style style/info}
|
||||
(when token
|
||||
[token/view
|
||||
{:style style/token-image
|
||||
:size :size-32
|
||||
:token token}])
|
||||
[rn/image
|
||||
{:source (or (:source token) token)
|
||||
:style style/token-image}]
|
||||
[rn/view {:style style/token-info}
|
||||
[text/text
|
||||
{:weight :semi-bold
|
||||
:number-of-lines 1}
|
||||
(if-not (empty? label) label "-")]
|
||||
[text/text {:weight :semi-bold} label]
|
||||
[preview-list/view
|
||||
{:type :network
|
||||
:size :size-14
|
||||
:number (count networks)}
|
||||
:number 3}
|
||||
networks]]])
|
||||
|
||||
(defn- values
|
||||
@@ -36,14 +30,12 @@
|
||||
:accessibility-label :check-icon}]
|
||||
[rn/view {:style style/values-container}
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:number-of-lines 1}
|
||||
{:weight :medium
|
||||
:size :paragraph-2}
|
||||
token-value]
|
||||
[text/text
|
||||
{:style (style/fiat-value theme)
|
||||
:size :paragraph-2
|
||||
:number-of-lines 1}
|
||||
{:style (style/fiat-value theme)
|
||||
:size :paragraph-2}
|
||||
fiat-value]]))
|
||||
|
||||
(defn- view-internal
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
(ns quo.components.list-items.token-value.view
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[quo.components.icon :as icon]
|
||||
[quo.components.list-items.token-value.style :as style]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.utilities.token.view :as token]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.foundations.common :as common]
|
||||
[quo.foundations.resources :as resources]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
@@ -12,8 +14,7 @@
|
||||
(defn- internal-view
|
||||
[]
|
||||
(let [state (reagent/atom :default)]
|
||||
(fn [{:keys [theme customization-color status token metrics? values on-press
|
||||
on-long-press]}]
|
||||
(fn [{:keys [theme customization-color status token metrics? values on-press on-long-press]}]
|
||||
(let [bg-opacity (case @state
|
||||
:active 10
|
||||
:pressed 5
|
||||
@@ -33,13 +34,16 @@
|
||||
{:style {:flex-direction :row
|
||||
:align-items :center
|
||||
:flex 1}}
|
||||
[token/view {:token (:symbol token) :size :size-32}]
|
||||
[rn/image
|
||||
{:source (resources/get-token token)
|
||||
:style {:width 32
|
||||
:height 32}}]
|
||||
[rn/view {:style {:margin-left 8}}
|
||||
[text/text {:weight :semi-bold} (:name token)]
|
||||
[text/text {:weight :semi-bold} (common/token-label token)]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
|
||||
(str crypto-value " " (:symbol token))]]]
|
||||
(str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
|
||||
[rn/view
|
||||
{:style {:align-items :flex-end
|
||||
:justify-content :space-between}}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
:blur? false
|
||||
:type :digit} 1])
|
||||
(h/is-truthy (h/query-by-label-text :text-label))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-1))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key))
|
||||
(h/was-called on-press)))
|
||||
|
||||
(h/test "Is not pressable when disabled is true"
|
||||
@@ -47,5 +47,5 @@
|
||||
:blur? false
|
||||
:type :digit} 1])
|
||||
(h/is-truthy (h/query-by-label-text :text-label))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-1))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key))
|
||||
(h/was-not-called on-press))))
|
||||
|
||||
@@ -7,11 +7,6 @@
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- label->accessibility-label
|
||||
[label]
|
||||
(let [label-name (if (keyword? label) (name label) label)]
|
||||
(keyword (str "keyboard-key-" label-name))))
|
||||
|
||||
(defn- view-internal
|
||||
[]
|
||||
(let [pressed? (reagent/atom false)]
|
||||
@@ -19,11 +14,9 @@
|
||||
(let [label-color (style/get-label-color disabled? theme blur?)
|
||||
background-color (style/toggle-background-color @pressed? blur? theme)]
|
||||
[rn/pressable
|
||||
{:accessibility-label (label->accessibility-label label)
|
||||
{:accessibility-label :keyboard-key
|
||||
:disabled (or disabled? (not label))
|
||||
:on-press (fn []
|
||||
(when on-press
|
||||
(on-press label)))
|
||||
:on-press (fn [] (on-press label))
|
||||
:on-press-in #(reset! pressed? true)
|
||||
:on-press-out #(reset! pressed? false)
|
||||
:style (style/container background-color)}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo.components.numbered-keyboard.numbered-keyboard.style)
|
||||
|
||||
(def container
|
||||
{:display :flex
|
||||
{:flex 1
|
||||
:padding-top 8
|
||||
:padding-horizontal 48})
|
||||
|
||||
|
||||
@@ -17,17 +17,13 @@
|
||||
|
||||
(defn- view-internal
|
||||
[]
|
||||
(fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
|
||||
container-style]
|
||||
:or {left-action :none}}]
|
||||
(fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
|
||||
[rn/view
|
||||
{:style (merge style/container
|
||||
container-style)}
|
||||
{:style style/container}
|
||||
(for [row-index (range 1 4)]
|
||||
^{:key row-index}
|
||||
[rn/view {:style style/row-container}
|
||||
(for [column-index (range 1 4)]
|
||||
^{:key (str row-index column-index)}
|
||||
[keyboard-item
|
||||
{:item (+ (* (dec row-index) 3) column-index)
|
||||
:type :digit
|
||||
@@ -62,10 +58,10 @@
|
||||
:theme theme}]
|
||||
(if delete-key?
|
||||
[keyboard-item
|
||||
{:item :i/backspace
|
||||
{:item :i/delete
|
||||
:type :key
|
||||
:disabled? disabled?
|
||||
:on-press on-delete
|
||||
:on-press on-press
|
||||
:blur? blur?
|
||||
:theme theme}]
|
||||
[keyboard-item])]]))
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
(ns quo.components.overlay.style
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(defn overlay-background
|
||||
[type]
|
||||
(let [background-color (case type
|
||||
:shell colors/neutral-80-opa-80-blur
|
||||
:drawer colors/neutral-100-opa-70-blur
|
||||
nil)]
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0
|
||||
:background-color background-color}))
|
||||
|
||||
(def container
|
||||
{:flex 1})
|
||||
|
||||
(def blur-container
|
||||
{:flex 1
|
||||
:background-color :transparent})
|
||||
@@ -1,20 +0,0 @@
|
||||
(ns quo.components.overlay.view
|
||||
(:require
|
||||
[quo.components.overlay.style :as style]
|
||||
[react-native.blur :as blur]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn view
|
||||
[{:keys [type]} & children]
|
||||
[rn/view {:style (style/overlay-background type)}
|
||||
(if (= type :shell)
|
||||
[blur/view
|
||||
{:blur-amount 20
|
||||
:blur-radius 25
|
||||
:blur-type :transparent
|
||||
:overlay-color :transparent
|
||||
:style style/container}
|
||||
[rn/view {:style style/blur-container}
|
||||
children]]
|
||||
[rn/view {:style style/container}
|
||||
children])])
|
||||
@@ -1,7 +1,6 @@
|
||||
(ns quo.components.settings.data-item.component-spec
|
||||
(:require
|
||||
[quo.core :as quo]
|
||||
[quo.foundations.resources :as quo.resources]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe
|
||||
@@ -10,14 +9,14 @@
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? false
|
||||
:card? true
|
||||
:label :none
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -27,14 +26,14 @@
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? false
|
||||
:card? false
|
||||
:label :none
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -45,14 +44,14 @@
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? false
|
||||
:card? true
|
||||
:label :none
|
||||
:status :default
|
||||
:size :small
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -63,14 +62,14 @@
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? false
|
||||
:card? true
|
||||
:label :none
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -81,31 +80,31 @@
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? false
|
||||
:card? true
|
||||
:label :none
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/get-by-text "Subtitle")))
|
||||
(h/is-truthy (h/get-by-text "Description")))
|
||||
|
||||
(h/test "right icon is not visible when icon-right? is false"
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? false
|
||||
:card? true
|
||||
:label :none
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
@@ -115,6 +114,7 @@
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? true
|
||||
:right-icon :i/chevron-right
|
||||
:card? true
|
||||
@@ -122,17 +122,17 @@
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/query-by-label-text :icon-right)))
|
||||
|
||||
(h/test "icon is visible when subtitle type is icon"
|
||||
(h/test "description icon is visible when description is icon"
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :icon
|
||||
:icon-right? true
|
||||
:right-icon :i/chevron-right
|
||||
:card? true
|
||||
@@ -140,17 +140,17 @@
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :icon
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/query-by-label-text :subtitle-type-icon)))
|
||||
(h/is-truthy (h/query-by-label-text :description-icon)))
|
||||
|
||||
(h/test "image is visible when subtitle type is network"
|
||||
(h/test "description image is visible when description is network"
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :network
|
||||
:icon-right? true
|
||||
:right-icon :i/chevron-right
|
||||
:card? true
|
||||
@@ -158,18 +158,17 @@
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :network
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow
|
||||
:network-image (quo.resources/get-network :ethereum)}])
|
||||
(h/is-truthy (h/query-by-label-text :subtitle-type-image)))
|
||||
:customization-color :yellow}])
|
||||
(h/is-truthy (h/query-by-label-text :description-image)))
|
||||
|
||||
(h/test "emoji is visible when subtitle type is account"
|
||||
(h/test "description emoji is visible when description is account"
|
||||
(h/render [quo/data-item
|
||||
{:on-press (h/mock-fn)
|
||||
:blur? false
|
||||
:description :account
|
||||
:icon-right? true
|
||||
:right-icon :i/chevron-right
|
||||
:card? true
|
||||
@@ -177,8 +176,7 @@
|
||||
:status :default
|
||||
:size :default
|
||||
:title "Label"
|
||||
:subtitle "Subtitle"
|
||||
:subtitle-type :account
|
||||
:subtitle "Description"
|
||||
:icon :i/placeholder
|
||||
:emoji "🎮"
|
||||
:customization-color :yellow}])
|
||||
|
||||
@@ -37,8 +37,8 @@
|
||||
:align-items :center})
|
||||
|
||||
(defn subtitle-icon-container
|
||||
[subtitle-type]
|
||||
{:margin-right (when (not= :default subtitle-type) 4)
|
||||
[description]
|
||||
{:margin-right (when (not= :default description) 4)
|
||||
:justify-content :center})
|
||||
|
||||
(defn title
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.settings.data-item.style :as style]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.foundations.resources :as quo.resources]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[utils.i18n :as i18n]))
|
||||
@@ -16,15 +17,13 @@
|
||||
[rn/view {:style (style/loading-container size blur? theme)}])
|
||||
|
||||
(defn- left-subtitle
|
||||
[{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji
|
||||
network-image]
|
||||
:or {subtitle-type :default}}]
|
||||
[{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}]
|
||||
[rn/view {:style style/subtitle-container}
|
||||
(when (not= :small size)
|
||||
[rn/view {:style (style/subtitle-icon-container subtitle-type)}
|
||||
(case subtitle-type
|
||||
[rn/view {:style (style/subtitle-icon-container description)}
|
||||
(case description
|
||||
:icon [icons/icon icon
|
||||
{:accessibility-label :subtitle-type-icon
|
||||
{:accessibility-label :description-icon
|
||||
:size 16
|
||||
:color icon-color}]
|
||||
:account [account-avatar/view
|
||||
@@ -33,8 +32,8 @@
|
||||
:emoji emoji
|
||||
:type :default}]
|
||||
:network [rn/image
|
||||
{:accessibility-label :subtitle-type-image
|
||||
:source network-image
|
||||
{:accessibility-label :description-image
|
||||
:source (quo.resources/tokens :eth)
|
||||
:style style/image}]
|
||||
nil)])
|
||||
[text/text
|
||||
@@ -59,9 +58,10 @@
|
||||
(i18n/label :t/days)])])
|
||||
|
||||
(defn- left-side
|
||||
"The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
|
||||
[{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color
|
||||
customization-color network-image emoji]
|
||||
"The description can either be given as a string `description` or a component `custom-subtitle`"
|
||||
[{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color
|
||||
customization-color
|
||||
emoji]
|
||||
:as props}]
|
||||
[rn/view {:style style/left-side}
|
||||
[left-title
|
||||
@@ -79,14 +79,13 @@
|
||||
[left-subtitle
|
||||
{:theme theme
|
||||
:size size
|
||||
:subtitle-type subtitle-type
|
||||
:description description
|
||||
:icon icon
|
||||
:icon-color icon-color
|
||||
:blur? blur?
|
||||
:subtitle subtitle
|
||||
:customization-color customization-color
|
||||
:emoji emoji
|
||||
:network-image network-image}]))])
|
||||
:emoji emoji}]))])
|
||||
|
||||
(defn- right-side
|
||||
[{:keys [label icon-right? right-icon icon-color communities-list]}]
|
||||
|
||||
@@ -17,21 +17,30 @@
|
||||
{:width size})))
|
||||
|
||||
(defn base-tag
|
||||
[{:keys [id size disabled? border-color border-width background-color on-press
|
||||
accessibility-label type labelled?]
|
||||
:or {size 32}}
|
||||
children]
|
||||
[rn/touchable-without-feedback
|
||||
(merge {:disabled disabled?
|
||||
:accessibility-label accessibility-label}
|
||||
(when on-press
|
||||
{:on-press #(on-press id)}))
|
||||
[rn/view
|
||||
{:style (merge (style-container size
|
||||
disabled?
|
||||
border-color
|
||||
border-width
|
||||
background-color
|
||||
labelled?
|
||||
type))}
|
||||
children]])
|
||||
[_]
|
||||
(fn
|
||||
[{:keys [id
|
||||
size
|
||||
disabled?
|
||||
border-color
|
||||
border-width
|
||||
background-color
|
||||
on-press
|
||||
accessibility-label
|
||||
type
|
||||
labelled?]
|
||||
:or {size 32}} children]
|
||||
[rn/touchable-without-feedback
|
||||
(merge {:disabled disabled?
|
||||
:accessibility-label accessibility-label}
|
||||
(when on-press
|
||||
{:on-press #(on-press id)}))
|
||||
[rn/view
|
||||
{:style (merge (style-container size
|
||||
disabled?
|
||||
border-color
|
||||
border-width
|
||||
background-color
|
||||
labelled?
|
||||
type))}
|
||||
children]]))
|
||||
|
||||
@@ -59,10 +59,6 @@
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})
|
||||
|
||||
(defn token-logo
|
||||
[size]
|
||||
{:border-radius (if (= size 24) 10 14)})
|
||||
|
||||
(defn circle-logo
|
||||
[size]
|
||||
(if (= size 24)
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
[quo.components.list-items.preview-list.view :as preview-list]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.context-tag.style :as style]
|
||||
[quo.components.utilities.token.view :as token]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]))
|
||||
@@ -74,7 +73,7 @@
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [theme type size state blur? customization-color profile-picture full-name users
|
||||
group-name amount token network-logo network-name networks
|
||||
group-name token-logo amount token-name network-logo network-name networks
|
||||
account-name emoji collectible collectible-name collectible-number duration container-style]
|
||||
:or {customization-color :blue
|
||||
type :default
|
||||
@@ -124,11 +123,8 @@
|
||||
[communities-tag (assoc props :channel? (= type :channel))]
|
||||
|
||||
:token
|
||||
[tag-skeleton {:theme theme :size size :text (str amount " " token)}
|
||||
[token/view
|
||||
{:style (style/token-logo size)
|
||||
:token token
|
||||
:size (if (= size 24) :size-20 :size-28)}]]
|
||||
[tag-skeleton {:theme theme :size size :text (str amount " " token-name)}
|
||||
[rn/image {:style (style/circle-logo size) :source token-logo}]]
|
||||
|
||||
:network
|
||||
[tag-skeleton {:theme theme :size size :text network-name}
|
||||
@@ -186,8 +182,9 @@
|
||||
|
||||
- `:token`
|
||||
- size
|
||||
- token-logo (valid rn/image :source value)
|
||||
- amount
|
||||
- token
|
||||
- token-name
|
||||
|
||||
- `:network`
|
||||
- size
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
(h/test "Token view render"
|
||||
(h/render [summary-tag/view
|
||||
{:type :token
|
||||
:label "1,000 SNT"
|
||||
:token :eth}])
|
||||
{:type :token
|
||||
:label "1,000 SNT"
|
||||
:image-source "path/to/token-image.png"}])
|
||||
(h/is-truthy (h/get-by-text "1,000 SNT"))))
|
||||
|
||||
@@ -24,4 +24,6 @@
|
||||
:border-radius 10})
|
||||
|
||||
(def token-image
|
||||
{:border-radius 12})
|
||||
{:width 24
|
||||
:height 24
|
||||
:border-radius 12})
|
||||
|
||||
@@ -5,13 +5,12 @@
|
||||
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.summary-tag.style :as style]
|
||||
[quo.components.utilities.token.view :as token]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn- left-view
|
||||
[{:keys [label type customization-color emoji image-source token]}]
|
||||
[{:keys [label type customization-color emoji image-source]}]
|
||||
(case type
|
||||
:account
|
||||
[account-avatar/view
|
||||
@@ -39,10 +38,9 @@
|
||||
:profile-picture image-source
|
||||
:customization-color customization-color}]
|
||||
:token
|
||||
[token/view
|
||||
{:token token
|
||||
:size :size-24
|
||||
:style style/token-image}]
|
||||
[rn/image
|
||||
{:source image-source
|
||||
:style style/token-image}]
|
||||
nil))
|
||||
|
||||
(defn- view-internal
|
||||
@@ -52,7 +50,7 @@
|
||||
should vary based on a custom color.
|
||||
- :type - :token / :user / :collectible / :saved-address / :network / :account
|
||||
- :emoji - string - emoji used for displaying account avatar
|
||||
- :image-source - resource - image to display on :network, :collectible and :user
|
||||
- :image-source - resource - image to display on :network, :collectible :user and :token
|
||||
- :theme - :light / :dark"
|
||||
[{:keys [label customization-color type theme]
|
||||
:as props
|
||||
@@ -64,7 +62,6 @@
|
||||
[text/text
|
||||
{:style (style/label type theme)
|
||||
:weight :semi-bold
|
||||
:size :heading-1}
|
||||
label]])
|
||||
:size :heading-1} label]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.base-tag :as base-tag]
|
||||
[quo.foundations.colors :as colors]
|
||||
[quo.theme]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(def themes
|
||||
@@ -66,45 +66,54 @@
|
||||
text-color)
|
||||
label])])
|
||||
|
||||
(defn tag-internal
|
||||
(defn tag
|
||||
"opts
|
||||
{:type :icon/:emoji/:label
|
||||
:label string
|
||||
:size 32/24
|
||||
:on-press fn
|
||||
:blurred? true/false
|
||||
:blurred? true/false
|
||||
:resource icon/image
|
||||
:labelled? true/false
|
||||
:disabled? true/false}
|
||||
|
||||
|
||||
opts
|
||||
- `blurred` boolean: use to determine border color if the background is blurred
|
||||
- `type` can be icon or emoji with or without a tag label
|
||||
- `labelled` boolean: is true if tag has label else false"
|
||||
[{:keys [id on-press disabled? size active accessibility-label label resource type
|
||||
labelled? blurred? icon-color theme]
|
||||
:or {size 32}}]
|
||||
(let [state (cond
|
||||
disabled? :disabled
|
||||
active :active
|
||||
:else :default)
|
||||
{:keys [border-color
|
||||
blurred-border-color
|
||||
text-color]} (get-in themes [theme state])]
|
||||
[rn/view {:style {:align-items :center}}
|
||||
[base-tag/base-tag
|
||||
{:id id
|
||||
:size size
|
||||
:border-width 1
|
||||
:border-color (if blurred?
|
||||
blurred-border-color
|
||||
border-color)
|
||||
:on-press on-press
|
||||
:accessibility-label accessibility-label
|
||||
:disabled? disabled?
|
||||
:type type
|
||||
:labelled? (if (= type :label) true labelled?)}
|
||||
[tag-resources size type resource icon-color label text-color labelled?]]]))
|
||||
|
||||
(def tag (quo.theme/with-theme tag-internal))
|
||||
[_ _]
|
||||
(fn
|
||||
[{:keys [id
|
||||
on-press
|
||||
disabled?
|
||||
size
|
||||
active
|
||||
accessibility-label
|
||||
label
|
||||
resource
|
||||
type
|
||||
labelled?
|
||||
blurred?
|
||||
icon-color
|
||||
override-theme]
|
||||
:or {size 32}}]
|
||||
(let [state (cond disabled? :disabled
|
||||
active :active
|
||||
:else :default)
|
||||
{:keys [border-color blurred-border-color text-color]}
|
||||
(get-in themes [(or override-theme (theme/get-theme)) state])]
|
||||
[rn/view {:style {:align-items :center}}
|
||||
[base-tag/base-tag
|
||||
{:id id
|
||||
:size size
|
||||
:border-width 1
|
||||
:border-color (if blurred?
|
||||
blurred-border-color
|
||||
border-color)
|
||||
:on-press on-press
|
||||
:accessibility-label accessibility-label
|
||||
:disabled? disabled?
|
||||
:type type
|
||||
:labelled? (if (= type :label) true labelled?)}
|
||||
[tag-resources size type resource icon-color label text-color labelled?]]])))
|
||||
|
||||
|
||||
@@ -34,10 +34,14 @@
|
||||
|
||||
(defn token-img
|
||||
[size]
|
||||
(case size
|
||||
:size-24 {:margin-right 6
|
||||
(condp = size
|
||||
:size-24 {:width 20
|
||||
:height 20
|
||||
:margin-right 6
|
||||
:border-radius 10}
|
||||
:size-32 {:margin-right 8
|
||||
:size-32 {:width 28
|
||||
:height 28
|
||||
:margin-right 8
|
||||
:border-radius 14}))
|
||||
|
||||
(defn label
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
[quo.components.icon :as icons]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.token-tag.style :as style]
|
||||
[quo.components.utilities.token.view :as token]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]
|
||||
@@ -15,12 +14,13 @@
|
||||
- :options - false / :add / :hold (default false)
|
||||
- :size - :size-24 / :size-32 (default :size-24)
|
||||
- :blur? - boolean (default false)
|
||||
- :theme - :light / :dark
|
||||
- :theme - :light / :dark
|
||||
- :token-img-src - token image source
|
||||
- :token-value - string - token value
|
||||
- :token-symbol - string"
|
||||
[]
|
||||
(let [container-width (reagent/atom 0)]
|
||||
(fn [{:keys [options size blur? theme token-value token-symbol]
|
||||
(fn [{:keys [options size blur? theme token-img-src token-value token-symbol]
|
||||
:or {size :size-24}}]
|
||||
[rn/view
|
||||
{:on-layout #(reset! container-width
|
||||
@@ -28,25 +28,21 @@
|
||||
[hole-view/hole-view
|
||||
{:holes (if options
|
||||
[{:x (- @container-width
|
||||
(case size
|
||||
(condp = size
|
||||
:size-24 10
|
||||
:size-32 12
|
||||
nil))
|
||||
:y (case size
|
||||
:size-32 12))
|
||||
:y (condp = size
|
||||
:size-24 -6
|
||||
:size-32 -4
|
||||
nil)
|
||||
:size-32 -4)
|
||||
:width 16
|
||||
:height 16
|
||||
:borderRadius 8}]
|
||||
[])}
|
||||
[rn/view {:style (style/container size options blur? theme)}
|
||||
[token/view
|
||||
{:style (style/token-img size)
|
||||
:token token-symbol
|
||||
:size (case size
|
||||
:size-24 :size-20
|
||||
:size-32 :size-28)}]
|
||||
[rn/view
|
||||
{:style (style/container size options blur? theme)}
|
||||
[rn/image
|
||||
{:style (style/token-img size)
|
||||
:source token-img-src}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
(ns quo.components.text-combinations.channel-name.component-spec
|
||||
(:require [quo.components.text-combinations.channel-name.view :as channel-name]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Channel name"
|
||||
(h/test "Renders Default"
|
||||
(h/render [channel-name/view {:channel-name "Test channel"}])
|
||||
(h/is-truthy (h/get-by-text "# Test channel")))
|
||||
|
||||
(h/test "Renders unlocked icon"
|
||||
(h/render [channel-name/view
|
||||
{:channel-name "Test channel"
|
||||
:unlocked? true}])
|
||||
(h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon)))
|
||||
|
||||
(h/test "Renders muted icon"
|
||||
(h/render [channel-name/view
|
||||
{:channel-name "Test channel"
|
||||
:muted? true}])
|
||||
(h/is-truthy (h/get-by-label-text :channel-name-muted-icon)))
|
||||
|
||||
(h/test "Renders muted and unlocked icon"
|
||||
(h/render [channel-name/view
|
||||
{:channel-name "Test channel"
|
||||
:muted? true
|
||||
:unlocked? true}])
|
||||
(h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon))
|
||||
(h/is-truthy (h/get-by-label-text :channel-name-muted-icon))))
|
||||
@@ -1,30 +0,0 @@
|
||||
(ns quo.components.text-combinations.channel-name.style
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(def container {:flex-direction :row})
|
||||
|
||||
(def icons-container
|
||||
{:flex-direction :row
|
||||
:padding-top 8
|
||||
:padding-bottom 4
|
||||
:margin-left 6})
|
||||
|
||||
(def icon {:width 20 :height 20})
|
||||
|
||||
(def icons-gap {:width 4})
|
||||
|
||||
(defn- blur-icon-color
|
||||
[theme]
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme))
|
||||
|
||||
(defn unlocked-icon-color
|
||||
[theme blur?]
|
||||
(if blur?
|
||||
(blur-icon-color theme)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||
|
||||
(defn muted-icon-color
|
||||
[theme blur?]
|
||||
(if blur?
|
||||
(blur-icon-color theme)
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))
|
||||
@@ -1,40 +0,0 @@
|
||||
(ns quo.components.text-combinations.channel-name.view
|
||||
(:require [quo.components.icon :as icon]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.text-combinations.channel-name.style :as style]
|
||||
[quo.theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn icons
|
||||
[{:keys [theme unlocked? muted? blur?]}]
|
||||
[rn/view {:style style/icons-container}
|
||||
(when unlocked?
|
||||
[rn/view
|
||||
{:style style/icon
|
||||
:accessibility-label :channel-name-unlocked-icon}
|
||||
[icon/icon :i/unlocked
|
||||
{:color (style/unlocked-icon-color theme blur?)
|
||||
:size 20}]])
|
||||
|
||||
(when (and unlocked? muted?)
|
||||
[rn/view {:style style/icons-gap}])
|
||||
|
||||
(when muted?
|
||||
[rn/view
|
||||
{:style style/icon
|
||||
:accessibility-label :channel-name-muted-icon}
|
||||
[icon/icon :i/muted
|
||||
{:color (style/muted-icon-color theme blur?)
|
||||
:size 20}]])])
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [unlocked? muted? channel-name] :as props}]
|
||||
[rn/view {:style style/container}
|
||||
[text/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold}
|
||||
(str "# " channel-name)]
|
||||
(when (or unlocked? muted?)
|
||||
[icons props])])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
@@ -1,51 +0,0 @@
|
||||
(ns quo.components.text-combinations.standard-title.component-spec
|
||||
(:require [quo.components.text-combinations.standard-title.view :as standard-title]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Text combinations - Standard title"
|
||||
(h/test "Default render"
|
||||
(h/render [standard-title/view {:title "This is a title"}])
|
||||
(h/is-truthy (h/get-by-text "This is a title")))
|
||||
|
||||
(h/test "Counter variant"
|
||||
(h/render [standard-title/view
|
||||
{:title "This is a title"
|
||||
:right :counter
|
||||
:counter-left 50
|
||||
:counter-right 100}])
|
||||
(h/is-truthy (h/get-by-text "50/100")))
|
||||
|
||||
(h/describe "Action variant"
|
||||
(h/test "Default render"
|
||||
(let [on-press-fn (h/mock-fn)]
|
||||
(h/render [standard-title/view
|
||||
{:title "This is a title"
|
||||
:right :action
|
||||
:on-press on-press-fn}])
|
||||
(h/is-truthy (h/get-by-text "This is a title"))))
|
||||
|
||||
(h/test "Action fired"
|
||||
(let [on-press-fn (h/mock-fn)]
|
||||
(h/render [standard-title/view
|
||||
{:title "This is a title"
|
||||
:right :action
|
||||
:on-press on-press-fn}])
|
||||
|
||||
(h/fire-event :on-press (h/get-by-label-text :standard-title-action))
|
||||
(h/was-called-times on-press-fn 1))))
|
||||
|
||||
(h/describe "Tag variant"
|
||||
(h/test "Default render"
|
||||
(h/render [standard-title/view
|
||||
{:title "This is a title"
|
||||
:right :tag}])
|
||||
(h/is-truthy (h/get-by-text "This is a title")))
|
||||
|
||||
(h/test "Tag callback fired"
|
||||
(let [on-press-fn (h/mock-fn)]
|
||||
(h/render [standard-title/view
|
||||
{:title "This is a title"
|
||||
:right :tag
|
||||
:on-press on-press-fn}])
|
||||
(h/fire-event :on-press (h/get-by-label-text :standard-title-tag))
|
||||
(h/was-called-times on-press-fn 1)))))
|
||||
@@ -1,24 +0,0 @@
|
||||
(ns quo.components.text-combinations.standard-title.style
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(def container
|
||||
{:flex-direction :row
|
||||
:justify-content :space-between})
|
||||
|
||||
(def right-container {:margin-left 20})
|
||||
|
||||
(def right-counter
|
||||
{:padding-top 12
|
||||
:padding-bottom 2})
|
||||
|
||||
(defn right-counter-text
|
||||
[blur? theme]
|
||||
{:color (if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme))})
|
||||
|
||||
(defn right-tag-icon-color
|
||||
[blur? theme]
|
||||
(if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||
@@ -1,68 +0,0 @@
|
||||
(ns quo.components.text-combinations.standard-title.view
|
||||
(:require [clojure.string :as string]
|
||||
[quo.components.buttons.button.view :as button]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.tags.tag :as tag]
|
||||
[quo.components.text-combinations.standard-title.style :as style]
|
||||
[quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[utils.number]))
|
||||
|
||||
(defn- get-counter-number
|
||||
[n]
|
||||
(let [parsed-number (utils.number/parse-int n)]
|
||||
(if (< n 10)
|
||||
(str "0" parsed-number)
|
||||
parsed-number)))
|
||||
|
||||
(defn- right-counter
|
||||
[{:keys [blur? theme counter-left counter-right]}]
|
||||
[rn/view {:style style/right-counter}
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :regular
|
||||
:style (style/right-counter-text blur? theme)}
|
||||
(str (get-counter-number counter-left)
|
||||
"/"
|
||||
(get-counter-number counter-right))]])
|
||||
|
||||
(defn- right-action
|
||||
[{:keys [customization-color on-press icon]
|
||||
:or {icon :i/placeholder}}]
|
||||
[button/button
|
||||
{:accessibility-label :standard-title-action
|
||||
:size 32
|
||||
:icon-only? true
|
||||
:customization-color customization-color
|
||||
:on-press on-press}
|
||||
icon])
|
||||
|
||||
(defn- right-tag
|
||||
[{:keys [theme blur? on-press icon label]
|
||||
:or {icon :i/placeholder}}]
|
||||
(let [labelled? (not (string/blank? label))]
|
||||
[tag/tag
|
||||
{:accessibility-label :standard-title-tag
|
||||
:size 32
|
||||
:type :icon
|
||||
:resource icon
|
||||
:on-press on-press
|
||||
:labelled? labelled?
|
||||
:label (when labelled? label)
|
||||
:blurred? blur?
|
||||
:icon-color (style/right-tag-icon-color blur? theme)}]))
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [title right] :as props}]
|
||||
[rn/view {:style style/container}
|
||||
[text/text {:size :heading-1 :weight :semi-bold}
|
||||
title]
|
||||
(when right
|
||||
[rn/view {:style style/right-container}
|
||||
(case right
|
||||
:counter [right-counter props]
|
||||
:action [right-action props]
|
||||
:tag [right-tag props]
|
||||
nil)])])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
@@ -9,8 +9,3 @@
|
||||
|
||||
(def description-description-text
|
||||
{:margin-top 8})
|
||||
|
||||
(def emoji-hash
|
||||
{:margin-top 8
|
||||
:letter-spacing 0.5
|
||||
:line-height 20.5})
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
(ns quo.components.text-combinations.username.component-spec
|
||||
(:require [quo.components.text-combinations.username.view :as username]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(defn test-all-status
|
||||
[component-to-render component-props]
|
||||
(h/test "Verified status"
|
||||
(h/render [component-to-render (assoc component-props :status :verified)])
|
||||
(h/is-truthy (h/get-by-label-text :username-status-icon)))
|
||||
|
||||
(h/test "Contact status"
|
||||
(h/render [component-to-render (assoc component-props :status :contact)])
|
||||
(h/is-truthy (h/get-by-label-text :username-status-icon)))
|
||||
|
||||
(h/test "Untrustworthy status"
|
||||
(h/render [component-to-render (assoc component-props :status :untrustworthy)])
|
||||
(h/is-truthy (h/get-by-label-text :username-status-icon)))
|
||||
|
||||
(h/test "Untrustworthy contact status"
|
||||
(h/render [component-to-render (assoc component-props :status :untrustworthy-contact)])
|
||||
(let [icons (h/get-all-by-label-text :username-status-icon)]
|
||||
(h/is-truthy (aget icons 0))
|
||||
(h/is-truthy (aget icons 1))))
|
||||
|
||||
(h/test "Blocked status"
|
||||
(h/render [component-to-render (assoc component-props :status :blocked)])
|
||||
(h/is-truthy (h/get-by-label-text :username-status-icon))))
|
||||
|
||||
(h/describe "Text combinations - Username"
|
||||
(h/test "Renders default"
|
||||
(h/render [username/view {:username "Test username"}])
|
||||
(h/is-truthy (h/get-by-text "Test username")))
|
||||
|
||||
(h/describe "Render different :name-type values"
|
||||
(h/describe "default"
|
||||
(let [props {:name-type :default
|
||||
:username "Test username"}]
|
||||
|
||||
(h/test "default render"
|
||||
(h/render [username/view props])
|
||||
(h/is-truthy (h/get-by-text "Test username")))
|
||||
|
||||
(h/describe "All status are rendered"
|
||||
(test-all-status username/view props))))
|
||||
|
||||
(h/describe "ens"
|
||||
(let [props {:name-type :ens
|
||||
:username "test-username.eth"}]
|
||||
|
||||
(h/test "no status render"
|
||||
(h/render [username/view props])
|
||||
(h/is-truthy (h/get-by-text "test-username.eth")))
|
||||
|
||||
(h/describe "All status are rendered"
|
||||
(test-all-status username/view props))))
|
||||
|
||||
(h/describe "nickname"
|
||||
(let [props {:name-type :nickname
|
||||
:username "Nickname"
|
||||
:name "Real name"}]
|
||||
|
||||
(h/test "no status render"
|
||||
(h/render [username/view props])
|
||||
(h/is-truthy (h/get-by-text "Nickname"))
|
||||
(h/is-truthy (h/get-by-text "Real name")))
|
||||
|
||||
(h/describe "All status are rendered"
|
||||
(test-all-status username/view props))))))
|
||||
@@ -1,30 +0,0 @@
|
||||
(ns quo.components.text-combinations.username.style
|
||||
(:require [quo.foundations.colors :as colors]))
|
||||
|
||||
(def container
|
||||
{:flex-direction :row
|
||||
:height 32})
|
||||
|
||||
(def username-text-container
|
||||
{:flex-direction :row
|
||||
:align-items :flex-end})
|
||||
|
||||
(defn real-name-text
|
||||
[theme blur?]
|
||||
{:color (if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
(colors/theme-colors colors/neutral-60 colors/neutral-40 theme))})
|
||||
|
||||
(defn real-name-dot
|
||||
[theme blur?]
|
||||
(assoc (real-name-text theme blur?) :margin-horizontal 6))
|
||||
|
||||
(defn status-icon-container
|
||||
[name-type status]
|
||||
(cond-> {:flex-direction :row
|
||||
:margin-left 4}
|
||||
(#{:default :ens} name-type) (assoc :margin-top 8
|
||||
:margin-bottom 4)
|
||||
(= :nickname name-type) (assoc :margin-top 10
|
||||
:margin-bottom 2)
|
||||
(= status :untrustworthy-contact) (assoc :margin-right 2)))
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user