@pega/cosmos-react-demos 4.0.0-dev.19.2 → 4.0.0-dev.19.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/jsx/core/AppShell/AppShell.mocks.d.ts.map +1 -1
- package/jsx/core/AppShell/AppShell.mocks.jsx +3 -18
- package/jsx/core/AppShell/AppShell.mocks.jsx.map +1 -1
- package/jsx/core/AppShell/AppShell.stories.d.ts.map +1 -1
- package/jsx/core/AppShell/AppShell.stories.jsx +1 -2
- package/jsx/core/AppShell/AppShell.stories.jsx.map +1 -1
- package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts +8 -0
- package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map +1 -0
- package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.jsx +101 -0
- package/jsx/rte/DynamicContentEditor/DynamicContentEditor.stories.jsx.map +1 -0
- package/jsx/rte/DynamicContentEditor/FieldSelector.d.ts +11 -0
- package/jsx/rte/DynamicContentEditor/FieldSelector.d.ts.map +1 -0
- package/jsx/rte/DynamicContentEditor/FieldSelector.jsx +80 -0
- package/jsx/rte/DynamicContentEditor/FieldSelector.jsx.map +1 -0
- package/lib/core/AppShell/AppShell.mocks.d.ts.map +1 -1
- package/lib/core/AppShell/AppShell.mocks.js +3 -18
- package/lib/core/AppShell/AppShell.mocks.js.map +1 -1
- package/lib/core/AppShell/AppShell.stories.d.ts.map +1 -1
- package/lib/core/AppShell/AppShell.stories.js +1 -2
- package/lib/core/AppShell/AppShell.stories.js.map +1 -1
- package/lib/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts +8 -0
- package/lib/rte/DynamicContentEditor/DynamicContentEditor.stories.d.ts.map +1 -0
- package/lib/rte/DynamicContentEditor/DynamicContentEditor.stories.js +85 -0
- package/lib/rte/DynamicContentEditor/DynamicContentEditor.stories.js.map +1 -0
- package/lib/rte/DynamicContentEditor/FieldSelector.d.ts +14 -0
- package/lib/rte/DynamicContentEditor/FieldSelector.d.ts.map +1 -0
- package/lib/rte/DynamicContentEditor/FieldSelector.js +81 -0
- package/lib/rte/DynamicContentEditor/FieldSelector.js.map +1 -0
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAIb,eAAe,EAEf,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAIb,eAAe,EAEf,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,OAAO,CAsC/C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,CAAC,eAAe,GAAG,YAAY,CAAC,EA6BlE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAAC,eAAe,GAAG,YAAY,CAAC,EA8C5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAQ9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAUxB,CAAC"}
|
|
@@ -16,13 +16,9 @@ export const defaultLinks = [
|
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
18
|
id: '03',
|
|
19
|
-
name: '
|
|
20
|
-
href: '#
|
|
21
|
-
icon: 'social-solid'
|
|
22
|
-
links: [
|
|
23
|
-
{ id: '3-01', name: 'Spaces', href: '#spaces' },
|
|
24
|
-
{ id: '3-02', name: 'Documents', href: '#documents' }
|
|
25
|
-
]
|
|
19
|
+
name: 'Spaces',
|
|
20
|
+
href: '#spaces',
|
|
21
|
+
icon: 'social-solid'
|
|
26
22
|
},
|
|
27
23
|
{
|
|
28
24
|
id: '04',
|
|
@@ -41,17 +37,6 @@ export const defaultLinks = [
|
|
|
41
37
|
name: 'Goals',
|
|
42
38
|
href: '#goals',
|
|
43
39
|
icon: 'analytics-good'
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
id: '07',
|
|
47
|
-
name: 'More',
|
|
48
|
-
href: '#more',
|
|
49
|
-
icon: 'more-alt',
|
|
50
|
-
active: false,
|
|
51
|
-
links: [
|
|
52
|
-
{ id: '7-01', name: 'Item A', href: '#itemA' },
|
|
53
|
-
{ id: '7-02', name: 'Option 1', href: '#option1' }
|
|
54
|
-
]
|
|
55
40
|
}
|
|
56
41
|
];
|
|
57
42
|
export const defaultNotifications = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.mocks.jsx","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,WAAW,EAEX,IAAI,EAEJ,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"AppShell.mocks.jsx","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n AppShellProps,\n Avatar,\n Card,\n CardContent,\n DrawerItemProps,\n Flex,\n ForwardProps,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n {\n id: '01',\n name: 'Home',\n href: '#home',\n icon: 'home-solid',\n active: true\n },\n {\n id: '02',\n name: 'My Dashboard',\n href: '#dashboard',\n icon: 'gauge-solid'\n },\n {\n id: '03',\n name: 'Spaces',\n href: '#spaces',\n icon: 'social-solid'\n },\n {\n id: '04',\n name: 'Bugs',\n href: '#bugs',\n icon: 'users-solid'\n },\n {\n id: '05',\n name: 'Epics',\n href: '#epics',\n icon: 'book-solid'\n },\n {\n id: '06',\n name: 'Goals',\n href: '#goals',\n icon: 'analytics-good'\n }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n {\n id: '123',\n primary:\n \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n visual: <Avatar name='Dean Thomas' />,\n unread: true\n },\n {\n id: '456',\n primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n visual: <Avatar name='Seth DeAngelo' />,\n unread: true\n },\n {\n id: '789',\n primary:\n \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n visual: <Avatar name='Janet Moore' />,\n unread: true\n },\n {\n id: '000',\n primary: 'You have been awarded Employee of the Month! Congratulations!',\n secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n unread: true\n }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n {\n id: '123',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n },\n {\n id: '456',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n },\n {\n id: '789',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n },\n {\n id: '111',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n },\n {\n id: '222',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n },\n {\n id: '333',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n },\n {\n id: '444',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n },\n {\n id: '555',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n },\n {\n id: '666',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n }\n];\n\nexport const defaultMainContent = (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n <Card>\n <CardContent>\n <Text variant='h1'>This is the main content</Text>\n </CardContent>\n </Card>\n </Flex>\n);\n\nexport const operatorData = {\n avatar: <Avatar name='Cindy Turner' />,\n actions: [\n { primary: 'Profile', id: 'profile' },\n { primary: 'Settings', id: 'settings' },\n { primary: 'My applications', id: 'apps' },\n { primary: 'Help center', id: 'help' },\n { primary: 'Log out', id: 'logout' }\n ],\n name: 'Cindy Turner'\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAcd,MAAM,yBAAyB,CAAC;;AAiBjC,wBAOU;AAEV,UAAU,kBAAkB;IAE1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAcd,MAAM,yBAAyB,CAAC;;AAiBjC,wBAOU;AAEV,UAAU,kBAAkB;IAE1B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAgPlD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}
|
|
@@ -40,8 +40,7 @@ export const AppShellDemo = (args) => {
|
|
|
40
40
|
return prevLinks.map(prevLink => {
|
|
41
41
|
return {
|
|
42
42
|
...prevLink,
|
|
43
|
-
active: prevLink.name === link.name
|
|
44
|
-
!!prevLink.links?.filter(l => l.name === link.name).length
|
|
43
|
+
active: prevLink.name === link.name
|
|
45
44
|
};
|
|
46
45
|
});
|
|
47
46
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n ContextSwitcherProps,\n DrawerItemProps,\n Icon,\n registerIcon,\n useModalManager,\n ForwardProps,\n useAfterInitialEffect,\n windowIsAvailable,\n Configuration,\n SearchInputProps,\n ProgressProps,\n menuHelpers\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\nimport { MultiStepModal } from '../MultiStepForm/MultiStepForm.mocks';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n excludeStories: ['ConfigurableAppShell'],\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props */\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n searchPage?: AppShellProps['searchPage'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n collapsedHoverMenus?: boolean;\n\n /** Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n appNameHidden?: AppShellProps['appInfo']['appNameHidden'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n progress?: AppShellProps['progress'];\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n casesTypesEmpty?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [activeAppName, setActiveAppName] = useState(args.appName || 'UI Audit');\n const caseLinks = args.caseLinks || defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useModalManager();\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems || defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n const [searchLoading, setSearchLoading] = useState(false);\n const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n const [searchTimeout, setSearchTimeout] = useState<number | null>();\n const [progress, setProgress] = useState<ProgressProps['message']>('');\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const addHandlersToLinks = (appShellLinks: AppShellProps['links']): AppShellProps['links'] => {\n return (appShellLinks || []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return {\n ...prevLink,\n active:\n prevLink.name === link.name ||\n !!prevLink.links?.filter(l => l.name === link.name).length\n };\n });\n });\n\n setProgress(`${link.name} loading...`);\n setTimeout(() => {\n args.onLinkClick?.(link.name);\n setProgress('');\n }, 1000);\n },\n links: link.links ? addHandlersToLinks(link.links) : undefined\n }));\n };\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return addHandlersToLinks(links);\n }, [links]);\n\n const defaultCreateLinks = [\n 'Data Analyst interview',\n 'Designer interview',\n 'Product Manager interview',\n 'Sales Representative interview',\n 'Software Engineer interview'\n ].map(name => ({\n name,\n onClick: () => {\n createModal(MultiStepModal, { heading: name, stepIndicator: 'horizontal' });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const onSearch = (val: string) => {\n setSearchVal(val);\n if (searchTimeout) {\n clearTimeout(searchTimeout);\n setSearchTimeout(null);\n }\n setResults([]);\n if (val) {\n setSearchLoading(true);\n const timeout = setTimeout(() => {\n setSearchLoading(false);\n setResults(searchResults.filter(res => res.primary.includes(val)));\n }, 1000);\n setSearchTimeout(timeout as unknown as number);\n }\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const [contexts, setContexts] = useState<ContextSwitcherProps['contexts']>([\n {\n id: '1',\n primary: activeAppName,\n selected: true,\n visual: <Icon name='app' />\n },\n {\n id: '2',\n primary: 'BI Warehouse',\n selected: false,\n visual: <Icon name='cloud' />\n }\n ]);\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n contextSwitcher={{\n contexts,\n onContextClick: (id: string) => {\n setActiveAppName(menuHelpers.getItem(contexts, id)!.primary);\n setContexts(cur =>\n cur!.map(ctx => {\n return { ...ctx, selected: id === ctx.id };\n })\n );\n }\n }}\n appInfo={\n args.appInfo || {\n href: args.href || 'https://www.pega.com/',\n imageSrc: args.imageSrc || './pega_logo_vertical_white.svg',\n fullImageSrc:\n args.fullImageSrc ||\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: activeAppName,\n portalName: args.portalName || 'Scrum',\n appNameHidden: args.appNameHidden\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n onSearch(value);\n },\n value: searchVal,\n searchResults: results,\n recentSearches,\n loading: searchLoading,\n filters: ['Story', 'Bug'],\n advancedSearchLink: { href: '/' }\n }\n : undefined\n }\n appHeader={args.appHeader}\n searchPage={args.searchPage}\n caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main || defaultMainContent}\n progress={args.progress || progress}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils || defaultUtils}\n collapsedHoverMenus={args.collapsedHoverMenus}\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'UI Audit',\n appNameHidden: false,\n portalName: 'Scrum',\n href: 'https://www.pega.com/',\n imageSrc: './pega_logo_vertical_white.svg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n progress: false,\n notificationsEmpty: false,\n notificationsLoading: false,\n casesTypesEmpty: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n appNameHidden: { control: { type: 'boolean' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n progress: { control: { type: 'boolean' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n casesTypesEmpty: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EACL,QAAQ,EAER,YAAY,EAGZ,IAAI,EACJ,YAAY,EACZ,eAAe,EAEf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,EAGb,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAEtE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;IACxC,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAkCV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC;IAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,YAAY,CAAC;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1E,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAqC,oBAAoB,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,IAAI,CAAC,WAAW,IAAI,cAAc,CACnC,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAC3C,CAAC;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAiB,CAAC;IACpE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA2B,EAAE,CAAC,CAAC;IAEvE,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,kBAAkB,GAAG,CAAC,aAAqC,EAA0B,EAAE;QAC3F,OAAO,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACxC,GAAG,IAAI;YACP,OAAO,CAAC,CAAgC;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,EAAE;oBAC1B,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;wBAC9B,OAAO;4BACL,GAAG,QAAQ;4BACX,MAAM,EAAE,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;yBACpC,CAAC;oBACJ,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBAEH,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC;gBACvC,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC9B,WAAW,CAAC,EAAE,CAAC,CAAC;gBAClB,CAAC,EAAE,IAAI,CAAC,CAAC;YACX,CAAC;YACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;SAC/D,CAAC,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAyB,GAAG,EAAE;QAC7D,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,kBAAkB,GAAG;QACzB,wBAAwB;QACxB,oBAAoB;QACpB,2BAA2B;QAC3B,gCAAgC;QAChC,6BAA6B;KAC9B,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACb,IAAI;QACJ,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC,CAAC;QAC9E,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,uBAAuB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACnD,gBAAgB,CAAC,GAAG,CAAC,EAAE,CACrB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACxC,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,UAAU,CAAC,GAAG,CAAC,EAAE,CACf,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YAC1C,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;QAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;QAClB,IAAI,aAAa,EAAE;YACjB,YAAY,CAAC,aAAa,CAAC,CAAC;YAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACxB;QACD,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,GAAG,EAAE;YACP,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACrE,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,gBAAgB,CAAC,OAA4B,CAAC,CAAC;SAChD;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;YACnD,OAAO,EAAE,IAAI,CAAC,oBAAoB;YAClC,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,SAAS,EAAE,kBAAkB;SAC9B;KACF,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YACpC,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,cAAc;YAC3B,SAAS,EAAE,iBAAiB;SAC7B;QACD;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;YACvC,OAAO,EAAE,IAAI,CAAC,cAAc;YAC5B,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,YAAY;SACxB;KACF,CAAC;IAEF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAmC;QACzE;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,aAAa;YACtB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAG;SAC5B;QACD;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAG;SAC9B;KACF,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAG;QACnB;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAG;YAClC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB;YACxD,UAAU,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,qBAAqB,CAAC,EAAG;YAC7D,YAAY,EAAE,GAAG,EAAE;gBACjB,aAAa,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;gBACpD,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC;YACD,aAAa,EAAE,GAAG,EAAE;gBAClB,IAAI,iBAAiB,EAAE;oBAGrB,4BAA4B,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;wBAC7D,sBAAsB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;oBACzC,CAAC,EAAE,KAAK,CAAC,CAAC;iBACX;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAG;YACnC,UAAU,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,EAAG;SACxD;KACF,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CACP,eAAe,CAAC,CAAC;YACf,QAAQ;YACR,cAAc,EAAE,CAAC,EAAU,EAAE,EAAE;gBAC7B,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAE,CAAC,OAAO,CAAC,CAAC;gBAC7D,WAAW,CAAC,GAAG,CAAC,EAAE,CAChB,GAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBACb,OAAO,EAAE,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC;gBAC7C,CAAC,CAAC,CACH,CAAC;YACJ,CAAC;SACF,CAAC,CACF,OAAO,CAAC,CACN,IAAI,CAAC,OAAO,IAAI;YACd,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,uBAAuB;YAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,gCAAgC;YAC3D,YAAY,EACV,IAAI,CAAC,YAAY;gBACjB,uEAAuE;YACzE,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,OAAO;YACtC,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,CACF,CACD,WAAW,CAAC,CACV,UAAU;YACR,CAAC,CAAC;gBACE,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE;oBAChC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAClB,CAAC;gBACD,KAAK,EAAE,SAAS;gBAChB,aAAa,EAAE,OAAO;gBACtB,cAAc;gBACd,OAAO,EAAE,aAAa;gBACtB,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;gBACzB,kBAAkB,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE;aAClC;YACH,CAAC,CAAC,SAAS,CACd,CACD,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,kBAAkB,CAAC,CAC9E,KAAK,CAAC,CAAC,iBAAiB,CAAC,CACzB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,kBAAkB,CAAC,CACtC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CACpC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC,CAClC,mBAAmB,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,EAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,OAAO;IACnB,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,gCAAgC;IAC1C,YAAY,EAAE,uEAAuE;IACrF,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;IACf,kBAAkB,EAAE,KAAK;IACzB,oBAAoB,EAAE,KAAK;IAC3B,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACtD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAOF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,WAAW,EAAE;oBACX,GAAG,EAAE;wBACH,kBAAkB,EAAE,IAAI,CAAC,QAAQ;qBAClC;oBACD,MAAM,EAAE;wBACN,kBAAkB,EAAE,IAAI,CAAC,WAAW;qBACrC;iBACF;aACF;SACF,CAAC,CAEF;MAAA,CAAC,YAAY,CAAC,SAAS,EACzB;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACxC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n ContextSwitcherProps,\n DrawerItemProps,\n Icon,\n registerIcon,\n useModalManager,\n ForwardProps,\n useAfterInitialEffect,\n windowIsAvailable,\n Configuration,\n SearchInputProps,\n ProgressProps,\n menuHelpers\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\nimport { MultiStepModal } from '../MultiStepForm/MultiStepForm.mocks';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n excludeStories: ['ConfigurableAppShell'],\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props */\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n searchPage?: AppShellProps['searchPage'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n collapsedHoverMenus?: boolean;\n\n /** Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n appNameHidden?: AppShellProps['appInfo']['appNameHidden'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n progress?: AppShellProps['progress'];\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n casesTypesEmpty?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [activeAppName, setActiveAppName] = useState(args.appName || 'UI Audit');\n const caseLinks = args.caseLinks || defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useModalManager();\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems || defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n const [searchLoading, setSearchLoading] = useState(false);\n const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n const [searchTimeout, setSearchTimeout] = useState<number | null>();\n const [progress, setProgress] = useState<ProgressProps['message']>('');\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const addHandlersToLinks = (appShellLinks: AppShellProps['links']): AppShellProps['links'] => {\n return (appShellLinks || []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return {\n ...prevLink,\n active: prevLink.name === link.name\n };\n });\n });\n\n setProgress(`${link.name} loading...`);\n setTimeout(() => {\n args.onLinkClick?.(link.name);\n setProgress('');\n }, 1000);\n },\n links: link.links ? addHandlersToLinks(link.links) : undefined\n }));\n };\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return addHandlersToLinks(links);\n }, [links]);\n\n const defaultCreateLinks = [\n 'Data Analyst interview',\n 'Designer interview',\n 'Product Manager interview',\n 'Sales Representative interview',\n 'Software Engineer interview'\n ].map(name => ({\n name,\n onClick: () => {\n createModal(MultiStepModal, { heading: name, stepIndicator: 'horizontal' });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const onSearch = (val: string) => {\n setSearchVal(val);\n if (searchTimeout) {\n clearTimeout(searchTimeout);\n setSearchTimeout(null);\n }\n setResults([]);\n if (val) {\n setSearchLoading(true);\n const timeout = setTimeout(() => {\n setSearchLoading(false);\n setResults(searchResults.filter(res => res.primary.includes(val)));\n }, 1000);\n setSearchTimeout(timeout as unknown as number);\n }\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const [contexts, setContexts] = useState<ContextSwitcherProps['contexts']>([\n {\n id: '1',\n primary: activeAppName,\n selected: true,\n visual: <Icon name='app' />\n },\n {\n id: '2',\n primary: 'BI Warehouse',\n selected: false,\n visual: <Icon name='cloud' />\n }\n ]);\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n contextSwitcher={{\n contexts,\n onContextClick: (id: string) => {\n setActiveAppName(menuHelpers.getItem(contexts, id)!.primary);\n setContexts(cur =>\n cur!.map(ctx => {\n return { ...ctx, selected: id === ctx.id };\n })\n );\n }\n }}\n appInfo={\n args.appInfo || {\n href: args.href || 'https://www.pega.com/',\n imageSrc: args.imageSrc || './pega_logo_vertical_white.svg',\n fullImageSrc:\n args.fullImageSrc ||\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: activeAppName,\n portalName: args.portalName || 'Scrum',\n appNameHidden: args.appNameHidden\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n onSearch(value);\n },\n value: searchVal,\n searchResults: results,\n recentSearches,\n loading: searchLoading,\n filters: ['Story', 'Bug'],\n advancedSearchLink: { href: '/' }\n }\n : undefined\n }\n appHeader={args.appHeader}\n searchPage={args.searchPage}\n caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main || defaultMainContent}\n progress={args.progress || progress}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils || defaultUtils}\n collapsedHoverMenus={args.collapsedHoverMenus}\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'UI Audit',\n appNameHidden: false,\n portalName: 'Scrum',\n href: 'https://www.pega.com/',\n imageSrc: './pega_logo_vertical_white.svg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n progress: false,\n notificationsEmpty: false,\n notificationsLoading: false,\n casesTypesEmpty: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n appNameHidden: { control: { type: 'boolean' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n progress: { control: { type: 'boolean' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n casesTypesEmpty: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import { DynamicContentEditorProps } from '@pega/cosmos-react-rte';
|
|
3
|
+
declare const _default: Meta;
|
|
4
|
+
export default _default;
|
|
5
|
+
export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {
|
|
6
|
+
}
|
|
7
|
+
export declare const DynamicContentEditorDemo: Story<Partial<DynamicContentEditorStoryProps>>;
|
|
8
|
+
//# sourceMappingURL=DynamicContentEditor.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAe/C,OAAO,EAGL,yBAAyB,EAE1B,MAAM,wBAAwB,CAAC;;AAIhC,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAkInF,CAAC"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { useRef, useState, useCallback } from 'react';
|
|
2
|
+
import { action } from '@storybook/addon-actions';
|
|
3
|
+
import { Button, Card, CardContent, CardFooter, Flex, TextArea, useAutoResize, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
+
import { DynamicContentEditor } from '@pega/cosmos-react-rte';
|
|
5
|
+
import FieldSelector from './FieldSelector';
|
|
6
|
+
export default {
|
|
7
|
+
title: 'RTE/DynamicContentEditor',
|
|
8
|
+
component: DynamicContentEditor
|
|
9
|
+
};
|
|
10
|
+
export const DynamicContentEditorDemo = (args) => {
|
|
11
|
+
const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
|
|
12
|
+
const rteRef = useRef(null);
|
|
13
|
+
const fieldItems = [
|
|
14
|
+
{
|
|
15
|
+
id: 'CustomerName',
|
|
16
|
+
primary: 'CustomerName',
|
|
17
|
+
items: [
|
|
18
|
+
{
|
|
19
|
+
id: '1-2',
|
|
20
|
+
primary: 'Locale'
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: '1-1',
|
|
24
|
+
primary: 'Response Type',
|
|
25
|
+
items: [
|
|
26
|
+
{
|
|
27
|
+
id: 'group-1-1-b',
|
|
28
|
+
label: 'B',
|
|
29
|
+
items: [{ id: '1-1-1', primary: 'Reply to' }]
|
|
30
|
+
},
|
|
31
|
+
{ id: '1-1-4', primary: 'Forward to' }
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
{ id: 'Address', primary: 'Address' },
|
|
37
|
+
{ id: 'Locality', primary: 'Locality' },
|
|
38
|
+
{ id: 'Country', primary: 'Country' },
|
|
39
|
+
{ id: 'Region', primary: 'Region' },
|
|
40
|
+
{ id: 'Occupation', primary: 'Occupation' },
|
|
41
|
+
{ id: 'City', primary: 'City' },
|
|
42
|
+
{ id: 'Colony', primary: 'Colony' },
|
|
43
|
+
{ id: 'Lastname', primary: 'Lastname' },
|
|
44
|
+
{ id: 'Preference', primary: 'Preference' },
|
|
45
|
+
{ id: 'Currency', primary: 'Currency' },
|
|
46
|
+
{ id: 'Iconname', primary: 'Iconname' }
|
|
47
|
+
];
|
|
48
|
+
const onImageAdded = (image, id) => {
|
|
49
|
+
const src = URL.createObjectURL(image);
|
|
50
|
+
rteRef.current?.appendImage({ src, alt: image.name }, id);
|
|
51
|
+
};
|
|
52
|
+
const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
|
|
53
|
+
const ref = useRef(null);
|
|
54
|
+
const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
|
|
55
|
+
const handleShowHtml = () => {
|
|
56
|
+
resizeTextArea();
|
|
57
|
+
setHtml(rteRef.current?.getHtml() || '');
|
|
58
|
+
};
|
|
59
|
+
const t = useI18n();
|
|
60
|
+
const [selectedField, setSelectedField] = useState({
|
|
61
|
+
id: '',
|
|
62
|
+
text: ''
|
|
63
|
+
});
|
|
64
|
+
const updateSelection = (selectedItem) => {
|
|
65
|
+
setSelectedField(selectedItem);
|
|
66
|
+
};
|
|
67
|
+
const onSubmit = useCallback((insertField) => {
|
|
68
|
+
insertField(selectedField);
|
|
69
|
+
}, [selectedField]);
|
|
70
|
+
const dynamicContentPicker = (<Flex container={{
|
|
71
|
+
gap: 2,
|
|
72
|
+
direction: 'column'
|
|
73
|
+
}}>
|
|
74
|
+
<FieldSelector itemList={[
|
|
75
|
+
{ id: 'CustomerName', text: 'CustomerName' },
|
|
76
|
+
{ id: 'Address', text: 'Address' },
|
|
77
|
+
{ id: 'Locality', text: 'Locality' },
|
|
78
|
+
{ id: 'Country', text: 'Country' },
|
|
79
|
+
{ id: 'Region', text: 'Region' },
|
|
80
|
+
{ id: 'Occupation', text: 'Occupation' }
|
|
81
|
+
]} key={selectedField?.id} label='Field' updateSelection={updateSelection} placeholder={t('select')} defaultSelection={selectedField}/>
|
|
82
|
+
</Flex>);
|
|
83
|
+
const onActiveFieldChange = (field) => setSelectedField(field);
|
|
84
|
+
return (<Flex container={{ direction: 'column', gap: 2 }}>
|
|
85
|
+
<Card>
|
|
86
|
+
<CardContent>
|
|
87
|
+
<TextArea value={html} onChange={e => setHtml(e.target.value)} autoResize ref={consolidatedRef}/>
|
|
88
|
+
</CardContent>
|
|
89
|
+
<CardFooter>
|
|
90
|
+
<Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>
|
|
91
|
+
Overwrite RTE with new HTML
|
|
92
|
+
</Button>
|
|
93
|
+
</CardFooter>
|
|
94
|
+
</Card>
|
|
95
|
+
<DynamicContentEditor defaultValue={args.defaultValue || html} onImageAdded={onImageAdded} ref={rteRef} label='Dynamic content editor' toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} form={args.form || { onSubmit, dynamicContentPicker }} onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange} fieldItems={args.fieldItems || fieldItems} onBlur={action('Editor onBlur')}/>
|
|
96
|
+
<Flex container={{ gap: 1 }}>
|
|
97
|
+
<Button onClick={() => handleShowHtml()}>Show HTML</Button>
|
|
98
|
+
</Flex>
|
|
99
|
+
</Flex>);
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=DynamicContentEditor.stories.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DynamicContentEditor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n TextArea,\n useAutoResize,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport {\n EditorState,\n DynamicContentEditor,\n DynamicContentEditorProps,\n ItemType\n} from '@pega/cosmos-react-rte';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n title: 'RTE/DynamicContentEditor',\n component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: Story<Partial<DynamicContentEditorStoryProps>> = (\n args: Partial<DynamicContentEditorStoryProps>\n) => {\n const [html, setHtml] = useState(\n '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n );\n const rteRef = useRef<EditorState>(null);\n\n const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n {\n id: 'CustomerName',\n primary: 'CustomerName',\n items: [\n {\n id: '1-2',\n primary: 'Locale'\n },\n {\n id: '1-1',\n primary: 'Response Type',\n items: [\n {\n id: 'group-1-1-b',\n label: 'B',\n items: [{ id: '1-1-1', primary: 'Reply to' }]\n },\n { id: '1-1-4', primary: 'Forward to' }\n ]\n }\n ]\n },\n { id: 'Address', primary: 'Address' },\n { id: 'Locality', primary: 'Locality' },\n { id: 'Country', primary: 'Country' },\n { id: 'Region', primary: 'Region' },\n { id: 'Occupation', primary: 'Occupation' },\n { id: 'City', primary: 'City' },\n { id: 'Colony', primary: 'Colony' },\n { id: 'Lastname', primary: 'Lastname' },\n { id: 'Preference', primary: 'Preference' },\n { id: 'Currency', primary: 'Currency' },\n { id: 'Iconname', primary: 'Iconname' }\n ];\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const ref = useRef(null);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const handleShowHtml = () => {\n resizeTextArea();\n setHtml(rteRef.current?.getHtml() || '');\n };\n const t = useI18n();\n const [selectedField, setSelectedField] = useState<ItemType>({\n id: '',\n text: ''\n });\n\n const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n setSelectedField(selectedItem);\n };\n const onSubmit = useCallback(\n (insertField: (selectedField: ItemType) => void) => {\n insertField(selectedField);\n },\n [selectedField]\n );\n\n const dynamicContentPicker = (\n <Flex\n container={{\n gap: 2,\n direction: 'column'\n }}\n >\n <FieldSelector\n itemList={[\n { id: 'CustomerName', text: 'CustomerName' },\n { id: 'Address', text: 'Address' },\n { id: 'Locality', text: 'Locality' },\n { id: 'Country', text: 'Country' },\n { id: 'Region', text: 'Region' },\n { id: 'Occupation', text: 'Occupation' }\n ]}\n key={selectedField?.id}\n label='Field'\n updateSelection={updateSelection}\n placeholder={t('select')}\n defaultSelection={selectedField}\n />\n </Flex>\n );\n const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea\n value={html}\n onChange={e => setHtml(e.target.value)}\n autoResize\n ref={consolidatedRef}\n />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <DynamicContentEditor\n defaultValue={args.defaultValue || html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Dynamic content editor'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n form={args.form || { onSubmit, dynamicContentPicker }}\n onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n fieldItems={args.fieldItems || fieldItems}\n onBlur={action('Editor onBlur')}\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n </Flex>\n </Flex>\n );\n};\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
+
import { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';
|
|
4
|
+
export interface FieldSelectorProps extends NoChildrenProp {
|
|
5
|
+
itemList: ItemType[];
|
|
6
|
+
updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;
|
|
7
|
+
defaultSelection?: ItemType;
|
|
8
|
+
}
|
|
9
|
+
declare const FieldSelector: FunctionComponent<FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>>;
|
|
10
|
+
export default FieldSelector;
|
|
11
|
+
//# sourceMappingURL=FieldSelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,uFAAuF,CAAC;AAEjH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IAExD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErB,eAAe,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAEjF,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,CAiGxF,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { useMemo, useState, useCallback } from 'react';
|
|
2
|
+
import { ComboBox, createStringMatcher, useI18n } from '@pega/cosmos-react-core';
|
|
3
|
+
const FieldSelector = ({ itemList, label, mode = 'single-select', required = false, updateSelection, placeholder, defaultSelection }) => {
|
|
4
|
+
const t = useI18n();
|
|
5
|
+
const [filterValue, setFilterValue] = useState('');
|
|
6
|
+
const [items, setItems] = useState(() => {
|
|
7
|
+
return itemList.map(item => {
|
|
8
|
+
return {
|
|
9
|
+
id: item.id,
|
|
10
|
+
primary: item.text,
|
|
11
|
+
selected: defaultSelection ? defaultSelection.id === item.id : false
|
|
12
|
+
};
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
const filterRegex = createStringMatcher(filterValue, 'contains');
|
|
16
|
+
const itemsToRender = useMemo(() => {
|
|
17
|
+
return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;
|
|
18
|
+
}, [filterValue, items]);
|
|
19
|
+
const clearSelection = () => {
|
|
20
|
+
setItems(curr => {
|
|
21
|
+
return curr?.map(item => {
|
|
22
|
+
return {
|
|
23
|
+
...item,
|
|
24
|
+
selected: false
|
|
25
|
+
};
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
const selectItem = useCallback((id) => {
|
|
30
|
+
setFilterValue('');
|
|
31
|
+
setItems(curr => curr?.map(item => {
|
|
32
|
+
if (item.id === id) {
|
|
33
|
+
return {
|
|
34
|
+
...item,
|
|
35
|
+
selected: true
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
return { ...item, selected: false };
|
|
39
|
+
}));
|
|
40
|
+
const selectedItem = items?.find(item => item.id === id);
|
|
41
|
+
if (selectedItem?.id)
|
|
42
|
+
updateSelection({
|
|
43
|
+
id: selectedItem.id,
|
|
44
|
+
text: selectedItem.primary
|
|
45
|
+
}, label);
|
|
46
|
+
}, [filterValue, items]);
|
|
47
|
+
const selected = useMemo(() => {
|
|
48
|
+
return items?.find(item => item.selected);
|
|
49
|
+
}, [items]);
|
|
50
|
+
const comboBoxProps = {
|
|
51
|
+
label,
|
|
52
|
+
placeholder,
|
|
53
|
+
mode,
|
|
54
|
+
value: filterValue,
|
|
55
|
+
selected: selected
|
|
56
|
+
? {
|
|
57
|
+
items: {
|
|
58
|
+
id: selected.id,
|
|
59
|
+
text: selected.primary
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
: undefined,
|
|
63
|
+
onChange: (e) => {
|
|
64
|
+
if (e.target.value)
|
|
65
|
+
clearSelection();
|
|
66
|
+
setFilterValue(e.target.value);
|
|
67
|
+
},
|
|
68
|
+
onBlur: () => setFilterValue(''),
|
|
69
|
+
menu: {
|
|
70
|
+
items: itemsToRender,
|
|
71
|
+
accent: filterRegex,
|
|
72
|
+
onItemClick: selectItem,
|
|
73
|
+
emptyText: t('no_items')
|
|
74
|
+
},
|
|
75
|
+
required
|
|
76
|
+
};
|
|
77
|
+
return <ComboBox {...comboBoxProps}/>;
|
|
78
|
+
};
|
|
79
|
+
export default FieldSelector;
|
|
80
|
+
//# sourceMappingURL=FieldSelector.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldSelector.jsx","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState, useCallback } from 'react';\n\nimport {\n ComboBox,\n ComboBoxProps,\n createStringMatcher,\n MenuItemProps,\n NoChildrenProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';\n\nexport interface FieldSelectorProps extends NoChildrenProp {\n /** Array of values for the combobox options. */\n itemList: ItemType[];\n /** Return selected item */\n updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;\n /** Default selected item */\n defaultSelection?: ItemType;\n}\n\nconst FieldSelector: FunctionComponent<\n FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>\n> = ({\n itemList,\n label,\n mode = 'single-select',\n required = false,\n updateSelection,\n placeholder,\n defaultSelection\n}) => {\n const t = useI18n();\n\n const [filterValue, setFilterValue] = useState('');\n const [items, setItems] = useState(() => {\n return itemList.map(item => {\n return {\n id: item.id,\n primary: item.text,\n selected: defaultSelection ? defaultSelection.id === item.id : false\n };\n });\n });\n\n const filterRegex = createStringMatcher(filterValue, 'contains');\n const itemsToRender = useMemo(() => {\n return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;\n }, [filterValue, items]);\n\n const clearSelection = () => {\n setItems(curr => {\n return curr?.map(item => {\n return {\n ...item,\n selected: false\n };\n });\n });\n };\n\n const selectItem = useCallback(\n (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItems(curr =>\n curr?.map(item => {\n if (item.id === id) {\n return {\n ...item,\n selected: true\n };\n }\n return { ...item, selected: false };\n })\n );\n const selectedItem = items?.find(item => item.id === id);\n if (selectedItem?.id)\n updateSelection(\n {\n id: selectedItem.id,\n text: selectedItem.primary\n },\n label\n );\n },\n [filterValue, items]\n );\n\n const selected = useMemo(() => {\n return items?.find(item => item.selected);\n }, [items]);\n\n const comboBoxProps: ComboBoxProps = {\n label,\n placeholder,\n mode,\n value: filterValue,\n selected: selected\n ? {\n items: {\n id: selected.id,\n text: selected.primary\n }\n }\n : undefined,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) clearSelection();\n setFilterValue(e.target.value);\n },\n onBlur: () => setFilterValue(''),\n menu: {\n items: itemsToRender,\n accent: filterRegex,\n onItemClick: selectItem,\n emptyText: t('no_items')\n },\n required\n };\n return <ComboBox {...comboBoxProps} />;\n};\n\nexport default FieldSelector;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAIb,eAAe,EAEf,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EAIb,eAAe,EAEf,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,OAAO,CAsC/C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,CAAC,eAAe,GAAG,YAAY,CAAC,EA6BlE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,CAAC,eAAe,GAAG,YAAY,CAAC,EA8C5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,aAQ9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;CAUxB,CAAC"}
|
|
@@ -17,13 +17,9 @@ export const defaultLinks = [
|
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
id: '03',
|
|
20
|
-
name: '
|
|
21
|
-
href: '#
|
|
22
|
-
icon: 'social-solid'
|
|
23
|
-
links: [
|
|
24
|
-
{ id: '3-01', name: 'Spaces', href: '#spaces' },
|
|
25
|
-
{ id: '3-02', name: 'Documents', href: '#documents' }
|
|
26
|
-
]
|
|
20
|
+
name: 'Spaces',
|
|
21
|
+
href: '#spaces',
|
|
22
|
+
icon: 'social-solid'
|
|
27
23
|
},
|
|
28
24
|
{
|
|
29
25
|
id: '04',
|
|
@@ -42,17 +38,6 @@ export const defaultLinks = [
|
|
|
42
38
|
name: 'Goals',
|
|
43
39
|
href: '#goals',
|
|
44
40
|
icon: 'analytics-good'
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
id: '07',
|
|
48
|
-
name: 'More',
|
|
49
|
-
href: '#more',
|
|
50
|
-
icon: 'more-alt',
|
|
51
|
-
active: false,
|
|
52
|
-
links: [
|
|
53
|
-
{ id: '7-01', name: 'Item A', href: '#itemA' },
|
|
54
|
-
{ id: '7-02', name: 'Option 1', href: '#option1' }
|
|
55
|
-
]
|
|
56
41
|
}
|
|
57
42
|
];
|
|
58
43
|
export const defaultNotifications = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,MAAM,EACN,IAAI,EACJ,WAAW,EAEX,IAAI,EAEJ,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,YAAY;QAClB,MAAM,EAAE,IAAI;KACb;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,aAAa;KACpB;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n AppShellProps,\n Avatar,\n Card,\n CardContent,\n DrawerItemProps,\n Flex,\n ForwardProps,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n {\n id: '01',\n name: 'Home',\n href: '#home',\n icon: 'home-solid',\n active: true\n },\n {\n id: '02',\n name: 'My Dashboard',\n href: '#dashboard',\n icon: 'gauge-solid'\n },\n {\n id: '03',\n name: 'Spaces',\n href: '#spaces',\n icon: 'social-solid'\n },\n {\n id: '04',\n name: 'Bugs',\n href: '#bugs',\n icon: 'users-solid'\n },\n {\n id: '05',\n name: 'Epics',\n href: '#epics',\n icon: 'book-solid'\n },\n {\n id: '06',\n name: 'Goals',\n href: '#goals',\n icon: 'analytics-good'\n }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n {\n id: '123',\n primary:\n \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n visual: <Avatar name='Dean Thomas' />,\n unread: true\n },\n {\n id: '456',\n primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n visual: <Avatar name='Seth DeAngelo' />,\n unread: true\n },\n {\n id: '789',\n primary:\n \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n visual: <Avatar name='Janet Moore' />,\n unread: true\n },\n {\n id: '000',\n primary: 'You have been awarded Employee of the Month! Congratulations!',\n secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n unread: true\n }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n {\n id: '123',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n },\n {\n id: '456',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n },\n {\n id: '789',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n },\n {\n id: '111',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n },\n {\n id: '222',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n },\n {\n id: '333',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n },\n {\n id: '444',\n primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n },\n {\n id: '555',\n primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n },\n {\n id: '666',\n primary:\n \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n }\n];\n\nexport const defaultMainContent = (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n <Card>\n <CardContent>\n <Text variant='h1'>This is the main content</Text>\n </CardContent>\n </Card>\n </Flex>\n);\n\nexport const operatorData = {\n avatar: <Avatar name='Cindy Turner' />,\n actions: [\n { primary: 'Profile', id: 'profile' },\n { primary: 'Settings', id: 'settings' },\n { primary: 'My applications', id: 'apps' },\n { primary: 'Help center', id: 'help' },\n { primary: 'Log out', id: 'logout' }\n ],\n name: 'Cindy Turner'\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAcd,MAAM,yBAAyB,CAAC;;AAiBjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAcd,MAAM,yBAAyB,CAAC;;AAiBjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC;IAC1D,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAgPlD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}
|
|
@@ -41,8 +41,7 @@ export const AppShellDemo = (args) => {
|
|
|
41
41
|
return prevLinks.map(prevLink => {
|
|
42
42
|
return {
|
|
43
43
|
...prevLink,
|
|
44
|
-
active: prevLink.name === link.name
|
|
45
|
-
!!prevLink.links?.filter(l => l.name === link.name).length
|
|
44
|
+
active: prevLink.name === link.name
|
|
46
45
|
};
|
|
47
46
|
});
|
|
48
47
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n ContextSwitcherProps,\n DrawerItemProps,\n Icon,\n registerIcon,\n useModalManager,\n ForwardProps,\n useAfterInitialEffect,\n windowIsAvailable,\n Configuration,\n SearchInputProps,\n ProgressProps,\n menuHelpers\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\nimport { MultiStepModal } from '../MultiStepForm/MultiStepForm.mocks';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n excludeStories: ['ConfigurableAppShell'],\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props */\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n searchPage?: AppShellProps['searchPage'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n collapsedHoverMenus?: boolean;\n\n /** Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n appNameHidden?: AppShellProps['appInfo']['appNameHidden'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n progress?: AppShellProps['progress'];\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n casesTypesEmpty?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [activeAppName, setActiveAppName] = useState(args.appName || 'UI Audit');\n const caseLinks = args.caseLinks || defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useModalManager();\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems || defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n const [searchLoading, setSearchLoading] = useState(false);\n const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n const [searchTimeout, setSearchTimeout] = useState<number | null>();\n const [progress, setProgress] = useState<ProgressProps['message']>('');\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const addHandlersToLinks = (appShellLinks: AppShellProps['links']): AppShellProps['links'] => {\n return (appShellLinks || []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return {\n ...prevLink,\n active:\n prevLink.name === link.name ||\n !!prevLink.links?.filter(l => l.name === link.name).length\n };\n });\n });\n\n setProgress(`${link.name} loading...`);\n setTimeout(() => {\n args.onLinkClick?.(link.name);\n setProgress('');\n }, 1000);\n },\n links: link.links ? addHandlersToLinks(link.links) : undefined\n }));\n };\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return addHandlersToLinks(links);\n }, [links]);\n\n const defaultCreateLinks = [\n 'Data Analyst interview',\n 'Designer interview',\n 'Product Manager interview',\n 'Sales Representative interview',\n 'Software Engineer interview'\n ].map(name => ({\n name,\n onClick: () => {\n createModal(MultiStepModal, { heading: name, stepIndicator: 'horizontal' });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const onSearch = (val: string) => {\n setSearchVal(val);\n if (searchTimeout) {\n clearTimeout(searchTimeout);\n setSearchTimeout(null);\n }\n setResults([]);\n if (val) {\n setSearchLoading(true);\n const timeout = setTimeout(() => {\n setSearchLoading(false);\n setResults(searchResults.filter(res => res.primary.includes(val)));\n }, 1000);\n setSearchTimeout(timeout as unknown as number);\n }\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const [contexts, setContexts] = useState<ContextSwitcherProps['contexts']>([\n {\n id: '1',\n primary: activeAppName,\n selected: true,\n visual: <Icon name='app' />\n },\n {\n id: '2',\n primary: 'BI Warehouse',\n selected: false,\n visual: <Icon name='cloud' />\n }\n ]);\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n contextSwitcher={{\n contexts,\n onContextClick: (id: string) => {\n setActiveAppName(menuHelpers.getItem(contexts, id)!.primary);\n setContexts(cur =>\n cur!.map(ctx => {\n return { ...ctx, selected: id === ctx.id };\n })\n );\n }\n }}\n appInfo={\n args.appInfo || {\n href: args.href || 'https://www.pega.com/',\n imageSrc: args.imageSrc || './pega_logo_vertical_white.svg',\n fullImageSrc:\n args.fullImageSrc ||\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: activeAppName,\n portalName: args.portalName || 'Scrum',\n appNameHidden: args.appNameHidden\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n onSearch(value);\n },\n value: searchVal,\n searchResults: results,\n recentSearches,\n loading: searchLoading,\n filters: ['Story', 'Bug'],\n advancedSearchLink: { href: '/' }\n }\n : undefined\n }\n appHeader={args.appHeader}\n searchPage={args.searchPage}\n caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main || defaultMainContent}\n progress={args.progress || progress}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils || defaultUtils}\n collapsedHoverMenus={args.collapsedHoverMenus}\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'UI Audit',\n appNameHidden: false,\n portalName: 'Scrum',\n href: 'https://www.pega.com/',\n imageSrc: './pega_logo_vertical_white.svg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n progress: false,\n notificationsEmpty: false,\n notificationsLoading: false,\n casesTypesEmpty: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n appNameHidden: { control: { type: 'boolean' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n progress: { control: { type: 'boolean' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n casesTypesEmpty: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,EACL,QAAQ,EAER,YAAY,EAGZ,IAAI,EACJ,YAAY,EACZ,eAAe,EAEf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,EAGb,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAEtE,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;IACxC,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAkCV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC;IAC/E,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,YAAY,CAAC;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1E,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAqC,oBAAoB,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,IAAI,CAAC,WAAW,IAAI,cAAc,CACnC,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAC3C,CAAC;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAiB,CAAC;IACpE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA2B,EAAE,CAAC,CAAC;IAEvE,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,kBAAkB,GAAG,CAAC,aAAqC,EAA0B,EAAE;QAC3F,OAAO,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACxC,GAAG,IAAI;YACP,OAAO,CAAC,CAAgC;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,EAAE;oBAC1B,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;wBAC9B,OAAO;4BACL,GAAG,QAAQ;4BACX,MAAM,EAAE,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;yBACpC,CAAC;oBACJ,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBAEH,WAAW,CAAC,GAAG,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC;gBACvC,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC9B,WAAW,CAAC,EAAE,CAAC,CAAC;gBAClB,CAAC,EAAE,IAAI,CAAC,CAAC;YACX,CAAC;YACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;SAC/D,CAAC,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,OAAO,CAAyB,GAAG,EAAE;QAC7D,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,kBAAkB,GAAG;QACzB,wBAAwB;QACxB,oBAAoB;QACpB,2BAA2B;QAC3B,gCAAgC;QAChC,6BAA6B;KAC9B,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACb,IAAI;QACJ,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC,CAAC;QAC9E,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,uBAAuB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACnD,gBAAgB,CAAC,GAAG,CAAC,EAAE,CACrB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACxC,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,UAAU,CAAC,GAAG,CAAC,EAAE,CACf,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YAC1C,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE;QAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;QAClB,IAAI,aAAa,EAAE;YACjB,YAAY,CAAC,aAAa,CAAC,CAAC;YAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACxB;QACD,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,GAAG,EAAE;YACP,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC9B,gBAAgB,CAAC,KAAK,CAAC,CAAC;gBACxB,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACrE,CAAC,EAAE,IAAI,CAAC,CAAC;YACT,gBAAgB,CAAC,OAA4B,CAAC,CAAC;SAChD;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;YACnD,OAAO,EAAE,IAAI,CAAC,oBAAoB;YAClC,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,SAAS,EAAE,kBAAkB;SAC9B;KACF,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YACpC,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,cAAc;YAC3B,SAAS,EAAE,iBAAiB;SAC7B;QACD;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;YACvC,OAAO,EAAE,IAAI,CAAC,cAAc;YAC5B,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,YAAY;SACxB;KACF,CAAC;IAEF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAmC;QACzE;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,aAAa;YACtB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG;SAC5B;QACD;YACE,EAAE,EAAE,GAAG;YACP,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE,KAAK;YACf,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG;SAC9B;KACF,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAG;QACnB;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG;YAClC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB;YACxD,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,qBAAqB,GAAI;YAC7D,YAAY,EAAE,GAAG,EAAE;gBACjB,aAAa,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;gBACpD,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC;YACD,aAAa,EAAE,GAAG,EAAE;gBAClB,IAAI,iBAAiB,EAAE;oBACrB,gFAAgF;oBAChF,iCAAiC;oBACjC,4BAA4B,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;wBAC7D,sBAAsB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;oBACzC,CAAC,EAAE,KAAK,CAAC,CAAC;iBACX;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG;YACnC,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,GAAI;SACxD;KACF,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,eAAe,EAAE;YACf,QAAQ;YACR,cAAc,EAAE,CAAC,EAAU,EAAE,EAAE;gBAC7B,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAE,CAAC,OAAO,CAAC,CAAC;gBAC7D,WAAW,CAAC,GAAG,CAAC,EAAE,CAChB,GAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBACb,OAAO,EAAE,GAAG,GAAG,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC;gBAC7C,CAAC,CAAC,CACH,CAAC;YACJ,CAAC;SACF,EACD,OAAO,EACL,IAAI,CAAC,OAAO,IAAI;YACd,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,uBAAuB;YAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,gCAAgC;YAC3D,YAAY,EACV,IAAI,CAAC,YAAY;gBACjB,uEAAuE;YACzE,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,OAAO;YACtC,aAAa,EAAE,IAAI,CAAC,aAAa;SAClC,EAEH,WAAW,EACT,UAAU;YACR,CAAC,CAAC;gBACE,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE;oBAChC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAClB,CAAC;gBACD,KAAK,EAAE,SAAS;gBAChB,aAAa,EAAE,OAAO;gBACtB,cAAc;gBACd,OAAO,EAAE,aAAa;gBACtB,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;gBACzB,kBAAkB,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE;aAClC;YACH,CAAC,CAAC,SAAS,EAEf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,kBAAkB,EAC7E,KAAK,EAAE,iBAAiB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,kBAAkB,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,QAAQ,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,YAAY,EACjC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,GAC7C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,UAAU;IACnB,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,OAAO;IACnB,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,gCAAgC;IAC1C,YAAY,EAAE,uEAAuE;IACrF,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,KAAK;IACf,kBAAkB,EAAE,KAAK;IACzB,oBAAoB,EAAE,KAAK;IAC3B,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACtD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAOF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,WAAW,EAAE;oBACX,GAAG,EAAE;wBACH,kBAAkB,EAAE,IAAI,CAAC,QAAQ;qBAClC;oBACD,MAAM,EAAE;wBACN,kBAAkB,EAAE,IAAI,CAAC,WAAW;qBACrC;iBACF;aACF;SACF,YAED,KAAC,YAAY,IAAC,SAAS,SAAG,GACZ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACxC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n AppShell,\n AppShellProps,\n AppShellList,\n ContextSwitcherProps,\n DrawerItemProps,\n Icon,\n registerIcon,\n useModalManager,\n ForwardProps,\n useAfterInitialEffect,\n windowIsAvailable,\n Configuration,\n SearchInputProps,\n ProgressProps,\n menuHelpers\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport { recentSearches, searchResults } from '../SearchInput/SearchInput.mocks';\nimport { MultiStepModal } from '../MultiStepForm/MultiStepForm.mocks';\n\nimport {\n defaultLinks,\n defaultMainContent,\n defaultNotifications,\n defaultRecents,\n operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n title: 'Core/App Shell',\n component: AppShell,\n excludeStories: ['ConfigurableAppShell'],\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface AppShellStoryProps {\n /** Demo props */\n main?: AppShellProps['main'];\n appInfo?: AppShellProps['appInfo'];\n searchPage?: AppShellProps['searchPage'];\n banners?: AppShellProps['banners'];\n cases?: AppShellProps['cases'];\n caseLinks?: AppShellProps['links'];\n createLinks?: any[];\n recentItems?: any[];\n utils?: AppShellProps['utils'];\n onLinkClick?: (name: string) => void;\n collapsedHoverMenus?: boolean;\n\n /** Storybook controls */\n appName?: AppShellProps['appInfo']['appName'];\n appNameHidden?: AppShellProps['appInfo']['appNameHidden'];\n portalName?: AppShellProps['appInfo']['portalName'];\n href?: AppShellProps['appInfo']['href'];\n imageSrc?: AppShellProps['appInfo']['imageSrc'];\n fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n withSearch?: boolean;\n appHeader?: AppShellProps['appHeader'];\n progress?: AppShellProps['progress'];\n notificationsEmpty?: boolean;\n notificationsLoading?: boolean;\n casesTypesEmpty?: boolean;\n recentsEmpty?: boolean;\n recentsLoading?: boolean;\n pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n const [activeAppName, setActiveAppName] = useState(args.appName || 'UI Audit');\n const caseLinks = args.caseLinks || defaultLinks;\n const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n const { create: createModal } = useModalManager();\n const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n const [notifications, setNotifications] =\n useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n args.recentItems || defaultRecents\n );\n const [numNewNotifications, setNumNewNotifications] = useState(\n notifications.filter(x => x.unread).length\n );\n const [searchVal, setSearchVal] = useState('');\n const [searchLoading, setSearchLoading] = useState(false);\n const [results, setResults] = useState<SearchInputProps['searchResults']>([]);\n const [searchTimeout, setSearchTimeout] = useState<number | null>();\n const [progress, setProgress] = useState<ProgressProps['message']>('');\n\n useAfterInitialEffect(() => {\n setLinks(caseLinks);\n }, [caseLinks]);\n\n const addHandlersToLinks = (appShellLinks: AppShellProps['links']): AppShellProps['links'] => {\n return (appShellLinks || []).map(link => ({\n ...link,\n onClick(e: MouseEvent<HTMLAnchorElement>) {\n e.preventDefault();\n setLinks((prevLinks = []) => {\n return prevLinks.map(prevLink => {\n return {\n ...prevLink,\n active: prevLink.name === link.name\n };\n });\n });\n\n setProgress(`${link.name} loading...`);\n setTimeout(() => {\n args.onLinkClick?.(link.name);\n setProgress('');\n }, 1000);\n },\n links: link.links ? addHandlersToLinks(link.links) : undefined\n }));\n };\n\n const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n return addHandlersToLinks(links);\n }, [links]);\n\n const defaultCreateLinks = [\n 'Data Analyst interview',\n 'Designer interview',\n 'Product Manager interview',\n 'Sales Representative interview',\n 'Software Engineer interview'\n ].map(name => ({\n name,\n onClick: () => {\n createModal(MultiStepModal, { heading: name, stepIndicator: 'horizontal' });\n }\n }));\n\n const handleNotificationClick = (passedId: string) => {\n setNotifications(cur =>\n cur.map(({ id, unread, ...item }) => ({\n id,\n unread: passedId === id ? false : unread,\n ...item\n }))\n );\n };\n\n const handlePinToggle = (passedId: string) => {\n setRecents(cur =>\n cur.map(({ id, pinned, ...item }) => ({\n id,\n pinned: passedId === id ? !pinned : pinned,\n ...item\n }))\n );\n };\n\n const onSearch = (val: string) => {\n setSearchVal(val);\n if (searchTimeout) {\n clearTimeout(searchTimeout);\n setSearchTimeout(null);\n }\n setResults([]);\n if (val) {\n setSearchLoading(true);\n const timeout = setTimeout(() => {\n setSearchLoading(false);\n setResults(searchResults.filter(res => res.primary.includes(val)));\n }, 1000);\n setSearchTimeout(timeout as unknown as number);\n }\n };\n\n const notificationViewItems = [\n {\n id: '234',\n items: args.notificationsEmpty ? [] : notifications,\n loading: args.notificationsLoading,\n onItemClick: handleNotificationClick,\n viewAll: {\n href: '#'\n },\n emptyText: 'No notifications'\n }\n ];\n\n const recentViewItems = [\n {\n id: '456',\n items: recents.filter(x => x.pinned),\n loading: args.pinsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Pinned items',\n emptyText: 'No pinned items'\n },\n {\n id: '789',\n items: args.recentsEmpty ? [] : recents,\n loading: args.recentsLoading,\n onItemPinToggle: handlePinToggle,\n viewAll: {\n href: '#'\n },\n displayPins: true,\n headingText: 'Recently viewed',\n emptyText: 'No recents'\n }\n ];\n\n const [contexts, setContexts] = useState<ContextSwitcherProps['contexts']>([\n {\n id: '1',\n primary: activeAppName,\n selected: true,\n visual: <Icon name='app' />\n },\n {\n id: '2',\n primary: 'BI Warehouse',\n selected: false,\n visual: <Icon name='cloud' />\n }\n ]);\n\n const newNotificationCountTimerRef = useRef(NaN);\n\n const defaultUtils = [\n {\n name: 'Notifications',\n visual: <Icon name='bell-solid' />,\n count: args.notificationsEmpty ? 0 : numNewNotifications,\n drawerView: <AppShellList listView={notificationViewItems} />,\n onDrawerOpen: () => {\n clearInterval(newNotificationCountTimerRef.current);\n setNumNewNotifications(0);\n },\n onDrawerClose: () => {\n if (windowIsAvailable) {\n // Mock new notifications arriving on a minute interval after the drawer closes.\n // Let's face it, you're popular.\n newNotificationCountTimerRef.current = window.setInterval(() => {\n setNumNewNotifications(cur => cur + 2);\n }, 60000);\n }\n }\n },\n {\n name: 'Recents',\n visual: <Icon name='clock-solid' />,\n drawerView: <AppShellList listView={recentViewItems} />\n }\n ];\n\n return (\n <AppShell\n contextSwitcher={{\n contexts,\n onContextClick: (id: string) => {\n setActiveAppName(menuHelpers.getItem(contexts, id)!.primary);\n setContexts(cur =>\n cur!.map(ctx => {\n return { ...ctx, selected: id === ctx.id };\n })\n );\n }\n }}\n appInfo={\n args.appInfo || {\n href: args.href || 'https://www.pega.com/',\n imageSrc: args.imageSrc || './pega_logo_vertical_white.svg',\n fullImageSrc:\n args.fullImageSrc ||\n 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n appName: activeAppName,\n portalName: args.portalName || 'Scrum',\n appNameHidden: args.appNameHidden\n }\n }\n searchInput={\n showSearch\n ? {\n onSearchChange: (value: string) => {\n onSearch(value);\n },\n value: searchVal,\n searchResults: results,\n recentSearches,\n loading: searchLoading,\n filters: ['Story', 'Bug'],\n advancedSearchLink: { href: '/' }\n }\n : undefined\n }\n appHeader={args.appHeader}\n searchPage={args.searchPage}\n caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n links={linksWithHandlers}\n main={args.main || defaultMainContent}\n progress={args.progress || progress}\n cases={args.cases}\n banners={args.banners}\n operator={operatorData}\n utils={args.utils || defaultUtils}\n collapsedHoverMenus={args.collapsedHoverMenus}\n />\n );\n};\n\nAppShellDemo.args = {\n appName: 'UI Audit',\n appNameHidden: false,\n portalName: 'Scrum',\n href: 'https://www.pega.com/',\n imageSrc: './pega_logo_vertical_white.svg',\n fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n withSearch: true,\n appHeader: true,\n progress: false,\n notificationsEmpty: false,\n notificationsLoading: false,\n casesTypesEmpty: false,\n recentsEmpty: false,\n recentsLoading: false,\n pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n appName: { control: { type: 'text' } },\n appNameHidden: { control: { type: 'boolean' } },\n portalName: { control: { type: 'text' } },\n href: { control: { type: 'text' } },\n imageSrc: { control: { type: 'text' } },\n fullImageSrc: { control: { type: 'text' } },\n withSearch: { control: { type: 'boolean' } },\n appHeader: { control: { type: 'boolean' } },\n progress: { control: { type: 'boolean' } },\n notificationsEmpty: { control: { type: 'boolean' } },\n notificationsLoading: { control: { type: 'boolean' } },\n casesTypesEmpty: { control: { type: 'boolean' } },\n recentsEmpty: { control: { type: 'boolean' } },\n recentsLoading: { control: { type: 'boolean' } },\n pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n navColor?: string;\n headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n args: ConfigurableAppShellProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'app-shell': {\n nav: {\n 'background-color': args.navColor\n },\n header: {\n 'background-color': args.headerColor\n }\n }\n }\n }}\n >\n <AppShellDemo appHeader />\n </Configuration>\n );\n};\n\nConfigurableAppShell.args = {\n navColor: '#252c32',\n headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n navColor: { control: { type: 'color' } },\n headerColor: { control: { type: 'color' } }\n};\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
import { DynamicContentEditorProps } from '@pega/cosmos-react-rte';
|
|
3
|
+
declare const _default: Meta;
|
|
4
|
+
export default _default;
|
|
5
|
+
export interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {
|
|
6
|
+
}
|
|
7
|
+
export declare const DynamicContentEditorDemo: Story<Partial<DynamicContentEditorStoryProps>>;
|
|
8
|
+
//# sourceMappingURL=DynamicContentEditor.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DynamicContentEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAe/C,OAAO,EAGL,yBAAyB,EAE1B,MAAM,wBAAwB,CAAC;;AAIhC,wBAGU;AAEV,MAAM,WAAW,8BAA+B,SAAQ,yBAAyB;CAAG;AAEpF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAkInF,CAAC"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, useCallback } from 'react';
|
|
3
|
+
import { action } from '@storybook/addon-actions';
|
|
4
|
+
import { Button, Card, CardContent, CardFooter, Flex, TextArea, useAutoResize, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
|
|
5
|
+
import { DynamicContentEditor } from '@pega/cosmos-react-rte';
|
|
6
|
+
import FieldSelector from './FieldSelector';
|
|
7
|
+
export default {
|
|
8
|
+
title: 'RTE/DynamicContentEditor',
|
|
9
|
+
component: DynamicContentEditor
|
|
10
|
+
};
|
|
11
|
+
export const DynamicContentEditorDemo = (args) => {
|
|
12
|
+
const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
|
|
13
|
+
const rteRef = useRef(null);
|
|
14
|
+
const fieldItems = [
|
|
15
|
+
{
|
|
16
|
+
id: 'CustomerName',
|
|
17
|
+
primary: 'CustomerName',
|
|
18
|
+
items: [
|
|
19
|
+
{
|
|
20
|
+
id: '1-2',
|
|
21
|
+
primary: 'Locale'
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
id: '1-1',
|
|
25
|
+
primary: 'Response Type',
|
|
26
|
+
items: [
|
|
27
|
+
{
|
|
28
|
+
id: 'group-1-1-b',
|
|
29
|
+
label: 'B',
|
|
30
|
+
items: [{ id: '1-1-1', primary: 'Reply to' }]
|
|
31
|
+
},
|
|
32
|
+
{ id: '1-1-4', primary: 'Forward to' }
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
{ id: 'Address', primary: 'Address' },
|
|
38
|
+
{ id: 'Locality', primary: 'Locality' },
|
|
39
|
+
{ id: 'Country', primary: 'Country' },
|
|
40
|
+
{ id: 'Region', primary: 'Region' },
|
|
41
|
+
{ id: 'Occupation', primary: 'Occupation' },
|
|
42
|
+
{ id: 'City', primary: 'City' },
|
|
43
|
+
{ id: 'Colony', primary: 'Colony' },
|
|
44
|
+
{ id: 'Lastname', primary: 'Lastname' },
|
|
45
|
+
{ id: 'Preference', primary: 'Preference' },
|
|
46
|
+
{ id: 'Currency', primary: 'Currency' },
|
|
47
|
+
{ id: 'Iconname', primary: 'Iconname' }
|
|
48
|
+
];
|
|
49
|
+
const onImageAdded = (image, id) => {
|
|
50
|
+
const src = URL.createObjectURL(image);
|
|
51
|
+
rteRef.current?.appendImage({ src, alt: image.name }, id);
|
|
52
|
+
};
|
|
53
|
+
const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
|
|
54
|
+
const ref = useRef(null);
|
|
55
|
+
const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
|
|
56
|
+
const handleShowHtml = () => {
|
|
57
|
+
resizeTextArea();
|
|
58
|
+
setHtml(rteRef.current?.getHtml() || '');
|
|
59
|
+
};
|
|
60
|
+
const t = useI18n();
|
|
61
|
+
const [selectedField, setSelectedField] = useState({
|
|
62
|
+
id: '',
|
|
63
|
+
text: ''
|
|
64
|
+
});
|
|
65
|
+
const updateSelection = (selectedItem) => {
|
|
66
|
+
setSelectedField(selectedItem);
|
|
67
|
+
};
|
|
68
|
+
const onSubmit = useCallback((insertField) => {
|
|
69
|
+
insertField(selectedField);
|
|
70
|
+
}, [selectedField]);
|
|
71
|
+
const dynamicContentPicker = (_jsx(Flex, { container: {
|
|
72
|
+
gap: 2,
|
|
73
|
+
direction: 'column'
|
|
74
|
+
}, children: _jsx(FieldSelector, { itemList: [
|
|
75
|
+
{ id: 'CustomerName', text: 'CustomerName' },
|
|
76
|
+
{ id: 'Address', text: 'Address' },
|
|
77
|
+
{ id: 'Locality', text: 'Locality' },
|
|
78
|
+
{ id: 'Country', text: 'Country' },
|
|
79
|
+
{ id: 'Region', text: 'Region' },
|
|
80
|
+
{ id: 'Occupation', text: 'Occupation' }
|
|
81
|
+
], label: 'Field', updateSelection: updateSelection, placeholder: t('select'), defaultSelection: selectedField }, selectedField?.id) }));
|
|
82
|
+
const onActiveFieldChange = (field) => setSelectedField(field);
|
|
83
|
+
return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx(TextArea, { value: html, onChange: e => setHtml(e.target.value), autoResize: true, ref: consolidatedRef }) }), _jsx(CardFooter, { children: _jsx(Button, { onClick: () => rteRef.current?.insertHtml(html.trim(), true), children: "Overwrite RTE with new HTML" }) })] }), _jsx(DynamicContentEditor, { defaultValue: args.defaultValue || html, onImageAdded: onImageAdded, ref: rteRef, label: 'Dynamic content editor', toolbar: ['inline-styling', 'lists', 'indentation', 'links', 'images'], form: args.form || { onSubmit, dynamicContentPicker }, onActiveFieldChange: args.onActiveFieldChange || onActiveFieldChange, fieldItems: args.fieldItems || fieldItems, onBlur: action('Editor onBlur') }), _jsx(Flex, { container: { gap: 1 }, children: _jsx(Button, { onClick: () => handleShowHtml(), children: "Show HTML" }) })] }));
|
|
84
|
+
};
|
|
85
|
+
//# sourceMappingURL=DynamicContentEditor.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DynamicContentEditor.stories.js","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/DynamicContentEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState, useCallback } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n TextArea,\n useAutoResize,\n useConsolidatedRef,\n useI18n\n} from '@pega/cosmos-react-core';\nimport {\n EditorState,\n DynamicContentEditor,\n DynamicContentEditorProps,\n ItemType\n} from '@pega/cosmos-react-rte';\n\nimport FieldSelector, { FieldSelectorProps } from './FieldSelector';\n\nexport default {\n title: 'RTE/DynamicContentEditor',\n component: DynamicContentEditor\n} as Meta;\n\nexport interface DynamicContentEditorStoryProps extends DynamicContentEditorProps {}\n\nexport const DynamicContentEditorDemo: Story<Partial<DynamicContentEditorStoryProps>> = (\n args: Partial<DynamicContentEditorStoryProps>\n) => {\n const [html, setHtml] = useState(\n '<p>Hi <pega-reference role=\"button\" contenteditable=\"false\" data-rule-type=\"field\" data-rule-id=\"CustomerName\">CustomerName</pega-reference><p>please check this <a href=\"https://google.com\">link</a></p></p>'\n );\n const rteRef = useRef<EditorState>(null);\n\n const fieldItems: DynamicContentEditorProps['fieldItems'] = [\n {\n id: 'CustomerName',\n primary: 'CustomerName',\n items: [\n {\n id: '1-2',\n primary: 'Locale'\n },\n {\n id: '1-1',\n primary: 'Response Type',\n items: [\n {\n id: 'group-1-1-b',\n label: 'B',\n items: [{ id: '1-1-1', primary: 'Reply to' }]\n },\n { id: '1-1-4', primary: 'Forward to' }\n ]\n }\n ]\n },\n { id: 'Address', primary: 'Address' },\n { id: 'Locality', primary: 'Locality' },\n { id: 'Country', primary: 'Country' },\n { id: 'Region', primary: 'Region' },\n { id: 'Occupation', primary: 'Occupation' },\n { id: 'City', primary: 'City' },\n { id: 'Colony', primary: 'Colony' },\n { id: 'Lastname', primary: 'Lastname' },\n { id: 'Preference', primary: 'Preference' },\n { id: 'Currency', primary: 'Currency' },\n { id: 'Iconname', primary: 'Iconname' }\n ];\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n const ref = useRef(null);\n const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n const handleShowHtml = () => {\n resizeTextArea();\n setHtml(rteRef.current?.getHtml() || '');\n };\n const t = useI18n();\n const [selectedField, setSelectedField] = useState<ItemType>({\n id: '',\n text: ''\n });\n\n const updateSelection: FieldSelectorProps['updateSelection'] = (selectedItem: ItemType) => {\n setSelectedField(selectedItem);\n };\n const onSubmit = useCallback(\n (insertField: (selectedField: ItemType) => void) => {\n insertField(selectedField);\n },\n [selectedField]\n );\n\n const dynamicContentPicker = (\n <Flex\n container={{\n gap: 2,\n direction: 'column'\n }}\n >\n <FieldSelector\n itemList={[\n { id: 'CustomerName', text: 'CustomerName' },\n { id: 'Address', text: 'Address' },\n { id: 'Locality', text: 'Locality' },\n { id: 'Country', text: 'Country' },\n { id: 'Region', text: 'Region' },\n { id: 'Occupation', text: 'Occupation' }\n ]}\n key={selectedField?.id}\n label='Field'\n updateSelection={updateSelection}\n placeholder={t('select')}\n defaultSelection={selectedField}\n />\n </Flex>\n );\n const onActiveFieldChange = (field: ItemType) => setSelectedField(field);\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea\n value={html}\n onChange={e => setHtml(e.target.value)}\n autoResize\n ref={consolidatedRef}\n />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <DynamicContentEditor\n defaultValue={args.defaultValue || html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label='Dynamic content editor'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n form={args.form || { onSubmit, dynamicContentPicker }}\n onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange}\n fieldItems={args.fieldItems || fieldItems}\n onBlur={action('Editor onBlur')}\n />\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => handleShowHtml()}>Show HTML</Button>\n </Flex>\n </Flex>\n );\n};\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { FunctionComponent } from 'react';
|
|
2
|
+
import { ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
+
import { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';
|
|
4
|
+
export interface FieldSelectorProps extends NoChildrenProp {
|
|
5
|
+
/** Array of values for the combobox options. */
|
|
6
|
+
itemList: ItemType[];
|
|
7
|
+
/** Return selected item */
|
|
8
|
+
updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;
|
|
9
|
+
/** Default selected item */
|
|
10
|
+
defaultSelection?: ItemType;
|
|
11
|
+
}
|
|
12
|
+
declare const FieldSelector: FunctionComponent<FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>>;
|
|
13
|
+
export default FieldSelector;
|
|
14
|
+
//# sourceMappingURL=FieldSelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldSelector.d.ts","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAEvF,OAAO,EAEL,aAAa,EAGb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,uFAAuF,CAAC;AAEjH,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACxD,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,2BAA2B;IAC3B,eAAe,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CACpC,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAC,CAiGxF,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, useState, useCallback } from 'react';
|
|
3
|
+
import { ComboBox, createStringMatcher, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
+
const FieldSelector = ({ itemList, label, mode = 'single-select', required = false, updateSelection, placeholder, defaultSelection }) => {
|
|
5
|
+
const t = useI18n();
|
|
6
|
+
const [filterValue, setFilterValue] = useState('');
|
|
7
|
+
const [items, setItems] = useState(() => {
|
|
8
|
+
return itemList.map(item => {
|
|
9
|
+
return {
|
|
10
|
+
id: item.id,
|
|
11
|
+
primary: item.text,
|
|
12
|
+
selected: defaultSelection ? defaultSelection.id === item.id : false
|
|
13
|
+
};
|
|
14
|
+
});
|
|
15
|
+
});
|
|
16
|
+
const filterRegex = createStringMatcher(filterValue, 'contains');
|
|
17
|
+
const itemsToRender = useMemo(() => {
|
|
18
|
+
return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;
|
|
19
|
+
}, [filterValue, items]);
|
|
20
|
+
const clearSelection = () => {
|
|
21
|
+
setItems(curr => {
|
|
22
|
+
return curr?.map(item => {
|
|
23
|
+
return {
|
|
24
|
+
...item,
|
|
25
|
+
selected: false
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
const selectItem = useCallback((id) => {
|
|
31
|
+
setFilterValue('');
|
|
32
|
+
setItems(curr => curr?.map(item => {
|
|
33
|
+
if (item.id === id) {
|
|
34
|
+
return {
|
|
35
|
+
...item,
|
|
36
|
+
selected: true
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
return { ...item, selected: false };
|
|
40
|
+
}));
|
|
41
|
+
const selectedItem = items?.find(item => item.id === id);
|
|
42
|
+
if (selectedItem?.id)
|
|
43
|
+
updateSelection({
|
|
44
|
+
id: selectedItem.id,
|
|
45
|
+
text: selectedItem.primary
|
|
46
|
+
}, label);
|
|
47
|
+
}, [filterValue, items]);
|
|
48
|
+
const selected = useMemo(() => {
|
|
49
|
+
return items?.find(item => item.selected);
|
|
50
|
+
}, [items]);
|
|
51
|
+
const comboBoxProps = {
|
|
52
|
+
label,
|
|
53
|
+
placeholder,
|
|
54
|
+
mode,
|
|
55
|
+
value: filterValue,
|
|
56
|
+
selected: selected
|
|
57
|
+
? {
|
|
58
|
+
items: {
|
|
59
|
+
id: selected.id,
|
|
60
|
+
text: selected.primary
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
: undefined,
|
|
64
|
+
onChange: (e) => {
|
|
65
|
+
if (e.target.value)
|
|
66
|
+
clearSelection();
|
|
67
|
+
setFilterValue(e.target.value);
|
|
68
|
+
},
|
|
69
|
+
onBlur: () => setFilterValue(''),
|
|
70
|
+
menu: {
|
|
71
|
+
items: itemsToRender,
|
|
72
|
+
accent: filterRegex,
|
|
73
|
+
onItemClick: selectItem,
|
|
74
|
+
emptyText: t('no_items')
|
|
75
|
+
},
|
|
76
|
+
required
|
|
77
|
+
};
|
|
78
|
+
return _jsx(ComboBox, { ...comboBoxProps });
|
|
79
|
+
};
|
|
80
|
+
export default FieldSelector;
|
|
81
|
+
//# sourceMappingURL=FieldSelector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldSelector.js","sourceRoot":"","sources":["../../../src/rte/DynamicContentEditor/FieldSelector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useMemo, useState, useCallback } from 'react';\n\nimport {\n ComboBox,\n ComboBoxProps,\n createStringMatcher,\n MenuItemProps,\n NoChildrenProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { ItemType } from '@pega/cosmos-react-rte/lib/components/DynamicContentEditor/DynamicContentEditor.types';\n\nexport interface FieldSelectorProps extends NoChildrenProp {\n /** Array of values for the combobox options. */\n itemList: ItemType[];\n /** Return selected item */\n updateSelection: (selectedItem: ItemType, label: ComboBoxProps['label']) => void;\n /** Default selected item */\n defaultSelection?: ItemType;\n}\n\nconst FieldSelector: FunctionComponent<\n FieldSelectorProps & Pick<ComboBoxProps, 'label' | 'mode' | 'required' | 'placeholder'>\n> = ({\n itemList,\n label,\n mode = 'single-select',\n required = false,\n updateSelection,\n placeholder,\n defaultSelection\n}) => {\n const t = useI18n();\n\n const [filterValue, setFilterValue] = useState('');\n const [items, setItems] = useState(() => {\n return itemList.map(item => {\n return {\n id: item.id,\n primary: item.text,\n selected: defaultSelection ? defaultSelection.id === item.id : false\n };\n });\n });\n\n const filterRegex = createStringMatcher(filterValue, 'contains');\n const itemsToRender = useMemo(() => {\n return filterRegex ? items.filter(({ primary }) => filterRegex.test(primary)) : items;\n }, [filterValue, items]);\n\n const clearSelection = () => {\n setItems(curr => {\n return curr?.map(item => {\n return {\n ...item,\n selected: false\n };\n });\n });\n };\n\n const selectItem = useCallback(\n (id: MenuItemProps['id']) => {\n setFilterValue('');\n setItems(curr =>\n curr?.map(item => {\n if (item.id === id) {\n return {\n ...item,\n selected: true\n };\n }\n return { ...item, selected: false };\n })\n );\n const selectedItem = items?.find(item => item.id === id);\n if (selectedItem?.id)\n updateSelection(\n {\n id: selectedItem.id,\n text: selectedItem.primary\n },\n label\n );\n },\n [filterValue, items]\n );\n\n const selected = useMemo(() => {\n return items?.find(item => item.selected);\n }, [items]);\n\n const comboBoxProps: ComboBoxProps = {\n label,\n placeholder,\n mode,\n value: filterValue,\n selected: selected\n ? {\n items: {\n id: selected.id,\n text: selected.primary\n }\n }\n : undefined,\n onChange: (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.value) clearSelection();\n setFilterValue(e.target.value);\n },\n onBlur: () => setFilterValue(''),\n menu: {\n items: itemsToRender,\n accent: filterRegex,\n onItemClick: selectItem,\n emptyText: t('no_items')\n },\n required\n };\n return <ComboBox {...comboBoxProps} />;\n};\n\nexport default FieldSelector;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "4.0.0-dev.19.
|
|
3
|
+
"version": "4.0.0-dev.19.3",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-build": "4.0.0-dev.19.
|
|
24
|
-
"@pega/cosmos-react-condition-builder": "4.0.0-dev.19.
|
|
25
|
-
"@pega/cosmos-react-core": "4.0.0-dev.19.
|
|
26
|
-
"@pega/cosmos-react-cs": "4.0.0-dev.19.
|
|
27
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.19.
|
|
28
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.19.
|
|
29
|
-
"@pega/cosmos-react-social": "4.0.0-dev.19.
|
|
30
|
-
"@pega/cosmos-react-work": "4.0.0-dev.19.
|
|
23
|
+
"@pega/cosmos-react-build": "4.0.0-dev.19.3",
|
|
24
|
+
"@pega/cosmos-react-condition-builder": "4.0.0-dev.19.3",
|
|
25
|
+
"@pega/cosmos-react-core": "4.0.0-dev.19.3",
|
|
26
|
+
"@pega/cosmos-react-cs": "4.0.0-dev.19.3",
|
|
27
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.19.3",
|
|
28
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.19.3",
|
|
29
|
+
"@pega/cosmos-react-social": "4.0.0-dev.19.3",
|
|
30
|
+
"@pega/cosmos-react-work": "4.0.0-dev.19.3",
|
|
31
31
|
"@storybook/addon-a11y": "^6.4.19",
|
|
32
32
|
"@storybook/addon-actions": "^6.4.19",
|
|
33
33
|
"@storybook/addon-links": "^6.5.16",
|