status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
alwx 2017-06-27 23:26:46 +02:00 committed by Roman Volosovskyi
parent dde5313e94
commit 1596b61b46
16 changed files with 44 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.re-natal
View File

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

BIN
android/app/src/main/res/drawable-hdpi/icon_qr_gray.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
android/app/src/main/res/drawable-mdpi/icon_qr_gray.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
android/app/src/main/res/drawable-xhdpi/icon_qr_gray.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
android/app/src/main/res/drawable-xxhdpi/icon_qr_gray.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_qr_gray.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 917 B

21
ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/Contents.json vendored
View File

@ -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"
}
}

BIN
ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/icon_qr_gray.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

1
package.json
View File

@ -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",

30
resources/status.js
View File

@ -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) {
return ['view', options].concat(elements);
function textInput(options) {
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,

34
src/status_im/commands/utils.cljs
View File

@ -1,31 +1,29 @@
(ns status-im.commands.utils
(:require [clojure.set :as set]
[clojure.walk :as w]
[status-im.components.react :refer [text
scroll-view
view
slider
web-view
image
touchable-highlight]]
[re-frame.core :refer [dispatch trim-v debug]]
[status-im.components.react :as components]
[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.utils.handlers :refer [register-handler]]
[taoensso.timbre :as log]))
[status-im.components.qr-code :as qr]
[status-im.utils.handlers :refer [register-handler]]))
(defn json->clj [json]
(when-not (= json "undefined")
(js->clj (.parse js/JSON json) :keywordize-keys true)))
(def elements
{:text text
:view view
:slider slider
:scroll-view scroll-view
:web-view web-view
:image image
:touchable touchable-highlight
{:view components/view
:text components/text
:text-input components/text-input
:image components/image
:qr-code qr/qr-code
:linking components/linking
: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

6
src/status_im/components/image_button/view.cljs
View File

@ -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}])

6
src/status_im/components/react.cljs
View File

@ -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

67
src/status_im/components/refreshable_text/view.cljs
View File

@ -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]]]))})))

38
src/status_im/components/selectable_field/styles.cljs
View File

@ -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})))

63
src/status_im/components/selectable_field/view.cljs
View File

@ -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)))