|
| 1 | +(ns status-im.contexts.profile.edit.bio.view |
| 2 | + (:require [clojure.string :as string] |
| 3 | + [quo.core :as quo] |
| 4 | + [react-native.core :as rn] |
| 5 | + [react-native.safe-area :as safe-area] |
| 6 | + [reagent.core :as reagent] |
| 7 | + [status-im.common.validation.profile :as profile-validator] |
| 8 | + [status-im.constants :as constants] |
| 9 | + [status-im.contexts.profile.edit.bio.style :as style] |
| 10 | + [utils.debounce :as debounce] |
| 11 | + [utils.i18n :as i18n] |
| 12 | + [utils.re-frame :as rf])) |
| 13 | + |
| 14 | +(defn view |
| 15 | + [] |
| 16 | + (let [insets (safe-area/get-insets) |
| 17 | + profile (rf/sub [:profile/profile-with-image]) |
| 18 | + customization-color (rf/sub [:profile/customization-color]) |
| 19 | + profile-bio (:bio profile) |
| 20 | + unsaved-bio (reagent/atom profile-bio) |
| 21 | + error-msg (reagent/atom nil) |
| 22 | + typing? (reagent/atom false) |
| 23 | + validate-bio (debounce/debounce (fn [bio] |
| 24 | + (reset! error-msg |
| 25 | + (profile-validator/validation-bio bio)) |
| 26 | + (reset! typing? false)) |
| 27 | + 300) |
| 28 | + on-change-text (fn [s] |
| 29 | + (reset! typing? true) |
| 30 | + (reset! unsaved-bio s) |
| 31 | + (validate-bio s))] |
| 32 | + (fn [] |
| 33 | + [quo/overlay |
| 34 | + {:type :shell |
| 35 | + :container-style (style/page-wrapper insets)} |
| 36 | + [quo/page-nav |
| 37 | + {:key :header |
| 38 | + :background :blur |
| 39 | + :icon-name :i/arrow-left |
| 40 | + :on-press #(rf/dispatch [:navigate-back])}] |
| 41 | + [rn/keyboard-avoiding-view |
| 42 | + {:key :content |
| 43 | + :style style/screen-container} |
| 44 | + [rn/view {:style {:gap 22}} |
| 45 | + [quo/text-combinations {:title (i18n/label :t/bio)}] |
| 46 | + [quo/input |
| 47 | + {:theme :dark |
| 48 | + :blur? true |
| 49 | + :multiline? true |
| 50 | + :error? (not (string/blank? @error-msg)) |
| 51 | + :container-style {:margin-bottom -11} |
| 52 | + :default-value @unsaved-bio |
| 53 | + :auto-focus true |
| 54 | + :char-limit constants/profile-bio-max-length |
| 55 | + :label (i18n/label :t/profile-bio) |
| 56 | + :placeholder (i18n/label :t/something-about-you) |
| 57 | + :on-change-text on-change-text}] |
| 58 | + (when-not (string/blank? @error-msg) |
| 59 | + [quo/info-message |
| 60 | + {:type :error |
| 61 | + :size :default |
| 62 | + :icon :i/info} |
| 63 | + @error-msg])] |
| 64 | + [rn/view {:style style/button-wrapper} |
| 65 | + [quo/button |
| 66 | + {:type :primary |
| 67 | + :customization-color customization-color |
| 68 | + :on-press (fn [] |
| 69 | + (rf/dispatch [:profile/edit-bio @unsaved-bio])) |
| 70 | + :disabled? (boolean (or @typing? (not (string/blank? @error-msg))))} |
| 71 | + (i18n/label :t/save-bio)]]]]))) |
0 commit comments