From 752b2d42f3e6287b4a2068170e94c255bcee18e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Moreno?= Date: Fri, 5 May 2017 12:37:17 -0300 Subject: [PATCH] don't use mask when native input number is supported our mask doesn't support decimal values. Also extend input interface to allow others values to be passed (min, max, patterns, etc) --- project.clj | 2 +- src/examples/basic/form_example.cljs | 18 +++++-- src/examples/basic/state_example.cljs | 3 +- src/om_widgets/textinput.cljs | 69 +++++++++++---------------- src/om_widgets/utils.cljs | 7 ++- 5 files changed, 53 insertions(+), 46 deletions(-) diff --git a/project.clj b/project.clj index b26570a..a856a44 100644 --- a/project.clj +++ b/project.clj @@ -1,4 +1,4 @@ -(defproject org.clojars.intception/om-widgets "0.3.23" +(defproject org.clojars.intception/om-widgets "0.3.24" :description "Widgets for OM/React" :url "https://github.com/orgs/intception/" :license {:name "Eclipse Public License" diff --git a/src/examples/basic/form_example.cljs b/src/examples/basic/form_example.cljs index 8f48f19..9ec24cc 100644 --- a/src/examples/basic/form_example.cljs +++ b/src/examples/basic/form_example.cljs @@ -14,8 +14,8 @@ om/IRenderState (render-state [this state] (html - [:div.panel.sdsdpanel-default - [:div.sdpanel-body.row + [:div.panel.panel-default + [:div.panel-body.row [:div.form-group.col-lg-3] [:form.col-lg-6 @@ -32,8 +32,20 @@ :autofocus true :tabIndex 2 :input-format "numeric" + :pattern "[0-9]" + :min "18" + :max "100" :align "left" - :placeholder "Your age (numbers only)"})] + :placeholder "Adults only! (older than 18 years-old)"})] + + [:div.form-group + [:label "Decimal are supported too"] + (w/textinput app :decimal {:input-class "form-control" + :autofocus true + :input-format "numeric" + :step "0.1" + :align "left" + :placeholder "Enter a decimal number"})] [:div.form-group [:label "Email"] diff --git a/src/examples/basic/state_example.cljs b/src/examples/basic/state_example.cljs index dffa7d0..bee4649 100644 --- a/src/examples/basic/state_example.cljs +++ b/src/examples/basic/state_example.cljs @@ -3,7 +3,7 @@ (def app-state (atom - {:menu-selected :grid + {:menu-selected :form :menu-items [[{:text "Form" :id :form :url "#/form"} @@ -58,6 +58,7 @@ :tab {:selected-tab :inbox} :form {:name "" :age 25 + :decimal 1.5 :birth-date "" :hours 8 :sex :male diff --git a/src/om_widgets/textinput.cljs b/src/om_widgets/textinput.cljs index 0f81476..9517f86 100644 --- a/src/om_widgets/textinput.cljs +++ b/src/om_widgets/textinput.cljs @@ -110,7 +110,8 @@ (defn- mask-handler-selector [target owner state] (condp = (:input-format state) - "numeric" :numeric + ;; don't use custom mask if native control is supported + "numeric" (if (utils/browser-support-input-type? "number") :unmasked :numeric) "password" :unmasked nil :unmasked :mask)) @@ -410,51 +411,39 @@ "password" "password" "numeric" "number" "text") - :style {:textAlign (:align state)}} + (th/when-> (:step state) + (merge {:step (:step state)})) + + (th/when-> (:pattern state) + (merge {:pattern (:pattern state)})) + + (th/when-> (:min state) + (merge {:min (:min state)})) + + (th/when-> (:max state) + (merge {:max (:max state)})) + (th/when-> (:resize state) (merge {:resize (name (:resize state))})))))))) (defn textinput - [target path {:keys [input-class input-format multiline onBlur tabIndex autofocus - placeholder id decimals align onChange auto-complete read-only disabled onKeyPress - typing-timeout flush-on-enter onEnter hidden resize] :as opts + [target path {:keys [input-class input-format align] :as opts :or {input-class ""}}] (om/build create-textinput target - {:state {:path path - :input-class input-class - :input-format input-format - :multiline multiline - :tabIndex tabIndex - :autofocus autofocus - :placeholder placeholder - :id id - :resize resize - :hidden hidden - :disabled disabled - :typing-timeout typing-timeout - :flush-on-enter flush-on-enter - :read-only read-only - :input-mask (cond - (= input-format "numeric") "numeric" - (= input-format "integer") "numeric" - (= input-format "currency") "numeric" - (= input-format "date") date-local-mask - :else input-format) - :decimals (cond - (= input-format "currency") (if (not decimals) 2 decimals) - (= input-format "numeric") (if (not decimals) 2 decimals) - :else 0) - :currency (if (= input-format "currency") true false) - :align (or align - (cond (= input-format "numeric") "right" - (= input-format "integer") "right" - (= input-format "currency") "right" - :else "left")) - :onChange onChange - :onBlur onBlur - :onKeyPress onKeyPress - :onEnter onEnter - :auto-complete auto-complete}})) + {:state (-> opts + (merge {:path path + :input-mask (cond + (= input-format "numeric") "numeric" + (= input-format "integer") "numeric" + (= input-format "currency") "numeric" + (= input-format "date") date-local-mask + :else input-format) + :currency (if (= input-format "currency") true false) + :align (or align + (cond (= input-format "numeric") "right" + (= input-format "integer") "right" + (= input-format "currency") "right" + :else "left"))}))})) diff --git a/src/om_widgets/utils.cljs b/src/om_widgets/utils.cljs index e75072a..b062a30 100644 --- a/src/om_widgets/utils.cljs +++ b/src/om_widgets/utils.cljs @@ -55,7 +55,12 @@ (get-in tgt ks)) tgt)))) - +(defn browser-support-input-type? + "More info: http://diveintohtml5.info/detect.html#input-types" + [input-type] + (let [e (.createElement js/document "input")] + (.setAttribute e "type" input-type) + (not= "text" (.-type e)))) (defn el-data " Example: