Skip to content

Commit

Permalink
migrating to react state. step 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@flexsurfer
flexsurfer committed Feb 24, 2024
1 parent b0133e9 commit ac7c6fd
Show file tree
Hide file tree
Showing 9 changed files with 351 additions and 370 deletions.
161 changes: 84 additions & 77 deletions src/quo/components/browser/browser_input/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.platform :as platform]
[reagent.core :as reagent]))
[react-native.platform :as platform]))

(defn remove-http-https-www
[value]
Expand Down Expand Up @@ -68,78 +67,86 @@
[:cursor-color :placeholder-text-color :editable :on-change-text :on-focus
:on-blur :on-clear :value :disabled? :blur? :customization-color :theme])

(defn- view-internal
[{:keys [default-value]
:or {default-value ""}}]
(let [state (reagent/atom :default)
value (reagent/atom default-value)
set-active #(reset! state :active)
set-default #(reset! state :default)
set-value #(reset! value %)
ref (atom nil)
clear-input (fn []
(.clear ^js @ref)
(reset! value ""))
focus-input (fn []
(set-active)
(.focus ^js @ref))]
(fn [{:keys [disabled? blur? on-change-text customization-color
on-clear on-focus on-blur theme get-ref locked?
favicon favicon-color favicon-size]
:as props}]
(let [clean-props (apply dissoc props props-to-remove)]
[rn/view {:style style/root-container}
(when (and (seq @value) (= @state :default))
[rn/touchable-opacity
{:style style/default-container
:on-press focus-input}
(when favicon
[icon/icon favicon
{:accessibility-label :browser-input-favicon
:color favicon-color
:container-style style/favicon-icon-container
:size favicon-size}])
[rn/text
{:accessibility-label :browser-input-label
:style (style/text)} (remove-http-https-www @value)]
(when locked?
[lock-icon
{:blur? blur?
:theme theme}])])
[rn/view {:style (style/active-container (or (empty? @value) (= @state :active)))}
[rn/text-input
(merge
clean-props
{:accessibility-label :browser-input
:auto-capitalize :none
:auto-correct false
:cursor-color (cursor-color customization-color theme)
:editable (not disabled?)
:keyboard-appearance (colors/theme-colors :light :dark theme)
:keyboard-type :web-search
:on-blur (fn []
(set-default)
(when on-blur (on-blur)))
:on-change-text (fn [new-text]
(set-value new-text)
(when on-change-text (on-change-text new-text)))
:on-focus (fn []
(set-active)
(when on-focus (on-focus)))
:placeholder-text-color (placeholder-color @state blur? theme)
:ref (fn [r]
(reset! ref r)
(when get-ref (get-ref r)))
:selection-color (when platform/ios?
(cursor-color customization-color theme))
:select-text-on-focus true
:style (style/input disabled?)})]
(when (seq @value)
[clear-button
{:blur? blur?
:on-press (fn []
(clear-input)
(when on-clear (on-clear)))
:theme theme}])]]))))

(def view (quo.theme/with-theme view-internal))
(defn view
[{:keys [disabled? blur? on-change-text customization-color
on-clear on-focus on-blur get-ref locked?
favicon favicon-color favicon-size default-value]
:or {default-value ""}
:as props}]
(let [ref (atom nil)
on-ref (rn/use-callback
(fn [r]
(reset! ref r)
(when get-ref (get-ref r)))
[get-ref])
theme (quo.theme/use-theme)
[state set-state] (rn/use-state :default)
[value set-value] (rn/use-state default-value)
on-clear (rn/use-callback
(fn []
(.clear ^js @ref)
(set-value "")
(when on-clear (on-clear)))
[on-clear])
focus-input (rn/use-callback
(fn []
(set-state :active)
(.focus ^js @ref)))
on-blur (rn/use-callback
(fn []
(set-state :default)
(when on-blur (on-blur)))
[on-blur])
on-change-text (rn/use-callback
(fn [new-text]
(set-value new-text)
(when on-change-text (on-change-text new-text)))
[on-change-text])
on-focus (rn/use-callback
(fn []
(set-state :active)
(when on-focus (on-focus)))
[on-focus])]
(let [clean-props (apply dissoc props props-to-remove)]
[rn/view {:style style/root-container}
(when (and (seq value) (= state :default))
[rn/touchable-opacity
{:style style/default-container
:on-press focus-input}
(when favicon
[icon/icon favicon
{:accessibility-label :browser-input-favicon
:color favicon-color
:container-style style/favicon-icon-container
:size favicon-size}])
[rn/text
{:accessibility-label :browser-input-label
:style (style/text)}
(remove-http-https-www value)]
(when locked?
[lock-icon {:blur? blur? :theme theme}])])
[rn/view {:style (style/active-container (or (empty? value) (= state :active)))}
[rn/text-input
(merge
clean-props
{:accessibility-label :browser-input
:auto-capitalize :none
:auto-correct false
:cursor-color (cursor-color customization-color theme)
:editable (not disabled?)
:keyboard-appearance (colors/theme-colors :light :dark theme)
:keyboard-type :web-search
:on-blur on-blur
:on-change-text on-change-text
:on-focus on-focus
:placeholder-text-color (placeholder-color state blur? theme)
:ref on-ref
:selection-color (when platform/ios?
(cursor-color customization-color theme))
:select-text-on-focus true
:style (style/input disabled?)})]
(when (seq value)
[clear-button
{:blur? blur?
:on-press on-clear
:theme theme}])]])))
194 changes: 95 additions & 99 deletions src/quo/components/buttons/button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@
[quo.foundations.customization-colors :as customization-colors]
[quo.theme :as theme]
[react-native.blur :as blur]
[react-native.core :as rn]
[reagent.core :as reagent]))
[react-native.core :as rn]))

