Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

don't use mask when native input number is supported #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

don't use mask when native input number is supported #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion project.clj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
18 changes: 15 additions & 3 deletions src/examples/basic/form_example.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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"]
Expand Down
3 changes: 2 additions & 1 deletion src/examples/basic/state_example.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

(def app-state
(atom
{:menu-selected :grid
{:menu-selected :form
:menu-items [[{:text "Form"
:id :form
:url "#/form"}
Expand Down Expand Up @@ -58,6 +58,7 @@
:tab {:selected-tab :inbox}
:form {:name ""
:age 25
:decimal 1.5
:birth-date ""
:hours 8
:sex :male
Expand Down
69 changes: 29 additions & 40 deletions src/om_widgets/textinput.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no entiendo la utilidad de esto, en que caso el control en clojurescript precisa esta distinción?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

digamos esto no es client-side, es en los navegadores del banco digamos

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

claro, nosotros usamos los widgets desde nuestra UI, @fapenia usa su js desde el cliente

"password" :unmasked
nil :unmasked
:mask))
Expand Down Expand Up @@ -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"))}))}))
7 changes: 6 additions & 1 deletion src/om_widgets/utils.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down