@pega/cosmos-react-build 2.0.0-dev.9.2 → 2.0.0-rc.2
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/AppHeader/AppHeader.d.ts +4 -3
- package/lib/components/AppHeader/AppHeader.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.js +10 -18
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.d.ts +4 -3
- package/lib/components/AppHeader/AppHeader.styles.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.js +35 -17
- package/lib/components/AppHeader/AppHeader.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.d.ts +4 -0
- package/lib/components/AppShell/AppShell.d.ts.map +1 -0
- package/lib/components/AppShell/AppShell.js +82 -0
- package/lib/components/AppShell/AppShell.js.map +1 -0
- package/lib/components/AppShell/AppShell.styles.d.ts +20 -0
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -0
- package/lib/components/AppShell/AppShell.styles.js +329 -0
- package/lib/components/AppShell/AppShell.styles.js.map +1 -0
- package/lib/components/AppShell/AppShell.types.d.ts +43 -0
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -0
- package/lib/components/AppShell/AppShell.types.js +2 -0
- package/lib/components/AppShell/AppShell.types.js.map +1 -0
- package/lib/components/AppShell/AppShellContext.d.ts +4 -0
- package/lib/components/AppShell/AppShellContext.d.ts.map +1 -0
- package/lib/components/AppShell/AppShellContext.js +13 -0
- package/lib/components/AppShell/AppShellContext.js.map +1 -0
- package/lib/components/AppShell/index.d.ts +3 -0
- package/lib/components/AppShell/index.d.ts.map +1 -0
- package/lib/components/AppShell/index.js +2 -0
- package/lib/components/AppShell/index.js.map +1 -0
- package/lib/components/FlowModeller/FlowModeller.d.ts +21 -0
- package/lib/components/FlowModeller/FlowModeller.d.ts.map +1 -0
- package/lib/components/FlowModeller/FlowModeller.js +201 -0
- package/lib/components/FlowModeller/FlowModeller.js.map +1 -0
- package/lib/components/FlowModeller/Node/Node.types.d.ts +54 -0
- package/lib/components/FlowModeller/Node/Node.types.d.ts.map +1 -0
- package/lib/components/FlowModeller/Node/Node.types.js +28 -0
- package/lib/components/FlowModeller/Node/Node.types.js.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts +19 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js +128 -0
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts +6 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map +1 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.js +55 -0
- package/lib/components/FlowModeller/Node/NodeTemplates.js.map +1 -0
- package/lib/components/FlowModeller/NodeLibrary.d.ts +12 -0
- package/lib/components/FlowModeller/NodeLibrary.d.ts.map +1 -0
- package/lib/components/FlowModeller/NodeLibrary.js +49 -0
- package/lib/components/FlowModeller/NodeLibrary.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/AddNode.d.ts +10 -0
- package/lib/components/FlowModeller/Renderer/AddNode.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/AddNode.js +42 -0
- package/lib/components/FlowModeller/Renderer/AddNode.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/Connector.d.ts +5 -0
- package/lib/components/FlowModeller/Renderer/Connector.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/Connector.js +50 -0
- package/lib/components/FlowModeller/Renderer/Connector.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/ConnectorsContainer.d.ts +12 -0
- package/lib/components/FlowModeller/Renderer/ConnectorsContainer.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/ConnectorsContainer.js +15 -0
- package/lib/components/FlowModeller/Renderer/ConnectorsContainer.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/Node.d.ts +5 -0
- package/lib/components/FlowModeller/Renderer/Node.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/Node.js +18 -0
- package/lib/components/FlowModeller/Renderer/Node.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/NodesContainer.d.ts +8 -0
- package/lib/components/FlowModeller/Renderer/NodesContainer.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/NodesContainer.js +15 -0
- package/lib/components/FlowModeller/Renderer/NodesContainer.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/Renderer.d.ts +5 -0
- package/lib/components/FlowModeller/Renderer/Renderer.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/Renderer.js +17 -0
- package/lib/components/FlowModeller/Renderer/Renderer.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts +18 -0
- package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/Renderer.types.js +2 -0
- package/lib/components/FlowModeller/Renderer/Renderer.types.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts +51 -0
- package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/Utils/Graph.js +247 -0
- package/lib/components/FlowModeller/Renderer/Utils/Graph.js.map +1 -0
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts +35 -0
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts.map +1 -0
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js +104 -0
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js.map +1 -0
- package/lib/components/FlowModeller/helper.d.ts +22 -0
- package/lib/components/FlowModeller/helper.d.ts.map +1 -0
- package/lib/components/FlowModeller/helper.js +97 -0
- package/lib/components/FlowModeller/helper.js.map +1 -0
- package/lib/components/FlowModeller/index.d.ts +3 -0
- package/lib/components/FlowModeller/index.d.ts.map +1 -0
- package/lib/components/FlowModeller/index.js +2 -0
- package/lib/components/FlowModeller/index.js.map +1 -0
- package/lib/components/LifeCycle/Category.d.ts +32 -0
- package/lib/components/LifeCycle/Category.d.ts.map +1 -0
- package/lib/components/LifeCycle/Category.js +98 -0
- package/lib/components/LifeCycle/Category.js.map +1 -0
- package/lib/components/LifeCycle/LifeCycle.d.ts +22 -0
- package/lib/components/LifeCycle/LifeCycle.d.ts.map +1 -0
- package/lib/components/LifeCycle/LifeCycle.js +73 -0
- package/lib/components/LifeCycle/LifeCycle.js.map +1 -0
- package/lib/components/LifeCycle/LifeCycle.types.d.ts +56 -0
- package/lib/components/LifeCycle/LifeCycle.types.d.ts.map +1 -0
- package/lib/components/LifeCycle/LifeCycle.types.js +2 -0
- package/lib/components/LifeCycle/LifeCycle.types.js.map +1 -0
- package/lib/components/LifeCycle/LifeCycleList.d.ts +22 -0
- package/lib/components/LifeCycle/LifeCycleList.d.ts.map +1 -0
- package/lib/components/LifeCycle/LifeCycleList.js +65 -0
- package/lib/components/LifeCycle/LifeCycleList.js.map +1 -0
- package/lib/components/LifeCycle/Stage.d.ts +49 -0
- package/lib/components/LifeCycle/Stage.d.ts.map +1 -0
- package/lib/components/LifeCycle/Stage.js +297 -0
- package/lib/components/LifeCycle/Stage.js.map +1 -0
- package/lib/components/LifeCycle/Step.d.ts +51 -0
- package/lib/components/LifeCycle/Step.d.ts.map +1 -0
- package/lib/components/LifeCycle/Step.js +241 -0
- package/lib/components/LifeCycle/Step.js.map +1 -0
- package/lib/components/LifeCycle/Task.d.ts +53 -0
- package/lib/components/LifeCycle/Task.d.ts.map +1 -0
- package/lib/components/LifeCycle/Task.js +188 -0
- package/lib/components/LifeCycle/Task.js.map +1 -0
- package/lib/components/LifeCycle/index.d.ts +4 -0
- package/lib/components/LifeCycle/index.d.ts.map +1 -0
- package/lib/components/LifeCycle/index.js +2 -0
- package/lib/components/LifeCycle/index.js.map +1 -0
- package/lib/components/PageTemplates/GalleryPage.d.ts +23 -0
- package/lib/components/PageTemplates/GalleryPage.d.ts.map +1 -0
- package/lib/components/PageTemplates/GalleryPage.js +23 -0
- package/lib/components/PageTemplates/GalleryPage.js.map +1 -0
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts +9 -0
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts.map +1 -0
- package/lib/components/PageTemplates/GalleryPage.styles.js +70 -0
- package/lib/components/PageTemplates/GalleryPage.styles.js.map +1 -0
- package/lib/components/PageTemplates/PageTemplates.d.ts +27 -0
- package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -0
- package/lib/components/PageTemplates/PageTemplates.js +86 -0
- package/lib/components/PageTemplates/PageTemplates.js.map +1 -0
- package/lib/components/PageTemplates/index.d.ts +5 -0
- package/lib/components/PageTemplates/index.d.ts.map +1 -0
- package/lib/components/PageTemplates/index.js +4 -0
- package/lib/components/PageTemplates/index.js.map +1 -0
- package/lib/components/SummaryCard/SummaryCard.d.ts +16 -0
- package/lib/components/SummaryCard/SummaryCard.d.ts.map +1 -0
- package/lib/components/SummaryCard/SummaryCard.js +31 -0
- package/lib/components/SummaryCard/SummaryCard.js.map +1 -0
- package/lib/components/SummaryCard/index.d.ts +3 -0
- package/lib/components/SummaryCard/index.d.ts.map +1 -0
- package/lib/components/SummaryCard/index.js +3 -0
- package/lib/components/SummaryCard/index.js.map +1 -0
- package/lib/components/Visual/Visual.d.ts +17 -0
- package/lib/components/Visual/Visual.d.ts.map +1 -0
- package/lib/components/Visual/Visual.js +28 -0
- package/lib/components/Visual/Visual.js.map +1 -0
- package/lib/components/Visual/index.d.ts +3 -0
- package/lib/components/Visual/index.d.ts.map +1 -0
- package/lib/components/Visual/index.js +3 -0
- package/lib/components/Visual/index.js.map +1 -0
- package/lib/index.d.ts +9 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +9 -0
- package/lib/index.js.map +1 -1
- package/package.json +15 -14
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, Fragment } from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { Flex, Button, Icon, Tooltip, useElement, useI18n, createUID, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
|
+
import Task from './Task';
|
|
6
|
+
export const StyledCategory = styled.h3(({ showTitle, theme }) => {
|
|
7
|
+
return css `
|
|
8
|
+
${!showTitle &&
|
|
9
|
+
css `
|
|
10
|
+
visibility: hidden;
|
|
11
|
+
`}
|
|
12
|
+
margin: ${theme.base.spacing} 0 0 0;
|
|
13
|
+
`;
|
|
14
|
+
});
|
|
15
|
+
export const StyledList = styled.ol(({ category, theme, id }) => {
|
|
16
|
+
return css `
|
|
17
|
+
margin-block-start: ${theme.base.spacing};
|
|
18
|
+
margin-block-end: calc(2 * ${theme.base.spacing});
|
|
19
|
+
${category?.elementId !== id &&
|
|
20
|
+
` min-height: ${category?.height ? `${category.height}px` : 'auto'};
|
|
21
|
+
`}
|
|
22
|
+
`;
|
|
23
|
+
});
|
|
24
|
+
export const StyledParallelTitle = styled.div(({ theme }) => {
|
|
25
|
+
return css `
|
|
26
|
+
position: relative;
|
|
27
|
+
z-index: 1;
|
|
28
|
+
margin-block-end: 0.5rem;
|
|
29
|
+
text-align: center;
|
|
30
|
+
&::before {
|
|
31
|
+
border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};
|
|
32
|
+
content: '';
|
|
33
|
+
margin: 0 auto;
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 50%;
|
|
36
|
+
left: 0;
|
|
37
|
+
right: 0;
|
|
38
|
+
bottom: 0;
|
|
39
|
+
width: 100%;
|
|
40
|
+
z-index: -1;
|
|
41
|
+
}
|
|
42
|
+
span {
|
|
43
|
+
background: ${theme.base.colors.slate.medium};
|
|
44
|
+
padding: 0 ${theme.base.spacing};
|
|
45
|
+
border-radius: calc(0.25 * ${theme.base['border-radius']});
|
|
46
|
+
color: ${theme.base.colors.white};
|
|
47
|
+
text-transform: uppercase;
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
});
|
|
51
|
+
export const StyledAddTask = styled.div(({ theme }) => {
|
|
52
|
+
return css `
|
|
53
|
+
> button {
|
|
54
|
+
background: ${theme.base.palette['secondary-background']};
|
|
55
|
+
border-radius: calc(0.5 * ${theme.base['border-radius']});
|
|
56
|
+
width: 100%;
|
|
57
|
+
justify-content: flex-start;
|
|
58
|
+
padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});
|
|
59
|
+
> div {
|
|
60
|
+
margin: 0 calc(2 * ${theme.base.spacing});
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
`;
|
|
64
|
+
});
|
|
65
|
+
StyledAddTask.defaultProps = defaultThemeProp;
|
|
66
|
+
const Category = forwardRef(({ item, showTitle = false, stageItem, category, id, task, ...restProps }, ref) => {
|
|
67
|
+
const [addTaskEl, setAddTaskEl] = useElement();
|
|
68
|
+
let showAddTaskButton = true;
|
|
69
|
+
const t = useI18n();
|
|
70
|
+
if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {
|
|
71
|
+
showAddTaskButton = false;
|
|
72
|
+
}
|
|
73
|
+
/* Call back for click of add task button */
|
|
74
|
+
const onAddTaskClick = (e) => {
|
|
75
|
+
const param = {
|
|
76
|
+
category: item,
|
|
77
|
+
stage: stageItem
|
|
78
|
+
};
|
|
79
|
+
task?.addTask.onAddTask?.(param, e);
|
|
80
|
+
};
|
|
81
|
+
return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label }, void 0)), _jsxs(StyledList, { ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
|
|
82
|
+
item.tasks.length !== 0 &&
|
|
83
|
+
item.tasks.map((TaskItem, index) => {
|
|
84
|
+
if (Array.isArray(TaskItem)) {
|
|
85
|
+
if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {
|
|
86
|
+
showAddTaskButton = false;
|
|
87
|
+
}
|
|
88
|
+
/* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */
|
|
89
|
+
const parallelListItemId = createUID();
|
|
90
|
+
return (_jsxs(Fragment, { children: [index !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }, void 0) }, void 0)), TaskItem.map((parallelTask) => {
|
|
91
|
+
return (_jsx(Task, { id: parallelTask.id, value: parallelTask.label, item: parallelTask, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error, ...task, ...restProps }, parallelTask.id));
|
|
92
|
+
})] }, parallelListItemId));
|
|
93
|
+
}
|
|
94
|
+
return (_jsx(Task, { id: TaskItem.id, value: TaskItem.label, item: TaskItem, visual: TaskItem.visual, stageItem: stageItem, categoryItem: item, onAddStep: task?.onAddStep, error: TaskItem.error, ...task, ...restProps }, TaskItem.id));
|
|
95
|
+
}), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAddTask, children: _jsxs(Button, { variant: 'simple', icon: true, ref: setAddTaskEl, onClick: onAddTaskClick, children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx(Flex, { children: task?.addTask.title }, void 0)] }, void 0) }, void 0), _jsx(Tooltip, { target: addTaskEl, "aria-hidden": 'true', children: `${t('add')} ${task?.addTask.title}` }, void 0)] }, void 0))] }, void 0)] }, void 0));
|
|
96
|
+
});
|
|
97
|
+
export default Category;
|
|
98
|
+
//# sourceMappingURL=Category.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, Ref, Fragment, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n BaseProps,\n Flex,\n Button,\n Icon,\n Tooltip,\n useElement,\n useI18n,\n createUID,\n defaultThemeProp,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport {\n TaskItemProps,\n StageItemProps,\n CategoryItemProps,\n CategoriesItemProps,\n LifeCycleActionParam\n} from './LifeCycle.types';\nimport Task, { TaskProps } from './Task';\n\nexport interface CategoriesProps extends CategoriesItemProps {\n /* height property used to manipulate height of catergory dom */\n height?: number;\n elementId?: string;\n}\n\nexport interface CategoryProps extends BaseProps, NoChildrenProp {\n ref?: Ref<HTMLOListElement>;\n /* Pass the category items */\n item: CategoryItemProps;\n /* Enable the title for categories */\n showTitle?: boolean;\n /* Props of the categoryColumn */\n category?: CategoriesProps;\n /** Task component prop */\n task: TaskProps;\n /** Stage data - to be passed in callbacks */\n stageItem: StageItemProps;\n /** Id for the component */\n id?: string;\n}\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n return css`\n ${!showTitle &&\n css`\n visibility: hidden;\n `}\n margin: ${theme.base.spacing} 0 0 0;\n `;\n});\n\nexport const StyledList = styled.ol<{ category?: CategoriesProps | undefined; id: string }>(\n ({ category, theme, id }) => {\n return css`\n margin-block-start: ${theme.base.spacing};\n margin-block-end: calc(2 * ${theme.base.spacing});\n ${category?.elementId !== id &&\n ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n `}\n `;\n }\n);\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n return css`\n position: relative;\n z-index: 1;\n margin-block-end: 0.5rem;\n text-align: center;\n &::before {\n border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};\n content: '';\n margin: 0 auto;\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n z-index: -1;\n }\n span {\n background: ${theme.base.colors.slate.medium};\n padding: 0 ${theme.base.spacing};\n border-radius: calc(0.25 * ${theme.base['border-radius']});\n color: ${theme.base.colors.white};\n text-transform: uppercase;\n }\n `;\n});\n\nexport const StyledAddTask = styled.div(({ theme }) => {\n return css`\n > button {\n background: ${theme.base.palette['secondary-background']};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n width: 100%;\n justify-content: flex-start;\n padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n > div {\n margin: 0 calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: FunctionComponent<CategoryProps & ForwardProps> = forwardRef(\n (\n {\n item,\n showTitle = false,\n stageItem,\n category,\n id,\n task,\n ...restProps\n }: PropsWithoutRef<CategoryProps>,\n ref: CategoryProps['ref']\n ) => {\n const [addTaskEl, setAddTaskEl] = useElement();\n let showAddTaskButton = true;\n const t = useI18n();\n\n if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n showAddTaskButton = false;\n }\n /* Call back for click of add task button */\n const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n const param: LifeCycleActionParam = {\n category: item,\n stage: stageItem\n };\n task?.addTask.onAddTask?.(param, e);\n };\n\n return (\n <>\n {category?.label && (\n <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n {category?.label}\n </StyledCategory>\n )}\n <StyledList\n ref={ref}\n role='gridcell'\n category={category}\n id={item?.id}\n data-id={item?.categoryId}\n >\n {item &&\n item.tasks.length !== 0 &&\n item.tasks.map((TaskItem: TaskItemProps | TaskItemProps[], index: number) => {\n if (Array.isArray(TaskItem)) {\n if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {\n showAddTaskButton = false;\n }\n /* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */\n const parallelListItemId = createUID();\n return (\n <Fragment key={parallelListItemId}>\n {index !== 0 && (\n <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n <span>{t('parallel')}</span>\n </Flex>\n )}\n {TaskItem.map((parallelTask: TaskItemProps) => {\n return (\n <Task\n key={parallelTask.id}\n id={parallelTask.id}\n value={parallelTask.label}\n item={parallelTask}\n visual={parallelTask.visual}\n stageItem={stageItem}\n categoryItem={item}\n error={parallelTask.error}\n {...task}\n {...restProps}\n />\n );\n })}\n </Fragment>\n );\n }\n return (\n <Task\n key={TaskItem.id}\n id={TaskItem.id}\n value={TaskItem.label}\n item={TaskItem}\n visual={TaskItem.visual}\n stageItem={stageItem}\n categoryItem={item}\n onAddStep={task?.onAddStep}\n error={TaskItem.error}\n {...task}\n {...restProps}\n />\n );\n })}\n {(showAddTaskButton || !item) && (\n <>\n <Flex as={StyledAddTask}>\n <Button variant='simple' icon ref={setAddTaskEl} onClick={onAddTaskClick}>\n <Icon name='plus' />\n <Flex>{task?.addTask.title}</Flex>\n </Button>\n </Flex>\n <Tooltip target={addTaskEl} aria-hidden='true'>\n {`${t('add')} ${task?.addTask.title}`}\n </Tooltip>\n </>\n )}\n </StyledList>\n </>\n );\n }\n);\n\nexport default Category;\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { FunctionComponent, Ref } from 'react';
|
|
2
|
+
import { BaseProps, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
+
import { StageItemProps } from './LifeCycle.types';
|
|
4
|
+
import { StageProps } from './Stage';
|
|
5
|
+
import { CategoriesProps } from './Category';
|
|
6
|
+
import { TaskProps } from './Task';
|
|
7
|
+
import { StepProps } from './Step';
|
|
8
|
+
export interface LifeCycleProps extends BaseProps, NoChildrenProp {
|
|
9
|
+
ref?: Ref<HTMLDivElement>;
|
|
10
|
+
items: StageItemProps[];
|
|
11
|
+
alternateItems?: StageItemProps[];
|
|
12
|
+
task: TaskProps[];
|
|
13
|
+
stage: StageProps;
|
|
14
|
+
alternateStage: StageProps;
|
|
15
|
+
categories: CategoriesProps[];
|
|
16
|
+
step: StepProps[];
|
|
17
|
+
onAddStage: () => void;
|
|
18
|
+
onAddAlternateStage: () => void;
|
|
19
|
+
}
|
|
20
|
+
declare const LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps>;
|
|
21
|
+
export default LifeCycle;
|
|
22
|
+
//# sourceMappingURL=LifeCycle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAE/D,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAeD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA4H/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { defaultThemeProp, Flex, Button, Icon, useI18n } from '@pega/cosmos-react-core';
|
|
5
|
+
import LifeCycleList from './LifeCycleList';
|
|
6
|
+
const StyledLifeCycle = styled.ol ``;
|
|
7
|
+
StyledLifeCycle.defaultProps = defaultThemeProp;
|
|
8
|
+
const StyledAddButton = styled(Button)(({ theme }) => {
|
|
9
|
+
return css `
|
|
10
|
+
align-self: flex-start;
|
|
11
|
+
margin-block-start: calc(${theme.base.spacing} / 2);
|
|
12
|
+
`;
|
|
13
|
+
});
|
|
14
|
+
StyledAddButton.defaultProps = defaultThemeProp;
|
|
15
|
+
const LifeCycle = forwardRef(({ items, categories, alternateItems = [], onAddStage, onAddAlternateStage, stage, alternateStage, ...restProps }, ref) => {
|
|
16
|
+
const lifeCycleEl = useRef(null);
|
|
17
|
+
const t = useI18n();
|
|
18
|
+
const [categoriesState, setcategoriesState] = useState(categories);
|
|
19
|
+
const categoryElements = [];
|
|
20
|
+
const setRef = (element) => {
|
|
21
|
+
if (element) {
|
|
22
|
+
categoryElements.push(element);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
useLayoutEffect(() => {
|
|
26
|
+
let isHeightChanged = false;
|
|
27
|
+
const categoriesColumn = [...categories];
|
|
28
|
+
if (categoriesColumn && categoriesColumn.length > 0) {
|
|
29
|
+
categoriesColumn.forEach((categoryItem, index) => {
|
|
30
|
+
const categoryElm = [...categoryElements];
|
|
31
|
+
let isActiveElement = false;
|
|
32
|
+
const categoryComponent = categoryElm.filter((element) => {
|
|
33
|
+
if (element.getAttribute('data-id') === categoryItem.id) {
|
|
34
|
+
if (categoryItem.elementId === element.getAttribute('id')) {
|
|
35
|
+
isActiveElement = true;
|
|
36
|
+
}
|
|
37
|
+
return true;
|
|
38
|
+
}
|
|
39
|
+
return false;
|
|
40
|
+
});
|
|
41
|
+
if (!isActiveElement) {
|
|
42
|
+
categoryItem.elementId = '';
|
|
43
|
+
categoryItem.height = 0;
|
|
44
|
+
}
|
|
45
|
+
categoryComponent.forEach(categoryElement => {
|
|
46
|
+
const columnHeight = categoryItem?.height ?? 0;
|
|
47
|
+
const height = categoryElement.scrollHeight;
|
|
48
|
+
const elementId = categoryElement.getAttribute('id');
|
|
49
|
+
if (height > columnHeight ||
|
|
50
|
+
(categoryItem.elementId === elementId && height !== columnHeight)) {
|
|
51
|
+
isHeightChanged = true;
|
|
52
|
+
categoriesColumn[index].height = height;
|
|
53
|
+
if (elementId)
|
|
54
|
+
categoriesColumn[index].elementId = elementId;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
if (isHeightChanged) {
|
|
59
|
+
isHeightChanged = false;
|
|
60
|
+
setcategoriesState(categoriesColumn);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
return (_jsxs(Flex, { container: { itemGap: 2 }, ref: ref, children: [_jsxs(Flex, { as: StyledLifeCycle, ref: lifeCycleEl, container: true, role: 'grid', "aria-label": t('stage'), children: [items.map((stageItem, index, stageArray) => {
|
|
65
|
+
const listId = stageItem.id;
|
|
66
|
+
return (_jsx(LifeCycleList, { id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, stage: stage, categories: categoriesState, ...restProps }, listId));
|
|
67
|
+
}), _jsx(StyledAddButton, { variant: 'simple', label: t('add_stage'), icon: true, onClick: onAddStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0), alternateItems.length !== 0 && (_jsxs(Flex, { as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": t('alternate_stage'), children: [alternateItems.map((stageItem) => {
|
|
68
|
+
const listId = stageItem.id;
|
|
69
|
+
return (_jsx(LifeCycleList, { id: listId, item: stageItem, ref: setRef, categories: categoriesState, stageVariant: 'alternate', stage: alternateStage, ...restProps }, listId));
|
|
70
|
+
}), _jsx(StyledAddButton, { variant: 'simple', label: t('add_alternate_stage'), icon: true, onClick: onAddAlternateStage, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0))] }, void 0));
|
|
71
|
+
});
|
|
72
|
+
export default LifeCycle;
|
|
73
|
+
//# sourceMappingURL=LifeCycle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LifeCycle.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n BaseProps,\n ForwardProps,\n Flex,\n Button,\n Icon,\n useI18n,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport LifeCycleList from './LifeCycleList';\nimport { StageItemProps } from './LifeCycle.types';\nimport { StageProps } from './Stage';\nimport { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleProps extends BaseProps, NoChildrenProp {\n /* Pass reference to the LifeCycleComponent */\n ref?: Ref<HTMLDivElement>;\n /* Array of stages and its contents */\n items: StageItemProps[];\n /* Array of alternate stages and its contents */\n alternateItems?: StageItemProps[];\n /* Props for the task component */\n task: TaskProps[];\n /* Props for the Stage component */\n stage: StageProps;\n /* Props for the AlternatStage component */\n alternateStage: StageProps;\n /* Props for the Cluster component */\n categories: CategoriesProps[];\n /* Props for the Step component */\n step: StepProps[];\n /* Call back function for on AddState */\n onAddStage: () => void;\n /* Call back function to add alternate stages */\n onAddAlternateStage: () => void;\n}\n\nconst StyledLifeCycle = styled.ol``;\n\nStyledLifeCycle.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(({ theme }) => {\n return css`\n align-self: flex-start;\n margin-block-start: calc(${theme.base.spacing} / 2);\n `;\n});\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps> = forwardRef(\n (\n {\n items,\n categories,\n alternateItems = [],\n onAddStage,\n onAddAlternateStage,\n stage,\n alternateStage,\n ...restProps\n }: PropsWithoutRef<LifeCycleProps>,\n ref: LifeCycleProps['ref']\n ) => {\n const lifeCycleEl = useRef(null);\n const t = useI18n();\n const [categoriesState, setcategoriesState] = useState(categories);\n const categoryElements: HTMLElement[] = [];\n const setRef = (element: HTMLOListElement) => {\n if (element) {\n categoryElements.push(element);\n }\n };\n\n useLayoutEffect(() => {\n let isHeightChanged = false;\n const categoriesColumn = [...categories];\n if (categoriesColumn && categoriesColumn.length > 0) {\n categoriesColumn.forEach((categoryItem, index) => {\n const categoryElm = [...categoryElements];\n let isActiveElement = false;\n const categoryComponent = categoryElm.filter((element: HTMLElement) => {\n if (element.getAttribute('data-id') === categoryItem.id) {\n if (categoryItem.elementId === element.getAttribute('id')) {\n isActiveElement = true;\n }\n return true;\n }\n return false;\n });\n if (!isActiveElement) {\n categoryItem.elementId = '';\n categoryItem.height = 0;\n }\n categoryComponent.forEach(categoryElement => {\n const columnHeight = categoryItem?.height ?? 0;\n const height = categoryElement.scrollHeight;\n const elementId = categoryElement.getAttribute('id');\n if (\n height > columnHeight ||\n (categoryItem.elementId === elementId && height !== columnHeight)\n ) {\n isHeightChanged = true;\n categoriesColumn[index].height = height;\n if (elementId) categoriesColumn[index].elementId = elementId;\n }\n });\n });\n if (isHeightChanged) {\n isHeightChanged = false;\n setcategoriesState(categoriesColumn);\n }\n }\n });\n\n return (\n <Flex container={{ itemGap: 2 }} ref={ref}>\n <Flex as={StyledLifeCycle} ref={lifeCycleEl} container role='grid' aria-label={t('stage')}>\n {items.map((stageItem: StageItemProps, index: number, stageArray: StageItemProps[]) => {\n const listId = stageItem.id;\n return (\n <LifeCycleList\n key={listId}\n id={listId}\n item={stageItem}\n isFirstItem={index === 0}\n isLastItem={index === stageArray.length - 1}\n ref={setRef}\n stage={stage}\n categories={categoriesState}\n {...restProps}\n />\n );\n })}\n <StyledAddButton variant='simple' label={t('add_stage')} icon onClick={onAddStage}>\n <Icon name='plus' />\n </StyledAddButton>\n </Flex>\n {alternateItems.length !== 0 && (\n <Flex\n as={StyledLifeCycle}\n container\n ref={lifeCycleEl}\n role='grid'\n aria-label={t('alternate_stage')}\n >\n {alternateItems.map((stageItem: StageItemProps) => {\n const listId = stageItem.id;\n return (\n <LifeCycleList\n key={listId}\n id={listId}\n item={stageItem}\n ref={setRef}\n categories={categoriesState}\n stageVariant='alternate'\n stage={alternateStage}\n {...restProps}\n />\n );\n })}\n <StyledAddButton\n variant='simple'\n label={t('add_alternate_stage')}\n icon\n onClick={onAddAlternateStage}\n >\n <Icon name='plus' />\n </StyledAddButton>\n </Flex>\n )}\n </Flex>\n );\n }\n);\n\nexport default LifeCycle;\n"]}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import { Action, StatusProps } from '@pega/cosmos-react-core';
|
|
3
|
+
export interface VisualColorProps {
|
|
4
|
+
color: 'magenta' | 'studio' | 'congressBlue' | 'Japaneselaurel' | 'violet' | 'yellow' | 'orange' | 'darkyellow';
|
|
5
|
+
}
|
|
6
|
+
export interface StepItemProps {
|
|
7
|
+
id: string;
|
|
8
|
+
label: string;
|
|
9
|
+
visual: {
|
|
10
|
+
color: VisualColorProps['color'];
|
|
11
|
+
icon: string;
|
|
12
|
+
label: string;
|
|
13
|
+
imgurl: string;
|
|
14
|
+
};
|
|
15
|
+
status: {
|
|
16
|
+
type?: StatusProps['variant'] | '';
|
|
17
|
+
label: string;
|
|
18
|
+
};
|
|
19
|
+
error: string;
|
|
20
|
+
}
|
|
21
|
+
export interface TaskItemProps {
|
|
22
|
+
id: string;
|
|
23
|
+
label: string;
|
|
24
|
+
visual: {
|
|
25
|
+
imgurl: string;
|
|
26
|
+
};
|
|
27
|
+
error: string;
|
|
28
|
+
steps: StepItemProps[];
|
|
29
|
+
}
|
|
30
|
+
export interface StageItemProps {
|
|
31
|
+
id: string;
|
|
32
|
+
label: string;
|
|
33
|
+
categories: CategoryItemProps[];
|
|
34
|
+
type: 'start' | 'default' | 'resolution' | 'alternate';
|
|
35
|
+
error: string;
|
|
36
|
+
}
|
|
37
|
+
export interface CategoryItemProps {
|
|
38
|
+
id: string;
|
|
39
|
+
categoryId: string;
|
|
40
|
+
tasks: TaskItemProps[] | TaskItemProps[][];
|
|
41
|
+
}
|
|
42
|
+
export interface CategoriesItemProps {
|
|
43
|
+
label: string;
|
|
44
|
+
id: string;
|
|
45
|
+
}
|
|
46
|
+
export interface LifeCycleActionParam {
|
|
47
|
+
value?: string;
|
|
48
|
+
stage?: StageItemProps;
|
|
49
|
+
task?: TaskItemProps;
|
|
50
|
+
category?: CategoryItemProps;
|
|
51
|
+
step?: StepItemProps;
|
|
52
|
+
}
|
|
53
|
+
export interface LifeCycleAction extends Omit<Action, 'onClick'> {
|
|
54
|
+
onClick: (param: LifeCycleActionParam, e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>) => void;
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=LifeCycle.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LifeCycle.types.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EACD,SAAS,GACT,QAAQ,GACR,cAAc,GACd,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAE7B,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAEhC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAEhC,EAAE,EAAE,MAAM,CAAC;IAEX,UAAU,EAAE,MAAM,CAAC;IAEnB,KAAK,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;IAC9D,OAAO,EAAE,CACP,KAAK,EAAE,oBAAoB,EAC3B,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;CACX"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LifeCycle.types.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action, StatusProps } from '@pega/cosmos-react-core';\n\nexport interface VisualColorProps {\n color:\n | 'magenta'\n | 'studio'\n | 'congressBlue'\n | 'Japaneselaurel'\n | 'violet'\n | 'yellow'\n | 'orange'\n | 'darkyellow';\n}\n\nexport interface StepItemProps {\n id: string;\n label: string;\n visual: {\n color: VisualColorProps['color'];\n icon: string;\n label: string;\n imgurl: string;\n };\n status: { type?: StatusProps['variant'] | ''; label: string };\n error: string;\n}\n\nexport interface TaskItemProps {\n id: string;\n label: string;\n visual: {\n imgurl: string;\n };\n error: string;\n steps: StepItemProps[];\n}\n\nexport interface StageItemProps {\n /* Data model should have id of the stage item */\n id: string;\n /* Data model should have the stage label */\n label: string;\n /* Data model should have the categoryData array */\n categories: CategoryItemProps[];\n /* Data model should have the stageType as below */\n type: 'start' | 'default' | 'resolution' | 'alternate';\n error: string;\n}\n\nexport interface CategoryItemProps {\n /* Data model should have id of the stage item */\n id: string;\n /* Data model should have id of the stage item */\n categoryId: string;\n /* Data model should have the categoryData array */\n tasks: TaskItemProps[] | TaskItemProps[][];\n}\n\nexport interface CategoriesItemProps {\n label: string;\n id: string;\n}\n\nexport interface LifeCycleActionParam {\n value?: string;\n stage?: StageItemProps;\n task?: TaskItemProps;\n category?: CategoryItemProps;\n step?: StepItemProps;\n}\n\nexport interface LifeCycleAction extends Omit<Action, 'onClick'> {\n onClick: (\n param: LifeCycleActionParam,\n e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n ) => void;\n}\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { FunctionComponent, Ref } from 'react';
|
|
2
|
+
import type { NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
+
import { StageItemProps } from './LifeCycle.types';
|
|
4
|
+
import { StageProps } from './Stage';
|
|
5
|
+
import { CategoriesProps } from './Category';
|
|
6
|
+
import { TaskProps } from './Task';
|
|
7
|
+
import { StepProps } from './Step';
|
|
8
|
+
export interface LifeCycleListProps extends NoChildrenProp {
|
|
9
|
+
ref?: Ref<HTMLOListElement>;
|
|
10
|
+
categories: CategoriesProps[];
|
|
11
|
+
task: TaskProps[];
|
|
12
|
+
stage?: StageProps;
|
|
13
|
+
step?: StepProps[];
|
|
14
|
+
item: StageItemProps;
|
|
15
|
+
isFirstItem?: boolean;
|
|
16
|
+
isLastItem?: boolean;
|
|
17
|
+
stageVariant?: 'start' | 'default' | 'resolution' | 'alternate';
|
|
18
|
+
id?: string;
|
|
19
|
+
}
|
|
20
|
+
declare const LifeCycleList: FunctionComponent<LifeCycleListProps>;
|
|
21
|
+
export default LifeCycleList;
|
|
22
|
+
//# sourceMappingURL=LifeCycleList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LifeCycleList.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,EAAE,cAAc,EAAqB,MAAM,mBAAmB,CAAC;AACtE,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAiB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAEnB,IAAI,EAAE,cAAc,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;IAEhE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAoBD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAiGxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { createElement as _createElement } from "react";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import styled, { css } from 'styled-components';
|
|
5
|
+
import { createUID, useDirection } from '@pega/cosmos-react-core';
|
|
6
|
+
import Stage from './Stage';
|
|
7
|
+
import Category from './Category';
|
|
8
|
+
const StyledLifeCycleList = styled.li(({ theme, lastItem }) => {
|
|
9
|
+
const { rtl } = useDirection();
|
|
10
|
+
return css `
|
|
11
|
+
list-style-type: none;
|
|
12
|
+
padding: 0 ${theme.base.spacing} 0 0;
|
|
13
|
+
width: 15rem;
|
|
14
|
+
${lastItem &&
|
|
15
|
+
css `
|
|
16
|
+
padding: 0 calc(0.5 * ${theme.base.spacing}) 0 0;
|
|
17
|
+
`}
|
|
18
|
+
${lastItem &&
|
|
19
|
+
rtl &&
|
|
20
|
+
css `
|
|
21
|
+
padding: 0 ${theme.base.spacing} 0 calc(0.5 * ${theme.base.spacing});
|
|
22
|
+
`}
|
|
23
|
+
`;
|
|
24
|
+
});
|
|
25
|
+
const LifeCycleList = forwardRef(({ item, isFirstItem, categories, isLastItem, stage: stageProps, task, step, stageVariant, id, ...restProps }, ref) => {
|
|
26
|
+
const showTitle = isFirstItem || false;
|
|
27
|
+
let sortedCategory = [];
|
|
28
|
+
const listId = id || createUID();
|
|
29
|
+
/* Function used to rearrange the category data depends on Categories order */
|
|
30
|
+
const catgoryItem = (categoryData) => {
|
|
31
|
+
const sortedColumn = [];
|
|
32
|
+
if (categories && categories.length > 0 && categoryData.length > 0) {
|
|
33
|
+
categories.forEach(categoryColumnItem => {
|
|
34
|
+
categoryData.forEach((categoryItem) => {
|
|
35
|
+
if (categoryItem.categoryId === categoryColumnItem.id) {
|
|
36
|
+
sortedColumn.push(categoryItem);
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
return sortedColumn;
|
|
42
|
+
};
|
|
43
|
+
if (categories && categories.length !== 0) {
|
|
44
|
+
sortedCategory = catgoryItem(item.categories);
|
|
45
|
+
}
|
|
46
|
+
return (_jsxs(StyledLifeCycleList, { role: 'row', lastItem: isLastItem, children: [_jsx(Stage, { value: item.label, variant: stageVariant || (item.type ? item.type : 'default'), item: item, tailPointed: isFirstItem, headPointed: isLastItem, error: item.error, id: item.id, ...stageProps }, void 0), sortedCategory.length !== 0 &&
|
|
47
|
+
sortedCategory.map((categoryItem, categoryindex) => {
|
|
48
|
+
const taskProps = task[categoryindex];
|
|
49
|
+
let stepProps;
|
|
50
|
+
if (step)
|
|
51
|
+
stepProps = step[categoryindex];
|
|
52
|
+
return (_createElement(Category, { ...restProps, key: categoryItem.categoryId, role: 'gridcell', id: categoryItem.categoryId, ref: ref, category: categories[categoryindex], item: categoryItem, showTitle: showTitle, stageItem: item, task: taskProps, step: stepProps }));
|
|
53
|
+
}), sortedCategory.length === 0 &&
|
|
54
|
+
categories.length === 0 &&
|
|
55
|
+
item.categories.length > 0 &&
|
|
56
|
+
item.categories.map((categoryItem, categoryindex) => {
|
|
57
|
+
const taskProps = task[categoryindex];
|
|
58
|
+
let stepProps;
|
|
59
|
+
if (step)
|
|
60
|
+
stepProps = step[categoryindex];
|
|
61
|
+
return (_jsx(Category, { role: 'gridcell', id: categoryItem.categoryId, ref: ref, item: categoryItem, stageItem: item, task: taskProps, step: stepProps, showTitle: showTitle }, categoryItem.categoryId));
|
|
62
|
+
})] }, listId));
|
|
63
|
+
});
|
|
64
|
+
export default LifeCycleList;
|
|
65
|
+
//# sourceMappingURL=LifeCycleList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LifeCycleList.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { NoChildrenProp } from '@pega/cosmos-react-core';\nimport { createUID, useDirection } from '@pega/cosmos-react-core';\n\nimport { StageItemProps, CategoryItemProps } from './LifeCycle.types';\nimport Stage, { StageProps } from './Stage';\nimport Category, { CategoriesProps } from './Category';\nimport { TaskProps } from './Task';\nimport { StepProps } from './Step';\n\nexport interface LifeCycleListProps extends NoChildrenProp {\n /* Pass reference to the LifeCycleComponent */\n ref?: Ref<HTMLOListElement>;\n /* Array of categories column props */\n categories: CategoriesProps[];\n /* Array of Task props */\n task: TaskProps[];\n /* Array of Step props */\n stage?: StageProps;\n /* Array of Stage props */\n step?: StepProps[];\n /* Data model should be have stages array */\n item: StageItemProps;\n /* Count of number of stages */\n isFirstItem?: boolean;\n /* Index of stages item */\n isLastItem?: boolean;\n /* type of stages */\n stageVariant?: 'start' | 'default' | 'resolution' | 'alternate';\n /* id for the list item */\n id?: string;\n}\n\nconst StyledLifeCycleList = styled.li<{ lastItem: boolean | undefined }>(({ theme, lastItem }) => {\n const { rtl } = useDirection();\n return css`\n list-style-type: none;\n padding: 0 ${theme.base.spacing} 0 0;\n width: 15rem;\n ${lastItem &&\n css`\n padding: 0 calc(0.5 * ${theme.base.spacing}) 0 0;\n `}\n ${lastItem &&\n rtl &&\n css`\n padding: 0 ${theme.base.spacing} 0 calc(0.5 * ${theme.base.spacing});\n `}\n `;\n});\n\nconst LifeCycleList: FunctionComponent<LifeCycleListProps> = forwardRef(\n (\n {\n item,\n isFirstItem,\n categories,\n isLastItem,\n stage: stageProps,\n task,\n step,\n stageVariant,\n id,\n ...restProps\n }: LifeCycleListProps,\n ref: LifeCycleListProps['ref']\n ) => {\n const showTitle = isFirstItem || false;\n let sortedCategory: CategoryItemProps[] = [];\n const listId = id || createUID();\n\n /* Function used to rearrange the category data depends on Categories order */\n const catgoryItem = (categoryData: CategoryItemProps[]) => {\n const sortedColumn: CategoryItemProps[] = [];\n if (categories && categories.length > 0 && categoryData.length > 0) {\n categories.forEach(categoryColumnItem => {\n categoryData.forEach((categoryItem: CategoryItemProps) => {\n if (categoryItem.categoryId === categoryColumnItem.id) {\n sortedColumn.push(categoryItem);\n }\n });\n });\n }\n return sortedColumn;\n };\n\n if (categories && categories.length !== 0) {\n sortedCategory = catgoryItem(item.categories);\n }\n\n return (\n <StyledLifeCycleList key={listId} role='row' lastItem={isLastItem}>\n <Stage\n value={item.label}\n variant={stageVariant || (item.type ? item.type : 'default')}\n item={item}\n tailPointed={isFirstItem}\n headPointed={isLastItem}\n error={item.error}\n id={item.id}\n {...stageProps}\n />\n {sortedCategory.length !== 0 &&\n sortedCategory.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n const taskProps = task[categoryindex];\n let stepProps;\n if (step) stepProps = step[categoryindex];\n return (\n <Category\n {...restProps}\n key={categoryItem.categoryId}\n role='gridcell'\n id={categoryItem.categoryId}\n ref={ref}\n category={categories[categoryindex]}\n item={categoryItem}\n showTitle={showTitle}\n stageItem={item}\n task={taskProps}\n step={stepProps}\n />\n );\n })}\n {sortedCategory.length === 0 &&\n categories.length === 0 &&\n item.categories.length > 0 &&\n item.categories.map((categoryItem: CategoryItemProps, categoryindex: number) => {\n const taskProps = task[categoryindex];\n let stepProps;\n if (step) stepProps = step[categoryindex];\n\n return (\n <Category\n key={categoryItem.categoryId}\n role='gridcell'\n id={categoryItem.categoryId}\n ref={ref}\n item={categoryItem}\n stageItem={item}\n task={taskProps}\n step={stepProps}\n showTitle={showTitle}\n />\n );\n })}\n </StyledLifeCycleList>\n );\n }\n);\n\nexport default LifeCycleList;\n"]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { FunctionComponent, Ref, ChangeEvent, FocusEvent } from 'react';
|
|
2
|
+
import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { LifeCycleAction, LifeCycleActionParam, StageItemProps } from './LifeCycle.types';
|
|
4
|
+
export interface StageProps extends Omit<FormControlProps, 'status' | 'id'> {
|
|
5
|
+
/** Pass an array of Action objects to append button(s) inline with the Input. */
|
|
6
|
+
actions?: LifeCycleAction[];
|
|
7
|
+
/** Callback for Add stage */
|
|
8
|
+
onAddStage?: () => void;
|
|
9
|
+
/** Callback for Adding alternate stage */
|
|
10
|
+
onAddAlternateStage?: () => void;
|
|
11
|
+
/** Input Change */
|
|
12
|
+
onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
|
|
13
|
+
/** onFocus of input */
|
|
14
|
+
onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
|
|
15
|
+
}
|
|
16
|
+
export interface StageComponentProps extends BaseProps, StageProps {
|
|
17
|
+
ref?: Ref<HTMLDivElement>;
|
|
18
|
+
/** Pass text for the task. */
|
|
19
|
+
value: string;
|
|
20
|
+
id: string;
|
|
21
|
+
/** Controls the styling of the stage. */
|
|
22
|
+
variant?: StageItemProps['type'] | 'default';
|
|
23
|
+
/** To make the stage with pointed tail */
|
|
24
|
+
tailPointed?: boolean;
|
|
25
|
+
/** To make the stage with pointed head */
|
|
26
|
+
headPointed?: boolean;
|
|
27
|
+
/** Full data object which can be passed to the callback */
|
|
28
|
+
item: StageItemProps;
|
|
29
|
+
error?: string;
|
|
30
|
+
}
|
|
31
|
+
export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
32
|
+
export declare const StyledDragIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
33
|
+
error: string;
|
|
34
|
+
}, never>;
|
|
35
|
+
export declare const StyledInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
|
|
36
|
+
error: string | undefined;
|
|
37
|
+
}, never>;
|
|
38
|
+
export declare const StyledStageActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
39
|
+
error?: string | undefined;
|
|
40
|
+
}, never>;
|
|
41
|
+
export declare const StyledStage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StageComponentProps, "variant"> & {
|
|
42
|
+
tailPointed: boolean;
|
|
43
|
+
headPointed: boolean;
|
|
44
|
+
status: boolean;
|
|
45
|
+
}, never>;
|
|
46
|
+
export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
47
|
+
declare const Stage: FunctionComponent<StageComponentProps & ForwardProps>;
|
|
48
|
+
export default Stage;
|
|
49
|
+
//# sourceMappingURL=Stage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stage.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EACH,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,SAAS,EACT,YAAY,EAKZ,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE1F,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,uBAAuB;IACvB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAClF;AAED,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,UAAU;IAChE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IAEd,EAAE,EAAE,MAAM,CAAC;IACX,yCAAyC;IACzC,OAAO,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IAC7C,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2DAA2D;IAC3D,IAAI,EAAE,cAAc,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAEF,eAAO,MAAM,cAAc;WAAuB,MAAM;SAatD,CAAC;AAEH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAEH,eAAO,MAAM,kBAAkB;;SAiB7B,CAAC;AAEH,eAAO,MAAM,WAAW;iBAEP,OAAO;iBACP,OAAO;YACZ,OAAO;SA8KjB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAgHhE,CAAC;AAEF,eAAe,KAAK,CAAC"}
|