Fix input padding & add blur and override-theme properties
Add with-let formatting style
This commit is contained in:
Ulises Manuel Cárdenas
GitHub
parent
74da82c61a
commit
0e36190516
|
|
@ -30,6 +30,7 @@
|
|||
"list-comp" :binding
|
||||
"defview" :arg1-body
|
||||
"letsubs" :binding
|
||||
"with-let" "let"
|
||||
"testing" :arg1-body
|
||||
"deftest-sub" :arg1-body
|
||||
"wait-for" :arg1-body
|
||||
|
|
|
|||
|
|
@ -2,82 +2,63 @@
|
|||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def variants-colors
|
||||
"Colors that keep the same across input's status change"
|
||||
{:light {:label colors/neutral-50
|
||||
:icon colors/neutral-50
|
||||
:cursor (colors/custom-color :blue 50)
|
||||
:button-border colors/neutral-30
|
||||
:clear-icon colors/neutral-40
|
||||
:password-icon colors/neutral-50}
|
||||
:light-blur {:label colors/neutral-80-opa-40
|
||||
:icon colors/neutral-80-opa-70
|
||||
:cursor (colors/custom-color :blue 50)
|
||||
:button-border colors/neutral-80-opa-30
|
||||
:password-icon colors/neutral-100
|
||||
:clear-icon colors/neutral-80-opa-30}
|
||||
:dark {:label colors/neutral-40
|
||||
:icon colors/neutral-40
|
||||
:cursor (colors/custom-color :blue 60)
|
||||
:button-border colors/neutral-70
|
||||
:password-icon colors/white
|
||||
:clear-icon colors/neutral-60}
|
||||
:dark-blur {:label colors/white-opa-40
|
||||
:icon colors/white-opa-70
|
||||
:cursor colors/white
|
||||
:button-border colors/white-opa-10
|
||||
:password-icon colors/white
|
||||
:clear-icon colors/white-opa-10}})
|
||||
(defn variants-colors
|
||||
[blur? override-theme]
|
||||
(if blur?
|
||||
{:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
|
||||
:button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-100 colors/white override-theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
|
||||
:cursor (colors/theme-colors (colors/custom-color :blue 50)
|
||||
colors/white
|
||||
override-theme)}
|
||||
{:label (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
|
||||
:icon (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
|
||||
:button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme)
|
||||
:cursor (colors/theme-colors (colors/custom-color :blue 50)
|
||||
(colors/custom-color :blue 60)
|
||||
override-theme)}))
|
||||
|
||||
(def status-colors
|
||||
{:light {:default {:border-color colors/neutral-20
|
||||
:placeholder colors/neutral-40
|
||||
:text colors/neutral-100}
|
||||
:focus {:border-color colors/neutral-40
|
||||
:placeholder colors/neutral-30
|
||||
:text colors/neutral-100}
|
||||
:error {:border-color colors/danger-opa-40
|
||||
:placeholder colors/neutral-40
|
||||
:text colors/neutral-100}
|
||||
:disabled {:border-color colors/neutral-20
|
||||
:placeholder colors/neutral-40
|
||||
:text colors/neutral-40}}
|
||||
:light-blur {:default {:border-color colors/neutral-80-opa-10
|
||||
:placeholder colors/neutral-80-opa-40
|
||||
:text colors/neutral-100}
|
||||
:focus {:border-color colors/neutral-80-opa-20
|
||||
:placeholder colors/neutral-80-opa-20
|
||||
:text colors/neutral-100}
|
||||
:error {:border-color colors/danger-opa-40
|
||||
:placeholder colors/neutral-80-opa-40
|
||||
:text colors/neutral-100}
|
||||
:disabled {:border-color colors/neutral-80-opa-10
|
||||
:placeholder colors/neutral-80-opa-30
|
||||
:text colors/neutral-80-opa-30}}
|
||||
:dark {:default {:border-color colors/neutral-80
|
||||
:placeholder colors/neutral-50
|
||||
:text colors/white}
|
||||
:focus {:border-color colors/neutral-60
|
||||
:placeholder colors/neutral-60
|
||||
:text colors/white}
|
||||
:error {:border-color colors/danger-opa-40
|
||||
:placeholder colors/white-opa-40
|
||||
:text colors/white}
|
||||
:disabled {:border-color colors/neutral-80
|
||||
:placeholder colors/neutral-40
|
||||
:text colors/neutral-40}}
|
||||
:dark-blur {:default {:border-color colors/white-opa-10
|
||||
:placeholder colors/white-opa-40
|
||||
:text colors/white}
|
||||
:focus {:border-color colors/white-opa-40
|
||||
:placeholder colors/white-opa-20
|
||||
:text colors/white}
|
||||
:error {:border-color colors/danger-opa-40
|
||||
:placeholder colors/white-opa-40
|
||||
:text colors/white}
|
||||
:disabled {:border-color colors/white-opa-10
|
||||
:placeholder colors/white-opa-20
|
||||
:text colors/white-opa-20}}})
|
||||
(defn status-colors
|
||||
[status blur? override-theme]
|
||||
(if blur?
|
||||
(case status
|
||||
:focus
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:error
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:disabled
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)}
|
||||
;; :default
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)})
|
||||
(case status
|
||||
:focus
|
||||
{:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:error
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:disabled
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)}
|
||||
;; :default
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)})))
|
||||
|
||||
(defn input-container
|
||||
[colors-by-status small? disabled?]
|
||||
|
|
@ -91,7 +72,6 @@
|
|||
(defn left-icon-container
|
||||
[small?]
|
||||
{:margin-left (if small? 0 4)
|
||||
:margin-right (if small? 4 8)
|
||||
:margin-top (if small? 5 9)
|
||||
:height 20
|
||||
:width 20})
|
||||
|
|
@ -106,7 +86,8 @@
|
|||
(merge (text/text-style {:size :paragraph-1 :weight :regular})
|
||||
{:flex 1
|
||||
:text-align-vertical :top
|
||||
:padding-horizontal 0
|
||||
:padding-right 0
|
||||
:padding-left (if small? 4 8)
|
||||
:padding-vertical (if small? 4 8)
|
||||
:color (:text colors-by-status)}
|
||||
(when-not multiple-lines?
|
||||
|
|
|
|||
|
|
@ -24,31 +24,31 @@
|
|||
count-text]]]))
|
||||
|
||||
(defn- left-accessory
|
||||
[{:keys [variant-colors small icon-name]}]
|
||||
[rn/view {:style (style/left-icon-container small)}
|
||||
[{:keys [variant-colors small? icon-name]}]
|
||||
[rn/view {:style (style/left-icon-container small?)}
|
||||
[icon/icon icon-name (style/icon variant-colors)]])
|
||||
|
||||
(defn- right-accessory
|
||||
[{:keys [variant-colors small disabled on-press icon-style-fn icon-name]}]
|
||||
[{:keys [variant-colors small? disabled? on-press icon-style-fn icon-name]}]
|
||||
[rn/touchable-opacity
|
||||
{:style (style/right-icon-touchable-area small)
|
||||
:disabled disabled
|
||||
{:style (style/right-icon-touchable-area small?)
|
||||
:disabled disabled?
|
||||
:on-press on-press}
|
||||
[icon/icon icon-name (icon-style-fn variant-colors)]])
|
||||
|
||||
(defn- right-button
|
||||
[{:keys [variant-colors colors-by-status small disabled on-press text]}]
|
||||
[{:keys [variant-colors colors-by-status small? disabled? on-press text]}]
|
||||
[rn/touchable-opacity
|
||||
{:style (style/button variant-colors small)
|
||||
:disabled disabled
|
||||
{:style (style/button variant-colors small?)
|
||||
:disabled disabled?
|
||||
:on-press on-press}
|
||||
[rn/text {:style (style/button-text colors-by-status)}
|
||||
text]])
|
||||
|
||||
(def ^:private custom-props
|
||||
"Custom properties that must be removed from properties map passed to InputText."
|
||||
[:type :variant :error :right-icon :left-icon :disabled :small :button :label
|
||||
:char-limit :on-char-limit-reach :icon-name])
|
||||
[:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
|
||||
:label :char-limit :on-char-limit-reach :icon-name :multiline?])
|
||||
|
||||
(defn- base-input
|
||||
[{:keys [on-change-text on-char-limit-reach]}]
|
||||
|
|
@ -67,16 +67,15 @@
|
|||
(reset! char-count amount-chars)
|
||||
(when (>= amount-chars char-limit)
|
||||
(on-char-limit-reach amount-chars))))]
|
||||
(fn [{:keys [variant error right-icon left-icon disabled small button label char-limit
|
||||
multiline clearable]
|
||||
:or {variant :light}
|
||||
(fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
|
||||
label char-limit multiline? clearable?]
|
||||
:as props}]
|
||||
(let [status-path (cond
|
||||
disabled :disabled
|
||||
error :error
|
||||
(let [status-kw (cond
|
||||
disabled? :disabled
|
||||
error? :error
|
||||
:else @status)
|
||||
colors-by-status (get-in style/status-colors [variant status-path])
|
||||
variant-colors (style/variants-colors variant)
|
||||
colors-by-status (style/status-colors status-kw blur? override-theme)
|
||||
variant-colors (style/variants-colors blur? override-theme)
|
||||
clean-props (apply dissoc props custom-props)]
|
||||
[rn/view
|
||||
(when (or label char-limit)
|
||||
|
|
@ -85,38 +84,39 @@
|
|||
:label label
|
||||
:current-chars @char-count
|
||||
:char-limit char-limit}])
|
||||
[rn/view {:style (style/input-container colors-by-status small disabled)}
|
||||
[rn/view {:style (style/input-container colors-by-status small? disabled?)}
|
||||
(when-let [{:keys [icon-name]} left-icon]
|
||||
[left-accessory
|
||||
{:variant-colors variant-colors
|
||||
:small small
|
||||
:small? small?
|
||||
:icon-name icon-name}])
|
||||
[rn/text-input
|
||||
(cond-> {:style (style/input colors-by-status small @multiple-lines?)
|
||||
(cond-> {:style (style/input colors-by-status small? @multiple-lines?)
|
||||
:placeholder-text-color (:placeholder colors-by-status)
|
||||
:cursor-color (:cursor variant-colors)
|
||||
:editable (not disabled)
|
||||
:editable (not disabled?)
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur}
|
||||
:always (merge clean-props)
|
||||
multiline (assoc :on-content-size-change set-multiple-lines!)
|
||||
char-limit (assoc :on-change-text #(update-char-limit! char-limit %)))]
|
||||
multiline? (assoc :multiline true
|
||||
:on-content-size-change set-multiple-lines!)
|
||||
char-limit (assoc :on-change-text #(update-char-limit! % char-limit)))]
|
||||
(when-let [{:keys [on-press icon-name style-fn]} right-icon]
|
||||
[right-accessory
|
||||
{:variant-colors variant-colors
|
||||
:small small
|
||||
:disabled disabled
|
||||
:small? small?
|
||||
:disabled? disabled?
|
||||
:icon-style-fn style-fn
|
||||
:icon-name icon-name
|
||||
:on-press (fn []
|
||||
(when clearable (reset! char-count 0))
|
||||
(when clearable? (reset! char-count 0))
|
||||
(on-press))}])
|
||||
(when-let [{:keys [on-press text]} button]
|
||||
[right-button
|
||||
{:colors-by-status colors-by-status
|
||||
:variant-colors variant-colors
|
||||
:small small
|
||||
:disabled disabled
|
||||
:small? small?
|
||||
:disabled? disabled?
|
||||
:on-press on-press
|
||||
:text text}])]]))))
|
||||
|
||||
|
|
@ -136,13 +136,14 @@
|
|||
(defn input
|
||||
"This input supports the following properties:
|
||||
- :type - Can be `:text`(default) or `:password`.
|
||||
- :variant - :light(default), :light-blur, :dark or :dark-blur.
|
||||
- :small - Boolean to specify if this input is rendered in its small version.
|
||||
- :multiline - Boolean to specify if this input support multiple lines.
|
||||
- :blur? - Boolean to set the blur color variant.
|
||||
- :override-theme - Can be `light` or `:dark`.
|
||||
- :small? - Boolean to specify if this input is rendered in its small version.
|
||||
- :multiline? - Boolean to specify if this input support multiple lines.
|
||||
- :icon-name - The name of an icon to display at the left of the input.
|
||||
- :error - Boolean to specify it this input marks an error.
|
||||
- :disabled - Boolean to specify if this input is disabled or not.
|
||||
- :clearable - Booolean to specify if this input has a clear button at the end.
|
||||
- :error? - Boolean to specify it this input marks an error.
|
||||
- :disabled? - Boolean to specify if this input is disabled or not.
|
||||
- :clearable? - Booolean to specify if this input has a clear button at the end.
|
||||
- :on-clear - Function executed when the clear button is pressed.
|
||||
- :button - Map containing `:on-press` & `:text` keys, if provided renders a button
|
||||
- :label - A label for this input.
|
||||
|
|
@ -155,12 +156,12 @@
|
|||
- :on-change-text
|
||||
...
|
||||
"
|
||||
[{:keys [type clearable on-clear on-change-text icon-name]
|
||||
[{:keys [type clearable? on-clear on-change-text icon-name]
|
||||
:or {type :text}
|
||||
:as props}]
|
||||
(let [base-props (cond-> props
|
||||
icon-name (assoc-in [:left-icon :icon-name] icon-name)
|
||||
clearable (assoc :right-icon
|
||||
clearable? (assoc :right-icon
|
||||
{:style-fn style/clear-icon
|
||||
:icon-name :i/clear
|
||||
:on-press #(when on-clear (on-clear))})
|
||||
|
|
|
|||
|
|
@ -51,11 +51,8 @@
|
|||
|
||||
(defn view
|
||||
[]
|
||||
(reagent/with-let
|
||||
[carousel-index (reagent/atom 0)
|
||||
interval-id
|
||||
(js/setInterval
|
||||
#(swap! carousel-index set-index)
|
||||
(reagent/with-let [carousel-index (reagent/atom 0)
|
||||
interval-id (js/setInterval #(swap! carousel-index set-index)
|
||||
1500)]
|
||||
[rn/view {:style style/page-container}
|
||||
[carousel @carousel-index]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
(ns status-im2.contexts.quo-preview.inputs.input
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
|
|
@ -15,31 +14,30 @@
|
|||
:value "Text"}
|
||||
{:key :password
|
||||
:value "Password"}]}
|
||||
{:label "Variant:"
|
||||
:key :variant
|
||||
{:label "Blur:"
|
||||
:key :blur?
|
||||
:type :boolean}
|
||||
{:label "Override Theme:"
|
||||
:key :override-theme
|
||||
:type :select
|
||||
:options [{:key :light
|
||||
:value "Light"}
|
||||
{:key :dark
|
||||
:options [{:key :dark
|
||||
:value "Dark"}
|
||||
{:key :light-blur
|
||||
:value "Light blur"}
|
||||
{:key :dark-blur
|
||||
:value "Dark blur"}]}
|
||||
{:key :light
|
||||
:value "Light"}]}
|
||||
{:label "Error:"
|
||||
:key :error
|
||||
:key :error?
|
||||
:type :boolean}
|
||||
{:label "Icon:"
|
||||
:key :icon-name
|
||||
:type :boolean}
|
||||
{:label "Disabled:"
|
||||
:key :disabled
|
||||
:key :disabled?
|
||||
:type :boolean}
|
||||
{:label "Clearable:"
|
||||
:key :clearable
|
||||
:key :clearable?
|
||||
:type :boolean}
|
||||
{:label "Small:"
|
||||
:key :small
|
||||
:key :small?
|
||||
:type :boolean}
|
||||
{:label "Multiline:"
|
||||
:key :multiline
|
||||
|
|
@ -66,7 +64,8 @@
|
|||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:type :text
|
||||
:variant :light-blur
|
||||
:blur false
|
||||
:override-theme nil
|
||||
:placeholder "Type something"
|
||||
:error false
|
||||
:icon-name false
|
||||
|
|
@ -75,12 +74,7 @@
|
|||
:on-char-limit-reach #(js/alert
|
||||
(str "Char limit reached: " %))})]
|
||||
(fn []
|
||||
(let [background-color (case (:variant @state)
|
||||
:dark-blur "rgb(39, 61, 81)"
|
||||
:dark colors/neutral-95
|
||||
:light-blur "rgb(233,247,247)"
|
||||
:white)
|
||||
blank-label? (string/blank? (:label @state))
|
||||
(let [blank-label? (string/blank? (:label @state))
|
||||
icon? (boolean (:icon-name @state))
|
||||
button-props {:on-press #(js/alert "Button pressed!")
|
||||
:text "My button"}]
|
||||
|
|
@ -88,16 +82,16 @@
|
|||
[rn/view {:style {:padding-bottom 150}}
|
||||
[rn/view {:style {:flex 1}}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view
|
||||
[preview/blur-view
|
||||
{:style {:flex 1
|
||||
:align-items :center
|
||||
:padding-vertical 60
|
||||
:background-color background-color}}
|
||||
:margin-vertical 20}
|
||||
:show-blur-background? (:blur? @state)}
|
||||
[rn/view {:style {:width 300}}
|
||||
[quo/input
|
||||
(cond-> @state
|
||||
:always (assoc
|
||||
:on-clear #(swap! state assoc :value "")
|
||||
:on-clear? #(swap! state assoc :value "")
|
||||
:on-change-text #(swap! state assoc :value %))
|
||||
(:button @state) (assoc :button button-props)
|
||||
blank-label? (dissoc :label)
|
||||
|
|
|
|||
Loading…
Reference in New Issue