(defn- button-internal
(defn button
"with label
[button opts \"label\"]
opts
Expand All @@ -29,102 +28,99 @@
:theme :light/:dark
only icon
[button {:icon-only? true} :i/close-circle]"
[_ _]
(let [pressed-state? (reagent/atom false)]
(fn
[{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
customization-color theme accessibility-label icon-only? container-style inner-style
pressed? on-press-in on-press-out allow-multiple-presses?]
:or {type :primary
size 40
customization-color (if (= type :primary) :blue nil)}}
children]
(let [{:keys [icon-color background-color label-color border-color blur-type
blur-overlay-color border-radius overlay-customization-color]}
(button-properties/get-values {:customization-color customization-color
:background background
:type type
:theme theme
:pressed? (if pressed? pressed? @pressed-state?)
:icon-only? icon-only?})
icon-size (when (= 24 size) 12)]
[rn/touchable-without-feedback
{:disabled disabled?
:accessibility-label accessibility-label
:on-press-in (fn []
(reset! pressed-state? true)
(when on-press-in (on-press-in)))
:on-press-out (fn []
(reset! pressed-state? nil)
(when on-press-out (on-press-out)))
:on-press on-press
:allow-multiple-presses? allow-multiple-presses?
:on-long-press on-long-press}
[{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
customization-color accessibility-label icon-only? container-style inner-style
pressed? on-press-in on-press-out allow-multiple-presses?]
:or {type :primary
size 40
customization-color (if (= type :primary) :blue nil)}}
children]
(let [[pressed-state? set-pressed-state] (rn/use-state false)
theme (theme/use-theme-value)
{:keys [icon-color background-color label-color border-color blur-type
blur-overlay-color border-radius overlay-customization-color]}
(button-properties/get-values {:customization-color customization-color
:background background
:type type
:theme theme
:pressed? (if pressed? pressed? pressed-state?)
:icon-only? icon-only?})
icon-size (when (= 24 size) 12)]
[rn/touchable-without-feedback
{:disabled disabled?
:accessibility-label accessibility-label
:on-press-in (fn []
(set-pressed-state true)
(when on-press-in (on-press-in)))
:on-press-out (fn []
(set-pressed-state nil)
(when on-press-out (on-press-out)))
:on-press on-press
:allow-multiple-presses? allow-multiple-presses?
:on-long-press on-long-press}
[rn/view
{:style (merge
(style/shape-style-container size border-radius)
container-style)}
[rn/view
{:style (merge
(style/style-container {:size size
:disabled? disabled?
:border-radius border-radius
:background-color background-color
:border-color border-color
:icon-only? icon-only?
:icon-top icon-top
:icon-left icon-left
:icon-right icon-right})
inner-style)}
(when overlay-customization-color
[customization-colors/overlay
{:customization-color overlay-customization-color
:theme theme
:pressed? (if pressed? pressed? pressed-state?)}])
(when (= background :photo)
[blur/view
{:blur-radius 20
:blur-type blur-type
:overlay-color blur-overlay-color
:style style/blur-view}])
(when icon-top
[rn/view
{:style (merge
(style/shape-style-container size border-radius)
container-style)}
[rn/view
{:style (merge
(style/style-container {:size size
:disabled? disabled?
:border-radius border-radius
:background-color background-color
:border-color border-color
:icon-only? icon-only?
:icon-top icon-top
:icon-left icon-left
:icon-right icon-right})
inner-style)}
(when overlay-customization-color
[customization-colors/overlay
{:customization-color overlay-customization-color
:theme theme
:pressed? (if pressed? pressed? @pressed-state?)}])
(when (= background :photo)
[blur/view
{:blur-radius 20
:blur-type blur-type
:overlay-color blur-overlay-color
:style style/blur-view}])
(when icon-top
[rn/view
[quo.icons/icon icon-top
{:container-style {:margin-bottom 2}
:color icon-color
:size icon-size}]])
(when icon-left
[rn/view
{:style (style/icon-left-icon-style
{:size size
:icon-size icon-size})}
[quo.icons/icon icon-left
{:color icon-color
:size icon-size}]])
[rn/view
(cond
icon-only?
[quo.icons/icon children
{:color label-color
:size icon-size}]

(string? children)
[text/text
{:size (when (#{56 24} size) :paragraph-2)
:weight :medium
:number-of-lines 1
:style {:color label-color}}
children]
[quo.icons/icon icon-top
{:container-style {:margin-bottom 2}
:color icon-color
:size icon-size}]])
(when icon-left
[rn/view
{:style (style/icon-left-icon-style
{:size size
:icon-size icon-size})}
[quo.icons/icon icon-left
{:color icon-color
:size icon-size}]])
[rn/view
(cond
icon-only?
[quo.icons/icon children
{:color label-color
:size icon-size}]

(vector? children)
children)]
(when icon-right
[rn/view
{:style (style/icon-right-icon-style
{:size size
:icon-size icon-size})}
[quo.icons/icon icon-right
{:color icon-color
:size icon-size}]])]]]))))
(string? children)
[text/text
{:size (when (#{56 24} size) :paragraph-2)
:weight :medium
:number-of-lines 1
:style {:color label-color}}
children]

(def button (theme/with-theme button-internal))
(vector? children)
children)]
(when icon-right
[rn/view
{:style (style/icon-right-icon-style
{:size size
:icon-size icon-size})}
[quo.icons/icon icon-right
{:color icon-color
:size icon-size}]])]]]))
Loading

0 comments on commit ac7c6fd

Please sign in to comment.