@bloom-housing/ui-components 7.0.1-alpha.2 → 7.0.1-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.1-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.1-alpha.3...@bloom-housing/ui-components@7.0.1-alpha.4) (2022-10-25)
+
+
+### Features
+
+* accept only numeric values in currency field ([4638808](https://github.com/bloom-housing/bloom/commit/4638808e79d758d28f1f7befd2c77e892673374e))
+* display income currency value with commas ([343e36f](https://github.com/bloom-housing/bloom/commit/343e36f4eced424aa915c91192274c5dda65c25f))
+* remove redundant step prop from currency field ([f02556b](https://github.com/bloom-housing/bloom/commit/f02556b73416b382a822e84781e2817c0fcb2631))
+
+
+
+
+
+## [7.0.1-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.1-alpha.2...@bloom-housing/ui-components@7.0.1-alpha.3) (2022-10-24)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [7.0.1-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.1-alpha.1...@bloom-housing/ui-components@7.0.1-alpha.2) (2022-10-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "7.0.1-alpha.2",
+  "version": "7.0.1-alpha.4",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -113,5 +113,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "09c0b350d59fedfba721528289c8b666f09e240a"
+  "gitHead": "9c4fe47d6175301eec203c019b326e11e3188317"
 }

package/src/forms/Field.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { ChangeEvent, useMemo } from "react"
 import { ErrorMessage } from "../notifications/ErrorMessage"
 import { UseFormMethods, RegisterOptions } from "react-hook-form"
 
@@ -57,20 +57,41 @@ const Field = (props: FieldProps) => {
   if (props.bordered && (props.type === "radio" || props.type === "checkbox"))
     controlClasses.push("field-border")
 
-  const formatValue = () => {
+  const formatValue = (focused = false) => {
     if (props.getValues && props.setValue) {
       const currencyValue = props.getValues(props.name)
       const numericIncome = parseFloat(currencyValue)
-      if (!isNaN(numericIncome)) {
-        props.setValue(props.name, numericIncome.toFixed(2))
+
+      if (focused && currencyValue) {
+        props.setValue(props.name, parseFloat(currencyValue.replaceAll(",", "")))
+      } else if (isNaN(numericIncome)) {
+        props.setValue(props.name, "")
+      } else {
+        props.setValue(
+          props.name,
+          numericIncome.toLocaleString("en-US", { minimumFractionDigits: 2 })
+        )
       }
     }
   }
 
+  const filterNumbers = (e: ChangeEvent<HTMLInputElement>) => {
+    if (props.setValue) {
+      props.setValue(props.name, e.target.value.replace(/[a-z]|[A-Z]/g, "").match(/^\d*\.?\d?\d?/g))
+    }
+  }
+
   let inputProps = { ...props.inputProps }
-  if (props.type === "currency") inputProps = { ...inputProps, step: 0.01, onBlur: formatValue }
+  if (props.type === "currency") {
+    inputProps = {
+      ...inputProps,
+      onBlur: () => formatValue(),
+      onFocus: () => formatValue(true),
+      onChange: filterNumbers,
+    }
+  }
 
-  const type = (props.type === "currency" && "number") || props.type || "text"
+  const type = (props.type === "currency" && "text") || props.type || "text"
   const isRadioOrCheckbox = ["radio", "checkbox"].includes(type)
 
   const label = useMemo(() => {

package/src/text/Description.tsx

@@ -1,23 +1,31 @@
 import * as React from "react"
 import "./Description.scss"
-import Markdown from "markdown-to-jsx"
+import Markdown, { MarkdownOptions } from "markdown-to-jsx"
 
 export interface DescriptionProps {
   term: string
   description: any
+  dtClassName?: string
   markdown?: boolean
+  markdownProps?: MarkdownOptions
 }
 
 export const Description = (props: DescriptionProps) => {
+  const dtClasses = ["description__body"]
+  if (props.dtClassName) dtClasses.push(props.dtClassName)
+
   return (
     <>
       <dd className="description__title">{props.term}</dd>
       {props.markdown ? (
-        <dt className="description__body">
-          <Markdown options={{ disableParsingRawHTML: true }} children={props.description} />
+        <dt className={dtClasses.join(" ")}>
+          <Markdown
+            options={{ disableParsingRawHTML: true, ...props.markdownProps }}
+            children={props.description}
+          />
         </dt>
       ) : (
-        <dt className="description__body">{props.description}</dt>
+        <dt className={dtClasses.join(" ")}>{props.description}</dt>
       )}
     </>
   )