From 7c101716d750a82f78d46b3ecfdd0fbec277fd41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Mon, 17 Apr 2023 18:27:03 -0600 Subject: [PATCH] Create search-input component (#15664) --- .../components/inputs/search_input/style.cljs | 68 ++++++++++++++ .../components/inputs/search_input/view.cljs | 89 +++++++++++++++++++ src/quo2/core.cljs | 2 + .../quo_preview/inputs/search_input.cljs | 74 +++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 4 + 5 files changed, 237 insertions(+) create mode 100644 src/quo2/components/inputs/search_input/style.cljs create mode 100644 src/quo2/components/inputs/search_input/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/inputs/search_input.cljs diff --git a/src/quo2/components/inputs/search_input/style.cljs b/src/quo2/components/inputs/search_input/style.cljs new file mode 100644 index 0000000000..6aba7d5498 --- /dev/null +++ b/src/quo2/components/inputs/search_input/style.cljs @@ -0,0 +1,68 @@ +(ns quo2.components.inputs.search-input.style + (:require [quo2.components.markdown.text :as text] + [quo2.foundations.colors :as colors])) + +(defn placeholder-color + [state blur? override-theme] + (cond + (and blur? (= state :active)) + (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme) + + blur? ; state is default + (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme) + + (= state :active) + (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme) + + :else ; Not blur and state is default + (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme))) + +(def clear-icon-container + {:justify-content :center + :align-items :center + :margin-left 8 + :height 20 + :width 20}) + +(defn clear-icon + [blur? override-theme] + (if blur? + (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme) + (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme))) + +(defn cursor + [customization-color override-theme] + (colors/theme-colors (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + override-theme)) + +(def tag-separator {:width 8}) + +(def tag-container + {:flex-direction :row + :margin-right 8}) + +(def container + {:flex 1 + :flex-direction :row + :align-items :center}) + +(def scroll-container + {:flex-direction :row + :flex 1 + :height 32}) + +(def scroll-content + {:flex-grow 1 + :align-items :center + :justify-content :flex-start}) + +(defn input-text + [disabled?] + (assoc (text/text-style {:size :paragraph-1 + :weight :regular}) + :flex 1 + :padding-vertical 5 + :min-width 120 + :opacity (if disabled? 0.3 1) + :min-height 32)) diff --git a/src/quo2/components/inputs/search_input/view.cljs b/src/quo2/components/inputs/search_input/view.cljs new file mode 100644 index 0000000000..60ee99172d --- /dev/null +++ b/src/quo2/components/inputs/search_input/view.cljs @@ -0,0 +1,89 @@ +(ns quo2.components.inputs.search-input.view + (:require [oops.core :as oops] + [quo2.components.icon :as icon] + [quo2.components.inputs.search-input.style :as style] + [react-native.core :as rn] + [reagent.core :as reagent])) + +(def ^:private tag-separator [rn/view {:style style/tag-separator}]) + +(defn- inner-tags + [tags-coll] + (into [rn/view {:style style/tag-container}] + (interpose tag-separator) + tags-coll)) + +(defn- clear-button + [{:keys [on-press blur? override-theme]}] + [rn/touchable-opacity + {:style style/clear-icon-container + :on-press on-press} + [icon/icon :i/clear + {:color (style/clear-icon blur? override-theme) + :size 20}]]) + +(defn- handle-backspace + [event ^js/Object scroll-view-ref] + (when (and (= (oops/oget event "nativeEvent.key") "Backspace") + scroll-view-ref) + (.scrollToEnd scroll-view-ref #js {:animated false}))) + +(def ^:private props-to-remove + [:cursor-color :placeholder-text-color :editable :on-change-text :on-focus + :on-blur :on-clear :value :tags :disabled? :blur? :customization-color :override-theme]) + +(defn- add-children + [text-input children] + (if (seq children) + (into text-input children) + text-input)) + +(defn search-input + [{:keys [value]}] + (let [state (reagent/atom :default) + set-active #(reset! state :active) + set-default #(reset! state :default) + scroll-view-ref (atom nil) + use-value? (boolean value)] + (fn [{:keys [value tags disabled? blur? on-change-text customization-color + on-clear on-focus on-blur override-theme] + :or {customization-color :blue} + :as props} + & children] + (let [clean-props (apply dissoc props props-to-remove)] + [rn/view {:style style/container} + [rn/scroll-view + {:ref #(reset! scroll-view-ref %) + :style style/scroll-container + :content-container-style style/scroll-content + :horizontal true + :shows-horizontal-scroll-indicator false} + (when (seq tags) + [inner-tags tags]) + + (add-children + [rn/text-input + (cond-> {:style (style/input-text disabled?) + :cursor-color (style/cursor customization-color override-theme) + :placeholder-text-color (style/placeholder-color @state blur? override-theme) + :editable (not disabled?) + :on-key-press #(handle-backspace % @scroll-view-ref) + :on-change-text (fn [new-text] + (when on-change-text + (on-change-text new-text)) + (reagent/flush)) + :on-focus (fn [] + (set-active) + (when on-focus (on-focus))) + :on-blur (fn [] + (set-default) + (when on-blur (on-blur)))} + use-value? (assoc :value value) + (seq clean-props) (merge clean-props))] + (when-not use-value? children))] + + (when (or (seq value) (seq children)) + [clear-button + {:on-press on-clear + :blur? blur? + :override-theme override-theme}])])))) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 4555507e8f..bab96729e1 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -32,6 +32,7 @@ quo2.components.info.information-box quo2.components.inputs.input.view quo2.components.inputs.profile-input.view + quo2.components.inputs.search-input.view quo2.components.inputs.title-input.view quo2.components.links.url-preview-list.view quo2.components.links.url-preview.view @@ -149,6 +150,7 @@ ;;;; INPUTS (def input quo2.components.inputs.input.view/input) +(def search-input quo2.components.inputs.search-input.view/search-input) (def profile-input quo2.components.inputs.profile-input.view/profile-input) (def title-input quo2.components.inputs.title-input.view/title-input) diff --git a/src/status_im2/contexts/quo_preview/inputs/search_input.cljs b/src/status_im2/contexts/quo_preview/inputs/search_input.cljs new file mode 100644 index 0000000000..b37f0dbd31 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/inputs/search_input.cljs @@ -0,0 +1,74 @@ +(ns status-im2.contexts.quo-preview.inputs.search-input + (:require [quo2.core :as quo] + [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.common.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "Value" + :key :value + :type :text} + {:label "Blur" + :key :blur? + :type :boolean} + {:label "Disabled" + :key :disabled? + :type :boolean} + {:label "Number of Tags" + :key :number-tags + :type :select + :options (map (fn [n] + {:key n :value (str n)}) + (range 0 5))}]) + +(defn example-tags + [blur?] + [[quo/context-tag {:blur? [blur?]} + (resources/get-mock-image :user-picture-male5) + "alisher.eth"] + [quo/context-tag {:blur? [blur?]} + (resources/get-mock-image :user-picture-male4) + "Pedro"] + [quo/context-tag {:blur? [blur?]} + (resources/get-mock-image :user-picture-female2) + "Freya Odinson"]]) + +(defn cool-preview + [] + (let [state (reagent/atom {:blur? false + :disabled? false + :number-tags 0 + :placeholder "Search..." + :value "" + :on-clear #(js/alert "Clear pressed")}) + on-change-text (fn [new-text] + (swap! state assoc :value new-text))] + (fn [] + (let [tags (take (:number-tags @state) (example-tags (:blur? @state)))] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:style {:padding-bottom 150}} + [rn/view {:style {:flex 1}} + [preview/customizer state descriptor]] + [preview/blur-view + {:style {:align-items :center + :margin-vertical 20 + :width "100%"} + :show-blur-background? (:blur? @state)} + [rn/view {:style {:width "100%"}} + [quo/search-input + (assoc @state + :tags tags + :on-change-text on-change-text)]]]]])))) + +(defn preview-search-input + [] + [rn/view + {:style {:background-color (colors/theme-colors colors/white colors/neutral-95) + :flex 1}} + [rn/flat-list + {:style {:flex 1} + :keyboardShouldPersistTaps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 31ff3d4338..086302371c 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -81,6 +81,7 @@ [status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag] [status-im2.contexts.quo-preview.title.title :as title] + [status-im2.contexts.quo-preview.inputs.search-input :as search-input] [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] @@ -180,6 +181,9 @@ {:name :profile-input :insets {:top false} :component profile-input/preview-profile-input} + {:name :search-input + :insets {:top false} + :component search-input/preview-search-input} {:name :title-input :insets {:top false} :component title-input/preview-title-input}]