npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.26.0 → 3.0.0-dev.27.2 - Mend

@pega/cosmos-react-demos 3.0.0-dev.26.0 → 3.0.0-dev.27.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/lib/work/SearchResults/SearchResults.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import { Status, Text, Flex } from '@pega/cosmos-react-core';
 import { CasePreview, SearchResults } from '@pega/cosmos-react-work';
 import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
@@ -20,8 +20,10 @@ export const SearchResultsDemo = (args) => {
     const [filters, setFilters] = useState(initialFilters);
     const [search, setSearch] = useState('');
     const [limit, setLimit] = useState(2);
-    useEffect(() => {
-        const activeFilters = filters.flatMap(group => {
+    const [searchLoading, setSearchLoading] = useState(false);
+    const searchTimeoutRef = useRef();
+    const getActiveFilters = () => {
+        return filters.flatMap(group => {
             if (group.type === 'select') {
                 return group.items.flatMap(item => {
                     if (item.checked) {
@@ -36,48 +38,71 @@ export const SearchResultsDemo = (args) => {
             }
             return [];
         });
-        if (activeFilters.length > 0 || search !== '') {
-            setResults(() => {
-                const filteredResults = initialResults.filter(result => {
-                    const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;
-                    const lastUpdatedFilterActive = activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;
-                    let matchesStatusFilter = !statusFilterActive;
-                    let matchesLastUpdatedFilter = !lastUpdatedFilterActive;
-                    activeFilters.forEach(filter => {
-                        result.meta?.forEach(tag => {
-                            if (tag) {
-                                if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {
-                                    matchesStatusFilter = true;
-                                }
-                                if (!matchesLastUpdatedFilter &&
-                                    filter.groupName === 'Last updated' &&
-                                    typeof tag === 'string' &&
-                                    ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) ||
-                                        (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) ||
-                                        (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) ||
-                                        (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))) {
-                                    matchesLastUpdatedFilter = true;
-                                }
-                            }
-                        });
-                    });
-                    return matchesStatusFilter && matchesLastUpdatedFilter;
-                });
-                return filteredResults.filter(result => {
-                    if (result &&
-                        (result.description?.toLowerCase().includes(search.toLowerCase()) ||
-                            result.title.toLowerCase().includes(search.toLowerCase()) ||
-                            result.id.toLowerCase().includes(search.toLowerCase()))) {
-                        return true;
+    };
+    const getResults = (searchStr, activeFilters) => {
+        const filteredResults = initialResults.filter(result => {
+            const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;
+            const lastUpdatedFilterActive = activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;
+            let matchesStatusFilter = !statusFilterActive;
+            let matchesLastUpdatedFilter = !lastUpdatedFilterActive;
+            activeFilters.forEach(filter => {
+                result.meta?.forEach(tag => {
+                    if (tag) {
+                        if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {
+                            matchesStatusFilter = true;
+                        }
+                        if (!matchesLastUpdatedFilter &&
+                            filter.groupName === 'Last updated' &&
+                            typeof tag === 'string' &&
+                            ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) ||
+                                (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) ||
+                                (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) ||
+                                (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))) {
+                            matchesLastUpdatedFilter = true;
+                        }
                     }
-                    return false;
                 });
             });
+            return matchesStatusFilter && matchesLastUpdatedFilter;
+        });
+        return filteredResults.filter(result => {
+            if (result &&
+                (result.description?.toLowerCase().includes(searchStr.toLowerCase()) ||
+                    result.title.toLowerCase().includes(searchStr.toLowerCase()) ||
+                    result.id.toLowerCase().includes(searchStr.toLowerCase()))) {
+                return true;
+            }
+            return false;
+        });
+    };
+    useEffect(() => {
+        const activeFilters = getActiveFilters();
+        if (activeFilters.length > 0 || search !== '') {
+            if (searchTimeoutRef.current)
+                clearTimeout(searchTimeoutRef.current);
+            setSearchLoading(true);
+            searchTimeoutRef.current = setTimeout(() => {
+                setResults(getResults(search, activeFilters));
+                setSearchLoading(false);
+            }, 1500);
         }
         else {
             setResults([]);
         }
-    }, [search, filters]);
+        return () => {
+            if (searchTimeoutRef.current)
+                clearTimeout(searchTimeoutRef.current);
+        };
+    }, [filters]);
+    const handleSearchSubmit = (value) => {
+        if (searchTimeoutRef?.current)
+            clearTimeout(searchTimeoutRef?.current);
+        setSearchLoading(true);
+        searchTimeoutRef.current = setTimeout(() => {
+            setResults(getResults(value, getActiveFilters()));
+            setSearchLoading(false);
+        }, 1500);
+    };
     const handleFilterChange = (changeEvent) => {
         setFilters(curr => {
             return curr.map(filter => {
@@ -174,7 +199,12 @@ export const SearchResultsDemo = (args) => {
     };
     const searchResults = (_jsxs(_Fragment, { children: [_jsx(SearchResults, { results: limit < results.length
                     ? renderForDisplay(results.slice(0, limit))
-                    : renderForDisplay(results), searchInputProps: { value: search, onSearchChange: setSearch }, count: results.length, filters: filters, onFilterChange: handleFilterChange, onClearAllFilters: clearAllFilters, onClearFilter: handleClearFilter, onShowMore: limit < results.length ? handleShowMore : undefined, loading: args.loading }), _jsx(CasePreview, { open: !!preview, caseId: preview?.id || '', heading: preview?.title || '', tabs: {
+                    : renderForDisplay(results), searchInputProps: {
+                    value: search,
+                    onSearchChange: setSearch,
+                    onSearchSubmit: handleSearchSubmit,
+                    searchInputAriaLabel: 'Search'
+                }, count: results.length, filters: filters, onFilterChange: handleFilterChange, onClearAllFilters: clearAllFilters, onClearFilter: handleClearFilter, onShowMore: limit < results.length ? handleShowMore : undefined, loading: searchLoading }), _jsx(CasePreview, { open: !!preview, caseId: preview?.id || '', heading: preview?.title || '', tabs: {
                     items: [],
                     currentTabId: previewTabId || '',
                     onClick: (id) => setPreviewTabId(id)
@@ -184,11 +214,9 @@ export const SearchResultsDemo = (args) => {
     return args.withAppShell ? (_jsx(AppShellDemo, { appHeader: true, main: searchResults, searchPage: true })) : (searchResults);
 };
 SearchResultsDemo.args = {
-    withAppShell: false,
-    loading: false
+    withAppShell: false
 };
 SearchResultsDemo.argTypes = {
-    withAppShell: { control: { type: 'boolean' } },
-    loading: { control: { type: 'boolean' } }
+    withAppShell: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=SearchResults.stories.js.map

package/lib/work/SearchResults/SearchResults.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchResults.stories.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useMemo } from 'react';\n\nimport { Status, OmitStrict, Text, Flex } from '@pega/cosmos-react-core';\nimport {\n CasePreview,\n SearchResults,\n SearchResultsProps,\n FilterEvent,\n SearchResultProps\n} from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { getInitialResults, initialFilters } from './SearchResults.mocks';\nimport { ColoredText } from './SearchResults.styles';\n\nexport default {\n title: 'Work/SearchResults',\n component: SearchResults,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ntype ResultMeta = OmitStrict<SearchResultProps, 'link'>;\n\ninterface SearchResultsStoryProps {\n withAppShell?: boolean;\n loading?: boolean;\n}\n\nexport const SearchResultsDemo: Story<SearchResultsStoryProps> = (\n args: SearchResultsStoryProps\n) => {\n const [preview, setPreview] = useState<undefined \| ResultMeta>();\n const [previewTabId, setPreviewTabId] = useState<undefined \| string>();\n const initialResults = useMemo(() => getInitialResults(setPreview, setPreviewTabId), []);\n const [results, setResults] = useState(initialResults);\n const [filters, setFilters] = useState(initialFilters);\n const [search, setSearch] = useState('');\n const [limit, setLimit] = useState(2);\n\n useEffect(() => {\n const activeFilters = filters.flatMap(group => {\n if (group.type === 'select') {\n return group.items.flatMap(item => {\n if (item.checked) {\n return {\n id: item.id,\n name: item.name,\n groupName: group.name\n };\n }\n return [];\n });\n }\n return [];\n });\n\n if (activeFilters.length > 0 \|\| search !== '') {\n setResults(() => {\n const filteredResults = initialResults.filter(result => {\n const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;\n const lastUpdatedFilterActive =\n activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;\n\n let matchesStatusFilter = !statusFilterActive;\n let matchesLastUpdatedFilter = !lastUpdatedFilterActive;\n\n activeFilters.forEach(filter => {\n result.meta?.forEach(tag => {\n if (tag) {\n if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {\n matchesStatusFilter = true;\n }\n if (\n !matchesLastUpdatedFilter &&\n filter.groupName === 'Last updated' &&\n typeof tag === 'string' &&\n ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) \|\|\n (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) \|\|\n (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) \|\|\n (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))\n ) {\n matchesLastUpdatedFilter = true;\n }\n }\n });\n });\n\n return matchesStatusFilter && matchesLastUpdatedFilter;\n });\n\n return filteredResults.filter(result => {\n if (\n result &&\n (result.description?.toLowerCase().includes(search.toLowerCase()) \|\|\n result.title.toLowerCase().includes(search.toLowerCase()) \|\|\n result.id.toLowerCase().includes(search.toLowerCase()))\n ) {\n return true;\n }\n\n return false;\n });\n });\n } else {\n setResults([]);\n }\n }, [search, filters]);\n\n const handleFilterChange = (changeEvent: FilterEvent) => {\n setFilters(curr => {\n return curr.map(filter => {\n const newFilter = { ...filter };\n if (\n newFilter.name === changeEvent.name &&\n changeEvent.type === 'select' &&\n newFilter.type === 'select'\n ) {\n newFilter.items = newFilter.items.map(item => {\n const newItem = { ...item };\n if (item.id === changeEvent.value.id) newItem.checked = changeEvent.value.checked;\n else if (newFilter.selectType === 'single-select') newItem.checked = false;\n return newItem;\n });\n }\n return newFilter;\n });\n });\n };\n\n const clearAllFilters = () => {\n setFilters(curr => {\n return curr.map(filter => {\n if (filter.type === 'select') {\n filter.items = filter.items.map(item => {\n item.checked = false;\n return item;\n });\n }\n return filter;\n });\n });\n };\n\n const handleClearFilter = (filterName: string) => {\n setFilters(curr => {\n return curr.map(filter => {\n if (filter.name === filterName && filter.type === 'select') {\n filter.items = filter.items.map(item => {\n item.checked = false;\n return item;\n });\n }\n return filter;\n });\n });\n };\n\n const handleShowMore = () => {\n if (limit < results.length) setLimit(curr => curr + 2);\n };\n\n const renderForDisplay = (\n resultsToDisplay: SearchResultsProps['results']\n ): SearchResultsProps['results'] => {\n return resultsToDisplay.map(result => {\n if (result.meta) {\n const metaValues = [...result.meta];\n const renderedMeta = metaValues.map(item => {\n if (!Number.isNaN(Date.parse(item as string))) {\n if (\n Date.parse(item as string) >= Date.parse('12/01/20') &&\n Date.parse(item as string) < Date.parse('12/25/20')\n )\n return 'Updated 1 month ago';\n if (\n Date.parse(item as string) >= Date.parse('12/25/20') &&\n Date.parse(item as string) < Date.parse('12/31/20')\n )\n return 'Updated 1 week ago';\n if (\n Date.parse(item as string) >= Date.parse('12/31/20') &&\n Date.parse(item as string) < Date.parse('01/01/21')\n )\n return 'Updated yesterday';\n if (\n Date.parse(item as string) >= Date.parse('01/01/21') &&\n Date.parse(item as string) < Date.parse('01/01/21 07:00:00')\n )\n return 'Updated today';\n return 'Updated just now';\n }\n switch (item) {\n case 'Completed':\n return <Status variant='success'>Completed</Status>;\n case 'Ready':\n return <Status variant='info'>Ready</Status>;\n case 'Pending':\n return <Status variant='pending'>Pending</Status>;\n case 'Blocked':\n return <Status variant='urgent'>Blocked</Status>;\n case 'Low priority':\n return <Text variant='secondary'>Low priority</Text>;\n case 'Medium priority':\n return (\n <Text as={ColoredText} colorVariant='warn' variant='secondary'>\n Medium priority\n </Text>\n );\n case 'High priority':\n return (\n <Text as={ColoredText} colorVariant='urgent' variant='secondary'>\n High priority\n </Text>\n );\n default:\n return item;\n }\n });\n return { ...result, meta: renderedMeta };\n }\n return result;\n });\n };\n\n const searchResults = (\n <>\n <SearchResults\n results={\n limit < results.length\n ? renderForDisplay(results.slice(0, limit))\n : renderForDisplay(results)\n }\n searchInputProps={{ value: search, onSearchChange: setSearch }}\n count={results.length}\n filters={filters}\n onFilterChange={handleFilterChange}\n onClearAllFilters={clearAllFilters}\n onClearFilter={handleClearFilter}\n onShowMore={limit < results.length ? handleShowMore : undefined}\n loading={args.loading}\n />\n\n <CasePreview\n open={!!preview}\n caseId={preview?.id \|\| ''}\n heading={preview?.title \|\| ''}\n tabs={{\n items: [],\n currentTabId: previewTabId \|\| '',\n onClick: (id: string) => setPreviewTabId(id)\n }}\n followed\n summary={preview && <Flex container={{ pad: 2 }}>{preview.description}</Flex>}\n onBeforeClose={() => {\n setPreview(undefined);\n }}\n />\n </>\n );\n\n return args.withAppShell ? (\n <AppShellDemo appHeader main={searchResults} searchPage />\n ) : (\n searchResults\n );\n};\n\nSearchResultsDemo.args = {\n withAppShell: false,\n loading: false\n};\n\nSearchResultsDemo.argTypes = {\n withAppShell: { control: { type: 'boolean' } },\n loading: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"SearchResults.stories.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAc,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EACL,WAAW,EACX,aAAa,EAId,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AASV,MAAM,CAAC,MAAM,iBAAiB,GAAmC,CAC/D,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA0B,CAAC;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB,CAAC;IACvE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,UAAU,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC,CAAC;IACzF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,gBAAgB,GAAG,MAAM,EAAiC,CAAC;IAEjE,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,OAAO,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBAChC,IAAI,IAAI,CAAC,OAAO,EAAE;wBAChB,OAAO;4BACL,EAAE,EAAE,IAAI,CAAC,EAAE;4BACX,IAAI,EAAE,IAAI,CAAC,IAAI;4BACf,SAAS,EAAE,KAAK,CAAC,IAAI;yBACtB,CAAC;qBACH;oBACD,OAAO,EAAE,CAAC;gBACZ,CAAC,CAAC,CAAC;aACJ;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,SAAiB,EACjB,aAAgE,EAChE,EAAE;QACF,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;YACrD,MAAM,kBAAkB,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YACzF,MAAM,uBAAuB,GAC3B,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;YAEtE,IAAI,mBAAmB,GAAG,CAAC,kBAAkB,CAAC;YAC9C,IAAI,wBAAwB,GAAG,CAAC,uBAAuB,CAAC;YAExD,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE;oBACzB,IAAI,GAAG,EAAE;wBACP,IAAI,CAAC,mBAAmB,IAAI,MAAM,CAAC,SAAS,KAAK,QAAQ,IAAI,GAAG,KAAK,MAAM,CAAC,IAAI,EAAE;4BAChF,mBAAmB,GAAG,IAAI,CAAC;yBAC5B;wBACD,IACE,CAAC,wBAAwB;4BACzB,MAAM,CAAC,SAAS,KAAK,cAAc;4BACnC,OAAO,GAAG,KAAK,QAAQ;4BACvB,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;gCACrE,CAAC,MAAM,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;gCAC1E,CAAC,MAAM,CAAC,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;gCAC5E,CAAC,MAAM,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAChF;4BACA,wBAAwB,GAAG,IAAI,CAAC;yBACjC;qBACF;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,OAAO,mBAAmB,IAAI,wBAAwB,CAAC;QACzD,CAAC,CAAC,CAAC;QAEH,OAAO,eAAe,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;YACrC,IACE,MAAM;gBACN,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;oBAClE,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;oBAC5D,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC,EAC5D;gBACA,OAAO,IAAI,CAAC;aACb;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;QAEzC,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,KAAK,EAAE,EAAE;YAC7C,IAAI,gBAAgB,CAAC,OAAO;gBAAE,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACrE,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACzC,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;gBAC9C,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,CAAC,EAAE,CAAC,CAAC;SAChB;QAED,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,CAAC,OAAO;gBAAE,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC3C,IAAI,gBAAgB,EAAE,OAAO;YAAE,YAAY,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;QACvE,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACzC,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,WAAwB,EAAE,EAAE;QACtD,UAAU,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBACvB,MAAM,SAAS,GAAG,EAAE,GAAG,MAAM,EAAE,CAAC;gBAChC,IACE,SAAS,CAAC,IAAI,KAAK,WAAW,CAAC,IAAI;oBACnC,WAAW,CAAC,IAAI,KAAK,QAAQ;oBAC7B,SAAS,CAAC,IAAI,KAAK,QAAQ,EAC3B;oBACA,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBAC3C,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC;wBAC5B,IAAI,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,KAAK,CAAC,EAAE;4BAAE,OAAO,CAAC,OAAO,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC;6BAC7E,IAAI,SAAS,CAAC,UAAU,KAAK,eAAe;4BAAE,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;wBAC3E,OAAO,OAAO,CAAC;oBACjB,CAAC,CAAC,CAAC;iBACJ;gBACD,OAAO,SAAS,CAAC;YACnB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,UAAU,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBACvB,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE;oBAC5B,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;wBACrB,OAAO,IAAI,CAAC;oBACd,CAAC,CAAC,CAAC;iBACJ;gBACD,OAAO,MAAM,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,UAAkB,EAAE,EAAE;QAC/C,UAAU,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;gBACvB,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE;oBAC1D,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;wBACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;wBACrB,OAAO,IAAI,CAAC;oBACd,CAAC,CAAC,CAAC;iBACJ;gBACD,OAAO,MAAM,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,KAAK,GAAG,OAAO,CAAC,MAAM;YAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CACvB,gBAA+C,EAChB,EAAE;QACjC,OAAO,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACnC,IAAI,MAAM,CAAC,IAAI,EAAE;gBACf,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;gBACpC,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBACzC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,CAAC,EAAE;wBAC7C,IACE,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;4BACpD,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;4BAEnD,OAAO,qBAAqB,CAAC;wBAC/B,IACE,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;4BACpD,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;4BAEnD,OAAO,oBAAoB,CAAC;wBAC9B,IACE,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;4BACpD,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;4BAEnD,OAAO,mBAAmB,CAAC;wBAC7B,IACE,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;4BACpD,IAAI,CAAC,KAAK,CAAC,IAAc,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC;4BAE5D,OAAO,eAAe,CAAC;wBACzB,OAAO,kBAAkB,CAAC;qBAC3B;oBACD,QAAQ,IAAI,EAAE;wBACZ,KAAK,WAAW;4BACd,OAAO,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,0BAAmB,CAAC;wBACtD,KAAK,OAAO;4BACV,OAAO,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,sBAAe,CAAC;wBAC/C,KAAK,SAAS;4BACZ,OAAO,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB,CAAC;wBACpD,KAAK,SAAS;4BACZ,OAAO,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,wBAAiB,CAAC;wBACnD,KAAK,cAAc;4BACjB,OAAO,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,6BAAoB,CAAC;wBACvD,KAAK,iBAAiB;4BACpB,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,gCAEvD,CACR,CAAC;wBACJ,KAAK,eAAe;4BAClB,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,8BAEzD,CACR,CAAC;wBACJ;4BACE,OAAO,IAAI,CAAC;qBACf;gBACH,CAAC,CAAC,CAAC;gBACH,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;aAC1C;YACD,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CACpB,8BACE,KAAC,aAAa,IACZ,OAAO,EACL,KAAK,GAAG,OAAO,CAAC,MAAM;oBACpB,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;oBAC3C,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAE/B,gBAAgB,EAAE;oBAChB,KAAK,EAAE,MAAM;oBACb,cAAc,EAAE,SAAS;oBACzB,cAAc,EAAE,kBAAkB;oBAClC,oBAAoB,EAAE,QAAQ;iBAC/B,EACD,KAAK,EAAE,OAAO,CAAC,MAAM,EACrB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,kBAAkB,EAClC,iBAAiB,EAAE,eAAe,EAClC,aAAa,EAAE,iBAAiB,EAChC,UAAU,EAAE,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,EAC/D,OAAO,EAAE,aAAa,GACtB,EAEF,KAAC,WAAW,IACV,IAAI,EAAE,CAAC,CAAC,OAAO,EACf,MAAM,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,EACzB,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,EAAE,EAC7B,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE;oBACT,YAAY,EAAE,YAAY,IAAI,EAAE;oBAChC,OAAO,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC;iBAC7C,EACD,QAAQ,QACR,OAAO,EAAE,OAAO,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,YAAG,OAAO,CAAC,WAAW,GAAQ,EAC7E,aAAa,EAAE,GAAG,EAAE;oBAClB,UAAU,CAAC,SAAS,CAAC,CAAC;gBACxB,CAAC,GACD,IACD,CACJ,CAAC;IAEF,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACzB,KAAC,YAAY,IAAC,SAAS,QAAC,IAAI,EAAE,aAAa,EAAE,UAAU,SAAG,CAC3D,CAAC,CAAC,CAAC,CACF,aAAa,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,YAAY,EAAE,KAAK;CACpB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC/C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useMemo, useRef } from 'react';\n\nimport { Status, OmitStrict, Text, Flex } from '@pega/cosmos-react-core';\nimport {\n CasePreview,\n SearchResults,\n SearchResultsProps,\n FilterEvent,\n SearchResultProps\n} from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { getInitialResults, initialFilters } from './SearchResults.mocks';\nimport { ColoredText } from './SearchResults.styles';\n\nexport default {\n title: 'Work/SearchResults',\n component: SearchResults,\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ntype ResultMeta = OmitStrict<SearchResultProps, 'link'>;\n\ninterface SearchResultsStoryProps {\n withAppShell?: boolean;\n loading?: boolean;\n}\n\nexport const SearchResultsDemo: Story<SearchResultsStoryProps> = (\n args: SearchResultsStoryProps\n) => {\n const [preview, setPreview] = useState<undefined \| ResultMeta>();\n const [previewTabId, setPreviewTabId] = useState<undefined \| string>();\n const initialResults = useMemo(() => getInitialResults(setPreview, setPreviewTabId), []);\n const [results, setResults] = useState(initialResults);\n const [filters, setFilters] = useState(initialFilters);\n const [search, setSearch] = useState('');\n const [limit, setLimit] = useState(2);\n const [searchLoading, setSearchLoading] = useState(false);\n const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\n\n const getActiveFilters = () => {\n return filters.flatMap(group => {\n if (group.type === 'select') {\n return group.items.flatMap(item => {\n if (item.checked) {\n return {\n id: item.id,\n name: item.name,\n groupName: group.name\n };\n }\n return [];\n });\n }\n return [];\n });\n };\n\n const getResults = (\n searchStr: string,\n activeFilters: { groupName: string; name: string; id: string }[]\n ) => {\n const filteredResults = initialResults.filter(result => {\n const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;\n const lastUpdatedFilterActive =\n activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;\n\n let matchesStatusFilter = !statusFilterActive;\n let matchesLastUpdatedFilter = !lastUpdatedFilterActive;\n\n activeFilters.forEach(filter => {\n result.meta?.forEach(tag => {\n if (tag) {\n if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {\n matchesStatusFilter = true;\n }\n if (\n !matchesLastUpdatedFilter &&\n filter.groupName === 'Last updated' &&\n typeof tag === 'string' &&\n ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) \|\|\n (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) \|\|\n (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) \|\|\n (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))\n ) {\n matchesLastUpdatedFilter = true;\n }\n }\n });\n });\n\n return matchesStatusFilter && matchesLastUpdatedFilter;\n });\n\n return filteredResults.filter(result => {\n if (\n result &&\n (result.description?.toLowerCase().includes(searchStr.toLowerCase()) \|\|\n result.title.toLowerCase().includes(searchStr.toLowerCase()) \|\|\n result.id.toLowerCase().includes(searchStr.toLowerCase()))\n ) {\n return true;\n }\n\n return false;\n });\n };\n\n useEffect(() => {\n const activeFilters = getActiveFilters();\n\n if (activeFilters.length > 0 \|\| search !== '') {\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n setSearchLoading(true);\n searchTimeoutRef.current = setTimeout(() => {\n setResults(getResults(search, activeFilters));\n setSearchLoading(false);\n }, 1500);\n } else {\n setResults([]);\n }\n\n return () => {\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n };\n }, [filters]);\n\n const handleSearchSubmit = (value: string) => {\n if (searchTimeoutRef?.current) clearTimeout(searchTimeoutRef?.current);\n setSearchLoading(true);\n searchTimeoutRef.current = setTimeout(() => {\n setResults(getResults(value, getActiveFilters()));\n setSearchLoading(false);\n }, 1500);\n };\n\n const handleFilterChange = (changeEvent: FilterEvent) => {\n setFilters(curr => {\n return curr.map(filter => {\n const newFilter = { ...filter };\n if (\n newFilter.name === changeEvent.name &&\n changeEvent.type === 'select' &&\n newFilter.type === 'select'\n ) {\n newFilter.items = newFilter.items.map(item => {\n const newItem = { ...item };\n if (item.id === changeEvent.value.id) newItem.checked = changeEvent.value.checked;\n else if (newFilter.selectType === 'single-select') newItem.checked = false;\n return newItem;\n });\n }\n return newFilter;\n });\n });\n };\n\n const clearAllFilters = () => {\n setFilters(curr => {\n return curr.map(filter => {\n if (filter.type === 'select') {\n filter.items = filter.items.map(item => {\n item.checked = false;\n return item;\n });\n }\n return filter;\n });\n });\n };\n\n const handleClearFilter = (filterName: string) => {\n setFilters(curr => {\n return curr.map(filter => {\n if (filter.name === filterName && filter.type === 'select') {\n filter.items = filter.items.map(item => {\n item.checked = false;\n return item;\n });\n }\n return filter;\n });\n });\n };\n\n const handleShowMore = () => {\n if (limit < results.length) setLimit(curr => curr + 2);\n };\n\n const renderForDisplay = (\n resultsToDisplay: SearchResultsProps['results']\n ): SearchResultsProps['results'] => {\n return resultsToDisplay.map(result => {\n if (result.meta) {\n const metaValues = [...result.meta];\n const renderedMeta = metaValues.map(item => {\n if (!Number.isNaN(Date.parse(item as string))) {\n if (\n Date.parse(item as string) >= Date.parse('12/01/20') &&\n Date.parse(item as string) < Date.parse('12/25/20')\n )\n return 'Updated 1 month ago';\n if (\n Date.parse(item as string) >= Date.parse('12/25/20') &&\n Date.parse(item as string) < Date.parse('12/31/20')\n )\n return 'Updated 1 week ago';\n if (\n Date.parse(item as string) >= Date.parse('12/31/20') &&\n Date.parse(item as string) < Date.parse('01/01/21')\n )\n return 'Updated yesterday';\n if (\n Date.parse(item as string) >= Date.parse('01/01/21') &&\n Date.parse(item as string) < Date.parse('01/01/21 07:00:00')\n )\n return 'Updated today';\n return 'Updated just now';\n }\n switch (item) {\n case 'Completed':\n return <Status variant='success'>Completed</Status>;\n case 'Ready':\n return <Status variant='info'>Ready</Status>;\n case 'Pending':\n return <Status variant='pending'>Pending</Status>;\n case 'Blocked':\n return <Status variant='urgent'>Blocked</Status>;\n case 'Low priority':\n return <Text variant='secondary'>Low priority</Text>;\n case 'Medium priority':\n return (\n <Text as={ColoredText} colorVariant='warn' variant='secondary'>\n Medium priority\n </Text>\n );\n case 'High priority':\n return (\n <Text as={ColoredText} colorVariant='urgent' variant='secondary'>\n High priority\n </Text>\n );\n default:\n return item;\n }\n });\n return { ...result, meta: renderedMeta };\n }\n return result;\n });\n };\n\n const searchResults = (\n <>\n <SearchResults\n results={\n limit < results.length\n ? renderForDisplay(results.slice(0, limit))\n : renderForDisplay(results)\n }\n searchInputProps={{\n value: search,\n onSearchChange: setSearch,\n onSearchSubmit: handleSearchSubmit,\n searchInputAriaLabel: 'Search'\n }}\n count={results.length}\n filters={filters}\n onFilterChange={handleFilterChange}\n onClearAllFilters={clearAllFilters}\n onClearFilter={handleClearFilter}\n onShowMore={limit < results.length ? handleShowMore : undefined}\n loading={searchLoading}\n />\n\n <CasePreview\n open={!!preview}\n caseId={preview?.id \|\| ''}\n heading={preview?.title \|\| ''}\n tabs={{\n items: [],\n currentTabId: previewTabId \|\| '',\n onClick: (id: string) => setPreviewTabId(id)\n }}\n followed\n summary={preview && <Flex container={{ pad: 2 }}>{preview.description}</Flex>}\n onBeforeClose={() => {\n setPreview(undefined);\n }}\n />\n </>\n );\n\n return args.withAppShell ? (\n <AppShellDemo appHeader main={searchResults} searchPage />\n ) : (\n searchResults\n );\n};\n\nSearchResultsDemo.args = {\n withAppShell: false\n};\n\nSearchResultsDemo.argTypes = {\n withAppShell: { control: { type: 'boolean' } }\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "3.0.0-dev.26.0",
+  "version": "3.0.0-dev.27.2",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,14 +20,14 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-build": "3.0.0-dev.26.0",
-    "@pega/cosmos-react-condition-builder": "3.0.0-dev.26.0",
-    "@pega/cosmos-react-core": "3.0.0-dev.26.0",
-    "@pega/cosmos-react-cs": "3.0.0-dev.26.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.26.0",
-    "@pega/cosmos-react-rte": "3.0.0-dev.26.0",
-    "@pega/cosmos-react-social": "3.0.0-dev.26.0",
-    "@pega/cosmos-react-work": "3.0.0-dev.26.0",
+    "@pega/cosmos-react-build": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-condition-builder": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-core": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-cs": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-rte": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-social": "3.0.0-dev.27.2",
+    "@pega/cosmos-react-work": "3.0.0-dev.27.2",
     "@types/emoji-mart": "^3.0.4",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",