status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Create search-input component (#15664)

This commit is contained in:
Ulises Manuel Cárdenas 2023-04-17 18:27:03 -06:00 committed by GitHub
parent 53cea00c67
commit 7c101716d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 237 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/quo2/components/inputs/search_input/style.cljs Normal file
View File

@ -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))

89
src/quo2/components/inputs/search_input/view.cljs Normal file
View File

@ -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}])]))))

2
src/quo2/core.cljs
View File

@ -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)

74
src/status_im2/contexts/quo_preview/inputs/search_input.cljs Normal file
View File

@ -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}]])

4
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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}]