Formatting Numbers or Timestamps in React-Basic can be boilerplate. This small library gives you functions to format Int, Number, Data.Time, Data.Date and Data.DateTime values.

If you use bower, use bower install purescript-react-basic-textf to install this library.

If you use spago, add this snippet to your additions section in packages.dhall:

react-basic-textf =
  { dependencies =
    [ "foreign"
    , "maybe"
    , "react-basic"
    , "unsafe-coerce"
    ]
  , repo = "https://github.com/j-keck/purescript-react-basic-textf.git"
  , version = "v0.3.0"
  }

And then use spago install react-basic-textf to install this library.

import React.Basic.DOM as R
import React.Basic.DOM.Textf as TF

example :: DateTime -> JSX
example dt = TF.textf
  [ TF.text { title: "Tooltip text"
            , style: TF.textUnderline <> R.css { color: "red" }
            } "This is a red, underlined text. "
  , TF.jsx $ R.br {}
  , TF.text' "This is a rounded Number: "
  , TF.num { precision: 2 } 49.12345679
  , TF.text' "."
  , TF.jsx $ R.br {}
  , TF.text' "This is a Date: "
  , TF.dateTime { format: [ TF.dd, TF.s ", ", TF.mmmm, TF.s " ", TF.yyyy ] } dt
  ]

see UsageExample.purs for the full code

creates the following output:

The textf :: Array Fragment -> React.Basic.JSX function takes an array of Fragments and builds a React.Basic.JSX element. You can create a Fragment from different values:

• TF.text: builds a fragment from a String
• TF.int: builds a fragment from a Int
• TF.num: build a fragment from a Number
• TF.dateTime: builds a fragment from a Data.DataTime
• TF.date: builds a fragment from a Data.Date
• TF.time: builds a fragment from a Data.Time
• TF.jsx: builds a fragment from a React.Basic.JSX (a simple wrapper)

Each of this functions expects a record which describes how the given values are formatted.

text :: { title :: String, className :: String, style :: CSS } -> String -> Fragment.

• title: Tooltip text
• className: CSS class names
• style: CSS styles (example: R.css { border: "1px solid black" } <> TF.fontBolder)

int :: { title :: String, className :: String, style :: CSS } -> Int -> Fragment.

• title: Tooltip text
• className: CSS class names
• style: CSS styles (example: R.css { border: "1px solid black" } <> TF.fontBolder)

num :: { title :: String, className :: String, style :: CSS, precission :: Int } -> Number -> Fragment.

• title: Tooltip text
• className: CSS class names
• style: CSS styles (example: R.css { border: "1px solid black" } <> TF.fontBolder)
• precission: Defines the number of digits after the decimal point.

dateTime :: { title :: String, className :: String, style :: CSS, format :: Array <DateTimeFmt> } -> DateTime -> Fragment.

date :: { title :: String, className :: String, style :: CSS, format :: Array <DateFmt> } -> Date -> Fragment.

time :: { title :: String, className :: String, style :: CSS, format :: Array <TimeFmt> } -> Time -> Fragment.

• title: Tooltip text
• className: CSS class names
• style: CSS styles (example: R.css { border: "1px solid black" } <> TF.fontBolder)
• format: Formatter rules, how the values are formatted.

Currently supported formatter rules are:

• <DateFmt> are: d, dd, ddd, dddd, m, mm, mmm, mmmm, and yyyy
• <TimeFmt> are: hh, mi and ss
• <DateTimeFmt> are: [<DateFmt>|<TimeFmt>]

  where:

  • d: Day of month - with digits
  • dd: Day of month - two digits
  • ddd: Day of month short text - like Mon, Tue, …
  • dddd: Day of month full text - like Monday, Tuesday, …
  • m: Month with digits
  • mm: Month with two digits
  • mmm: Month short text - like Jan, Feb, …
  • mmmm: Month full text - like January, February, …
  • yyyy: Year
  • hh: Hours with two digits - in 24h format
  • mi: Minutes with two digits
  • ss: Seconds with two digits

This code snippet:

let a = 3
    b = 43.1234567
    header = TF.text { style: R.css
                         { display: "block"
                         , fontSize: "xx-large"
                         , margin: "20px 0px 5px 0px"
                         }
                     }
    jsx = TF.textf
          [ header "Text / Numbers"
          , TF.text { title: "very simple!" } "a simple example: "
          , TF.int' a
          , TF.text' " * "
          , TF.num' b
          , TF.text' " = "
          , TF.num { precision: 2
                   , style: TF.fontBolder <> TF.textUnderline
                   } (toNumber a * b)
          , TF.text' "."
            -- ------------------------------------------
          , header "Time"
          , TF.text' "Current time: "
          , TF.time { format: [TF.hh, TF.s ":", TF.mi, TF.s ":", TF.ss]
                    , title: "Format: hh:mi:ss"
                    , style: R.css { fontFamily: "monospace" }
                    } $ DT.time dt
            -- ------------------------------------------
          , header "Date"
          , TF.text' "Current date: "
          , TF.date { format: [TF.dd, TF.s ".", TF.mm, TF.s ".", TF.yyyy]
                    , title: "Format: dd.mm.yyyy"
                    , style: R.css { border: "1px solid black" }
                    } $ DT.date dt

            -- ------------------------------------------
          , header "DateTime"
          , TF.dateTime { format: [ TF.s "Date: ", TF.dd, TF.s ", ", TF.mmmm, TF.s " ", TF.yyyy
                                  , TF.s " -  Time: ", TF.hh, TF.s ":", TF.mi
                                  ]
                        } dt
          ]
mount jsx

see FullExample.purs for the full code

generates the following output:

Module documentation is published on Pursuit.

• don’t use empty string if a property is missing: ./src/React/Basic/DOM/Textf/Props.purs
• add duration