@abgov/jsonforms-components 2.34.0 → 2.34.1

package/index.esm.js

@@ -8924,9 +8924,10 @@ const SummaryRow = ({
 };
 
 function mergeOrphanSections(sections) {
+  var _a;
   const result = [];
   for (const section of sections) {
-    const hasValidTitle = section.sectionTitle && section.sectionTitle.trim() !== '';
+    const hasValidTitle = ((_a = section.sectionTitle) === null || _a === void 0 ? void 0 : _a.trim()) !== '';
     if (hasValidTitle) {
       result.push(Object.assign({}, section, {
         categories: [...section.categories]
@@ -8945,15 +8946,32 @@ function mergeOrphanSections(sections) {
   return result;
 }
 function expandSections(inputArray) {
-  if (!inputArray || inputArray.length === 0) return [];
-  const originalSection = inputArray[0];
-  const categories = originalSection.categories || [];
-  return categories.map((category, index) => ({
-    sectionTitle: `${category.label} Section`,
-    categories: [category]
+  if (!(inputArray === null || inputArray === void 0 ? void 0 : inputArray.length)) return [];
+  const original = inputArray[0];
+  const categories = original.categories || [];
+  return categories.map(cat => ({
+    sectionTitle: `${cat.label} Section`,
+    categories: [cat]
   }));
 }
-/* eslint-disable jsx-a11y/anchor-is-valid */
+const shouldShow = cat => {
+  var _a, _b;
+  return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) !== false;
+};
+function updateCompletion(group, index) {
+  const category = group[index];
+  if (!shouldShow(category)) return category;
+  let endIndex = index;
+  while (endIndex + 1 < group.length && !shouldShow(group[endIndex + 1])) {
+    endIndex++;
+  }
+  const relevant = group.slice(index, endIndex + 1); // current + subsequent hidden
+  const newIsCompleted = relevant.every(cat => cat.isCompleted);
+  if (category.isCompleted === newIsCompleted) return category;
+  return Object.assign({}, category, {
+    isCompleted: newIsCompleted
+  });
+}
 const TaskList = ({
   categories,
   onClick,
@@ -8963,56 +8981,22 @@ const TaskList = ({
   hideSummary
 }) => {
   const testid = 'table-of-contents';
-  const sectioned = getCategorySections(categories);
-  const [completedGroups, setCompletedGroups] = useState(0);
-  const [total, setTotal] = useState(sectioned.filter(s => s.categories && s.sectionTitle).length);
-  const shouldShow = cat => {
-    var _a, _b;
-    return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) !== false;
-  };
-  const updateCompletion = (group, category, groupIndex) => {
-    let leftIndex = groupIndex;
-    while (leftIndex > 0 && !shouldShow(group[leftIndex - 1])) {
-      leftIndex--;
-    }
-    let rightIndex = groupIndex;
-    while (rightIndex < group.length - 1 && !shouldShow(group[rightIndex + 1])) {
-      rightIndex++;
-    }
-    const currentLocalGroup = group.slice(leftIndex, rightIndex + 1);
-    const modifyCategory = JSON.parse(JSON.stringify(category));
-    modifyCategory.isCompleted = currentLocalGroup.length === currentLocalGroup.filter(cat => cat.isCompleted).length;
-    return modifyCategory;
-  };
-  const showInTaskListList = categories.map(cat => {
-    var _a, _b, _c, _d;
-    return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) || ((_d = (_c = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.showInTaskList) === undefined;
-  });
+  // Merge and expand sections
+  const mergedSections = useMemo(() => {
+    let sections = mergeOrphanSections(getCategorySections(categories));
+    if (sections.length === 1) {
+      sections = expandSections(sections);
+    }
+    return sections;
+  }, [categories]);
+  // Derived values
+  const totalGroups = useMemo(() => mergedSections.filter(section => section.categories.some(shouldShow)).length, [mergedSections]);
+  const completedGroups = useMemo(() => mergedSections.filter(section => {
+    const visibleCats = section.categories.filter(shouldShow);
+    return visibleCats.length > 0 && visibleCats.every(cat => cat.isCompleted);
+  }).length, [mergedSections]);
   let globalIndex = 0;
   let sectionIndex = 1;
-  useEffect(() => {
-    let count = 0;
-    let mergedSections = mergeOrphanSections(sectioned);
-    if (mergedSections.length === 1) {
-      mergedSections = expandSections(mergedSections);
-      setTotal(mergedSections.length);
-    }
-    mergedSections.forEach(({
-      categories: group
-    }) => {
-      let countInGroup = 0;
-      group.forEach((category, groupIndex) => {
-        const modifyCategory = updateCompletion(group, category, groupIndex);
-        if (getCategoryStatus(modifyCategory) === 'Completed') {
-          countInGroup++;
-        }
-      });
-      if (countInGroup === group.length) {
-        count++;
-      }
-    });
-    setCompletedGroups(count);
-  }, [categories, sectioned]); // re-run whenever categories change
   return jsx(PageBorder, {
     children: jsxs("div", {
       "data-testid": testid,
@@ -9029,34 +9013,26 @@ const TaskList = ({
         children: subtitle
       }), jsx(ApplicationStatus, {
         completedGroups: completedGroups,
-        totalGroups: total
+        totalGroups: totalGroups
       }), jsx(GoATable, {
         width: "100%",
         children: jsxs("tbody", {
-          children: [sectioned.map(({
+          children: [mergedSections.map(({
             sectionTitle,
             categories: group
           }, index) => jsxs(React.Fragment, {
-            children: [sectionTitle && showInTaskListList[globalIndex] && jsx(SectionHeaderRow, {
+            children: [sectionTitle && group.some(shouldShow) && jsx(SectionHeaderRow, {
               title: sectionTitle,
               index: sectionIndex++
             }, `section-${sectionTitle}`), group.map((category, groupIndex) => {
-              const showCurrent = showInTaskListList[globalIndex];
-              const idx = globalIndex++; // renamed from `index` to avoid shadowing
-              let currentCategory = category;
-              const modifyCategory = updateCompletion(group, category, groupIndex);
-              const showGroupTaskListList = categories.map(cat => shouldShow(cat));
-              if (showGroupTaskListList.length > showGroupTaskListList.filter(item => item === true).length) {
-                currentCategory = modifyCategory;
-              }
-              if (showCurrent) {
-                return jsx(CategoryRow, {
-                  category: currentCategory,
-                  index: idx,
-                  onClick: onClick
-                }, `cat-${category.label}-${idx}`);
-              }
-              return null;
+              const showCurrent = shouldShow(category);
+              const idx = globalIndex++;
+              const currentCategory = showCurrent ? updateCompletion(group, groupIndex) : category;
+              return showCurrent ? jsx(CategoryRow, {
+                category: currentCategory,
+                index: idx,
+                onClick: onClick
+              }, `cat-${category.label}-${idx}`) : null;
             })]
           }, index)), !hideSummary ? jsx(SummaryRow, {
             index: globalIndex,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.34.0",
+  "version": "2.34.1",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/FormStepper/TaskList/TaskList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { RankedTester } from '@jsonforms/core';
 import { CategoriesState } from '../context';
 export interface TocProps {
@@ -8,5 +9,5 @@ export interface TocProps {
     isValid: boolean;
     hideSummary: boolean;
 }
-export declare const TaskList: ({ categories, onClick, title, subtitle, isValid, hideSummary, }: TocProps) => JSX.Element;
+export declare const TaskList: React.FC<TocProps>;
 export declare const TableOfContentsTester: RankedTester;