More UI components accessible from API, ability to generate QR codes, small cleanup

.re-natal

@@ -40,8 +40,7 @@
     "react-native-autolink",
     "instabug-reactnative",
     "nfc-react-native",
-    "react-native-http-bridge",
+    "react-native-http-bridge"
-    "react-native-autogrow-textinput"
   ],
   "imageDirs": [
     "images"

ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/Contents.json

@@ -1,21 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "icon_qr_gray.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

package.json

@@ -46,7 +46,6 @@
     "react-native": "^0.43.4",
     "react-native-action-button": "^2.0.13",
     "react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix",
-    "react-native-autogrow-textinput": "^3.0.2",
     "react-native-autolink": "^0.10.0",
     "react-native-camera": "^0.9.4",
     "react-native-circle-checkbox": "github:paramoshkinandrew/ReactNativeCircleCheckbox",

resources/status.js

@@ -103,13 +103,29 @@ function call(pathStr, paramsStr) {
     return JSON.stringify(result);
 }
 
+function view(options, elements) {
+    return ['view', options].concat(elements);
+}
+
 function text(options, s) {
     s = Array.isArray(s) ? s : [s];
     return ['text', options].concat(s);
 }
 
-function view(options, elements) {
+function textInput(options) {
-    return ['view', options].concat(elements);
+    return ['text-input', options];
+}
+
+function image(options) {
+    return ['image', options];
+}
+
+function qrCode(options) {
+    return ['qr-code', options];
+}
+
+function linking(options) {
+    return ['linking', options];
 }
 
 function slider(options) {
@@ -124,6 +140,10 @@ function touchable(options, element) {
     return ['touchable', options, element];
 }
 
+function activityIndicator(options) {
+    return ['activity-indicator', options];
+}
+
 function scrollView(options, elements) {
     return ['scroll-view', options].concat(elements);
 }
@@ -199,9 +219,13 @@ var status = {
     components: {
         view: view,
         text: text,
-        slider: slider,
+        textInput: textInput,
         image: image,
+        qrCode: qrCode,
+        linking: linking,
+        slider: slider,
         touchable: touchable,
+        activityIndicator: activityIndicator,
         scrollView: scrollView,
         webView: webView,
         validationMessage: validationMessage,

src/status_im/commands/utils.cljs

@@ -1,31 +1,29 @@
 (ns status-im.commands.utils
   (:require [clojure.set :as set]
             [clojure.walk :as w]
-            [status-im.components.react :refer [text
+            [re-frame.core :refer [dispatch trim-v debug]]
-                                                scroll-view
+            [status-im.components.react :as components]
-                                                view
-                                                slider
-                                                web-view
-                                                image
-                                                touchable-highlight]]
             [status-im.chat.views.input.web-view :as chat-web-view]
             [status-im.chat.views.input.validation-messages :as chat-validation-messages]
-            [re-frame.core :refer [dispatch trim-v debug]]
+            [status-im.components.qr-code :as qr]
-            [status-im.utils.handlers :refer [register-handler]]
+            [status-im.utils.handlers :refer [register-handler]]))
-            [taoensso.timbre :as log]))
 
 (defn json->clj [json]
   (when-not (= json "undefined")
     (js->clj (.parse js/JSON json) :keywordize-keys true)))
 
 (def elements
-  {:text               text
+  {:view               components/view
-   :view               view
+   :text               components/text
-   :slider             slider
+   :text-input         components/text-input
-   :scroll-view        scroll-view
+   :image              components/image
-   :web-view           web-view
+   :qr-code            qr/qr-code
-   :image              image
+   :linking            components/linking
-   :touchable          touchable-highlight
+   :slider             components/slider
+   :scroll-view        components/scroll-view
+   :web-view           components/web-view
+   :touchable          components/touchable-highlight
+   :activity-indicator components/activity-indicator
    :bridged-web-view   chat-web-view/bridged-web-view
    :validation-message chat-validation-messages/validation-message})
 
@@ -60,7 +58,7 @@
              (update 0 get-element)
              (update 1 check-events))
 
-         :esle el))
+         :else el))
      markup)))
 
 (defn reg-handler

src/status_im/components/image_button/view.cljs

@@ -23,9 +23,3 @@
                             (label :t/scan-qr))
                  :style   st/scan-button-text
                  :handler handler}])
-
-(defn show-qr-button [{:keys [handler]}]
-  [image-button {:icon    :icon_qr_gray
-                 :value   (label :t/show-qr)
-                 :style   st/show-qr-button-text
-                 :handler handler}])

src/status_im/components/react.cljs

@@ -134,12 +134,6 @@
 
 (def swiper (adapt-class (js/require "react-native-swiper")))
 
