@pega/cosmos-react-work 8.0.0-build.26.1 → 8.0.0-build.26.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Timeline/Timeline.d.ts.map +1 -1
- package/lib/components/Timeline/Timeline.js +8 -2
- package/lib/components/Timeline/Timeline.js.map +1 -1
- package/lib/components/Timeline/Timeline.types.d.ts +6 -1
- package/lib/components/Timeline/Timeline.types.d.ts.map +1 -1
- package/lib/components/Timeline/Timeline.types.js.map +1 -1
- package/lib/components/Timeline/TimelineItem.d.ts +1 -2
- package/lib/components/Timeline/TimelineItem.d.ts.map +1 -1
- package/lib/components/Timeline/TimelineItem.js +2 -2
- package/lib/components/Timeline/TimelineItem.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAG/E,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAUlD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAG/E,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC;AAUlD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAmF3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -15,8 +15,14 @@ const Timeline = forwardRef(function Timeline({ activity, currentTime, groupBy =
|
|
|
15
15
|
colGap: 0.75,
|
|
16
16
|
alignItems: 'start'
|
|
17
17
|
}, sm: { container: { cols: 'auto auto 1fr', colGap: 0.25 } }, as: StyledTimeline, ref: listRef, children: [groupBy === 'none'
|
|
18
|
-
? activity.map((item, index) => (_jsx(TimelineItem, { item: item,
|
|
19
|
-
: groupByActivity(activity, groupBy).map(groupedData => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as: StyledTimelineListItem, children: [_jsx(DateTimeDisplay, { as: StyledDate, variant: groupBy, format: 'long', value: groupedData[0].date }), _jsx(StyledTimelineList, { children: groupedData.map((item, index) => (_jsx(TimelineItem, { item:
|
|
18
|
+
? activity.map((item, index) => (_jsx(TimelineItem, { item: item, prevItemDate: activity[index - 1]?.date, nextItemDate: activity[index + 1]?.date, currentTime: currentTime }, item.id)))
|
|
19
|
+
: groupByActivity(activity, groupBy).map(groupedData => (_jsxs(Grid, { item: { colStartEnd: '1/-1' }, as: StyledTimelineListItem, children: [_jsx(DateTimeDisplay, { as: StyledDate, variant: groupBy, format: 'long', value: groupedData[0].date }), _jsx(StyledTimelineList, { children: groupedData.map((item, index) => (_jsx(TimelineItem, { item: {
|
|
20
|
+
...item,
|
|
21
|
+
...(groupBy === 'date' &&
|
|
22
|
+
(!item.dateVariant || item.dateVariant === 'datetime') && {
|
|
23
|
+
dateVariant: 'time'
|
|
24
|
+
})
|
|
25
|
+
}, prevItemDate: groupedData[index - 1]?.date, nextItemDate: groupedData[index + 1]?.date, currentTime: currentTime }, item.id))) })] }, groupedData[0].id))), loading && (_jsx(StyledTimelineListItem, { children: _jsx(StyledLoadingCell, { children: _jsx(Progress, { placement: 'local' }) }) }))] }));
|
|
20
26
|
});
|
|
21
27
|
export default Timeline;
|
|
22
28
|
//# sourceMappingURL=Timeline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,IAAI,EACL,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EACL,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,QAAQ,GAAmD,UAAU,CAAC,SAAS,QAAQ,CAC3F,EACE,QAAQ,EACR,WAAW,EACX,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACmB,EACjC,GAAyB;IAEzB,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,QAAQ,CAAC,MAAM,GAAG,CAAC,EACnB,GAAG,EAAE;QACH,IAAI,CAAC,OAAO;YAAE,QAAQ,EAAE,EAAE,CAAC;IAC7B,CAAC,EACD,iBAAiB,CAClB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,OAAO;SACpB,EACD,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAC3D,EAAE,EAAE,cAAc,EAClB,GAAG,EAAE,OAAO,aAEX,OAAO,KAAK,MAAM;gBACjB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,YAAY,IAEX,IAAI,EAAE,IAAI,EACV,
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n Progress,\n useConsolidatedRef,\n useItemIntersection,\n DateTimeDisplay,\n Grid\n} from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport { groupByActivity } from './utils';\nimport type TimelineProps from './Timeline.types';\nimport {\n StyledDate,\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 activity,\n currentTime,\n groupBy = 'date',\n loading,\n loadMore,\n ...restProps\n }: PropsWithoutRef<TimelineProps>,\n ref: TimelineProps['ref']\n) {\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n activity.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 === 'none'\n ? activity.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={item}\n prevItemDate={activity[index - 1]?.date}\n nextItemDate={activity[index + 1]?.date}\n currentTime={currentTime}\n />\n ))\n : groupByActivity(activity, groupBy).map(groupedData => (\n <Grid\n item={{ colStartEnd: '1/-1' }}\n as={StyledTimelineListItem}\n key={groupedData[0].id}\n >\n <DateTimeDisplay\n as={StyledDate}\n variant={groupBy}\n format='long'\n value={groupedData[0].date}\n />\n <StyledTimelineList>\n {groupedData.map((item, index) => (\n <TimelineItem\n key={item.id}\n item={{\n ...item,\n ...(groupBy === 'date' &&\n (!item.dateVariant || item.dateVariant === 'datetime') && {\n dateVariant: 'time'\n })\n }}\n prevItemDate={groupedData[index - 1]?.date}\n nextItemDate={groupedData[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"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { MouseEvent, ReactElement, ReactNode, Ref } from 'react';
|
|
2
|
-
import type { BaseProps, FieldValueListProps, IconProps, ListToolbarProps, NoChildrenProp, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { BaseProps, DateTimeDisplayProps, FieldValueListProps, IconProps, ListToolbarProps, NoChildrenProp, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';
|
|
4
4
|
import type { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';
|
|
5
5
|
export interface ActivityObject {
|
|
@@ -7,6 +7,11 @@ export interface ActivityObject {
|
|
|
7
7
|
id: string;
|
|
8
8
|
/** Date as ISO8601 string, timestamp or native Date object. */
|
|
9
9
|
date: string | number | Date;
|
|
10
|
+
/**
|
|
11
|
+
* Controls date time variant. Set to 'time' when groupBy is 'date'.
|
|
12
|
+
* @default datetime
|
|
13
|
+
*/
|
|
14
|
+
dateVariant?: DateTimeDisplayProps['variant'];
|
|
10
15
|
/** Header region for rendering text and links. */
|
|
11
16
|
title: ReactNode;
|
|
12
17
|
/** Name of the icon (to be selected from default Pega icon set) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AAExG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;CACxD;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1F,IAAI,CAAC,EAAE;QACL,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACvF;;;WAGG;QACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;KAC9B,CAAC;IACF,KAAK,CAAC,EAAE;QACN,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACrF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH"}
|
|
1
|
+
{"version":3,"file":"Timeline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EACV,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACtG,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wDAAwD,CAAC;AAExG,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAC9C,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,GAAG,YAAY,CAAC;CACxD;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,YAAY,CAAC;AAC3D,MAAM,MAAM,eAAe,GACvB,OAAO,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC,GACvE,MAAM,CAAC;AAEX,MAAM,CAAC,OAAO,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IACtE,uBAAuB;IACvB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,2BAA2B;IAC3B,WAAW,EAAE,IAAI,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1F,IAAI,CAAC,EAAE;QACL,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACvF;;;WAGG;QACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;KAC9B,CAAC;IACF,KAAK,CAAC,EAAE;QACN,iDAAiD;QACjD,WAAW,EAAE,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAAK,IAAI,CAAC;QACrF;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, ReactElement, ReactNode, Ref } from 'react';\n\nimport type {\n BaseProps,\n FieldValueListProps,\n IconProps,\n ListToolbarProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\nimport type { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport interface ActivityObject {\n /** Unique id for activity */\n id: string;\n /** Date as ISO8601 string, timestamp or native Date object. */\n date: string | number | Date;\n /** Header region for rendering text and links. */\n title: ReactNode;\n /** Name of the icon (to be selected from default Pega icon set) */\n icon?: IconProps['name'];\n /**\n * Default visually expanded state for the activity item.\n * @default false\n */\n defaultExpanded?: boolean;\n /** Represents the current status of activity */\n status?: StatusProps;\n /** The set of field values to render in the list. */\n content?: FieldValueListProps['fields'] | ReactElement;\n}\n\nexport type TimelineSortOrder = 'ascending' | 'descending';\nexport type TimelineGroupBy =\n | Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'>\n | 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /** List of activity */\n activity: ActivityObject[];\n /** Current time as Date */\n currentTime: Date;\n /**\n * List of activity grouped by day, month, quarter or year.\n * @default 'date'\n */\n groupBy?: TimelineGroupBy;\n /**\n * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n */\n loading?: boolean;\n /** Callback to fetch more activity items */\n loadMore?: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLTableElement>;\n}\n\nexport interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort' | 'group'> {\n sort?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default 'descending'\n */\n selected?: TimelineSortOrder;\n };\n group?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default 'date'\n */\n selected: TimelineProps['groupBy'];\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Timeline.types.js","sourceRoot":"","sources":["../../../src/components/Timeline/Timeline.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, ReactElement, ReactNode, Ref } from 'react';\n\nimport type {\n BaseProps,\n DateTimeDisplayProps,\n FieldValueListProps,\n IconProps,\n ListToolbarProps,\n NoChildrenProp,\n OmitStrict,\n StatusProps\n} from '@pega/cosmos-react-core';\nimport type { DateTimeVariant } from '@pega/cosmos-react-core/lib/components/DateTime/DateTime.types';\nimport type { AcceptedMouseEventElement } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nexport interface ActivityObject {\n /** Unique id for activity */\n id: string;\n /** Date as ISO8601 string, timestamp or native Date object. */\n date: string | number | Date;\n /**\n * Controls date time variant. Set to 'time' when groupBy is 'date'.\n * @default datetime\n */\n dateVariant?: DateTimeDisplayProps['variant'];\n /** Header region for rendering text and links. */\n title: ReactNode;\n /** Name of the icon (to be selected from default Pega icon set) */\n icon?: IconProps['name'];\n /**\n * Default visually expanded state for the activity item.\n * @default false\n */\n defaultExpanded?: boolean;\n /** Represents the current status of activity */\n status?: StatusProps;\n /** The set of field values to render in the list. */\n content?: FieldValueListProps['fields'] | ReactElement;\n}\n\nexport type TimelineSortOrder = 'ascending' | 'descending';\nexport type TimelineGroupBy =\n | Extract<DateTimeVariant, 'date' | 'monthyear' | 'quarteryear' | 'year'>\n | 'none';\n\nexport default interface TimelineProps extends BaseProps, NoChildrenProp {\n /** List of activity */\n activity: ActivityObject[];\n /** Current time as Date */\n currentTime: Date;\n /**\n * List of activity grouped by day, month, quarter or year.\n * @default 'date'\n */\n groupBy?: TimelineGroupBy;\n /**\n * Show a Progress indicator at the end of a list where newly loaded items will be appended.\n * @default false\n */\n loading?: boolean;\n /** Callback to fetch more activity items */\n loadMore?: () => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLTableElement>;\n}\n\nexport interface TimelineToolbarProps extends OmitStrict<ListToolbarProps, 'sort' | 'group'> {\n sort?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineSortOrder, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default 'descending'\n */\n selected?: TimelineSortOrder;\n };\n group?: {\n /** An item click handler for all item clicks. */\n onItemClick: (id: TimelineGroupBy, e: MouseEvent<AcceptedMouseEventElement>) => void;\n /**\n * Currently selected sort order.\n * @default 'date'\n */\n selected: TimelineProps['groupBy'];\n };\n}\n"]}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import type { FunctionComponent } from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import type { ActivityObject } from './Timeline.types';
|
|
4
4
|
interface TimelineItemProps {
|
|
5
5
|
item: ActivityObject;
|
|
6
|
-
timeFormat: DateTimeDisplayProps['variant'];
|
|
7
6
|
prevItemDate: ActivityObject['date'] | undefined;
|
|
8
7
|
nextItemDate: ActivityObject['date'] | undefined;
|
|
9
8
|
currentTime: Date;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"TimelineItem.d.ts","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAG7D,OAAO,KAAK,EAA2B,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAqBrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,IAAI,CAAC;CACnB;AAgBD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAgHrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -12,14 +12,14 @@ const shouldRenderContent = (content) => {
|
|
|
12
12
|
}
|
|
13
13
|
return true;
|
|
14
14
|
};
|
|
15
|
-
const TimelineItem = ({ item: { date, title, icon, defaultExpanded = false, status, content },
|
|
15
|
+
const TimelineItem = ({ item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content }, prevItemDate, nextItemDate, currentTime }) => {
|
|
16
16
|
const [expanded, setExpanded] = useState(defaultExpanded);
|
|
17
17
|
const isSmallOrAbove = useBreakpoint('sm');
|
|
18
18
|
const contentListRef = useRef(null);
|
|
19
19
|
const isSMContentWidthOrAbove = useBreakpoint('sm', {
|
|
20
20
|
breakpointRef: contentListRef
|
|
21
21
|
});
|
|
22
|
-
return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant:
|
|
22
|
+
return (_jsxs(StyledTimelineListItem, { children: [isSmallOrAbove && _jsx(StyledTime, { variant: dateVariant, value: date, format: 'short' }), _jsx(StyledBulletWrapper, { hasIcon: !!icon, hasPrev: !!prevItemDate, hasNext: !!nextItemDate, isPrevFuture: isFutureDate(prevItemDate, currentTime), isNextFuture: isFutureDate(nextItemDate, currentTime), children: _jsx(StyledTimelineIcon, { container: { inline: true, alignItems: 'center', justify: 'center' }, children: icon && _jsx(Icon, { name: icon }) }) }), _jsxs("div", { children: [_jsx("div", { children: _jsx(StyledCard, { children: _jsxs(StyledCardHeader, { container: {
|
|
23
23
|
cols: 'auto 1fr',
|
|
24
24
|
alignContent: 'evenly',
|
|
25
25
|
alignItems: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineItem.js","sourceRoot":"","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent, ReactElement } from 'react';\nimport { isValidElement, useRef, useState } from 'react';\n\nimport type { FieldValueListItemProps, ForwardProps } from '@pega/cosmos-react-core';\nimport {\n ExpandCollapse,\n FieldValueItem,\n Grid,\n Icon,\n Status,\n useBreakpoint\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledBulletWrapper,\n StyledCard,\n StyledCardContent,\n StyledCardHeader,\n StyledTime,\n StyledTimelineIcon,\n StyledTimelineListItem,\n StyledTitle,\n StyledToggleButton\n} from './Timeline.styles';\nimport type { ActivityObject } from './Timeline.types';\nimport { isFutureDate } from './utils';\n\ninterface TimelineItemProps {\n item: ActivityObject;\n prevItemDate: ActivityObject['date'] | undefined;\n nextItemDate: ActivityObject['date'] | undefined;\n currentTime: Date;\n}\n\nconst shouldRenderContent = (\n content: ActivityObject['content']\n): content is [FieldValueListItemProps, ...FieldValueListItemProps[]] | ReactElement => {\n if (!content) {\n return false;\n }\n\n if (Array.isArray(content)) {\n return content.length > 0;\n }\n\n return true;\n};\n\nconst TimelineItem: FunctionComponent<TimelineItemProps & ForwardProps> = ({\n item: { date, dateVariant = 'datetime', title, icon, defaultExpanded = false, status, content },\n prevItemDate,\n nextItemDate,\n currentTime\n}: TimelineItemProps & ForwardProps) => {\n const [expanded, setExpanded] = useState(defaultExpanded);\n const isSmallOrAbove = useBreakpoint('sm');\n\n const contentListRef = useRef<HTMLDivElement>(null);\n const isSMContentWidthOrAbove = useBreakpoint('sm', {\n breakpointRef: contentListRef\n });\n\n return (\n <StyledTimelineListItem>\n {isSmallOrAbove && <StyledTime variant={dateVariant} value={date} format='short' />}\n <StyledBulletWrapper\n hasIcon={!!icon}\n hasPrev={!!prevItemDate}\n hasNext={!!nextItemDate}\n isPrevFuture={isFutureDate(prevItemDate, currentTime)}\n isNextFuture={isFutureDate(nextItemDate, currentTime)}\n >\n <StyledTimelineIcon container={{ inline: true, alignItems: 'center', justify: 'center' }}>\n {icon && <Icon name={icon} />}\n </StyledTimelineIcon>\n </StyledBulletWrapper>\n <div>\n <div>\n <StyledCard>\n <StyledCardHeader\n container={{\n cols: 'auto 1fr',\n alignContent: 'evenly',\n alignItems: 'center',\n gap: 0.5\n }}\n sm={{ container: { cols: 'auto 1fr auto' } }}\n >\n {shouldRenderContent(content) && (\n <StyledToggleButton\n icon\n variant='simple'\n onClick={() => {\n setExpanded(cur => !cur);\n }}\n collapsed={!expanded}\n aria-expanded={expanded}\n compact\n >\n <Icon name='caret-down' />\n </StyledToggleButton>\n )}\n <Grid item={{ colStart: '2', colEnd: '2' }} container={{ rowGap: 0.25 }}>\n <StyledTitle>{title}</StyledTitle>\n {!isSmallOrAbove && (\n <Grid\n container={{\n cols: '1fr auto',\n alignContent: 'evenly',\n alignItems: 'center'\n }}\n >\n <StyledTime variant='time' value={date} format='short' />\n {status && <Status variant={status.variant}>{status.children}</Status>}\n </Grid>\n )}\n </Grid>\n {isSmallOrAbove && status && (\n <Grid sm={{ item: { colStart: '3', colEnd: '3' } }}>\n <Status variant={status.variant}>{status.children}</Status>\n </Grid>\n )}\n </StyledCardHeader>\n </StyledCard>\n </div>\n {shouldRenderContent(content) && (\n <ExpandCollapse dimension='height' collapsed={!expanded}>\n <StyledCardContent>\n {isValidElement<any>(content) ? (\n content\n ) : (\n <Grid\n container={{\n gap: 1,\n cols: isSMContentWidthOrAbove\n ? `repeat(${\n content.length > 1 ? '2' : '1'\n }, minmax(16ch, auto) minmax(25%, 1fr))`\n : 'minmax(0, 1fr)'\n }}\n ref={contentListRef}\n >\n {content.map(({ id, name, value, variant }) => {\n return (\n <FieldValueItem\n name={name}\n value={value}\n variant={isSmallOrAbove ? variant : 'stacked'}\n key={id ?? name}\n />\n );\n })}\n </Grid>\n )}\n </StyledCardContent>\n </ExpandCollapse>\n )}\n </div>\n </StyledTimelineListItem>\n );\n};\n\nexport default TimelineItem;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "8.0.0-build.26.
|
|
3
|
+
"version": "8.0.0-build.26.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"build": "tsc -b tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@pega/cosmos-react-core": "8.0.0-build.26.
|
|
23
|
-
"@pega/cosmos-react-rte": "8.0.0-build.26.
|
|
22
|
+
"@pega/cosmos-react-core": "8.0.0-build.26.3",
|
|
23
|
+
"@pega/cosmos-react-rte": "8.0.0-build.26.3",
|
|
24
24
|
"@types/marked": "^4.0.2",
|
|
25
25
|
"@types/react": "^17.0.62 || ^18.3.3",
|
|
26
26
|
"@types/react-dom": "^17.0.20 || ^18.3.0",
|