@pega/lists-react 9.0.0-build.2.9 → 9.0.0-build.20.0

package/lib/Core/Views/Table/useCountChange.js

@@ -0,0 +1,39 @@
+import { useRef, useEffect } from 'react';
+/**
+ * Detects changes in specific properties of a view's state as those can impact the count across renders.
+ *
+ * @param view - The view object containing state and metadata to monitor for changes.
+ * @param isDataFetching - A boolean flag indicating if data is currently being fetched.
+ * @param onCountChange - Callback to run when properties impacting the count change.
+ */
+export default function useCountChange(view, isDataFetching, onCountChange) {
+    const getCurrentValues = () => ({
+        filterExpression: view.state.filterExpression,
+        searchQuery: view.state.search?.query,
+        externalFilterValue: view.state.externalState?.[view.meta?.externalFilters ?? ''],
+        refresh: view.state.refresh,
+        searchText: view.state.searchText
+    });
+    const prevValuesRef = useRef(null);
+    const valueKeys = [
+        'filterExpression',
+        'searchQuery',
+        'externalFilterValue',
+        'refresh',
+        'searchText'
+    ];
+    useEffect(() => {
+        if (isDataFetching)
+            return;
+        const currentValues = getCurrentValues();
+        const prevValues = prevValuesRef.current;
+        if (prevValues !== null) {
+            const changed = valueKeys.some(key => currentValues[key] !== prevValues[key]);
+            if (changed) {
+                onCountChange?.();
+            }
+        }
+        prevValuesRef.current = currentValues;
+    }, [view, isDataFetching, onCountChange]);
+}
+//# sourceMappingURL=useCountChange.js.map

package/lib/Core/Views/Table/useCountChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCountChange.js","sourceRoot":"","sources":["../../../../Core/Views/Table/useCountChange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1C;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,IAAsB,EACtB,cAAuB,EACvB,aAAyB;IAEzB,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAAC;QAC9B,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB;QAC7C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK;QACrC,mBAAmB,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,IAAI,EAAE,CAAC;QACjF,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;QAC3B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;KAClC,CAAC,CAAC;IAGH,MAAM,aAAa,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAA4B;QACzC,kBAAkB;QAClB,aAAa;QACb,qBAAqB;QACrB,SAAS;QACT,YAAY;KACb,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc;YAAE,OAAO;QAE3B,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;QACzC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;QAEzC,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;YACxB,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;YAC9E,IAAI,OAAO,EAAE,CAAC;gBACZ,aAAa,EAAE,EAAE,CAAC;YACpB,CAAC;QACH,CAAC;QAED,aAAa,CAAC,OAAO,GAAG,aAAa,CAAC;IACxC,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;AAC5C,CAAC","sourcesContent":["import { useRef, useEffect } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\n/**\n * Detects changes in specific properties of a view's state as those can impact the count across renders.\n *\n * @param view - The view object containing state and metadata to monitor for changes.\n * @param isDataFetching - A boolean flag indicating if data is currently being fetched.\n * @param onCountChange - Callback to run when properties impacting the count change.\n */\nexport default function useCountChange(\n  view: RsCoreTypes.View,\n  isDataFetching: boolean,\n  onCountChange: () => void\n) {\n  const getCurrentValues = () => ({\n    filterExpression: view.state.filterExpression,\n    searchQuery: view.state.search?.query,\n    externalFilterValue: view.state.externalState?.[view.meta?.externalFilters ?? ''],\n    refresh: view.state.refresh,\n    searchText: view.state.searchText\n  });\n\n  type CurrentValues = ReturnType<typeof getCurrentValues>;\n  const prevValuesRef = useRef<CurrentValues | null>(null);\n\n  const valueKeys: (keyof CurrentValues)[] = [\n    'filterExpression',\n    'searchQuery',\n    'externalFilterValue',\n    'refresh',\n    'searchText'\n  ];\n\n  useEffect(() => {\n    if (isDataFetching) return;\n\n    const currentValues = getCurrentValues();\n    const prevValues = prevValuesRef.current;\n\n    if (prevValues !== null) {\n      const changed = valueKeys.some(key => currentValues[key] !== prevValues[key]);\n      if (changed) {\n        onCountChange?.();\n      }\n    }\n\n    prevValuesRef.current = currentValues;\n  }, [view, isDataFetching, onCountChange]);\n}\n"]}

package/lib/Core/Views/Timeline/Timeline.d.ts

@@ -0,0 +1,5 @@
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+import type TimelineProps from './Timeline.types';
+declare const Timeline: ForwardRefForwardPropsComponent<TimelineProps>;
+export default Timeline;
+//# sourceMappingURL=Timeline.d.ts.map

