|
6 | 6 | [quo.foundations.colors :as colors]
|
7 | 7 | [quo.theme :as quo.theme]
|
8 | 8 | [react-native.core :as rn]
|
9 |
| - [react-native.platform :as platform] |
10 |
| - [reagent.core :as reagent])) |
| 9 | + [react-native.platform :as platform])) |
11 | 10 |
|
12 | 11 | (defn remove-http-https-www
|
13 | 12 | [value]
|
|
68 | 67 | [:cursor-color :placeholder-text-color :editable :on-change-text :on-focus
|
69 | 68 | :on-blur :on-clear :value :disabled? :blur? :customization-color :theme])
|
70 | 69 |
|
71 |
| -(defn- view-internal |
72 |
| - [{:keys [default-value] |
73 |
| - :or {default-value ""}}] |
74 |
| - (let [state (reagent/atom :default) |
75 |
| - value (reagent/atom default-value) |
76 |
| - set-active #(reset! state :active) |
77 |
| - set-default #(reset! state :default) |
78 |
| - set-value #(reset! value %) |
79 |
| - ref (atom nil) |
80 |
| - clear-input (fn [] |
81 |
| - (.clear ^js @ref) |
82 |
| - (reset! value "")) |
83 |
| - focus-input (fn [] |
84 |
| - (set-active) |
85 |
| - (.focus ^js @ref))] |
86 |
| - (fn [{:keys [disabled? blur? on-change-text customization-color |
87 |
| - on-clear on-focus on-blur theme get-ref locked? |
88 |
| - favicon favicon-color favicon-size] |
89 |
| - :as props}] |
90 |
| - (let [clean-props (apply dissoc props props-to-remove)] |
91 |
| - [rn/view {:style style/root-container} |
92 |
| - (when (and (seq @value) (= @state :default)) |
93 |
| - [rn/touchable-opacity |
94 |
| - {:style style/default-container |
95 |
| - :on-press focus-input} |
96 |
| - (when favicon |
97 |
| - [icon/icon favicon |
98 |
| - {:accessibility-label :browser-input-favicon |
99 |
| - :color favicon-color |
100 |
| - :container-style style/favicon-icon-container |
101 |
| - :size favicon-size}]) |
102 |
| - [rn/text |
103 |
| - {:accessibility-label :browser-input-label |
104 |
| - :style (style/text)} (remove-http-https-www @value)] |
105 |
| - (when locked? |
106 |
| - [lock-icon |
107 |
| - {:blur? blur? |
108 |
| - :theme theme}])]) |
109 |
| - [rn/view {:style (style/active-container (or (empty? @value) (= @state :active)))} |
110 |
| - [rn/text-input |
111 |
| - (merge |
112 |
| - clean-props |
113 |
| - {:accessibility-label :browser-input |
114 |
| - :auto-capitalize :none |
115 |
| - :auto-correct false |
116 |
| - :cursor-color (cursor-color customization-color theme) |
117 |
| - :editable (not disabled?) |
118 |
| - :keyboard-appearance (colors/theme-colors :light :dark theme) |
119 |
| - :keyboard-type :web-search |
120 |
| - :on-blur (fn [] |
121 |
| - (set-default) |
122 |
| - (when on-blur (on-blur))) |
123 |
| - :on-change-text (fn [new-text] |
124 |
| - (set-value new-text) |
125 |
| - (when on-change-text (on-change-text new-text))) |
126 |
| - :on-focus (fn [] |
127 |
| - (set-active) |
128 |
| - (when on-focus (on-focus))) |
129 |
| - :placeholder-text-color (placeholder-color @state blur? theme) |
130 |
| - :ref (fn [r] |
131 |
| - (reset! ref r) |
132 |
| - (when get-ref (get-ref r))) |
133 |
| - :selection-color (when platform/ios? |
134 |
| - (cursor-color customization-color theme)) |
135 |
| - :select-text-on-focus true |
136 |
| - :style (style/input disabled?)})] |
137 |
| - (when (seq @value) |
138 |
| - [clear-button |
139 |
| - {:blur? blur? |
140 |
| - :on-press (fn [] |
141 |
| - (clear-input) |
142 |
| - (when on-clear (on-clear))) |
143 |
| - :theme theme}])]])))) |
144 |
| - |
145 |
| -(def view (quo.theme/with-theme view-internal)) |
| 70 | +(defn view |
| 71 | + [{:keys [disabled? blur? on-change-text customization-color |
| 72 | + on-clear on-focus on-blur get-ref locked? |
| 73 | + favicon favicon-color favicon-size default-value] |
| 74 | + :or {default-value ""} |
| 75 | + :as props}] |
| 76 | + (let [ref (rn/use-ref-atom nil) |
| 77 | + on-ref (rn/use-callback |
| 78 | + (fn [r] |
| 79 | + (reset! ref r) |
| 80 | + (when get-ref (get-ref r))) |
| 81 | + [get-ref]) |
| 82 | + theme (quo.theme/use-theme) |
| 83 | + [state set-state] (rn/use-state :default) |
| 84 | + [value set-value] (rn/use-state default-value) |
| 85 | + on-clear (rn/use-callback |
| 86 | + (fn [] |
| 87 | + (.clear ^js @ref) |
| 88 | + (set-value "") |
| 89 | + (when on-clear (on-clear))) |
| 90 | + [on-clear]) |
| 91 | + focus-input (rn/use-callback |
| 92 | + (fn [] |
| 93 | + (set-state :active) |
| 94 | + (.focus ^js @ref))) |
| 95 | + on-blur (rn/use-callback |
| 96 | + (fn [] |
| 97 | + (set-state :default) |
| 98 | + (when on-blur (on-blur))) |
| 99 | + [on-blur]) |
| 100 | + on-change-text (rn/use-callback |
| 101 | + (fn [new-text] |
| 102 | + (set-value new-text) |
| 103 | + (when on-change-text (on-change-text new-text))) |
| 104 | + [on-change-text]) |
| 105 | + on-focus (rn/use-callback |
| 106 | + (fn [] |
| 107 | + (set-state :active) |
| 108 | + (when on-focus (on-focus))) |
| 109 | + [on-focus]) |
| 110 | + clean-props (apply dissoc props props-to-remove)] |
| 111 | + [rn/view {:style style/root-container} |
| 112 | + (when (and (seq value) (= state :default)) |
| 113 | + [rn/touchable-opacity |
| 114 | + {:style style/default-container |
| 115 | + :on-press focus-input} |
| 116 | + (when favicon |
| 117 | + [icon/icon favicon |
| 118 | + {:accessibility-label :browser-input-favicon |
| 119 | + :color favicon-color |
| 120 | + :container-style style/favicon-icon-container |
| 121 | + :size favicon-size}]) |
| 122 | + [rn/text |
| 123 | + {:accessibility-label :browser-input-label |
| 124 | + :style (style/text)} |
| 125 | + (remove-http-https-www value)] |
| 126 | + (when locked? |
| 127 | + [lock-icon {:blur? blur? :theme theme}])]) |
| 128 | + [rn/view {:style (style/active-container (or (empty? value) (= state :active)))} |
| 129 | + [rn/text-input |
| 130 | + (merge |
| 131 | + clean-props |
| 132 | + {:accessibility-label :browser-input |
| 133 | + :auto-capitalize :none |
| 134 | + :auto-correct false |
| 135 | + :cursor-color (cursor-color customization-color theme) |
| 136 | + :editable (not disabled?) |
| 137 | + :keyboard-appearance (colors/theme-colors :light :dark theme) |
| 138 | + :keyboard-type :web-search |
| 139 | + :on-blur on-blur |
| 140 | + :on-change-text on-change-text |
| 141 | + :on-focus on-focus |
| 142 | + :placeholder-text-color (placeholder-color state blur? theme) |
| 143 | + :ref on-ref |
| 144 | + :selection-color (when platform/ios? |
| 145 | + (cursor-color customization-color theme)) |
| 146 | + :select-text-on-focus true |
| 147 | + :style (style/input disabled?)})] |
| 148 | + (when (seq value) |
| 149 | + [clear-button |
| 150 | + {:blur? blur? |
| 151 | + :on-press on-clear |
| 152 | + :theme theme}])]])) |
0 commit comments