This library helps you mask String
s and Float
s
string : { mask : String, replace : Char } -> String -> String
Apply a simple mask to a String
. You can customize the mask template and
which Char
to replace.
string { mask = "+1 ### ### ####", replace = '#' } "1234567890"
--> "+1 123 456 7890"
remove : { mask : String, replace : Char } -> String -> String
Remove a mask applied by string
. This is often needed if you
want to save just the value, and not the formatted/masked String
.
remove { mask = "+1 ### ### ####", replace = '#' } "+1 123 456 7890"
--> "1234567890"
remove { mask = "+1 ### ### ####", replace = '#' } "1234567890"
-->"1234567890"
When formatting with float
and floatString
, it can be useful to either use
exactly an amount of decimal digits, or just to limit it to a certain amount.
float : DecimalDigits -> { decimalSeparator : String, thousandsSeparator : String } -> Basics.Float -> String
Mask a float to have a certain amount of DecimalDigits
.
float (Precisely 2) { decimalSeparator = ".", thousandsSeparator = "" } 1234
--> "1234.00"
float (Precisely 2) { decimalSeparator = ",", thousandsSeparator = " " } 1234.5
--> "1 234,50"
float (Precisely 2) { decimalSeparator = ",", thousandsSeparator = "" } 123.4567
--> "123,45"
float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123
--> "123"
float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123.4
--> "123.4"
float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123.4567
--> "123.45"
floatString : DecimalDigits -> { decimalSeparator : String, thousandsSeparator : String } -> String -> Maybe String
Mask a float to have a certain amount of DecimalDigits
,
but using a String
as an input. This is useful for input fields, where the
onInput
event returns a String
that can be run through floatString
. In
case the input String
is not a valid Float
, this function returns Nothing
,
and an empty String
is automatically converted to 0
.
floatString (Precisely 2) { decimalSeparator = ",", thousandsSeparator = " " } "1234.5"
--> Just "1 234,50"
floatString (Precisely 2) { decimalSeparator = ".", thousandsSeparator = "," } "12a.4"
--> Nothing
floatString (Precisely 2) { decimalSeparator = ",", thousandsSeparator = "." } ""
--> Just "0,00"
Usually you'll want to use this function in your update
like this:
update msg model =
case msg of
EnteredPrice price ->
{ model
| price =
price
|> Mask.floatString (Mask.Precisely 2)
|> Maybe.withDefault model.price
}
removeFloat : { decimalSeparator : String, thousandsSeparator : String } -> String -> String
Remove a mask applied by float
or floatString
removeFloat { decimalSeparator = ",", thousandsSeparator = " " } "1 234,56"
--> "1234.56"
defaultSeparators : { decimalSeparator : String, thousandsSeparator : String }
A default value you can use for float
and floatString
.
updateFloatString : DecimalDigits -> { decimalSeparator : String, thousandsSeparator : String } -> { previousValue : String, newValue : String } -> String
Update a masked value you store in your Model
. This is useful to provide a
better UX when using masked input fields. For more details, check out
this example on GitHub
or in this Ellie link, which uses a
custom element to
make it even better!