Package

purescript-react-basic-textf

Repository
j-keck/purescript-react-basic-textf
License
MIT
Uploaded by
j-keck
Published on
2020-01-24

Intro

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.

Installation

Spago

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.2.0"
  }

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

Usage

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: ./example/usage-example.png

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

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

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)

Number

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, Date or Time

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

Example

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: ./example/full-example.png

Documentation

Module documentation is published on Pursuit.

TODO’s