-;; Autogrow text input
-
-(def autogrow-class (js/require "react-native-autogrow-textinput"))
-
-(def autogrow-text-input (r/adapt-react-class (.-AutoGrowingTextInput autogrow-class)))
-
 ;; Clipboard
 
 (def sharing

src/status_im/components/refreshable_text/view.cljs

@@ -1,67 +0,0 @@
-(ns status-im.components.refreshable-text.view
-  (:require [reagent.core :as r]
-            [reagent.impl.component :as rc]
-            [status-im.components.react :refer [view
-                                                animated-view
-                                                text]]
-            [status-im.components.animation :as anim]))
-
-(defn start-animation [{:keys [old-value-top
-                               new-value-top
-                               old-value-opacity
-                               new-value-opacity]}]
-  (anim/start
-    (anim/timing old-value-top {:toValue  10
-                                :duration 300}))
-  (anim/start
-    (anim/timing new-value-top {:toValue  0
-                                :duration 300}))
-  (anim/start
-    (anim/timing old-value-opacity {:toValue  0
-                                    :duration 300}))
-  (anim/start
-    (anim/timing new-value-opacity {:toValue  1.0
-                                    :duration 300})))
-
-(defn refreshable-text [{:keys [value]}]
-  (let [old-value-top     (anim/create-value 0)
-        new-value-top     (anim/create-value 0)
-        old-value-opacity (anim/create-value 0)
-        new-value-opacity (anim/create-value 1.0)
-        context           {:old-value-top     old-value-top
-                           :new-value-top     new-value-top
-                           :old-value-opacity old-value-opacity
-                           :new-value-opacity new-value-opacity}]
-    (r/create-class
-      {:get-initial-state
-       (fn []
-         {:old-value nil
-          :value     value})
-       :component-will-update
-       (fn [component props]
-         (let [{new-value :value} (rc/extract-props props)
-               {old-value :value} (r/props component)]
-           (r/set-state component {:old-value old-value
-                                   :value     new-value})
-           (anim/set-value old-value-top 0)
-           (anim/set-value new-value-top -10)
-           (anim/set-value old-value-opacity 1.0)
-           (anim/set-value new-value-opacity 0.0)
-           (start-animation context)))
-       :reagent-render
-       (fn [{:keys [style text-style font]}]
-         (let [component (r/current-component)
-               {:keys [old-value value]} (r/state component)]
-           [view style
-            [animated-view {:style {:position   :absolute
-                                    :margin-top old-value-top
-                                    :opacity    old-value-opacity}}
-             [text {:style text-style
-                    :font  font}
-              old-value]]
-            [animated-view {:style {:position   :absolute
-                                    :margin-top new-value-top
-                                    :opacity    new-value-opacity}}
-             [text {:style text-style
-                    :font  font}
-              value]]]))})))

src/status_im/components/selectable_field/styles.cljs

@@ -1,38 +0,0 @@
-(ns status-im.components.selectable-field.styles
-  (:require [status-im.utils.platform :refer [platform-specific]]
-            [status-im.components.styles :refer [text1-disabled-color]]))
-
-
-(def selectable-field-container
-  {})
-
-(def label-container
-  {:margin-bottom 13})
-
-(def label
-  {:color            "#838c93"
-   :background-color :transparent
-   :font-size        14})
-
-(def text-container
-  {:padding       0
-   :margin-bottom 18
-   :margin        0})
-
-(def text
-  {:font-size           16
-   :color               text1-disabled-color
-   :margin-right        16
-   :text-align-vertical :top})
-
-(defn sized-text
-  [height]
-  (let [{:keys [additional-height
-                margin-top]} (get-in platform-specific [:component-styles :sized-text])]
-    (merge text {:height         (+ additional-height height)
-                 :margin-bottom  0
-                 :margin-top     margin-top
-                 :padding-top    0
-                 :padding-left   0
-                 :margin-left    0
-                 :padding-bottom 0})))

src/status_im/components/selectable_field/view.cljs

@@ -1,63 +0,0 @@
-(ns status-im.components.selectable-field.view
-  (:require [status-im.components.react :refer [view
-                                                text-input
-                                                text]]
-            [reagent.core :as r]
-            [status-im.components.selectable-field.styles :as st]
-            [status-im.i18n :refer [label]]
-            [status-im.utils.platform :as p]
-            [taoensso.timbre :as log]))
-
-(defn- on-press-default
-  [event component]
-  (log/debug "Pressed " event component)
-  (r/set-state component {:focused? true}))
-
-(defn- on-selection-change
-  [event _]
-  (let [selection (.-selection (.-nativeEvent event))
-        start (.-start selection)
-        end (.-end selection)]
-    (log/debug "Selection changed: " start end)))
-
-(defn- on-layout-text
-  [event component]
-  (let [height (.-height (.-layout (.-nativeEvent event)))
-        {:keys [full-height]} (r/state component)]
-    (when (and (pos? height) (not full-height))
-      (r/set-state component {:full-height height
-                              :measured?    true}))))
-
-(defn- reagent-render
-  [{:keys [label value editable? props on-press] :as data}]
-  (let [component (r/current-component)
-        {:keys [focused? measured? full-height]} (r/state component)]
-    (log/debug "reagent-render: " data focused? measured? full-height)
-    [view st/selectable-field-container
-     [view st/label-container
-      [text {:style st/label
-             :font  :medium} (or label "")]]
-     [view st/text-container
-      (if focused?
-        [text-input {:style               (st/sized-text full-height)
-                     :multiline           true
-                     :selectTextOnFocus   true
-                     :editable            (if p/android? true editable?)
-                     :auto-focus          true
-                     :on-selection-change #(on-selection-change % component)
-                     :on-focus            #(log/debug "Focused" %)
-                     :on-blur             #(r/set-state component {:focused? false})
-                     :value               value}]
-        [text (merge {:style           st/text
-                      :on-press        (or on-press
-                                           #(on-press-default % component))
-                      :onLayout        #(on-layout-text % component)
-                      :font            :default
-                      :ellipsizeMode   :middle
-                      :number-of-lines (if measured? 1 0)} (or props {})) (or value "")])]]))
-
-(defn selectable-field [_]
-  (let [component-data {:display-name "selectable-field"
-                        :reagent-render reagent-render}]
-    (reagent.core/create-class component-data)))
-