package/lib/Core/Views/Timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAUlD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAgF3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/lib/Core/Views/Timeline/Timeline.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { Progress, useConsolidatedRef, useItemIntersection, Grid } from '@pega/cosmos-react-core';
+import { StyledGroupHeaderText, StyledTimeline, StyledLoadingCell, StyledTimelineListItem, StyledTimelineList } from './Timeline.styles';
+import TimelineItem from './TimelineItem';
+const Timeline = forwardRef(function Timeline({ activities, currentTime, groupBy, loading, loadMore, ...restProps }, ref) {
+    const listRef = useConsolidatedRef(ref);
+    const ungroupedActivities = useMemo(() => activities.flatMap(({ activity }) => activity), [activities]);
+    useItemIntersection(listRef, ungroupedActivities.length - 1, () => {
+        if (!loading)
+            loadMore?.();
+    }, ':scope li > div');
+    return (_jsxs(Grid, { ...restProps, container: {
+            cols: 'auto 1fr',
+            colGap: 0.75,
+            alignItems: 'start'
+        }, sm: { container: { cols: 'auto auto  1fr', colGap: 0.25 } }, as: StyledTimeline, ref: listRef, children: [!groupBy
+                ? ungroupedActivities.map((item, index) => (_jsx(TimelineItem, { item: item, prevItemDate: ungroupedActivities[index - 1]?.date, nextItemDate: ungroupedActivities[index + 1]?.date, currentTime: currentTime }, item.id)))
+                : activities.map(({ header, activity }) => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as: StyledTimelineListItem, children: [_jsx(StyledGroupHeaderText, { variant: 'h3', children: header }), _jsx(StyledTimelineList, { children: activity.map((item, index) => (_jsx(TimelineItem, { item: {
+                                    ...item,
+                                    ...(groupBy.dateFunction === 'DAYS' &&
+                                        (!item.dateVariant || item.dateVariant === 'datetime') && {
+                                        dateVariant: 'time'
+                                    })
+                                }, prevItemDate: activity[index - 1]?.date, nextItemDate: activity[index + 1]?.date, currentTime: currentTime }, item.id))) })] }, activity[0].id))), loading && (_jsx(StyledTimelineListItem, { children: _jsx(StyledLoadingCell, { children: _jsx(Progress, { placement: 'local' }) }) }))] }));
+});
+export default Timeline;
+//# sourceMappingURL=Timeline.js.map

package/lib/Core/Views/Timeline/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../../Core/Views/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { Progress, useConsolidatedRef, useItemIntersection, Grid } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type TimelineProps from './Timeline.types';\nimport {\n  StyledGroupHeaderText,\n  StyledTimeline,\n  StyledLoadingCell,\n  StyledTimelineListItem,\n  StyledTimelineList\n} from './Timeline.styles';\nimport TimelineItem from './TimelineItem';\n\nconst Timeline: ForwardRefForwardPropsComponent<TimelineProps> = forwardRef(function Timeline(\n  {\n    activities,\n    currentTime,\n    groupBy,\n    loading,\n    loadMore,\n    ...restProps\n  }: PropsWithoutRef<TimelineProps>,\n  ref: TimelineProps['ref']\n) {\n  const listRef = useConsolidatedRef(ref);\n\n  const ungroupedActivities = useMemo(\n    () => activities.flatMap(({ activity }) => activity),\n    [activities]\n  );\n\n  useItemIntersection(\n    listRef,\n    ungroupedActivities.length - 1,\n    () => {\n      if (!loading) loadMore?.();\n    },\n    ':scope li > div'\n  );\n\n  return (\n    <Grid\n      {...restProps}\n      container={{\n        cols: 'auto 1fr',\n        colGap: 0.75,\n        alignItems: 'start'\n      }}\n      sm={{ container: { cols: 'auto auto  1fr', colGap: 0.25 } }}\n      as={StyledTimeline}\n      ref={listRef}\n    >\n      {!groupBy\n        ? ungroupedActivities.map((item, index) => (\n            <TimelineItem\n              key={item.id}\n              item={item}\n              prevItemDate={ungroupedActivities[index - 1]?.date}\n              nextItemDate={ungroupedActivities[index + 1]?.date}\n              currentTime={currentTime}\n            />\n          ))\n        : activities.map(({ header, activity }) => (\n            <Grid item={{ colStartEnd: '1/-1' }} as={StyledTimelineListItem} key={activity[0].id}>\n              <StyledGroupHeaderText variant='h3'>{header}</StyledGroupHeaderText>\n              <StyledTimelineList>\n                {activity.map((item, index) => (\n                  <TimelineItem\n                    key={item.id}\n                    item={{\n                      ...item,\n                      ...(groupBy.dateFunction === 'DAYS' &&\n                        (!item.dateVariant || item.dateVariant === 'datetime') && {\n                          dateVariant: 'time'\n                        })\n                    }}\n                    prevItemDate={activity[index - 1]?.date}\n                    nextItemDate={activity[index + 1]?.date}\n                    currentTime={currentTime}\n                  />\n                ))}\n              </StyledTimelineList>\n            </Grid>\n          ))}\n      {loading && (\n        <StyledTimelineListItem>\n          <StyledLoadingCell>\n            <Progress placement='local' />\n          </StyledLoadingCell>\n        </StyledTimelineListItem>\n      )}\n    </Grid>\n  );\n});\n\nexport default Timeline;\n"]}