@thecb/components 10.5.2 → 10.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.5.2",
+  "version": "10.5.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/partial-amount-form/PartialAmountField.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { equals } from "ramda";
+import { FormInput } from "../../atoms/form-layouts";
+import { displayCurrency } from "../../../util/general";
+import Text from "../../atoms/text";
+
+const PartialAmountField = ({
+  lineItem,
+  field,
+  showErrors,
+  errorMessages,
+  moneyFormat,
+  fieldActions
+}) => (
+  <FormInput
+    labelTextWhenNoError={lineItem.description}
+    key={lineItem.id}
+    field={field}
+    fieldActions={fieldActions}
+    showErrors={showErrors}
+    errorMessages={errorMessages}
+    style={{ textAlign: "right" }}
+    placeholder="$0.00"
+    formatter={moneyFormat}
+    isNum
+    decorator={
+      <Text variant="p">
+        Amount owed:{"  "}
+        {
+          <Text variant="p" weight="600">
+            {displayCurrency(lineItem.amount)}
+          </Text>
+        }
+      </Text>
+    }
+  />
+);
+
+function arePropsEqual(prevProps, nextProps) {
+  return (
+    equals(prevProps.errorMessages, nextProps.errorMessages) &&
+    equals(prevProps.field, nextProps.field) &&
+    equals(prevProps.showErrors, nextProps.showErrors) &&
+    equals(prevProps.moneyFormat, nextProps.moneyFormat) &&
+    equals(prevProps.lineItem, nextProps.lineItem)
+  );
+}
+
+export default React.memo(PartialAmountField, arePropsEqual);

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -4,13 +4,11 @@ import {
   numberGreaterThanOrEqualTo,
   numberLessThanOrEqualTo
 } from "redux-freeform";
+
+import PartialAmountField from "./PartialAmountField";
 import { displayCurrency } from "../../../util/general";
 import Text from "../../atoms/text";
-import {
-  FormInput,
-  FormInputColumn,
-  FormContainer
-} from "../../atoms/form-layouts";
+import { FormInputColumn, FormContainer } from "../../atoms/form-layouts";
 import { moneyFormat } from "../../../util/formats";
 
 const PartialAmountForm = ({
@@ -68,27 +66,15 @@ const PartialAmountForm = ({
       <div style={{ height: "16px" }}></div>
       <FormInputColumn>
         {lineItemsNew.map(li => (
-          <FormInput
-            labelTextWhenNoError={li.description}
+          <PartialAmountField
             key={li.id}
+            lineItem={li}
             field={fields[li.id]}
-            fieldActions={actions.fields[li.id]}
+            actions={actions}
             showErrors={showErrors}
+            moneyFormat={moneyFormat}
+            fieldActions={actions.fields[li.id]}
             errorMessages={getPartialAmountFormErrors(li.amount)}
-            style={{ textAlign: "right" }}
-            placeholder="$0.00"
-            formatter={moneyFormat}
-            isNum
-            decorator={
-              <Text variant="p">
-                Amount owed:{"  "}
-                {
-                  <Text variant="p" weight="600">
-                    {displayCurrency(li.amount)}
-                  </Text>
-                }
-              </Text>
-            }
           />
         ))}
       </FormInputColumn>

package/src/components/molecules/radio-section/InnerRadioSection.js

@@ -94,12 +94,17 @@ const InnerRadioSection = ({
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
       onClick={
-        (isMobile && supportsTouch) || section.disabled
+        (isMobile && supportsTouch) ||
+        section.disabled ||
+        section.id === openSection
           ? noop
           : () => toggleOpenSection(section.id)
       }
       onTouchEnd={
-        isMobile && supportsTouch && !section.disabled
+        isMobile &&
+        supportsTouch &&
+        !section.disabled &&
+        section.id !== openSection
           ? () => toggleOpenSection(section.id)
           : noop
       }