@pega/cosmos-react-build 3.0.0-dev.14.0 → 3.0.0-dev.15.0
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/DynamicContentEditor/DynamicContentEditor.js +15 -15
- package/lib/components/DynamicContentEditor/DynamicContentEditor.js.map +1 -1
- package/lib/components/LifeCycle/Category.d.ts.map +1 -1
- package/lib/components/LifeCycle/Category.js +9 -8
- package/lib/components/LifeCycle/Category.js.map +1 -1
- package/package.json +3 -3
|
@@ -174,27 +174,27 @@ const DynamicContentEditor = forwardRef(({ form: { dynamicContentPicker, onSubmi
|
|
|
174
174
|
}, [modalProps]);
|
|
175
175
|
const onEditorChange = (formEditor) => {
|
|
176
176
|
if (formEditor) {
|
|
177
|
-
const targetEl = formEditor
|
|
178
|
-
const { left = 0, top = 0 } = targetEl;
|
|
177
|
+
const targetEl = formEditor.selection.getBoundingClientRect();
|
|
178
|
+
const { left = 0, top = 0 } = targetEl ?? {};
|
|
179
179
|
setCurrentCursorPosition({
|
|
180
|
-
...formEditor
|
|
180
|
+
...formEditor.selection.getBoundingClientRect(),
|
|
181
181
|
x: left,
|
|
182
182
|
y: top,
|
|
183
183
|
toJSON: () => { }
|
|
184
184
|
});
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
185
|
+
if (formEditor.selection.isCollapsed()) {
|
|
186
|
+
// get the full line string
|
|
187
|
+
const selectedRange = formEditor.selection.getRng();
|
|
188
|
+
const endOffset = selectedRange.endOffset;
|
|
189
|
+
const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);
|
|
190
|
+
const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];
|
|
191
|
+
if (fieldString?.startsWith('@') &&
|
|
192
|
+
fieldString.indexOf('@') === fieldString.lastIndexOf('@')) {
|
|
193
|
+
filterFieldMenu(fieldString.slice(1));
|
|
194
|
+
}
|
|
195
|
+
else
|
|
196
|
+
setShowFieldsPopover(false);
|
|
195
197
|
}
|
|
196
|
-
else
|
|
197
|
-
setShowFieldsPopover(false);
|
|
198
198
|
}
|
|
199
199
|
};
|
|
200
200
|
const onKeyDown = event => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useContext,\n useRef,\n useEffect,\n useState\n} from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Menu,\n menuHelpers,\n MenuProps,\n Modal,\n ModalManagerContext,\n ModalMethods,\n Popover,\n PropsWithDefaults,\n StyledPopover,\n useConsolidatedRef,\n useI18n,\n useUID\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n forwardRef(\n (\n {\n form: { dynamicContentPicker, onSubmit },\n onActiveFieldChange,\n label,\n toolbar,\n fieldItems,\n defaultValue,\n onBlur,\n ...restProps\n }: PropsWithoutRef<DynamicContentEditorProps>,\n ref: DynamicContentEditorProps['ref']\n ) => {\n const menuID = useUID();\n const { create } = useContext(ModalManagerContext);\n const t = useI18n();\n\n const modalMethods = useRef<ModalMethods>();\n const [editor, setEditor] = useState<TinyMCEEditor | undefined>();\n const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n const [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems || []);\n const [currentElementId, setCurrentElementId] = useState('');\n const [currentElementContent, setCurrentElementContent] = useState('');\n const [currentCursorPosition, setCurrentCursorPosition] = useState({\n bottom: 0,\n height: 0,\n left: 0,\n right: 0,\n top: 0,\n width: 0,\n x: 0,\n y: 0,\n toJSON: () => {}\n });\n const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n const fieldPopoverRef = useRef<HTMLDivElement>(null);\n const editorRef = useConsolidatedRef(ref);\n\n const tooltip = getKeyCommand(\n navigator.appVersion.includes('Mac'),\n ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n );\n\n const insertField = (field: ItemType) => {\n if (!editor) return;\n\n const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n if (bookmark) {\n editor.selection.moveToBookmark(bookmark);\n editor.selection.setContent(fieldContent);\n } else {\n editor.insertContent(fieldContent);\n }\n\n modalMethods.current?.dismiss();\n };\n\n const modalProps = {\n children: dynamicContentPicker,\n heading: t('rte_insert_field'),\n actions: (\n <>\n <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={() => onSubmit(insertField)}>\n {t('submit')}\n </Button>\n </>\n ),\n center: true,\n onAfterClose: () => {\n setBookmark(undefined);\n setCurrentElementId('');\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementId) {\n onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n }\n }\n };\n\n const findAndRenameField = (fieldId: string) => {\n if (!editor || !fieldMenuItems) return;\n\n const selectedRange = editor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n if (stringToSearch === undefined) return;\n\n const splitSearch = stringToSearch.split(' ');\n const fieldString = splitSearch[splitSearch.length - 1];\n const range = editor.getDoc().createRange();\n\n const startPos = stringToSearch.lastIndexOf(fieldString);\n const endPos = startPos + fieldString.length;\n range.setStart(selectedRange.commonAncestorContainer, startPos);\n range.setEnd(selectedRange.commonAncestorContainer, endPos);\n editor.getDoc().getSelection()?.removeAllRanges();\n editor.getDoc().getSelection()?.addRange(range);\n\n const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n if (selectedField) {\n editor.selection.setContent(\n `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedField.id}>${selectedField.primary}</pega-reference>`\n );\n setShowFieldsPopover(false);\n }\n };\n\n const hidePopover = () => {\n if (fieldPopoverRef) setShowFieldsPopover(false);\n };\n\n const filterFieldMenu = (searchString: string) => {\n setShowFieldsPopover(true);\n setFieldMenuItems(fieldItems || []);\n if (/\\s/.test(searchString)) {\n setShowFieldsPopover(false);\n return;\n }\n if (searchString && fieldMenuItems) {\n const newFieldMenuItems: MenuProps['items'] = menuHelpers\n .flatten(fieldMenuItems)\n .filter(({ primary }) =>\n primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n );\n if (newFieldMenuItems) {\n setShowFieldsPopover(true);\n setFieldMenuItems(newFieldMenuItems);\n } else setShowFieldsPopover(false);\n }\n };\n\n const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n const targetEl = editorSelection.getNode() as HTMLElement;\n const fieldId = targetEl.getAttribute('data-rule-id');\n const fieldValue = targetEl.innerText;\n setBookmark(editorSelection.getBookmark());\n setCurrentElementId(fieldId || '');\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = ({ target }: MouseEvent) => {\n if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(editor.selection);\n }\n hidePopover();\n };\n\n const onInsertField = (incEditor: TinyMCEEditor) => {\n const targetEl = incEditor.selection.getNode();\n if (targetEl.tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(incEditor.selection);\n } else {\n modalMethods.current = create(Modal, modalProps);\n }\n };\n\n const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n const targetEl = incEditor.selection.getNode();\n return targetEl.tagName === 'PEGA-REFERENCE';\n };\n\n const fieldSelectionPopover = (\n <Popover\n show={showFieldsPopover}\n strategy='fixed'\n ref={fieldPopoverRef}\n target={{\n getBoundingClientRect() {\n return currentCursorPosition;\n }\n }}\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: () => {\n const iframe = editorRef.current?.element?.querySelector('iframe');\n const iframeRect = iframe?.getBoundingClientRect();\n const x = iframeRect?.x ?? 0;\n const y = iframeRect?.y ?? 0;\n return [x, y];\n }\n }\n }\n ]}\n placement='bottom-start'\n >\n {fieldMenuItems && (\n <Menu\n id={menuID}\n items={fieldMenuItems}\n as={StyledSearchPopover}\n focusControlEl={editor?.getBody() || undefined}\n mode='action'\n onItemClick={findAndRenameField}\n variant='drill-down'\n />\n )}\n </Popover>\n );\n\n useEffect(() => {\n if (currentElementId) modalMethods.current = create(Modal, modalProps);\n }, [currentElementId]);\n\n useEffect(() => {\n editor?.getDoc().addEventListener('click', handleElementClick);\n editorRef.current?.insertHtml(defaultValue?.trim() || '', false);\n return () => {\n editor?.getDoc().removeEventListener('click', handleElementClick);\n };\n }, [editor, editorRef.current]);\n\n useEffect(() => {\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n }\n }, [modalProps]);\n\n const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n if (formEditor) {\n const targetEl = formEditor?.selection?.getBoundingClientRect();\n const { left = 0, top = 0 } = targetEl;\n setCurrentCursorPosition({\n ...formEditor?.selection?.getBoundingClientRect(),\n x: left,\n y: top,\n toJSON: () => {}\n });\n }\n\n if (formEditor?.selection?.isCollapsed()) {\n // get the full line string\n const selectedRange = formEditor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n 0,\n endOffset\n );\n const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];\n if (\n fieldString?.startsWith('@') &&\n fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n ) {\n filterFieldMenu(fieldString.slice(1));\n } else setShowFieldsPopover(false);\n }\n };\n\n const onKeyDown: EditorProps['onKeyDown'] = event => {\n if (\n (event?.key === 'Enter' || event?.key === 'ArrowLeft' || event?.key === 'ArrowRight') &&\n !!fieldPopoverRef.current\n ) {\n event?.preventDefault();\n }\n if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n hidePopover();\n }\n };\n\n return (\n <>\n <Editor\n ref={editorRef}\n {...restProps}\n label={label}\n toolbar={toolbar}\n customComponents={[\n {\n createCustomElement: createPegaReferenceElement,\n name: 'pega-reference',\n extensionAttributes: ['contenteditable'],\n style: pegaReferenceElementStyle\n }\n ]}\n customActions={[\n {\n icon: 'code',\n text: tooltip,\n onMouseDown: () => {\n modalMethods.current = create(Modal, modalProps);\n },\n active: isPegaRefActive,\n shortcut: {\n pattern: 'meta+191',\n description: tooltip,\n command: onInsertField\n }\n }\n ]}\n onInit={setEditor}\n onChange={onEditorChange}\n onBlur={() => {\n onBlur?.();\n hidePopover();\n }}\n onKeyDown={onKeyDown}\n >\n {fieldSelectionPopover}\n </Editor>\n </>\n );\n }\n );\n\nexport default DynamicContentEditor;\n"]}
|
|
1
|
+
{"version":3,"file":"DynamicContentEditor.js","sourceRoot":"","sources":["../../../src/components/DynamicContentEditor/DynamicContentEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useContext,\n useRef,\n useEffect,\n useState\n} from 'react';\nimport styled from 'styled-components';\nimport { Bookmark, Editor as TinyMCEEditor, EditorSelection } from 'tinymce';\n\nimport { Editor, EditorProps } from '@pega/cosmos-react-rte';\nimport {\n Button,\n defaultThemeProp,\n ForwardProps,\n Menu,\n menuHelpers,\n MenuProps,\n Modal,\n ModalManagerContext,\n ModalMethods,\n Popover,\n PropsWithDefaults,\n StyledPopover,\n useConsolidatedRef,\n useI18n,\n useUID\n} from '@pega/cosmos-react-core';\nimport { getKeyCommand } from '@pega/cosmos-react-rte/lib/components/RichTextEditor/Toolbar/utils';\n\nimport { DynamicContentEditorProps, ItemType } from './DynamicContentEditor.types';\nimport { pegaReferenceElementStyle, createPegaReferenceElement } from './PegaCustomElement';\n\ntype DynamicContentEditorPropsWithDefaults = PropsWithDefaults<DynamicContentEditorProps>;\n\nconst StyledDynamicContentEditor = styled.div<DynamicContentEditorPropsWithDefaults>``;\n\nexport const StyledSearchPopover = styled(StyledPopover)`\n min-width: 20rem;\n`;\n\nStyledDynamicContentEditor.defaultProps = defaultThemeProp;\n\nconst DynamicContentEditor: FunctionComponent<DynamicContentEditorProps & ForwardProps> =\n forwardRef(\n (\n {\n form: { dynamicContentPicker, onSubmit },\n onActiveFieldChange,\n label,\n toolbar,\n fieldItems,\n defaultValue,\n onBlur,\n ...restProps\n }: PropsWithoutRef<DynamicContentEditorProps>,\n ref: DynamicContentEditorProps['ref']\n ) => {\n const menuID = useUID();\n const { create } = useContext(ModalManagerContext);\n const t = useI18n();\n\n const modalMethods = useRef<ModalMethods>();\n const [editor, setEditor] = useState<TinyMCEEditor | undefined>();\n const [bookmark, setBookmark] = useState<Bookmark | undefined>();\n const [fieldMenuItems, setFieldMenuItems] = useState<MenuProps['items']>(fieldItems || []);\n const [currentElementId, setCurrentElementId] = useState('');\n const [currentElementContent, setCurrentElementContent] = useState('');\n const [currentCursorPosition, setCurrentCursorPosition] = useState({\n bottom: 0,\n height: 0,\n left: 0,\n right: 0,\n top: 0,\n width: 0,\n x: 0,\n y: 0,\n toJSON: () => {}\n });\n const [showFieldsPopover, setShowFieldsPopover] = useState<boolean>(false);\n\n const fieldPopoverRef = useRef<HTMLDivElement>(null);\n const editorRef = useConsolidatedRef(ref);\n\n const tooltip = getKeyCommand(\n navigator.appVersion.includes('Mac'),\n ({ ctrl }) => `${t('rte_insert_field')} (${ctrl}/)`\n );\n\n const insertField = (field: ItemType) => {\n if (!editor) return;\n\n const fieldContent = `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type='field' data-rule-id=${field.id}>${field.text}</pega-reference>`;\n if (bookmark) {\n editor.selection.moveToBookmark(bookmark);\n editor.selection.setContent(fieldContent);\n } else {\n editor.insertContent(fieldContent);\n }\n\n modalMethods.current?.dismiss();\n };\n\n const modalProps = {\n children: dynamicContentPicker,\n heading: t('rte_insert_field'),\n actions: (\n <>\n <Button variant='secondary' onClick={() => modalMethods.current?.dismiss()}>\n {t('cancel')}\n </Button>\n <Button variant='primary' onClick={() => onSubmit(insertField)}>\n {t('submit')}\n </Button>\n </>\n ),\n center: true,\n onAfterClose: () => {\n setBookmark(undefined);\n setCurrentElementId('');\n setCurrentElementContent('');\n onActiveFieldChange({ id: '', text: '' });\n },\n onBeforeOpen: () => {\n if (currentElementId) {\n onActiveFieldChange({ id: currentElementId, text: currentElementContent });\n }\n }\n };\n\n const findAndRenameField = (fieldId: string) => {\n if (!editor || !fieldMenuItems) return;\n\n const selectedRange = editor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(0, endOffset);\n if (stringToSearch === undefined) return;\n\n const splitSearch = stringToSearch.split(' ');\n const fieldString = splitSearch[splitSearch.length - 1];\n const range = editor.getDoc().createRange();\n\n const startPos = stringToSearch.lastIndexOf(fieldString);\n const endPos = startPos + fieldString.length;\n range.setStart(selectedRange.commonAncestorContainer, startPos);\n range.setEnd(selectedRange.commonAncestorContainer, endPos);\n editor.getDoc().getSelection()?.removeAllRanges();\n editor.getDoc().getSelection()?.addRange(range);\n\n const selectedField = menuHelpers.getItem(fieldMenuItems, fieldId);\n if (selectedField) {\n editor.selection.setContent(\n `<pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=${selectedField.id}>${selectedField.primary}</pega-reference>`\n );\n setShowFieldsPopover(false);\n }\n };\n\n const hidePopover = () => {\n if (fieldPopoverRef) setShowFieldsPopover(false);\n };\n\n const filterFieldMenu = (searchString: string) => {\n setShowFieldsPopover(true);\n setFieldMenuItems(fieldItems || []);\n if (/\\s/.test(searchString)) {\n setShowFieldsPopover(false);\n return;\n }\n if (searchString && fieldMenuItems) {\n const newFieldMenuItems: MenuProps['items'] = menuHelpers\n .flatten(fieldMenuItems)\n .filter(({ primary }) =>\n primary.toLowerCase().startsWith(searchString.toLocaleLowerCase())\n );\n if (newFieldMenuItems) {\n setShowFieldsPopover(true);\n setFieldMenuItems(newFieldMenuItems);\n } else setShowFieldsPopover(false);\n }\n };\n\n const updateBookmarkAndCurrentElement = (editorSelection: EditorSelection) => {\n const targetEl = editorSelection.getNode() as HTMLElement;\n const fieldId = targetEl.getAttribute('data-rule-id');\n const fieldValue = targetEl.innerText;\n setBookmark(editorSelection.getBookmark());\n setCurrentElementId(fieldId || '');\n setCurrentElementContent(fieldValue);\n };\n\n const handleElementClick = ({ target }: MouseEvent) => {\n if (editor && target && (target as HTMLElement).tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(editor.selection);\n }\n hidePopover();\n };\n\n const onInsertField = (incEditor: TinyMCEEditor) => {\n const targetEl = incEditor.selection.getNode();\n if (targetEl.tagName === 'PEGA-REFERENCE') {\n updateBookmarkAndCurrentElement(incEditor.selection);\n } else {\n modalMethods.current = create(Modal, modalProps);\n }\n };\n\n const isPegaRefActive = (incEditor: TinyMCEEditor) => {\n const targetEl = incEditor.selection.getNode();\n return targetEl.tagName === 'PEGA-REFERENCE';\n };\n\n const fieldSelectionPopover = (\n <Popover\n show={showFieldsPopover}\n strategy='fixed'\n ref={fieldPopoverRef}\n target={{\n getBoundingClientRect() {\n return currentCursorPosition;\n }\n }}\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: () => {\n const iframe = editorRef.current?.element?.querySelector('iframe');\n const iframeRect = iframe?.getBoundingClientRect();\n const x = iframeRect?.x ?? 0;\n const y = iframeRect?.y ?? 0;\n return [x, y];\n }\n }\n }\n ]}\n placement='bottom-start'\n >\n {fieldMenuItems && (\n <Menu\n id={menuID}\n items={fieldMenuItems}\n as={StyledSearchPopover}\n focusControlEl={editor?.getBody() || undefined}\n mode='action'\n onItemClick={findAndRenameField}\n variant='drill-down'\n />\n )}\n </Popover>\n );\n\n useEffect(() => {\n if (currentElementId) modalMethods.current = create(Modal, modalProps);\n }, [currentElementId]);\n\n useEffect(() => {\n editor?.getDoc().addEventListener('click', handleElementClick);\n editorRef.current?.insertHtml(defaultValue?.trim() || '', false);\n return () => {\n editor?.getDoc().removeEventListener('click', handleElementClick);\n };\n }, [editor, editorRef.current]);\n\n useEffect(() => {\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n }\n }, [modalProps]);\n\n const onEditorChange: EditorProps['onChange'] = (formEditor?: TinyMCEEditor) => {\n if (formEditor) {\n const targetEl = formEditor.selection.getBoundingClientRect();\n const { left = 0, top = 0 } = targetEl ?? {};\n setCurrentCursorPosition({\n ...formEditor.selection.getBoundingClientRect(),\n x: left,\n y: top,\n toJSON: () => {}\n });\n\n if (formEditor.selection.isCollapsed()) {\n // get the full line string\n const selectedRange = formEditor.selection.getRng();\n const endOffset = selectedRange.endOffset;\n const stringToSearch = selectedRange.commonAncestorContainer.nodeValue?.slice(\n 0,\n endOffset\n );\n const fieldString = stringToSearch?.split(' ')[stringToSearch?.split(' ').length - 1];\n if (\n fieldString?.startsWith('@') &&\n fieldString.indexOf('@') === fieldString.lastIndexOf('@')\n ) {\n filterFieldMenu(fieldString.slice(1));\n } else setShowFieldsPopover(false);\n }\n }\n };\n\n const onKeyDown: EditorProps['onKeyDown'] = event => {\n if (\n (event?.key === 'Enter' || event?.key === 'ArrowLeft' || event?.key === 'ArrowRight') &&\n !!fieldPopoverRef.current\n ) {\n event?.preventDefault();\n }\n if (event?.key === 'Escape' && !!fieldPopoverRef.current) {\n hidePopover();\n }\n };\n\n return (\n <>\n <Editor\n ref={editorRef}\n {...restProps}\n label={label}\n toolbar={toolbar}\n customComponents={[\n {\n createCustomElement: createPegaReferenceElement,\n name: 'pega-reference',\n extensionAttributes: ['contenteditable'],\n style: pegaReferenceElementStyle\n }\n ]}\n customActions={[\n {\n icon: 'code',\n text: tooltip,\n onMouseDown: () => {\n modalMethods.current = create(Modal, modalProps);\n },\n active: isPegaRefActive,\n shortcut: {\n pattern: 'meta+191',\n description: tooltip,\n command: onInsertField\n }\n }\n ]}\n onInit={setEditor}\n onChange={onEditorChange}\n onBlur={() => {\n onBlur?.();\n hidePopover();\n }}\n onKeyDown={onKeyDown}\n >\n {fieldSelectionPopover}\n </Editor>\n </>\n );\n }\n );\n\nexport default DynamicContentEditor;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,GAAG,EAAyC,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,YAAY,EACZ,SAAS,EAQT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAE1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,IAAI,EAAE,iBAAiB,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;
|
|
1
|
+
{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,GAAG,EAAyC,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,YAAY,EACZ,SAAS,EAQT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAE1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,IAAI,EAAE,iBAAiB,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAIH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;SAWvF,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGA0B9B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAmH7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { Flex, Button, Icon, Tooltip, useElement, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
|
|
5
5
|
import Task from './Task';
|
|
@@ -17,6 +17,7 @@ export const StyledList = styled.ol(({ category, theme, id }) => {
|
|
|
17
17
|
return css `
|
|
18
18
|
margin-block-start: ${theme.base.spacing};
|
|
19
19
|
margin-block-end: calc(2 * ${theme.base.spacing});
|
|
20
|
+
list-style-type: none;
|
|
20
21
|
${category?.elementId !== id &&
|
|
21
22
|
` min-height: ${category?.height ? `${category.height}px` : 'auto'};
|
|
22
23
|
`}
|
|
@@ -83,18 +84,18 @@ const Category = forwardRef(({ item, showTitle = false, stageItem, category, id,
|
|
|
83
84
|
};
|
|
84
85
|
return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, { showTitle: showTitle, tabIndex: -1, id: item?.categoryId, children: category?.label })), _jsxs(StyledList, { ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId, children: [item &&
|
|
85
86
|
item.tasks.length !== 0 &&
|
|
86
|
-
item.tasks.map((
|
|
87
|
-
if (Array.isArray(
|
|
88
|
-
if (task && task.addTask && task.addTask.showOnce &&
|
|
87
|
+
item.tasks.map((taskItem, i) => {
|
|
88
|
+
if (Array.isArray(taskItem)) {
|
|
89
|
+
if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {
|
|
89
90
|
showAddTaskButton = false;
|
|
90
91
|
}
|
|
91
92
|
return (
|
|
92
93
|
// eslint-disable-next-line react/no-array-index-key
|
|
93
|
-
_jsxs(
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
_jsxs("li", { children: [i !== 0 && (_jsx(Flex, { as: StyledParallelTitle, container: { justify: 'center' }, children: _jsx("span", { children: t('parallel') }) })), taskItem.length > 0 && (_jsx("ol", { children: taskItem.map((parallelTask) => {
|
|
95
|
+
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));
|
|
96
|
+
}) }))] }, i));
|
|
96
97
|
}
|
|
97
|
-
return (_jsx(Task, { id:
|
|
98
|
+
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));
|
|
98
99
|
}), (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' }), _jsx(Flex, { children: task?.addTask.title })] }) }), _jsx(Tooltip, { target: addTaskEl, "aria-hidden": 'true', children: `${t('add')} ${task?.addTask.title}` })] }))] })] }));
|
|
99
100
|
});
|
|
100
101
|
export default Category;
|
|
@@ -1 +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 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\nStyledCategory.defaultProps = defaultThemeProp;\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\nStyledList.defaultProps = defaultThemeProp;\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\nStyledParallelTitle.defaultProps = defaultThemeProp;\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[], i: number) => {\n if (Array.isArray(TaskItem)) {\n if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {\n showAddTaskButton = false;\n }\n\n return (\n // eslint-disable-next-line react/no-array-index-key\n <Fragment key={i}>\n {i !== 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"]}
|
|
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 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\nStyledCategory.defaultProps = defaultThemeProp;\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 list-style-type: none;\n ${category?.elementId !== id &&\n ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n `}\n `;\n }\n);\n\nStyledList.defaultProps = defaultThemeProp;\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\nStyledParallelTitle.defaultProps = defaultThemeProp;\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[], i: number) => {\n if (Array.isArray(taskItem)) {\n if (task && task.addTask && task.addTask.showOnce && taskItem.length !== 0) {\n showAddTaskButton = false;\n }\n\n return (\n // eslint-disable-next-line react/no-array-index-key\n <li key={i}>\n {i !== 0 && (\n <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n <span>{t('parallel')}</span>\n </Flex>\n )}\n {taskItem.length > 0 && (\n <ol>\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 </ol>\n )}\n </li>\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.15.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-dnd": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.15.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-dev.15.0",
|
|
25
25
|
"@types/dagre": "^0.7.46",
|
|
26
26
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
27
27
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|